[WIP] HTML Templates snapshots/markup

.github/workflows/_create-screenshots.yml

@@ -58,11 +58,20 @@ jobs:
       - name: Create screenshots
         run: ./build/create-screenshots.sh ${{ matrix.theme }}
 
-      - name: Pack screenshots
-        run: tar -cf screenshots-${{ matrix.theme }}.tar tests/_output/${{ matrix.theme }}
+      - name: Pack test screenshots
+        run: tar -cf test-screenshots-${{ matrix.theme }}.tar tests/_output/${{ matrix.theme }}
 
-      - name: Upload screenshots
+      - name: Pack template screenshots
+        run: tar -cf template-screenshots-${{ matrix.theme }}.tar templates/_output/${{ matrix.theme }}
+
+      - name: Upload test screenshots
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-screenshots-${{ matrix.theme }}
+          path: test-screenshots-${{ matrix.theme }}.tar
+
+      - name: Upload template screenshots
         uses: actions/upload-artifact@v3
         with:
-          name: screenshots-${{ matrix.theme }}
-          path: screenshots-${{ matrix.theme }}.tar
+          name: template-screenshots-${{ matrix.theme }}
+          path: template-screenshots-${{ matrix.theme }}.tar

.github/workflows/_render-test-pages.yml

@@ -151,10 +151,53 @@ jobs:
             echo "Test pages will NOT be uploaded" >> $GITHUB_STEP_SUMMARY
           fi
 
+      - name: Pack template pages
+        env:
+          UPLOAD_POLICY: ${{ inputs.upload-policy }}
+        run: |
+          HAS_CHANGES=NO
+          git add .
+          git diff --cached --exit-code --quiet -- templates/ || HAS_CHANGES=YES
+
+          echo "Has changes: $HAS_CHANGES"
+          echo "HAS_CHANGES=$HAS_CHANGES" >> $GITHUB_ENV
+
+          echo "Run summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- Upload policy: $UPLOAD_POLICY" >> $GITHUB_STEP_SUMMARY
+          echo "- Has changes: $HAS_CHANGES" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+
+          if [ $UPLOAD_POLICY = always ]
+          then
+            tar --exclude templates/_output -cf template-pages.tar templates
+          fi
+
+          if [ $UPLOAD_POLICY = conditionally ] && [ $HAS_CHANGES = YES ]
+          then
+            git diff --cached --name-only -- templates/ | xargs tar --exclude templates/_output -cf template-pages.tar
+          fi
+
+          if [ $UPLOAD_POLICY = always ] || ( [ $UPLOAD_POLICY = conditionally ] && [ $HAS_CHANGES = YES ] )
+          then
+            echo "Template pages will be uploaded" >> $GITHUB_STEP_SUMMARY
+            echo "Number of files uploaded: $(tar -tf template-pages.tar | wc -l)" >> $GITHUB_STEP_SUMMARY
+          else
+            echo "Template pages will NOT be uploaded" >> $GITHUB_STEP_SUMMARY
+          fi
+
       - name: Upload test pages
         if: ${{ inputs.upload-policy != 'never' }}
         uses: actions/upload-artifact@v3
         with:
           name: test-pages
           path: test-pages.tar
           if-no-files-found: warn
