GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 00:51:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove mentions of codemod

Browse Source
This commit is contained in:
Kyle Gach 2025-02-19 14:22:23 -07:00
parent 6c46c3f113
commit 5855a0f716
2 changed files with 2 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/_snippets/csf-factories-codemod.md
View File

@ -1,11 +0,0 @@
```shell renderer="common" language="js" packageManager="npm"
npx storybook automigrate csf-factories
```
```shell renderer="common" language="js" packageManager="pnpm"
pnpm exec storybook automigrate csf-factories
```
```shell renderer="common" language="js" packageManager="yarn"
yarn exec storybook automigrate csf-factories
```

29
docs/api/csf/csf-factories.mdx
View File

@ -120,7 +120,7 @@ import preview from '#.storybook/preview';
import preview from '../../../.storybook/preview';
```
The [CSF Factories codemod](#codemod) will automatically add the necessary subpath import for the preview file, or you can [add it manually](#1-add-subpath-import-in-packagejson).
See the manual migration steps for details about [configuring the necessary subpath imports](#1-add-subpath-import-in-packagejson).
For more details, refer to the [subpath imports documentation](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#subpath-imports).
@ -128,27 +128,6 @@ For more details, refer to the [subpath imports documentation](../../writing-sto
You can upgrade your project's story files to CSF Factories incrementally or all at once. However, before using CSF Factories in a story file, you must upgrade your `.storybook/main.js|ts` and `.storybook/preview.js|ts` files.
### Codemod
Storybook provides codemods to help you migrate your codebase to the CSF Factories format effortlessly. Run the following command in the root of your project:
{/* prettier-ignore-start */}
<CodeSnippets path="csf-factories-codemod.md" />
{/* prettier-ignore-end */}
<Callout variant="info" icon="💡">
If you use a monorepo or your `.storybook` directory is not at the root, make sure to pass the `--config-dir` flag to the command, specifying its path.
</Callout>
This command performs the following actions:
- Adds [a subpath import](#1-add-subpath-import-in-packagejson) for the preview file in your `package.json`
- [Migrates `.storybook/main.js`](#2-update-your-main-storybook-config-file)
- [Migrates `.storybook/preview.js`](#3-update-your-preview-config-file)
- Converts all story files to [use CSF Factories](#4-update-your-story-files)
This should get you started with CSF Factories immediately. If you prefer a manual migration, the next sections detail the necessary updates.
### 1. Add subpath import in `package.json`
To be able to consistently import the preview file from any location in your project, you need to add a subpath import in your `package.json`. For more information, refer to the [subpath imports documentation](../../writing-stories/mocking-data-and-modules/mocking-modules.mdx#subpath-imports).
@ -195,8 +174,6 @@ If an addon provides annotations (i.e. it distributes a `./preview` export), it
2. For community addons, you should import the entire module and access the addon from there:
`import * as addonName from 'community-addon-name'`
Sound complicated? The [codemod](#codemod) will automatically add the necessary imports for you.
</details>
```diff title=".storybook/preview.js|ts"
@ -282,9 +259,7 @@ All of the story properties are now contained within a new property called `comp
<Callout variant="info">
The property name "composed" was chosen because the values within are composed from the story, its component meta, and the preview configuration.
If you want to access the direct input to the story, you can use `Story.input` instead of `Story.composed`.
When running the [codemod](#codemod), it will automatically update usages of `Story.args` to `Story.input.args`. This is to ensure that your stories continue to work as expected. However, using `Story.composed.args` is likely more helpful in most cases.
If you want to access the direct input to the story, you can use `Story.input` instead of `Story.composed`.
</Callout>
### 5. Update your Vitest setup file