chore: Release v5.0.0

Release v5.0.0

.github/PULL_REQUEST_TEMPLATE.md

@@ -19,7 +19,7 @@
       applicable
 - [ ] design approved final implementation
 - [ ] a11y approved final implementation
-- [ ] code adheres to the [API & Pattern guidelines](../API_PATTERN_GUIDELINES.md)
+- [ ] code adheres to the [API & Pattern guidelines](../modules/docs/mdx/API_PATTERN_GUIDELINES.md)
 
 ## Additional References
 

.prettierignore

@@ -4,4 +4,4 @@ modules/canvas-kit-react-core/lib/colors.ts
 .vscode
 .idea
 .travis.yml
-docs
+./docs

.storybook/docgen-plugin.js

@@ -4,12 +4,20 @@ const ts = require('typescript');
 const path = require('path');
 const tsconfigPath = path.join(__dirname, './tsconfig.json');
 
-const propFilter = prop => {
-  if (prop.parent) {
-    return !prop.parent.fileName.includes('node_modules');
+const propFilter = (fileName, prop, component) => {
+  // `PropTables.tsx` files are okay to pass through
+  if (fileName.includes('PropTables.tsx')) {
+    return true;
   }
 
-  return true;
+  if (prop.declarations) {
+    // filter out props that come from node_modules or style props
+    return !prop.declarations.some(
+      d => d.fileName.includes('labs-react/common/lib/utils') || d.fileName.includes('node_modules')
+    );
+  }
+
+  return false;
 };
 
 class DocgenPlugin {
@@ -27,26 +35,39 @@ class DocgenPlugin {
             modulesToProcess.push(module);
           }
         });
-        const tsProgram = ts.createProgram(modulesToProcess.map(v => v.userRequest), {
-          jsx: ts.JsxEmit.React,
-          module: ts.ModuleKind.CommonJS,
-          target: ts.ScriptTarget.Latest,
-        });
+
+        const tsProgram = ts.createProgram(
+          modulesToProcess.map(v => v.userRequest),
+          {
+            jsx: ts.JsxEmit.React,
+            module: ts.ModuleKind.CommonJS,
+            target: ts.ScriptTarget.Latest,
+          }
+        );
         modulesToProcess.forEach(m => processModule(m, tsProgram));
       });
     });
   }
 }
 
-processModule = (module, tsProgram) => {
+const processModule = (module, tsProgram) => {
   if (!module) return;
 
   const componentDocs = docGen
-    .withCustomConfig(tsconfigPath, {propFilter: propFilter})
+    .withCustomConfig(tsconfigPath, {
+      propFilter: (prop, component) => propFilter(module.userRequest, prop, component),
+    })
     .parseWithProgramProvider(module.userRequest, () => tsProgram);
 
   if (!componentDocs.length) return;
 
+  // `as` shows up as required, but it is not. This fixes it
+  componentDocs.forEach(d => {
+    if (d.props.as) {
+      d.props.as.required = false;
+    }
+  });
+
   let source = module._source._value;
   source +=
     '\n' +

.storybook/main.js

@@ -1,12 +1,13 @@
 const path = require('path');
+const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 const DocgenPlugin = require('./docgen-plugin');
 
 const modulesPath = path.resolve(__dirname, '../modules');
 const getSpecifications = require('../modules/docs/utils/get-specifications');
 
 module.exports = {
   stories: [
-    './stories/*.stories.mdx',
+    '../modules/docs/mdx/**/*.mdx',
     '../modules/**/*.stories.mdx',
     '../modules/**/stories*.@(js|jsx|ts|tsx)',
   ],
@@ -21,6 +22,10 @@ module.exports = {
     '@storybook/addon-knobs',
     '@storybook/addon-storysource',
   ],
+  typescript: {
+    check: false,
+    reactDocgen: false, // we'll handle this ourselves
+  },
   webpackFinal: async config => {
     // Get the specifications object and replace with a real object in the spec.ts file
     const specs = await getSpecifications();
@@ -40,6 +45,12 @@ module.exports = {
       ],
     });
 
+    // Update @storybook/addon-docs webpack rules to load all .mdx files in storybook
+    const mdxRule = config.module.rules.find(rule => rule.test.toString() === /\.mdx$/.toString());
+    mdxRule.use.find(loader => loader.loader.includes('@mdx-js')).options['compilers'] = [
+      createCompiler({}),
+    ];
+
     // Convert mdx links to point to github
     config.module.rules.push({
       test: /\.mdx?$/,

.storybook/mdx-code-block-rewrite.js

@@ -1,4 +1,3 @@
-const path = require('path');
 const {storyNameFromExport} = require('@storybook/csf');
 
 // This loader replaces example code blocks with Storybook specific tags

.storybook/preview.js

@@ -17,7 +17,8 @@ function storySort(a, b) {
     prefix('getting-started', 'a'),
     prefix('tokens-', '1'),
     prefix('components-', '2'),
-    prefix('labs-', '3'),
+    prefix('preview-', '3'),
+    prefix('labs-', '4'),
     prefix('default', 'aa'),
     prefix('visual-testing', 'zz')
   );

.storybook/theme.js

@@ -1,5 +1,5 @@
 import {themes, create} from '@storybook/theming';
-import {commonColors, typeColors, fontFamily} from '../modules/core/react';
+import {commonColors, typeColors, fontFamily} from '../modules/react/tokens';
 import {version} from '../lerna.json';
 
 export default create({

.storybook/webpack-loader-redirect-mdx-to-github.js

@@ -1,18 +1,15 @@
 const path = require('path');
 
+const basePath = path.resolve(__dirname, '../');
+
 module.exports = function webpackLoaderRedirectMDXToGithub(source) {
   const {resourcePath} = this;
   return source.replace(/\[([^\]]+)\]\((\.\.?[^\)]+)\)/g, function replacer(match, p1, p2) {
     // extract the directory from the resourcePath given by Webpack
     const {dir} = path.parse(resourcePath);
 
-    // We can't determine the root directory of the project since everyone might set a different base URL
-    // The most common relative linking is between modules, so we'll split on that
-    const [_, modulePath] = dir.split('modules');
-    const newPath = modulePath
-      ? '/modules' + path.resolve(`${modulePath}`, p2)
-      : path.resolve('/', p2);
+    const newPath = path.relative(basePath, path.resolve(dir, p2));
 
-    return `[${p1}](https://github.com/Workday/canvas-kit/blob/master${newPath})`;
+    return `[${p1}](https://github.com/Workday/canvas-kit/blob/master/${newPath})`;
   });
 };