Core: Add parameter typings for addon-pseudo-state

[mrginglymus]

What I did

Export types for adodn-pseudo parameters and add to preview definition for typing in csf4.

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>

Greptile Summary

Updated On: 2025-09-03 10:31:08 UTC

This PR enhances TypeScript support for the addon-pseudo-states by adding comprehensive parameter typings for CSF4 (Component Story Format 4) integration. The changes reorganize type definitions by moving the PseudoState type from constants.ts to a new dedicated types.ts file, which now contains a complete type system including PseudoStateConfig, PseudoParameter, PseudoParameters, and PseudoTypes interfaces.

The new type system enables proper IntelliSense and type checking when configuring pseudo-state parameters in stories. The PseudoTypes interface is specifically designed to integrate with Storybook's addon system through definePreviewAddon<PseudoTypes>(), providing type safety for the pseudo parameter that controls pseudo-state behavior like hover, focus, and other CSS pseudo-states.

The refactoring consolidates all type definitions in types.ts, updates imports in withPseudoState.ts to use the centralized types, and modifies index.ts to export the new types while applying generic typing to the preview addon definition. This follows Storybook's modern addon patterns and improves the developer experience without changing any runtime behavior.

PR Description Notes:

• Typo in PR description: "adodn-pseudo" should be "addon-pseudo"

Confidence score: 5/5

• This PR is safe to merge with minimal risk as it only adds TypeScript type definitions without changing runtime behavior
• Score reflects the non-breaking nature of type-only changes that improve developer experience and follow established Storybook patterns
• No files require special attention as all changes are straightforward type definitions and imports

Summary by CodeRabbit

• New Features

  • Improved TypeScript support for pseudo-state configuration with exported public types for better IDE help and safer configs.

• Refactor

  • Centralized and streamlined pseudo-state type declarations; public type signatures were updated (may affect external type consumers).

• Tests

  • Added type-level tests validating accepted and rejected pseudo-state configurations.

• Chores

  • Enabled type checking during test runs.

[greptile-apps]

