GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-02 05:03:44 +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
```

247
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.
</Callout>
## API commands
## CLI commands
All of the following documentation is available in the CLI by running `storybook --help`.
@ -30,33 +30,33 @@ storybook dev [options]
Options include:
| Option | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--help` | Output usage information <br />`storybook dev --help` |
| `-V`, `--version` | Output the version number <br />`storybook dev -V` |
| `-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` |
| `-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` |
| `--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` |
| `--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-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` |
| `--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` |
| `--quiet` | Suppress verbose build output<br />`storybook dev --quiet` |
| `--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` |
| `--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` |
| `--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` |
| `--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` |
| `--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` |
| Option | Description |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--help` | Output usage information.<br />`storybook dev --help` |
| `-V`, `--version` | Output the version number.<br />`storybook dev -V` |
| `-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` |
| `-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` |
| `--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` |
| `--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-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` |
| `--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` |
| `--quiet` | Suppress verbose build output.<br />`storybook dev --quiet` |
| `--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` |
| `--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` |
| `--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` |
| `--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` |
| `--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` |
<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.
@ -72,23 +72,23 @@ storybook build [options]
Options include:
| Option | Description |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information<br />`storybook build --help` |
| `-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` |
| `-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` |
| `--quiet` | Suppress verbose build output<br />`storybook build --quiet` |
| `--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` |
| `--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` |
| `--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` |
| `--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` |
| `--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` |
| Option | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information.<br />`storybook build --help` |
| `-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` |
| `-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` |
| `--quiet` | Suppress verbose build output.<br />`storybook build --quiet` |
| `--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` |
| `--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` |
| `--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` |
| `--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` |
| `--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`
@ -100,23 +100,28 @@ storybook[@version] init [options]
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:
| Option | Description |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `-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` |
| `-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` |
| `--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` |
| `--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` |
| `-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` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook init --debug` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)<br />`storybook init --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 init --enable-crash-reports` |
| `--no-dev` | Complete the initialization of Storybook without running the Storybook dev server<br />`storybook init --no-dev` |
| `-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` |
| `-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` |
| `-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, including all features.<br />`storybook init --yes` |
| `--features [...values]` | Use these features when installing, skipping the prompt. Supported values are `docs` and `test`, space separated.<br />`storybook init --features docs test` |
| `--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` |
| `--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` |
| `-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` |
| `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook init --debug` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook init --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 init --enable-crash-reports` |
| `--no-dev` | Complete the initialization of Storybook without running the Storybook dev server.<br />`storybook init --no-dev` |
### `add`
@ -130,11 +135,11 @@ Options include:
| Option | Description |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `--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` |
| `--debug` | Outputs more logs in the CLI to assist debugging<br />`storybook add --debug` |
| `-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` |
| `--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` |
| `--debug` | Outputs more logs in the CLI to assist debugging.<br />`storybook add --debug` |
### `remove`
@ -146,13 +151,13 @@ storybook remove [addon] [options]
Options include:
| Option | Description |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `--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` |
| `--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` |
| Option | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `-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` |
| `--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` |
| `--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`
@ -166,18 +171,18 @@ For example, `storybook@latest upgrade --dry-run` will perform a dry run (no act
Options include:
| Option | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `-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` |
| `-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` |
| `-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` |
| `--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` |
| `--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` |
| Option | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `-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` |
| `-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` |
| `--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` |
| `--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`
@ -197,14 +202,14 @@ Options include:
| Option | Description |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `-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` |
| `-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` |
| `-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` |
| `-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` |
| `-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` |
| `-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` |
| `-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` |
| `-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` |
### `automigrate`
@ -220,17 +225,17 @@ Options include:
| Option | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `-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` |
| `-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` |
| `--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` |
| `--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` |
| `--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` |
| `-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` |
| `-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` |
| `-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` |
| `--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` |
| `--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` |
| `--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`
@ -242,12 +247,12 @@ storybook doctor [options]
Options include:
| Option | Description |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `--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` |
| Option | Description |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `--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` |
### `info`
@ -299,15 +304,27 @@ The `framework-filter` argument is optional and can filter the list of available
Options include:
| Option | Description |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `-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` |
| `--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` |
| `--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` |
| Option | Description |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-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` |
| `--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` |
| `--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` |
<Callout variant="info">
If you're looking for a hosted version of the available sandboxes, see [storybook.new](https://storybook.new).
</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.

4
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
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?
@ -66,7 +66,7 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
<Callout variant="info" icon="💡">
If you're using [`Yarn`](https://yarnpkg.com/) as a package manager, you'll need to adjust the command accordingly.
</Callout>
## How do I setup Storybook to share Webpack configuration with Next.js?

4
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -408,7 +408,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
Type: `Record<string, any>`
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
{/* End supported renderers */}
</If>

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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}

4
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -89,6 +89,6 @@ Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) tha
Type: `Record<string, any>`
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
{/* End supported renderers */}
</If>

15
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -49,9 +49,9 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
### In a project with Storybook `addon-react-native-web`
The [React Native Web addon](https://github.com/storybookjs/addon-react-native-web) was a Webpack-based precursor to the React Native Web Vite framework (i.e., `@storybook/react-native-web-vite`). If you're using the addon, you should migrate to the framework, which is faster, more stable, maintained, and better documented. To do so, follow the steps below.
Run the following command to upgrade Storybook to the latest version:
{/* prettier-ignore-start */}
<CodeSnippets path="storybook-upgrade.md" />
@ -81,7 +81,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
Finally, remove the addon and similar packages (i.e., `@storybook/react-webpack5` and `@storybook/addon-react-native-web`) from your project.
### In a project with Storybook `react-native`
[Storybook for React Native](https://github.com/storybookjs/react-native) is a framework that runs in a simulator or on your mobile device. It's possible to run React Native Web alongside React Native, but we are still working on a seamless integration. In the meantime, we recommend running one or the other. If you need help figuring out what's right for you, read our [comparison](#react-native-vs-react-native-web).
## Run the Setup Wizard
@ -102,7 +102,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
- **Web** - Displays your React Native components in the browser. It’s based on Storybook for Web, which is feature-rich and mature.
{/* TODO: Don't forget about this image, otherwise remove it */}
{/* [Image: native + web] */}
So, which option is right for you?
@ -135,7 +135,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
name: '@storybook/react-native-web-vite',
options: {
// You should apply babel plugins and presets here for your project that you want to apply to your code
// for example put the reanimated preset here if you are using reanimated
// for example put the reanimated preset here if you are using reanimated
// or the nativewind jsxImportSource for example
pluginReactOptions: {
jsxRuntime: 'automatic' | 'classic', // default: 'automatic'
@ -217,7 +217,6 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
{/* End supported renderers */}
</If>

4
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -97,6 +97,6 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
Type: `Record<string, any>`
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
{/* End supported renderers */}
</If>

4
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -116,7 +116,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
<CodeSnippets path="react-webpack5-framework-options.md" />
{/* prettier-ignore-end */}
{/* prettier-ignore-end */}
#### `builder`

34
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -72,8 +72,8 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
## Writing native Svelte stories
Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax.
Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax.
<Callout variant="info">
The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
</Callout>
@ -91,13 +91,13 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
{/* prettier-ignore-end */}
<Callout variant="info">
The CLI's [`add`](../../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
</Callout>
Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
{/* prettier-ignore-start */}
<CodeSnippets path="main-config-svelte-csf-register.md" />
@ -105,7 +105,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
{/* prettier-ignore-end */}
### Configure
By default, the Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) addon offers zero-config support for Storybook's Svelte framework. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional addon options. Listed below are the available options and examples of how to use them.
{/* prettier-ignore-start */}
@ -117,11 +117,11 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
| Options | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------ |
| `legacyTemplate` | Enables support for the `Template` component for backward compatibility. <br/> `options: { legacyTemplate: true }` |
<Callout variant="info">
Enabling the `legacyTemplate` option can introduce a performance overhead and should be used cautiously. For more information, refer to the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf/blob/next/README.md#legacy-api).
</Callout>
### Upgrade to Svelte CSF addon v5
@ -129,9 +129,9 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
With the Svelte 5 release, Storybook's Svelte CSF addon has been updated to support the new features. This guide will help you migrate to the latest version of the addon. Below is an overview of the major changes in version 5.0 and the steps needed to upgrade your project.
#### Simplified story API
If you are using the `Meta` component or the `meta` named export to define the story's metadata (e.g., [parameters](../../writing-stories/parameters.mdx)), you'll need to update your stories to use the new `defineMeta` function. This function returns an object with the required information, including a `Story` component that you must use to define your component stories.
{/* prettier-ignore-start */ }
<CodeSnippets path="svelte-csf-story-migration.md" />
@ -139,9 +139,9 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
{/* prettier-ignore-end */}
#### Story templates
If you used the `Template` component to control how the component renders in the Storybook, this feature was replaced with built-in children support in the `Story` component, enabling you to compose components and define the UI structure directly in the story.
{/* prettier-ignore-start */ }
<CodeSnippets path="svelte-csf-story-custom-children.md" />
@ -151,17 +151,17 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
<Callout variant="info">
If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configuration options](#configure).
</Callout>
#### Story slots to snippets
With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing you to extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
```svelte title="MyComponent.stories.svelte"
<script>
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
const { Story } = defineMeta({
@ -179,7 +179,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
#### Tags support
If you enabled automatic documentation generation with the `autodocs` story property, you must replace it with [`tags`](../../writing-stories/tags.mdx). This property allows you to categorize and filter stories based on specific criteria and generate documentation based on the tags applied to the stories.
{/* prettier-ignore-start */ }
<CodeSnippets path="svelte-csf-addon-tags.md" />

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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}

34
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -157,8 +157,8 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
## Writing native Svelte stories
Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax.
Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax.
<Callout variant="info">
The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
</Callout>
@ -176,13 +176,13 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
{/* prettier-ignore-end */}
<Callout variant="info">
The CLI's [`add`](../../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
</Callout>
Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
{/* prettier-ignore-start */}
<CodeSnippets path="main-config-svelte-csf-register.md" />
@ -190,7 +190,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
{/* prettier-ignore-end */}
### Configure
By default, the Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) addon offers zero-config support for Storybook's SvelteKit framework. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional addon options. Listed below are the available options and examples of how to use them.
{/* prettier-ignore-start */}
@ -202,11 +202,11 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
| Options | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------ |
| `legacyTemplate` | Enables support for the `Template` component for backward compatibility. <br/> `options: { legacyTemplate: true }` |
<Callout variant="info">
Enabling the `legacyTemplate` option can introduce a performance overhead and should be used cautiously. For more information, refer to the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf/blob/next/README.md#legacy-api).
</Callout>
### Upgrade to Svelte CSF addon v5
@ -214,9 +214,9 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
With the Svelte 5 release, Storybook's Svelte CSF addon has been updated to support the new features. This guide will help you migrate to the latest version of the addon. Below is an overview of the major changes in version 5.0 and the steps needed to upgrade your project.
#### Simplified story API
If you are using the `Meta` component or the `meta` named export to define the story's metadata (e.g., [parameters](../../writing-stories/parameters.mdx)), you'll need to update your stories to use the new `defineMeta` function. This function returns an object with the required information, including a `Story` component that you must use to define your component stories.
{/* prettier-ignore-start */ }
<CodeSnippets path="svelte-csf-story-migration.md" />
@ -224,9 +224,9 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
{/* prettier-ignore-end */}
#### Story templates
If you used the `Template` component to control how the component renders in the Storybook, this feature was replaced with built-in children support in the `Story` component, enabling you to compose components and define the UI structure directly in the story.
{/* prettier-ignore-start */ }
<CodeSnippets path="svelte-csf-story-custom-children.md" />
@ -236,17 +236,17 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
<Callout variant="info">
If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configuration options](#configure).
</Callout>
#### Story slots to snippets
With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing you to extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
```svelte title="MyComponent.stories.svelte"
<script>
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
const { Story } = defineMeta({
@ -264,7 +264,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
#### Tags support
If you enabled automatic documentation generation with the `autodocs` story property, you must replace it with [`tags`](../../writing-stories/tags.mdx). This property allows you to categorize and filter stories based on specific criteria and generate documentation based on the tags applied to the stories.
{/* prettier-ignore-start */ }
<CodeSnippets path="svelte-csf-addon-tags.md" />

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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* 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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}

4
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -77,7 +77,7 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
<CodeSnippets path="web-components-vite-framework-options.md" />
{/* prettier-ignore-end */}
{/* prettier-ignore-end */}
The available options are:

6
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
@ -99,7 +99,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
<CodeSnippets path="web-components-webpack5-transpilation.md" />
{/* prettier-ignore-end */}
{/* prettier-ignore-end */}
By default, the following folders are transpiled:
@ -127,7 +127,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
<CodeSnippets path="web-components-webpack5-framework-options.md" />
{/* prettier-ignore-end */}
{/* prettier-ignore-end */}
The available options are:

28
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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}
<details id="custom-storybook-version">
<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@7.6.10 init` will initialize `7.6.10`
* `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>
Storybook will look into your project's dependencies during its install process and provide you with the best configuration available.
@ -123,9 +139,9 @@ There are some noteworthy items here:
#### Storybook doesn't work with an empty directory
By default, Storybook is configured to detect whether you're initializing it on an empty directory or an existing project. However, if you attempt to initialize Storybook, select a Vite-based framework (e.g., [React](./frameworks/react-vite.mdx)) in a directory that only contains a `package.json` file, you may run into issues with [Yarn Modern](https://yarnpkg.com/getting-started). This is due to how Yarn handles peer dependencies and how Storybook is set up to work with Vite-based frameworks, as it requires the [Vite](https://vitejs.dev/) package to be installed. To solve this issue, you must install Vite manually and initialize Storybook.
</If>
<IfRenderer renderer="angular">
#### Storybook doesn't work with my Angular project using the Angular CLI
@ -173,11 +189,11 @@ There are some noteworthy items here:
<Callout variant="info">
The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
</Callout>
Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
{/* prettier-ignore-start */}
<CodeSnippets path="main-config-svelte-csf-register.md" />

4
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.
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
<HomeRenderers />
@ -29,4 +29,4 @@ Storybook is a powerful tool that can help you with many aspects of your UI deve
Once you've learned the basics, explore these other ways to get the most out of Storybook.
<HomeResources />
<HomeResources />

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 */}
<CodeSnippets path="init-command.md" />
<CodeSnippets path="create-command.md" />
{/* prettier-ignore-end */}