+
+      - name: Upload template pages
+        if: ${{ inputs.upload-policy != 'never' }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: template-pages
+          path: template-pages.tar
+          if-no-files-found: warn

.github/workflows/ci.yml

@@ -53,8 +53,8 @@ jobs:
         run: |
           HAS_CHANGES=0
           HAS_NEW=0
-          git diff --exit-code --quiet -- tests/ || HAS_CHANGES=1
-          [[ $(git ls-files --others --exclude-standard tests/) ]] && HAS_NEW=1
+          git diff --exit-code --quiet -- tests/ templates/ || HAS_CHANGES=1
+          [[ $(git ls-files --others --exclude-standard tests/ templates/) ]] && HAS_NEW=1
           echo "HAS_CHANGES=$HAS_CHANGES" >> $GITHUB_ENV
           echo "HAS_NEW=$HAS_NEW" >> $GITHUB_ENV
 
@@ -71,6 +71,7 @@ jobs:
           echo "Visual tests have detected changes. Updating markup and screenshots."
 
           git add tests/
+          git add templates/
           git commit -m "chore: update visual previews"
 
           git push

build/create-screenshots.sh

@@ -3,8 +3,10 @@ set -e
 shopt -s extglob
 
 THEME="${1:-default}"
-TEMP_DIR=".tmp/visual/"
-THEME_DIR="$TEMP_DIR/$THEME"
+TESTS_TEMP_DIR=".tmp/visual/tests/"
+TEMPLATES_TEMP_DIR=".tmp/visual/templates/"
+THEME_TEST_DIR="$TESTS_TEMP_DIR/$THEME"
+THEME_TEMPLATES_DIR="$TEMPLATES_TEMP_DIR/$THEME"
 
 if [ -z "$THEME" ]; then
     echo "Usage: create-screenshots <default|bootstrap|material|classic>"
@@ -13,17 +15,32 @@ else
     echo "Creating screenshots for theme '$THEME'"
 fi
 
-mkdir -p "$THEME_DIR"
-cp -r tests/!(_output) $THEME_DIR
-cp -r packages/html/assets $THEME_DIR
-cp packages/$THEME/dist/all.css $THEME_DIR/assets/all.css
+mkdir -p "$THEME_TEST_DIR"
+cp -r tests/!(_output) $THEME_TEST_DIR
+cp -r packages/html/assets $THEME_TEST_DIR
+cp packages/$THEME/dist/all.css $THEME_TEST_DIR/assets/all.css
 
 # replace references
-find "$THEME_DIR" -name '*.html' -print0 | xargs -0 sed -i -E \
+find "$THEME_TEST_DIR" -name '*.html' -print0 | xargs -0 sed -i -E \
     -e "s#/packages/default/dist/#../assets/#" \
     -e "s#/packages/html/assets/#../assets/#"
 
 npx snapshot \
-    --serve "$THEME_DIR/**/*.html" \
+    --serve "$THEME_TEST_DIR/**/*.html" \
     --port $((RANDOM % 1000 + 8000)) \
     --output "./tests/_output/$THEME"
+
+mkdir -p "$THEME_TEMPLATES_DIR"
+cp -r templates/!(_output) $THEME_TEMPLATES_DIR
+cp -r packages/html/assets $THEME_TEMPLATES_DIR
+cp packages/$THEME/dist/all.css $THEME_TEMPLATES_DIR/assets/all.css
+
+# replace references
+find "$THEME_TEMPLATES_DIR" -name '*.html' -print0 | xargs -0 sed -i -E \
+    -e "s#/packages/default/dist/#../assets/#" \
+    -e "s#/packages/html/assets/#../assets/#"
+
+npx snapshot \
+    --serve "$THEME_TEMPLATES_DIR/**/*.html" \
+    --port $((RANDOM % 1000 + 8000)) \
+    --output "./templates/_output/$THEME"

packages/html/scripts/build-tests.js

@@ -4,7 +4,8 @@ const esbuild = require("esbuild");
 const { globSync } = require("glob");
 const config = require("./config");
 
-const tests = globSync("./src/**/tests/**/*.tsx", { dotRelative: true });
+const tests = globSync("./src/{**/tests,!(utils)/templates}/**/*.tsx", { dotRelative: true });
+
 const index = fs.readFileSync(p.resolve("./shared/index.html"), "utf-8");
 
 (async() => {

packages/html/src/action-sheet/templates/action-sheet-left.tsx

@@ -3,3 +3,5 @@ import { ActionSheetNormal } from './action-sheet-normal';
 export const ActionSheetLeft = (props) => (
     <ActionSheetNormal side="left" {...props}/>
 );
+
+export default ActionSheetLeft;

packages/html/src/action-sheet/templates/action-sheet-normal.tsx

@@ -13,3 +13,5 @@ export const ActionSheetNormal = (props) => (
     {...props}>
     </ActionSheet>
 );
+
+export default ActionSheetNormal;

packages/html/src/action-sheet/templates/action-sheet-right.tsx

@@ -3,3 +3,5 @@ import { ActionSheetNormal } from './action-sheet-normal';
 export const ActionSheetRight = (props) => (
     <ActionSheetNormal side="right" {...props}/>
 );
+
+export default ActionSheetRight;

packages/html/src/action-sheet/templates/action-sheet-top.tsx

@@ -3,3 +3,5 @@ import { ActionSheetNormal } from './action-sheet-normal';
 export const ActionSheetTop = (props) => (
     <ActionSheetNormal side="top" {...props}/>
 );
+
+export default ActionSheetTop;

packages/html/src/appbar/templates/appbar-normal.tsx

@@ -29,3 +29,5 @@ export const AppbarNormal = (props) => (
     {...props} >
     </Appbar>
 );
+
+export default AppbarNormal;

packages/html/src/autocomplete/templates/autocomplete-adaptive.tsx

@@ -5,4 +5,6 @@ export const AutocompleteAdaptive = (props) => (
         adaptive={true}
         {...props}
     />
-);
+);
+
+export default AutocompleteAdaptive;

packages/html/src/autocomplete/templates/autocomplete-grouping-modern.tsx

@@ -22,3 +22,5 @@ export const AutocompleteGroupingModern = (props) => (
         {...props}
     />
 );
+
+export default AutocompleteGroupingModern;

packages/html/src/autocomplete/templates/autocomplete-grouping.tsx

@@ -21,3 +21,5 @@ export const AutocompleteGrouping = (props) => (
         {...props}
     />
 );
+
+export default AutocompleteGrouping;

packages/html/src/autocomplete/templates/autocomplete-normal.tsx

@@ -1,3 +1,5 @@
 import Autocomplete from "../autocomplete.spec";
 
-export const AutocompleteNormal = (props) => <Autocomplete {...props} />;
+export const AutocompleteNormal = (props) => <Autocomplete {...props} />;
+
+export default AutocompleteNormal;

packages/html/src/autocomplete/templates/autocomplete-popup.tsx

@@ -14,3 +14,5 @@ export const AutocompletePopup = (props) => (
         {...props}
     />
 );
+
+export default AutocompletePopup;

packages/html/src/autocomplete/templates/autocomplete-prefix.tsx

@@ -11,3 +11,5 @@ export const AutocompletePrefix = (props) => (
         {...props}
     />
 );
+
+export default AutocompletePrefix;

packages/html/src/autocomplete/templates/autocomplete-suffix.tsx

@@ -11,3 +11,5 @@ export const AutocompleteSuffix = (props) => (
         {...props}
     />
 );
+
+export default AutocompleteSuffix;

packages/html/src/avatar/templates/avatar-icon.tsx

@@ -1,3 +1,5 @@
 import Avatar from "../avatar.spec";
 
 export const AvatarIcon = (props: any) => <Avatar type="icon" {...props} />;
+
+export default AvatarIcon;

packages/html/src/avatar/templates/avatar-image.tsx

@@ -1,3 +1,5 @@
 import Avatar from "../avatar.spec";
 
 export const AvatarImage = (props: any) => <Avatar type="image" {...props} />;
+
+export default AvatarImage;

packages/html/src/avatar/templates/avatar-text.tsx

@@ -1,3 +1,5 @@
 import Avatar from "../avatar.spec";
 
 export const AvatarText = (props: any) => <Avatar type="text" {...props} />;
+
+export default AvatarText;

packages/html/src/badge/templates/badge-normal.tsx

@@ -1,3 +1,5 @@
 import { Badge } from "..";
 
 export const BadgeNormal = (props) => <Badge {...props}/>;
+
+export default BadgeNormal;

packages/html/src/badge/templates/icon-badge.tsx

@@ -9,3 +9,5 @@ export const IconBadge = (props) =>
         {...props}
     />
 ;
+
+export default IconBadge;

packages/html/src/bottom-nav/templates/bottom-nav-icons.tsx

@@ -13,3 +13,5 @@ export const BottomNavIcons = (props) => (
     >
     </BottomNav>
 );
+
+export default BottomNavIcons;

packages/html/src/bottom-nav/templates/bottom-nav-links.tsx

@@ -13,3 +13,5 @@ export const BottomNavLinks = (props) => (
     >
     </BottomNav>
 );
+
+export default BottomNavLinks;

packages/html/src/bottom-nav/templates/bottom-nav-normal.tsx

@@ -13,3 +13,5 @@ export const BottomNavNormal = (props) => (
     >
     </BottomNav>
 );
+
+export default BottomNavNormal;

packages/html/src/breadcrumb/templates/breadcrumb-collapsing-auto.tsx

@@ -37,3 +37,5 @@ export const BreadcrumbCollapsingAuto = ({ dir, ...other }: any) => (
         {...other}>
     </Breadcrumb>
 );
+
+export default BreadcrumbCollapsingAuto;

packages/html/src/breadcrumb/templates/breadcrumb-collapsing-none.tsx

@@ -37,3 +37,5 @@ export const BreadcrumbCollapsingNone = ({ dir, ...other }: any) => (
         {...other}>
     </Breadcrumb>
 );
+
+export default BreadcrumbCollapsingNone;

packages/html/src/breadcrumb/templates/breadcrumb-collapsing-wrap.tsx

@@ -51,3 +51,5 @@ export const BreadcrumbCollapsingWrap = ({ dir, ...other }: any) => (
         {...other}>
     </Breadcrumb>
 );
+
+export default BreadcrumbCollapsingWrap;

packages/html/src/button-group/templates/icon-button-group.tsx

@@ -10,3 +10,5 @@ export const IconButtonGroup = (props) => (
         </>
     } />
 );
+
+export default IconButtonGroup;

packages/html/src/button-group/templates/icon-text-button-group.tsx

@@ -10,3 +10,5 @@ export const IconTextButtonGroup = (props) => (
         </>
     } />
 );
