Docs: Adds commands to the documentation

docs/addons/install-addons.md

@@ -2,13 +2,37 @@
 title: 'Install addons'
 ---
 
-Storybook has [hundreds of reusable addons](https://storybook.js.org/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
+Storybook has [hundreds of reusable addons](https://storybook.js.org/integrations) packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
 
-### Using addons
+## Automatic installation
 
-With the exception of preset addons, all addons have the same installation process: install and register.
+Storybook includes a [`storybook add`](../api/cli-options.md#add) command to automate the setup of addons. Several community-led addons can be added using this command, except for preset addons. We encourage you to read the addon's documentation to learn more about its installation process.
 
-For example, to include accessibility testing in Storybook, run the following command to install the necessary addon:
+Run the `storybook add` command using your chosen package manager, and the CLI will update your Storybook configuration to include the addon and install any necessary dependencies.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-add-command.yarn.js.mdx',
+    'common/storybook-add-command.npm.js.mdx',
+    'common/storybook-add-command.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<Callout variant="warning">
+
+If you're attempting to install multiple addons at once, it will only install the first addon that was specified. This is a known limitation of the current implementation and will be addressed in a future release.
+
+</Callout>
+
+### Manual installation
+
+Storybook addons are always added through the [`addons`](../api/main-config-addons.md) configuration array in [`.storybook/main.js|ts`](../configure/index.md). The following example shows how to manually add the [Accessibility addon](https://storybook.js.org/addons/@storybook/addon-a11y) to Storybook.
+
+Run the following command with your package manager of choice to install the addon.
 
 <!-- prettier-ignore-start -->
 
@@ -22,7 +46,7 @@ For example, to include accessibility testing in Storybook, run the following co
 
 <!-- prettier-ignore-end -->
 
-Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) to the following:
+Next, update `.storybook/main.js|ts` to the following:
 
 <!-- prettier-ignore-start -->
 
@@ -35,40 +59,51 @@ Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-ren
 
 <!-- prettier-ignore-end -->
 
-<Callout variant="info">
+When you run Storybook, the accessibility testing addon will be enabled.
 
-Addons may also require addon-specific configuration. Read their respective READMEs.
+![Storybook addon installed and registered](./storybook-addon-installed-registered.png)
 
-</Callout>
+### Removing addons
 
-Now when you run Storybook the accessibility testing addon will be enabled.
+To remove an addon from Storybook, you can choose to manually uninstall it and remove it from the configuration file (i.e., [`.storybook/main.js|ts`](../configure/index.md)) or opt-in to do it automatically via the CLI with the [`remove`](../api/cli-options.md#remove) command. For example, to remove the [Accessibility addon](https://storybook.js.org/addons/@storybook/addon-a11y) from Storybook with the CLI, run the following command:
 
-![Storybook addon installed and registered](./storybook-addon-installed-registered.png)
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-remove-command.yarn.js.mdx',
+    'common/storybook-remove-command.npm.js.mdx',
+    'common/storybook-remove-command.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
-### Using preset addons
+## Using preset addons
 
-Storybook preset addons are grouped collections of specific `babel`, `webpack` and `addons` configurations for distinct use cases. Each one with its own set of instructions. Preset addons have a three-step installation process: install, register and optionally configuration.
+Storybook preset addons are grouped collections of specific `babel`, `webpack` and `addons` configurations for distinct use cases. Each one has its own set of instructions. Preset addons have a three-step installation process: install, register, and optionally configure.
 
 For example, to use SCSS styling, run the following command to install the addon and the required dependencies:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/storybook-preset-scss.webpack-4.js.mdx',
-    'common/storybook-preset-scss.webpack-5.js.mdx',
+    'common/storybook-preset-scss.npm.js.mdx',
+    'common/storybook-preset-scss.yarn.js.mdx',
+    'common/storybook-preset-scss.pnpm.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-<Callout variant="info" icon="💡" title="Tip:">
+<Callout variant="info" icon="💡">
 
-Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet.
+This preset addon is currently deprecated and no longer maintained. It's only mentioned here for example purposes. If you want to use SCSS styling in your project, we recommend using [@storybook/addon-styling-webpack](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) addon for Webpack based projects or the [@storybook/addon-themes](https://storybook.js.org/addons/@storybook/addon-themes) for a framework agnostic solution.
 
 </Callout>
 
-Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) to the following:
+Next, update [`.storybook/main.js|ts`](../configure/index.md) to the following:
 
 <!-- prettier-ignore-start -->
 
@@ -81,7 +116,7 @@ Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-ren
 
 <!-- prettier-ignore-end -->
 
-Now when you run Storybook it will configure itself to use SCSS styling. No further configuration is needed.
+When you run Storybook, it will configure itself to use SCSS styling. No further configuration is needed.
 
 #### Optional configuration
 
@@ -105,8 +140,8 @@ Consider the following example:
 
 <Callout variant="info">
 
-Preset addons may also have addon-specific configurations. Read their respective READMEs.
+Preset addons may also have addon-specific configurations. We encourage you to read their respective documentation to learn more about their configuration options.
 
 </Callout>
 
-Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined.
+When Storybook starts, it will update Webpack's CSS loader to use modules and adjust how styling is defined.

docs/api/cli-options.md

@@ -16,7 +16,7 @@ All of the following documentation is available in the CLI by running `storybook
 
 ### `dev`
 
-Compiles and serves a development build of your Storybook that reflects your source code changes in the browser in real time. Should be run from the root of your project.
+Compiles and serves as a development build of your Storybook that reflects your source code changes in the browser in real-time. It should be run from the root of your project.
 
 ```shell
 storybook dev [options]
@@ -52,7 +52,7 @@ With the release of Storybook 8, the `-s` CLI flag was removed. We recommend usi
 
 ### `build`
 
-Compiles your Storybook instance so it can be [deployed](../sharing/publish-storybook.md). Should be run from the root of your project.
+Compile your Storybook instance so it can be [deployed](../sharing/publish-storybook.md). It should be run from the root of your project.
 
 ```shell
 storybook build [options]
@@ -76,6 +76,143 @@ Options include:
 
 <Callout variant="info" icon="💡">
 
-If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, `npm run storybook build -- -o ./path/to/build`.
+The commands work slightly differently if you're using npm instead of Yarn to publish Storybook. For example, `npm run storybook build -- -o ./path/to/build`.
+
+</Callout>
+
+### `add`
+
+Installs a Storybook addon and configures your project for it. Read more in the [addon installation guide](../addons/install-addons.md).
+
+```shell
+storybook add [addon] [options]
+```
+
+Options include:
+
+| Option                     | Description                                                                                                                                                                     |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--package-manager`        | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook add [addon] --package-manager pnpm` |
+| `-s`, `--skip-postinstall` | Skips post-install configuration. Used only when you need to configure the addon yourself<br/>`storybook add [addon] --skip-postinstall`                                        |
+
+### `doctor`
+
+**Added in:** Storybook 7.6
+
+Performs a health check on your Storybook project for common issues (e.g., duplicate dependencies, incompatible addons or mismatched versions) and provides suggestions on how to fix them. Applicable when [upgrading](../configure/upgrading.md#verifying-the-upgrade) Storybook versions.
+
+```shell
+storybook doctor [options]
+```
+
+Options include:
+
+| Option               | Description                                                                                                                                                                   |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br/>`storybook doctor --config-dir .storybook`                                                                          |
+| `--package-manager`  | Sets the package manager to use when running the health check.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook doctor --package-manager pnpm` |
+
+### `upgrade`
+
+Upgrade your Storybook instance to the latest version. Read more in the [upgrade guide](../configure/upgrading.md).
+
+```shell
+storybook upgrade [options]
+```
+
+Options include:
+
+| Option               | Description                                                                                                                                                                 |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br/>`storybook upgrade --config-dir .storybook`                                                                       |
+| `-n`, `--dry-run`    | Checks for version upgrades without installing them<br/>`storybook upgrade --dry-run`                                                                                       |
+| `-s`, `--skip-check` | Skips the migration check step during the upgrade process<br/> `storybook upgrade --skip-check`                                                                             |
+| `-y`, `--yes`        | Skips interactive prompts and automatically upgrades Storybook to the latest version<br/>`storybook upgrade --yes`                                                          |
+| `--package-manager`  | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook upgrade --package-manager pnpm` |
+
+### `info`
+
+Reports useful debugging information about your environment. Helpful in providing information when opening an issue or a discussion.
+
+```shell
+storybook info
+```
+
+Example output:
+
+```shell
+Storybook Environment Info:
+
+  System:
+    OS: macOS 14.2
+    CPU: (8) arm64 Apple M3
+    Shell: 5.9 - /bin/zsh
+  Binaries:
+    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
+    Yarn: 1.22.21 - /usr/local/bin/yarn <----- active
+    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
+    pnpm: 8.12.0 - /opt/homebrew/bin/pnpm
+  Browsers:
+    Chrome: 120.0.6099.199
+    Safari: 17.2
+  npmPackages:
+    @storybook/addon-a11y: ^7.6.6 => 7.6.6
+    @storybook/addon-essentials: ^7.6.6 => 7.6.6
+    @storybook/addon-interactions: ^7.6.6 => 7.6.6
+    @storybook/addon-links: ^7.6.6 => 7.6.6
+    @storybook/addon-onboarding: ^1.0.10 => 1.0.10
+    @storybook/blocks: ^7.6.6 => 7.6.6
+    @storybook/preset-create-react-app: ^7.6.6 => 7.6.6
+    @storybook/react: ^7.6.6 => 7.6.6
+    @storybook/react-webpack5: ^7.6.6 => 7.6.6
+    @storybook/server-webpack5: ^7.6.6 => 7.6.6
+    @storybook/test: ^7.6.6 => 7.6.6
+    @storybook/test-runner: ^0.16.0 => 0.16.0
+    chromatic: ^10.2.0 => 10.2.0
+    msw-storybook-addon: ^1.10.0 => 1.10.0
+    storybook: ^7.6.6 => 7.6.6
+```
+
+### `remove`
+
+**Added in:** Storybook 8.0
+
+Deletes a Storybook addon from your project. Read more in the [addon installation guide](../addons/install-addons.md#removing-addons).
+
+```shell
+storybook remove [addon] [options]
+```
+
+Options include:
+
+| Option              | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--package-manager` | Sets the package manager to use when removing the addon.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook remove  [addon]--package-manager pnpm` |
+
+### `sandbox`
+
+Generates a local sandbox project for testing Storybook features based on the list of supported [frameworks](../configure/frameworks.md). Useful for reproducing bugs when opening an issue or a discussion.
+
+```shell
+storybook sandbox [framework-filter] [options]
+```
+
+<Callout variant="info">
+
+The `framework-filter` argument is optional and can filter the list of available frameworks. For example, `storybook sandbox react` will only show React-based sandboxes.
+
+</Callout>
+
+Options include:
+
+| Option                         | Description                                                                                                                                                                                                                       |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-b`, `--branch [branch name]` | Select the branch to use for the sandbox project featuring the available features present in the selected branch (`next` for the pre-release version, `main` for the latest stable release)<br/>`storybook sandbox --branch main` |
+| `-o`, `--output [dir-name]`    | Configures the location of the sandbox project<br/>`storybook sandbox --output /my-sandbox-project`                                                                                                                               |
+| `--no-init`                    | Generates a sandbox project without without initializing Storybook<br/>`storybook sandbox --no-init`                                                                                                                              |
+
+<Callout variant="info">
+
+If you're looking for a hosted version of the available sandboxes, see [storybook.new](https://new-storybook.netlify.app/).
 
 </Callout>

docs/configure/upgrading.md

@@ -6,7 +6,7 @@ The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a
 
 ## Upgrade script
 
-The most common upgrade is Storybook itself. [Storybook releases](https://storybook.js.org/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
+The most common upgrade is Storybook itself. [Storybook releases](https://storybook.js.org/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months and major versions of Storybook with breaking changes roughly once per year.
 
 To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
 
@@ -16,13 +16,13 @@ To help ease the pain of keeping Storybook up-to-date, we provide a command-line
   paths={[
     'common/storybook-upgrade.npm.js.mdx',
     'common/storybook-upgrade.pnpm.js.mdx',
-    'common/storybook-upgrade.yarn.js.mdx'
+    'common/storybook-upgrade.yarn.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-After running the command the script will:
+After running the command, the script will:
 
 - Upgrade all Storybook packages in your project to the latest stable version
 - Run the relevant [automigrations](../migration-guide.md#automatic-upgrade) factoring in the [breaking changes](../migration-guide.md#major-breaking-changes) between your current version and the latest stable version
@@ -33,17 +33,33 @@ In addition to running the command, we also recommend checking the [MIGRATION.md
 
 </Callout>
 
+### Verifying the upgrade
+
+To help you verify that the upgrade was completed and that your project is still working as expected, the Storybook CLI provides the [`doctor`](../api/cli-options.md#doctor) command that allows you to do a health check on your project for common issues that might arise after an upgrade, such as duplicated dependencies, incompatible addons or mismatched versions. To perform the health check, run the following command with your package manager of choice:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-doctor.npm.js.mdx',
+    'common/storybook-doctor.pnpm.js.mdx',
+    'common/storybook-doctor.yarn.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## 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 well-known frontend frameworks, such as [Angular](https://update.angular.io/?l=2&v=16.0-17.0), [Next.js](https://nextjs.org/docs/pages/building-your-application/upgrading) or [Svelte](https://svelte.dev/docs/v4-migration-guide) have been rolling out significant changes to their ecosystem, so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'common/storybook-automigrate.npm.js.mdx',
     'common/storybook-automigrate.pnpm.js.mdx',
-    'common/storybook-automigrate.yarn.js.mdx'
+    'common/storybook-automigrate.yarn.js.mdx',
   ]}
 />
 

docs/snippets/common/storybook-add-command.npm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+npx storybook@latest add @storybook/addon-a11y
+```

docs/snippets/common/storybook-add-command.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@latest add @storybook/addon-a11y
+```

docs/snippets/common/storybook-add-command.yarn.js.mdx

@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@latest add @storybook/addon-a11y
+```

docs/snippets/common/storybook-doctor.npm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+npx storybook@latest doctor
+```

docs/snippets/common/storybook-doctor.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@latest doctor
+```