Hai

.github/workflows/vrt.yml

@@ -1,9 +1,5 @@
 name: AUTO Visual Regression Test
 on:
-#   push:
-#     branches:
-#       - master
-#       - v7_maintenance
   pull_request:
     branches:
       - master
@@ -24,12 +20,35 @@ jobs:
         run: yarn install --check-files
       - name: Bootstrap project
         run: yarn bootstrap
+      - id: changed_files
+        uses: jitterbit/get-changed-files@v1
+      - name: Calculate changed packages
+        id: changed_packages
+        run: |
+          regexp="ui-[a-z0-9-]*"
+          packages=()
+
+          for changed_file in ${{ steps.changed_files.outputs.all }}; do
+             if [[ $changed_file =~ $regexp ]]; then
+              package_name=$(echo $changed_file | grep -o "$regexp")
+
+              if [[ ! " ${packages[@]} " =~ " ${package_name} " ]]; then
+                packages+=($package_name)
+              fi
+            fi
+          done
+          echo "::set-output name=changed_packages::${packages[@]}"
       - name: Build Storybook examples
-        run: yarn build-storybook
+        run: |
+          cd ./packages/__examples__/
+          yarn build:examples ${{ steps.changed_packages.outputs.changed_packages }}
+          yarn build:storybook
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        run: |
+          cd ./packages/__examples__/__build__
+          ls -al
+      - name: Upload the builded stories directory
+        uses: actions/upload-artifact@v2
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: d8b52d7c3367 # We have to set this as a string so VRT can be run from forked branches as well.
-          exitZeroOnChanges: true
-          storybookBuildDir: ./packages/__examples__/__build__
+          name: builded-storybook-artifact
+          path: ./packages/__examples__/__build__

package.json

@@ -65,7 +65,7 @@
     "generate:sketch": "lerna run generate:sketch --stream --scope docs-examples",
     "husky:pre-commit": "npm-run-all update:package:list commit:package:list lint:staged",
     "husky:pre-push": "yarn lint:commit",
-    "build-storybook": "lerna run build-storybook --stream --scope docs-examples",
+    "build-storybook": "lerna run bundle --stream --scope docs-examples",
     "prepare": "husky install",
     "ts:check": "lerna run ts:check --stream",
     "postinstall": "yarn build:node-scripts"

packages/__examples__/.storybook/stories/stories.js

@@ -26,7 +26,6 @@ import { storiesOf } from '@storybook/react'
 import { renderExample } from './renderExample.js'
 import { renderPage } from './renderPage.js'
 import generateComponentExamples from './generateComponentExamples.js'
-import React from 'react'
 // must be imported with Webpack because this file cannot contain async calls
 import propJSONData from '../../prop-data.json'
 
@@ -47,48 +46,50 @@ const componentsContext = require.context(
 let numStories = 0
 // eslint-disable-next-line no-console
 console.log(
-  `Creating stories for ${examplesContext.keys().length} components..`
+  `Creating stories for ${Object.keys(propJSONData).length} components..`
 )
 
-examplesContext.keys().map((requirePath) => {
-  const exampleDir = requirePath.split('/').slice(0, -2).join('/')
-  const Component = componentsContext(exampleDir + '/index.tsx').default
-  const ExamplesModule = examplesContext(requirePath).default // xy.example.jsx
-  const componentName = Component.displayName || Component.name
-  const generatedPropValues = propJSONData[componentName]
-  // merge in generated prop values:
-  ExamplesModule.propValues = Object.assign(
-    generatedPropValues,
-    ExamplesModule.propValues || {}
-  )
-  ExamplesModule.maxExamples = ExamplesModule.maxExamples
-    ? ExamplesModule.maxExamples
-    : 500
+Object.entries(propJSONData).map(
+  ([componentName, { exampleFilePath, generatedPropValues }]) => {
+    const requirePath = `./${exampleFilePath}`
 
-  const sections = generateComponentExamples(Component, ExamplesModule)
+    const exampleDir = requirePath.split('/').slice(0, -2).join('/')
+    const Component = componentsContext(exampleDir + '/index.tsx').default
+    const ExamplesModule = examplesContext(requirePath).default // xy.example.jsx
+    // merge in generated prop values:
+    ExamplesModule.propValues = Object.assign(
+      generatedPropValues,
+      ExamplesModule.propValues || {}
+    )
+    ExamplesModule.maxExamples = ExamplesModule.maxExamples
+      ? ExamplesModule.maxExamples
+      : 500
 
-  if (sections && sections.length > 0) {
-    const stories = storiesOf(componentName, module)
-    sections.forEach(({ pages, sectionName }) => {
-      pages.forEach((page, i) => {
-        // eslint-disable-next-line no-param-reassign
-        page.renderExample = renderExample
-        numStories++
-        stories.add(
-          `${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
-          renderPage.bind(null, page),
-          {
-            chromatic: {
-              viewports: [1200],
-              pauseAnimationAtEnd: true,
-              delay: 700,
-              ...page.parameters
+    const sections = generateComponentExamples(Component, ExamplesModule)
+
+    if (sections && sections.length > 0) {
+      const stories = storiesOf(componentName, module)
+      sections.forEach(({ pages, sectionName }) => {
+        pages.forEach((page, i) => {
+          // eslint-disable-next-line no-param-reassign
+          page.renderExample = renderExample
+          numStories++
+          stories.add(
+            `${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
+            renderPage.bind(null, page),
+            {
+              chromatic: {
+                viewports: [1200],
+                pauseAnimationAtEnd: true,
+                delay: 700,
+                ...page.parameters
+              }
             }
-          }
-        )
+          )
+        })
       })
-    })
+    }
   }
-})
+)
 // eslint-disable-next-line no-console
 console.log(`Created ${numStories} stories!`)