+
+export default IconTextButtonGroup;

packages/html/src/button-group/templates/mixed-button-group.tsx

@@ -10,3 +10,5 @@ export const MixedButtonGroup = (props) => (
         </>
     } />
 );
+
+export default MixedButtonGroup;

packages/html/src/button-group/templates/text-button-group.tsx

@@ -10,3 +10,5 @@ export const TextButtonGroup = (props) => (
         </>
     } />
 );
+
+export default TextButtonGroup;

packages/html/src/button/templates/icon-button.tsx

@@ -1,3 +1,5 @@
 import { Button } from "../button.spec";
 
 export const IconButton = (props) => <Button icon="folder" {...props} children={undefined} />;
+
+export default IconButton;

packages/html/src/button/templates/icon-text-button.tsx

@@ -1,3 +1,5 @@
 import { Button } from "../button.spec";
 
 export const IconTextButton = (props) => <Button icon="folder" children="Button" {...props} />;
+
+export default IconTextButton;

packages/html/src/button/templates/text-button.tsx

@@ -1,3 +1,5 @@
 import { Button } from "../button.spec";
 
 export const TextButton = (props) => <Button children="Button" {...props} />;
+
+export default TextButton;

packages/html/src/calendar/templates/calendar-century.tsx

@@ -27,3 +27,5 @@ export const CalendarCentury = ({ showOtherCentury, ...props }: any) => (
         {...props}
     />
 );
+
+export default CalendarCentury;

packages/html/src/calendar/templates/calendar-decade.tsx

@@ -27,3 +27,5 @@ export const CalendarDecade = ({ showOtherDecade, ...props }: any) => (
         {...props}
     />
 );
+
+export default CalendarDecade;

packages/html/src/calendar/templates/calendar-infinite-century.tsx

@@ -40,3 +40,5 @@ export const CalendarInfiniteCentury = ({ firstCaption = "2000 - 2099", ...other
 
     </CalendarInfinite>
 );
+
+export default CalendarInfiniteCentury;

packages/html/src/calendar/templates/calendar-infinite-decade.tsx

@@ -66,3 +66,5 @@ export const CalendarInfiniteDecade = ({ firstCaption = "2020 - 2029", secondCap
 
     </CalendarInfinite>
 );
+
+export default CalendarInfiniteDecade;

packages/html/src/calendar/templates/calendar-infinite-normal.tsx

@@ -84,3 +84,5 @@ export const CalendarInfiniteNormal = ({ firstCaption = "January 2021", secondCa
 
     </CalendarInfinite>
 );
+
+export default CalendarInfiniteNormal;

packages/html/src/calendar/templates/calendar-infinite-week-number.tsx

@@ -89,3 +89,5 @@ export const CalendarInfiniteWeekNumber = ({ firstCaption = "January 2021", seco
 
     </CalendarInfinite>
 );
+
+export default CalendarInfiniteWeekNumber;

packages/html/src/calendar/templates/calendar-infinite-year.tsx

@@ -70,3 +70,5 @@ export const CalendarInfiniteYear = ({ firstCaption = "2021", secondCaption = "2
 
     </CalendarInfinite>
 );
+
+export default CalendarInfiniteYear;

packages/html/src/calendar/templates/calendar-normal.tsx

@@ -63,3 +63,5 @@ export const CalendarNormal = ({ showCaptions, showOtherMonth, ...props }: any)
         {...props}
     />
 );
+
+export default CalendarNormal;

packages/html/src/calendar/templates/calendar-with-weeks.tsx

@@ -69,3 +69,5 @@ export const CalendarWithWeeks = ({ showOtherMonth, ...props }: any) => (
         {...props}
     />
 );
+
+export default CalendarWithWeeks;