Merge branch 'next' into pr/17034

.babelrc.js

@@ -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,29 +1,29 @@
 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>>
@@ -32,7 +32,7 @@ executors:
       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:
@@ -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'
@@ -153,7 +139,7 @@ jobs:
   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'
@@ -194,8 +180,8 @@ 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 angular12 --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
@@ -204,7 +190,7 @@ jobs:
     executor:
       class: large
       name: sb_cypress_8_node_14
-    parallelism: 2
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -218,15 +204,35 @@ 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
-          # TODO: Add `angular` as soon as Storybook is compatible with Angular 13
-          command: yarn test:e2e-framework vue3 angular12 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
@@ -269,11 +275,21 @@ 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
@@ -299,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
@@ -357,7 +373,7 @@ jobs:
   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'
@@ -367,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'
@@ -376,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'
@@ -409,9 +427,6 @@ workflows:
       - smoke-tests:
           requires:
             - build
-      - packtracker:
-          requires:
-            - build
       - unit-tests:
           requires:
             - build
@@ -430,6 +445,9 @@ workflows:
       - e2e-tests-core:
           requires:
             - publish
+      - e2e-tests-sb-docs:
+          requires:
+            - publish
       - e2e-tests-pnp:
           requires:
             - publish

.eslintignore

@@ -11,7 +11,6 @@ lib/manager-webpack4/prebuilt
 lib/manager-webpack5/prebuilt
 lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
-lib/components/src/controls/react-editable-json-tree
 scripts/storage
 scripts/repros-generator
 *.bundle.js

.eslintrc.js

@@ -9,6 +9,25 @@ module.exports = {
     ],
   },
   overrides: [
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/addons/docs/**/*'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+    {
+      // this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
+      files: [
+        '**/lib/theming/**/*',
+        '**/lib/router/**/*',
+        '**/lib/ui/**/*',
+        '**/lib/components/**/*',
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
+      },
+    },
     {
       files: [
         '**/__tests__/**',
@@ -46,6 +65,16 @@ module.exports = {
         'react/prop-types': 'off', // we should use types
         'react/forbid-prop-types': 'off', // we should use types
         'no-dupe-class-members': 'off', // this is called overloads in typescript
+        'react/no-unused-prop-types': 'off', // we should use types
+        'react/default-props-match-prop-types': 'off', // we should use types
+        'import/no-named-as-default': 'warn',
+        'import/no-named-as-default-member': 'warn',
+        'react/destructuring-assignment': 'warn',
+
+        // This warns about importing interfaces and types in a normal import, it's arguably better to import with the `type` prefix separate from the runtime imports,
+        // I leave this as a warning right now because we haven't really decided yet, and the codebase is riddled with errors if I set to 'error'.
+        // It IS set to 'error' for JS files.
+        'import/named': 'warn',
       },
     },
     {

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,7 +12,7 @@ If your answer is yes to any of these, please make sure to include it in your PR
 
 <!--
 
-Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
+Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute
 
 Maintainers: Please tag your pull request with at least one of the following:
 `["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`

.github/stale.yml

@@ -4,6 +4,7 @@ daysUntilStale: 21
 daysUntilClose: 30
 # Issues with these labels will never be considered stale
 exemptLabels:
+  - linear
   - todo
   - ready
   - 'in progress'