Merge branch 'next' into fix/silence-unexpected-color-warning/16322

.babelrc.js

@@ -6,7 +6,7 @@ const withTests = {
     ],
   ],
   plugins: [
-    'babel-plugin-require-context-hook',
+    '@storybook/babel-plugin-require-context-hook',
     'babel-plugin-dynamic-import-node',
     '@babel/plugin-transform-runtime',
   ],
@@ -24,6 +24,7 @@ module.exports = {
   ignore: [
     './lib/codemod/src/transforms/__testfixtures__',
     './lib/postinstall/src/__testfixtures__',
+    '**/typings.d.ts',
   ],
   presets: [
     [
@@ -49,11 +50,12 @@ module.exports = {
     ],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
     'babel-plugin-macros',
-    ['emotion', { sourceMap: true, autoLabel: true }],
+    ['@emotion', { sourceMap: true, autoLabel: 'always' }],
   ],
   env: {
     test: withTests,
@@ -85,9 +87,10 @@ module.exports = {
         ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
         '@babel/plugin-proposal-export-default-from',
         '@babel/plugin-syntax-dynamic-import',
+        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        ['@emotion', { sourceMap: true, autoLabel: 'always' }],
         'babel-plugin-add-react-displayname',
       ],
       env: {
@@ -122,12 +125,13 @@ module.exports = {
         ],
       ],
       plugins: [
-        'emotion',
+        '@emotion',
         'babel-plugin-macros',
         '@babel/plugin-transform-arrow-functions',
         '@babel/plugin-transform-shorthand-properties',
         '@babel/plugin-transform-block-scoping',
         '@babel/plugin-transform-destructuring',
+        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         '@babel/plugin-proposal-object-rest-spread',
         '@babel/plugin-proposal-export-default-from',

.circleci/config.yml

@@ -1,44 +1,44 @@
 version: 2.1
 
 executors:
-  sb_node_12_classic:
+  sb_node_14_classic:
     parameters:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:12
+      - image: circleci/node:14
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_node_12_browsers:
+  sb_node_14_browsers:
     parameters:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:12-browsers
+      - image: circleci/node:14-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_cypress_6_node_12:
+  sb_cypress_8_node_14:
     parameters:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
       # ⚠️ The Cypress docker image is based on Node.js one so be careful when updating it because it can also
-      # cause an upgrade of the Node.
-      - image: cypress/included:6.8.0
+      # cause an upgrade of Node.js version too. Cypress 8.5 image is based on Node.js 14
+      - image: cypress/included:8.7.0
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
@@ -79,23 +79,23 @@ jobs:
   build:
     executor:
       class: xlarge
-      name: sb_node_12_classic
+      name: sb_node_14_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - restore_cache:
           name: Restore Yarn cache
           keys:
-            - build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
+            - build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
           command: yarn install --immutable
       - run:
           name: Bootstrap
-          command: yarn bootstrap --core
+          command: yarn bootstrap --build --manager
       - save_cache:
           name: Save Yarn cache
-          key: build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
+          key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
           paths:
             - ~/.yarn/berry/cache
       - persist_to_workspace:
@@ -107,7 +107,7 @@ jobs:
             - app
             - lib
   chromatic:
-    executor: sb_node_12_browsers
+    executor: sb_node_14_browsers
     parallelism: 4
     steps:
       # Keep using default checkout because Chromatic needs some git history to work properly
@@ -118,25 +118,11 @@ jobs:
           name: examples
           command: |
             yarn run-chromatics
-  packtracker:
-    executor:
-      class: medium
-      name: sb_node_12_browsers
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: Report webpack stats for manager of official storybook
-          command: |
-            cd examples/official-storybook
-            yarn packtracker
   examples:
     executor:
-      class: medium
-      name: sb_node_12_browsers
-    parallelism: 4
+      class: medium+
+      name: sb_node_14_browsers
+    parallelism: 17
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -145,15 +131,15 @@ jobs:
       - run:
           name: examples
           command: |
-            yarn build-storybooks
+            yarn build-storybooks --all
       - persist_to_workspace:
           root: .
           paths:
             - built-storybooks
   publish:
     executor:
       class: medium
-      name: sb_node_12_classic
+      name: sb_node_14_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -169,7 +155,7 @@ jobs:
   e2e-tests-extended:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     parallelism: 4
     steps:
       - when:
@@ -194,17 +180,17 @@ jobs:
           name: Wait for registry
           command: yarn wait-on http://localhost:6000
       - run:
-          name: Run E2E tests
-          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
+          name: Run E2E (extended) tests
+          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
           no_output_timeout: 5m
       - store_artifacts:
           path: /tmp/cypress-record
           destination: cypress
   e2e-tests-core:
     executor:
       class: large
-      name: sb_cypress_6_node_12
-    parallelism: 2
+      name: sb_cypress_8_node_14
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -218,18 +204,39 @@ jobs:
           name: Wait for registry
           command: yarn wait-on http://localhost:6000
       - run:
-          name: Run E2E tests
+          name: Run E2E (core) tests
           # Do not test CRA here because it's done in PnP part
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
-          command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
+          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
       - store_artifacts:
           path: /tmp/cypress-record
           destination: cypress
+  e2e-tests-sb-docs:
+    executor:
+      class: large
+      name: sb_cypress_8_node_14
+    parallelism: 2
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: Wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: Run smoke tests
+          command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
+          no_output_timeout: 5m
   cra-bench:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -249,11 +256,11 @@ jobs:
             cd ..
             npx create-react-app cra-bench
             cd cra-bench
-            npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern"
+            npx @storybook/bench@latest 'npx sb init' --label cra --extra-flags "--modern"
   e2e-tests-pnp:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -268,15 +275,25 @@ jobs:
           name: Wait for registry
           command: yarn wait-on http://localhost:6000
       - run:
-          name: run e2e tests
-          command: yarn test:e2e-framework --pnp sfcVue cra
+          name: run e2e tests cra
+          command: yarn test:e2e-framework --pnp cra
+      # - run:
+      #     name: run e2e tests vue
+      #     command: yarn test:e2e-framework --pnp sfcVue
+      - 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-examples:
     executor:
       class: small
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -298,7 +315,7 @@ jobs:
   smoke-tests:
     executor:
       class: medium
-      name: sb_node_12_browsers
+      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
@@ -353,21 +370,10 @@ jobs:
           command: |
             cd examples/cra-react15
             yarn storybook --smoke-test --quiet
-  frontpage:
-    executor: sb_node_12_browsers
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - run:
-          name: Install dependencies
-          command: yarn install --immutable
-      - run:
-          name: Trigger build
-          command: ./scripts/build-frontpage.js
   lint:
     executor:
       class: small
-      name: sb_node_12_classic
+      name: sb_node_14_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -377,7 +383,7 @@ jobs:
           name: Lint
           command: yarn lint
   unit-tests:
-    executor: sb_node_12_browsers
+    executor: sb_node_14_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -386,14 +392,16 @@ jobs:
       - run:
           name: Test
           command: yarn test --coverage --runInBand --ci
+      - store_test_results:
+          path: junit.xml
       - persist_to_workspace:
           root: .
           paths:
             - coverage
   coverage:
     executor:
       class: small
-      name: sb_node_12_browsers
+      name: sb_node_14_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -419,9 +427,6 @@ workflows:
       - smoke-tests:
           requires:
             - build
-      - packtracker:
-          requires:
-            - build
       - unit-tests:
           requires:
             - build
@@ -440,12 +445,12 @@ workflows:
       - e2e-tests-core:
           requires:
             - publish
+      - e2e-tests-sb-docs:
+          requires:
+            - publish
       - e2e-tests-pnp:
           requires:
             - publish
       - cra-bench:
           requires:
             - publish
-  deploy:
-    jobs:
-      - frontpage