Uh oh!
There was an error while loading. Please reload this page.
Type the story files with Storybook's CSF types - #2447
Merged
Conversation
tsconfig excluded src/**/*.stories.js, so 70 story files went unchecked.
Removing the exclude surfaced 203 errors; typing each file's meta as `Meta`
and its stories as `StoryObj` clears most of them at the source, and the
rest were fixed individually. Types come in through a JSDoc `@import`,
since these are `.js` files.
Typing the metas turned up several argTypes that do not match Storybook's
API, which is the part worth reviewing rather than the sweep:
- Eight `options` label maps became an `options` array plus `control.labels`,
the spelling Storybook 10 types. The object form still works at runtime,
and every label/value pair and its order is preserved.
- `type: { name: 'enum' }` is malformed -- `SBEnumType` requires `value` --
so the eight occurrences now carry the same list already in `options`.
- `fontSizeControlConfig` had `options` nested inside `control`, where
Storybook does not look for it. Its sibling in the same file does not.
- `object_shape` used `type: 'select'`, a control type in the arg-type slot.
- Four `table.defaultValue.summary` values were a boolean or a number where
Storybook wants a string, matching what their neighbours already do.
`generateGroundNavProps` also declared `@param {defaultArgs}`, using a value
as a type. Story renders are otherwise untouched; DOM lookups in demo
`useEffect` hooks gained the null guards their types require.
dist is byte-identical and the built story index is unchanged: the same 337
stories, names and types.
Fixes#2429
|
✅ Deploy Preview for cloudfour-patterns ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
tsconfig.jsonexcludedsrc/**/*.stories.js, so 70 story files were never type-checked. Removing the exclude surfaced 203 errors. Typing each file's meta asMetaand its stories asStoryObjclears most of them at the source — the render parameter's type flows from the annotation — and the remainder were fixed case by case. The types arrive through a JSDoc@import, because these are.jsfiles and Storybook's glob only picks up.js.The mechanical sweep is the bulk of the diff and the least interesting part of it. What is worth a reviewer's time is that typing the metas turned up a handful of
argTypesthat do not match Storybook's API — listed below, because a few of them change what the Controls panel and docs tables do.Screenshots
Testing
The sweep itself is covered by
tsc. These steps are for the API corrections, which are the only changes that can alter what you see:None, Left, Center, Right, Full, Wide, Ratio should offer21:9through1:2, and Vertical Alignment should offerTop, Center, Bottom. Pick a few and confirm the example re-renders as it does on the production library.None, Full, Wideand changing it should still move the cards.big,small,heading-n-2and so on. This one is a genuine fix — see below — so compare it against production, where the list may be missing.circleandsquare.dismissable,iconand theparagraphsarg rather than blanks.The API corrections, in detail
Eight
optionslabel maps. Several argTypes passed an object tooptionsas a label→value map, which is the Storybook 5/6 spelling. Storybook 10 types itreadonly any[]and takes labels fromcontrol.labels. The object form still works at runtime — the control doesArray.isArray(options) ? … : Object.keys(options)— so this is a spelling change, not a repair. Every label/value pair and its order is preserved, verified by extracting both forms and comparing them pair for pair.type: { name: 'enum' }, eight occurrences. Malformed:SBEnumTyperequires avaluearray. Each of these sits directly beside anoptionslist holding exactly those values, sovaluenow carries the same list. This affects the docs table's Type column, not the control.fontSizeControlConfighadoptionsnested insidecontrol. Storybook reads the option list off the arg type, not off the control, so it was not finding it.colorControlConfig, ten lines above in the same file, does it correctly — which is what makes this a mistake rather than a convention. This is the one change that may fix a visibly broken control, hence the testing step above.object_shape: { type: 'select' }.selectis a control type in the arg-type slot;typetakes a scalar name or anSBType. Nowoptionspluscontrol: { type: 'select' }.Four
table.defaultValue.summaryvalues were a boolean or a number where Storybook wants a string. Their neighbours in the same files already write'div'and'Get notifications', so'false'and'2'follow the local convention.generateGroundNavPropsdeclared@param {defaultArgs}— a value used as a type. Storybook hands stories a loose args record, so the parameter is now typed as that.These overlap #2428's territory, since they are mistranslations from the CSF migration. I fixed them here only because they are what the type errors were, and left everything else for that audit.
One correction to the plan
The decision comment expects this to catch bad parameter names — the
docs.story.heightthat #2420 found doing nothing. It does not.Parametersis declared{ [name: string]: any }, so anything insideparameterspasses; a doubly-misspelleddocs.stroy.hieghttype-checks clean. What the CSF types do catch is unknown top-level story keys (TS2353), which is how three of the findings above surfaced. Worth knowing before anyone relies on this for parameters.Scope notes
src/prototypes/is excluded fromtsconfig, so its three story files are untouched. One of them still imports with a.tsextension, like the eight fixed here.distis byte-identical tomain, and the built story index is unchanged: the same 337 entries, names and types.