storybookjs · kylegach · Apr 5, 2023 · Apr 5, 2023
diff --git 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
@@ -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
@@ -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
@@ -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/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
@@ -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/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md
@@ -88,7 +88,7 @@
 Follow the prompts after running this command in your Next.js project's root directory:
 
 ```bash
-npx storybook@next init
+npx storybook@latest init
 ```
 
 [More on getting started with Storybook](https://storybook.js.org/docs/react/get-started/install)
@@ -98,7 +98,7 @@ npx storybook@next init
 This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
 
 ```bash
-npx storybook@next upgrade --prerelease
+npx storybook@latest upgrade --prerelease
 ```
 
 #### Automatic migration
@@ -110,7 +110,7 @@ When running the `upgrade` command above, you should get a prompt asking you to
 Install the framework:
 
 ```bash
-yarn add --dev @storybook/nextjs@next
+yarn add --dev @storybook/nextjs
 ```
 
 Update your `main.js` to change the framework property:

diff --git a/code/frameworks/preact-vite/README.md b/code/frameworks/preact-vite/README.md
@@ -12,7 +12,7 @@
 Follow the prompts after running this command in your Preact project's root directory:
 
 ```bash
-npx storybook@next init
+npx storybook@latest init
 ```
 
 [More on getting started with Storybook](https://storybook.js.org/docs/preact/get-started/install)
@@ -22,15 +22,15 @@ npx storybook@next init
 This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
 
 ```bash
-npx storybook@next upgrade --prerelease
+npx storybook@latest upgrade --prerelease
 ```
 
 #### Manual migration
 
 Install the framework:
 
 ```bash
-yarn add --dev @storybook/preact-vite@next
+yarn add --dev @storybook/preact-vite
 ```
 
 Update your `main.js` to change the framework property:

diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md
@@ -52,7 +52,7 @@ This is just the beginning. We're close to adding basic support for many of the
 Run the following command in your SvelteKit project's root directory, and follow the prompts:
 
 ```bash
-npx storybook@next init
+npx storybook@latest init
 ```
 
 [More on getting started with Storybook](https://storybook.js.org/docs/svelte/get-started/install)
@@ -62,7 +62,7 @@ npx storybook@next init
 This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
 
 ```bash
-npx storybook@next upgrade --prerelease
+npx storybook@latest upgrade --prerelease
 ```
 
 #### Automatic migration
@@ -76,7 +76,7 @@ Storybook 7.0 automatically loads your Vite config, and by extension your Svelte
 Install the framework:
 
 ```bash
-yarn add -D @storybook/sveltekit@next
+yarn add -D @storybook/sveltekit
 ```
 
 Update your `main.js` to change the framework property:

diff --git a/code/lib/builder-vite/README.md b/code/lib/builder-vite/README.md
@@ -39,7 +39,7 @@ See https://vitejs.dev/guide/#scaffolding-your-first-vite-project,
 
 ```
 npm create vite@latest # follow the prompts
-npx sb@next init --builder vite && npm run storybook
+npx storybook@latest init --builder vite && npm run storybook
 ```
 
 ### Migration from webpack / CRA

@@ -22,12 +22,6 @@ For example, to include accessibility testing in Storybook, run the following co
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
-
-</div>
-
 Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
 
 <!-- prettier-ignore-start -->

@@ -23,12 +23,6 @@ To opt into a builder, the user must add it as a dependency and then edit their
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
-
-</div>
-
 <!-- prettier-ignore-start -->
 
 <CodeSnippets

@@ -24,12 +24,6 @@ Run the following command to install the builder.
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
-
-</div>
-
 Update your Storybook configuration (in `.storybook/main.js|ts`) to include the builder.
 
 <!-- prettier-ignore-start -->

@@ -81,7 +81,7 @@ For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md]
 If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory:
 
 ```sh
-npx storybook@next babelrc
+npx storybook@latest babelrc
 ```
 
 Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example:

@@ -51,11 +51,11 @@ Storybook's main configuration (i.e., the `main.js|ts`) defines your Storybook p
 
 Additionally, you can also provide additional feature flags to your Storybook configuration. Below is an abridged list of available features that are currently available.
 
-| Configuration element | Description                                                                                                                                                            |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up <br/> `features: { storyStoreV7: true }`                        |
-| `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on-demand mode <br/> `features: { buildStoriesJson: true }`                                             |
-| `legacyMdx1`          | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf@next`](https://github.com/storybookjs/mdx1-csf) <br/> `features: { legacyMdx1: true }` |
+| Configuration element | Description                                                                                                                                                       |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up <br/> `features: { storyStoreV7: true }`                   |
+| `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on-demand mode <br/> `features: { buildStoriesJson: true }`                                        |
+| `legacyMdx1`          | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf`](https://github.com/storybookjs/mdx1-csf) <br/> `features: { legacyMdx1: true }` |
 
 ## Configure story loading
 

@@ -24,12 +24,6 @@ Make sure you have installed [`@storybook/manager-api`](https://www.npmjs.com/pa
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
-
-</div>
-
 As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering):
 
 <!-- prettier-ignore-start -->

@@ -10,9 +10,16 @@ The most common upgrade is Storybook itself. [Storybook releases](https://storyb
 
 To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
 
-```sh
-npx storybook upgrade
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-upgrade.npm.js.mdx',
+    'common/storybook-upgrade.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
 
@@ -27,7 +34,7 @@ In addition to running the command, we also recommend checking the [MIGRATION.md
 Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
 
 ```
-npx storybook@next automigrate
+npx storybook@latest automigrate
 ```
 
 It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.

@@ -32,12 +32,6 @@ Run the following command to install the interactions addon and related dependen
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
-
-</div>
-
 Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
 
 <!-- prettier-ignore-start -->

@@ -31,12 +31,6 @@ If you're upgrading from a previous Storybook version, you'll need to run the fo
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
-
-</div>
-
 Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
 
 <!-- prettier-ignore-start -->
@@ -68,12 +62,6 @@ If you need to reconfigure any of the [individual Essentials addons](https://sto
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ Installing the package with `@next` will install the cutting-edge version of it. Be advised prerelease versions are subject to breaking changes and are not recommended for production use. Use at your own risk.
-
-</div>
-
 <!-- prettier-ignore-start -->
 
 <CodeSnippets

@@ -13,7 +13,7 @@
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
 
   ```shell
-  npx storybook@next automigrate
+  npx storybook@latest automigrate
   ```
 
   Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.

@@ -13,7 +13,7 @@
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
 
   ```shell
-  npx storybook@next automigrate
+  npx storybook@latest automigrate
   ```
 
 Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade) for more information on how to set up Webpack 5.

@@ -96,7 +96,7 @@ If, for some reason, you are unable to get MDX2 working, we’ve implemented leg
 
 To use MDX1:
 
-1. Install `@storybook/mdx1-csf@next` as a dev dependency
+1. Install `@storybook/mdx1-csf` as a dev dependency
 2. Add the `legacyMdx1` feature flag to your `.storybook/main.js`:
 
 <!-- prettier-ignore-start -->
@@ -166,23 +166,23 @@ We published a [detailed post about CSF3](https://storybook.js.org/blog/storyboo
 If you want to just skip to the migration, we provide a codemod for your convenience which should automatically make the code changes for you (make sure to update the glob to fit your files):
 
 ```sh
-npx storybook@next migrate csf-2-to-3 --glob="src/**/*.stories.js"
+npx storybook@latest migrate csf-2-to-3 --glob="src/**/*.stories.js"
 ```
 
 ### storiesOf to CSF
 
 Storybook 7's architecture is focused on performance and needs code that is statically analyzable. For that reason, it does not work with `storiesOf`. We provide a codemod which, in most cases, should automatically make the code changes for you (make sure to update the glob to fit your files):
 
 ```sh
-npx storybook@next migrate storiesof-to-csf --glob="src/**/*.stories.tsx"
+npx storybook@latest migrate storiesof-to-csf --glob="src/**/*.stories.tsx"
 ```
 
 ### .stories.mdx to MDX+CSF
 
 Storybook 7 provides a cleaner [docs](./writing-docs/introduction.md) that defines manual documentation in pure MDX and stories in CSF, rather than the previous `.stories.mdx` hybrid approach, which is now deprecated. You can automatically convert your files using the following codemod (make sure to update the glob to fit your files):
 
 ```sh
-npx storybook@next migrate mdx-to-csf --glob "src/**/*.stories.mdx"
+npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 ```
 
 You’ll also need to update your `stories` glob in `.storybook/main.js` to include the newly created `.mdx` and `.stories.js` files if it doesn’t already.

@@ -1,3 +1,3 @@
 ```shell
-npm install @storybook/addon-a11y@next --save-dev
+npm install @storybook/addon-a11y --save-dev
 ```
@@ -1,3 +1,3 @@
 ```shell
-pnpm add --save-dev @storybook/addon-a11y@next
+pnpm add --save-dev @storybook/addon-a11y
 ```
@@ -1,3 +1,3 @@
 ```shell
-yarn add --dev @storybook/addon-a11y@next
+yarn add --dev @storybook/addon-a11y
 ```
@@ -1,3 +1,3 @@
 ```shell
-npm install @storybook/addon-actions@next --save-dev
+npm install @storybook/addon-actions --save-dev
 ```
@@ -1,3 +1,3 @@
 ```shell
-pnpm add --save-dev @storybook/addon-actions@next
+pnpm add --save-dev @storybook/addon-actions
 ```
@@ -1,3 +1,3 @@
 ```shell
-yarn add --dev @storybook/addon-actions@next
+yarn add --dev @storybook/addon-actions
 ```
@@ -1,3 +1,3 @@
 ```shell
-npm install @storybook/addon-essentials@next --save-dev
+npm install @storybook/addon-essentials --save-dev
 ```
@@ -1,3 +1,3 @@
 ```shell
-pnpm add --save-dev @storybook/addon-essentials@next
+pnpm add --save-dev @storybook/addon-essentials
 ```
@@ -1,3 +1,3 @@
 ```shell
-yarn add --dev @storybook/addon-essentials@next
+yarn add --dev @storybook/addon-essentials
 ```
@@ -1,3 +1,3 @@
 ```shell
-npm install @storybook/testing-library@next @storybook/jest@next @storybook/addon-interactions@next --save-dev
+npm install @storybook/testing-library @storybook/jest @storybook/addon-interactions --save-dev
 ```
@@ -1,3 +1,3 @@
 ```shell
-pnpm add --save-dev @storybook/testing-library@next @storybook/jest@next @storybook/addon-interactions@next
+pnpm add --save-dev @storybook/testing-library @storybook/jest @storybook/addon-interactions
 ```