Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
## 9.0.12

- Addon Vitest: Support init in Vitest >= 3.2 - [#31715](https://github.com/storybookjs/storybook/pull/31715), thanks @valentinpalkovic!
- CLI: Fix package manager instantiation in empty directories - [#31743](https://github.com/storybookjs/storybook/pull/31743), thanks @yannbf!
- CLI: Improve support for upgrading Storybook in monorepos - [#31557](https://github.com/storybookjs/storybook/pull/31557), thanks @yannbf!
- CLI: Show Storybook version in the upgrade command - [#31774](https://github.com/storybookjs/storybook/pull/31774), thanks @yannbf!
- Core: Enhance package manager install methods to support optional force flag - [#31796](https://github.com/storybookjs/storybook/pull/31796), thanks @valentinpalkovic!

## 9.0.11

- Addons: Use chromatic-com/storybook without version specifier - [#31627](https://github.com/storybookjs/storybook/pull/31627), thanks @valentinpalkovic!
Expand Down
3 changes: 2 additions & 1 deletion code/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -283,5 +283,6 @@
"Dependency Upgrades"
]
]
}
},
"deferredNextVersion": "9.0.12"
}
4 changes: 3 additions & 1 deletion docs/api/cli-options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ Options include:
| Option | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information.<br />`storybook upgrade --help` |
| `-c`, `--config-dir` | Storybook configuration directory.<br />`storybook upgrade --config-dir .storybook` |
| `-c, --config-dir <dir-name...>` | Directory or directories to find Storybook configurations<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` |
Expand All @@ -192,6 +192,8 @@ Options include:
| `--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` |
| `--write-logs` | Write all debug logs to a file at the end of the run.<br />`storybook upgrade --write-logs` |
| `--loglevel <level>` | Define log level: `debug`, `error`, `info`, `silent`, `trace`, or `warn` (default: `info`).<br />`storybook upgrade --loglevel debug` |

### `migrate`

Expand Down
104 changes: 97 additions & 7 deletions docs/configure/upgrading.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,18 @@ The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a

The most common upgrade is Storybook itself. [Storybook releases](https://storybook.js.org/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.

To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
To help ease the pain of keeping Storybook up-to-date, we provide a command-line script that automatically detects all Storybook projects in your repository:

{/* prettier-ignore-start */}

<CodeSnippets path="storybook-upgrade.md" />

{/* prettier-ignore-end */}

<Callout variant="info">
**Important:** Always run the upgrade command from your repository root. The script will automatically detect all Storybook projects in your repository, including in mono-repository setups.
</Callout>

The `upgrade` command will use whichever version you specify. For example:

* `storybook@latest upgrade` will upgrade to the latest version
Expand All @@ -36,24 +40,89 @@ The `upgrade` command will use whichever version you specify. For example:
The only exception to this is when upgrading from 6 to 8, where you can run `storybook@8 upgrade` directly to upgrade from 6.x.x to 8.x.x.
</Callout>

### Mono-repository support

The upgrade script provides enhanced support for mono-repositories:

- **Automatic detection**: The script automatically detects all Storybook projects in your repository
- **Selective upgrades**: If your Storybooks are truly encapsulated (meaning each Storybook project has its own independent Storybook dependencies in its own `package.json`), you can select which Storybook project to upgrade
- **Bulk upgrades**: If your Storybooks share dependencies, all detected projects will be upgraded together to ensure consistency

#### Limiting scope in large mono-repositories

For large mono-repositories where you want to limit the upgrade to a specific directory, use the `STORYBOOK_PROJECT_ROOT` environment variable:

```bash
STORYBOOK_PROJECT_ROOT=./packages/frontend storybook@latest upgrade
```

This is especially helpful in huge mono-repositories with semi-encapsulated Storybooks.


## Upgrade process

After running the command, the script will:

* Upgrade all Storybook packages in your project to the specified version
* Detect all Storybook projects in your repository
* Upgrade all Storybook packages to the specified version
* Run the relevant [automigrations](../migration-guide/index.mdx#automatic-upgrade) factoring in the [breaking changes](../migration-guide/index.mdx#major-breaking-changes) between your current version and the specified version
* Automatically run the [doctor command](#automatic-health-check) to verify the upgrade

<Callout variant="info">
In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
</Callout>

### Verifying the upgrade
### Automatic health check

To help you verify that the upgrade was completed and that your project is still working as expected, the Storybook CLI provides the [`doctor`](../api/cli-options.mdx#doctor) command that allows you to do a health check on your project for common issues that might arise after an upgrade, such as duplicated dependencies, incompatible addons or mismatched versions. To perform the health check, run the following command with your package manager of choice:
The upgrade script automatically runs a health check on all detected Storybook projects after the upgrade. This verifies that the upgrade was completed successfully and checks for common issues that might arise after an upgrade, such as duplicated dependencies, incompatible addons, or mismatched versions.

{/* prettier-ignore-start */}
The health check runs automatically for all detected Storybooks. You can also run it manually at any time using the `storybook doctor` command:

<CodeSnippets path="storybook-doctor.md" />

{/* prettier-ignore-end */}
### Error handling and debugging

If you encounter issues during the upgrade:

1. A `debug-storybook.log` file will be created in the repository root containing all relevant logs
2. For more detailed information, set the log level to `debug` using the `--loglevel debug` flag
3. Create a GitHub issue with the logs if you need help resolving the problem

## Command-line options

The upgrade command supports several flags to customize the upgrade process:

```bash
storybook@latest upgrade [options]
```

### Available flags

| Flag | Description |
| -------------------------------- | ------------------------------------------------------------------------------------------ |
| `-c, --config-dir <dir-name...>` | Directory or directories to find Storybook configurations |
| `--debug` | Enable more logs for debugging (default: false) |
| `--disable-telemetry` | Disable sending telemetry data |
| `--enable-crash-reports` | Enable sending crash reports to telemetry data |
| `-f, --force` | Force the upgrade, skipping autoblockers |
| `--loglevel <level>` | Define log level: `debug`, `error`, `info`, `silent`, `trace`, or `warn` (default: `info`) |
| `--package-manager <manager>` | Force package manager: `npm`, `pnpm`, `yarn1`, `yarn2`, or `bun` |
| `-s, --skip-check` | Skip postinstall version and automigration checks |
| `--write-logs` | Write all debug logs to a file at the end of the run |
| `-y, --yes` | Skip prompting the user |

### Example usage

```bash
# Upgrade with logging for debugging
storybook@latest upgrade --loglevel debug --write-logs

# Force upgrade without prompts
storybook@latest upgrade --force --yes

# Upgrade specific config directories only
storybook@latest upgrade --config-dir .storybook-app .storybook-ui
```

## Automigrate script

Expand Down Expand Up @@ -91,8 +160,28 @@ If you'd like to downgrade to a stable version, manually edit the package versio
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>


## Troubleshooting

### Storybook doesn't detect my Storybook project

By default, the upgrade script will attempt to find Storybook configuration in `.storybook` directories in your repository. If your Storybook configuration is located in a different directory, you can specify it using the `--config-dir` flag.

The `--config-dir` flag can accept multiple directories.

```bash
storybook@latest upgrade --config-dir .storybook-app .storybook-ui
```

If your project can be detected, but you get an error during the detection process, please check the `debug-storybook.log` file in the root of your repository. It will contain the full output of the detection process and will help you troubleshoot the issue.

### Storybook doesn't automigrate non-Storybook files

Our automigrations usually only transform and migrate files inside of your `.storybook` directory and your story and mdx files, which are mentioned as part of the Storybook configuration.

If you have other files that contain Storybook-specific code, you might need to manually migrate them.

<IfRenderer renderer="vue">
## Troubleshooting

### Storybook doesn't upgrade to the latest version when using Vue 2

Expand All @@ -103,4 +192,5 @@ If you'd like to downgrade to a stable version, manually edit the package versio
<CodeSnippets path="upgrade-command-specific-version.md" />

{/* prettier-ignore-end */}

</IfRenderer>
2 changes: 1 addition & 1 deletion docs/get-started/frameworks/angular.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make

## Requirements

* Angular ≥ 18.0 \< 20.0
* Angular ≥ 18.0 \< 21.0
* Webpack ≥ 5.0

## Getting started
Expand Down
29 changes: 10 additions & 19 deletions docs/migration-guide/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ You may wish to read the [full migration notes][full-migration-notes] before mig

## Automatic upgrade

To upgrade your Storybook:
To upgrade your Storybook, run the [upgrade](../configure/upgrading.mdx) command in the root of your repository:

{/* prettier-ignore-start */}

Expand All @@ -66,24 +66,15 @@ To upgrade your Storybook:

This will:

1. Determine that none of the [breaking changes](#major-breaking-changes) apply to your project
* If they do, you will receive instructions on how to resolve them before continuing
2. Upgrade your Storybook dependencies to the latest version
3. Run a collection of *automigrations*, which will:
* Check for common upgrade tasks
* Explain the necessary changes with links to more information
* Ask for approval, then perform the task automatically on your behalf

<Callout variant="info">

Migrating a monorepo project? Be sure to run the command in the current working directory (`cwd`) that contains the `storybook` package.

Some helpful commands for monorepos:

- For NX projects, you can use the `nx migrate` command
- The [`--config-dir` CLI flag](../api/cli-options.mdx#upgrade) can be used to specify a different config directory than the default `./.storybook` directory

</Callout>
1. Find all of the Storybook projects in your repository
2. For each project
1. Determine that none of the [breaking changes](#major-breaking-changes) apply to your project
* If they do, you will receive instructions on how to resolve them before continuing
2. Upgrade your Storybook dependencies to the latest version
3. Run a collection of *automigrations*, which will:
* Check for common upgrade tasks
* Explain the necessary changes with links to more information
* Ask for approval, then perform the task automatically on your behalf

## New projects

Expand Down
2 changes: 1 addition & 1 deletion docs/versions/latest.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"9.0.11","info":{"plain":"- Addons: Use chromatic-com/storybook without version specifier - [#31627](https://github.com/storybookjs/storybook/pull/31627), thanks @valentinpalkovic!\n- Angular: Tailwind 4 compatibility - [#31759](https://github.com/storybookjs/storybook/pull/31759), thanks @valentinpalkovic!\n- Angular: fix Storybook experimentalZoneless is not compatible with Angular 20 - [#31772](https://github.com/storybookjs/storybook/pull/31772), thanks @guysenpai!\n- React Native: Fix window event listeners that dont exist on rn - [#31780](https://github.com/storybookjs/storybook/pull/31780), thanks @dannyhw!"}}
{"version":"9.0.12","info":{"plain":"- Addon Vitest: Support init in Vitest >= 3.2 - [#31715](https://github.com/storybookjs/storybook/pull/31715), thanks @valentinpalkovic!\n- CLI: Fix package manager instantiation in empty directories - [#31743](https://github.com/storybookjs/storybook/pull/31743), thanks @yannbf!\n- CLI: Improve support for upgrading Storybook in monorepos - [#31557](https://github.com/storybookjs/storybook/pull/31557), thanks @yannbf!\n- CLI: Show Storybook version in the upgrade command - [#31774](https://github.com/storybookjs/storybook/pull/31774), thanks @yannbf!\n- Core: Enhance package manager install methods to support optional force flag - [#31796](https://github.com/storybookjs/storybook/pull/31796), thanks @valentinpalkovic!"}}