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
docs/api/csf.mdx
Outdated
| 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 6e6eb53.
☁️ Nx Cloud last updated this comment at |
| "#.storybook/preview": { | ||
| "default": "./.storybook/preview.ts", | ||
| }, | ||
| "#*": ["./*", "./*.ts", "./*.tsx"], |
There was a problem hiding this comment.
Interesting 🤔 the codemod only adds "#*": ["./*", "./*.ts", "./*.tsx"] and assumes that users will write #.storybook/preview which will relate to <root>.storybook/preview and if they have the preview file somewhere else, they will have to adjust the import in each file to something like #some-dir/.storybook/preview.
This means users with multiple Storybooks could have multiple imports like #apps/.storybook/preview and #libs/.storybook/preview without having to change anything in their package.json.
Perhaps the codemod should set this more specific field like what Kyle wrote here instead? WDYT @kasperpeulen?
There was a problem hiding this comment.
I see! Thanks for explaining. That's tricky. I see why you did it the current way, but think the way I documented is perhaps a bit more informative? I like that if someone does a Find for #.storybook/preview, they'll come across this.
There was a problem hiding this comment.
It's tricky, I'll leave @kasperpeulen to decide
There was a problem hiding this comment.
@kasperpeulen — Did you have thoughts? I'm still inclined to think it should be the way I've documented here, because:
I like that if someone does a Find for
#.storybook/preview, they'll come across this.
There was a problem hiding this comment.
I'm not sure, I will let @shilman decide about this. :P
kylegach
force-pushed
the
yann/csf-factories-documentation
branch
from
5f60838 to
e6e01c1
Compare
kylegach
force-pushed
the
yann/csf-factories-documentation
branch
from
e6e01c1 to
dcfab08
Compare
|
@kylegach this all looks great, thanks for working on the revisions! I can't approve since I opened the PR, so please approve it for me! |
Closes #30342
Closes #30329
What I did
This PR introduces documentation for the CSF Factory format.
Checklist for Contributors
Testing
Manual testing
sync-docsinstorybookjs/weblocallymain, so the page-level tabs show upDocumentation
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.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