From 3abd6cac709de54e1be2eee3b5a6c22c0bdadb7b Mon Sep 17 00:00:00 2001
From: serikjensen <sejensen@instructure.com>
Date: Mon, 11 May 2020 10:16:21 -0500
Subject: [PATCH] chore(ui-component-examples,ui-theme-tokens): switch
 component examples 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 <svc.cloudjenkins@instructure.com>
Reviewed-by: Ken Meleta <kmeleta@instructure.com>
Product-Review: Ken Meleta <kmeleta@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Visual-Regression-Test: Steve Jensen <sejensen@instructure.com>
---
 docs/guides/v7-upgrade-guide.md               |  5 +-
 packages/__examples__/.storybook/config.js    |  9 ++-
 .../.storybook}/renderExample.js              |  5 +-
 .../.storybook}/renderPage.js                 |  4 +-
 packages/__examples__/package.json            |  5 ++
 packages/ui-component-examples/.eslintignore  |  2 -
 packages/ui-component-examples/.gitignore     |  3 -
 packages/ui-component-examples/README.md      |  4 +-
 .../ui-component-examples/babel.config.js     | 31 --------
 .../generateComponentExamples.test.js         | 75 +++++++++----------
 .../generatePropCombinations.test.js          | 34 ++++-----
 .../__tests__/parsePropValues.test.js         |  0
 .../{src => lib}/component-examples-loader.js | 31 ++++----
 .../{src => lib}/generateComponentExamples.js | 32 ++++----
 .../{src => lib}/generatePropCombinations.js  |  4 +-
 .../{src => lib}/index.js                     | 15 ++--
 .../{src => lib}/parsePropValues.js           | 10 +--
 packages/ui-component-examples/package.json   | 25 ++-----
 .../src/utils/generateA11yTests.js            |  6 +-
 packages/ui-theme-tokens/src/index.js         |  4 +-
 20 files changed, 141 insertions(+), 163 deletions(-)
 rename packages/{ui-component-examples/src => __examples__/.storybook}/renderExample.js (92%)
 rename packages/{ui-component-examples/src => __examples__/.storybook}/renderPage.js (92%)
 delete mode 100644 packages/ui-component-examples/.gitignore
 delete mode 100644 packages/ui-component-examples/babel.config.js
 rename packages/ui-component-examples/{src => lib}/__tests__/generateComponentExamples.test.js (84%)
 rename packages/ui-component-examples/{src => lib}/__tests__/generatePropCombinations.test.js (80%)
 rename packages/ui-component-examples/{src => lib}/__tests__/parsePropValues.test.js (100%)
 rename packages/ui-component-examples/{src => lib}/component-examples-loader.js (81%)
 rename packages/ui-component-examples/{src => lib}/generateComponentExamples.js (90%)
 rename packages/ui-component-examples/{src => lib}/generatePropCombinations.js (93%)
 rename packages/ui-component-examples/{src => lib}/index.js (79%)
 rename packages/ui-component-examples/{src => lib}/parsePropValues.js (92%)

