diff --git a/.circleci/config.yml b/.circleci/config.yml index 590f6ba9a71f..ba7d9e3e5397 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -701,22 +701,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 30 + parallelism: 31 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-production: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-dev: @@ -724,7 +724,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes # TODO: reenable once we find out the source of flakyness diff --git a/MIGRATION.md b/MIGRATION.md index 048849f31dac..a942ad942b78 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -35,7 +35,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -82,7 +82,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [parameters.docs.source.excludeDecorators defaults to true](#parametersdocssourceexcludedecorators-defaults-to-true) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) @@ -297,7 +297,7 @@ ## From version 6.5.x to 7.0.0 -A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@next upgrade --prerelease` or `pnpx storybook@next upgrade --prerelease`. +A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx dlx storybook@latest upgrade --prerelease`. ### 7.0 breaking changes @@ -610,7 +610,7 @@ _Has automigration_ Storybook 7 introduces the concept of `frameworks`, which abstracts configuration for `renderers` (e.g. React, Vue), `builders` (e.g. Webpack, Vite) and defaults to make integrations easier. This requires quite a few changes, depending on what your project is using. **We recommend you to use the automigrations**, but in case the command fails or you'd like to do the changes manually, here's a guide: > Note: -> All of the following changes can be done automatically either via `npx storybook@next upgrade --prerelease` or via the `npx storybook@next automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do. +> All of the following changes can be done automatically either via `npx storybook@latest upgrade --prerelease` or via the `npx storybook@latest automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do. ##### Available framework packages @@ -1032,7 +1032,7 @@ Storybook now uses [Babel mode v7](#babel-mode-v7) exclusively. In 6.x, Storyboo In the new mode, Storybook expects you to provide a configuration file. Depending on the complexity your project, Storybook will fail to run without a babel configuration. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory: ```sh -npx storybook@next babelrc +npx storybook@latest babelrc ``` This command will create a `.babelrc.json` file in your project, containing a few babel plugins which will be installed as dev dependencies. @@ -1510,7 +1510,7 @@ If you get stuck with the [MDX2 upgrade](#mdx2-upgrade), we also provide opt-in To process your `.stories.mdx` files with MDX1, first install the `@storybook/mdx1-csf` package in your project: ``` -yarn add -D @storybook/mdx1-csf@next +yarn add -D @storybook/mdx1-csf@latest ``` Then enable the `legacyMdx1` feature flag in your `.storybook/main.js` file: @@ -1618,10 +1618,6 @@ If your story depends on a play function to render correctly, _and_ you are conf This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`. -#### parameters.docs.source.excludeDecorators defaults to true - -By default we don't render decorators in the Source/Canvas blocks. If you want to render decorators, you can set the parameter to `false`. - ### 7.0 Deprecations and default changes #### storyStoreV7 enabled by default @@ -1946,7 +1942,7 @@ You can run the existing suite of automigrations to see which ones apply to your ``` -npx sb@next automigrate +npx sb@latest automigrate ``` @@ -1958,7 +1954,7 @@ Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, i ``` -npx sb@next automigrate +npx sb@latest automigrate ``` @@ -2212,7 +2208,7 @@ module.exports = { In the new mode, Storybook expects you to provide a configuration file. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory: ```sh -npx sb@next babelrc +npx sb@latest babelrc ``` This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly. @@ -2796,7 +2792,7 @@ Basic.decorators = [ ... ]; To help you upgrade your stories, we've created a codemod: ``` -npx @storybook/cli@next migrate csf-hoist-story-annotations --glob="**/*.stories.js" +npx @storybook/cli@latest migrate csf-hoist-story-annotations --glob="**/*.stories.js" ``` For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations). @@ -3090,7 +3086,7 @@ We've removed the ability to specify the hierarchy separators (how you control t If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.** ``` -npx sb@next migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)" +npx sb@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)" ``` We also now default to showing "roots", which are non-expandable groupings in the sidebar for the top-level groups. If you'd like to disable this, set the `showRoots` option in `.storybook/manager.js`: @@ -4210,7 +4206,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you - If you aren't using Babel yourself, and don't have .babelrc, install following dependencies: ``` - npm i -D @babel/core babel-loader@next + npm i -D @babel/core babel-loader@latest ``` - If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory. diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index e6c7dac0a572..3b35c439cf9f 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -61,6 +61,9 @@ "manager": [ "dist/manager.d.ts" ], + "decorator": [ + "dist/decorator.d.ts" + ], "preview": [ "dist/preview.d.ts" ] diff --git a/code/addons/docs/angular/README.md b/code/addons/docs/angular/README.md index f36e613bf874..a3bad52693aa 100644 --- a/code/addons/docs/angular/README.md +++ b/code/addons/docs/angular/README.md @@ -25,7 +25,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` exports: diff --git a/code/addons/docs/common/README.md b/code/addons/docs/common/README.md index ae232074aea1..1195d287d444 100644 --- a/code/addons/docs/common/README.md +++ b/code/addons/docs/common/README.md @@ -15,7 +15,7 @@ Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Ang First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/docs/ember/README.md b/code/addons/docs/ember/README.md index 487c621b1fe9..29af33a3b433 100644 --- a/code/addons/docs/ember/README.md +++ b/code/addons/docs/ember/README.md @@ -18,7 +18,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/docs/react/README.md b/code/addons/docs/react/README.md index 5200fea3bd2b..1ef7daf97bb5 100644 --- a/code/addons/docs/react/README.md +++ b/code/addons/docs/react/README.md @@ -23,7 +23,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` list of `addons`: diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts index 22712de48159..0d1183bd0cf1 100644 --- a/code/addons/docs/src/preview.ts +++ b/code/addons/docs/src/preview.ts @@ -4,8 +4,5 @@ export const parameters: any = { const { DocsRenderer } = (await import('./DocsRenderer')) as any; return new DocsRenderer(); }, - source: { - excludeDecorators: true, - }, }, }; diff --git a/code/addons/docs/vue/README.md b/code/addons/docs/vue/README.md index fa7c3d22d67c..17156db24017 100644 --- a/code/addons/docs/vue/README.md +++ b/code/addons/docs/vue/README.md @@ -23,7 +23,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/docs/vue3/README.md b/code/addons/docs/vue3/README.md index 539d6b066c03..4d79d29fad1d 100644 --- a/code/addons/docs/vue3/README.md +++ b/code/addons/docs/vue3/README.md @@ -23,7 +23,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 52cc337e7cef..9b8e142f5f49 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -51,7 +51,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/node-logger": "7.0.0-beta.52", + "@storybook/node-logger": "7.0.2", "remark-gfm": "^3.0.1", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/gfm/src/index.ts b/code/addons/gfm/src/index.ts index 76981b982a1b..ecfc725fc231 100644 --- a/code/addons/gfm/src/index.ts +++ b/code/addons/gfm/src/index.ts @@ -13,7 +13,7 @@ export const mdxLoaderOptions = async (config: any) => { deprecate(dedent` The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version. It's recommended you read this document: - https://storybook.js.org/docs/7.0/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm + https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. `); diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index bb7f5f0b81e0..615878d2cc28 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -155,9 +155,9 @@ export const ViewportTool: FC = memo( setState({ selected: defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id), - isRotated: state.isRotated, + isRotated: defaultOrientation === 'landscape', }); - }, [defaultViewport]); + }, [defaultOrientation, defaultViewport]); const { selected, isRotated } = state; const item = diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 8ea3a1bbc4dc..4aba0bd2970a 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -26,6 +26,15 @@ export const Selected = { }, }; +export const Orientation = { + parameters: { + viewport: { + defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0], + defaultOrientation: 'landscape', + }, + }, +}; + export const Custom = { parameters: { viewport: { diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 029de1cd02e6..d3aa188aff5d 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -1,4 +1,4 @@ -import { ApplicationRef, enableProdMode, importProvidersFrom, NgModule } from '@angular/core'; +import { ApplicationRef, enableProdMode, NgModule } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { BehaviorSubject, Subject } from 'rxjs'; @@ -14,16 +14,16 @@ type StoryRenderInfo = { moduleMetadataSnapshot: string; }; -const applicationRefs = new Set(); +const applicationRefs = new Map(); export abstract class AbstractRenderer { /** * Wait and destroy the platform */ - public static resetApplications() { + public static resetApplications(domNode?: HTMLElement) { componentNgModules.clear(); - applicationRefs.forEach((appRef) => { - if (!appRef.destroyed) { + applicationRefs.forEach((appRef, appDOMNode) => { + if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) { appRef.destroy(); } }); @@ -50,7 +50,7 @@ export abstract class AbstractRenderer { } }; - protected previousStoryRenderInfo: StoryRenderInfo; + protected previousStoryRenderInfo = new Map(); // Observable to change the properties dynamically without reloading angular module&component protected storyProps$: Subject; @@ -67,7 +67,7 @@ export abstract class AbstractRenderer { } } - protected abstract beforeFullRender(): Promise; + protected abstract beforeFullRender(domNode?: HTMLElement): Promise; protected abstract afterFullRender(): Promise; @@ -100,6 +100,7 @@ export abstract class AbstractRenderer { if ( !this.fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata: { ...storyFnAngular.moduleMetadata, @@ -112,7 +113,7 @@ export abstract class AbstractRenderer { return; } - await this.beforeFullRender(); + await this.beforeFullRender(targetDOMNode); // Complete last BehaviorSubject and set a new one for the current module if (this.storyProps$) { @@ -140,7 +141,7 @@ export abstract class AbstractRenderer { ], }); - applicationRefs.add(applicationRef); + applicationRefs.set(targetDOMNode, applicationRef); await this.afterFullRender(); } @@ -171,22 +172,24 @@ export abstract class AbstractRenderer { } private fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata, forced, }: { + targetDOMNode: HTMLElement; storyFnAngular: StoryFnAngularReturnType; moduleMetadata: NgModule; forced: boolean; }) { - const { previousStoryRenderInfo } = this; + const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode); const currentStoryRender = { storyFnAngular, moduleMetadataSnapshot: stringify(moduleMetadata), }; - this.previousStoryRenderInfo = currentStoryRender; + this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender); if ( // check `forceRender` of story RenderContext diff --git a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts index 945881088b82..d51573376fcb 100644 --- a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts @@ -38,8 +38,8 @@ export class DocsRenderer extends AbstractRenderer { await super.render({ ...options, forced: false }); } - async beforeFullRender(): Promise { - DocsRenderer.resetApplications(); + async beforeFullRender(domNode?: HTMLElement): Promise { + DocsRenderer.resetApplications(domNode); } async afterFullRender(): Promise { diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts index 85ce82c88270..8f280fb0c763 100644 --- a/code/frameworks/angular/template/cli/Button.stories.ts +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import Button from './button.component'; -// More on how to set up stories at: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction +// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction const meta: Meta