Merge pull request #18205 from storybookjs/future/modern-frameworks

Build chain upgrades: TS4, Webpack5, modern ESM, TSUP

.babelrc.js

@@ -12,15 +12,16 @@ const withTests = {
   ],
 };
 
-// type BabelMode = 'cjs' | 'esm' | 'modern';
+// type BabelMode = 'cjs' | 'esm';
 
 const modules = process.env.BABEL_MODE === 'cjs' ? 'auto' : false;
 
 // FIXME: optional chaining introduced in chrome 80, not supported by wepback4
 // https://github.com/webpack/webpack/issues/10227#issuecomment-642734920
-const targets = process.env.BABEL_MODE === 'modern' ? { chrome: '79' } : 'defaults';
+const targets = process.env.BABEL_MODE === 'esm' ? { chrome: '100' } : 'defaults';
 
 module.exports = {
+  compact: false,
   ignore: [
     './lib/codemod/src/transforms/__testfixtures__',
     './lib/postinstall/src/__testfixtures__',
@@ -103,7 +104,6 @@ module.exports = {
         './lib/core',
         './lib/core-common',
         './lib/core-server',
-        './lib/builder-webpack4',
         './lib/builder-webpack5',
         './lib/codemod',
         './addons/storyshots',

.circleci/config.yml

@@ -110,21 +110,21 @@ jobs:
             - presets
   chromatic:
     executor: sb_node_14_browsers
-    parallelism: 4
+    parallelism: 15
     steps:
       # Keep using default checkout because Chromatic needs some git history to work properly
       - checkout
       - attach_workspace:
           at: .
       - run:
-          name: examples
+          name: chromatic
           command: |
             yarn run-chromatics
   examples:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 16
+    parallelism: 15
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -192,7 +192,7 @@ jobs:
     executor:
       class: large
       name: sb_cypress_8_node_14
-    parallelism: 8
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -211,9 +211,16 @@ jobs:
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
           command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_legacy_root_api vite_react
           no_output_timeout: 5m
+      - run:
+          name: prep artifacts
+          when: always
+          command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
       - store_artifacts:
           path: /tmp/cypress-record
           destination: cypress
+      - store_artifacts:
+          path: /tmp/storybook-e2e-testing-out.zip
+          destination: e2e
   e2e-tests-sb-docs:
     executor:
       class: large
@@ -258,7 +265,7 @@ jobs:
             cd ..
             npx create-react-app cra-bench
             cd cra-bench
-            npx @storybook/bench@latest 'npx sb init' --label cra --extra-flags "--modern"
+            npx @storybook/bench@latest 'npx sb init' --label cra
   e2e-tests-pnp:
     executor:
       class: medium
@@ -317,65 +324,25 @@ jobs:
           destination: cypress
   smoke-tests:
     executor:
-      class: medium
+      class: medium+
       name: sb_node_14_browsers
     environment:
       # Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
       # because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
       DISABLE_ESLINT_PLUGIN: 'true'
+    parallelism: 16
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
-          name: Run react kitchen-sink (smoke test)
-          command: |
-            cd examples/cra-kitchen-sink
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run react typescript kitchen-sink (smoke test)
-          command: |
-            cd examples/cra-ts-kitchen-sink
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run vue kitchen-sink (smoke test)
-          command: |
-            cd examples/vue-kitchen-sink
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run svelte kitchen-sink (smoke test)
-          command: |
-            cd examples/svelte-kitchen-sink
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run angular-cli (smoke test)
-          command: |
-            cd examples/angular-cli
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run ember-cli (smoke test)
-          command: |
-            cd examples/ember-cli
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run official-storybook (smoke test)
+          name: smoke tests
           command: |
-            cd examples/official-storybook
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run preact kitchen-sink (smoke test)
-          command: |
-            cd examples/preact-kitchen-sink
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run cra react15 (smoke test)
-          command: |
-            cd examples/cra-react15
-            yarn storybook --smoke-test --quiet
+            yarn smoketest-storybooks --all
   lint:
     executor:
-      class: small
+      class: medium
       name: sb_node_14_classic
     steps:
       - git-shallow-clone/checkout_advanced:

.eslintignore

@@ -7,7 +7,6 @@ docs/public
 storybook-static
 built-storybooks
 lib/cli/test
-lib/manager-webpack4/prebuilt
 lib/manager-webpack5/prebuilt
 lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
       'error',
       { additionalTestBlockFunctions: ['it.skipWindows', 'it.onWindows'] },
     ],
+    'no-use-before-define': 'off',
   },
   overrides: [
     {
@@ -16,6 +17,14 @@ module.exports = {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        'no-shadow': 'off',
+        '@typescript-eslint/ban-types': 'warn', // should become error, in the future
+      },
+    },
     {
       // this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
       files: [

.gitignore

@@ -32,7 +32,7 @@ cypress/screenshots
 examples/ember-cli/ember-output
 .verdaccio-cache
 tsconfig.tsbuildinfo
-lib/manager-webpack4/prebuilt
+lib/manager-webpack5/prebuilt
 lib/manager-webpack5/prebuilt
 examples/angular-cli/addon-jest.testresults.json
 junit.xml

.teamcity/settings.kts

@@ -392,8 +392,6 @@ object SmokeTests : BuildType({
                 cd ../preact-kitchen-sink
                 yarn storybook --smoke-test --quiet
                 
-                cd ../cra-react15
-                yarn storybook --smoke-test --quiet
             """.trimIndent()
             dockerImage = "node:12"
             dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux

addons/a11y/package.json

@@ -27,14 +27,7 @@
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/ts3.9/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -81,7 +74,6 @@
     "access": "public"
   },
   "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
-  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

addons/a11y/src/components/A11YPanel.test.tsx

@@ -100,29 +100,27 @@ describe('A11YPanel', () => {
     });
   });
 
-  describe('running', () => {
-    it('should handle "running" status', async () => {
-      const emit = jest.fn();
-      mockedApi.useChannel.mockReturnValue(emit);
-      mockedApi.useParameter.mockReturnValue({ manual: true });
-      const { getByRole, getByText } = render(<ThemedA11YPanel />);
-      await waitFor(() => {
-        const button = getByRole('button', { name: 'Run test' });
-        fireEvent.click(button);
-      });
-      await waitFor(() => {
-        expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
-        expect(emit).toHaveBeenCalledWith(EVENTS.MANUAL, 'jest');
-      });
+  it('should handle "running" status', async () => {
+    const emit = jest.fn();
+    mockedApi.useChannel.mockReturnValue(emit);
+    mockedApi.useParameter.mockReturnValue({ manual: true });
+    const { getByRole, getByText } = render(<ThemedA11YPanel />);
+    await waitFor(() => {
+      const button = getByRole('button', { name: 'Run test' });
+      fireEvent.click(button);
+    });
+    await waitFor(() => {
+      expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
+      expect(emit).toHaveBeenCalledWith(EVENTS.MANUAL, 'jest');
     });
+  });
 
-    it('should set running status on event', async () => {
-      const { getByText } = render(<ThemedA11YPanel />);
-      const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
-      act(() => useChannelArgs[EVENTS.RUNNING]());
-      await waitFor(() => {
-        expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
-      });
+  it('should set running status on event', async () => {
+    const { getByText } = render(<ThemedA11YPanel />);
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    act(() => useChannelArgs[EVENTS.RUNNING]());
+    await waitFor(() => {
+      expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
     });
   });
 

addons/a11y/src/components/VisionSimulator.test.tsx

@@ -56,7 +56,6 @@ describe('Vision Simulator', () => {
     fireEvent.click(screen.getByText('blurred vision'));
 
     // then
-    // eslint-disable-next-line no-undef
     const rule = Object.values(document.styleSheets)
       .filter(({ cssRules }) => cssRules)
       .map(({ cssRules }) => Object.values(cssRules))

addons/a11y/tsconfig.json

@@ -1,16 +1,19 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["jest"],
+    "types": [
+      "jest"
+    ],
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
   "exclude": [
     "src/**/*.test.*",
     "src/**/tests/**/*",
@@ -19,4 +22,4 @@
     "src/**/*.mockdata.*",
     "src/**/__testfixtures__/**"
   ]
-}
+}

addons/actions/package.json

@@ -23,14 +23,7 @@
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/ts3.9/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -80,7 +73,6 @@
     "access": "public"
   },
   "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
-  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [

addons/actions/tsconfig.json

@@ -1,10 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
     "types": ["jest"]
   },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
   "exclude": [
     "src/**/*.test.*",
     "src/**/tests/**/*",

addons/backgrounds/package.json

@@ -27,14 +27,7 @@
   "author": "jbaxleyiii",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/ts3.9/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -75,7 +68,6 @@
     "access": "public"
   },
   "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
-  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

addons/backgrounds/tsconfig.json

@@ -1,9 +1,8 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src"
-  },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
   "exclude": [
     "src/**/*.test.*",
     "src/**/tests/**/*",