Merge pull request #18592 from storybookjs/chore_docs_update_storyboo…

…k_commands

Chore: (Docs) updates references to storybook commands

docs/addons/writing-addons.md

@@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the
 Initialize a local Storybook instance to allow you to test your addon.
 
 ```shell
-npx sb init
+npx storybook init
 ```
 
 <div class="aside">

docs/builders/overview.md

@@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b
 
 ## CLI basics
 
-Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx sb init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
+Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
 
 Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:
 
 ```shell
-npx sb init --builder <webpack4 | webpack5 | vite>
+npx storybook init --builder <webpack4 | webpack5 | vite>
 ```
 
 ## Manual setup

docs/builders/vite.md

@@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v
 
 ## Setup
 
-If you ran `npx sb init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
+If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
 
 Run the following command to install the builder.
 

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 sb@next babelrc
+npx storybook@next 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:

docs/configure/upgrading.md

@@ -11,7 +11,7 @@ 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 sb upgrade
+npx storybook upgrade
 ```
 
 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,10 +27,10 @@ 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 sb@next automigrate
+npx storybook@next 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 [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
+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.
 
 ## Prereleases
 
@@ -39,11 +39,13 @@ In addition to the above, Storybook is under constant development, and we publis
 To upgrade to the latest pre-release:
 
 ```sh
-npx sb@next upgrade --prerelease
+npx storybook@next upgrade --prerelease
 ```
 
 If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
 
 <div class="aside">
+
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
 </div>

docs/contribute/code.md

@@ -136,19 +136,19 @@ 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 sb@next link https://github.com/your-username/your-project.git
+npx storybook@next 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).
 
 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 sb@next link --local /path/to/local-repro-directory
+npx storybook@next link --local /path/to/local-repro-directory
 ```
 
 <div class="aside">
-💡  The <code>sb link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>sb repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
+💡  The <code>storybook link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>storybook repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
 </div>
 
 ## Troubleshooting

docs/contribute/how-to-reproduce.md

@@ -21,7 +21,7 @@ Make sure you have:
 First, open a terminal and run the following command:
 
 ```shell
-npx sb@next repro
+npx storybook@next repro
 ```
 
 <div class="aside">

docs/essentials/introduction.md

@@ -14,7 +14,7 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
 
 ### Installation
 
-If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
+If you ran `storybook init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
 
 If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
 

docs/get-started/installation-problems/angular.mdx

@@ -1,20 +1,19 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+- Add the `--type angular` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type angular
   ```
 
-- Add the `--type angular` flag to the installation command to set up Storybook manually:
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type angular
+  npx storybook init --use-npm
   ```
 
 - 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 sb@next automigrate
+  npx storybook@next 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.
@@ -26,7 +25,7 @@
 - If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
 
 | Configuration element        | Description                                                                                                                                                                                      |
-|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `"browserTarget"`            | Build target to be served using the following format. <br/> `"example-project:builder:config"`                                                                                                   |
 | `"tsConfig"`                 | Location of the TypeScript configuration file, relative to the current workspace. <br/> `"tsConfig": "./tsconfig.json"`.                                                                         |
 | `"port"`                     | Port used by Storybook. <br/> `"port": 6006`                                                                                                                                                     |

docs/get-started/installation-problems/ember.mdx

@@ -1,14 +1,7 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-
-  ```shell
-  npx storybook init --use-npm
-  ```
-
 - Add the `--type ember` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx sb init --type ember
+  npx storybook init --type ember
   ```
 
 - During the install process, if you get the following warning message:
@@ -21,4 +14,10 @@
 
 Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@storybook/ember-cli-storybook) package to the latest version to fix it.
 
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --use-npm
+  ```
+
 - For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions.

docs/get-started/installation-problems/html.mdx

@@ -1,7 +1,7 @@
 - Add the `--type html` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx sb init --type html
+  npx storybook init --type html
   ```
 
 - For other installation issues, check the [Html README](../../app/html/README.md) for additional instructions.

docs/get-started/installation-problems/preact.mdx

@@ -1,14 +1,13 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+- Add the `--type preact` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type preact
   ```
-
-- Add the `--type preact` flag to the installation command to set up Storybook manually:
+  
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type preact
+  npx storybook init --use-npm
   ```
 
 - For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions.

docs/get-started/installation-problems/react.mdx

@@ -1,20 +1,19 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-
+- Add the `--type react` flag to the installation command to set up Storybook manually:
+
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type react
   ```
 
-- Add the `--type react` flag to the installation command to set up Storybook manually:
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type react
+  npx storybook init --use-npm
   ```
 
 - 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 sb@next automigrate
+  npx storybook@next 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.

docs/get-started/installation-problems/svelte.mdx

@@ -1,14 +1,13 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-
+- Add the `--type svelte` flag to the installation command to set up Storybook manually:
+
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type svelte
   ```
-
-- Add the `--type svelte` flag to the installation command to set up Storybook manually:
+  
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type svelte
+  npx storybook init --use-npm
   ```
 
 - For issues with Svelte Native Story Format, check the [Svelte Story Format addon repository](https://github.com/storybookjs/addon-svelte-csf) for instructions.

docs/get-started/installation-problems/vue.mdx

@@ -1,18 +1,17 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-
-  ```shell
-  npx storybook init --use-npm
-  ```
-
 - Add the `--type vue` (for Vue 2), or `--type vue3` (for Vue 3) flag to the installation command to set up Storybook manually:
 
   ```shell
   # For Vue 2 projects
-  npx sb init --type vue
+  npx storybook init --type vue
 
   # For Vue 3 projects
-  npx sb init --type vue3
+  npx storybook init --type vue3
+  ```
+
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --use-npm
   ```
 
 - For other installation issues, check the [Vue 2 README](../../app/vue/README.md), or the [Vue 3 README](../../app/vue3/README.md) for additional instructions.

docs/get-started/installation-problems/web-components.mdx

@@ -1,7 +1,7 @@
 - Add the `--type web_components` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx sb init --type web_components
+  npx storybook init --type web_components
   ```
 
 - For other installation issues, check the [Web Components README](../../app/web-components/README.md) for additional instructions.

docs/sharing/storybook-composition.md

@@ -74,12 +74,12 @@ You can also compose Storybooks based on the current development environment (e.
 So far we've seen how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
 
 ```shell
-npx sb extract
+npx storybook extract
 ```
 
 <div class="aside">
 
-`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
+`storybook extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
 
 </div>
 
@@ -100,7 +100,7 @@ Linking to a Storybook deployed using this approach will yield all the stories a
 If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory you can use the following:
 
 ```shell
-npx sb extract my-built-storybook-directory my-other-directory/stories.json
+npx storybook extract my-built-storybook-directory my-other-directory/stories.json
 ```
 
 When executed it will lookup a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information.