mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
migration + sharing links
This commit is contained in:
Charles de Dreuille
parent
845077af85
commit
cbc0a416e2
@ -75,7 +75,7 @@ While we'll do our best to upgrade your project automatically, there are two iss
|
||||
|
||||
If you have `storyStoreV7: false` in your `.storybook/main.js`, you will need to remove it before you're able to upgrade to Storybook 8.
|
||||
|
||||
If you are using the `storiesOf` API (which requires `storyStoreV7: false` in Storybook 7), you will need to either [migrate your stories to CSF](../../release-7-6/docs/migration-guide.md#storiesof-to-csf) or use the [new indexer API to continue creating stories dynamically](../../release-7-6/docs/migration-guide.md#storiesof-to-dynamically-created-stories).
|
||||
If you are using the `storiesOf` API (which requires `storyStoreV7: false` in Storybook 7), you will need to either [migrate your stories to CSF](../../release-7-6/docs/migration-guide.mdx#storiesof-to-csf) or use the [new indexer API to continue creating stories dynamically](../../release-7-6/docs/migration-guide.mdx#storiesof-to-dynamically-created-stories).
|
||||
|
||||
#### MDX 1 to MDX 3
|
||||
|
||||
@ -119,7 +119,7 @@ The automatic upgrade should get your Storybook into a working state. If you enc
|
||||
If you prefer to debug yourself, here are a few useful things you can do to help narrow down the problem:
|
||||
|
||||
1. Try removing all addons that are not in the `@storybook` npm namespace (make sure you don't remove the `storybook` package). Community addons that work well with 7.x might not yet be compatible with 8.0, and this is the fastest way to isolate that possibility. If you find an addon that needs to be upgraded to work with Storybook 8, please post an issue on the addon’s repository, or better yet, a pull request to upgrade it!
|
||||
2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
|
||||
2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.mdx) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
|
||||
|
||||
## Optional migrations
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ This guide is meant to help you **upgrade from Storybook 7.x to 8.0** successful
|
||||
<Callout variant="info">
|
||||
**Migrating from Storybook 6.x?**
|
||||
|
||||
We have a dedicated [migration guide for Storybook 6 to 8](./from-older-version.md).
|
||||
We have a dedicated [migration guide for Storybook 6 to 8](./from-older-version.mdx).
|
||||
</Callout>
|
||||
|
||||
## Major breaking changes
|
||||
@ -133,7 +133,7 @@ The automatic upgrade should get your Storybook into a working state. If you enc
|
||||
If you prefer to debug yourself, here are a few useful things you can do to help narrow down the problem:
|
||||
|
||||
1. Try removing all addons that are not in the `@storybook` npm namespace (make sure you don't remove the `storybook` package). Community addons that work well with 7.x might not yet be compatible with 8.0, and this is the fastest way to isolate that possibility. If you find an addon that needs to be upgraded to work with Storybook 8, please post an issue on the addon’s repository, or better yet, a pull request to upgrade it!
|
||||
2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
|
||||
2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.mdx) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
|
||||
|
||||
## Package structure changes
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Storybook integrates with design tools to speed up your development workflow. Th
|
||||
|
||||
### Embed Storybook in Figma with the plugin
|
||||
|
||||
[Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) is a Figma plugin that allows you to embed component stories in Figma. It’s powered by [Storybook embeds](./embed.md) and [Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook), a publishing tool created by the Storybook team.
|
||||
[Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) is a Figma plugin that allows you to embed component stories in Figma. It’s powered by [Storybook embeds](./embed.mdx) and [Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook), a publishing tool created by the Storybook team.
|
||||
|
||||
<Video src="../_assets/sharing/figma-plugin-open-story.mp4" />
|
||||
|
||||
@ -86,7 +86,7 @@ In Figma, open the file you want to embed in Storybook. You can embed files, pro
|
||||
|
||||
* Embed a component or frame check "Link to selected frame" in the Share dialog. Or right click on the frame and go to "Copy/Paste as" » "Copy link".
|
||||
|
||||
In Storybook, add a new [parameter](../writing-stories/parameters.md) named `design` to your story and paste the Figma URL. For example:
|
||||
In Storybook, add a new [parameter](../writing-stories/parameters.mdx) named `design` to your story and paste the Figma URL. For example:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -144,5 +144,5 @@ Integrate Adobe XD with Storybook using the [design addon](https://storybook.js.
|
||||
|
||||
Extend and customize Storybook by building an integration. Integrate with lower-level Storybook APIs or bootstrap an addon to customize Storybook's UI and behavior.
|
||||
|
||||
* [Addon documentation](../addons/index.md)
|
||||
* [Addon documentation](../addons/index.mdx)
|
||||
* [Create an addon tutorial](https://storybook.js.org/tutorials/create-an-addon/)
|
||||
|
||||
@ -8,8 +8,8 @@ sidebar:
|
||||
|
||||
You have your components ready and tested. That's great! Now you want to make your component library available to your team or community to help them understand how they work. There are multiple ways you can do that. You can publish your Storybook to services like Chromatic, embed some of your stories in your own website, or use third party services like Figma.
|
||||
|
||||
* [Publish](./publish-storybook.md)
|
||||
* [Embed](./embed.md)
|
||||
* [Design integrations](./design-integrations.md)
|
||||
* [Composition](./composition.md)
|
||||
* [Package Composition](./package-composition.md)
|
||||
* [Publish](./publish-storybook.mdx)
|
||||
* [Embed](./embed.mdx)
|
||||
* [Design integrations](./design-integrations.mdx)
|
||||
* [Composition](./composition.mdx)
|
||||
* [Package Composition](./package-composition.mdx)
|
||||
|
||||
@ -22,7 +22,7 @@ First, we'll need to build Storybook as a static web application. The functional
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
You can provide additional flags to customize the command. Read more about the flag options [here](../api/cli-options.md).
|
||||
You can provide additional flags to customize the command. Read more about the flag options [here](../api/cli-options.mdx).
|
||||
</Callout>
|
||||
|
||||
Storybook will create a static web application capable of being served by any web server. Preview it locally by running the following command:
|
||||
@ -35,7 +35,7 @@ Storybook will create a static web application capable of being served by any we
|
||||
|
||||
### Customizing the build for performance
|
||||
|
||||
By default, Storybook's production build will encapsulate all stories and documentation into the production bundle. This is ideal for small projects but can cause performance issues for larger projects or when decreased build times are a priority (e.g., testing, CI/CD). If you need, you can customize the production build with the [`test` option](../api/main-config-build.md#test) in your `main.js|ts` configuration file and adjust your build script to enable the optimizations with the `--test` [flag](../api/cli-options.md#build).
|
||||
By default, Storybook's production build will encapsulate all stories and documentation into the production bundle. This is ideal for small projects but can cause performance issues for larger projects or when decreased build times are a priority (e.g., testing, CI/CD). If you need, you can customize the production build with the [`test` option](../api/main-config/main-config-build.mdx#test) in your `main.js|ts` configuration file and adjust your build script to enable the optimizations with the `--test` [flag](../api/cli-options.mdx#build).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -113,7 +113,7 @@ When you publish Storybook, you also get component history and versioning down t
|
||||
|
||||
## Publish Storybook to other services
|
||||
|
||||
Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.md), [embedding stories](./embed.md), history, versioning, and assets may require tighter integration with Storybook APIs and secure authentication. If you want to know more about headers, you can refer to the [Migration guide](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts). Additionally, if you want to learn about the Component Publishing Protocol (CPP), you can find more information below.
|
||||
Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.mdx), [embedding stories](./embed.mdx), history, versioning, and assets may require tighter integration with Storybook APIs and secure authentication. If you want to know more about headers, you can refer to the [Migration guide](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts). Additionally, if you want to learn about the Component Publishing Protocol (CPP), you can find more information below.
|
||||
|
||||
### GitHub Pages
|
||||
|
||||
@ -132,7 +132,7 @@ To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook t
|
||||
<details>
|
||||
<summary><h2>Component Publishing Protocol (CPP)</h2></summary>
|
||||
|
||||
Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition.md). We categorize services via compliance with the "Component Publishing Protocol" (CPP) with various levels of support in Storybook.
|
||||
Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition.mdx). We categorize services via compliance with the "Component Publishing Protocol" (CPP) with various levels of support in Storybook.
|
||||
|
||||
### CPP level 1
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Composition
|
||||
---
|
||||
|
||||
Composition allows you to browse components from any Storybook accessible via URL inside your local Storybook. You can compose any [Storybook published online](./publish-storybook.md) or running locally no matter the view layer, tech stack, or dependencies.
|
||||
Composition allows you to browse components from any Storybook accessible via URL inside your local Storybook. You can compose any [Storybook published online](./publish-storybook.mdx) or running locally no matter the view layer, tech stack, or dependencies.
|
||||
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ You’ll see the composed Storybook’s stories in the sidebar alongside your ow
|
||||
|
||||
## Compose published Storybooks
|
||||
|
||||
In your [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) file add a `refs` field with information about the reference Storybook. Pass in a URL to a statically built Storybook.
|
||||
In your [`.storybook/main.js|ts`](../configure/index.mdx#configure-story-rendering) file add a `refs` field with information about the reference Storybook. Pass in a URL to a statically built Storybook.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -55,7 +55,7 @@ You can also compose Storybooks based on the current development environment (e.
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
Similar to other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a `config` parameter containing Storybook’s configuration object. See the [API reference](../api/main-config-refs.md) for more information.
|
||||
Similar to other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a `config` parameter containing Storybook’s configuration object. See the [API reference](../api/main-config/main-config-refs.mdx) for more information.
|
||||
</Callout>
|
||||
|
||||
## Troubleshooting
|
||||
@ -71,5 +71,5 @@ If you're working with an outdated Storybook version or have a project-specific
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
<Callout variant="info">
|
||||
The usage of a specific version of the CLI is intended as the `extract` command is not available in Storybook 8.0 or higher. It also requires you to provide additional configuration to generate the `index.json` file accurately. See the [previous documentation](../../../release-7-5/docs/sharing/storybook-composition.md) for more information.
|
||||
The usage of a specific version of the CLI is intended as the `extract` command is not available in Storybook 8.0 or higher. It also requires you to provide additional configuration to generate the `index.json` file accurately. See the [previous documentation](../../../release-7-5/docs/sharing/storybook-composition.mdx) for more information.
|
||||
</Callout>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user