chore: Merge prerelease/minor into prerelease/major

Workday · Sep 20, 2024 · 5b896b6 · 5b896b6
2 parents 0c48e7e + 87dbe31
commit 5b896b6
Show file tree

Hide file tree

Showing 661 changed files with 21,346 additions and 19,506 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -96,4 +96,12 @@ module.exports = {
     curly: 'error',
     radix: 'error',
   },
+  overrides: [
+    {
+      files: ['**/*.stories.tsx'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+      },
+    },
+  ],
 };
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -110,11 +110,8 @@ jobs:
           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

diff --git a/.storybook/main.js → .storybook/main.ts b/.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;
diff --git a/.storybook/manager-head.html b/.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';
@@ -12,18 +15,18 @@
 </style>
 
 <style type="text/css">
-  body {
-    font-family: "Roboto", sans-serif;
+  /* body {
+    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,
@@ -59,5 +62,5 @@
 
   .os-content button:hover svg {
     color: #0875e1;
-  }
+  } */
 </style>
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/preview-api';
 import theme from './theme';
 
 addons.setConfig({

diff --git a/.storybook/mdx-code-block-rewrite.js b/.storybook/mdx-code-block-rewrite.js
@@ -12,21 +12,17 @@ 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(/\<PropsTable of=/g, '<ArgsTable of=')
+      : '') + source.replace(/\<PropsTable of=/g, '<ArgsTable of=')
   );
 };