mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-20 05:02:37 +08:00
Docs: Update component story format naming
This commit is contained in:
Michael Shilman
parent
83ac3d95e5
commit
d7410b0268
@ -40,9 +40,9 @@ module.exports = {
|
||||
'/configurations/standalone-options/',
|
||||
],
|
||||
formats: [
|
||||
'/formats/module-story-format/',
|
||||
'/formats/storiesof-story-format/',
|
||||
'/formats/mdx-story-format/',
|
||||
'/formats/component-story-format/',
|
||||
'/formats/storiesof-api/',
|
||||
'/formats/mdx-syntax/',
|
||||
],
|
||||
testing: [
|
||||
'/testing/react-ui-testing/',
|
||||
|
||||
@ -38,14 +38,14 @@ This is what you'll see in Storybook:
|
||||
|
||||
The named exports define the Button's stories, and the `default` export defines metadata that applies to the group. In this case, the `component` is `Button`. The `title` determines the title of the group in Storybook's left-hand navigation panel and should be unique, i.e. not re-used across files. In this case it's located at the top level, but typically it's [positioned within the story hierarchy](#story-hierarchy).
|
||||
|
||||
This example is written in Storybook's [Module format](../../formats/module-story-format/). Storybook also supports:
|
||||
This example is written in Storybook's [Component Story Format (CSF)](../../formats/component-story-format/). Storybook also supports:
|
||||
|
||||
- a classic [storiesOf format](../../formats/storiesof-story-format/), which adds stories through Storybook's API.
|
||||
- an experimental [MDX format](../../formats/mdx-story-format/), which mixes longform Markdown docs and JSX stories.
|
||||
- a classic [storiesOf API](../../formats/storiesof-api/), which adds stories through Storybook's API.
|
||||
- an experimental [MDX syntax](../../formats/mdx-syntax/), which mixes longform Markdown docs and JSX stories.
|
||||
|
||||
Since Module format is a new addition to Storybook, most Storybook examples you'll find in the wild are written in the legacy [storiesOf format](../../formats/stories-of-format/).
|
||||
Since CSF is a new addition to Storybook, most Storybook examples you'll find in the wild are written to the [storiesOf API](../../formats/storiesof-api/).
|
||||
|
||||
Furthermore, Storybook for React Native currently only supports the `storiesOf` format. React Native will get Module and MDX support in a future release.
|
||||
Furthermore, Storybook for React Native currently only supports the `storiesOf` format. React Native will get CSF and MDX support in a future release.
|
||||
|
||||
## Story file location
|
||||
|
||||
@ -137,7 +137,7 @@ load(loaderFn, module);
|
||||
|
||||
Storybook uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#require-context) to load modules dynamically. Take a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#require-context) to learn more about how to use `require.context`.
|
||||
|
||||
The `load` function is available since Storybook 5.2 and is the recommended way to load stories. It replaces the [configure function](../../formats/storiesof-story-format/#legacy-loading), which is still in use in most Storybook examples, and is the only way to currently load stories in React Native.
|
||||
The `load` function is available since Storybook 5.2 and is the recommended way to load stories. It replaces the [configure function](../../formats/storiesof-api/#legacy-loading), which is still in use in most Storybook examples, and is the only way to currently load stories in React Native.
|
||||
|
||||
## Decorators
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
id: 'module-story-format'
|
||||
title: 'Module Story Format'
|
||||
id: 'component-story-format'
|
||||
title: 'Component Story Format (CSF)'
|
||||
---
|
||||
|
||||
Storybook's module story format is the recommended way to [write stories](../../basics/writing-stories/) since Storybook 5.2.
|
||||
Storybook's Component Story Format (CSF) is the recommended way to [write stories](../../basics/writing-stories/) since Storybook 5.2.
|
||||
|
||||
It's called "module" format because the stories and component metadata are defined as ES6 modules. Every module story file consists of a required default export and one or more named exports.
|
||||
In CSF, stories and component metadata are defined as ES6 modules. Every Component story file consists of a required default export and one or more named exports.
|
||||
|
||||
The module format is supported in all frameworks except React Native, where you should use the [storiesOf format](../storiesof-story-format) instead.
|
||||
CSF is supported in all frameworks except React Native, where you should use the [storiesOf API](../storiesof-api/) instead.
|
||||
|
||||
## Default export
|
||||
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
}
|
||||
export const simpleData = { foo: 1, bar: 'baz' };
|
||||
export const complexData = { foo: 1, { bar: 'baz', baz: someData }};
|
||||
export const simpleStory = () => <MyComponent data={sompleData} />;
|
||||
export const simpleStory = () => <MyComponent data={simpleData} />;
|
||||
export const complexStory = () => <MyComponent data={complexData} />;
|
||||
```
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 'mdx-story-format'
|
||||
title: 'MDX Story Format'
|
||||
id: 'mdx-syntax'
|
||||
title: 'MDX Syntax'
|
||||
---
|
||||
|
||||
[MDX story](https://mdxjs.com/) documentation coming soon!
|
||||
[MDX syntax](https://mdxjs.com/) documentation coming soon!
|
||||
|
||||
For more information, see the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
@ -1,19 +1,19 @@
|
||||
---
|
||||
id: 'storiesof-story-format'
|
||||
title: 'StoriesOf Story Format'
|
||||
id: 'storiesof-api'
|
||||
title: 'StoriesOf API'
|
||||
---
|
||||
|
||||
`storiesOf` is Storybook's API for adding stories. Up until Storybook 5.2 has been the primary way to create stories in Storybook.
|
||||
`storiesOf` is Storybook's API for adding stories. Up until Storybook 5.2, it has been the primary way to create stories in Storybook.
|
||||
|
||||
In Storybook 5.2 we introduced a simpler and more portable [Module format](../module-story-format/), and all future tools and infrastructure will be oriented towards this format. Therefore, we recommend migrating your stories out of `storiesOf` format, and even provide [automated tools to do this](#module-format-migration).
|
||||
In Storybook 5.2 we introduced a simpler and more portable [Component Story Format](../component-story-format/), and all future tools and infrastructure will be oriented towards CSF. Therefore, we recommend migrating your stories out of `storiesOf` API, and even provide [automated tools to do this](#component-story-format-migration).
|
||||
|
||||
That said, the `storiesOf` format is not deprecated. For the time being most existing Storybooks use `storiesOf` format, and therefore we plan to support it for the foreseeable future. Furthermore, `storiesOf` is a Storybook API, so even once we've deprecated the file format, the API will likely live on.
|
||||
That said, the `storiesOf` API is not deprecated. For the time being most existing Storybooks use the `storiesOf` API, and therefore we plan to support it for the foreseeable future.
|
||||
|
||||
## storiesOf API
|
||||
|
||||
A Storybook is a collection of stories. Each story represents a single visual state of a component. For an overview of storybook story concepts, see ["Writing Stories"](../../basics/writing-stories/).
|
||||
|
||||
Here's a basic story file in `storiesOf` format:
|
||||
Here's a basic story file in the `storiesOf` API:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
@ -118,12 +118,12 @@ load(loadStories, module);
|
||||
|
||||
The **React Native** packager resolves all imports at build-time, so it's not possible to load modules dynamically. There is a third party loader [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically generate the import statements for all stories.
|
||||
|
||||
## Module format migration
|
||||
## Component Story Format migration
|
||||
|
||||
To make it easier to adopt the new [Module format](../module-story-format/), we've created an automatic migration tool to transform `storiesOf` format to Module format.
|
||||
To make it easier to adopt the new [Component Story Format (CSF)](../component-story-format/), we've created an automatic migration tool to transform `storiesOf` API to Module format.
|
||||
|
||||
```sh
|
||||
sb migrate storiesof-to-module --glob src/**/*.stories.js
|
||||
sb migrate storiesof-to-csf --glob src/**/*.stories.js
|
||||
```
|
||||
|
||||
For more information, see the CLI's [Codemod README](https://github.com/storybookjs/storybook/tree/next/lib/codemod).
|
||||
Loading…
x
Reference in New Issue
Block a user