_{4 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f6ae955

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	46s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-26 11:07:02 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: f6ae955, ran on 26 October 2025 at 11:00:57 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/nextjs

	Before	After	Difference
Dependency count	532	532	0
Self size	751 KB	751 KB	🎉 -37 B 🎉
Dependency size	58.57 MB	58.50 MB	🎉 -65 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	124	124	0
Self size	3.90 MB	3.83 MB	🎉 -65 KB 🎉
Dependency size	21.61 MB	21.54 MB	🎉 -65 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	157	157	0
Self size	31 KB	31 KB	🚨 +24 B 🚨
Dependency size	22.99 MB	22.93 MB	🎉 -65 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	114	114	0
Self size	37 KB	37 KB	0 B
Dependency size	19.55 MB	19.48 MB	🎉 -65 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	272	272	0
Self size	25 KB	25 KB	0 B
Dependency size	43.52 MB	43.46 MB	🎉 -65 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react

	Before	After	Difference
Dependency count	2	2	0
Self size	695 KB	629 KB	🎉 -65 KB 🎉
Dependency size	28 KB	28 KB	🚨 +6 B 🚨
Bundle Size Analyzer	Link	Link

[valentinpalkovic]

@Sidnioulz Can you take another look?

[coderabbitai]

📝 Walkthrough

Walkthrough

Extracted pseudo-state types into a new types.ts, removed the exported PseudoState from constants.ts, updated imports and the preview addon signature to use the new types, added a d.ts type test, and enabled Vitest type-checking.

Changes

Cohort / File(s)	Summary
Type module added code/addons/pseudo-states/src/types.ts	Added public types: PseudoState, PseudoStateConfig, PseudoParameter, PseudoParameters, and PseudoTypes.
Constants type removed code/addons/pseudo-states/src/constants.ts	Removed the exported type alias type PseudoState = keyof typeof PSEUDO_STATES.
Preview import updates code/addons/pseudo-states/src/preview/withPseudoState.ts	Removed local type defs and now import type { PseudoParameter, PseudoState, PseudoStateConfig } from '../types'; eliminated import of PseudoState from ../constants.
Public API typing code/addons/pseudo-states/src/index.ts	Re-exported PseudoTypes (export type { PseudoTypes } from './types') and parameterized definePreviewAddon as definePreviewAddon<PseudoTypes>(addonAnnotations) in the default export.
Type tests code/addons/pseudo-states/src/types.test-d.ts	Added a TypeScript declaration test validating pseudo-parameters typing with Storybook CSF.
Vitest config code/addons/pseudo-states/vitest.config.ts	Enabled type-checking in Vitest by setting test.typecheck.enabled = true.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6da28d9 and a74fda7.

📒 Files selected for processing (1)

• code/addons/pseudo-states/src/types.test-d.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• code/addons/pseudo-states/src/types.test-d.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

---

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6d4b085 and e073b37.

📒 Files selected for processing (6)

• code/addons/pseudo-states/src/constants.ts (0 hunks)
• code/addons/pseudo-states/src/index.ts (1 hunks)
• code/addons/pseudo-states/src/preview/withPseudoState.ts (1 hunks)
• code/addons/pseudo-states/src/types.test-d.ts (1 hunks)
• code/addons/pseudo-states/src/types.ts (1 hunks)
• code/addons/pseudo-states/vitest.config.ts (1 hunks)

💤 Files with no reviewable changes (1)

• code/addons/pseudo-states/src/constants.ts

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Adhere to ESLint and Prettier rules across all JS/TS source files

Files:

• code/addons/pseudo-states/src/index.ts
• code/addons/pseudo-states/vitest.config.ts
• code/addons/pseudo-states/src/types.test-d.ts
• code/addons/pseudo-states/src/types.ts
• code/addons/pseudo-states/src/preview/withPseudoState.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode

Files:

• code/addons/pseudo-states/src/index.ts
• code/addons/pseudo-states/vitest.config.ts
• code/addons/pseudo-states/src/types.test-d.ts
• code/addons/pseudo-states/src/types.ts
• code/addons/pseudo-states/src/preview/withPseudoState.ts

🧬 Code graph analysis (3)

code/addons/pseudo-states/src/index.ts (1)

code/addons/pseudo-states/src/types.ts (1)

• PseudoTypes (22-24)

code/addons/pseudo-states/src/types.test-d.ts (1)

code/core/src/csf/csf-factories.ts (1)

• definePreview (38-62)

code/addons/pseudo-states/src/types.ts (2)

code/addons/pseudo-states/src/constants.ts (1)

• PSEUDO_STATES (34-43)

code/addons/pseudo-states/src/index.ts (1)

• PseudoTypes (8-8)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (5)

code/addons/pseudo-states/vitest.config.ts (1)

8-12: LGTM!

Enabling type checking correctly supports the new type-level tests introduced in types.test-d.ts.

code/addons/pseudo-states/src/types.test-d.ts (1)

11-45: LGTM!

The type tests correctly validate the pseudo-state parameter types using negative cases (invalid value/key) and positive cases (valid config).

code/addons/pseudo-states/src/index.ts (1)

4-10: LGTM!

The type export and generic parameterization correctly expose the pseudo-state types for CSF4 integration and IntelliSense support.

code/addons/pseudo-states/src/preview/withPseudoState.ts (1)

16-16: LGTM!

The import consolidation correctly centralizes type definitions without altering runtime behavior.

code/addons/pseudo-states/src/types.ts (1)

1-24: LGTM!

The type definitions correctly model the pseudo-state parameter API and align with the runtime behavior in withPseudoState.ts. The JSDoc link provides helpful documentation context.

[Sidnioulz]

@Sidnioulz Can you take another look?

Should be good to go if CI's green, thanks for the reminder! I hadn't caught Bill's new commits.

[Sidnioulz]

@mrginglymus updating your branch as I think the CI errors we see are caused by issues on next and not your code.

[mrginglymus]

Well that was an odd one. Looks like enabling type testing in the pseudo addon meant a different? stricter? type checker was running over the stories in the addon - I can only assume so, as that's the only way the react renderer might be pulled in.

Because we're pointing at the source files, we check the types of all the internals there too including assignment to globalThis. The typings for that are in typings.d.ts which is included when typechecking react by dint of the glob in tsconfig, but given there's no explicit import of it elsewhere, when referenced from outside it all explodes?

Either way, sticking an import in the test file seemed to fix it. I was going to add a /// reference in the react renderer itself in each of the two offending files, but that threw linter errors...

@Sidnioulz hopefully this will now be green