diff --git a/docs/guides/v7-upgrade-guide.md b/docs/guides/v7-upgrade-guide.md
index ddde319fec..2f721d7e05 100644
--- 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.
\ No newline at end of file
diff --git a/packages/__examples__/.storybook/config.js b/packages/__examples__/.storybook/config.js
index 1a023d00fe..58ecceac1b 100644
--- 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/packages/ui-component-examples/src/renderExample.js b/packages/__examples__/.storybook/renderExample.js
similarity index 92%
rename from packages/ui-component-examples/src/renderExample.js
rename to packages/__examples__/.storybook/renderExample.js
index 7083180e50..b3d390a657 100644
--- a/packages/ui-component-examples/src/renderExample.js
+++ b/packages/__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/packages/ui-component-examples/src/renderPage.js b/packages/__examples__/.storybook/renderPage.js
similarity index 92%
rename from packages/ui-component-examples/src/renderPage.js
rename to packages/__examples__/.storybook/renderPage.js
index 5a4db9766b..46aa986e8c 100644
--- a/packages/ui-component-examples/src/renderPage.js
+++ b/packages/__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
index db49175cd0..7792d6e632 100644
--- 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
index 8470aba631..2ed8d17405 100644
--- 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
deleted file mode 100644
index e6f81ab434..0000000000
--- a/packages/ui-component-examples/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-lib/
-.babel-cache/
-es/
diff --git a/packages/ui-component-examples/README.md b/packages/ui-component-examples/README.md
index 65f78dbb99..704b5d5e4c 100644
--- 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
deleted file mode 100644
index 6032d6b62f..0000000000
--- a/packages/ui-component-examples/babel.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-module.exports = {
-  presets: [[ require('@instructure/ui-babel-preset'),{
-    coverage: Boolean(process.env.COVERAGE),
-    esModules: Boolean(process.env.ES_MODULES),
-    transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
-  }]]
-}
diff --git a/packages/ui-component-examples/src/__tests__/generateComponentExamples.test.js b/packages/ui-component-examples/lib/__tests__/generateComponentExamples.test.js
similarity index 84%
rename from packages/ui-component-examples/src/__tests__/generateComponentExamples.test.js
rename to packages/ui-component-examples/lib/__tests__/generateComponentExamples.test.js
index 60919e5e13..a130ff0a20 100644
--- a/packages/ui-component-examples/src/__tests__/generateComponentExamples.test.js
+++ b/packages/ui-component-examples/lib/__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/packages/ui-component-examples/src/__tests__/generatePropCombinations.test.js b/packages/ui-component-examples/lib/__tests__/generatePropCombinations.test.js
similarity index 80%
rename from packages/ui-component-examples/src/__tests__/generatePropCombinations.test.js
rename to packages/ui-component-examples/lib/__tests__/generatePropCombinations.test.js
index a0c397a76a..c273dcec3d 100644
--- a/packages/ui-component-examples/src/__tests__/generatePropCombinations.test.js
+++ b/packages/ui-component-examples/lib/__tests__/generatePropCombinations.test.js
@@ -32,8 +32,8 @@ 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', () => {
@@ -41,8 +41,8 @@ describe('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/packages/ui-component-examples/src/__tests__/parsePropValues.test.js b/packages/ui-component-examples/lib/__tests__/parsePropValues.test.js
similarity index 100%
rename from packages/ui-component-examples/src/__tests__/parsePropValues.test.js
rename to packages/ui-component-examples/lib/__tests__/parsePropValues.test.js
diff --git a/packages/ui-component-examples/src/component-examples-loader.js b/packages/ui-component-examples/lib/component-examples-loader.js
similarity index 81%
rename from packages/ui-component-examples/src/component-examples-loader.js
rename to packages/ui-component-examples/lib/component-examples-loader.js
index f1f91012e1..8094a01c10 100644
--- a/packages/ui-component-examples/src/component-examples-loader.js
+++ b/packages/ui-component-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)
diff --git a/packages/ui-component-examples/src/generateComponentExamples.js b/packages/ui-component-examples/lib/generateComponentExamples.js
similarity index 90%
rename from packages/ui-component-examples/src/generateComponentExamples.js
rename to packages/ui-component-examples/lib/generateComponentExamples.js
index 409d6d4945..71d623f989 100644
--- a/packages/ui-component-examples/src/generateComponentExamples.js
+++ b/packages/ui-component-examples/lib/generateComponentExamples.js
@@ -21,19 +21,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import uid from '@instructure/uid'
-import generatePropCombinations from './generatePropCombinations'
-
-export default function generateComponentExamples (Component, config = {
-    sectionProp: null,
-    propValues: {},
-    maxExamplesPerPage: null,
-    excludeProps: [],
-    getExampleProps: (props, index) => { return {} },
-    getComponentProps: (props, index) => { return {} },
-    getParameters: (examples, pageIndex) => { return {} },
-    filter: (props, index) => false
-  }) {
+const { uid } = require('@instructure/uid')
+const generatePropCombinations = require('./generatePropCombinations')
+
+module.exports = function generateComponentExamples(Component, config = {
+  sectionProp: null,
+  propValues: {},
+  maxExamplesPerPage: null,
+  excludeProps: [],
+  getExampleProps: (props, index) => { return {} },
+  getComponentProps: (props, index) => { return {} },
+  getParameters: (examples, pageIndex) => { return {} },
+  filter: (props, index) => false
+}) {
   const {
     sectionProp,
     excludeProps,
@@ -78,12 +78,12 @@ export default function generateComponentExamples (Component, config = {
       }
     }
 
-    return  exampleProps
+    return exampleProps
   }
 
   const addPage = (section) => {
     const page = {
-      examples : [],
+      examples: [],
       index: section.pages.length
     }
     section.pages.push(page)
@@ -186,7 +186,7 @@ export default function generateComponentExamples (Component, config = {
   return sections
 }
 
-function isEmpty (obj) {
+function isEmpty(obj) {
   if (typeof obj !== 'object') return true
   for (let key in obj) {
     if (hasOwnProperty.call(obj, key)) return false
diff --git a/packages/ui-component-examples/src/generatePropCombinations.js b/packages/ui-component-examples/lib/generatePropCombinations.js
similarity index 93%
rename from packages/ui-component-examples/src/generatePropCombinations.js
rename to packages/ui-component-examples/lib/generatePropCombinations.js
index 0993d57f69..70523b8385 100644
--- a/packages/ui-component-examples/src/generatePropCombinations.js
+++ b/packages/ui-component-examples/lib/generatePropCombinations.js
@@ -30,7 +30,7 @@
  * @param {Object} propValues an object with the shape {propName: arrayOfPossibleValues}
  * @returns {Array} an array of all prop combinations [{propAName: propAValue, propBName: propBValue}]
  */
-export default function generatePropCombinations (propValues = {}) {
+module.exports = function generatePropCombinations(propValues = {}) {
   const propNames = Object.keys(propValues)
   let combos = []
 
@@ -42,7 +42,7 @@ export default function generatePropCombinations (propValues = {}) {
     const valuesForProp = propValues[propName]
 
     if (!Array.isArray(valuesForProp) || !valuesForProp.length) {
-      throw new Error(`[ui-component-examples] Please provide a non-empty array of possible values for prop ${propName}`)
+      throw new Error(`[ui-examples-loader] Please provide a non-empty array of possible values for prop ${propName}`)
     }
 
     const numValues = valuesForProp.length
diff --git a/packages/ui-component-examples/src/index.js b/packages/ui-component-examples/lib/index.js
similarity index 79%
rename from packages/ui-component-examples/src/index.js
rename to packages/ui-component-examples/lib/index.js
index a97b641487..91d103e98e 100644
--- a/packages/ui-component-examples/src/index.js
+++ b/packages/ui-component-examples/lib/index.js
@@ -21,8 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export generateComponentExamples from './generateComponentExamples'
-export generatePropCombinations from './generatePropCombinations'
-export parsePropValues from './parsePropValues'
-export renderPage from './renderPage'
-export renderExample from './renderExample'
+
+const generateComponentExamples = require('./generateComponentExamples')
+const generatePropCombinations = require('./generatePropCombinations')
+const parsePropValues = require('./parsePropValues')
+
+module.exports = {
+  generateComponentExamples,
+  generatePropCombinations,
+  parsePropValues
+}
diff --git a/packages/ui-component-examples/src/parsePropValues.js b/packages/ui-component-examples/lib/parsePropValues.js
similarity index 92%
rename from packages/ui-component-examples/src/parsePropValues.js
rename to packages/ui-component-examples/lib/parsePropValues.js
index 53c72b3e8b..adbe4d7d65 100644
--- a/packages/ui-component-examples/src/parsePropValues.js
+++ b/packages/ui-component-examples/lib/parsePropValues.js
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { resolver, parse } from 'react-docgen'
+const { resolver, parse } = require('react-docgen')
 
 /**
  * Given a relative path and the React component source, returns an object of all
@@ -59,12 +59,12 @@ import { resolver, parse } from 'react-docgen'
  * }
  * ```
  */
-export default function parsePropValues (fileSource) {
+module.exports = function parsePropValues(fileSource) {
   let parsedSrc = {}
   try {
     parsedSrc = parse(
-     fileSource,
-     resolver.findAllExportedComponentDefinitions
+      fileSource,
+      resolver.findAllExportedComponentDefinitions
     )
     if (Array.isArray(parsedSrc)) {
       parsedSrc = parsedSrc.pop()
@@ -78,7 +78,7 @@ export default function parsePropValues (fileSource) {
   return getPropValuesFromParsedProps(parsedSrc.props)
 }
 
-function getPropValuesFromParsedProps (parsedProps) {
+function getPropValuesFromParsedProps(parsedProps) {
   if (!parsedProps) return []
 
   const propValues = {}
diff --git a/packages/ui-component-examples/package.json b/packages/ui-component-examples/package.json
index 4ad865fb36..606cb47e97 100644
--- a/packages/ui-component-examples/package.json
+++ b/packages/ui-component-examples/package.json
@@ -4,7 +4,6 @@
   "description": "A utility for automatically generating component examples",
   "author": "Instructure, Inc. Engineering and Product Design",
   "main": "./lib/index.js",
-  "module": "./es/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/instructure/instructure-ui.git"
@@ -13,35 +12,23 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "scripts": {
     "lint": "ui-test --lint",
-    "lint:fix": "ui-test --lint --fix",
-    "clean": "ui-build --clean",
-    "build": "ui-build",
-    "build:watch": "ui-build --watch"
+    "lint:fix": "ui-test --lint --fix"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@instructure/ui-babel-preset": "^6.26.0",
-    "@instructure/ui-test-utils": "^6.26.0"
-  },
   "dependencies": {
     "@instructure/config-loader": "^6.26.0",
-    "@instructure/ui-a11y-content": "^6.26.0",
-    "@instructure/ui-buttons": "^6.26.0",
-    "@instructure/ui-i18n": "^6.26.0",
-    "@instructure/ui-icons": "^6.26.0",
-    "@instructure/ui-text": "^6.26.0",
-    "@instructure/ui-tooltip": "^6.26.0",
-    "@instructure/ui-view": "^6.26.0",
     "@instructure/uid": "^6.26.0",
     "loader-utils": "^1.2.3",
-    "prop-types": "^15",
     "react-docgen": "^4"
   },
+  "devDependencies": {
+    "@instructure/ui-test-utils": "^6.26.0",
+    "prop-types": "^15"
+  },
   "peerDependencies": {
     "react": "^16"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "sideEffects": false
+  }
 }
diff --git a/packages/ui-test-utils/src/utils/generateA11yTests.js b/packages/ui-test-utils/src/utils/generateA11yTests.js
index 0f6d6132e5..e0bf9703de 100644
--- a/packages/ui-test-utils/src/utils/generateA11yTests.js
+++ b/packages/ui-test-utils/src/utils/generateA11yTests.js
@@ -28,7 +28,11 @@ import { accessible } from '@instructure/ui-test-queries'
 
 import { expect } from './expect'
 
-export function generateA11yTests ({ componentName, sections, renderExample }, only = []) {
+const renderExample = ({ Component, componentProps, key }) => (
+  <Component key={key} {...componentProps} />
+)
+
+export function generateA11yTests({ componentName, sections }, only = []) {
   describe(`${componentName} should meet accessibility standards`, async () => {
     sections.forEach(({ pages, sectionName, propName, propValue }, i) => {
       if (only[0] && i === only[0]) return
diff --git a/packages/ui-theme-tokens/src/index.js b/packages/ui-theme-tokens/src/index.js
index c2923749aa..cc66381092 100644
--- a/packages/ui-theme-tokens/src/index.js
+++ b/packages/ui-theme-tokens/src/index.js
@@ -26,10 +26,12 @@ import { canvas } from './canvas'
 import { canvasAms } from './canvas-ams'
 import { canvasHighContrast } from './canvas-high-contrast'
 import { instructure } from './instructure'
+import { functionalColors } from './utils/functionalColors'
 
 export {
   canvas,
   canvasAms,
   canvasHighContrast,
-  instructure
+  instructure,
+  functionalColors
 }