From acd6f99a9d7ebe3cd26c705661822e8a6ae78db2 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 5 Apr 2023 17:01:02 +0100 Subject: [PATCH] updates next references in docs --- code/addons/docs/angular/README.md | 2 +- code/addons/docs/common/README.md | 2 +- code/addons/docs/ember/README.md | 2 +- code/addons/docs/react/README.md | 2 +- code/addons/docs/vue/README.md | 2 +- code/addons/docs/vue3/README.md | 2 +- docs/configure/babel.md | 2 +- docs/configure/overview.md | 10 +++++----- docs/configure/upgrading.md | 4 ++-- docs/contribute/code.md | 5 ++--- docs/contribute/how-to-reproduce.md | 4 ++-- docs/get-started/installation-problems/angular.mdx | 2 +- docs/get-started/installation-problems/react.mdx | 2 +- docs/migration-guide.md | 10 +++++----- .../common/storybook-fallback-mdx-install.npm.js.mdx | 2 +- .../common/storybook-fallback-mdx-install.pnpm.js.mdx | 2 +- .../common/storybook-fallback-mdx-install.yarn.js.mdx | 2 +- .../common/storybook-upgrade-prerelease.npm.js.mdx | 2 +- .../common/storybook-upgrade-prerelease.pnpm.js.mdx | 2 +- docs/writing-docs/mdx.md | 2 +- 20 files changed, 31 insertions(+), 32 deletions(-) diff --git a/code/addons/docs/angular/README.md b/code/addons/docs/angular/README.md index f36e613bf874..0aa4e045bb32 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@latest ``` 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..71443e91072b 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@latest ``` 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..a1ab2e135274 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@latest ``` 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..2496e428d0a6 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@latest ``` 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 index fa7c3d22d67c..ccbce4b3022e 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@latest ``` 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..41acd8bfa361 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@latest ``` Then add the following to your `.storybook/main.js` addons: diff --git a/docs/configure/babel.md b/docs/configure/babel.md index c5641689c141..f27a81b32f78 100644 --- a/docs/configure/babel.md +++ b/docs/configure/babel.md @@ -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: diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 0d1856078dcb..3c3ea374ba02 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -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
`features: { storyStoreV7: true }` | -| `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on-demand mode
`features: { buildStoriesJson: true }` | -| `legacyMdx1` | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf@next`](https://github.com/storybookjs/mdx1-csf)
`features: { legacyMdx1: true }` | +| Configuration element | Description | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `storyStoreV7` | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up
`features: { storyStoreV7: true }` | +| `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on-demand mode
`features: { buildStoriesJson: true }` | +| `legacyMdx1` | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf@latest`](https://github.com/storybookjs/mdx1-csf)
`features: { legacyMdx1: true }` | ## Configure story loading diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md index 56be45f5dea3..c9629e7e2344 100644 --- a/docs/configure/upgrading.md +++ b/docs/configure/upgrading.md @@ -24,10 +24,10 @@ In addition to running the command, we also recommend checking the [MIGRATION.md ## Automigrate script -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: +Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 14](https://angular.io/guide/update-to-version-14), [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. diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 04b1734b0992..bd8af7d51143 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -33,7 +33,6 @@ If all goes well, you should see the sandbox running. ![Storybook sandbox running](../get-started/example-welcome.png) - ## Running a different sandbox template By default, the `start` command is configured to initialize a Vite-based React template. If you're planning on working on a different renderer instead, you can do so as well. Start by running the `task` command as follows: @@ -176,7 +175,7 @@ We encourage bug reports to include reproductions. In the same way that it's pos To do so, run the following command in the root of the monorepo: ```shell -npx storybook@next link https://github.com/your-username/your-project.git +npx storybook@latest link https://github.com/your-username/your-project.git ``` This command creates a project `../storybook-repros/your-project`, and automatically links it to your local Storybook code. After connecting it, you should be able to run Storybook and develop as mentioned [above](#start-developing). @@ -184,7 +183,7 @@ This command creates a project `../storybook-repros/your-project`, and automatic If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag: ```shell -npx storybook@next link --local /path/to/local-repro-directory +npx storybook@latest link --local /path/to/local-repro-directory ```
diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md index 361d14458d1e..388011d07a99 100644 --- a/docs/contribute/how-to-reproduce.md +++ b/docs/contribute/how-to-reproduce.md @@ -21,11 +21,11 @@ Make sure you have: First, open a terminal and run the following command: ```shell -npx storybook@next sandbox +npx storybook@latest sandbox ```
-💡 You can append a template name in the command to get filtered results e.g. npx storybook@next sandbox react +💡 You can append a template name in the command to get filtered results e.g. npx storybook@lastest sandbox react
Next, choose the template you want to work with: diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx index 3fb4c90b5093..d462a65a4892 100644 --- a/docs/get-started/installation-problems/angular.mdx +++ b/docs/get-started/installation-problems/angular.mdx @@ -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. diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx index 6829da4d2131..677bd6830f96 100644 --- a/docs/get-started/installation-problems/react.mdx +++ b/docs/get-started/installation-problems/react.mdx @@ -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. diff --git a/docs/migration-guide.md b/docs/migration-guide.md index f78bb9f39096..e8aa9b0a6cf6 100644 --- a/docs/migration-guide.md +++ b/docs/migration-guide.md @@ -96,8 +96,8 @@ 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 -2. Add the `legacyMdx1` feature flag to your `.storybook/main.js`: +1. Install `@storybook/mdx1-csf@latest` as a dev dependency +2. Add the `legacyMdx1` feature flag to your Storybook configuration file (i.e., `.storybook/main.js|ts`): @@ -166,7 +166,7 @@ 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 @@ -174,7 +174,7 @@ npx storybook@next migrate csf-2-to-3 --glob="src/**/*.stories.js" 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 @@ -182,7 +182,7 @@ npx storybook@next migrate storiesof-to-csf --glob="src/**/*.stories.tsx" 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. diff --git a/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx index 069380978198..92abde6ffe9c 100644 --- a/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx +++ b/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx @@ -1,3 +1,3 @@ ```shell -npm install @storybook/mdx1-csf@next --save-dev +npm install @storybook/mdx1-csf@latest --save-dev ``` diff --git a/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx index 8b2679bf137e..89dad0bf5e0c 100644 --- a/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx +++ b/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx @@ -1,3 +1,3 @@ ```shell -pnpm add --save-dev @storybook/mdx1-csf@next +pnpm add --save-dev @storybook/mdx1-csf@latest ``` diff --git a/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx index f13d9c322b8a..b9032731f967 100644 --- a/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell -yarn add --dev @storybook/mdx1-csf@next +yarn add --dev @storybook/mdx1-csf@latest ``` diff --git a/docs/snippets/common/storybook-upgrade-prerelease.npm.js.mdx b/docs/snippets/common/storybook-upgrade-prerelease.npm.js.mdx index 9e625c3977b9..58a5cb6dd40c 100644 --- a/docs/snippets/common/storybook-upgrade-prerelease.npm.js.mdx +++ b/docs/snippets/common/storybook-upgrade-prerelease.npm.js.mdx @@ -1,3 +1,3 @@ ```shell -npx storybook@next upgrade --prerelease +npx storybook@latest upgrade --prerelease ``` diff --git a/docs/snippets/common/storybook-upgrade-prerelease.pnpm.js.mdx b/docs/snippets/common/storybook-upgrade-prerelease.pnpm.js.mdx index 47d087049d14..efceafc8a27a 100644 --- a/docs/snippets/common/storybook-upgrade-prerelease.pnpm.js.mdx +++ b/docs/snippets/common/storybook-upgrade-prerelease.pnpm.js.mdx @@ -1,3 +1,3 @@ ```shell -pnpx storybook@next upgrade --prerelease +pnpx storybook@latest upgrade --prerelease ``` diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md index 2da1dc4fb067..ab1cea62b7fb 100644 --- a/docs/writing-docs/mdx.md +++ b/docs/writing-docs/mdx.md @@ -209,7 +209,7 @@ paths={[ To help you transition to the new version, we've created a migration helper in our CLI. We recommend using it and reaching out to the maintainers using the default communication channels (e.g., [Discord server](https://discord.com/channels/486522875931656193/570426522528382976), [GitHub issues](https://github.com/storybookjs/storybook/issues)) for problems you encounter. ```shell -npx storybook@next automigrate mdx1to2 +npx storybook@latest automigrate mdx1to2 ``` ## Setup custom documentation