chore: Merge support into master

.eslintrc.js

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -20,7 +20,7 @@ Optional breaking changes message. If your PR includes breaking changes. It is e
 
 ## Checklist
 
-- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--page)
+- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--docs)
 - [ ] Label `ready for review` has been added to PR
 
 ## For the Reviewer

.github/workflows/canary.yml

@@ -21,19 +21,21 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       ## Build Storybook and extract component stories for Storybook aggregation. This will be used
       ## for Chromatic rebaselining and publishing to GH Pages. Should be before `yarn build` since
       ## built assets mess up this command
-      #  removed yarn sb extract docs docs/stories.json because we were exceeding limit in CI, add back in once we find more space
       - name: Build Storybook
         run: |
           yarn build-storybook --quiet
+          yarn sb extract docs docs/stories.json
 
       ## Build for packaging.
       - name: Build
         run: yarn build
+        env:
+          TSP_SKIP_CACHE: true
 
       ## Publish prerelease to npm. Must be run after a build
       - name: Publish

.github/workflows/dist-tag.yaml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       - name: Check packages
         run: node utils/dist-tag.mjs

.github/workflows/forward-merge.yml

@@ -94,7 +94,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       ## A `yarn bump` will create a commit and a tag. We need to set up the git user to do this.
       ## We'll make that user be the github-actions user.
@@ -146,11 +146,8 @@ jobs:
       #     ignoreLastBuildOnBranch: ${{ needs.get-branch-names.outputs.next-branch }}
       #     debug: true
 
-      - name: Start Server
-        run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001
-
       - name: Integration tests
-        run: yarn cypress run --record --parallel --env skip_storybook_test=true # skip the Storybook test during forward merges
+        run: yarn cypress run --component --record --parallel
         env:
           # Github Actions doesn't support encryption on forks
           # If these keys become compromised, we will rotate and disable these features

.github/workflows/pull-request.yml

@@ -13,7 +13,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
   check:
     runs-on: ubuntu-latest
@@ -24,7 +24,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       # Keep steps separate for Github Actions annotation matching: https://github.com/actions/setup-node/blob/83c9f7a7df54d6b57455f7c57ac414f2ae5fb8de/src/setup-node.ts#L26-L33
       - name: Lint
@@ -48,7 +48,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       - name: Build Storybook
         run: yarn build-storybook --quiet
@@ -71,7 +71,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       - name: Restore Build
         uses: actions/cache@v3
@@ -102,19 +102,16 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       - name: Restore Build
         uses: actions/cache@v3
         with:
           path: docs
           key: ${{ runner.os }}-build-${{ github.sha }}
 
-      - name: Start Server
-        run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001
-
       - name: Integration tests
-        run: yarn cypress run --record --parallel
+        run: yarn cypress run --component --record --parallel
         env:
           # Github Actions doesn't support encryption on forks
           # If these keys become compromised, we will rotate and disable these features

.github/workflows/release-major.yml

@@ -34,7 +34,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       # Run the release job to publish the next major version to npm
       - uses: Workday/canvas-kit-actions/release@v1

.github/workflows/release-minor.yml

@@ -19,7 +19,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       - uses: Workday/canvas-kit-actions/release@v1
         with:

.github/workflows/release.yml

@@ -32,7 +32,7 @@ jobs:
 
       - uses: Workday/canvas-kit-actions/install@v1
         with:
-          node_version: 16.x
+          node_version: 18.x
 
       - uses: Workday/canvas-kit-actions/release@v1
         with:

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

@@ -1,20 +1,19 @@
 const path = require('node:path');
-const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
+const remarkGfm = require('remark-gfm').default;
 
 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',
@@ -24,18 +23,35 @@ module.exports = {
     },
     './readme-panel/preset.js',
     '@storybook/addon-storysource',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
+  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 +66,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 +78,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 +110,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 +125,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 +136,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;