Sandboxes: Typecheck check production storybook packages #32447

mrginglymus · 2025-09-12T13:44:58Z

Closes #31554

What I did

Initial work pushed for visibility and assistance

Add a new 'check-sandbox' task that (currently) runs a typecheck
Find lots of problems:

Pinned typescript

We are pinning sandboxes to an older version of typescript than expected by create vite.

Solution: remove pin. I suspect a lot of the other pins can be removed as they seem vestigial.

Stricter tsconfig

The tsconfig created by create vite is stricter than the one used by storybook.

We have a lot of unused import React from 'react'; that isn't necessary when you have jsx: "react-jsx". code tsconfig has jsx: "preserve", which seems wrong.

The create vite tsconfig also has erasableSyntaxOnly set to true, which disallows enum usage, but we have some in our examples.

Solution: reduce strictness of tsconfig, though ideally we'd fix the issue with the jsx config in our code.

Wrong version of react

Our sandboxes are created with React 19; our sample code is React 18. Our sample code uses defaultProps, which is no longer present in React 19.

Solution: add ts-ignores to defaultProps usage.

Once the above had been addressed, set skipLibCheck to false.
Find new problsm

`@types/mdx` and `@mdx-js/react` do not support React 19

No idea how this is working on my repos; I'm importing from @storybook/addon-docs/blocks just the same, but the two packages are still using the now removed global JSX namespace instead of React.JSX.

`@storybook/react` has type errors in its production files

This is what #32442 is there to fix.

Still to do:

Work out how to make this run on an opt-in basis for our typescript sandboxes.

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-12 18:27:24 UTC

This PR introduces TypeScript type checking capabilities for Storybook sandboxes by adding a new check-sandbox task. The implementation addresses several compatibility issues between the development environment (React 18) and sandbox environments (React 19), as well as differences in TypeScript configurations between Storybook's existing setup and modern tooling like Vite.

The core changes include:

New Infrastructure: A new check-sandbox task that runs yarn typecheck on individual sandboxes, with proper dependency management and existence checks. The task integrates into the existing task system and follows established patterns.

