mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 21:21:05 +08:00
Get started links
This commit is contained in:
Charles de Dreuille
parent
4b80aca042
commit
845077af85
@ -33,11 +33,11 @@ Storybook ships with time-saving tools built-in. The toolbar contains tools that
|
||||
|
||||
<Video src="../_assets/get-started/toolbar-walkthrough-optimized.mp4" />
|
||||
|
||||
The [“Docs”](../writing-docs/index.md) page displays auto-generated documentation for components (inferred from the source code). Usage documentation is helpful when sharing reusable components with your team, for example, in an application.
|
||||
The [“Docs”](../writing-docs/index.mdx) page displays auto-generated documentation for components (inferred from the source code). Usage documentation is helpful when sharing reusable components with your team, for example, in an application.
|
||||
|
||||
|
||||
|
||||
The toolbar is customizable. You can use [globals](../essentials/toolbars-and-globals.md) to quickly toggle themes and languages. Or install Storybook toolbar [addons](../configure/storybook-addons.md) from the community to enable advanced workflows.
|
||||
The toolbar is customizable. You can use [globals](../essentials/toolbars-and-globals.mdx) to quickly toggle themes and languages. Or install Storybook toolbar [addons](../configure/user-interface/storybook-addons.mdx) from the community to enable advanced workflows.
|
||||
|
||||
## Addons
|
||||
|
||||
@ -47,12 +47,12 @@ Addons are plugins that extend Storybook's core functionality. You can find them
|
||||
|
||||
* **Controls** allows you to interact with a component’s args (inputs) dynamically. Experiment with alternate configurations of the component to discover edge cases.
|
||||
* **Actions** help you verify interactions produce the correct outputs via callbacks. For instance, if you view the “Logged In” story of the `Header` component, we can verify that clicking the “Log out” button triggers the `onLogout` callback, which would be provided by the component that made use of the Header.
|
||||
* **Interactions** provides a helpful user interface for debugging [interaction tests](../writing-tests/interaction-testing.md) with the `play` function.
|
||||
* **Interactions** provides a helpful user interface for debugging [interaction tests](../writing-tests/interaction-testing.mdx) with the `play` function.
|
||||
* **Visual Tests** lets you pinpoint UI bugs in your local development environment by providing instant feedback directly in Storybook.
|
||||
|
||||
<Video src="../_assets/get-started/addons-walkthrough-optimized.mp4" />
|
||||
|
||||
Storybook is extensible. Our rich ecosystem of addons helps you test, document, and optimize your stories. You can also create an addon to satisfy your workflow requirements. Read more in the [addons section](../addons/index.md).
|
||||
Storybook is extensible. Our rich ecosystem of addons helps you test, document, and optimize your stories. You can also create an addon to satisfy your workflow requirements. Read more in the [addons section](../addons/index.mdx).
|
||||
|
||||
In the next chapter, we'll get your components rendering in Storybook so you can use it to supercharge component development.
|
||||
|
||||
@ -68,6 +68,6 @@ Here's what the workflow looks like:
|
||||
* 👀 Review its stories to pick a variant that suits your needs
|
||||
* 📝 Copy/paste the story definition into your app code and wire it up to data
|
||||
|
||||
You can access the story definition from the stories file or make it available in your published Storybook using the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource/) or the [Docs addon](../api/doc-block-source).
|
||||
You can access the story definition from the stories file or make it available in your published Storybook using the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource/) or the [Docs addon](../api/doc-blocks/doc-block-source.mdx).
|
||||
|
||||
|
||||
|
||||
@ -10,6 +10,6 @@ Congratulations! You learned the basics. Storybook is the most popular tool for
|
||||
|
||||
If you’d like to learn workflows for building app UIs with Storybook, check out our in-depth guides over at the [tutorials](https://storybook.js.org/tutorials/) page. Continue reading for detailed information on how to use Storybook APIs.
|
||||
|
||||
* [How to write stories](../writing-stories/index.md)
|
||||
* [How to document components and design systems](../writing-docs/index.md)
|
||||
* [How to write stories](../writing-stories/index.mdx)
|
||||
* [How to document components and design systems](../writing-docs/index.mdx)
|
||||
* [View example Storybooks from leading companies](https://storybook.js.org/showcase)
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Angular
|
||||
---
|
||||
|
||||
Storybook for Angular is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Angular](https://angular.io/) applications. It includes:
|
||||
Storybook for Angular is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Angular](https://angular.io/) applications. It includes:
|
||||
|
||||
* 🧱 Uses Angular builders
|
||||
* 🎛️ Compodoc integration
|
||||
@ -38,7 +38,7 @@ Storybook for Angular is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -131,7 +131,7 @@ Storybook for Angular is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
## Setup Compodoc
|
||||
|
||||
You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../writing-docs/autodocs.md) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are the elements that you can interact with in Storybook, such as [controls](../essentials/controls.md).
|
||||
You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are the elements that you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).
|
||||
|
||||
### Automatic setup
|
||||
|
||||
@ -208,7 +208,7 @@ Storybook for Angular is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
## `applicationConfig` decorator
|
||||
|
||||
If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can apply the `applicationConfig` [decorator](../writing-stories/decorators.md) to all stories for that component. This will provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which is used to bootstrap the component in Storybook.
|
||||
If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which is used to bootstrap the component in Storybook.
|
||||
|
||||
```ts
|
||||
// ChipsModule.stories.ts
|
||||
@ -252,7 +252,7 @@ Storybook for Angular is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
## `moduleMetadata` decorator
|
||||
|
||||
If your component has dependencies on other Angular directives and modules, these can be supplied using the `moduleMetadata` [decorator](../writing-stories/decorators.md) either for all stories of a component or for individual stories.
|
||||
If your component has dependencies on other Angular directives and modules, these can be supplied using the `moduleMetadata` [decorator](../../writing-stories/decorators.mdx) either for all stories of a component or for individual stories.
|
||||
|
||||
```ts
|
||||
// YourComponent.stories.ts
|
||||
@ -411,7 +411,7 @@ Storybook for Angular is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For Angular, , available options can be found in the [Webpack builder docs](../builders/webpack.md).
|
||||
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For Angular, , available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
|
||||
|
||||
{/* End supported renderers */}
|
||||
</If>
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Next.js
|
||||
---
|
||||
|
||||
Storybook for Next.js is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Next.js](https://nextjs.org/) applications. It includes:
|
||||
Storybook for Next.js is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Next.js](https://nextjs.org/) applications. It includes:
|
||||
|
||||
* 🔀 Routing
|
||||
* 🖼 Image optimization
|
||||
@ -40,7 +40,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -84,7 +84,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
## Run the Setup Wizard
|
||||
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../essentials/controls).
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx).
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
const localRubikStorm = localFont({ src: './fonts/RubikStorm-Regular.ttf' });
|
||||
```
|
||||
|
||||
You have to tell Storybook where the `fonts` directory is located, via the [`staticDirs` configuration](../api/main-config-static-dirs.md#with-configuration-objects). The `from` value is relative to the `.storybook` directory. The `to` value is relative to the execution context of Storybook. Very likely it is the root of your project.
|
||||
You have to tell Storybook where the `fonts` directory is located, via the [`staticDirs` configuration](../../api/main-config/main-config-static-dirs.mdx#with-configuration-objects). The `from` value is relative to the `.storybook` directory. The `to` value is relative to the execution context of Storybook. Very likely it is the root of your project.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -228,7 +228,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
## Next.js routing
|
||||
|
||||
[Next.js's router](https://nextjs.org/docs/pages/building-your-application/routing) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions panel if you have the [Storybook actions addon](../essentials/actions.md).
|
||||
[Next.js's router](https://nextjs.org/docs/pages/building-your-application/routing) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions panel if you have the [Storybook actions addon](../../essentials/actions.mdx).
|
||||
|
||||
<Callout>
|
||||
You should only use `next/router` in the `pages` directory. In the `app` directory, it is necessary to use `next/navigation`.
|
||||
@ -236,7 +236,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
### Overriding defaults
|
||||
|
||||
Per-story overrides can be done by adding a `nextjs.router` property onto the story [parameters](../writing-stories/parameters.md). The framework will shallowly merge whatever you put here into the router.
|
||||
Per-story overrides can be done by adding a `nextjs.router` property onto the story [parameters](../../writing-stories/parameters.mdx). The framework will shallowly merge whatever you put here into the router.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -245,12 +245,12 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
<Callout>
|
||||
These overrides can also be applied to [all stories for a component](../api/parameters.md#meta-parameters) or [all stories in your project](../api/parameters.md#project-parameters). Standard [parameter inheritance](../api/parameters.md#parameter-inheritance) rules apply.
|
||||
These overrides can also be applied to [all stories for a component](../../api/parameters.mdx#meta-parameters) or [all stories in your project](../../api/parameters.mdx#project-parameters). Standard [parameter inheritance](../../api/parameters.mdx#parameter-inheritance) rules apply.
|
||||
</Callout>
|
||||
|
||||
### Default router
|
||||
|
||||
The default values on the stubbed router are as follows (see [globals](../essentials/toolbars-and-globals.md#globals) for more details on how globals work).
|
||||
The default values on the stubbed router are as follows (see [globals](../../essentials/toolbars-and-globals.mdx#globals) for more details on how globals work).
|
||||
|
||||
```ts
|
||||
// Default router
|
||||
@ -271,7 +271,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
Additionally, the [`router` object](https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object) contains all of the original methods (such as `push()`, `replace()`, etc.) as mock functions that can be manipulated and asserted on using [regular mock APIs](https://vitest.dev/api/mock.html).
|
||||
|
||||
To override these defaults, you can use [parameters](../writing-stories/parameters.md) and [`beforeEach`](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up):
|
||||
To override these defaults, you can use [parameters](../../writing-stories/parameters.mdx) and [`beforeEach`](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#setting-up-and-cleaning-up):
|
||||
|
||||
```ts
|
||||
// .storybook/preview.ts
|
||||
@ -313,7 +313,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering) file to apply it to all stories.
|
||||
If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [`.storybook/preview.js|ts`](../../configure/index.mdx#configure-story-rendering) file to apply it to all stories.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -323,7 +323,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
### Overriding defaults
|
||||
|
||||
Per-story overrides can be done by adding a `nextjs.navigation` property onto the story [parameters](../writing-stories/parameters.md). The framework will shallowly merge whatever you put here into the router.
|
||||
Per-story overrides can be done by adding a `nextjs.navigation` property onto the story [parameters](../../writing-stories/parameters.mdx). The framework will shallowly merge whatever you put here into the router.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -332,7 +332,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
<Callout>
|
||||
These overrides can also be applied to [all stories for a component](../api/parameters.md#meta-parameters) or [all stories in your project](../api/parameters.md#project-parameters). Standard [parameter inheritance](../api/parameters.md#parameter-inheritance) rules apply.
|
||||
These overrides can also be applied to [all stories for a component](../../api/parameters.mdx#meta-parameters) or [all stories in your project](../../api/parameters.mdx#project-parameters). Standard [parameter inheritance](../../api/parameters.mdx#parameter-inheritance) rules apply.
|
||||
</Callout>
|
||||
|
||||
### `useSelectedLayoutSegment`, `useSelectedLayoutSegments`, and `useParams` hooks
|
||||
@ -382,7 +382,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
```
|
||||
|
||||
<Callout>
|
||||
These overrides can also be applied to [a single story](../api/parameters.md#story-parameters) or [all stories in your project](../api/parameters.md#project-parameters). Standard [parameter inheritance](../api/parameters.md#parameter-inheritance) rules apply.
|
||||
These overrides can also be applied to [a single story](../../api/parameters.mdx#story-parameters) or [all stories in your project](../../api/parameters.mdx#project-parameters). Standard [parameter inheritance](../../api/parameters.mdx#parameter-inheritance) rules apply.
|
||||
</Callout>
|
||||
|
||||
The default value of `nextjs.navigation.segments` is `[]` if not set.
|
||||
@ -401,7 +401,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
Additionally, the [`router` object](https://nextjs.org/docs/app/api-reference/functions/use-router#userouter) contains all of the original methods (such as `push()`, `replace()`, etc.) as mock functions that can be manipulated and asserted on using [regular mock APIs](https://vitest.dev/api/mock.html).
|
||||
|
||||
To override these defaults, you can use [parameters](../writing-stories/parameters.md) and [`beforeEach`](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up):
|
||||
To override these defaults, you can use [parameters](../../writing-stories/parameters.mdx) and [`beforeEach`](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#setting-up-and-cleaning-up):
|
||||
|
||||
```ts
|
||||
// .storybook/preview.ts
|
||||
@ -630,7 +630,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
## Mocking modules
|
||||
|
||||
Components often depend on modules that are imported into the component file. These can be from external packages or internal to your project. When rendering those components in Storybook or testing them, you may want to [mock those modules](../writing-stories/mocking-modules.md) to control and assert their behavior.
|
||||
Components often depend on modules that are imported into the component file. These can be from external packages or internal to your project. When rendering those components in Storybook or testing them, you may want to [mock those modules](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx) to control and assert their behavior.
|
||||
|
||||
### Built-in mocked modules
|
||||
|
||||
@ -645,7 +645,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
How you mock other modules in Storybook depends on how you import the module into your component.
|
||||
|
||||
With either approach, the first step is to [create a mock file](../writing-stories/mocking-modules.md#mock-files). Here's an example of a mock file for a module named `session`:
|
||||
With either approach, the first step is to [create a mock file](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#mock-files). Here's an example of a mock file for a module named `session`:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -655,7 +655,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
#### With subpath imports
|
||||
|
||||
If you're using [subpath imports](#subpath-imports), you can adjust your configuration to apply [conditions](../writing-stories/mocking-modules.md#subpath-imports) so that the mocked module is used inside Storybook. The example below configures subpath imports for four internal modules, which are then mocked in Storybook:
|
||||
If you're using [subpath imports](#subpath-imports), you can adjust your configuration to apply [conditions](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#subpath-imports) so that the mocked module is used inside Storybook. The example below configures subpath imports for four internal modules, which are then mocked in Storybook:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -776,7 +776,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
{/* ## Portable stories
|
||||
|
||||
You can test your stories in a Jest environment by using the [portable stories](../api/portable-stories-jest.md) API.
|
||||
You can test your stories in a Jest environment by using the [portable stories](../api/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. */}
|
||||
|
||||
@ -795,7 +795,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
### Stories for pages/components which fetch data
|
||||
|
||||
Next.js pages can fetch data directly within server components in the `app` directory, which often include module imports that only run in a node environment. This does not (currently) work within Storybook, because if you import from a Next.js page file containing those node module imports in your stories, your Storybook's Webpack will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that pure component in your stories. Or, if that's not feasible for some reason, you can [polyfill those modules](https://webpack.js.org/configuration/node/) in your Storybook's [`webpackFinal` configuration](../builders/webpack.md#extending-storybooks-webpack-config).
|
||||
Next.js pages can fetch data directly within server components in the `app` directory, which often include module imports that only run in a node environment. This does not (currently) work within Storybook, because if you import from a Next.js page file containing those node module imports in your stories, your Storybook's Webpack will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that pure component in your stories. Or, if that's not feasible for some reason, you can [polyfill those modules](https://webpack.js.org/configuration/node/) in your Storybook's [`webpackFinal` configuration](../../builders/webpack.mdx#extending-storybooks-webpack-config).
|
||||
|
||||
**Before**
|
||||
|
||||
@ -919,7 +919,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
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.md).
|
||||
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.md) that makes it
|
||||
|
||||
Type: `typeof import('next/navigation') & getRouter: () => ReturnType<typeof import('next/navigation')['useRouter']>`
|
||||
|
||||
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.md).
|
||||
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.md) that makes it
|
||||
|
||||
Type: `typeof import('next/router') & getRouter: () => ReturnType<typeof import('next/router')['useRouter']>`
|
||||
|
||||
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.md).
|
||||
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.md) that makes it
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
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.md).
|
||||
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).
|
||||
|
||||
#### `image`
|
||||
|
||||
@ -1017,7 +1017,7 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
|
||||
|
||||
### Parameters
|
||||
|
||||
This framework contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `nextjs` namespace:
|
||||
This framework contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `nextjs` namespace:
|
||||
|
||||
#### `appDirectory`
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: React & Vite
|
||||
---
|
||||
|
||||
Storybook for React & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Vite](https://vitejs.dev/). It includes:
|
||||
Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Vite](https://vitejs.dev/). It includes:
|
||||
|
||||
* 🏎️ Pre-bundled for performance
|
||||
* 🪄 Zero config
|
||||
@ -38,7 +38,7 @@ Storybook for React & Vite is a [framework](../contribute/framework.md) that mak
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -74,7 +74,7 @@ Storybook for React & Vite is a [framework](../contribute/framework.md) that mak
|
||||
|
||||
## Run the Setup Wizard
|
||||
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../essentials/controls).
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx).
|
||||
|
||||
|
||||
|
||||
@ -106,7 +106,7 @@ Storybook for React & Vite is a [framework](../contribute/framework.md) that mak
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
|
||||
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 */}
|
||||
</If>
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: React & Webpack
|
||||
---
|
||||
|
||||
Storybook for React & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/).
|
||||
Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/).
|
||||
|
||||
<If notRenderer={'react'}>
|
||||
<Callout variant="info">
|
||||
@ -34,7 +34,7 @@ Storybook for React & Webpack is a [framework](../contribute/framework.md) that
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -80,7 +80,7 @@ Storybook for React & Webpack is a [framework](../contribute/framework.md) that
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support).
|
||||
More details can be found in the [Webpack builder docs](../../builders/webpack.mdx#compiler-support).
|
||||
|
||||
Finally, update your `.storybook/main.js|ts` to change the framework property:
|
||||
|
||||
@ -92,7 +92,7 @@ Storybook for React & Webpack is a [framework](../contribute/framework.md) that
|
||||
|
||||
## Run the Setup Wizard
|
||||
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../essentials/controls).
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx).
|
||||
|
||||
|
||||
|
||||
@ -132,7 +132,7 @@ Storybook for React & Webpack is a [framework](../contribute/framework.md) that
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md).
|
||||
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 */}
|
||||
</If>
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Svelte & Vite
|
||||
---
|
||||
|
||||
Storybook for Svelte & Vite is a [framework](../contribute/framework.md) 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/).
|
||||
|
||||
<If notRenderer={'svelte'}>
|
||||
<Callout variant="info">
|
||||
@ -34,7 +34,7 @@ Storybook for Svelte & Vite is a [framework](../contribute/framework.md) that ma
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -111,7 +111,7 @@ Storybook for Svelte & Vite is a [framework](../contribute/framework.md) that ma
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
|
||||
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 */}
|
||||
</If>
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Svelte & Webpack
|
||||
---
|
||||
|
||||
Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) 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/).
|
||||
|
||||
<If notRenderer={'svelte'}>
|
||||
<Callout variant="info">
|
||||
@ -34,7 +34,7 @@ Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) that
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -76,7 +76,7 @@ Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) that
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support).
|
||||
More details can be found in the [Webpack builder docs](../../builders/webpack.mdx#compiler-support).
|
||||
|
||||
Finally, update your `.storybook/main.js|ts` to change the framework property:
|
||||
|
||||
@ -129,7 +129,7 @@ Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) that
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md).
|
||||
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 */}
|
||||
</If>
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: SvelteKit
|
||||
---
|
||||
|
||||
Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [SvelteKit](https://kit.svelte.dev/) applications. It includes:
|
||||
Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [SvelteKit](https://kit.svelte.dev/) applications. It includes:
|
||||
|
||||
* 🪄 Zero config
|
||||
* 🧩 Easily mock many Kit modules
|
||||
@ -38,7 +38,7 @@ Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -130,7 +130,7 @@ Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
### Mocking links
|
||||
|
||||
The default link-handling behavior (e.g. when clicking an `<a href="..." />` element) is to log an action to the [Actions panel](../essentials/actions.md).
|
||||
The default link-handling behavior (e.g. when clicking an `<a href="..." />` element) is to log an action to the [Actions panel](../../essentials/actions.mdx).
|
||||
|
||||
You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values define your mock. For example:
|
||||
|
||||
@ -177,7 +177,7 @@ Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
### Parameters
|
||||
|
||||
This framework contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `sveltekit_experimental` namespace:
|
||||
This framework contributes the following [parameters](../../writing-stories/parameters.mdx) to Storybook, under the `sveltekit_experimental` namespace:
|
||||
|
||||
#### `forms`
|
||||
|
||||
@ -195,7 +195,7 @@ Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
Type: `Record<[path: string], (to: string, event: MouseEvent) => void | { callback: (to: string, event: MouseEvent) => void, asRegex?: boolean }>`
|
||||
|
||||
If you have an `<a />` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based if the `asRegex` property is `true`) the corresponding `callback` will be called. If no matching `hrefs` are defined, an action will be logged to the [Actions panel](../essentials/actions.md). See [Mocking links](#mocking-links) for an example.
|
||||
If you have an `<a />` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based if the `asRegex` property is `true`) the corresponding `callback` will be called. If no matching `hrefs` are defined, an action will be logged to the [Actions panel](../../essentials/actions.mdx). See [Mocking links](#mocking-links) for an example.
|
||||
|
||||
#### `navigation`
|
||||
|
||||
@ -207,31 +207,31 @@ Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
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.md).
|
||||
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.md).
|
||||
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`
|
||||
|
||||
Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate)
|
||||
|
||||
A callback that will be called whenever [`replaceState`](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md).
|
||||
A callback that will be called whenever [`replaceState`](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) is called. If no function is provided, an action will be logged to the [Actions panel](../../essentials/actions.mdx).
|
||||
|
||||
##### `navigation.invalidate`
|
||||
|
||||
Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate)
|
||||
|
||||
A callback that will be called whenever [`invalidate`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md).
|
||||
A callback that will be called whenever [`invalidate`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) is called. If no function is provided, an action will be logged to the [Actions panel](../../essentials/actions.mdx).
|
||||
|
||||
##### `navigation.invalidateAll`
|
||||
|
||||
Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall)
|
||||
|
||||
A callback that will be called whenever [`invalidateAll`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md).
|
||||
A callback that will be called whenever [`invalidateAll`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) is called. If no function is provided, an action will be logged to the [Actions panel](../../essentials/actions.mdx).
|
||||
|
||||
##### `navigation.afterNavigate`
|
||||
|
||||
@ -288,7 +288,7 @@ Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For Sveltekit, available options can be found in the [Vite builder docs](../builders/vite.md).
|
||||
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For Sveltekit, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Vue & Vite
|
||||
---
|
||||
|
||||
Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Vite](https://vitejs.dev/). It includes:
|
||||
Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Vite](https://vitejs.dev/). It includes:
|
||||
|
||||
* 🏎️ Pre-bundled for performance
|
||||
* 🪄 Zero config
|
||||
@ -39,7 +39,7 @@ Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -101,7 +101,7 @@ Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes
|
||||
`vue-component-meta` is only available in Storybook ≥ 8. It is currently opt-in, but will become the default in a future version of Storybook.
|
||||
</Callout>
|
||||
|
||||
[`vue-component-meta`](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) is a tool maintained by the Vue team that extracts metadata from Vue components. Storybook can use it to generate the [controls](../essentials/controls.md) for your stories and documentation. It's a more full-featured alternative to `vue-docgen-api` and is recommended for most projects.
|
||||
[`vue-component-meta`](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) is a tool maintained by the Vue team that extracts metadata from Vue components. Storybook can use it to generate the [controls](../../essentials/controls.mdx) for your stories and documentation. It's a more full-featured alternative to `vue-docgen-api` and is recommended for most projects.
|
||||
|
||||
If you want to use `vue-component-meta`, you can configure it in your `.storybook/main.js|ts` file:
|
||||
|
||||
@ -248,7 +248,7 @@ Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
### Override the default configuration
|
||||
|
||||
If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g. `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../configure/index.md) configuration file and add the following:
|
||||
If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g. `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../../configure/index.mdx) configuration file and add the following:
|
||||
|
||||
```ts
|
||||
// .storybook/main.ts
|
||||
@ -313,7 +313,7 @@ Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
|
||||
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).
|
||||
|
||||
#### `docgen`
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Vue & Webpack
|
||||
---
|
||||
|
||||
Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/).
|
||||
Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/).
|
||||
|
||||
<If notRenderer={'vue'}>
|
||||
<Callout variant="info">
|
||||
@ -34,7 +34,7 @@ Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that ma
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -76,7 +76,7 @@ Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that ma
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support).
|
||||
More details can be found in the [Webpack builder docs](../../builders/webpack.mdx#compiler-support).
|
||||
|
||||
Finally, update your `.storybook/main.js|ts` to change the framework property:
|
||||
|
||||
@ -145,7 +145,7 @@ Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that ma
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md).
|
||||
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 */}
|
||||
</If>
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Web components & Vite
|
||||
---
|
||||
|
||||
Storybook for Web components & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
|
||||
Storybook for Web components & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
|
||||
|
||||
<If notRenderer={'web-components'}>
|
||||
<Callout variant="info">
|
||||
@ -33,7 +33,7 @@ Storybook for Web components & Vite is a [framework](../contribute/framework.md)
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -94,7 +94,7 @@ Storybook for Web components & Vite is a [framework](../contribute/framework.md)
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
|
||||
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 */}
|
||||
</If>
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar:
|
||||
title: Web components & Webpack
|
||||
---
|
||||
|
||||
Storybook for Web components & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/).
|
||||
Storybook for Web components & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/).
|
||||
|
||||
<If notRenderer={'web-components'}>
|
||||
<Callout variant="info">
|
||||
@ -33,7 +33,7 @@ Storybook for Web components & Webpack is a [framework](../contribute/framework.
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](./install.md)
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
@ -75,7 +75,7 @@ Storybook for Web components & Webpack is a [framework](../contribute/framework.
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support).
|
||||
More details can be found in the [Webpack builder docs](../../builders/webpack.mdx#compiler-support).
|
||||
|
||||
Finally, update your `.storybook/main.js|ts` to change the framework property:
|
||||
|
||||
@ -155,7 +155,7 @@ Storybook for Web components & Webpack is a [framework](../contribute/framework.
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md).
|
||||
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).
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
@ -31,14 +31,14 @@ The command above will make the following changes to your local environment:
|
||||
* 🛠 Setup the necessary scripts to run and build Storybook.
|
||||
* 🛠 Add the default Storybook configuration.
|
||||
* 📝 Add some boilerplate stories to get you started.
|
||||
* 📡 Set up telemetry to help us improve Storybook. Read more about it [here](../configure/telemetry.md).
|
||||
* 📡 Set up telemetry to help us improve Storybook. Read more about it [here](../configure/telemetry.mdx).
|
||||
|
||||
<YouTubeCallout id="CtfU1UnizHU" title="New Storybook" style={{ marginTop: '1em' }} />
|
||||
|
||||
<IfRenderer renderer="react">
|
||||
## Run the Setup Wizard
|
||||
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../essentials/controls).
|
||||
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../essentials/controls.mdx).
|
||||
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@ Storybook comes with a built-in development server featuring everything you need
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
<Callout variant="info">
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.mdx#how-to-opt-out) if you'd not like to share any information.
|
||||
</Callout>
|
||||
|
||||
|
||||
|
||||
@ -35,11 +35,11 @@ You may have to configure your CSS tooling for Storybook’s rendering environme
|
||||
* [Less](https://storybook.js.org/recipes/less/)
|
||||
* [Vanilla-extract](https://storybook.js.org/recipes/@vanilla-extract/css/)
|
||||
|
||||
Don't see the tool that you're looking for? Check out the [styling and css](../configure/styling-and-css.md) page for more details.
|
||||
Don't see the tool that you're looking for? Check out the [styling and css](../configure/styling-and-css.mdx) page for more details.
|
||||
|
||||
## Configure Storybook for your stack
|
||||
|
||||
Storybook comes with a permissive [default configuration](../configure/index.md). It attempts to customize itself to fit your setup. But it’s not foolproof.
|
||||
Storybook comes with a permissive [default configuration](../configure/index.mdx). It attempts to customize itself to fit your setup. But it’s not foolproof.
|
||||
|
||||
Your project may have additional requirements before components can be rendered in isolation. This warrants customizing configuration further. There are three broad categories of configuration you might need.
|
||||
|
||||
@ -48,9 +48,9 @@ Your project may have additional requirements before components can be rendered
|
||||
|
||||
If you see errors on the CLI when you run the `yarn storybook` command, you likely need to make changes to Storybook’s build configuration. Here are some things to try:
|
||||
|
||||
* [Presets](../addons/addon-types.md) bundle common configurations for various technologies into Storybook. In particular, presets exist for Create React App and Ant Design.
|
||||
* Specify a custom [Babel configuration](../configure/compilers.md#babel) for Storybook. Storybook automatically tries to use your project’s config if it can.
|
||||
* Adjust the [Webpack configuration](../builders/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
|
||||
* [Presets](../addons/addon-types.mdx) bundle common configurations for various technologies into Storybook. In particular, presets exist for Create React App and Ant Design.
|
||||
* Specify a custom [Babel configuration](../configure/integration/compilers.mdx#babel) for Storybook. Storybook automatically tries to use your project’s config if it can.
|
||||
* Adjust the [Webpack configuration](../builders/webpack.mdx) that Storybook uses. Try patching in your own configuration if needed.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
@ -66,7 +66,7 @@ Your project may have additional requirements before components can be rendered
|
||||
|
||||
A common frontend pattern is for components to assume that they render in a specific “context” with parent components higher up the rendering hierarchy (for instance, theme providers).
|
||||
|
||||
Use [decorators](../writing-stories/decorators.md) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
|
||||
Use [decorators](../writing-stories/decorators.mdx) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -77,4 +77,4 @@ Your project may have additional requirements before components can be rendered
|
||||
|
||||
## Load assets and resources
|
||||
|
||||
We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories. Read our [documentation](../configure/images-and-assets.md) to learn how to hosting static files with Storybook.
|
||||
We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories. Read our [documentation](../configure/integration/images-and-assets.mdx) to learn how to hosting static files with Storybook.
|
||||
|
||||
@ -9,7 +9,7 @@ A story captures the rendered state of a UI component. Developers write multiple
|
||||
|
||||
When you installed Storybook, the CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.
|
||||
|
||||
Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.md) (CSF), an ES6 modules-based standard for writing component examples.
|
||||
Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples.
|
||||
|
||||
Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
|
||||
|
||||
@ -21,9 +21,9 @@ Let’s start with the `Button` component. A story is an object that describes h
|
||||
|
||||
|
||||
|
||||
View the rendered `Button` by clicking on it in the Storybook sidebar. Note how the values specified in [`args`](../writing-stories/args.md) are used to render the component and match those represented in the [Controls](../essentials/controls.md) tab. Using `args` in your stories has additional benefits:
|
||||
View the rendered `Button` by clicking on it in the Storybook sidebar. Note how the values specified in [`args`](../writing-stories/args.mdx) are used to render the component and match those represented in the [Controls](../essentials/controls.mdx) tab. Using `args` in your stories has additional benefits:
|
||||
|
||||
* `Button`'s callbacks are logged into the [Actions](../essentials/actions.md) tab. Click to try it.
|
||||
* `Button`'s callbacks are logged into the [Actions](../essentials/actions.mdx) tab. Click to try it.
|
||||
* `Button`'s arguments are dynamically editable in the Controls tab. Adjust the controls.
|
||||
|
||||
## Working with stories
|
||||
@ -46,7 +46,7 @@ Storybook makes it easy to work on one component in one state (aka a story) at a
|
||||
|
||||
<Video src="../_assets/get-started/new-component-story-in-code-optimized.mp4" />
|
||||
|
||||
If you're working on a component that already has other stories, you can use the [Controls addon](../essentials/controls.md) to adjust the value of a control and then save those changes as a new story.
|
||||
If you're working on a component that already has other stories, you can use the [Controls addon](../essentials/controls.mdx) to adjust the value of a control and then save those changes as a new story.
|
||||
|
||||
<Video src="../_assets/get-started/new-story-from-controls-optimized.mp4" />
|
||||
|
||||
@ -56,7 +56,7 @@ Or, if you prefer, edit the story file's code to add a new named export for your
|
||||
|
||||
### Edit a story
|
||||
|
||||
Using the [Controls addon](../essentials/controls.md), update a control's value for a story. You can then save the changes to the story and the story file's code will be updated for you.
|
||||
Using the [Controls addon](../essentials/controls.mdx), update a control's value for a story. You can then save the changes to the story and the story file's code will be updated for you.
|
||||
|
||||
<Video src="../_assets/get-started/edit-story-from-controls-optimized.mp4" />
|
||||
|
||||
@ -68,6 +68,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
|
||||
|
||||
<Video src="../_assets/get-started/example-button-browse-stories-optimized.mp4" />
|
||||
|
||||
Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/index.md) for you.
|
||||
Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/index.mdx) for you.
|
||||
|
||||
Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.
|
||||
|
||||
@ -48,7 +48,7 @@ Storybook is an interactive directory of your UI components and their stories. I
|
||||
<details>
|
||||
<summary>Where does Storybook fit into my project?</summary>
|
||||
|
||||
Storybook is packaged as a small, development-only, [workshop](https://bradfrost.com/blog/post/a-frontend-workshop-environment/) that lives alongside your app. Install it by [running a command](../get-started/install.md).
|
||||
Storybook is packaged as a small, development-only, [workshop](https://bradfrost.com/blog/post/a-frontend-workshop-environment/) that lives alongside your app. Install it by [running a command](../get-started/install.mdx).
|
||||
|
||||
During development, run it in a separate node process. If you’re working on UI in isolation, the only thing you’ll need to run is Storybook.
|
||||
</details>
|
||||
@ -58,7 +58,7 @@ Storybook is an interactive directory of your UI components and their stories. I
|
||||
|
||||
Storybook aims to integrate with industry-standard tools and platforms to simplify setup. Thanks to our ambitious developer community, we’ve made significant progress. There are hundreds of [addons](https://storybook.js.org/addons/) and tutorials that walk through how to set up Storybook in all types of projects.
|
||||
|
||||
If you’re using a niche framework or a recently launched tool, we might not have an integration for it yet. Consider creating a [proof of concept](../addons/writing-addons.md) yourself first to lead the way for the rest of the community.
|
||||
If you’re using a niche framework or a recently launched tool, we might not have an integration for it yet. Consider creating a [proof of concept](../addons/writing-addons.mdx) yourself first to lead the way for the rest of the community.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
@ -80,19 +80,19 @@ When you write stories for components, you get a bunch of additional benefits fo
|
||||
|
||||
**📝 Develop UIs that are more durable**
|
||||
|
||||
Isolate components and pages and track their use cases as [stories](../writing-stories/index.md). Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device features, etc.
|
||||
Isolate components and pages and track their use cases as [stories](../writing-stories/index.mdx). Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device features, etc.
|
||||
|
||||
**✅ Test UIs with less effort and no flakes**
|
||||
|
||||
Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated [Accessibility](../writing-tests/accessibility-testing.md), [Interaction](../writing-tests/interaction-testing.md), and [Visual](../writing-tests/visual-testing.md) testing. Or use stories as test cases by importing them into other JavaScript testing tools.
|
||||
Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated [Accessibility](../writing-tests/accessibility-testing.mdx), [Interaction](../writing-tests/interaction-testing.mdx), and [Visual](../writing-tests/visual-testing.mdx) testing. Or use stories as test cases by importing them into other JavaScript testing tools.
|
||||
|
||||
**📚 Document UI for your team to reuse**
|
||||
|
||||
Storybook is the single source of truth for your UI. Stories index all your components and their various states, making it easy for your team to find and reuse existing UI patterns. Storybook also auto-generates [documentation](../writing-docs/index.md) from those stories.
|
||||
Storybook is the single source of truth for your UI. Stories index all your components and their various states, making it easy for your team to find and reuse existing UI patterns. Storybook also auto-generates [documentation](../writing-docs/index.mdx) from those stories.
|
||||
|
||||
**📤 Share how the UI actually works**
|
||||
|
||||
Stories show how UIs actually work, not just a picture of how they're supposed to work. That keeps everyone aligned on what's currently in production. [Publish Storybook](../sharing/publish-storybook.md) to get sign-off from teammates. Or [embed](../sharing/embed.md) them in wikis, Markdown, and Figma to streamline collaboration.
|
||||
Stories show how UIs actually work, not just a picture of how they're supposed to work. That keeps everyone aligned on what's currently in production. [Publish Storybook](../sharing/publish-storybook.mdx) to get sign-off from teammates. Or [embed](../sharing/embed.mdx) them in wikis, Markdown, and Figma to streamline collaboration.
|
||||
|
||||
**🚦Automate UI workflows**
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user