diff --git a/.eslintrc.js b/.eslintrc.js index d85c656232..d0f4c47f30 100644 --- 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 index 5c11e59d46..acac0f1e11 100644 --- 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 b/.storybook/main.ts similarity index 64% rename from .storybook/main.js rename to .storybook/main.ts index 3a2be1e3f7..60e98a47ab 100644 --- a/.storybook/main.js +++ b/.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 `` with Storybook tags in the - // documentation guidelines - exclude: [/node_modules/, /DOCUMENTATION_GUIDELINES/], use: [ { loader: path.resolve(__dirname, 'mdx-code-block-rewrite'), @@ -121,10 +125,10 @@ 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'), }, @@ -132,36 +136,16 @@ module.exports = { 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 index 7b2da7d736..7fb58ec4ab 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,6 +1,9 @@ - +