Skip to content

CSF types: fix type checking for components with union props#32102

Open
svenvandescheur wants to merge 3 commits into
storybookjs:nextfrom
svenvandescheur:issue-25492-argsfrommeta-union-inference
Open

CSF types: fix type checking for components with union props#32102
svenvandescheur wants to merge 3 commits into
storybookjs:nextfrom
svenvandescheur:issue-25492-argsfrommeta-union-inference

Conversation

@svenvandescheur
Copy link
Copy Markdown

@svenvandescheur svenvandescheur commented Jul 22, 2025

Closes #25492
Closes #30379

What I did

This PR attempts to fix #25492 by explicitly typing DecoratorFunction[] to the decorators? section in ArgsFromMeta removing a never path for stories for components with props with union types.

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

I tested the behavior with the following story:

// This was actually pointing to my local machine
import { Meta, StoryObj } from "@storybook/react-vite";


// The props type
// A fixed param and a union for conditional constraints.
type TestComponentProps = {
  foo: string;
} & Conditional;

// The conditional
// ifBool should be truthy if bool is true.
type Conditional =
  | {
      bool: true;
      ifBool: string;
    }
  | {
      bool?: false;
      ifBool?: string;
    };

// Test component
const TestComponent = ({ foo, bool, ifBool }: TestComponentProps) => {
  return JSON.stringify({ foo, bool, ifBool });
};

// Meta
const meta: Meta<typeof TestComponent> = {
  title: "Test",
  component: TestComponent,
};
export default meta;

// Story
type Story = StoryObj<typeof meta>;

// STORY TEST
// This seems to fail (without fix)
export const Test: Story = {
  args: {
    foo: "bar",
    bool: true,
    ifBool: "truthyorfail",
  },
};

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>

Greptile Summary

This PR fixes a TypeScript type inference issue in the Component Story Format (CSF) where components with union-typed props would fail type checking when used with decorators. The fix modifies the ArgsFromMeta type by explicitly typing the decorators? section with DecoratorFunction[], preventing a 'never' type from being incorrectly inferred.

The change affects how Storybook handles type checking for components that use advanced TypeScript features like discriminated unions or correlated union types in their props. This improvement ensures that stories can properly use both decorators and union-typed props without TypeScript compilation errors.

Confidence score: 4/5

  1. This PR is safe to merge as it only affects TypeScript type definitions and has no runtime impact.
  2. The score is 4/5 because while the fix is well-tested with a specific use case and doesn't affect runtime behavior, more comprehensive testing with different union type patterns could be beneficial.
  3. Files needing attention:
    • code/core/src/csf/story.ts: Verify that the type changes don't have unintended consequences for other union type patterns.

Summary by CodeRabbit

  • Refactor
    • Improved type safety for decorator handling in metadata. This refinement enhances TypeScript type inference accuracy when working with decorators, providing better developer experience.

Copy link
Copy Markdown
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.

1 file reviewed, no comments

Edit Code Review Bot Settings | Greptile

@valentinpalkovic valentinpalkovic added bug typescript argtypes ci:normal Run our default set of CI jobs (choose this for most PRs). labels Jul 28, 2025
@valentinpalkovic
Copy link
Copy Markdown
Contributor

@kasperpeulen Would you mind taking a look?

@storybook-app-bot
Copy link
Copy Markdown

storybook-app-bot Bot commented Jul 28, 2025

Package Benchmarks

Commit: 374128e, ran on 14 March 2026 at 08:36:23 UTC

No significant changes detected, all good. 👏

@valentinpalkovic valentinpalkovic moved this to Empathy Queue (prioritized) in Core Team Projects Mar 10, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 10, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8c55dbe7-c016-4ff7-b136-7330a1aa926b

📥 Commits

Reviewing files that changed from the base of the PR and between 9a85d2c and 8d33e25.

📒 Files selected for processing (1)
  • code/core/src/csf/story.ts

📝 Walkthrough

Walkthrough

A type constraint is added to the ArgsFromMeta type in the story module, refining the decorator inference to narrow the Decorators type when provided as an array to extend DecoratorFunction[].

Changes

Cohort / File(s) Summary
Type Constraint Refinement
code/core/src/csf/story.ts
Added constraint to decorator type inference in ArgsFromMeta, changing (infer Decorators)[] to (infer Decorators extends DecoratorFunction[])[] to narrow type resolution for array-based decorators.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot removed the Stale label Mar 13, 2026
@valentinpalkovic
Copy link
Copy Markdown
Contributor

Hi @svenvandescheur,

Thank you for your contribution. Unfortunately, this PR got quite stale since we missed reviewing it. Would you mind resolving the typescript issues? As soon as they're resolved, we'll take a look!

@github-actions github-actions Bot added the Stale label Mar 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

argtypes bug ci:normal Run our default set of CI jobs (choose this for most PRs). needs triage Stale typescript

Projects

Status: Empathy Queue (prioritized)

3 participants