Docs: Add CSF factory API documentation #30343
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
10 file(s) reviewed, 12 comment(s)
Edit PR Review Bot Settings | Greptile
| const Secondary = meta.story({ | ||
| args: { | ||
| // 👇 Access args from another story using its `composed` property | ||
| ...Primary.composed.args, |
There was a problem hiding this comment.
logic: spreading Primary.composed.args and then overriding label with the same value ('Button') appears redundant since it's the same as the Primary story
| const Primary = meta.story({ | ||
| args: { | ||
| label: 'Button', | ||
| }, | ||
| }); |
There was a problem hiding this comment.
style: consider adding export statements to make these stories available to Storybook
| const Primary = meta.story({ | ||
| args: { | ||
| label: 'Button', | ||
| }, | ||
| }); |
There was a problem hiding this comment.
logic: Primary story should be exported to be visible in Storybook
| // Import all stories from the stories file | ||
| import * as stories from './Button.stories'; | ||
|
|
||
| const { Primary, Secondary } = stories; |
There was a problem hiding this comment.
style: Secondary is destructured but never used in the tests. Remove unused variable.
| }); | ||
|
|
||
| test('renders primary button with overridden props', async () => { | ||
| // You can override props by passing them in the context argument of the play function |
There was a problem hiding this comment.
logic: The comment about 'context argument of the play function' is incorrect - this example shows prop overrides, not play function usage.
| const { Primary, Secondary } = stories; | ||
|
|
||
| test('renders primary button with default args', async () => { | ||
| // The run function will mount the componetn and run all of Storybook's lifecycle hooks |
There was a problem hiding this comment.
syntax: 'componetn' is misspelled in the comment
| // Import all stories from the stories file | ||
| import * as stories from './Button.stories'; | ||
|
|
||
| const { Primary, Secondary } = stories; |
There was a problem hiding this comment.
style: Secondary is destructured but never used in the test file
| test('renders primary button with default args', async () => { | ||
| // The run function will mount the componetn and run all of Storybook's lifecycle hooks | ||
| await Primary.run(); | ||
| const buttonElement = screen.getByText('Text coming from args in stories file!'); |
There was a problem hiding this comment.
logic: The hardcoded text 'Text coming from args in stories file!' should match what's actually defined in the Button.stories file
| import preview from '../../../.storybook/preview'; | ||
| ``` | ||
|
|
||
| For more details, refer to the [subpath imports documentation](../writing-stories/mocking-modules#subpath-imports). |
There was a problem hiding this comment.
syntax: The link to subpath imports documentation is incorrect. The URL should be ../writing-stories/mocking-modules.mdx#subpath-imports (missing .mdx extension)
| <Callout variant="warning"> | ||
| If you are using the CSF Factory format, you don't need to use the portable stories API. Instead, you can use the [CSF Factory API](../../api/csf.mdx). | ||
| </Callout> |
There was a problem hiding this comment.
style: link to CSF Factory API should be more specific - consider linking directly to the CSF Factory section of the CSF documentation
|
View your CI Pipeline Execution ↗ for commit 75670d5.
☁️ Nx Cloud last updated this comment at |
Closes #30342
Closes #30329
What I did
This PR introduces documentation for the CSF Factory format.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Greptile Summary
This PR introduces comprehensive documentation for the new CSF Factory API, providing examples and guidelines for creating and testing Storybook stories with improved type safety and reusability.
defineMainanddefinePreviewconfiguration examples indocs/_snippets/csf-factories-main-example.mdanddocs/_snippets/csf-factories-preview-example.mdpreview.meta()andmeta.story()indocs/_snippets/csf-factories-story-example.mddocs/_snippets/portable-stories-csf-factory-run.mdcomposedproperty