chore(ui-component-examples,ui-theme-tokens): switch component exampl…

…es loader to cjs refs: INSTUI-2559 TEST PLAN: - Component examples should load using `yarn dev:examples` and `yarn start:examples` in all supported browsers (Note: legacy edge will not load them because the bundle size is too big to load. This is fine.) BREAKING CHANGE: - renderPage and renderExample are no longer supplied by the webpack component-examples-loader Change-Id: I5c632274264d7c934abc86f41399b8a7cda23e26 Reviewed-on: https://gerrit.instructure.com/c/instructure-ui/+/236873 Tested-by: Service Cloud Jenkins <[email protected]> Reviewed-by: Ken Meleta <[email protected]> Product-Review: Ken Meleta <[email protected]> QA-Review: Daniel Sasaki <[email protected]> Visual-Regression-Test: Steve Jensen <[email protected]>
instructure · May 12, 2020 · 3abd6ca · 3abd6ca
1 parent df2c642
commit 3abd6ca
Show file tree

Hide file tree

Showing 20 changed files with 141 additions and 163 deletions.
diff --git a/docs/guides/v7-upgrade-guide.md b/docs/guides/v7-upgrade-guide.md
@@ -266,6 +266,9 @@ DateTimeInput has been removed from ui-forms. See a __read only__ example of imp
 <!-- ///////////////////////////////////// -->
 
 ### Select
