diff --git a/docs/_snippets/storybook-mdx-template-with-prop.md b/docs/_snippets/storybook-mdx-template-with-prop.md index 509a788951ee..340277699165 100644 --- a/docs/_snippets/storybook-mdx-template-with-prop.md +++ b/docs/_snippets/storybook-mdx-template-with-prop.md @@ -5,7 +5,7 @@ import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks'; {/* * 👇 The isTemplate property is required to tell Storybook that this is a template - * See https://storybook.js.org/docs/api/doc-block-meta + * See https://storybook.js.org/docs/api/doc-blocks/doc-block-meta * to learn how to use */} diff --git a/docs/_snippets/storybook-vite-builder-react-docgen.md b/docs/_snippets/storybook-vite-builder-react-docgen.md index b08ab4c7765c..733b8be00652 100644 --- a/docs/_snippets/storybook-vite-builder-react-docgen.md +++ b/docs/_snippets/storybook-vite-builder-react-docgen.md @@ -7,7 +7,7 @@ export default { }, typescript: { // Enables the `react-docgen-typescript` parser. - // See https://storybook.js.org/docs/api/main-config-typescript for more information about this option. + // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option. reactDocgen: 'react-docgen-typescript', }, }; diff --git a/docs/addons/writing-addons.mdx b/docs/addons/writing-addons.mdx index 7f2bf1bcd37e..fe3cb45ffd1b 100644 --- a/docs/addons/writing-addons.mdx +++ b/docs/addons/writing-addons.mdx @@ -22,7 +22,7 @@ There are two main categories of addons, each with its role: ### UI-based addons -The addon built in this guide is a UI-based addon, specifically a [toolbar](./addon-types.md#toolbars) addon, enabling users to draw outlines around each element in the story through a shortcut or click of a button. UI addons can create other types of UI elements, each with its function: [panels](./addon-types.md#panels) and [tabs](./addon-types.md#tabs), providing users with various ways to interact with the UI. +The addon built in this guide is a UI-based addon, specifically a [toolbar](./addon-types.mdx#toolbars) addon, enabling users to draw outlines around each element in the story through a shortcut or click of a button. UI addons can create other types of UI elements, each with its function: [panels](./addon-types.mdx#panels) and [tabs](./addon-types.mdx#tabs), providing users with various ways to interact with the UI. {/* prettier-ignore-start */} @@ -76,7 +76,7 @@ import { IconButton } from '@storybook/components'; import { LightningIcon } from '@storybook/icons'; ``` -The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. +The [`useGlobals`](./addons-api.mdx#useglobals) and [`useStorybookApi`](./addons-api.mdx#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. The `IconButton` or `Button` component from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package can be used to render the buttons in the toolbar. The [`@storybook/icons`](https://github.com/storybookjs/icons) package provides a large set of appropriately sized and styled icons to choose from. diff --git a/docs/api/doc-blocks/doc-block-argtypes.mdx b/docs/api/doc-blocks/doc-block-argtypes.mdx index 5e233b59f1c1..c56afe1edf45 100644 --- a/docs/api/doc-blocks/doc-block-argtypes.mdx +++ b/docs/api/doc-blocks/doc-block-argtypes.mdx @@ -13,7 +13,7 @@ The `ArgTypes` block can be used to show a static table of [arg types](../arg-ty If you’re looking for a dynamic table that shows a story’s current arg values for a story and supports users changing them, see the [`Controls`](./doc-block-controls.mdx) block instead. -![Screenshot of ArgTypes block](../_assets/doc-blocks/doc-block-argtypes.png) +![Screenshot of ArgTypes block](../../_assets/doc-block-argtypes.png) {/* prettier-ignore-start */} @@ -39,7 +39,7 @@ import { ArgTypes } from '@storybook/blocks';
Configuring with props and parameters - ℹ️ Like most blocks, the `ArgTypes` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.argTypes`. + ℹ️ Like most blocks, the `ArgTypes` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.argTypes`. The following `exclude` configurations are equivalent: @@ -59,7 +59,7 @@ import { ArgTypes } from '@storybook/blocks'; {/* prettier-ignore-end */} - The example above applied the parameter at the [component](../writing-stories/parameters.md#component-parameters) (or meta) level, but it could also be applied at the [project](../writing-stories/parameters.md#global-parameters) or [story](../writing-stories/parameters.md#story-parameters) level. + The example above applied the parameter at the [component](../../writing-stories/parameters.mdx#component-parameters) (or meta) level, but it could also be applied at the [project](../../writing-stories/parameters.mdx#global-parameters) or [story](../../writing-stories/parameters.mdx#story-parameters) level.
### `exclude` diff --git a/docs/api/doc-blocks/doc-block-canvas.mdx b/docs/api/doc-blocks/doc-block-canvas.mdx index 978ad95f3916..9a5e9ec5f5af 100644 --- a/docs/api/doc-blocks/doc-block-canvas.mdx +++ b/docs/api/doc-blocks/doc-block-canvas.mdx @@ -9,7 +9,7 @@ sidebar: The `Canvas` block is a wrapper around a [`Story`](./doc-block-story.mdx), featuring a toolbar that allows you to interact with its content while automatically providing the required [`Source`](./doc-block-source.mdx) snippets. -![Screenshot of Canvas block](../_assets/doc-blocks/doc-block-canvas.png) +![Screenshot of Canvas block](../../_assets/doc-block-canvas.png) When using the Canvas block in MDX, it references a story with the `of` prop: @@ -41,7 +41,7 @@ import { Canvas } from '@storybook/blocks';
Configuring with props and parameters - ℹ️ Like most blocks, the `Canvas` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.canvas`. + ℹ️ Like most blocks, the `Canvas` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.canvas`. The following `sourceState` configurations are equivalent: @@ -61,7 +61,7 @@ import { Canvas } from '@storybook/blocks'; {/* prettier-ignore-end */} - The example above applied the parameter at the [story](../writing-stories/parameters.md#story-parameters) level, but it could also be applied at the [component](../writing-stories/parameters.md#component-parameters) (or meta) level or [project](../writing-stories/parameters.md#global-parameters) level. + The example above applied the parameter at the [story](../../writing-stories/parameters.mdx#story-parameters) level, but it could also be applied at the [component](../../writing-stories/parameters.mdx#component-parameters) (or meta) level or [project](../../writing-stories/parameters.mdx#global-parameters) level.
### `additionalActions` diff --git a/docs/api/doc-blocks/doc-block-colorpalette.mdx b/docs/api/doc-blocks/doc-block-colorpalette.mdx index a8f67507109d..4a614a5ca161 100644 --- a/docs/api/doc-blocks/doc-block-colorpalette.mdx +++ b/docs/api/doc-blocks/doc-block-colorpalette.mdx @@ -9,7 +9,7 @@ sidebar: The `ColorPalette` block allows you to document all color-related items (e.g., swatches) used throughout your project. -![Screenshot of ColorPalette and ColorItem blocks](../_assets/doc-blocks/doc-block-colorpalette.png) +![Screenshot of ColorPalette and ColorItem blocks](../../_assets/doc-block-colorpalette.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx index c9d0f6e0dea1..0423f4dbc0ba 100644 --- a/docs/api/doc-blocks/doc-block-controls.mdx +++ b/docs/api/doc-blocks/doc-block-controls.mdx @@ -13,7 +13,7 @@ The `Controls` block can be used to show a dynamic table of args for a given sto If you’re looking for a static table that shows a component's arg types with no controls, see the [`ArgTypes`](./doc-block-argtypes.mdx) block instead. -![Screenshot of Controls block](../_assets/doc-blocks/doc-block-controls.png) +![Screenshot of Controls block](../../_assets/doc-block-controls.png) {/* prettier-ignore-start */} @@ -33,7 +33,7 @@ import * as ButtonStories from './Button.stories' {/* prettier-ignore-end */} - The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.mdx) (included in [`@storybook/addon-essentials`](../essentials/index.mdx)) and haven't turned off inline stories with the [`inline`](./doc-block-story.md#inline) configuration option. + The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../../essentials/controls.mdx) (included in [`@storybook/addon-essentials`](../../essentials/index.mdx)) and haven't turned off inline stories with the [`inline`](./doc-block-story.mdx#inline) configuration option. ## Controls @@ -45,7 +45,7 @@ import { Controls } from '@storybook/blocks';
Configuring with props and parameters - ℹ️ Like most blocks, the `Controls` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.controls`. + ℹ️ Like most blocks, the `Controls` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.controls`. The following `exclude` configurations are equivalent: @@ -65,7 +65,7 @@ import { Controls } from '@storybook/blocks'; {/* prettier-ignore-end */} - The example above applied the parameter at the [component](../writing-stories/parameters.md#component-parameters) (or meta) level, but it could also be applied at the [project](../writing-stories/parameters.md#global-parameters) or [story](../writing-stories/parameters.md#story-parameters) level. + The example above applied the parameter at the [component](../../writing-stories/parameters.mdx#component-parameters) (or meta) level, but it could also be applied at the [project](../../writing-stories/parameters.mdx#global-parameters) or [story](../../writing-stories/parameters.mdx#story-parameters) level.
diff --git a/docs/api/doc-blocks/doc-block-description.mdx b/docs/api/doc-blocks/doc-block-description.mdx index e72ec4f21657..20dd45dd2b5b 100644 --- a/docs/api/doc-blocks/doc-block-description.mdx +++ b/docs/api/doc-blocks/doc-block-description.mdx @@ -9,7 +9,7 @@ sidebar: The `Description` block displays the description for a component, story, or meta, obtained from their respective JSDoc comments. -![Screenshot of Description block](../_assets/doc-blocks/doc-block-title-subtitle-description.png) +![Screenshot of Description block](../../_assets/doc-block-title-subtitle-description.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-icongallery.mdx b/docs/api/doc-blocks/doc-block-icongallery.mdx index 34026ce71782..cb6d0cce7d16 100644 --- a/docs/api/doc-blocks/doc-block-icongallery.mdx +++ b/docs/api/doc-blocks/doc-block-icongallery.mdx @@ -9,7 +9,7 @@ sidebar: The `IconGallery` block enables you to easily document React icon components associated with your project, displayed in a neat grid. -![Screenshot of IconGallery and IconItem blocks](../_assets/doc-blocks/doc-block-icongallery.png) +![Screenshot of IconGallery and IconItem blocks](../../_assets/doc-block-icongallery.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-markdown.mdx b/docs/api/doc-blocks/doc-block-markdown.mdx index abd1727f3e94..68cd674e246b 100644 --- a/docs/api/doc-blocks/doc-block-markdown.mdx +++ b/docs/api/doc-blocks/doc-block-markdown.mdx @@ -7,7 +7,7 @@ sidebar: The `Markdown` block allows you to import and include plain markdown in your MDX files. -![Screenshot of Markdown block](../_assets/doc-blocks/doc-block-markdown.png) +![Screenshot of Markdown block](../../_assets/doc-block-markdown.png) When importing markdown files, it’s important to use the `?raw` suffix on the import path to ensure the content is imported as-is, and isn’t being evaluated: diff --git a/docs/api/doc-blocks/doc-block-meta.mdx b/docs/api/doc-blocks/doc-block-meta.mdx index c790d313d0c2..06d599adf537 100644 --- a/docs/api/doc-blocks/doc-block-meta.mdx +++ b/docs/api/doc-blocks/doc-block-meta.mdx @@ -39,7 +39,7 @@ import { Meta } from '@storybook/blocks'; Type: `boolean` -Determines whether the MDX file serves as an [automatic docs template](../writing-docs/autodocs.md#with-mdx). When true, the MDX file is not indexed as it normally would be. +Determines whether the MDX file serves as an [automatic docs template](../../writing-docs/autodocs.mdx#with-mdx). When true, the MDX file is not indexed as it normally would be. ### `name` @@ -86,7 +86,7 @@ Attaching an MDX file to a component’s stories with the `of` prop serves two p 2. Attaches the component and its stories to the MDX file, allowing you to use other doc blocks in “attached” mode (for instance to use the `Stories` block). - The `of` prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the `title` prop to control the location, or emit `Meta` entirely, and let [autotitle](../configure/sidebar-and-urls.md#csf-30-auto-titles) decide where it goes. + The `of` prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the `title` prop to control the location, or emit `Meta` entirely, and let [autotitle](../../configure/user-interface/sidebar-and-urls.mdx#csf-30-auto-titles) decide where it goes. ### `title` @@ -109,7 +109,7 @@ import { Meta } from '@storybook/blocks'; {/* prettier-ignore-end */} - If you want to change the sorting of the docs entry with the component’s stories, use [Story Sorting](../writing-stories/naming-components-and-hierarchy.md#sorting-stories), or add specific MDX files to your `stories` field in `main.js` in order. + If you want to change the sorting of the docs entry with the component’s stories, use [Story Sorting](../../writing-stories/naming-components-and-hierarchy.mdx#sorting-stories), or add specific MDX files to your `stories` field in `main.js` in order. ## Attached vs. unattached diff --git a/docs/api/doc-blocks/doc-block-primary.mdx b/docs/api/doc-blocks/doc-block-primary.mdx index b71fa386b6b5..a12852d456ae 100644 --- a/docs/api/doc-blocks/doc-block-primary.mdx +++ b/docs/api/doc-blocks/doc-block-primary.mdx @@ -9,7 +9,7 @@ sidebar: The `Primary` block displays the primary (first defined in the stories file) story, in a [`Story`](./doc-block-story.mdx) block. It is typically rendered immediately under the title in a docs entry. -![Screenshot of Primary block](../_assets/doc-blocks/doc-block-primary.png) +![Screenshot of Primary block](../../_assets/doc-block-primary.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-source.mdx b/docs/api/doc-blocks/doc-block-source.mdx index ce5e86573d69..88e142333e57 100644 --- a/docs/api/doc-blocks/doc-block-source.mdx +++ b/docs/api/doc-blocks/doc-block-source.mdx @@ -9,7 +9,7 @@ sidebar: The `Source` block is used to render a snippet of source code directly. -![Screenshot of Source block](../_assets/doc-blocks/doc-block-source.png) +![Screenshot of Source block](../../_assets/doc-block-source.png) {/* prettier-ignore-start */} @@ -35,7 +35,7 @@ import { Source } from '@storybook/blocks';
Configuring with props and parameters - ℹ️ Like most blocks, the `Source` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.source`. + ℹ️ Like most blocks, the `Source` block is configured with props in MDX. Many of those props derive their default value from a corresponding [parameter](../../writing-stories/parameters.mdx) in the block's namespace, `parameters.docs.source`. The following `language` configurations are equivalent: @@ -55,7 +55,7 @@ import { Source } from '@storybook/blocks'; {/* prettier-ignore-end */} - The example above applied the parameter at the [story](../writing-stories/parameters.md#story-parameters) level, but it could also be applied at the [component](../writing-stories/parameters.md#component-parameters) (or meta) level or [project](../writing-stories/parameters.md#global-parameters) level. + The example above applied the parameter at the [story](../../writing-stories/parameters.mdx#story-parameters) level, but it could also be applied at the [component](../../writing-stories/parameters.mdx#component-parameters) (or meta) level or [project](../../writing-stories/parameters.mdx#global-parameters) level.
### `code` @@ -158,5 +158,5 @@ Specifies how the source code is rendered. * **dynamic**: Renders the story source with dynamically updated arg values - Note that dynamic snippets will only work if the story uses [`args`](../writing-stories/args.mdx) and the [`Story` block](./doc-block-story.mdx) for that story is rendered along with the `Source` block. + Note that dynamic snippets will only work if the story uses [`args`](../../writing-stories/args.mdx) and the [`Story` block](./doc-block-story.mdx) for that story is rendered along with the `Source` block. diff --git a/docs/api/doc-blocks/doc-block-stories.mdx b/docs/api/doc-blocks/doc-block-stories.mdx index c501aaa50d40..567e4bc2acf8 100644 --- a/docs/api/doc-blocks/doc-block-stories.mdx +++ b/docs/api/doc-blocks/doc-block-stories.mdx @@ -9,7 +9,7 @@ sidebar: The `Stories` block renders the full collection of stories in a stories file. -![Screenshot of Stories block](../_assets/doc-blocks/doc-block-stories.png) +![Screenshot of Stories block](../../_assets/doc-block-stories.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx index b9ee006a289b..c8b103ca1c01 100644 --- a/docs/api/doc-blocks/doc-block-story.mdx +++ b/docs/api/doc-blocks/doc-block-story.mdx @@ -15,7 +15,7 @@ In Storybook Docs, you can render any of your stories from your CSF files in the Typically you want to use the [`Canvas` block](./doc-block-canvas.mdx) to render a story with a surrounding border and the source block, but you can use the `Story` block to render just the story. -![Screenshot of Story block](../_assets/doc-blocks/doc-block-story.png) +![Screenshot of Story block](../../_assets/doc-block-story.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-subtitle.mdx b/docs/api/doc-blocks/doc-block-subtitle.mdx index ea7d94856294..67afd08c1d9f 100644 --- a/docs/api/doc-blocks/doc-block-subtitle.mdx +++ b/docs/api/doc-blocks/doc-block-subtitle.mdx @@ -9,7 +9,7 @@ sidebar: The `Subtitle` block can serve as a secondary heading for your docs entry. -![Screenshot of Subtitle block](../_assets/doc-blocks/doc-block-title-subtitle-description.png) +![Screenshot of Subtitle block](../../_assets/doc-block-title-subtitle-description.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-title.mdx b/docs/api/doc-blocks/doc-block-title.mdx index 040417866fa2..13d421cc81bc 100644 --- a/docs/api/doc-blocks/doc-block-title.mdx +++ b/docs/api/doc-blocks/doc-block-title.mdx @@ -9,7 +9,7 @@ sidebar: The `Title` block serves as the primary heading for your docs entry. It is typically used to provide the component or page name. -![Screenshot of Title block](../_assets/doc-blocks/doc-block-title-subtitle-description.png) +![Screenshot of Title block](../../_assets/doc-block-title-subtitle-description.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-typeset.mdx b/docs/api/doc-blocks/doc-block-typeset.mdx index af58062d9c51..741e4b332eda 100644 --- a/docs/api/doc-blocks/doc-block-typeset.mdx +++ b/docs/api/doc-blocks/doc-block-typeset.mdx @@ -9,7 +9,7 @@ sidebar: The `Typeset` block helps document the fonts used throughout your project. -![Screenshot of Typeset block](../_assets/doc-blocks/doc-block-typeset.png) +![Screenshot of Typeset block](../../_assets/doc-block-typeset.png) {/* prettier-ignore-start */} diff --git a/docs/api/doc-blocks/doc-block-unstyled.mdx b/docs/api/doc-blocks/doc-block-unstyled.mdx index 013d550211fc..e333bcd5fdaf 100644 --- a/docs/api/doc-blocks/doc-block-unstyled.mdx +++ b/docs/api/doc-blocks/doc-block-unstyled.mdx @@ -35,7 +35,7 @@ import { Header } from "./Header.tsx"; Yields: -![Screenshot of Unstyled Doc Block](../_assets/doc-blocks/doc-block-unstyled.png) +![Screenshot of Unstyled Doc Block](../../_assets/doc-block-unstyled.png) The other blocks like [`Story`](./doc-block-story.mdx) and [`Canvas`](./doc-block-canvas.mdx) are already unstyled, so there’s no need to wrap those in the `Unstyled` block to ensure that Storybook’s styles don’t bleed into the stories. However, if you import your components directly in the MDX, you most likely want to wrap them in the Unstyled block. diff --git a/docs/api/doc-blocks/doc-block-useof.mdx b/docs/api/doc-blocks/doc-block-useof.mdx index 6b99a43767cd..7e5944c07869 100644 --- a/docs/api/doc-blocks/doc-block-useof.mdx +++ b/docs/api/doc-blocks/doc-block-useof.mdx @@ -84,7 +84,7 @@ Type: `ModuleExport | 'story' | 'meta' | 'component'` Provides the story export, meta export, component export, or CSF file exports from which you get annotations. -When the custom block is in an [attached doc](./doc-block-meta.md#attached-vs-unattached), it’s also possible to get the primary (first) story, meta, or component by passing in a string instead. This is useful as a fallback, so the `of` prop can be omitted in your block. The most common pattern is using this as `useOf(props.of || 'story')` which will fall back to the primary story if no `of` prop is defined. +When the custom block is in an [attached doc](./doc-block-meta.mdx#attached-vs-unattached), it’s also possible to get the primary (first) story, meta, or component by passing in a string instead. This is useful as a fallback, so the `of` prop can be omitted in your block. The most common pattern is using this as `useOf(props.of || 'story')` which will fall back to the primary story if no `of` prop is defined. * `useOf('story')` returns the annotated primary story in attached mode; error in unattached mode * `useOf('meta')` returns the annotated meta in attached mode; error in unattached mode diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx index 73985f10c116..246ad79372cc 100644 --- a/docs/api/main-config/main-config-indexers.mdx +++ b/docs/api/main-config/main-config-indexers.mdx @@ -27,7 +27,7 @@ They are defined as a function that returns the full list of indexers, including {/* prettier-ignore-end */} -Unless your indexer is doing something relatively trivial (e.g. [indexing stories with a different naming convention](../configure/sidebar-and-urls#story-indexers)), in addition to indexing the file, you will likely need to [transpile it to CSF](#transpiling-to-csf) so that Storybook can read them in the browser. +Unless your indexer is doing something relatively trivial (e.g. [indexing stories with a different naming convention](../../configure/sidebar-and-urls#story-indexers)), in addition to indexing the file, you will likely need to [transpile it to CSF](#transpiling-to-csf) so that Storybook can read them in the browser. ## `Indexer` @@ -118,7 +118,7 @@ For each `IndexInput`, the indexer will add this export (from the file found at Type: `string` -The file to import from, e.g. the [CSF](./csf.mdx) file. +The file to import from, e.g. the [CSF](../csf.mdx) file. It is likely that the [`fileName`](#filename) being indexed is not CSF, in which you will need to [transpile it to CSF](#transpiling-to-csf) so that Storybook can read it in the browser. diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx index e3801c16495e..aaa958c4afe4 100644 --- a/docs/api/portable-stories/portable-stories-jest.mdx +++ b/docs/api/portable-stories/portable-stories-jest.mdx @@ -226,7 +226,7 @@ draft: true ### 3. Prepare - Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.mdx) or [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically — you have to apply them yourself. + Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx) or [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically — you have to apply them yourself. 👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered. diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx index 5817b87d48e9..15ef0f681b69 100644 --- a/docs/api/portable-stories/portable-stories-vitest.mdx +++ b/docs/api/portable-stories/portable-stories-vitest.mdx @@ -218,7 +218,7 @@ draft: true ### 3. Prepare - Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx) or [beforeEach](../../writing-tests/interaction-testing.md#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically — you have to apply them yourself. + Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx) or [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically — you have to apply them yourself. 👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered. diff --git a/docs/api/stories.mdx b/docs/api/stories.mdx deleted file mode 100644 index 15265e90ad09..000000000000 --- a/docs/api/stories.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 'Stories' -draft: true ---- - -Storybook is extremely customizable and offers various ways to write your stories. - -Check the links below to learn more about it: - -* [Component Story Format (CSF)](./csf.mdx), the recommended way for you to write your stories. -* [MDX](./index.mdx), to create not only stories but also your own custom documentation. -* [`ArgTypes`](./arg-types.mdx), to learn how you can extend your component's stories. diff --git a/docs/configure/index.mdx b/docs/configure/index.mdx index 089292d3bb90..27389bbefeb2 100644 --- a/docs/configure/index.mdx +++ b/docs/configure/index.mdx @@ -13,7 +13,7 @@ Storybook is configured via a folder called `.storybook`, which contains various ## Configure your Storybook project -Storybook's main configuration (i.e., the `main.js|ts`) defines your Storybook project's behavior, including the location of your stories, the addons you use, feature flags and other project-specific settings. This file should be in the `.storybook` folder in your project's root directory. You can author this file in either JavaScript or [TypeScript](./typescript.mdx). Listed below are the available options and examples of how to use them. +Storybook's main configuration (i.e., the `main.js|ts`) defines your Storybook project's behavior, including the location of your stories, the addons you use, feature flags and other project-specific settings. This file should be in the `.storybook` folder in your project's root directory. You can author this file in either JavaScript or [TypeScript](./integration/typescript.mdx). Listed below are the available options and examples of how to use them. {/* prettier-ignore-start */} @@ -28,19 +28,19 @@ Storybook's main configuration (i.e., the `main.js|ts`) defines your Storybook p | Configuration element | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` | -| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs: ['../public']` | +| `staticDirs` | Sets a list of directories of [static files](./integration/images-and-assets.mdx#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs: ['../public']` | | `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook
`addons: ['@storybook/addon-essentials']` | -| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.mdx)
`typescript: { check: false, checkOptions: {} }` | -| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.mdx) settings
`framework: { name: '@storybook/svelte-vite', options:{} }` | -| `core` | Configures Storybook's [internal features](../api/main-config-core.mdx)
`core: { disableTelemetry: true, }` | +| `typescript` | Configures how Storybook handles [TypeScript files](./integration/typescript.mdx)
`typescript: { check: false, checkOptions: {} }` | +| `framework` | Configures Storybook based on a set of [framework-specific](./integration/frameworks.mdx) settings
`framework: { name: '@storybook/svelte-vite', options:{} }` | +| `core` | Configures Storybook's [internal features](../api/main-config/main-config-core.mdx)
`core: { disableTelemetry: true, }` | | `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.mdx)
`docs: { autodocs: 'tag' }` | -| `features` | Enables Storybook's [additional features](../api/main-config-features.mdx)
See table below for a list of available features | +| `features` | Enables Storybook's [additional features](../api/main-config/main-config-features.mdx)
See table below for a list of available features | | `refs` | Configures [Storybook composition](../sharing/storybook-composition.mdx)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | | `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | | `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.mdx) setup
`webpackFinal: async (config:any) => { return config; }` | | `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | -| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | -| `build` | Optimizes Storybook's production [build](../api/main-config-build.mdx) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority.
`build: { test: {} }` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.mdx#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | +| `build` | Optimizes Storybook's production [build](../api/main-config/main-config-build.mdx) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority.
`build: { test: {} }` | ## Configure story loading diff --git a/docs/configure/styling-and-css.mdx b/docs/configure/styling-and-css.mdx index 566cd9105ac2..92556b148c81 100644 --- a/docs/configure/styling-and-css.mdx +++ b/docs/configure/styling-and-css.mdx @@ -16,7 +16,7 @@ sidebar: ### Import bundled CSS (Recommended) - All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.ts`](./overview.md#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server. + All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.ts`](./overview.mdx#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server. {/* prettier-ignore-start */} @@ -28,7 +28,7 @@ sidebar: ### Include static CSS - If you have a global CSS file that you want to include in all your stories, you can import it in [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head). + If you have a global CSS file that you want to include in all your stories, you can import it in [`.storybook/preview-head.html`](./story-rendering.mdx#adding-to-head). However, these files will not be subject to HMR, so you'll need to restart your Storybook server to see your changes. {/* prettier-ignore-start */} @@ -83,7 +83,7 @@ sidebar: - If you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s). + If you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.mdx#override-the-default-configuration) to include the appropriate loader(s). ## CSS-in-JS @@ -93,11 +93,11 @@ sidebar: ### `.storybook/preview-head.html` - If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration). + If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.mdx#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./integration/images-and-assets.mdx#serving-static-files-via-storybook-configuration). ### `.storybook/preview.ts` - If you're using something like [`fontsource`](https://fontsource.org/) for your fonts, you can import the needed css files in your [`.storybook/preview.ts`](./overview.md#configure-story-rendering) file. + If you're using something like [`fontsource`](https://fontsource.org/) for your fonts, you can import the needed css files in your [`.storybook/preview.ts`](./overview.mdx#configure-story-rendering) file. {/* Angular only */} diff --git a/docs/configure/user-interface.mdx b/docs/configure/user-interface.mdx deleted file mode 100644 index 3676018c1daa..000000000000 --- a/docs/configure/user-interface.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: 'User interface' -draft: true ---- - -Storybook's UI is a highly customizable one and full of rich features to help you with your development process. - -Read more about the Storybook's features below: - -* [Features and behaviour](./user-interface/features-and-behavior.mdx) -* [Theming](./user-interface/theming.mdx) -* [Storybook addons](./user-interface/storybook-addons.mdx) -* [Sidebar & URLS](./user-interface/sidebar-and-urls.mdx) -* [Environment variables](./environment-variables.mdx) diff --git a/docs/configure/user-interface/sidebar-and-urls.mdx b/docs/configure/user-interface/sidebar-and-urls.mdx index c3c8a6784f5c..55537246e214 100644 --- a/docs/configure/user-interface/sidebar-and-urls.mdx +++ b/docs/configure/user-interface/sidebar-and-urls.mdx @@ -98,7 +98,7 @@ If you need to preserve the naming scheme, you can add the `title` element to th ### Auto-title prefixes -Additionally, if you customize your Storybook to load your stories based on a [configuration object](./index.mdx#with-a-configuration-object), including a `titlePrefix`, Storybook automatically prefixes all titles to matching stories. For example, assuming you have the following configuration: +Additionally, if you customize your Storybook to load your stories based on a [configuration object](../index.mdx#with-a-configuration-object), including a `titlePrefix`, Storybook automatically prefixes all titles to matching stories. For example, assuming you have the following configuration: {/* prettier-ignore-start */} diff --git a/docs/configure/user-interface/theming.mdx b/docs/configure/user-interface/theming.mdx index 0d8d7a3375a2..184cb631cb24 100644 --- a/docs/configure/user-interface/theming.mdx +++ b/docs/configure/user-interface/theming.mdx @@ -35,7 +35,7 @@ When setting a theme, set a complete theme object. The theme is replaced, not co ## Theming docs -[Storybook Docs](../writing-docs/index.mdx) uses the same theme system as Storybook’s UI but is themed independently from the main UI. +[Storybook Docs](../../writing-docs/index.mdx) uses the same theme system as Storybook’s UI but is themed independently from the main UI. Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](../features-and-behavior.mdx): @@ -45,7 +45,7 @@ Supposing you have a Storybook theme defined for the main UI in [`.storybook/man {/* prettier-ignore-end */} -Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](./index.mdx#configure-story-rendering): +Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](../index.mdx#configure-story-rendering): {/* prettier-ignore-start */} diff --git a/docs/configure/webpack.mdx b/docs/configure/webpack.mdx index e4e283fbb540..d5fc8b716d19 100644 --- a/docs/configure/webpack.mdx +++ b/docs/configure/webpack.mdx @@ -5,7 +5,7 @@ draft: true Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](https://storybook.js.org/addons/) are also available that extend the configuration for other everyday use cases. -You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./index.md#configure-your-storybook-project) file. +You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./index.mdx#configure-your-storybook-project) file. The value should be an async function that receives a webpack config and eventually returns a webpack config. @@ -44,7 +44,7 @@ yarn storybook dev --debug-webpack yarn storybook build --debug-webpack ``` -When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./index.md#on-demand-story-loading). +When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./index.mdx#on-demand-story-loading). ### Webpack 5 @@ -84,7 +84,7 @@ This feature will mean build output is cached between runs of Storybook, speedin ### Extending Storybook’s webpack config -To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./index.md#configure-story-rendering). +To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./index.mdx#configure-story-rendering). The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, and this will have information about where config came from, whether we're in production or development mode, etc. @@ -117,7 +117,7 @@ If you're using a non-standard Storybook config directory, you should put `main. ### Using your existing config -Suppose you have an existing webpack config for your project and want to reuse this app's configuration. In that case, you can import your main webpack config into Storybook's [`.storybook/main.js`](./index.md#configure-story-rendering) and merge both: +Suppose you have an existing webpack config for your project and want to reuse this app's configuration. In that case, you can import your main webpack config into Storybook's [`.storybook/main.js`](./index.mdx#configure-story-rendering) and merge both: The following code snippet shows how you can replace the loaders from Storybook with the ones from your app's `webpack.config.js`: diff --git a/docs/contribute/RFC.mdx b/docs/contribute/RFC.mdx index 6274123cedfe..32f1aae9b636 100644 --- a/docs/contribute/RFC.mdx +++ b/docs/contribute/RFC.mdx @@ -54,5 +54,5 @@ This RFC process took heavy inspiration from the RFC processes from [Rust](https * RFC process for authoring feature requests * [Code](./code.mdx) for features and bug fixes * [Frameworks](./framework.mdx) to get started with a new framework -* [Documentation](./documentation-updates.mdx) for documentation improvements, typos, and clarifications -* [Examples](./new-snippets.mdx) for new snippets and examples +* [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications +* [Examples](./documentation/new-snippets.mdx) for new snippets and examples diff --git a/docs/contribute/code.mdx b/docs/contribute/code.mdx index 6e4c09b42ad3..39d42d82a8d0 100644 --- a/docs/contribute/code.mdx +++ b/docs/contribute/code.mdx @@ -257,5 +257,5 @@ Once the PR is merged, the template will be generated on a nightly cadence and y * [RFC process](./RFC.mdx) for authoring feature requests * Code for features and bug fixes * [Frameworks](./framework.mdx) to get started with a new framework -* [Documentation](./documentation-updates.mdx) for documentation improvements, typos, and clarifications -* [Examples](./new-snippets.mdx) for new snippets and examples +* [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications +* [Examples](./documentation/new-snippets.mdx) for new snippets and examples diff --git a/docs/contribute/documentation/documentation-updates.mdx b/docs/contribute/documentation/documentation-updates.mdx index c68784fb7d04..0c0ba95c6818 100644 --- a/docs/contribute/documentation/documentation-updates.mdx +++ b/docs/contribute/documentation/documentation-updates.mdx @@ -27,8 +27,8 @@ In the Storybook repository, create a pull request that describes changes and in **Learn more about contributing to Storybook** -* [RFC process](./RFC.mdx) for authoring feature requests -* [Code](./code.mdx) for features and bug fixes -* [Frameworks](./framework.mdx) to get started with a new framework +* [RFC process](../RFC.mdx) for authoring feature requests +* [Code](../code.mdx) for features and bug fixes +* [Frameworks](../framework.mdx) to get started with a new framework * Documentation for documentation improvements, typos, and clarifications -* [Examples](./new-snippets.mdx) for new snippets and examples +* [Examples](../new-snippets.mdx) for new snippets and examples diff --git a/docs/contribute/documentation/new-snippets.mdx b/docs/contribute/documentation/new-snippets.mdx index 4f12e28edd56..1a7cf0c0b601 100644 --- a/docs/contribute/documentation/new-snippets.mdx +++ b/docs/contribute/documentation/new-snippets.mdx @@ -9,7 +9,7 @@ Add or update the code snippets in the documentation. This page outlines how the ## Documented frameworks -Storybook maintains code snippets for a [variety of frameworks](../configure/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But it's tricky to keep track of every API change in every framework. +Storybook maintains code snippets for a [variety of frameworks](../../configure/integration/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But it's tricky to keep track of every API change in every framework. We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework. @@ -19,7 +19,7 @@ We welcome community contributions to the code snippets. Here's a matrix of the ## Setup -Assuming you've already followed the [local environment guide](./code.md#initial-setup), the first thing you need to do is create a branch on your local Storybook monorepo by running the following command: +Assuming you've already followed the [local environment guide](../code.mdx#initial-setup), the first thing you need to do is create a branch on your local Storybook monorepo by running the following command: ```shell git checkout -b code-snippets-for-framework @@ -130,8 +130,8 @@ Finally, commit, push and open a pull request in the Storybook monorepo. Add a c **Learn more about contributing to Storybook** -* [RFC process](./RFC.mdx) for authoring feature requests -* [Code](./code.mdx) for features and bug fixes -* [Frameworks](./framework.mdx) to get started with a new framework +* [RFC process](../RFC.mdx) for authoring feature requests +* [Code](../code.mdx) for features and bug fixes +* [Frameworks](../framework.mdx) to get started with a new framework * [Documentation](./documentation-updates.mdx) for documentation improvements, typos, and clarifications * [Examples](./new-snippets.mdx) for new snippets and examples diff --git a/docs/contribute/framework.mdx b/docs/contribute/framework.mdx index f0d18c0dba1f..dae362ed9d3b 100644 --- a/docs/contribute/framework.mdx +++ b/docs/contribute/framework.mdx @@ -131,7 +131,7 @@ The [preset API](../addons/writing-presets) is where you will configure the Stor #### `preview.js` ([example](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preview.tsx)) -The (optional) [preview API](../configure/index.md#configure-story-rendering) is where you configure the rendering of stories, such as global decorators or initializing some runtime config needed for your framework to behave as expected. If your framework requires this file, note that you also need to [configure the `previewAnnotations` in `preset.js`](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preset.ts#L71-L74). +The (optional) [preview API](../configure/index.mdx#configure-story-rendering) is where you configure the rendering of stories, such as global decorators or initializing some runtime config needed for your framework to behave as expected. If your framework requires this file, note that you also need to [configure the `previewAnnotations` in `preset.js`](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preset.ts#L71-L74). #### `types.ts` ([example](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/types.ts)) @@ -150,5 +150,5 @@ Once it's fully tested and released, please let us know about your framework by * [RFC process](./RFC.mdx) for authoring feature requests * [Code](./code.mdx) for features and bug fixes * Frameworks to get started with a new framework -* [Documentation](./documentation-updates.mdx) for documentation improvements, typos, and clarifications -* [Examples](./new-snippets.mdx) for new snippets and examples +* [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications +* [Examples](./documentation/new-snippets.mdx) for new snippets and examples diff --git a/docs/contribute/index.mdx b/docs/contribute/index.mdx index 266fc9c40d32..dd27c951753b 100644 --- a/docs/contribute/index.mdx +++ b/docs/contribute/index.mdx @@ -17,9 +17,9 @@ In the interest of fostering an open and welcoming environment, we as contributo * [**RFC process**](./RFC.mdx) for authoring feature requests * [**Code**](./code.mdx) for features and bug fixes * [**Frameworks**](./framework.mdx) to get started with a new framework -* [**Documentation**](./documentation-updates.mdx) for documentation improvements, typos, and clarifications -* [**Examples**](./new-snippets.mdx) for new snippets and examples -* [**Addons**](./../addons/index.mdx) for new addons +* [**Documentation**](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications +* [**Examples**](./documentation/new-snippets.mdx) for new snippets and examples +* [**Addons**](../addons/index.mdx) for new addons ## Not sure how to get started? diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx index 56383e466d8a..91bb1dcb2407 100644 --- a/docs/essentials/actions.mdx +++ b/docs/essentials/actions.mdx @@ -31,7 +31,7 @@ If your component calls an arg (because of either the user's interaction or the ### Automatically matching args -Another option is to use a global parameter to match all [argTypes](../api/arg-types.mdx) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/arg-types.md#automatic-argtype-inference)). +Another option is to use a global parameter to match all [argTypes](../api/arg-types.mdx) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/arg-types.mdx#automatic-argtype-inference)). This is quite useful when your component has dozens (or hundreds) of methods and you do not want to manually apply the `fn` utility for each of those methods. However, **this is not the recommended** way of writing actions. That's because automatically inferred args **are not available as spies in your play function**. If you use `argTypesRegex` and your stories have play functions, you will need to also define args with the `fn` utility to test them in your play function. diff --git a/docs/essentials/viewport.mdx b/docs/essentials/viewport.mdx index b981192e4aed..a644f06e1bec 100644 --- a/docs/essentials/viewport.mdx +++ b/docs/essentials/viewport.mdx @@ -13,7 +13,7 @@ The Viewport toolbar item allows you to adjust the dimensions of the iframe your ## Configuration -Out of the box, the Viewport addon offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can set the global `parameters.viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering): +Out of the box, the Viewport addon offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can set the global `parameters.viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering): {/* prettier-ignore-start */} @@ -88,7 +88,7 @@ The Viewport addon includes a selection of devices that you can use to test your ### Add new devices -If you have either a specific viewport or a list of viewports that you need to use, you can modify your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) file and include them: +If you have either a specific viewport or a list of viewports that you need to use, you can modify your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file and include them: {/* prettier-ignore-start */} diff --git a/docs/faq.mdx b/docs/faq.mdx index dcade0aff445..e732e5d3e345 100644 --- a/docs/faq.mdx +++ b/docs/faq.mdx @@ -288,11 +288,11 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S | | `main.js` configuration/managerHead | [See current documentation](./api/main-config/main-config-manager-head.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/previewAnnotations | [See current documentation](./api/main-config/main-config-preview-annotations.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/previewBody | [See current documentation](./api/main-config/main-config-preview-body.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/previewHead | [See current documentation](./api/main-config-preview-head.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewHead | [See current documentation](./api/main-config/main-config-preview-head.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/refs | [See current documentation](./api/main-config/main-config-refs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/staticDirs | [See current documentation](./api/main-config/main-config-static-dirs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/swc | [See current documentation](./api/main-config/main-config-swc.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/typescript | [See current documentation](./api/main-config-typescript.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/typescript | [See current documentation](./api/main-config/main-config-typescript.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/viteFinal | [See current documentation](./api/main-config/main-config-vite-final.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/webpackFinal | [See current documentation](./api/main-config/main-config-webpack-final.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | | Frameworks | [See current documentation](./api/new-frameworks.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | @@ -477,6 +477,6 @@ There's an issue with Storybook's test runner and the latest version of Jest (i. Storybook has built-in support for [environment variables](./configure/environment-variables.mdx). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook. -To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file. +To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.mdx#using-storybook-configuration) field in the `.storybook/main.js` file. Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)). diff --git a/docs/frameworks.js b/docs/frameworks.js index 8ce9fe8e62b2..07076c7be7ef 100644 --- a/docs/frameworks.js +++ b/docs/frameworks.js @@ -159,89 +159,89 @@ module.exports = { { name: 'Doc Blocks - ArgTypes', unsupported: [], - path: 'api/doc-block-argtypes', + path: 'api/doc-blocks/doc-block-argtypes', }, { name: 'Doc Blocks - Canvas', unsupported: [], - path: 'api/doc-block-canvas', + path: 'api/doc-blocks/doc-block-canvas', }, { name: 'Doc Blocks - ColorPalette', unsupported: [], - path: 'api/doc-block-colorpalette', + path: 'api/doc-blocks/doc-block-colorpalette', }, { name: 'Doc Blocks - Controls', unsupported: [], - path: 'api/doc-block-controls', + path: 'api/doc-blocks/doc-block-controls', }, { name: 'Doc Blocks - Description', unsupported: [], - path: 'api/doc-block-description', + path: 'api/doc-blocks/doc-block-description', }, { name: 'Doc Blocks - IconGallery', unsupported: [], - path: 'api/doc-block-icongallery', + path: 'api/doc-blocks/doc-block-icongallery', }, { name: 'Doc Blocks - Markdown', unsupported: [''], - path: 'api/doc-block-markdown', + path: 'api/doc-blocks/doc-block-markdown', }, { name: 'Doc Blocks - Meta', unsupported: [''], - path: 'api/doc-block-meta', + path: 'api/doc-blocks/doc-block-meta', }, { name: 'Doc Blocks - Primary', unsupported: [''], - path: 'api/doc-block-primary', + path: 'api/doc-blocks/doc-block-primary', }, { name: 'Doc Blocks - Source', unsupported: [], - path: 'api/doc-block-source', + path: 'api/doc-blocks/doc-block-source', }, { name: 'Doc Blocks - Story', unsupported: [], - path: 'api/doc-block-story', + path: 'api/doc-blocks/doc-block-story', }, { name: 'Doc Blocks - Stories', unsupported: [], - path: 'api/doc-block-stories', + path: 'api/doc-blocks/doc-block-stories', }, { name: 'Doc Blocks - Subtitle', unsupported: [], - path: 'api/doc-block-subtitle', + path: 'api/doc-blocks/doc-block-subtitle', }, { name: 'Doc Blocks - Title', unsupported: [], - path: 'api/doc-block-title', + path: 'api/doc-blocks/doc-block-title', }, { name: 'Doc Blocks - Typeset', unsupported: [], - path: 'api/doc-block-typeset', + path: 'api/doc-blocks/doc-block-typeset', }, { name: 'Doc Blocks - Unstyled', unsupported: [], - path: 'api/doc-block-unstyled', + path: 'api/doc-blocks/doc-block-unstyled', }, { name: 'Doc Blocks - UseOf', unsupported: [], - path: 'api/doc-block-useof', + path: 'api/doc-blocks/doc-block-useof', }, { name: 'storiesOf stories', diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx index 8e6d2ed230d5..ba755c40380d 100644 --- a/docs/get-started/frameworks/angular.mdx +++ b/docs/get-started/frameworks/angular.mdx @@ -375,8 +375,8 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make | `"smokeTest"` | Exit Storybook after successful start.
`"smokeTest": true` | | `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window).
`"ci": true` | | `"quiet"` | Filters Storybook verbose build output.
`"quiet": true` | - | `"docs"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.md#preview-storybooks-documentation).
`"docs": true` | - | `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.md#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]`
| + | `"docs"` | Starts Storybook in [documentation mode](../../writing-docs/build-documentation.mdx#preview-storybooks-documentation).
`"docs": true` | + | `"styles"` | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]`
| | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root.
`"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` | The full list of options can be found in the Angular builder schemas: diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx index 92452432a156..1d749866d07a 100644 --- a/docs/get-started/frameworks/nextjs.mdx +++ b/docs/get-started/frameworks/nextjs.mdx @@ -433,7 +433,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make ## Sass/Scss - [Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering) + [Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [`.storybook/preview.js|ts`](../../configure/index.mdx#configure-story-rendering) ```js // .storybook/preview.js|ts @@ -716,7 +716,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make Next.js comes with a lot of things for free out of the box like Sass support, but sometimes you add [custom Webpack config modifications to Next.js](https://nextjs.org/docs/pages/api-reference/next-config-js/webpack). This framework takes care of most of the Webpack modifications you would want to add. If Next.js supports a feature out of the box, then that feature will work out of the box in Storybook. If Next.js doesn't support something out of the box, but makes it easy to configure, then this framework will do the same for that thing for Storybook. - Any Webpack modifications desired for Storybook should be made in [`.storybook/main.js|ts`](../builders/webpack.md#extending-storybooks-webpack-config). + Any Webpack modifications desired for Storybook should be made in [`.storybook/main.js|ts`](../../builders/webpack.mdx#extending-storybooks-webpack-config). Note: Not all Webpack modifications are copy/paste-able between `next.config.js` and `.storybook/main.js|ts`. It is recommended to do your research on how to properly make your modification to Storybook's Webpack config and on how [Webpack works](https://webpack.js.org/concepts/). @@ -776,7 +776,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make {/* ## Portable stories - You can test your stories in a Jest environment by using the [portable stories](../api/portable-stories-jest.mdx) API. + You can test your stories in a Jest environment by using the [portable stories](../../api/portable-stories/portable-stories-jest.mdx) API. When using portable stories with Next.js, you need to mock the Next.js modules on which your components depend. You can use the [`@storybook/nextjs/export-mocks` module](#storybooknextjsexport-mocks) to generate the aliases needed to set up portable stories in a Jest environment. This is needed because, to replicate Next.js configuration, Storybook sets up aliases in Webpack to make testing and developing your components easier. If you make use of the advanced functionality like the built-in mocks for common Next.js modules, you need to set up this aliasing in your Jest environment as well. */} @@ -919,7 +919,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make Type: `typeof import('next/cache')` - This module exports mocked implementations of the `next/cache` module's exports. You can use it to create your own mock implementations or assert on mock calls in a story's [play function](../writing-stories/play-function.mdx). + This module exports mocked implementations of the `next/cache` module's exports. You can use it to create your own mock implementations or assert on mock calls in a story's [play function](../../writing-stories/play-function.mdx). {/* prettier-ignore-start */} @@ -953,7 +953,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make Type: `typeof import('next/navigation') & getRouter: () => ReturnType` - This module exports mocked implementations of the `next/navigation` module's exports. It also exports a `getRouter` function that returns a mocked version of [Next.js's `router` object from `useRouter`](https://nextjs.org/docs/app/api-reference/functions/use-router#userouter), allowing the properties to be manipulated and asserted on. You can use it mock implementations or assert on mock calls in a story's [play function](../writing-stories/play-function.mdx). + This module exports mocked implementations of the `next/navigation` module's exports. It also exports a `getRouter` function that returns a mocked version of [Next.js's `router` object from `useRouter`](https://nextjs.org/docs/app/api-reference/functions/use-router#userouter), allowing the properties to be manipulated and asserted on. You can use it mock implementations or assert on mock calls in a story's [play function](../../writing-stories/play-function.mdx). {/* prettier-ignore-start */} @@ -965,7 +965,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make Type: `typeof import('next/router') & getRouter: () => ReturnType` - This module exports mocked implementations of the `next/router` module's exports. It also exports a `getRouter` function that returns a mocked version of [Next.js's `router` object from `useRouter`](https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object), allowing the properties to be manipulated and asserted on. You can use it mock implementations or assert on mock calls in a story's [play function](../writing-stories/play-function.mdx). + This module exports mocked implementations of the `next/router` module's exports. It also exports a `getRouter` function that returns a mocked version of [Next.js's `router` object from `useRouter`](https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object), allowing the properties to be manipulated and asserted on. You can use it mock implementations or assert on mock calls in a story's [play function](../../writing-stories/play-function.mdx). {/* prettier-ignore-start */} @@ -1001,7 +1001,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make Type: `Record` - Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For Next.js, available options can be found in the [Webpack builder docs](../builders/webpack.mdx). + Configure options for the [framework's builder](../../api/main-config-framework.mdx#optionsbuilder). For Next.js, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx). #### `image` @@ -1017,7 +1017,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make ### Parameters - This framework contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `nextjs` namespace: + This framework contributes the following [parameters](../../writing-stories/parameters.mdx) to Storybook, under the `nextjs` namespace: #### `appDirectory` @@ -1025,7 +1025,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make Default: `false` - If your story imports components that use `next/navigation`, you need to set the parameter `nextjs.appDirectory` to `true`. Because this is a parameter, you can apply it to a [single story](../api/parameters.md#story-parameters), [all stories for a component](../api/parameters.md#meta-parameters), or [every story in your Storybook](../api/parameters.md#project-parameters). See [Next.js Navigation](#nextjs-navigation) for more details. + If your story imports components that use `next/navigation`, you need to set the parameter `nextjs.appDirectory` to `true`. Because this is a parameter, you can apply it to a [single story](../../api/parameters.mdx#story-parameters), [all stories for a component](../../api/parameters.mdx#meta-parameters), or [every story in your Storybook](../../api/parameters.mdx#project-parameters). See [Next.js Navigation](#nextjs-navigation) for more details. #### `navigation` diff --git a/docs/get-started/frameworks/react-vite.mdx b/docs/get-started/frameworks/react-vite.mdx index f609c373e0dc..66325071b4b5 100644 --- a/docs/get-started/frameworks/react-vite.mdx +++ b/docs/get-started/frameworks/react-vite.mdx @@ -106,7 +106,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that Type: `Record` - 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). + 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 */} diff --git a/docs/get-started/frameworks/react-webpack5.mdx b/docs/get-started/frameworks/react-webpack5.mdx index 03d07231466e..402efef8b8f9 100644 --- a/docs/get-started/frameworks/react-webpack5.mdx +++ b/docs/get-started/frameworks/react-webpack5.mdx @@ -132,7 +132,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t Type: `Record` - 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 */} diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx index 581229158c8b..91c76a67089a 100644 --- a/docs/get-started/frameworks/svelte-vite.mdx +++ b/docs/get-started/frameworks/svelte-vite.mdx @@ -5,7 +5,7 @@ sidebar: title: Svelte & Vite --- -Storybook for Svelte & Vite is a [framework](../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/). +Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/). diff --git a/docs/get-started/frameworks/svelte-webpack5.mdx b/docs/get-started/frameworks/svelte-webpack5.mdx index 6c8b61208139..8c3f78ddc2b8 100644 --- a/docs/get-started/frameworks/svelte-webpack5.mdx +++ b/docs/get-started/frameworks/svelte-webpack5.mdx @@ -5,7 +5,7 @@ sidebar: title: Svelte & Webpack --- -Storybook for Svelte & Webpack is a [framework](../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/). +Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/). diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx index a5a854c2744b..3d017d2957b3 100644 --- a/docs/get-started/frameworks/sveltekit.mdx +++ b/docs/get-started/frameworks/sveltekit.mdx @@ -207,13 +207,13 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-goto) - A callback that will be called whenever [`goto`](https://kit.svelte.dev/docs/modules#$app-navigation-goto) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.mdx). + A callback that will be called whenever [`goto`](https://kit.svelte.dev/docs/modules#$app-navigation-goto) is called. If no function is provided, an action will be logged to the [Actions panel](../../essentials/actions.mdx). ##### `navigation.pushState` Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) - A callback that will be called whenever [`pushState`](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.mdx). + A callback that will be called whenever [`pushState`](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) is called. If no function is provided, an action will be logged to the [Actions panel](../../essentials/actions.mdx). ##### `navigation.replaceState` diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx index 89641a584dcb..f4ca66a4e054 100644 --- a/docs/get-started/frameworks/vue3-vite.mdx +++ b/docs/get-started/frameworks/vue3-vite.mdx @@ -313,7 +313,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m Type: `Record` - Configure options for the [framework's builder](../../api/main-config/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.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). #### `docgen` diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx index 8322cd1f7712..4c9570c0c1af 100644 --- a/docs/get-started/install.mdx +++ b/docs/get-started/install.mdx @@ -138,8 +138,8 @@ There are some noteworthy items here: | `"smokeTest"` | Exit Storybook after successful start.
`"smokeTest": true` | | `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window).
`"ci": true` | | `"quiet"` | Filters Storybook verbose build output.
`"quiet": true` | - | `"docs"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.md#preview-storybooks-documentation).
`"docs": true` | - | `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.md#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]`
| + | `"docs"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.mdx#preview-storybooks-documentation).
`"docs": true` | + | `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]`
| | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root.
`"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` | diff --git a/docs/migration-guide/from-older-version.mdx b/docs/migration-guide/from-older-version.mdx index fdab14212f0e..a5fb7e4cfc6c 100644 --- a/docs/migration-guide/from-older-version.mdx +++ b/docs/migration-guide/from-older-version.mdx @@ -79,7 +79,7 @@ If you are using the `storiesOf` API (which requires `storyStoreV7: false` in St #### MDX 1 to MDX 3 -Storybook 8 uses MDX 3. If you're coming from MDX 1 (used by Storybook 6), there were significant breaking changes in MDX 2. Please reference our [guidance on upgrading successfully](../../release-7-6/docs/migration-guide.md#upgrade-mdx1-to-mdx2). +Storybook 8 uses MDX 3. If you're coming from MDX 1 (used by Storybook 6), there were significant breaking changes in MDX 2. Please reference our [guidance on upgrading successfully](../../release-7-6/docs/migration-guide.mdx#upgrade-mdx1-to-mdx2). #### Missing `vite.config.js` file @@ -110,7 +110,7 @@ The following packages are **deprecated**. See the [full migration notes](https: The automatic upgrade should get your Storybook into a working state. If you encounter an error running Storybook after upgrading, here’s what to do: -1. Try running the [`doctor` command](../api/cli-options.md#doctor) to check for common issues (such as duplicate dependencies, incompatible addons, or mismatched versions) and see suggestions for fixing them. +1. Try running the [`doctor` command](../api/cli-options.mdx#doctor) to check for common issues (such as duplicate dependencies, incompatible addons, or mismatched versions) and see suggestions for fixing them. 2. If you’re running `storybook` with the `dev` command, try using the `build` command instead. Sometimes `build` errors are more legible than `dev` errors! 3. Check [the full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800), which contains an exhaustive list of noteworthy changes in Storybook 8. Many of these are already handled by automigrations when you upgrade, but not all are. It’s also possible that you’re experiencing a corner case that we’re not aware of. 4. Search [Storybook issues on GitHub](https://github.com/storybookjs/storybook/issues). If you’re seeing a problem, there’s a good chance other people are too. If so, upvote the issue, try out any workarounds described in the comments, and comment back if you have useful info to contribute. diff --git a/docs/migration-guide/index.mdx b/docs/migration-guide/index.mdx index e8887b9f0197..560d61b94cef 100644 --- a/docs/migration-guide/index.mdx +++ b/docs/migration-guide/index.mdx @@ -77,7 +77,7 @@ While we'll do our best to upgrade your project automatically, there is one issu 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). #### Missing `vite.config.js` file @@ -124,7 +124,7 @@ You’ll also need to update your stories glob in `.storybook/main.js` to includ The automatic upgrade should get your Storybook into a working state. If you encounter an error running Storybook after upgrading, here’s what to do: -1. Try running the [`doctor` command](../api/cli-options.md#doctor) to check for common issues (such as duplicate dependencies, incompatible addons, or mismatched versions) and see suggestions for fixing them. +1. Try running the [`doctor` command](../api/cli-options.mdx#doctor) to check for common issues (such as duplicate dependencies, incompatible addons, or mismatched versions) and see suggestions for fixing them. 2. If you’re running `storybook` with the `dev` command, try using the `build` command instead. Sometimes `build` errors are more legible than `dev` errors! 3. Check [the full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800), which contains an exhaustive list of noteworthy changes in Storybook 8. Many of these are already handled by automigrations when you upgrade, but not all are. It’s also possible that you’re experiencing a corner case that we’re not aware of. 4. Search [Storybook issues on GitHub](https://github.com/storybookjs/storybook/issues). If you’re seeing a problem, there’s a good chance other people are too. If so, upvote the issue, try out any workarounds described in the comments, and comment back if you have useful info to contribute. diff --git a/docs/sharing/design-integrations.mdx b/docs/sharing/design-integrations.mdx index f2ff8ef0b9f6..dcc1ff4a57d7 100644 --- a/docs/sharing/design-integrations.mdx +++ b/docs/sharing/design-integrations.mdx @@ -22,7 +22,7 @@ Storybook integrates with design tools to speed up your development workflow. Th #### Install plugin -Before we begin, you must have a Storybook [published to Chromatic](./publish-storybook.md#publish-storybook-with-chromatic). It provides the index, versions, and access control that back the plugin. +Before we begin, you must have a Storybook [published to Chromatic](./publish-storybook.mdx#publish-storybook-with-chromatic). It provides the index, versions, and access control that back the plugin. Go to [Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) to install the plugin. diff --git a/docs/sharing/embed.mdx b/docs/sharing/embed.mdx index 57658b557afd..f96b0cedf79c 100644 --- a/docs/sharing/embed.mdx +++ b/docs/sharing/embed.mdx @@ -9,7 +9,7 @@ sidebar: Embed stories to showcase your work to teammates and the developer community at large. In order to use embeds, your Storybook must be published and publicly accessible. -Storybook supports `