chore: Upgrade Storybook and Webpack

.eslintrc.js

@@ -96,4 +96,12 @@ module.exports = {
     curly: 'error',
     radix: 'error',
   },
+  overrides: [
+    {
+      files: ['**/*.stories.tsx'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+      },
+    },
+  ],
 };

.storybook/main.js → .storybook/main.ts

@@ -1,20 +1,18 @@
 const path = require('node:path');
-const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 
 const modulesPath = path.resolve(__dirname, '../modules');
 const getSpecifications = require('../modules/docs/utils/get-specifications');
+import {StorybookConfig} from '@storybook/react-webpack5';
 const {createDocProgram} = require('../modules/docs/docgen/createDocProgram');
 
 const processDocs = process.env.SKIP_DOCGEN !== 'true';
 
 const Doc = createDocProgram();
 
-module.exports = {
-  stories: [
-    '../modules/docs/mdx/**/*.mdx',
-    '../modules/**/*.stories.mdx',
-    '../modules/**/stories*.@(js|jsx|ts|tsx)',
-  ],
+const config: StorybookConfig = {
+  framework: '@storybook/react-webpack5',
+  staticDirs: ['../public'],
+  stories: ['../modules/**/mdx/**/*.mdx', '../modules/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     {
       name: '@storybook/addon-essentials',
@@ -25,17 +23,24 @@ module.exports = {
     './readme-panel/preset.js',
     '@storybook/addon-storysource',
   ],
+  core: {
+    builder: '@storybook/builder-webpack5',
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: 'tag',
+    defaultName: 'Docs',
+  },
   typescript: {
-    skipBabel: true,
     check: false,
     reactDocgen: false, // we'll handle this ourselves
   },
-  webpackFinal: async (config, {configType}) => {
+  webpackFinal: async config => {
     // Get the specifications object and replace with a real object in the spec.ts file
     if (processDocs) {
       const specs = await getSpecifications();
 
-      config.module.rules.push({
+      config.module?.rules?.push({
         test: /.ts$/,
         include: [path.resolve(__dirname, '../modules/docs')],
         use: [
@@ -50,10 +55,10 @@ module.exports = {
       });
 
       // Load the source code of story files to display in docs.
-      config.module.rules.push({
-        test: /stories.*\.tsx?$/,
+      config.module?.rules?.push({
+        test: /\.stories\.tsx?$/,
         include: [modulesPath],
-        loaders: [
+        use: [
           {
             loader: require.resolve('@storybook/source-loader'),
             options: {parser: 'typescript'},
@@ -62,12 +67,12 @@ module.exports = {
         enforce: 'pre',
       });
 
-      config.module.rules.push({
+      config.module?.rules?.push({
         test: /.+\.tsx?$/,
         include: [modulesPath],
         exclude: /examples|stories|spec|codemod|docs/,
-        loaders: [
-          // loaders are run in reverse order. style-transform-loader needs to be done first
+        use: [
+          // loaders are run in reverse order. symbol-doc-loader needs to be done first
           {
             loader: path.resolve(__dirname, 'symbol-doc-loader'),
             options: {
@@ -94,9 +99,11 @@ module.exports = {
      * These warnings relate to this open GitHub issue: https://github.com/microsoft/TypeScript/issues/39436
      * If you no longer see these warnings when this is config is removed, you can safely delete this config.
      */
-    config.module.noParse = [require.resolve('typescript/lib/typescript.js')];
+    if (config.module) {
+      config.module.noParse = [require.resolve('typescript/lib/typescript.js')];
+    }
 
-    config.module.rules.push({
+    config.module?.rules?.push({
       test: /\.mdx?$/,
       include: [path.resolve(__dirname, '..')],
       exclude: [/node_modules/],
@@ -107,12 +114,9 @@ module.exports = {
       ],
     });
 
-    config.module.rules.push({
+    config.module?.rules?.push({
       test: /\.mdx?$/,
       include: [path.resolve(__dirname, '..')],
-      // Don't replace `<ExampleCodeBlock>` with Storybook tags in the
-      // documentation guidelines
-      exclude: [/node_modules/, /DOCUMENTATION_GUIDELINES/],
       use: [
         {
           loader: path.resolve(__dirname, 'mdx-code-block-rewrite'),
@@ -121,47 +125,27 @@ module.exports = {
     });
 
     // Load the whole example code of story files to display in docs.
-    config.module.rules.push({
-      test: /examples\/.*\.tsx?$/,
+    config.module?.rules?.push({
+      test: /\/examples\/.*\.tsx?$/,
       include: [modulesPath],
-      loaders: [
+      use: [
         {
           loader: path.resolve(__dirname, 'whole-source-loader'),
         },
       ],
       enforce: 'pre',
     });
 
-    /**
-     * Added this because Storybook 6.3 is on emotion 10, so we rewrote the imports to point to emotion 11
-     * https://github.com/storybookjs/storybook/issues/13145
-     */
-    config.resolve = {
-      ...config.resolve,
-      alias: {
-        ...config.resolve.alias,
-      },
-    };
-
-    // 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('mdx1-csf')).options['compilers'] = [
-      createCompiler({}),
-    ];
-
     return config;
   },
   babel: async options => ({
     ...options,
-    plugins: [
-      ...options.plugins,
-      '@babel/plugin-transform-modules-commonjs',
-      // Needed temporarily until https://github.com/storybookjs/storybook/issues/14805 is resolved
-      ['@babel/plugin-proposal-private-property-in-object', {loose: true}],
-    ],
+    plugins: [...(options.plugins as []), '@babel/plugin-transform-modules-commonjs'],
     presets: [
-      ...options.presets,
+      ...(options.presets as []),
       ['@babel/preset-react', {runtime: 'classic'}, 'react-16-backwards-compatible-override'],
     ],
   }),
 };
+
+export default config;

.storybook/manager-head.html

@@ -1,6 +1,9 @@
 <link rel="icon" type="image/png" href="/canvas-kit-favicon.png" sizes="192x192" />
 <link rel="shortcut icon" href="/canvas-kit-favicon.ico" />
-<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500&display=swap" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500&display=swap"
+  rel="stylesheet"
+/>
 <script src="https://use.fontawesome.com/660238b999.js"></script>
 <script>
   document.title = 'Canvas Kit Storybook';
@@ -13,17 +16,17 @@
 
 <style type="text/css">
   body {
-    font-family: "Roboto", sans-serif;
+    font-family: 'Roboto', sans-serif;
     background: #e6f1ff !important;
     font-size: 14px;
   }
   #storybook-explorer-tree {
-    font-family: "Roboto", sans-serif;
+    font-family: 'Roboto', sans-serif;
   }
   .sto-1ngr21r {
     color: #0875e1 !important;
     font-size: 20px;
-    font-family: "Roboto", sans-serif;
+    font-family: 'Roboto', sans-serif;
   }
 
   #storybook-explorer-menu svg {
@@ -35,20 +38,20 @@
     background-color: #a6d2ff;
   }
 
-  #storybook-explorer-menu a[data-selected="true"],
-  #storybook-explorer-menu a[data-selected="true"]:hover {
+  #storybook-explorer-menu a[data-selected='true'],
+  #storybook-explorer-menu a[data-selected='true']:hover {
     background-color: #0875e1;
     color: #e6f1ff;
   }
 
-  #storybook-explorer-menu a[data-selected="true"] svg {
+  #storybook-explorer-menu a[data-selected='true'] svg {
     color: #d7eafc;
   }
 
   .sidebar-subheading button,
   .sidebar-subheading span,
   .sidebar-item span {
-      color: #5e6a75;
+    color: #5e6a75;
   }
 
   .os-content button:hover,

.storybook/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/preview-api';
 import theme from './theme';
 
 addons.setConfig({

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

@@ -12,21 +12,24 @@ module.exports = function rewriteExampleCodeBlock(source) {
   const hasCanvas = /import {.*Canvas[,\s}]/.test(source);
   const hasStory = /import {.*Story[,\s}]/.test(source);
   const hasArgsTable = /import {.*ArgsTable[,\s}]/.test(source);
+  const hasSource = /import {.*Source[,\s}]/.test(source);
   const imports = [];
   if (!hasMeta) imports.push('Meta');
   if (!hasCanvas) imports.push('Canvas');
   if (!hasStory) imports.push('Story');
   if (!hasArgsTable) imports.push('ArgsTable');
+  if (!hasSource) imports.push('Source');
+
   return (
     (imports.length && hasSpecialBlocks
       ? `import {${imports.join(',')}} from '@storybook/addon-docs';\n\n`
       : '') +
     source
-      .replace(/\<ExampleCodeBlock code={([A-Za-z0-9]+)} \/\>/g, function replacer(match, p1, p2) {
-        return `<Canvas><Story name="${storyNameFromExport(
-          p1
-        )}" parameters={{storySource: {source: ${p1}.__RAW__}}}><${p1} /></Story></Canvas>`;
-      })
+      // .replace(/\<ExampleCodeBlock code={([A-Za-z0-9]+)} \/\>/g, function replacer(match, p1, p2) {
+      //   return `<Canvas><Story name="${storyNameFromExport(
+      //     p1
+      //   )}" parameters={{storySource: {source: ${p1}.__RAW__}}}><${p1} /></Story></Canvas>`;
+      // })
       .replace(/\<PropsTable of=/g, '<ArgsTable of=')
   );
 };

.storybook/preview-head.html

@@ -18,6 +18,43 @@
     margin-top: 48px !important;
     padding-bottom: 16px;
   }
+
+  .docblock-code-toggle {
+    margin: 0;
+    border: 0 none;
+    padding: 4px 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #2e3438;
+    background: #ffffff;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+    border-top: 1px solid hsla(203, 50%, 30%, 0.15);
+    border-left: 1px solid hsla(203, 50%, 30%, 0.15);
+    margin-left: -1px;
+    border-radius: 4px 0 0 0;
+  }
+  .docblock-code-toggle:focus {
+    box-shadow: rgb(30, 167, 253) 0px -3px 0px 0px inset;
+    outline: none 0px;
+  }
+
+  .example-code-block .sbdocs-preview {
+    margin-bottom: 4px !important;
+  }
+
+  .example-code-block--expanded .sbdocs-preview {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .example-code-block .docblock-source {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    margin-top: 0 !important;
+  }
 </style>
 <!-- preload fonts for Chromatic -->
 <link rel="preload" href="Roboto-Light.ttf" as="font" type="font/ttf" crossorigin />