mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 20:51:07 +08:00
Fix links that were missing new directories
e.g. `./api/main-config-typescript.mdx` -> `./api/main-config/main-config-typescript.mdx`
This commit is contained in:
Kyle Gach
parent
09bd49af77
commit
35d30d2914
@ -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
|
||||
*/}
|
||||
|
||||
|
||||
@ -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',
|
||||
},
|
||||
};
|
||||
|
||||
@ -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.
|
||||
</Callout>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
When using the Canvas block in MDX, it references a story with the `of` prop:
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ sidebar:
|
||||
|
||||
The `ColorPalette` block allows you to document all color-related items (e.g., swatches) used throughout your project.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -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.
|
||||
</Callout>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ sidebar:
|
||||
|
||||
The `Description` block displays the description for a component, story, or meta, obtained from their respective JSDoc comments.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ sidebar:
|
||||
|
||||
The `Markdown` block allows you to import and include plain markdown in your MDX files.
|
||||
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
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.md#csf-30-auto-titles) decide where it goes.
|
||||
</Callout>
|
||||
|
||||
### `title`
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ sidebar:
|
||||
|
||||
The `Source` block is used to render a snippet of source code directly.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ sidebar:
|
||||
|
||||
The `Stories` block renders the full collection of stories in a stories file.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -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.
|
||||
</Callout>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ sidebar:
|
||||
|
||||
The `Subtitle` block can serve as a secondary heading for your docs entry.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ sidebar:
|
||||
|
||||
The `Typeset` block helps document the fonts used throughout your project.
|
||||
|
||||
|
||||
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ import { Header } from "./Header.tsx";
|
||||
|
||||
Yields:
|
||||
|
||||
|
||||
|
||||
|
||||
<Callout variant="info">
|
||||
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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
@ -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 <br /> `staticDirs: ['../public']` |
|
||||
| `staticDirs` | Sets a list of directories of [static files](./integration/images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br /> `staticDirs: ['../public']` |
|
||||
| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook <br /> `addons: ['@storybook/addon-essentials']` |
|
||||
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.mdx) <br /> `typescript: { check: false, checkOptions: {} }` |
|
||||
| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.mdx) settings <br /> `framework: { name: '@storybook/svelte-vite', options:{} }` |
|
||||
| `core` | Configures Storybook's [internal features](../api/main-config-core.mdx) <br /> `core: { disableTelemetry: true, }` |
|
||||
| `typescript` | Configures how Storybook handles [TypeScript files](./integration/typescript.mdx) <br /> `typescript: { check: false, checkOptions: {} }` |
|
||||
| `framework` | Configures Storybook based on a set of [framework-specific](./integration/frameworks.mdx) settings <br /> `framework: { name: '@storybook/svelte-vite', options:{} }` |
|
||||
| `core` | Configures Storybook's [internal features](../api/main-config/main-config-core.mdx) <br /> `core: { disableTelemetry: true, }` |
|
||||
| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.mdx)<br /> `docs: { autodocs: 'tag' }` |
|
||||
| `features` | Enables Storybook's [additional features](../api/main-config-features.mdx)<br /> See table below for a list of available features |
|
||||
| `features` | Enables Storybook's [additional features](../api/main-config/main-config-features.mdx)<br /> See table below for a list of available features |
|
||||
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.mdx) <br /> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
|
||||
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br /> `logLevel: 'debug'` |
|
||||
| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.mdx) setup <br /> `webpackFinal: async (config:any) => { return config; }` |
|
||||
| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite) <br /> `viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` |
|
||||
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br /> `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. <br /> `build: { test: {} }` |
|
||||
| `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. <br /> `build: { test: {} }` |
|
||||
|
||||
## Configure story loading
|
||||
|
||||
|
||||
@ -93,7 +93,7 @@ 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.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](./integration/images-and-assets.md#serving-static-files-via-storybook-configuration).
|
||||
|
||||
### `.storybook/preview.ts`
|
||||
|
||||
|
||||
@ -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)
|
||||
@ -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 */}
|
||||
|
||||
|
||||
@ -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 */}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.md#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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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?
|
||||
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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. */}
|
||||
|
||||
|
||||
@ -146,7 +146,7 @@ The `ArgTypes` block can be used to show a static table of [arg types](../api/ar
|
||||
Accepts parameters in the namespace `parameters.docs.canvas`.
|
||||
</Callout>
|
||||
|
||||
The `Canvas` block is a wrapper around a [`Story`](../api/doc-block-story.mdx), featuring a toolbar that allows you to interact with its content while automatically providing the required [`Source`](../api/doc-block-source.mdx) snippets.
|
||||
The `Canvas` block is a wrapper around a [`Story`](../api/doc-blocks/doc-block-story.mdx), featuring a toolbar that allows you to interact with its content while automatically providing the required [`Source`](../api/doc-blocks/doc-block-source.mdx) snippets.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -298,7 +298,7 @@ If you're still encountering issues, we recommend reaching out to the community
|
||||
|
||||
### The controls are not updating the story within the MDX documentation page
|
||||
|
||||
If you turned off inline rendering for your stories via the [`inline`](../api/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
|
||||
If you turned off inline rendering for your stories via the [`inline`](../api/doc-blocks/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
|
||||
|
||||
### The React version used is unexpected
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ sidebar:
|
||||
|
||||
One way to do this is to define the decorator for each story individually. But if you imagine a scenario where you wish to create stories for each of your components in both light and dark themes, this approach can quickly become cumbersome.
|
||||
|
||||
For a better way, with much less repetition, you can use the [decorator function's second "context" argument](../decorators.mdx#context-for-mocking) to access a story's [`parameters`](./parameters.mdx) and adjust the provided value. This way, you can define the provider once and adjust its value for each story.
|
||||
For a better way, with much less repetition, you can use the [decorator function's second "context" argument](../decorators.mdx#context-for-mocking) to access a story's [`parameters`](../parameters.mdx) and adjust the provided value. This way, you can define the provider once and adjust its value for each story.
|
||||
|
||||
For example, we can adjust the decorator from above to read from `parameters.theme` to determine which theme to provide:
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ Storybook test-runner turns all of your stories into executable tests. Powered b
|
||||
|
||||
### Setup
|
||||
|
||||
To enable snapshot testing with the test-runner, you'll need to take additional steps to set it up properly. We recommend you go through the [test-runner documentation](./test-runner.mdx) before proceeding with the rest of the required configuration to learn more about the available options and APIs.
|
||||
To enable snapshot testing with the test-runner, you'll need to take additional steps to set it up properly. We recommend you go through the [test-runner documentation](../test-runner.mdx) before proceeding with the rest of the required configuration to learn more about the available options and APIs.
|
||||
|
||||
Add a new [configuration file](../test-runner.mdx#test-hook-api) inside your Storybook directory with the following inside:
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user