GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 06:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation to prefer 'create storybook' over 'storybook init' and clean up CLI reference

Browse Source
This commit is contained in:
Gert Hengeveld 2025-02-20 13:21:37 +01:00
parent 212c173077
commit b8cc9c99b6
20 changed files with 239 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/_snippets/create-command-custom-version.md Normal file
View File

@ -0,0 +1,11 @@
```shell renderer="common" language="js" packageManager="npm"
npm create storybook@8.3
```
```shell renderer="common" language="js" packageManager="pnpm"
pnpm create storybook@8.3
```
```shell renderer="common" language="js" packageManager="yarn"
yarn create storybook@8.3
```

11
docs/_snippets/create-command.md Normal file
View File

@ -0,0 +1,11 @@
```shell renderer="common" language="js" packageManager="npm"
npm create storybook@latest
```
```shell renderer="common" language="js" packageManager="pnpm"
pnpm create storybook@latest
```
```shell renderer="common" language="js" packageManager="yarn"
yarn create storybook@latest
```

223
docs/api/cli-options.mdx
View File

@ -12,7 +12,7 @@ The Storybook command line interface (CLI) is the main tool you use to build and
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.mdx#how-to-opt-out) if you'd not like to share any information. Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.mdx#how-to-opt-out) if you'd not like to share any information.
</Callout> </Callout>
## API commands ## CLI commands
All of the following documentation is available in the CLI by running `storybook --help`. All of the following documentation is available in the CLI by running `storybook --help`.
@ -31,32 +31,32 @@ storybook dev [options]
Options include: Options include:
| Option | Description | | Option | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--help` | Output usage information <br />`storybook dev --help` | | `--help` | Output usage information.<br />`storybook dev --help` |
| `-V`, `--version` | Output the version number <br />`storybook dev -V` | | `-V`, `--version` | Output the version number.<br />`storybook dev -V` |
| `-p`, `--port [number]` | Port to run Storybook <br />`storybook dev -p 9009` | | `-p`, `--port [number]` | Port to run Storybook.<br />`storybook dev -p 9009` |
| `--exact-port [number]` | Attempts to run Storybook on the exact port number specified.<br />If the port is already in use, Storybook will exit with an error message <br />`storybook dev --exact-port 9009` | | `--exact-port [number]` | Attempts to run Storybook on the exact port number specified.<br />If the port is already in use, Storybook will exit with an error message.<br />`storybook dev --exact-port 9009` |
| `-h`, `--host [string]` | Host to run Storybook <br />`storybook dev -h my-host.com` | | `-h`, `--host [string]` | Host to run Storybook.<br />`storybook dev -h my-host.com` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br />`storybook dev -c .storybook` | | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from.<br />`storybook dev -c .storybook` |
| `--loglevel [level]` | Controls level of logging during build.<br />Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br />`storybook dev --loglevel warn` | | `--loglevel [level]` | Controls level of logging during build.<br />Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br />`storybook dev --loglevel warn` |
| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information<br />`storybook dev --https` | | `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information.<br />`storybook dev --https` |
| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br />`storybook dev --ssl-ca my-certificate` | | `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br />`storybook dev --ssl-ca my-certificate` |
| `--ssl-cert` | Provide an SSL certificate. (Required with --https)<br />`storybook dev --ssl-cert my-ssl-certificate` | | `--ssl-cert` | Provide an SSL certificate. (Required with --https)<br />`storybook dev --ssl-cert my-ssl-certificate` |
| `--ssl-key` | Provide an SSL key. (Required with --https)<br />`storybook dev --ssl-key my-ssl-key` | | `--ssl-key` | Provide an SSL key. (Required with --https)<br />`storybook dev --ssl-key my-ssl-key` |
| `--smoke-test` | Exit after successful start<br />`storybook dev --smoke-test` | | `--smoke-test` | Exit after successful start.<br />`storybook dev --smoke-test` |
| `--ci` | CI mode (skip interactive prompts, don't open browser)<br />`storybook dev --ci` | | `--ci` | CI mode (skip interactive prompts, don't open browser).<br />`storybook dev --ci` |
| `--no-open` | Do not open Storybook automatically in the browser<br />`storybook dev --no-open` | | `--no-open` | Do not open Storybook automatically in the browser.<br />`storybook dev --no-open` |
| `--quiet` | Suppress verbose build output<br />`storybook dev --quiet` | | `--quiet` | Suppress verbose build output.<br />`storybook dev --quiet` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook dev --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook dev --debug` |
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br />`storybook dev --debug-webpack` | | `--debug-webpack` | Display final webpack configurations for debugging purposes.<br />`storybook dev --debug-webpack` |
| `--stats-json [dir-name]` | Write stats JSON to disk<br />Requires Webpack<br />`storybook dev --stats-json /tmp/stats` | | `--stats-json [dir-name]` | Write stats JSON to disk.<br />Requires Webpack<br />`storybook dev --stats-json /tmp/stats` |
| `--no-version-updates` | Skips Storybook's update check<br />`storybook dev --no-version-updates` | | `--no-version-updates` | Skips Storybook's update check.<br />`storybook dev --no-version-updates` |
| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#preview-storybooks-documentation)<br />`storybook dev --docs` | | `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#preview-storybooks-documentation).<br />`storybook dev --docs` |
| `--initial-path [path]` | Configures the URL Storybook should open when it opens the browser for the first time<br />`storybook dev --initial-path=/docs/getting-started--docs` | | `--initial-path [path]` | Configures the URL Storybook should open when it opens the browser for the first time.<br />`storybook dev --initial-path=/docs/getting-started--docs` |
| `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL<br />`storybook dev --preview-url=http://localhost:1337/external-iframe.html` | | `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL.<br />`storybook dev --preview-url=http://localhost:1337/external-iframe.html` |
| `--force-build-preview` | Forcefully builds Storybook's preview iframe.<br />Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date<br />`storybook dev --force-build-preview` | | `--force-build-preview` | Forcefully builds Storybook's preview iframe.<br />Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date.<br />`storybook dev --force-build-preview` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook dev --disable-telemetry` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook dev --disable-telemetry` |
| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)<br />`storybook dev --enable-crash-reports` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook dev --enable-crash-reports` |
<Callout variant="warning" id="static-dir-deprecation"> <Callout variant="warning" id="static-dir-deprecation">
With the release of Storybook 8, the `-s` CLI flag was removed. We recommend using the [static directory](../configure/integration/images-and-assets.mdx#serving-static-files-via-storybook) instead if you need to serve static files. With the release of Storybook 8, the `-s` CLI flag was removed. We recommend using the [static directory](../configure/integration/images-and-assets.mdx#serving-static-files-via-storybook) instead if you need to serve static files.
@ -73,22 +73,22 @@ storybook build [options]
Options include: Options include:
| Option | Description | | Option | Description |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information<br />`storybook build --help` | | `-h`, `--help` | Output usage information.<br />`storybook build --help` |
| `-V`, `--version` | Output the version number<br />`storybook build -V` | | `-V`, `--version` | Output the version number.<br />`storybook build -V` |
| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br />`storybook build -o /my-deployed-storybook` | | `-o`, `--output-dir [dir-name]` | Directory where to store built files.<br />`storybook build -o /my-deployed-storybook` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br />`storybook build -c .storybook` | | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from.<br />`storybook build -c .storybook` |
| `--loglevel [level]` | Controls level of logging during build.<br /> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br />`storybook build --loglevel warn` | | `--loglevel [level]` | Controls level of logging during build.<br />Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`.<br />`storybook build --loglevel warn` |
| `--quiet` | Suppress verbose build output<br />`storybook build --quiet` | | `--quiet` | Suppress verbose build output.<br />`storybook build --quiet` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook build --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook build --debug` |
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br />`storybook build --debug-webpack` | | `--debug-webpack` | Display final webpack configurations for debugging purposes.<br />`storybook build --debug-webpack` |
| `--stats-json [dir-name]` | Write stats JSON to disk<br />Requires Webpack<br />`storybook build --stats-json /tmp/stats` | | `--stats-json [dir-name]` | Write stats JSON to disk.<br />Requires Webpack<br />`storybook build --stats-json /tmp/stats` |
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#publish-storybooks-documentation)<br />`storybook build --docs` | | `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#publish-storybooks-documentation).<br />`storybook build --docs` |
| `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config/main-config-build.mdx).<br />`storybook build --test` | | `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config/main-config-build.mdx).<br />`storybook build --test` |
| `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL<br />`storybook build --preview-url=http://localhost:1337/external-iframe.html` | | `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL.<br />`storybook build --preview-url=http://localhost:1337/external-iframe.html` |
| `--force-build-preview` | Forcefully builds Storybook's preview iframe.<br />Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date<br />`storybook build --force-build-preview` | | `--force-build-preview` | Forcefully builds Storybook's preview iframe.<br />Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date.<br />`storybook build --force-build-preview` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook build --disable-telemetry` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook build --disable-telemetry` |
| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)<br />`storybook build --enable-crash-reports` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook build --enable-crash-reports` |
### `init` ### `init`
@ -100,23 +100,28 @@ storybook[@version] init [options]
For example, `storybook@latest init` will install the latest version of Storybook into your project. For example, `storybook@latest init` will install the latest version of Storybook into your project.
<Callout variant="info">
This command is also available via [`create-storybook`](#create-storybook), which is generally recommended for new projects.
</Callout>
Options include: Options include:
| Option | Description | | Option | Description |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information <br />`storybook init --help` | | `-h`, `--help` | Output usage information.<br />`storybook init --help` |
| `-b`, `--builder` | Defines the [builder](../builders/index.mdx) to use for your Storybook instance<br />`storybook init --builder webpack5` | | `-b`, `--builder` | Defines the [builder](../builders/index.mdx) to use for your Storybook instance.<br />`storybook init --builder webpack5` |
| `-f`,`--force` | Forcefully installs Storybook into your project, prompting you to overwrite existing files<br />`storybook init --force` | | `-f`, `--force` | Forcefully installs Storybook into your project, prompting you to overwrite existing files.<br />`storybook init --force` |
| `-s`, `--skip-install` | Skips the dependency installation step. Used only when you need to configure Storybook manually<br />`storybook init --skip-install` | | `-s`, `--skip-install` | Skips the dependency installation step. Used only when you need to configure Storybook manually.<br />`storybook init --skip-install` |
| `-t`, `--type` | Defines the [framework](../configure/integration/frameworks.mdx) to use for your Storybook instance<br />`storybook init --type solid` | | `-t`, `--type` | Defines the [framework](../configure/integration/frameworks.mdx) to use for your Storybook instance.<br />`storybook init --type solid` |
| `-y`, `--yes` | Skips interactive prompts and automatically installs Storybook per specified version<br />`storybook init --yes` | | `-y`, `--yes` | Skips interactive prompts and automatically installs Storybook per specified version, including all features.<br />`storybook init --yes` |
| `--package-manager` | Sets the package manager to use when installing Storybook.<br /> Available package managers include `npm`, `yarn`, and `pnpm`<br />`storybook init --package-manager pnpm` | | `--features [...values]` | Use these features when installing, skipping the prompt. Supported values are `docs` and `test`, space separated.<br />`storybook init --features docs test` |
| `--use-pnp` | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager<br />`storybook init --use-pnp` | | `--package-manager` | Sets the package manager to use when installing Storybook.<br />Available package managers include `npm`, `yarn`, and `pnpm`.<br />`storybook init --package-manager pnpm` |
| `-p`, `--parser` | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br /> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br />`storybook init --parser tsx` | | `--use-pnp` | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager.<br />`storybook init --use-pnp` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook init --debug` | | `-p`, `--parser` | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br />Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`.<br />`storybook init --parser tsx` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook init --disable-telemetry` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook init --debug` |
| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)<br />`storybook init --enable-crash-reports` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook init --disable-telemetry` |
| `--no-dev` | Complete the initialization of Storybook without running the Storybook dev server<br />`storybook init --no-dev` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook init --enable-crash-reports` |
| `--no-dev` | Complete the initialization of Storybook without running the Storybook dev server.<br />`storybook init --no-dev` |
### `add` ### `add`
@ -130,11 +135,11 @@ Options include:
| Option | Description | | Option | Description |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information <br />`storybook add --help` | | `-h`, `--help` | Output usage information.<br />`storybook add --help` |
| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br />`storybook migrate --config-dir .storybook` | | `-c`, `--config-dir` | Directory where to load Storybook configurations from.<br />`storybook migrate --config-dir .storybook` |
| `--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` | | `--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` | | `-s`, `--skip-postinstall` | Skips post-install configuration. Used only when you need to configure the addon yourself.<br />`storybook add [addon] --skip-postinstall` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook add --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook add --debug` |
### `remove` ### `remove`
@ -147,12 +152,12 @@ storybook remove [addon] [options]
Options include: Options include:
| Option | Description | | Option | Description |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `-h`, `--help` | Output usage information <br />`storybook remove --help` | | `-h`, `--help` | Output usage information.<br />`storybook remove --help` |
| `--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` | | `--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` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook remove --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook remove --debug` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook remove --disable-telemetry` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook remove --disable-telemetry` |
| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)<br />`storybook remove --enable-crash-reports` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook remove --enable-crash-reports` |
### `upgrade` ### `upgrade`
@ -167,17 +172,17 @@ For example, `storybook@latest upgrade --dry-run` will perform a dry run (no act
Options include: Options include:
| Option | Description | | Option | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information <br />`storybook upgrade --help` | | `-h`, `--help` | Output usage information.<br />`storybook upgrade --help` |
| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br />`storybook upgrade --config-dir .storybook` | | `-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` | | `-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` | | `-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` | | `-y`, `--yes` | Skips interactive prompts and automatically upgrades Storybook to the latest version.<br />`storybook upgrade --yes` |
| `-f`,`--force` | Force the upgrade, skipping autoblockers check<br />`storybook upgrade --force` | | `-f`,`--force` | Force the upgrade, skipping autoblockers check.<br />`storybook upgrade --force` |
| `--package-manager` | Sets the package manager to use when upgrading Storybook.<br /> Available package managers include `npm`, `yarn`, and `pnpm`<br />`storybook upgrade --package-manager pnpm` | | `--package-manager` | Sets the package manager to use when upgrading Storybook.<br />Available package managers include `npm`, `yarn`, and `pnpm`.<br />`storybook upgrade --package-manager pnpm` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook upgrade --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook upgrade --debug` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook upgrade --disable-telemetry` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook upgrade --disable-telemetry` |
| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)<br />`storybook upgrade --enable-crash-reports` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook upgrade --enable-crash-reports` |
### `migrate` ### `migrate`
@ -197,14 +202,14 @@ Options include:
| Option | Description | | Option | Description |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `-h`, `--help` | Output usage information <br />`storybook migrate --help` | | `-h`, `--help` | Output usage information.<br />`storybook migrate --help` |
| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br />`storybook migrate --config-dir .storybook` | | `-c`, `--config-dir` | Directory where to load Storybook configurations from.<br />`storybook migrate --config-dir .storybook` |
| `-n`, `--dry-run` | Verify the migration exists and show the files to which it will be applied<br />`storybook migrate --dry-run` | | `-n`, `--dry-run` | Verify the migration exists and show the files to which it will be applied.<br />`storybook migrate --dry-run` |
| `-l`, `--list` | Shows a list of available codemods<br /> `storybook migrate --list` | | `-l`, `--list` | Shows a list of available codemods.<br />`storybook migrate --list` |
| `-g`, `--glob` | Glob for files upon which to apply the codemods<br />`storybook migrate --glob src/**/*.stories.tsx` | | `-g`, `--glob` | Glob for files upon which to apply the codemods.<br />`storybook migrate --glob src/**/*.stories.tsx` |
| `-p`, `--parser` | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br /> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br />`storybook migrate --parser tsx` | | `-p`, `--parser` | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br />Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`.<br />`storybook migrate --parser tsx` |
| `-r`, `--rename [from-to]` | Renames the files affected by the codemod to include the provided suffix<br />`storybook migrate --rename ".js:.ts"` | | `-r`, `--rename [from-to]` | Renames the files affected by the codemod to include the provided suffix.<br />`storybook migrate --rename ".js:.ts"` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook migrate --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook migrate --debug` |
### `automigrate` ### `automigrate`
@ -220,17 +225,17 @@ Options include:
| Option | Description | | Option | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information <br />`storybook automigrate --help` | | `-h`, `--help` | Output usage information.<br />`storybook automigrate --help` |
| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br />`storybook automigrate --config-dir .storybook` | | `-c`, `--config-dir` | Directory where to load Storybook configurations from.<br />`storybook automigrate --config-dir .storybook` |
| `-n`, `--dry-run` | Checks for available migrations without applying them<br />`storybook automigrate --dry-run` | | `-n`, `--dry-run` | Checks for available migrations without applying them.<br />`storybook automigrate --dry-run` |
| `-s`, `--skip-install` | Skip installing dependencies whenever applicable<br /> `storybook automigrate --skip-install` | | `-s`, `--skip-install` | Skip installing dependencies whenever applicable.<br />`storybook automigrate --skip-install` |
| `-y`, `--yes` | Applies available migrations automatically without prompting for confirmation<br />`storybook automigrate --yes` | | `-y`, `--yes` | Applies available migrations automatically without prompting for confirmation.<br />`storybook automigrate --yes` |
| `-l`, `--list` | Shows a list of available automigrations<br /> `storybook automigrate --list` | | `-l`, `--list` | Shows a list of available automigrations.<br />`storybook automigrate --list` |
| `--package-manager` | Sets the package manager to use when running the auto migration.<br /> Available package managers include `npm`, `yarn`, and `pnpm`<br />`storybook automigrate --package-manager pnpm` | | `--package-manager` | Sets the package manager to use when running the auto migration.<br />Available package managers include `npm`, `yarn`, and `pnpm`.<br />`storybook automigrate --package-manager pnpm` |
| `--renderer` | Specifies Storybook's renderer to use when running the automigration.<br /> Useful for monorepo environments where multiple Storybook instances can exist in the same project<br />`storybook automigrate --renderer vue` | | `--renderer` | Specifies Storybook's renderer to use when running the automigration.<br />Useful for monorepo environments where multiple Storybook instances can exist in the same project.<br />`storybook automigrate --renderer vue` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook automigrate --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook automigrate --debug` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook automigrate --disable-telemetry` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook automigrate --disable-telemetry` |
| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)<br />`storybook automigrate --enable-crash-reports` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook automigrate --enable-crash-reports` |
### `doctor` ### `doctor`
@ -243,11 +248,11 @@ storybook doctor [options]
Options include: Options include:
| Option | Description | | Option | Description |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information <br />`storybook doctor --help` | | `-h`, `--help` | Output usage information.<br />`storybook doctor --help` |
| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br />`storybook doctor --config-dir .storybook` | | `-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` | | `--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` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook doctor --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook doctor --debug` |
### `info` ### `info`
@ -300,14 +305,26 @@ The `framework-filter` argument is optional and can filter the list of available
Options include: Options include:
| Option | Description | | Option | Description |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information <br />`storybook sandbox --help` | | `-h`, `--help` | Output usage information.<br />`storybook sandbox --help` |
| `-o`, `--output [dir-name]` | Configures the location of the sandbox project<br />`storybook sandbox --output /my-sandbox-project` | | `-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` | | `--no-init` | Generates a sandbox project without without initializing Storybook.<br />`storybook sandbox --no-init` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook sandbox --debug` | | `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook sandbox --debug` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook sandbox --disable-telemetry` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook sandbox --disable-telemetry` |
| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)<br />`storybook sandbox --enable-crash-reports` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook sandbox --enable-crash-reports` |
<Callout variant="info"> <Callout variant="info">
If you're looking for a hosted version of the available sandboxes, see [storybook.new](https://storybook.new). If you're looking for a hosted version of the available sandboxes, see [storybook.new](https://storybook.new).
</Callout> </Callout>
## `create-storybook`
To streamline the process of creating a new Storybook project, a separate CLI called `create-storybook` is provided. Package managers such as npm, Yarn, and pnpm will execute this when running `create storybook`:
{/* prettier-ignore-start */}
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
`create-storybook` is mostly a wrapper around `storybook init` and provides an optimized experience for [creating new Storybook projects](../get-started/install.mdx). Refer to [`init`](#init) for options.

2
docs/faq.mdx
View File

@ -9,7 +9,7 @@ Here are some answers to frequently asked questions. If you have a question, you
## Error: No angular.json file found ## Error: No angular.json file found
Storybook can be set up for both single-project and multi-project Angular workspaces. To set up Storybook for a project, run `npx storybook@latest init` at the root of the workspace where the `angular.json` file is located. During initialization, the `.storybook` folder will be created and the `angular.json` file will be edited to add the Storybook configuration for the selected project. It's important to run the command at the root level to ensure that Storybook detects all projects correctly. Storybook can be set up for both single-project and multi-project Angular workspaces. To set up Storybook for a project, run [the install command](./get-started/install) at the root of the workspace where the `angular.json` file is located. During initialization, the `.storybook` folder will be created and the `angular.json` file will be edited to add the Storybook configuration for the selected project. It's important to run the command at the root level to ensure that Storybook detects all projects correctly.
## How can I opt-out of Angular Ivy? ## How can I opt-out of Angular Ivy?

2
docs/get-started/frameworks/angular.mdx
View File

@ -34,7 +34,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/nextjs.mdx
View File

@ -36,7 +36,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/preact-vite.mdx
View File

@ -34,7 +34,7 @@ Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) tha
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

3
docs/get-started/frameworks/react-native-web-vite.mdx
View File

@ -40,7 +40,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}
@ -220,4 +220,3 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
{/* End supported renderers */} {/* End supported renderers */}
</If> </If>

2
docs/get-started/frameworks/react-vite.mdx
View File

@ -34,7 +34,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/react-webpack5.mdx
View File

@ -30,7 +30,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/svelte-vite.mdx
View File

@ -30,7 +30,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/svelte-webpack5.mdx
View File

@ -30,7 +30,7 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/sveltekit.mdx
View File

@ -34,7 +34,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/vue3-vite.mdx
View File

@ -35,7 +35,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/vue3-webpack5.mdx
View File

@ -30,7 +30,7 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/web-components-vite.mdx
View File

@ -29,7 +29,7 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

2
docs/get-started/frameworks/web-components-webpack5.mdx
View File

@ -29,7 +29,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}

20
docs/get-started/install.mdx
View File

@ -9,18 +9,34 @@ Use the Storybook CLI to install it in a single command. Run this inside your pr
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}
<details id="custom-storybook-version"> <details id="custom-storybook-version">
<summary>Install a specific version</summary> <summary>Install a specific version</summary>
The `init` command will use whichever version you specify. For example: Use the `init` command to install a Storybook version prior to 8.3:
{/* prettier-ignore-start */}
<CodeSnippets path="init-command-custom-version.md" />
{/* prettier-ignore-end */}
You can specify either an npm tag such as `latest` or `next`, or a (partial) version number. For example:
* `storybook@latest init` will initialize the latest version * `storybook@latest init` will initialize the latest version
* `storybook@7.6.10 init` will initialize `7.6.10` * `storybook@7.6.10 init` will initialize `7.6.10`
* `storybook@7 init` will initialize the newest `7.x.x` version * `storybook@7 init` will initialize the newest `7.x.x` version
From Storybook 8.3 and beyond, you can use the `create` command with a specific version:
{/* prettier-ignore-start */}
<CodeSnippets path="create-command-custom-version.md" />
{/* prettier-ignore-end */}
</details> </details>
Storybook will look into your project's dependencies during its install process and provide you with the best configuration available. Storybook will look into your project's dependencies during its install process and provide you with the best configuration available.

2
docs/index.mdx
View File

@ -13,7 +13,7 @@ Storybook is a frontend workshop for building UI components and pages in isolati
Storybook is a standalone tool that runs alongside your app. It's a zero-config environment that works with any modern frontend framework. You can install Storybook into an existing project or create a new one from scratch. Storybook is a standalone tool that runs alongside your app. It's a zero-config environment that works with any modern frontend framework. You can install Storybook into an existing project or create a new one from scratch.
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
<HomeRenderers /> <HomeRenderers />

2
docs/migration-guide/index.mdx
View File

@ -89,7 +89,7 @@ To add Storybook to a project that isn’t currently using Storybook:
{/* prettier-ignore-start */} {/* prettier-ignore-start */}
<CodeSnippets path="init-command.md" /> <CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */} {/* prettier-ignore-end */}