Update Storybook stories to CSF 3.0 format

[LFDanLu]

🙋 Feature Request

We need to update our existing Storybook stories from using storiesOf to the new CSF 3.0 format so that we can upgrade our Storybook version. See the comment by Kyle below about the expected work.

When starting a new component or hook add your name below or mention it in slack or standup to avoid two people working on the same one. Which isn't expected to be an issue until there are only a few left to refactor).

List of stories/packages to update (may or may not include the chromatic + subcomponent stories per package):

• [ ] useButton
• [ ] useCalendar
• [ ] dnd stories
• [ ] useGrid
• [ ] useFocusRing
• [ ] useHover
• [ ] useMove
• [ ] useMenu
• [ ] useModal
• [ ] useOverlayPosition
• [ ] useSelectableList
• [ ] aria Slider stories
• [ ] useSelectableList
• [ ] ActionBar
• [ ] ActionGroup
• [ ] Alert
• [ ] Breadcrumbs
• [ ] Button stories (all of em)
• [ ] ButtonGroup
• [ ] Calendar
• [ ] Card https://github.com/adobe/react-spectrum/pull/3148
• [ ] CardView https://github.com/adobe/react-spectrum/pull/3148
• [ ] Checkbox stories
• [ ] Color stories
• [ ] ComboBox stories
• [ ] Contextual help
• [ ] Datepicker stories
• [ ] Dialog
• [ ] Divider
• [ ] Form
• [ ] Icon
• [x] IllustratedMessage - https://github.com/adobe/react-spectrum/pull/3197
• [x] HelpText - https://github.com/adobe/react-spectrum/pull/3152
• [x] Label - https://github.com/adobe/react-spectrum/pull/3152
• [ ] Layout
• [x] Link - https://github.com/adobe/react-spectrum/pull/3146
• [ ] List
• [ ] ListBox
• [ ] Menu
• [x] Meter - https://github.com/adobe/react-spectrum/pull/3157
• [ ] Numberfield
• [ ] Overlays
• [ ] Pagination
• [ ] Picker
• [ ] Progress
• [ ] Provider
• [ ] Radio
• [ ] SearchField
• [ ] Sidenav
• [ ] Slider
• [x] Statuslight - https://github.com/adobe/react-spectrum/pull/3157
• [x] Switch - https://github.com/adobe/react-spectrum/pull/3129
• [ ] Table
• [ ] Tabs
• [ ] Tag
• [ ] Textfield
• [ ] Toast
• [ ] Tooltip/TooltipTrigger - https://github.com/adobe/react-spectrum/pull/3211
• [ ] Tree (not released)
• [x] View - https://github.com/adobe/react-spectrum/pull/3196
• [x] Well - https://github.com/adobe/react-spectrum/pull/3129
• [ ] spectrum-icons

🧢 Your Company/Team

RSP

[LFDanLu]

Prior work: https://github.com/adobe/react-spectrum/pull/2425

[snowystinger]

prior work was done with a codemod right? can we do that again?

[LFDanLu]

Perhaps? I haven't looked into it but if so that would be awesome. Otherwise this is a checklist that we can gradually chip away at. @reidbarber I think you used the codemod previously

[reidbarber]

Yeah, the codemod helped, but it definitely requires some manual cleanup to get them to a best-practice state for CSF. Mainly ending up with a lot of render functions referencing example components declared in the file. I did a decent amount, maybe easy to take a look at https://github.com/adobe/react-spectrum/commit/5cf946e671759bc1b820b8c4291f1e26012eafc1#diff-f28ec1c2b8aef4f9e1f35bf453f95dc0a84b7ba2b7b13d7e53824eef6ebfa9bd starting with Avatar. Some are probably good to go.

I think it might be easiest to do a few at a time and start with simpler components, rather than doing everything in one PR. This umbrella issue should definitely help.

[snowystinger]

Can we use the codemod to target one component at a time? might be good to combine how nice it is to look at just a single file at a time plus the ease of automating most of it

Can you put in a link to how to run the codemod when you have a chance. Just for easy reference

[reidbarber]

Codemods for reference:

to convert storiesOf to CSF:

npx sb migrate storiesof-to-csf --glob="**/Accordion.stories.tsx" --parser=tsx

to convert CSF 2 to CSF 3

npx sb migrate csf-2-to-3 --glob="**/Accordion.stories.tsx" --parser=tsx

I believe they use prettier, so you might need to format with our eslint config after running.

[ktabors]

Using the code modes does 50% of the work. There is one code mod to migrate to CSF and a second to migrate to CSF 3.0. That is the minimum work for a PR to be submitted. Additional optimizations and refactors are covered below.

Optimizations and refactors

• Generally, condense the number of stories.
  • We review the existing stories and determine if there is duplication with Chromatic or stories that could be moved to Chromatic.
• Many components story files have multiple renders functions; we should try to rewrite them so there is only the initial declaration.
• Once https://github.com/adobe/react-spectrum/pull/3123 is merged controls will be introduced and there are additional optimizations of reducing stories that could occur. This would be a second round of optimizations for components that have already been migrated to CSF 3.0.

Note: Some tests use story components and these tests may break. They should be fixable by adding an import and a couple lines of code, see https://github.com/adobe/react-spectrum/pull/3148/files#diff-3ef103560236269b49ca02cc46a7b9f7894b45739ce00c38da98ab4b385abe65R15-R29 for an example.

[LFDanLu]

Resolved by https://github.com/adobe/react-spectrum/pull/4399