Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Core: Allow empty render functions in CSF factories #30565

Merged
merged 1 commit into from
Feb 18, 2025
Merged

Conversation

kasperpeulen
Copy link
Contributor

@kasperpeulen kasperpeulen commented Feb 18, 2025

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make 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/core team 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>

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 80.6 MB 80.6 MB 0 B 0.5 0%
initSize 80.6 MB 80.6 MB 0 B 0.5 0%
diffSize 97 B 97 B 0 B - 0%
buildSize 7.31 MB 7.31 MB 0 B 0.49 0%
buildSbAddonsSize 1.9 MB 1.9 MB 0 B - 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.88 MB 1.88 MB 0 B 0.58 0%
buildSbPreviewSize 0 B 0 B 0 B - -
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.97 MB 3.97 MB 0 B 0.58 0%
buildPreviewSize 3.34 MB 3.34 MB 0 B 0.48 0%
testBuildSize 0 B 0 B 0 B - -
testBuildSbAddonsSize 0 B 0 B 0 B - -
testBuildSbCommonSize 0 B 0 B 0 B - -
testBuildSbManagerSize 0 B 0 B 0 B - -
testBuildSbPreviewSize 0 B 0 B 0 B - -
testBuildStaticSize 0 B 0 B 0 B - -
testBuildPrebuildSize 0 B 0 B 0 B - -
testBuildPreviewSize 0 B 0 B 0 B - -
name before after diff z %
createTime 6.6s 8.4s 1.7s -0.91 21.1%
generateTime 17.6s 19.8s 2.2s 0.04 11.5%
initTime 4.3s 4.8s 570ms 0.5 11.7%
buildTime 8.3s 9.8s 1.5s 0.57 15.4%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 6.3s 5s -1s -295ms -0.79 -25.7%
devManagerResponsive 4.8s 3.7s -1s -112ms -0.94 -29.6%
devManagerHeaderVisible 854ms 766ms -88ms -0.3 -11.5%
devManagerIndexVisible 871ms 779ms -92ms -0.41 -11.8%
devStoryVisibleUncached 4.2s 3.9s -230ms 0.2 -5.8%
devStoryVisible 946ms 840ms -106ms -0.18 -12.6%
devAutodocsVisible 923ms 811ms -112ms 0.18 -13.8%
devMDXVisible 837ms 745ms -92ms -0.38 -12.3%
buildManagerHeaderVisible 880ms 839ms -41ms 0.29 -4.9%
buildManagerIndexVisible 947ms 896ms -51ms 0.42 -5.7%
buildStoryVisible 856ms 816ms -40ms 0.36 -4.9%
buildAutodocsVisible 845ms 643ms -202ms -0.29 -31.4%
buildMDXVisible 662ms 772ms 110ms 1.91 🔺14.2%

Greptile Summary

This PR introduces type system improvements for handling empty render functions in CSF4 (Component Story Format 4) for Storybook's React renderer.

  • Added type overload in ReactMeta interface to handle empty render functions without requiring args
  • Modified type checking behavior to make args optional when using empty render functions
  • Added test cases in csf-factories.test.tsx to verify empty render function behavior
  • Fixed type signature mismatch in defineStory function between ComponentAnnotations and StoryAnnotations

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile

Comment on lines +106 to +112
// @ts-expect-error disabled not provided ❌
const Basic = meta.story({
args: {
label: 'good',
},
render: (args) => <div>Hello world</div>,
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: This test case has a potential issue - it's marked as expecting a type error for missing 'disabled' prop, but the render function doesn't actually use the args parameter, so it should be allowed to omit required props like the empty render case above

Comment on lines +58 to +64
story<
TInput extends StoryAnnotations<ReactRenderer, Context['args']> & {
render: () => ReactRenderer['storyResult'];
},
>(
story: TInput
): ReactStory;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: The new overload is more specific than the existing one and should be placed after the more general overload to ensure proper type inference. Consider swapping the order of these overloads.

Suggested change
story<
TInput extends StoryAnnotations<ReactRenderer, Context['args']> & {
render: () => ReactRenderer['storyResult'];
},
>(
story: TInput
): ReactStory;
story<
const TInput extends Simplify<
StoryAnnotations<
ReactRenderer,
// TODO: infer mocks from story itself as well
AddMocks<Context['args'], MetaInput['args']>,
SetOptional<Context['args'], keyof Context['args'] & keyof MetaInput['args']>
>
>,
>(
story: TInput
): ReactStory;
story<
TInput extends StoryAnnotations<ReactRenderer, Context['args']> & {
render: () => ReactRenderer['storyResult'];
},
>(
story: TInput
): ReactStory;

Comment on lines +59 to +61
TInput extends StoryAnnotations<ReactRenderer, Context['args']> & {
render: () => ReactRenderer['storyResult'];
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: The constraint render: () => ReactRenderer['storyResult'] forces the render function to take no arguments, which may be too restrictive. Consider allowing optional args parameter.

Copy link

nx-cloud bot commented Feb 18, 2025

View your CI Pipeline Execution ↗ for commit b5aa1f2.

Command Status Duration Result
nx affected -t check -c production --parallel=7 ✅ Succeeded 1m 36s View ↗
nx run-many -t build -c production --parallel=3 ✅ Succeeded 3m 13s View ↗

☁️ Nx Cloud last updated this comment at 2025-02-18 14:10:24 UTC

@shilman shilman changed the title Core: Allow empty render functions in CSF4 Core: Allow empty render functions in CSF factories Feb 18, 2025
@shilman shilman merged commit 9408d0f into next Feb 18, 2025
65 of 73 checks passed
@shilman shilman deleted the kasper/empty-render branch February 18, 2025 14:40
@github-actions github-actions bot mentioned this pull request Feb 18, 2025
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants