Preview API: Add csf factory utilities #30388
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
8 file(s) reviewed, 5 comment(s)
Edit PR Review Bot Settings | Greptile
| 'isCSFFactory' in story ? (story as any).input : story, | ||
| 'isCSFFactory' in story ? (meta as any).input : meta, | ||
| annotations.story, | ||
| annotations.meta, | ||
| { initialGlobals: (await getInitialGlobals?.()) ?? {}, tags: await getTags?.() }, |
There was a problem hiding this comment.
style: optional chaining on getInitialGlobals could be moved to line 24 where the function is destructured for better error handling
| @@ -8,3 +8,4 @@ export * from './getValuesFromArgTypes'; | |||
| export * from './composeConfigs'; | |||
| export * from './stepRunners'; | |||
| export * from './portable-stories'; | |||
| export * from './csf-factory-utils'; | |||
There was a problem hiding this comment.
style: consider adding a newline at the end of file to match style of other exports
| @@ -48,6 +48,7 @@ export function processCSFFile<TRenderer extends Renderer>( | |||
|
|
|||
| const firstStory: any = Object.values(namedExports)[0]; | |||
There was a problem hiding this comment.
style: casting to any here loses type safety - consider using a more specific type or adding runtime type checks
| @@ -48,6 +48,7 @@ export function processCSFFile<TRenderer extends Renderer>( | |||
|
|
|||
| const firstStory: any = Object.values(namedExports)[0]; | |||
| // CSF4 | |||
| // TODO: @kasperpeulen will fix this once csf factory types are defined | |||
| if (!defaultExport && 'isCSFFactory' in firstStory) { | |||
There was a problem hiding this comment.
logic: check for firstStory being undefined before accessing properties to prevent runtime errors
| const { story: storyAnnotations, meta: componentAnnotations } = | ||
| getCsfFactoryAnnotations(story); |
There was a problem hiding this comment.
logic: Destructuring could fail if getCsfFactoryAnnotations returns undefined. Consider adding a null check or default values.
|
View your CI Pipeline Execution ↗ for commit 1cd8644.
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 592 | 592 | 0 |
| Self size | 474 KB | 474 KB | 0 B |
| Dependency size | 84.21 MB | 84.23 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 323 | 323 | 0 |
| Self size | 8 KB | 8 KB | 0 B |
| Dependency size | 43.26 MB | 43.27 MB | 🚨 +15 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 495 | 495 | 0 |
| Self size | 7 KB | 7 KB | 0 B |
| Dependency size | 55.65 MB | 55.67 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 55 | 55 | 0 |
| Self size | 22 KB | 22 KB | 0 B |
| Dependency size | 33.54 MB | 33.55 MB | 🚨 +10 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
sb
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 56 | 56 | 0 |
| Self size | 1 KB | 1 KB | 0 B |
| Dependency size | 33.56 MB | 33.57 MB | 🚨 +10 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 401 | 401 | 0 |
| Self size | 529 KB | 529 KB | 0 B |
| Dependency size | 75.61 MB | 75.62 MB | 🚨 +19 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 277 | 277 | 0 |
| Self size | 612 KB | 612 KB | 0 B |
| Dependency size | 65.39 MB | 65.41 MB | 🚨 +19 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 113 | 113 | 0 |
| Self size | 1.11 MB | 1.11 MB | 0 B |
| Dependency size | 42.67 MB | 42.68 MB | 🚨 +10 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
Closes #30236
What I did
This PR introduces base utilities to use when it comes to dealing with stories, meta or preview annotations and either checking or extracting the proper anotations whether they're in csf factory format or not
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 new CSF (Component Story Format) factory utilities to improve handling of story annotations and previews in Storybook's preview API.
csf-factory-utils.tswith core functionsgetCsfFactoryPreview,isCsfFactory, andgetCsfFactoryAnnotationsfor standardized CSF factory handlingprocessCSFFile.tsto support CSF4 factory types by extracting metadata fromfirstStory.meta.inputandfirstStory.config.inputDocsContextclass to useisCsfFactoryutility for proper CSF factory story handlingtestStoryfunction intest-utils.tsto use newgetCsfFactoryAnnotationsutility for improved type safety