TypeScript Configuration Management: The prepareViteSandbox function modifies generated sandboxes to use less strict TypeScript settings, specifically disabling erasableSyntaxOnly (to allow enum usage), noUnusedLocals (to handle unnecessary React imports), and skipLibCheck (to enable checking of Storybook's own types).

React Version Compatibility: Multiple template files have been updated with @ts-ignore comments to handle defaultProps usage, which was removed in React 19 but is still valid in React 18 development environments. The comments are well-documented to explain this version mismatch.

Dependency Management: Removed the TypeScript version pin that was forcing sandboxes to use an older version than expected by modern templates. Added missing type definitions like @types/lodash-es and @types/prop-types to support proper type checking.

Template Cleanup: Various template files have been cleaned up to remove unused parameters and fix import patterns (like correcting CSS imports from named to default imports) to satisfy stricter TypeScript checking.

This change integrates with Storybook's existing sandbox infrastructure and follows the established task dependency model, where the check-sandbox task depends on the sandbox task being completed first. The implementation is designed to be opt-in and focused initially on React Vite templates.

Confidence score: 3/5

This PR introduces new functionality that could help catch type errors but requires careful testing across different environments
Score reflects the significant number of type suppression comments added and potential compatibility issues between React versions
Pay close attention to the new task infrastructure files and React template compatibility changes

Summary by CodeRabbit

New Features
- Optional TypeScript type-checking for selected sandbox templates (new typeCheck flag).
Chores
- CI workflows now include a sandbox check step to run after sandbox creation.
- Added a sandbox type-check task and integrated it into sandbox setup and task selection.
- Removed a pinned TypeScript resolution to follow upstream versions.
Style
- Minor TypeScript/ESLint comment adjustments and import tweaks for React/TS compatibility.

We were pinning to a version that did not support a feature we were setting

nx-cloud · 2025-09-12T13:52:18Z

View your CI Pipeline Execution ↗ for commit 816d794

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

☁️ Nx Cloud last updated this comment at 2025-11-10 10:28:23 UTC

mrginglymus · 2025-09-12T16:22:28Z

Well there's a thing. Switching the sandbox to pnp masks the mdx type issue...somehow. It also throws up a lot of other issues, as it's a shortcut to finding packages importing transitive dependencies.

greptile-apps

_{15 files reviewed, 3 comments}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps · 2025-09-12T18:27:26Z

scripts/tasks/sandbox-parts.ts

+  // Lots of unnecessary imports of react that need fixing
+  tsConfigJson.compilerOptions.noUnusedLocals = false;
+  // Means we can check our own public types
+  tsConfigJson.compilerOptions.skipLibCheck = false;


style: Setting skipLibCheck to false may cause type errors from third-party packages. Consider documenting why this is necessary or if it should be conditional

shush greptile, that's the point! you managed to get that in your summary

also if there are type errors in the third-party packages we should be fixing them

greptile-apps · 2025-09-12T18:27:27Z

scripts/tasks/check-sandbox.ts

+}
+
+export const checkSandbox: Task = {
+  description: 'Typecheck the a sandbox',


syntax: Typo: 'Typecheck the a sandbox' should be 'Typecheck a sandbox' or 'Typecheck the sandbox'

Suggested change

description: 'Typecheck the a sandbox',

description: 'Typecheck a sandbox',

this one I will give you

greptile-apps · 2025-09-12T18:27:27Z

code/renderers/react/template/stories/docgen-components/8143-ts-react-fc-generics/input.tsx


+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it isn't an error in development but it is in sandbox
+// @ts-ignore unused props
 export const Text: React.FC<Props> = ({ padding = '0', margin }) => <>Text</>;


style: Consider using underscore prefix for unused parameters (_padding, _margin) as a TypeScript convention instead of ts-ignore, which would be more explicit about intentional non-usage

Suggested change

export const Text: React.FC<Props> = ({ padding = '0', margin }) => <>Text</>;

export const Text: React.FC<Props> = ({ padding: _padding = '0', margin: _margin }) => <>Text</>;

mrginglymus · 2025-09-15T17:05:19Z

@ndelangen task failed successfully, at last:

https://app.circleci.com/pipelines/github/storybookjs/storybook/104174/workflows/4910938e-9cef-493e-8c72-30c19fd7ffc9/jobs/893718

This job won't pass until #32442 is in.

storybook-app-bot · 2025-09-16T08:00:27Z

Package Benchmarks

^{Commit: 816d794, ran on 10 November 2025 at 10:17:58 UTC}

No significant changes detected, all good. 👏

ndelangen · 2025-09-23T10:24:24Z

code/lib/cli-storybook/src/sandbox-templates.ts

  skipTasks?: SkippableTask[];
+  /**
+   * Should the sandbox be type checked after build. Not part of skipTasks as the default answer
+   * will be 'no', at least initially
+   */
+  typeCheck?: boolean;


This could have been implemented with the skipTask array. Do you think that that is an easy adjustment to make, or difficult? If it's hard, I'm okay with it as-is.

Now that I understand how to use get-template, not that hard, just a lot of keyboard work.

The benefit is that, currently at least, adding type checking means conditionally modifying the sandbox slightly.

storybook/scripts/tasks/sandbox-parts.ts

Lines 223 to 225 in 4051541

if (template.typeCheck) {

await prepareTypeChecking(cwd);

}

There are a couple of options here, if we switch to skip-tasks:

replace that with a if (!skipTasks.includes('type-check'))

Update the sandbox definition to include this type checking

ndelangen · 2025-10-26T10:00:54Z

@mrginglymus Can you take another look at this PR?

1 thing I missed previously, is that the CircleCI config is actually generated based on a src and a circleci command, you can read about it in the readme in the .circleci folder.

mrginglymus · 2025-10-27T09:17:24Z

@ndelangen updated. latest failures appears to be caused (ish) by #32822 - storybook/test types reference external packages (which appear to have undeclared type dependencies).

mrginglymus · 2025-10-27T18:13:42Z

@ndelangen all green again! I guess sb10 is pulling in more test deps that are missing (upstream) their associated types.

mrginglymus added 4 commits September 12, 2025 08:55

Create check-sandbox task

f34122d

Remove typescript version override

4c198ed

We were pinning to a version that did not support a feature we were setting

Fixes

a2ac7da

Disable skipLibCheck

6b6e9b6

Let @types/mdx know we're using React

730f279

mrginglymus marked this pull request as ready for review September 12, 2025 18:25

greptile-apps bot reviewed Sep 12, 2025

View reviewed changes

snaps

6fa69bd

vanessayuenn assigned ndelangen Sep 15, 2025

ndelangen added build Internal-facing build tooling & test updates ci:normal labels Sep 15, 2025

Merge branch 'next' into tc-sb

f9c3d71

ndelangen changed the title ~~Typecheck sandboxes~~ Sandboxes: Typecheck check production storybook packages Sep 15, 2025

mrginglymus force-pushed the tc-sb branch 5 times, most recently from 4c28d88 to 87ff06b Compare September 15, 2025 16:43

Add circle ci config

cabc59e

mrginglymus force-pushed the tc-sb branch from 87ff06b to cabc59e Compare September 15, 2025 16:55

mrginglymus mentioned this pull request Sep 16, 2025

Type check production files #31555

Closed

8 tasks

Merge branch 'next' into tc-sb

59007d8

mrginglymus force-pushed the tc-sb branch from c7cb647 to 592fc7d Compare September 16, 2025 07:10

Install sandbox dependencies first

f6763fb

mrginglymus force-pushed the tc-sb branch from 592fc7d to f6763fb Compare September 16, 2025 07:20

Improve preparation of sandboxes for typechecking

d5a5789

ndelangen reviewed Sep 23, 2025

View reviewed changes

github-actions bot added the Stale label Oct 13, 2025

ndelangen added maintenance User-facing maintenance tasks and removed Stale labels Oct 26, 2025

Merge branch 'next' into tc-sb

0509e56

Add test types

8db83ae

mrginglymus requested a review from ndelangen October 27, 2025 20:05

ndelangen added 3 commits October 28, 2025 16:27

Merge branch 'next' into tc-sb

17d3f63

Merge branch 'next' into tc-sb

8a7a695

Merge branch 'next' into tc-sb

7c8f521

ndelangen removed the maintenance User-facing maintenance tasks label Oct 29, 2025

Merge branch 'next' into tc-sb

ba719e6

ndelangen mentioned this pull request Nov 6, 2025

[Tracking]: Overhaul CI setup #32936

Open

51 tasks

Merge branch 'next' into pr/mrginglymus/32447

816d794

ndelangen merged commit fca6e7d into storybookjs:next Nov 10, 2025
57 checks passed

github-actions bot mentioned this pull request Nov 10, 2025

Release: Prerelease 10.1.0-alpha.8 #32980

Merged

12 tasks

mrginglymus deleted the tc-sb branch November 10, 2025 11:10

This was referenced Nov 13, 2025

CLI: Implement design feedback #32984

Merged

Build: Add Rsbuild-based sandboxes #33039

Merged

Build: Make the git root the yarn workspace root #33079

Closed

coderabbitai bot mentioned this pull request Dec 3, 2025

Build: Fix sandbox path in ecosystem CI #33270

Merged

8 tasks

coderabbitai bot mentioned this pull request Dec 11, 2025

Rework Ember framework to use Vite #33048

Open

8 tasks

	description: 'Typecheck the a sandbox',
	description: 'Typecheck a sandbox',

	export const Text: React.FC<Props> = ({ padding = '0', margin }) => <>Text</>;
	export const Text: React.FC<Props> = ({ padding: _padding = '0', margin: _margin }) => <>Text</>;

Uh oh!

Sandboxes: Typecheck check production storybook packages #32447

Sandboxes: Typecheck check production storybook packages #32447

Uh oh!

Conversation

mrginglymus commented Sep 12, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Pinned typescript

Stricter tsconfig

Wrong version of react

@types/mdx and @mdx-js/react do not support React 19

@storybook/react has type errors in its production files

Still to do:

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Confidence score: 3/5

Summary by CodeRabbit

Uh oh!

nx-cloud bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrginglymus commented Sep 12, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

mrginglymus Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

mrginglymus Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

mrginglymus commented Sep 15, 2025

Uh oh!

storybook-app-bot bot commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

Uh oh!

ndelangen Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

mrginglymus Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

ndelangen commented Oct 26, 2025

Uh oh!

mrginglymus commented Oct 27, 2025

Uh oh!

mrginglymus commented Oct 27, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mrginglymus commented Sep 12, 2025 •

edited by coderabbitai bot

Loading

`@types/mdx` and `@mdx-js/react` do not support React 19

`@storybook/react` has type errors in its production files

nx-cloud bot commented Sep 12, 2025 •

edited

Loading

mrginglymus Sep 12, 2025 •

edited

Loading

storybook-app-bot bot commented Sep 16, 2025 •

edited

Loading