Merge pull request #21974 from storybookjs/main-prerelease

Patching 7.1.0-alpha.0 changes back to main

.circleci/config.yml

@@ -701,30 +701,30 @@ 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:
           parallelism: 4
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 30
+          parallelism: 31
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

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.

code/addons/actions/package.json

@@ -61,6 +61,9 @@
       "manager": [
         "dist/manager.d.ts"
       ],
+      "decorator": [
+        "dist/decorator.d.ts"
+      ],
       "preview": [
         "dist/preview.d.ts"
       ]

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:

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:

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:

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`:

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,
-    },
   },
 };

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:

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:

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"
   },

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.
 `);

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 =

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: {

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<ApplicationRef>();
+const applicationRefs = new Map<HTMLElement, ApplicationRef>();
 
 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<HTMLElement, StoryRenderInfo>();
 
   // Observable to change the properties dynamically without reloading angular module&component
   protected storyProps$: Subject<ICollection | undefined>;
@@ -67,7 +67,7 @@ export abstract class AbstractRenderer {
     }
   }
 
-  protected abstract beforeFullRender(): Promise<void>;
+  protected abstract beforeFullRender(domNode?: HTMLElement): Promise<void>;
 
   protected abstract afterFullRender(): Promise<void>;
 
@@ -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

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<void> {
-    DocsRenderer.resetApplications();
+  async beforeFullRender(domNode?: HTMLElement): Promise<void> {
+    DocsRenderer.resetApplications(domNode);
   }
 
   async afterFullRender(): Promise<void> {