Merge branch 'next' into future/CSF3-svelte

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 executors:
-  sb_node_14_classic:
+  sb_node_16_classic:
     parameters:
       class:
         description: The Resource class
@@ -14,7 +14,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_node_14_browsers:
+  sb_node_16_browsers:
     parameters:
       class:
         description: The Resource class
@@ -78,7 +78,7 @@ jobs:
   check:
     executor:
       class: xlarge
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -87,14 +87,14 @@ jobs:
           keys:
             - build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
       - run:
-          name: Compile
+          name: Check
           command: |
             yarn task --task check --start-from=auto --no-link --debug
             git diff --exit-code
   build:
     executor:
       class: xlarge
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -126,7 +126,7 @@ jobs:
             - code/renderers
             - code/presets
   chromatic:
-    executor: sb_node_14_browsers
+    executor: sb_node_16_browsers
     parallelism: 15
     steps:
       # Keep using default checkout because Chromatic needs some git history to work properly
@@ -141,7 +141,7 @@ jobs:
   examples:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     parallelism: 4
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -160,7 +160,7 @@ jobs:
   publish:
     executor:
       class: medium
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -240,7 +240,7 @@ jobs:
   smoke-tests:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_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
@@ -259,7 +259,7 @@ jobs:
   lint:
     executor:
       class: medium
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -271,7 +271,7 @@ jobs:
             cd code
             yarn lint
   script-unit-tests:
-    executor: sb_node_14_browsers
+    executor: sb_node_16_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -285,7 +285,7 @@ jobs:
       - store_test_results:
           path: scripts/junit.xml
   unit-tests:
-    executor: sb_node_14_browsers
+    executor: sb_node_16_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -305,7 +305,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -321,7 +321,7 @@ jobs:
   create-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     parallelism: 20
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -340,7 +340,7 @@ jobs:
   smoke-test-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     parallelism: 15
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -355,7 +355,7 @@ jobs:
   build-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     parallelism: 20
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -374,7 +374,7 @@ jobs:
   test-runner-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     parallelism: 18
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -389,7 +389,7 @@ jobs:
   chromatic-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     parallelism: 20
     steps:
       - git-shallow-clone/checkout_advanced:

.yarnrc.yml

@@ -1,4 +1,5 @@
+installStatePath: ./.yarn/root-install-state.gz
+
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
-installStatePath: "./.yarn/root-install-state.gz"
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

MIGRATION.md

@@ -414,7 +414,7 @@ If you are running into errors, you can upgrade your project to Webpack5 or you
 To upgrade:
 
 - If you're configuring webpack directly, see the Webpack5 [release announcement](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) and [migration guide](https://webpack.js.org/migrate/5).
-- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to ugprade from V4 (Webpack4) to 5
+- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to upgrade from V4 (Webpack4) to 5
 
 During the 7.0 dev cycle we will be updating this section with useful resources as we run across them.
 

README.md

@@ -124,7 +124,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
 | [jest](code/addons/jest/)                                                 | View the results of components' unit tests in Storybook                    |
 | [links](code/addons/links/)                                               | Create links between stories                                               |
 | [measure](code/addons/measure/)                                           | Visually inspect the layout and box model within the Storybook UI          |