packages/__examples__/babel.config.js

@@ -22,10 +22,5 @@
  * SOFTWARE.
  */
 module.exports = {
-  shouldPrintComment(value) {
-    const isTsRelatedComment = /@ts-expect-error|FIXME/.test(value)
-
-    return !isTsRelatedComment
-  },
   presets: ['@instructure/ui-babel-preset']
 }

packages/__examples__/buildScripts/build-examples-json.js

@@ -32,26 +32,57 @@ const globby = require('globby')
 const parsePropValues = require('./parsePropValues')
 
 const projectRoot = path.resolve(__dirname, '../../')
-const filesToParse = '**/src/**/*.examples.ts*'
-const files = path.resolve(projectRoot, filesToParse)
-
-const ignorePaths = ['**/node_modules/**', '**/lib/**', '**/es/**']
-const ignore = ignorePaths.map((file) => '!' + path.resolve(projectRoot, file))
-const componentProps = {}
-globby([files, ...ignore]).then((matches) => {
-  matches.map((filepath) => {
+const packages = process.argv.slice(2)
+
+async function buildExamplesJSON(packagesToBuild = []) {
+  const packages = packagesToBuild.length ? packagesToBuild : ['**']
+  const files = packages.map((package) =>
+    path.resolve(projectRoot, `${package}/src/**/*.examples.ts*`)
+  )
+
+  const ignorePaths = ['**/node_modules/**', '**/lib/**', '**/es/**']
+  const ignore = ignorePaths.map(
+    (file) => '!' + path.resolve(projectRoot, file)
+  )
+
+  const matches = await globby([...files, ...ignore])
+  const componentProps = matches.reduce((result, absoluteExampleFilePath) => {
     // path to the component that is tested, e.g. /ui-tag/src/Tag/index.js
-    const componentPath = path.resolve(path.dirname(filepath), '../index.tsx')
+    const componentPath = path.resolve(
+      path.dirname(absoluteExampleFilePath),
+      '../index.tsx'
+    )
+    const componentFilePathParts = componentPath.split('/')
+    const exampleFilePathParts = absoluteExampleFilePath.split('/')
+    const [packageName] = componentFilePathParts.filter((path) =>
+      path.startsWith('ui-')
+    )
+
     const componentSource = fs.readFileSync(componentPath)
     // contains all the prop values and its variants
     const generatedPropValues = parsePropValues(componentSource, componentPath)
-    const pathParts = componentPath.split('/')
-    const componentName = pathParts[pathParts.length - 2]
-    componentProps[componentName] = generatedPropValues
-  })
+    const packageIndex = exampleFilePathParts.findIndex(
+      (value) => value === packageName
+    )
+    const exampleFilePath = exampleFilePathParts.slice(packageIndex).join('/')
+    const componentName =
+      componentFilePathParts[componentFilePathParts.length - 2]
+
+    return {
+      ...result,
+      [componentName]: {
+        generatedPropValues,
+        exampleFilePath
+      }
+    }
+  }, {})
+
   const everything = JSON.stringify(componentProps)
+
   fs.writeFileSync(outputName, everything)
 
   // eslint-disable-next-line no-console
   console.log('finished generating example prop combinations.')
-})
+}
+
+buildExamplesJSON(packages)

packages/__examples__/package.json

@@ -11,15 +11,16 @@
   "homepage": "https://instructure.github.io/instructure-ui/",
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "scripts": {
-    "prestart": "node buildScripts/build-examples-json.js && yarn bundle",
-    "start": " ui-scripts --server -p 9001",
-    "start:watch": "node buildScripts/build-examples-json.js && ui-build --examples --watch -p 9090",
-    "build-storybook": "yarn bundle",
+    "prestart": "yarn build:examples && yarn bundle",
+    "start": "ui-scripts --server -p 9001",
+    "start:watch": "yarn build:examples && ui-build --examples --watch -p 9090",
     "test:vrt": "ui-test --vrt -p 9001",
     "accept:vrt": "ui-test --vrt -p 9001 --auto-accept-changes",
-    "bundle": "node buildScripts/build-examples-json.js && ui-build --examples",
+    "bundle": "yarn build:examples && ui-build --examples",
     "clean": "ui-scripts --clean",
-    "generate:sketch": "story2sketch --url http://localhost:9001/iframe.html --output stories.asketch.json"
+    "generate:sketch": "story2sketch --url http://localhost:9001/iframe.html --output stories.asketch.json",
+    "build:storybook": "ui-build --examples",
+    "build:examples": "node buildScripts/build-examples-json.js"
   },
   "license": "MIT",
   "dependencies": {
@@ -31,8 +32,8 @@
     "@instructure/ui-icons": "8.6.0",
     "@instructure/ui-tooltip": "8.6.0",
     "@instructure/ui-view": "8.6.0",
-    "@instructure/uid": "8.6.0",
     "@instructure/ui-webpack-config": "8.6.0",
+    "@instructure/uid": "8.6.0",
     "@storybook/addons": "6.1.21",
     "@storybook/react": "6.1.21",
     "@storybook/theming": "6.1.21",
@@ -45,7 +46,7 @@
   "devDependencies": {
     "@instructure/ui-test-utils": "8.6.0",
     "globby": "^11",
-    "react-docgen": "^5",
-    "prop-types": "^15"
+    "prop-types": "^15",
+    "react-docgen": "^5"
   }
 }