feat: Upgrade Storybook to v6.1.3 (#897)

* fix(badge): Remove trailing slash from count badge story

* refactor: Remove hierarchy separator from stories

* fix: Add new line between JSX tags for welcome docs

* refactor: Rename card mdx story to have the correct suffix

* refactor: Remove hierarchy separator from stories

* chore: Upgrade storybook

* chore: Update card story imports to the new names

* refactor: Adopt new storybook config format

* chore: Rename doc stories now that mdx requires .stories suffix

* fix: Tweak how static members are defined

* build: Add babel config back into storybook

* fix: Resolve type export warnings

* refactor: Rename card mdx story to have the correct suffix

* fix: Resolve browserslist warning

* chore: Upgrade to storybook@6.0.28

* feat: Re-add travis filter for storybook webpack config

* build: Generate stories.json file on master merge

* build: Add babel config to make IE11 happy

* build: Remove unecessary babel config (dupes)

* fix: Also convert mdx github links

* fix: Upgrade cypress-storybook (causing IE compat issue)

* chore: Update publish-canary.js

* refactor: Update stories to remove files referencing the same "kind"

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-support-for-duplicate-kinds

* fix: Upgrade cypress-storybook for IE Compat

* fix: Use generics instead of overloading to prevent TS error

* ci: Try to fix cache warning

* fix: Enforce story preview body margin for snapshot review

* Revert "refactor: Update stories to remove files referencing the same "kind""

This reverts commit 220c4f7.

* fix: Update withSnapshotsEnabled helper

* fix: Update stories to prevent duplicate kind warning

* fix: Fix spacing differences in preview body

* chore: Remove unnecessary comments

* chore: Revert change to cypress dep after rebase error

* fix: Fix duplicate kind warning without putting theme stories in folder

* chore: Upgrade storybook to 6.1.3

* docs: Update documentation using storybook APIs

* fix: De-dupe yarn.lock to fix popper type error

* chore: Rename story file to make contents clearer

* fix: Remove max-buffer from canary script added in merge

Co-authored-by: Lynn Chyi <14299381+lychyi@users.noreply.github.com>

.storybook/main.js

@@ -0,0 +1,66 @@
+const path = require('path');
+const DocgenPlugin = require('./docgen-plugin');
+
+const modulesPath = path.resolve(__dirname, '../modules');
+
+module.exports = {
+  stories: [
+    './stories/*.stories.mdx',
+    '../modules/**/*.stories.mdx',
+    '../modules/**/stories*.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false, // Disabled because actions is SLOW
+      },
+    },
+    'storybook-readme',
+    '@storybook/addon-knobs',
+    '@storybook/addon-storysource',
+    '@storybook/preset-scss',
+  ],
+  webpackFinal: async config => {
+    // Convert mdx links to point to github
+    config.module.rules.push({
+      test: /\.mdx?$/,
+      include: [path.resolve(__dirname, '..')],
+      exclude: [/node_modules/],
+      use: [
+        {
+          loader: path.resolve(__dirname, 'webpack-loader-redirect-mdx-to-github'),
+        },
+      ],
+    });
+
+    // Load the source code of story files to display in docs.
+    config.module.rules.push({
+      test: /stories.*\.tsx?$/,
+      include: [modulesPath],
+      loaders: [
+        {
+          loader: require.resolve('@storybook/source-loader'),
+          options: {parser: 'typescript'},
+        },
+      ],
+      enforce: 'pre',
+    });
+
+    config.plugins.push(new DocgenPlugin());
+
+    // Remove progress updates to reduce log lines in Travis
+    // See: https://github.com/storybookjs/storybook/issues/2029
+    if (process.env.TRAVIS) {
+      config.plugins = config.plugins.filter(
+        plugin => plugin.constructor.name !== 'ProgressPlugin'
+      );
+    }
+
+    return config;
+  },
+  babel: async options => ({
+    ...options,
+    plugins: [...options.plugins, '@babel/plugin-transform-modules-commonjs'],
+  }),
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import {addons} from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview-head.html

@@ -3,8 +3,8 @@
 </script>
 <style type="text/css">
   body {
-    margin: 40px;
-    padding: 0;
+    margin: 40px !important;
+    padding: 0 !important;
     font-family: sans-serif;
   }
 

.storybook/preview.js