-Select within the ui-forms package has been removed; use [Select](/#Select) from `ui-select` instead. Similar to DateInput, Select is a controlled only component that will need to be composed in the consuming app. Examples are available for managing state within this new component. 
+Select within the ui-forms package has been removed; use [Select](#Select) from `ui-select` instead. Similar to DateInput, Select is a controlled only component that will need to be composed in the consuming app. Examples are available for managing state within this new component. 
 
 __Important note:__ If you do not need the level of customization that ui-select/Select provides, use SimpleSelect instead (available from the `ui-simple-select` package). SimpleSelect closely parallels the functionality of a standard HTML `<select>`. View the [SimpleSelect documentation](#SimpleSelect) for detailed examples.
+
+### Component Examples Loader
+If you are using the webpack component examples loader from [ui-component-examples](#ui-component-examples) note that the default functions for `renderPage` and `renderExample` are no longer supplied by the loader. These should be implemented in the consuming app.
diff --git a/packages/__examples__/.storybook/config.js b/packages/__examples__/.storybook/config.js
@@ -24,8 +24,6 @@
 
 // eslint-disable-next-line import/no-unresolved
 import '@instructure/ui-polyfill-loader!'
-
-import React from 'react'
 import 'storybook-chromatic'
 
 import { create } from '@storybook/theming'
@@ -34,6 +32,9 @@ import { getStorybook, storiesOf, configure, addParameters } from '@storybook/re
 import { theme } from '@instructure/canvas-theme'
 theme.use({ overrides: { transitions: { duration: '0ms' } } })
 
+import { renderExample } from './renderExample'
+import { renderPage } from './renderPage'
+
 // eslint-disable-next-line no-console
 console.log('Generating component examples...')
 
@@ -58,7 +59,7 @@ configure(() => {
   console.log(`Creating stories for ${examplesContext.keys().length} components...`)
 
   examplesContext.keys().map((requirePath) => {
-    examplesContext(requirePath).then(({ componentName, sections, renderPage, renderExample }) => {
+    examplesContext(requirePath).then(({ componentName, sections }) => {
       if (sections && sections.length > 0) {
         const stories = storiesOf(componentName, module)
 
@@ -68,7 +69,7 @@ configure(() => {
             numStories++
             stories
               .add(
-                `${sectionName}${pages.length > 1 ? ` (page ${i+1})` : ''}`,
+                `${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
                 renderPage.bind(null, page),
                 { chromatic: page.parameters }
               )

diff --git a/...i-component-examples/src/renderExample.js → .../__examples__/.storybook/renderExample.js b/...i-component-examples/src/renderExample.js → .../__examples__/.storybook/renderExample.js
@@ -21,13 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react'
 import { View } from '@instructure/ui-view'
 import { Tooltip } from '@instructure/ui-tooltip'
 import { IconButton } from '@instructure/ui-buttons'
 import { IconInfoLine } from '@instructure/ui-icons'
 
-export default function renderExample ({ Component, componentProps, exampleProps, key }) {
+export function renderExample({ Component, componentProps, exampleProps, key }) {
   return (
     <View
       key={key}
@@ -42,7 +43,7 @@ export default function renderExample ({ Component, componentProps, exampleProps
     >
       <Component {...componentProps} />
       <Tooltip
-        renderTip={<pre>{JSON.stringify(componentProps,null,2)}</pre>}
+        renderTip={<pre>{JSON.stringify(componentProps, null, 2)}</pre>}
         placement="bottom"
         on={['click']}
       >

diff --git a/...s/ui-component-examples/src/renderPage.js → ...ges/__examples__/.storybook/renderPage.js b/...s/ui-component-examples/src/renderPage.js → ...ges/__examples__/.storybook/renderPage.js
@@ -26,10 +26,10 @@ import React from 'react'
 import { ApplyLocale } from '@instructure/ui-i18n'
 
 // eslint-disable-next-line react/prop-types
-export default function renderPage ({ examples, renderExample }) {
+export function renderPage({ examples, renderExample }) {
   return (
     <ApplyLocale locale="en-US">
-      { examples.map(renderExample) }
+      {examples.map(renderExample)}
     </ApplyLocale>
   )
 }
diff --git a/packages/__examples__/package.json b/packages/__examples__/package.json
@@ -26,7 +26,12 @@
     "@babel/runtime": "^7.9.2",
     "@instructure/canvas-theme": "^6.26.0",
     "@instructure/ui-babel-preset": "^6.26.0",
+    "@instructure/ui-buttons": "^6.26.0",
     "@instructure/ui-component-examples": "^6.26.0",
+    "@instructure/ui-i18n": "^6.26.0",
+    "@instructure/ui-icons": "^6.26.0",
+    "@instructure/ui-tooltip": "^6.26.0",
+    "@instructure/ui-view": "^6.26.0",
     "@instructure/ui-webpack-config": "^6.26.0",
     "@storybook/react": "^5.2.1",
     "@storybook/theming": "^5.2.1",

diff --git a/packages/ui-component-examples/.eslintignore b/packages/ui-component-examples/.eslintignore
@@ -1,3 +1 @@
 /node_modules/**
-/lib/**
-/es/**
diff --git a/packages/ui-component-examples/.gitignore b/packages/ui-component-examples/.gitignore
diff --git a/packages/ui-component-examples/README.md b/packages/ui-component-examples/README.md
@@ -44,12 +44,14 @@ module.exports = {
 }
 ```
 
+> Note: As of version 7, the component examples loader does not include default functions for `renderPage` and `renderExample`. These should be provided in the client of the consumer.
+
 #### Calling the `generateComponentExamples` function directly
 
 The `generateComponentExamples` function can be called directly as follows:
 
 ```js
-import generateComponentExamples from '@instructure/ui-component-examples'
+import { generateComponentExamples } from '@instructure/ui-component-examples'
 
 const result = generateComponentExamples(config)
 ```

diff --git a/packages/ui-component-examples/babel.config.js b/packages/ui-component-examples/babel.config.js
diff --git a/...tests__/generateComponentExamples.test.js → ...tests__/generateComponentExamples.test.js b/...tests__/generateComponentExamples.test.js → ...tests__/generateComponentExamples.test.js
@@ -27,26 +27,25 @@ import { expect } from '@instructure/ui-test-utils'
 
 import generateComponentExamples from '../generateComponentExamples'
 
-export default class TestComponent extends Component {
-  static propTypes = {
-    variant: PropTypes.oneOf(['circle', 'rectangle']),
-    show: PropTypes.bool,
-    message: PropTypes.object,
-    children: PropTypes.node
-  }
 
-  static defaultProps = {
-    variant: 'circle',
-    show: true,
-    message: null,
-    children: null
+class TestComponent extends Component {
+  render() {
+    return React.createElement('span')
   }
+}
 
-  render () {
-    return (
-      <span>{this.props.children}</span>
-    )
-  }
+TestComponent.propTypes = {
+  variant: PropTypes.oneOf(['circle', 'rectangle']),
+  show: PropTypes.bool,
+  message: PropTypes.object,
+  children: PropTypes.node
+}
+
+TestComponent.defaultProps = {
+  variant: 'circle',
+  show: true,
+  message: null,
+  children: null
 }
 
 describe('generateComponentExamples', () => {
@@ -63,27 +62,27 @@ describe('generateComponentExamples', () => {
     }
 
     expect(generateComponentExamples(TestComponent, config))
-    .excludingEvery(['key'])
-    .to.deep.equal([
-      {
-        sectionName: 'circle',
-        propName: 'variant',
-        propValue: 'circle',
-        pages: [
-          {
-            examples: [
-              {
-                Component: TestComponent,
-                componentProps: { variant: 'circle', show: true },
-                exampleProps: {}
-              }
-            ],
-            parameters: { delay: 200 },
-            index: 0
-          }
-        ]
-      }
-    ])
+      .excludingEvery(['key'])
+      .to.deep.equal([
+        {
+          sectionName: 'circle',
+          propName: 'variant',
+          propValue: 'circle',
+          pages: [
+            {
+              examples: [
+                {
+                  Component: TestComponent,
+                  componentProps: { variant: 'circle', show: true },
+                  exampleProps: {}
+                }
+              ],
+              parameters: { delay: 200 },
+              index: 0
+            }
+          ]
+        }
+      ])
   })
   it('should work with propValues defined', () => {
     const config = {

diff --git a/..._tests__/generatePropCombinations.test.js → ..._tests__/generatePropCombinations.test.js b/..._tests__/generatePropCombinations.test.js → ..._tests__/generatePropCombinations.test.js
@@ -32,17 +32,17 @@ describe('generatePropCombinations', () => {
   })
 
   it('should work for a single prop/value', () => {
-    expect(generatePropCombinations({ foo: ['a']}))
-      .to.deep.equal([{foo: 'a'}])
+    expect(generatePropCombinations({ foo: ['a'] }))
+      .to.deep.equal([{ foo: 'a' }])
   })
 
   it('should work for multiple values', () => {
     expect(generatePropCombinations({
       foo: ['a', 'b']
     }))
       .to.deep.equal([
-        {foo: 'a'},
-        {foo: 'b'}
+        { foo: 'a' },
+        { foo: 'b' }
       ])
   })
 
@@ -53,10 +53,10 @@ describe('generatePropCombinations', () => {
     })
     expect(result)
       .to.deep.equal([
-       {foo: 1, bar: 'a'},
-       {foo: 2, bar: 'a'},
-       {foo: 1, bar: 'b'},
-       {foo: 2, bar: 'b'}
+        { foo: 1, bar: 'a' },
+        { foo: 2, bar: 'a' },
+        { foo: 1, bar: 'b' },
+        { foo: 2, bar: 'b' }
       ])
   })
 
@@ -67,30 +67,30 @@ describe('generatePropCombinations', () => {
     })
     expect(result)
       .to.deep.equal([
-       {foo: 1, bar: 'a'},
-       {foo: 2, bar: 'a'},
-       {foo: 1, bar: 'b'},
-       {foo: 2, bar: 'b'},
-       {foo: 1, bar: 'c'},
-       {foo: 2, bar: 'c'}
+        { foo: 1, bar: 'a' },
+        { foo: 2, bar: 'a' },
+        { foo: 1, bar: 'b' },
+        { foo: 2, bar: 'b' },
+        { foo: 1, bar: 'c' },
+        { foo: 2, bar: 'c' }
       ])
   })
 
   it('should throw when a prop value is null', () => {
     expect(() => {
-      generatePropCombinations({foo: null})
+      generatePropCombinations({ foo: null })
     }).to.throw(Error)
   })
 
   it('should throw when a single prop has empty values', () => {
     expect(() => {
-      generatePropCombinations({foo: []})
+      generatePropCombinations({ foo: [] })
     }).to.throw(Error)
   })
 
   it('should throw when one of the props has empty prop values', () => {
     expect(() => {
-      generatePropCombinations({validField: [1, 2, 3], foo: []})
+      generatePropCombinations({ validField: [1, 2, 3], foo: [] })
     }).to.throw(Error)
   })
 })
diff --git a/...les/src/__tests__/parsePropValues.test.js → ...les/lib/__tests__/parsePropValues.test.js b/...les/src/__tests__/parsePropValues.test.js → ...les/lib/__tests__/parsePropValues.test.js
diff --git a/...examples/src/component-examples-loader.js → ...examples/lib/component-examples-loader.js b/...examples/src/component-examples-loader.js → ...examples/lib/component-examples-loader.js
@@ -22,13 +22,14 @@
  * SOFTWARE.
  */
 
-import path from 'path'
-import fs from 'fs'
-import loaderUtils from 'loader-utils'
-import parsePropValues from './parsePropValues'
-import loadConfig from '@instructure/config-loader'
+const path = require('path')
+const fs = require('fs')
+const loaderUtils = require('loader-utils')
+const loadConfig = require('@instructure/config-loader')
 
-export default function componentExamplesLoader (source, map, meta) {
+const parsePropValues = require('./parsePropValues')
+
+module.exports = function componentExamplesLoader(source, map, meta) {
   this.cacheable && this.cacheable()
 
   const loader = this
@@ -40,8 +41,6 @@ export default function componentExamplesLoader (source, map, meta) {
   }
 
   const generateComponentExamples = require.resolve('./generateComponentExamples')
-  const renderPage = require.resolve('./renderPage')
-  const renderExample = require.resolve('./renderExample')
   const configPath = `!!${loaderUtils.getRemainingRequest(loader)}`
 
   const getComponentPath = (typeof config.getComponentPath === 'function') ?
@@ -70,9 +69,7 @@ export default function componentExamplesLoader (source, map, meta) {
     }
 
     const result = `
-const generateComponentExamples = require(${JSON.stringify(generateComponentExamples)}).default
-const renderPage = require(${JSON.stringify(renderPage)}).default
-const renderExample = require(${JSON.stringify(renderExample)}).default
+const generateComponentExamples = require(${JSON.stringify(generateComponentExamples)})
 const config = require(${JSON.stringify(configPath)}).default
 
 // merge in generated prop values:
@@ -84,11 +81,19 @@ const Component = require(${JSON.stringify(componentPath)}).default
 
 config.maxExamples = Boolean(config.maxExamples) ? config.maxExamples : ${config.maxExamples}
 
+if (!config.renderPage) {
+  console.warn('A default is no longer provided for \`renderPage\`, you should supply it to the config instead')
+}
+
+if (!config.renderExample) {
+  console.warn('A default is no longer provided for \`renderExample\`, you should supply it to the config instead')
+}
+
 module.exports = {
  componentName: Component.displayName || Component.name,
  sections: generateComponentExamples(Component, config),
- renderPage: config.renderPage || renderPage,
- renderExample: config.renderExample || renderExample
+ renderPage: config.renderPage,
+ renderExample: config.renderExample
 }
 `
     return callback(null, result, map)