diff --git a/README.md b/README.md index e6585e83a094..5a49d36e82d7 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz. -Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. +Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. ### Community @@ -97,10 +97,10 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ ### Supported Frameworks | Renderer | Demo | | -|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| +| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | | [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) | -| [Vue 3](code/renderers/vue3) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/) | +| [Vue 3](code/renderers/vue3) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/) | | [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) | | [React Native](https://github.com/storybookjs/react-native) | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/) | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | | [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) | @@ -132,7 +132,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ | [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI | | [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook | -See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support) +See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools. @@ -237,7 +237,6 @@ By making a recurring donation, you can support us and our work. \[[Become a bac - ## License [MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE) diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index a6c984d21f65..2bc3f201106d 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -2,7 +2,7 @@ This Storybook addon can be helpful to make your UI components more accessible. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png) diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md index a24f0e7052a2..60cfb587eadf 100644 --- a/code/addons/actions/README.md +++ b/code/addons/actions/README.md @@ -2,19 +2,19 @@ Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png) ## Installation -Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-actions ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md index a720847d4bf0..44fc45fb825a 100644 --- a/code/addons/backgrounds/README.md +++ b/code/addons/backgrounds/README.md @@ -2,13 +2,13 @@ Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif) ## Installation -Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-backgrounds @@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds ## Configuration -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md index b3c097e53eeb..e368a598e828 100644 --- a/code/addons/controls/README.md +++ b/code/addons/controls/README.md @@ -2,19 +2,19 @@ [Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/controls/docs/media/addon-controls-hero.gif) ## Installation -Controls is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-controls ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { @@ -123,7 +123,7 @@ Reflow.argTypes = { There are a few known cases where controls can't be auto-generated: -- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/react/api/frameworks-feature-support) +- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) - You're trying to generate controls for a component defined in an external library With a little manual work you can still use controls in such cases. Consider the following example: @@ -172,7 +172,7 @@ CustomControls.argTypes = { }; ``` -Like [story parameters](https://storybook.js.org/docs/react/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations. +Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations. ### How do controls work with MDX? diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 216893fb7070..9bd82c63de9c 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support: -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) **Note:** `#` = WIP support @@ -139,11 +139,11 @@ export default { `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. -> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. +> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. ## TypeScript configuration -As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md). +As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md). ## More resources diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md index 26f75811de5b..3fd4aef3c11c 100644 --- a/code/addons/docs/docs/docspage.md +++ b/code/addons/docs/docs/docspage.md @@ -34,7 +34,7 @@ However, `DocsPage` brings the following improvements: Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories. -Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf): +Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf): ```js import { Badge } from './Badge'; diff --git a/code/addons/docs/docs/mdx.md b/code/addons/docs/docs/mdx.md index 3f251fd9a9e5..735be0164b8f 100644 --- a/code/addons/docs/docs/mdx.md +++ b/code/addons/docs/docs/mdx.md @@ -149,7 +149,7 @@ You can also use the rest of the MDX features in conjunction with embedding. Tha ## Decorators and parameters -To add [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) in MDX: +To add [decorators](https://storybook.js.org/docs/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/writing-stories/parameters) in MDX: ```md -These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`. +These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`. **DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column: @@ -200,7 +200,7 @@ Here are the possible customizations for the rest of the prop table: | `table.type.detail` | A longer version of the type (if it's a complex type) | | `table.defaultValue.summary` | A short version of the default value | | `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) | -| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) | +| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) | ## Reporting a bug diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md index e760a61e08f4..d27c4fc851d9 100644 --- a/code/addons/docs/docs/recipes.md +++ b/code/addons/docs/docs/recipes.md @@ -282,7 +282,7 @@ These two methods are complementary. The former is useful for story-specific, an What happens if you want to add some wrapper for your MDX page, or add some other kind of React context? -When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `` block, decorators no longer apply, and you need to use the `docs.container` parameter. +When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `` block, decorators no longer apply, and you need to use the `docs.container` parameter. The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page: diff --git a/code/addons/docs/docs/theming.md b/code/addons/docs/docs/theming.md index 6c4c8ac13082..f68f55c67c9e 100644 --- a/code/addons/docs/docs/theming.md +++ b/code/addons/docs/docs/theming.md @@ -9,7 +9,7 @@ ## Storybook theming -Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/react/configure/theming), but is themed independently from the main UI. +Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configure/user-interface/theming), but is themed independently from the main UI. Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`: diff --git a/code/addons/essentials/README.md b/code/addons/essentials/README.md index bdc351de5b74..03c1be091efe 100644 --- a/code/addons/essentials/README.md +++ b/code/addons/essentials/README.md @@ -2,7 +2,7 @@ Storybook Essentials is a curated collection of addons to bring out the best of Storybook. -Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks. +Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) for all of the officially supported frameworks. ## Contents diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md index 6f27d1fda606..88ebb9c6ae23 100644 --- a/code/addons/highlight/README.md +++ b/code/addons/highlight/README.md @@ -8,7 +8,7 @@ Use it to call attention to particular parts of the story. Or use it to enhance ## Usage -This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: +This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: yarn: diff --git a/code/addons/jest/README.md b/code/addons/jest/README.md index 73b37e6dc21c..16c85d8fe260 100644 --- a/code/addons/jest/README.md +++ b/code/addons/jest/README.md @@ -2,7 +2,7 @@ Storybook addon for inspecting Jest unit test results. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) [![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/jest/docs/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel) @@ -20,7 +20,7 @@ Or if you're using yarn as a package manager: ## Configuration -Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { @@ -84,7 +84,7 @@ Assuming that you have already created a test file for your component (e.g., `My ### Story-level -In your story file, add a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) to your story's default export to display the results: +In your story file, add a [decorator](https://storybook.js.org/docs/writing-stories/decorators) to your story's default export to display the results: ```js // MyComponent.stories.js|jsx @@ -99,7 +99,7 @@ export default { }; ``` -You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters), for example: +You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/writing-stories/parameters), for example: ```js // MyComponent.stories.js|jsx @@ -130,7 +130,7 @@ Default.parameters = { ### Global level To avoid importing the results of the tests in each story, you can update -your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: +your [`.storybook/preview.js`](https://storybook.js.org/docs/configure#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: ```js // .storybook/preview.js diff --git a/code/addons/links/README.md b/code/addons/links/README.md index cc50832328fa..51066f17e69c 100644 --- a/code/addons/links/README.md +++ b/code/addons/links/README.md @@ -2,7 +2,7 @@ The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ## Getting Started diff --git a/code/addons/measure/README.md b/code/addons/measure/README.md index 8e280f150124..985e4a72342d 100644 --- a/code/addons/measure/README.md +++ b/code/addons/measure/README.md @@ -12,7 +12,7 @@ Storybook addon for inspecting layouts and visualizing the box model. ## Usage -This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-measure diff --git a/code/addons/outline/README.md b/code/addons/outline/README.md index e73da501a3f6..6d7dd53b6ef2 100644 --- a/code/addons/outline/README.md +++ b/code/addons/outline/README.md @@ -6,13 +6,13 @@ Storybook Addon Outline can be used for visually debugging CSS layout and alignm ## Usage -Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-outline ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/storysource/README.md b/code/addons/storysource/README.md index e460cc6ac058..2427d89eb324 100644 --- a/code/addons/storysource/README.md +++ b/code/addons/storysource/README.md @@ -2,7 +2,7 @@ This addon is used to show stories source in the addon panel. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Storysource Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/demo.gif) @@ -56,7 +56,7 @@ To customize the `source-loader`, pass `loaderOptions`. Valid configurations are ## Theming -Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/react/configure/theming) for more information. +Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/configure/user-interface/theming) for more information. ![Storysource Light/Dark Themes](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/theming-light-dark.png) diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md index 0c71eb3ce159..68309d9054a0 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -12,7 +12,7 @@ Requires Storybook 7.0 or later. If you need to add it to your Storybook, you ca npm i -D @storybook/addon-themes ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md index 2e37dc6c6168..dd70fb3ee7c5 100644 --- a/code/addons/toolbars/README.md +++ b/code/addons/toolbars/README.md @@ -6,19 +6,19 @@ The Toolbars addon controls global story rendering options from [Storybook's](ht - set your components' internationalization (i18n) locale - configure just about anything in Storybook that makes use of a global variable -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/toolbars/docs/hero.gif) ## Installation -Toolbars is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Toolbars is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-toolbars ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md index 6444f180db9f..4393724c431c 100644 --- a/code/addons/viewport/README.md +++ b/code/addons/viewport/README.md @@ -2,19 +2,19 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/viewport/docs/viewport.png) ## Installation -Viewport is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Viewport is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-viewport ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/core/src/telemetry/README.md b/code/core/src/telemetry/README.md index 7f84d318fc9e..c6a531ac6594 100644 --- a/code/core/src/telemetry/README.md +++ b/code/core/src/telemetry/README.md @@ -2,4 +2,4 @@ Storybook collects completely anonymous telemetry data about general usage. Participation in this program is optional and it’s easy to opt-out. -For more information visit: [storybook.js.org/telemetry](https://storybook.js.org/telemetry) +For more information visit: [storybook.js.org/telemetry](https://storybook.js.org/docs/configure/telemetry) diff --git a/code/presets/html-webpack/README.md b/code/presets/html-webpack/README.md index 3fa497407563..e6b8fd3e587b 100644 --- a/code/presets/html-webpack/README.md +++ b/code/presets/html-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for HTML -This package is a [preset](https://storybook.js.org/docs/html/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling HTML. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=html) that configures Storybook's webpack settings for handling HTML. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for HTML](https://storybook.js.org/docs/html/get-started) +- More info on [Storybook for HTML](https://storybook.js.org/docs/get-started/install?renderer=html) diff --git a/code/presets/preact-webpack/README.md b/code/presets/preact-webpack/README.md index 5ac103fdd029..c3e23e11f650 100644 --- a/code/presets/preact-webpack/README.md +++ b/code/presets/preact-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Preact -This package is a [preset](https://storybook.js.org/docs/preact/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Preact. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=preact) that configures Storybook's webpack settings for handling Preact. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for Preact](https://storybook.js.org/docs/preact/get-started) +- More info on [Storybook for Preact](https://storybook.js.org/docs/get-started/install?renderer=preact) diff --git a/code/presets/react-webpack/README.md b/code/presets/react-webpack/README.md index 74e2ad35024f..30e05d0a67b1 100644 --- a/code/presets/react-webpack/README.md +++ b/code/presets/react-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for React -This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=react) that configures Storybook's webpack settings for handling React. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for React](https://storybook.js.org/docs/react/get-started) +- More info on [Storybook for React](https://storybook.js.org/docs/get-started/install?renderer=react) diff --git a/code/presets/server-webpack/README.md b/code/presets/server-webpack/README.md index 6ec71da73371..b804e929699b 100644 --- a/code/presets/server-webpack/README.md +++ b/code/presets/server-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Server -This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets) that configures Storybook's webpack settings for handling React. It's an internal package that's not intended to be used directly by users. - More info on [Storybook for Server](https://github.com/storybookjs/storybook/tree/next/code/frameworks/server-webpack5) diff --git a/code/presets/svelte-webpack/README.md b/code/presets/svelte-webpack/README.md index b2d6cd5e9035..c29a4ed7a173 100644 --- a/code/presets/svelte-webpack/README.md +++ b/code/presets/svelte-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Svelte -This package is a [preset](https://storybook.js.org/docs/svelte/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Svelte. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=svelte) that configures Storybook's webpack settings for handling Svelte. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started) +- More info on [Storybook for Svelte](https://storybook.js.org/docs/get-started/install?renderer=svelte) diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md index 4c2a2df89914..9c6133472d65 100644 --- a/code/presets/vue3-webpack/README.md +++ b/code/presets/vue3-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Vue3 -This package is a [preset](https://storybook.js.org/docs/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue 3. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=vue) that configures Storybook's webpack settings for handling Vue 3. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/why-storybook) +- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/install?renderer=vue)