@@ -0,0 +1,48 @@
+import {DocsPage, DocsContainer} from '@storybook/addon-docs/blocks';
+import 'cypress-storybook/react';
+
+import {CanvasProviderDecorator, FontsDecorator} from '../utils/storybook';
+import theme from './theme';
+
+/** If the string contains a phrase, prefix it. This is useful for making ordering sections */
+const prefix = (phrase, prefix) => (/** @type {string} */ value) => {
+  const index = value.indexOf(phrase);
+  return index > -1 ? value.substr(0, index) + prefix + value.substr(index) : value;
+};
+const pipe = (...fns) => value => fns.reduce((result, fn) => fn(result), value);
+
+function storySort(a, b) {
+  const prefixFn = pipe(
+    prefix('welcome-', '0'),
+    prefix('getting-started', 'a'),
+    prefix('tokens-', '1'),
+    prefix('components-', '2'),
+    prefix('labs-', '3'),
+    prefix('default', 'aa'),
+    prefix('visual-testing', 'zz')
+  );
+
+  const left = prefixFn(a[0]);
+  const right = prefixFn(b[0]);
+
+  return left === right ? 0 : left.localeCompare(right);
+}
+
+export const decorators = [FontsDecorator, CanvasProviderDecorator];
+
+export const parameters = {
+  options: {
+    storySort,
+  },
+  docs: {
+    theme,
+    container: DocsContainer,
+    page: DocsPage,
+  },
+  readme: {
+    codeTheme: 'github',
+  },
+  chromatic: {
+    disable: true,
+  },
+};

.storybook/stories/stories_api_pattern_guidelines.mdx → .storybook/stories/api_pattern_guidelines.stories.mdx

@@ -2,6 +2,6 @@ import {Meta} from '@storybook/addon-docs/blocks';
 import ApiPatternGuidelines from '../../API_PATTERN_GUIDELINES.md';
 import Markdown from '../../utils/storybook/Markdown.tsx';
 
-<Meta title="Welcome|API & Pattern Guidelines" />
+<Meta title="Welcome/API & Pattern Guidelines" />
 
 <Markdown content={ApiPatternGuidelines} />

.storybook/stories/stories_changelog.mdx → .storybook/stories/changelog.stories.mdx

@@ -2,6 +2,6 @@ import {Meta} from '@storybook/addon-docs/blocks';
 import Changelog from '../../CHANGELOG.md';
 import Markdown from '../../utils/storybook/Markdown.tsx';
 
-<Meta title="Welcome|Changelog" />
+<Meta title="Welcome/Changelog" />
 
 <Markdown content={Changelog} />

.storybook/stories/stories_component_status.mdx → .storybook/stories/component_status.stories.mdx

@@ -2,6 +2,6 @@ import {Meta} from '@storybook/addon-docs/blocks';
 import ComponentStatus from '../../COMPONENT_STATUS.md';
 import Markdown from '../../utils/storybook/Markdown.tsx';
 
-<Meta title="Welcome|Component Status" />
+<Meta title="Welcome/Component Status" />
 
 <Markdown content={ComponentStatus} />

.storybook/stories/stories_contributing.mdx → .storybook/stories/contributing.stories.mdx

@@ -2,6 +2,6 @@ import {Meta} from '@storybook/addon-docs/blocks';
 import Contributing from '../../CONTRIBUTING.md';
 import Markdown from '../../utils/storybook/Markdown.tsx';
 
-<Meta title="Welcome|Contributing" />
+<Meta title="Welcome/Contributing" />
 
 <Markdown content={Contributing} />

.storybook/stories/stories_welcome.mdx → .storybook/stories/welcome.stories.mdx

@@ -2,6 +2,6 @@ import {Meta} from '@storybook/addon-docs/blocks';
 import Readme from '../../README.md';
 import Markdown from '../../utils/storybook/Markdown.tsx';
 
-<Meta title="Welcome|Getting Started" />
+<Meta title="Welcome/Getting Started" />
 
 <Markdown content={Readme} />

.storybook/theme.js

@@ -0,0 +1,10 @@
+import {themes, create} from '@storybook/theming';
+import {commonColors, typeColors, fontFamily} from '../modules/core/react';
+
+export default create({
+  ...themes.light, // Overrides a user's preferred color scheme (e.g. Dark Mode), will need to flesh this out later when CK is compatible with a dark mode
+  brandTitle: 'Canvas Kit',
+  mainTextColor: typeColors.body,
+  mainTextFace: fontFamily,
+  mainBackground: commonColors.backgroundAlt,
+});