-| [outline](code/addons/outline/)                                           | Visuallly debug the CSS layout and alignment within the Storybook UI       |
+| [outline](code/addons/outline/)                                           | Visually debug the CSS layout and alignment within the Storybook UI        |
 | [query params](https://github.com/storybookjs/addon-queryparams)          | Mock query params                                                          |
 | [storyshots](code/addons/storyshots/)                                     | Snapshot testing for components in Storybook                               |
 | [storysource](code/addons/storysource/)                                   | View the code of your stories within the Storybook UI                      |

code/.yarnrc.yml

@@ -27,5 +27,5 @@ plugins:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-3.2.3.cjs
+yarnPath: ../.yarn/releases/yarn-3.2.4.cjs
 installStatePath: '../.yarn/code-install-state.gz'

code/addons/a11y/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/actions/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/backgrounds/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/controls/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/interactions/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/jest/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/links/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/measure/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/outline/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/toolbars/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/viewport/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/frameworks/server-webpack5/README.md

@@ -92,7 +92,7 @@ In particular the [View Component::Storybook](https://github.com/jonspalmer/view
 
 ## Server rendering
 
-The server rendering side of things is relatively straightfoward. When you browse to a story in the sidebar, Storybook will make a `fetch` request to `${parameters.server.url}/{parameters.server.id}` and display the HTML that is returned.
+The server rendering side of things is relatively straightforward. When you browse to a story in the sidebar, Storybook will make a `fetch` request to `${parameters.server.url}/{parameters.server.id}` and display the HTML that is returned.
 
 You need to ensure the route in your server app renders the appropriate HTML when called in that fashion.
 

code/lib/api/src/modules/layout.ts

@@ -4,7 +4,7 @@ import { dequal as deepEqual } from 'dequal';
 import { create } from '@storybook/theming/create';
 import { SET_CONFIG } from '@storybook/core-events';
 import type { ThemeVars } from '@storybook/theming';
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import { dedent } from 'ts-dedent';
 
 import merge from '../lib/merge';
@@ -226,7 +226,7 @@ export const init: ModuleFn = ({ store, provider, singleStory, fullAPI }) => {
       const { theme, selectedPanel, ...options } = provider.getConfig();
 
       if (options.layout?.isToolshown !== undefined) {
-        once.warn(dedent`
+        deprecate(dedent`
           The "isToolshown" option is deprecated. Please use "showToolbar" instead.
 
           See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#renamed-istoolshown-to-showtoolbar

code/lib/api/src/modules/url.ts

@@ -1,4 +1,4 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import {
   NAVIGATE_URL,
   STORY_ARGS_UPDATED,
@@ -72,7 +72,7 @@ const initialUrlSupport = ({
 
   // @deprecated Superceded by `panel=false`, to be removed in 7.0
   if (addons === '0') {
-    once.warn(dedent`
+    deprecate(dedent`
       The 'addons' query param is deprecated and will be removed in Storybook 7.0. Use 'panel=false' instead.
 
       More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-layout-url-params
@@ -81,7 +81,7 @@ const initialUrlSupport = ({
   }
   // @deprecated Superceded by `panel=right`, to be removed in 7.0
   if (panelRight === '1') {
-    once.warn(dedent`
+    deprecate(dedent`
       The 'panelRight' query param is deprecated and will be removed in Storybook 7.0. Use 'panel=right' instead.
 
       More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-layout-url-params
@@ -90,7 +90,7 @@ const initialUrlSupport = ({
   }
   // @deprecated Superceded by `nav=false`, to be removed in 7.0
   if (stories === '0') {
-    once.warn(dedent`
+    deprecate(dedent`
       The 'stories' query param is deprecated and will be removed in Storybook 7.0. Use 'nav=false' instead.
 
       More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-layout-url-params
@@ -103,7 +103,7 @@ const initialUrlSupport = ({
   // NOTE: this "storyId" can just be a prefix of a storyId, really it is a storyIdSpecifier.
   let storyId = storyIdFromUrl;
   if (!storyId && selectedKind) {
-    once.warn(dedent`
+    deprecate(dedent`
       The 'selectedKind' and 'selectedStory' query params are deprecated and will be removed in Storybook 7.0. Use 'path' instead.
 
       More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-layout-url-params

code/lib/blocks/src/blocks/types.ts

@@ -1,11 +1,11 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 
 /**
  * No longer supported, only here to help with error handling
  */
 export const CURRENT_SELECTION = '.';
 export const currentSelectionWarning = () =>
-  once.warn(
+  deprecate(
     '`of="."` (current selection) is no longer supported in doc blocks. Falling back to primary story'
   );
 

code/lib/blocks/src/controls/options/Options.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { dedent } from 'ts-dedent';
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 
 import { CheckboxControl } from './Checkbox';
 import { RadioControl } from './Radio';
@@ -48,7 +48,7 @@ export const OptionsControl: FC<OptionsProps> = (props) => {
   };
 
   if (options) {
-    once.warn(dedent`
+    deprecate(dedent`
       'control.options' is deprecated and will be removed in Storybook 7.0. Define 'options' directly on the argType instead, and use 'control.labels' for custom labels.
 
       More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions