Merge remote-tracking branch 'upstream/INSTUI-3154/only-send-changed-…

…stories-to-chromatic' into hai

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"
   }
 }