Skip to content

Commit cbc0a41

Browse files
committed
migration + sharing links
1 parent 845077a commit cbc0a41

File tree

6 files changed

+20
-20
lines changed

6 files changed

+20
-20
lines changed

docs/migration-guide/from-older-version.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ While we'll do our best to upgrade your project automatically, there are two iss
7575

7676
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.
7777

78-
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).
78+
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).
7979

8080
#### MDX 1 to MDX 3
8181

@@ -119,7 +119,7 @@ The automatic upgrade should get your Storybook into a working state. If you enc
119119
If you prefer to debug yourself, here are a few useful things you can do to help narrow down the problem:
120120

121121
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!
122-
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.
122+
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.
123123

124124
## Optional migrations
125125

docs/migration-guide/index.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ This guide is meant to help you **upgrade from Storybook 7.x to 8.0** successful
2121
<Callout variant="info">
2222
**Migrating from Storybook 6.x?**
2323

24-
We have a dedicated [migration guide for Storybook 6 to 8](./from-older-version.md).
24+
We have a dedicated [migration guide for Storybook 6 to 8](./from-older-version.mdx).
2525
</Callout>
2626

2727
## Major breaking changes
@@ -133,7 +133,7 @@ The automatic upgrade should get your Storybook into a working state. If you enc
133133
If you prefer to debug yourself, here are a few useful things you can do to help narrow down the problem:
134134

135135
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!
136-
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.
136+
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.
137137

138138
## Package structure changes
139139

docs/sharing/design-integrations.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Storybook integrates with design tools to speed up your development workflow. Th
1616

1717
### Embed Storybook in Figma with the plugin
1818

19-
[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.
19+
[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.
2020

2121
<Video src="../_assets/sharing/figma-plugin-open-story.mp4" />
2222

@@ -86,7 +86,7 @@ In Figma, open the file you want to embed in Storybook. You can embed files, pro
8686

8787
* 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".
8888

89-
In Storybook, add a new [parameter](../writing-stories/parameters.md) named `design` to your story and paste the Figma URL. For example:
89+
In Storybook, add a new [parameter](../writing-stories/parameters.mdx) named `design` to your story and paste the Figma URL. For example:
9090

9191
{/* prettier-ignore-start */}
9292

@@ -144,5 +144,5 @@ Integrate Adobe XD with Storybook using the [design addon](https://storybook.js.
144144

145145
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.
146146

147-
* [Addon documentation](../addons/index.md)
147+
* [Addon documentation](../addons/index.mdx)
148148
* [Create an addon tutorial](https://storybook.js.org/tutorials/create-an-addon/)

docs/sharing/index.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ sidebar:
88

99
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.
1010

11-
* [Publish](./publish-storybook.md)
12-
* [Embed](./embed.md)
13-
* [Design integrations](./design-integrations.md)
14-
* [Composition](./composition.md)
15-
* [Package Composition](./package-composition.md)
11+
* [Publish](./publish-storybook.mdx)
12+
* [Embed](./embed.mdx)
13+
* [Design integrations](./design-integrations.mdx)
14+
* [Composition](./composition.mdx)
15+
* [Package Composition](./package-composition.mdx)

docs/sharing/publish-storybook.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ First, we'll need to build Storybook as a static web application. The functional
2222
{/* prettier-ignore-end */}
2323

2424
<Callout variant="info" icon="💡">
25-
You can provide additional flags to customize the command. Read more about the flag options [here](../api/cli-options.md).
25+
You can provide additional flags to customize the command. Read more about the flag options [here](../api/cli-options.mdx).
2626
</Callout>
2727

2828
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
3535

3636
### Customizing the build for performance
3737

38-
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).
38+
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).
3939

4040
{/* prettier-ignore-start */}
4141

@@ -113,7 +113,7 @@ When you publish Storybook, you also get component history and versioning down t
113113

114114
## Publish Storybook to other services
115115

116-
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.
116+
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.
117117

118118
### GitHub Pages
119119

@@ -132,7 +132,7 @@ To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook t
132132
<details>
133133
<summary><h2>Component Publishing Protocol (CPP)</h2></summary>
134134

135-
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.
135+
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.
136136

137137
### CPP level 1
138138

docs/sharing/storybook-composition.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ sidebar:
55
title: Composition
66
---
77

8-
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.
8+
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.
99

1010
![Storybook reference external](../_assets/sharing/reference-external-storybooks-composition.png)
1111

@@ -20,7 +20,7 @@ You’ll see the composed Storybook’s stories in the sidebar alongside your ow
2020

2121
## Compose published Storybooks
2222

23-
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.
23+
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.
2424

2525
{/* prettier-ignore-start */}
2626

@@ -55,7 +55,7 @@ You can also compose Storybooks based on the current development environment (e.
5555
{/* prettier-ignore-end */}
5656

5757
<Callout variant="info" icon="💡">
58-
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.
58+
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.
5959
</Callout>
6060

6161
## Troubleshooting
@@ -71,5 +71,5 @@ If you're working with an outdated Storybook version or have a project-specific
7171
{/* prettier-ignore-end */}
7272

7373
<Callout variant="info">
74-
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.
74+
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.
7575
</Callout>

0 commit comments

Comments
 (0)