Storybook: Convert stories to CSF 3 #435

daneah · 2022-10-31T01:29:29Z

This change: (check at least one)

Is this a breaking change? (check one)

Yes
No

Is the: (complete all)

Title of this pull request clear, concise, and indicative of the issue number it addresses, if any?
Test suite(s) passing?
Code coverage maximal?
Changeset added?
Component status page up to date?

What does this change address?

Resolves #244

How does this change work?

Note

Note to reviewers: The fact that Chromatic reports on visual changes and isn't reporting on much here should be a strong signal of parity; the main reported differences were intentional ones due to improvements I made along the way, or were otherwise trivial ones. You can see the full change set here.

Convert Alert stories from MDX to CSF.

Compare the new page to the current page.

Notable improvements:

Remove source: { type: 'code' } } from the React story configuration so that the Code option below examples shows copy/pastable code instead of some raw story code. This is how the web component stories already work.
We get most all of the value of how the Docs tab used to work, with less code and configuration (ostensibly).
The web component Storybook will now automatically show the component's JSDoc description at the top of its Docs page. I can't think of a way to make that work for the React component beyond doing dynamic code generation instead of a functional wrapper like we do now.
Several inconsistencies between the web component and React component stories, such as missing stories or value differences, have been freshly aligned.
Many components' stories have had the defaultArgs and the argTypes extracted to a storyArgs module so both the web component and the React component story can make use of them.

Some things to look out for:

It's more cumbersome to limit which controls show up for a given story—it used to be just those specified in argTypes, but now it's all of them unless otherwise specified in a story's include/exclude parameters. Maybe this is fine; more stories end up being something you can fiddle with and link to for collaborative purposes, which is useful.
It's no longer easy to sort stories in a very specific order. They're easiest to sort alphabetically (default), and anything aside from that requires coming up with some kind of scheme.
addon-storysource has not yet caught up to CSF 3 and doesn't display any code in the Story panel when using the Canvas. The code block on the Docs tab does still work, however.
- Related issue: addon-storysource does not capture stories written in StoryObj (CSF v3) storybookjs/storybook#17975

Additional context

The two story files look more similar than ever—the only difference is really that one uses e.g. the <pharos-alert> web component while the other uses e.g. the <PharosAlert> React component.

changeset-bot · 2022-10-31T01:29:32Z

🦋 Changeset detected

Latest commit: 945a8d9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@ithaka/pharos	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2022-10-31T01:31:04Z

size-limit report 📦

Path	Size
packages/pharos/lib/index.js	46.46 KB (-0.04% 🔽)

* develop: ToggleButton: indicate toggle button state on underlying button elements (#438) Tooltip, DropdownMenu: replace popperjs with floating-ui (#434)

daneah · 2022-11-06T21:16:38Z

.storybook/docsPageConfig.jsx

+import {
+  ArgsTable,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs';
+
+import { GuidelineLink } from '@config/GuidelineLink';
+
+export const configureDocsPage = (componentName) => {
+  return () => (
+    <>
+      <Title />
+      <Subtitle />
+      <Description />
+      {componentName && <GuidelineLink path={componentName} />}
+      <Primary />
+      <ArgsTable story={PRIMARY_STORY} />
+      <Stories />
+    </>
+  );
+};


This is a noteworthy file; I extracted the common ordering of items for the Docs tab of each component into a reusable piece. This was previously specified implicitly in each story using MDX, but now gets added in the parameters.docs.page configuration of the default export for each component.

daneah · 2022-11-06T21:17:04Z

.storybook/main.js

+  features: {
+    previewCsfV3: true,
+  },


This allows us to use Component Story Format (CSF) version 3 in the stories, and will become the default in Storybook v7.

This necessitated getting rid of dynamic component titles, namely for showing e.g. "Pharos 12.13.0" in the left nav. I opted instead to inject the version as the title of the intro page. I had to wrestle with MDX a bit to do this; it appears the "components" and "props" features documented on their site are v2 features, but our Storybook is still using v1. I attemped to enable the v2 preview, but HTML comments cause a parsing error currently and we need them for our README setup to function properly.

* develop: Tabs: fix initial tab selection in more cases (#449) Storybook: add eslint-plugin-storybook and fix issues (#446) feat(storybook): install Measure and Outline addons (#445) Docs: update copy for Button's on-background usage (#444) Storybook: Convert stories to CSF 3 (#435) feat(tabs): fire event when tab selected programmatically (#442) ToggleButton: indicate toggle button state on underlying button elements (#438) Tooltip, DropdownMenu: replace popperjs with floating-ui (#434) Site: improve imports (#433)

* feat(storybook): try CSF for Alert stories * chore(storybook): convert alert WC story to CSF 3 * chore(storybook): convert alert React story to CSF 3 * chore(storybook): extract DocsPage config and convert breadcrumb to CSF3 * chore(storybook): convert Button stories to CSF 3 * chore(storybook): convert Checkbox stories to CSF 3 * chore(storybook): convert CheckboxGroup stories to CSF 3 * chore(storybook): convert Combobox stories to CSF 3 * chore(storybook): convert DropdownMenu stories to CSF 3 * chore(storybook): convert DropdownMenuNav stories to CSF 3 * chore(storybook): convert Footer stories to CSF 3 * chore(storybook): convert Header stories to CSF 3 * chore(storybook): convert Heading stories to CSF 3 * chore(storybook): convert Icon stories to CSF 3 * chore(storybook): convert ImageCard stories to CSF 3 * chore(storybook): convert InputGroup stories to CSF 3 * chore(storybook): convert Layout stories to CSF 3 * chore(storybook): convert Link stories to CSF 3 * chore(storybook): convert LoadingSpinner stories to CSF 3 * chore(storybook): convert Modal stories to CSF 3 * chore(storybook): convert Pagination stories to CSF 3 * chore(storybook): convert ProgressBar stories to CSF 3 * chore(storybook): convert RadioButton stories to CSF 3 * chore(storybook): convert RadioButtonGroup stories to CSF 3 * chore(storybook): convert Select stories to CSF 3 * chore(storybook): convert Sidenav stories to CSF 3 * chore(storybook): convert Tabs stories to CSF 3 * chore(storybook): convert TextInput stories to CSF 3 * chore(storybook): convert Textarea stories to CSF 3 * chore(storybook): convert Toast stories to CSF 3 * chore(storybook): convert ToggleButtonGroup stories to CSF 3 * chore(storybook): convert Tooltip stories to CSF 3 * chore(storybook): convert Page stories to CSF 3 * chore(storybook): convert Styles stories to CSF 3 * fix(storybook): make diverged stories consistent * chore(storybook): clean up imports * fix: add type declarations and remove console log * chore: add changeset * fix(storybook): fix React Storybook build * feat(storybook): enable new build options This necessitated getting rid of dynamic component titles, namely for showing e.g. "Pharos 12.13.0" in the left nav. I opted instead to inject the version as the title of the intro page. I had to wrestle with MDX a bit to do this; it appears the "components" and "props" features documented on their site are v2 features, but our Storybook is still using v1. I attemped to enable the v2 preview, but HTML comments cause a parsing error currently and we need them for our README setup to function properly. * fix(storybook): update webpack config to fix GitHub Actions * fix(storybook): remove new Babel config to fix build * fix(storybook): remove inline render to try fixing build * fix(storybook): remove story store v7 to fix build

feat(storybook): try CSF for Alert stories

8e91304

daneah added status/code review storybook component/alert labels Oct 31, 2022

daneah requested a review from a team as a code owner October 31, 2022 01:29

daneah requested review from SMQuazi, jialin-he and satya-achanta-venkata and removed request for a team October 31, 2022 01:29

daneah changed the title ~~feat(storybook): try CSF for Alert stories~~ Storybook: Try CSF for Alert stories Oct 31, 2022

jialin-he approved these changes Oct 31, 2022

View reviewed changes

daneah added 3 commits November 3, 2022 12:25

Merge branch 'develop' into feat/try-csf-for-alert

ecec736

* develop: ToggleButton: indicate toggle button state on underlying button elements (#438) Tooltip, DropdownMenu: replace popperjs with floating-ui (#434)

chore(storybook): convert alert WC story to CSF 3

40f8c66

chore(storybook): convert alert React story to CSF 3

f4f6eff

daneah changed the title ~~Storybook: Try CSF for Alert stories~~ Storybook: Convert stories to CSF 3 Nov 3, 2022

daneah added 2 commits November 3, 2022 20:18

chore(storybook): extract DocsPage config and convert breadcrumb to CSF3

7cd2318

chore(storybook): convert Button stories to CSF 3

9642210

daneah mentioned this pull request Nov 4, 2022

Upgrade to MDX 2 #440

Closed

chore(storybook): convert Checkbox stories to CSF 3

6867866

daneah marked this pull request as draft November 4, 2022 12:41

daneah added 8 commits November 5, 2022 10:18

chore(storybook): convert CheckboxGroup stories to CSF 3

89df497

chore(storybook): convert Combobox stories to CSF 3

9f8d1de

chore(storybook): convert DropdownMenu stories to CSF 3

e7dfe75

chore(storybook): convert DropdownMenuNav stories to CSF 3

365bff5

chore(storybook): convert Footer stories to CSF 3

8b04c0b

chore(storybook): convert Header stories to CSF 3

00709f7

chore(storybook): convert Heading stories to CSF 3

142a4c0

chore(storybook): convert Icon stories to CSF 3

1c7104f

daneah added 9 commits November 6, 2022 12:57

chore(storybook): convert Textarea stories to CSF 3

97858fd

chore(storybook): convert Toast stories to CSF 3

96e62d0

chore(storybook): convert ToggleButtonGroup stories to CSF 3

e482bd4

chore(storybook): convert Tooltip stories to CSF 3

40f11b2

chore(storybook): convert Page stories to CSF 3

294564c

chore(storybook): convert Styles stories to CSF 3

94d32a1

fix(storybook): make diverged stories consistent

bb18217

chore(storybook): clean up imports

f3984f6

fix: add type declarations and remove console log

8f40e82

daneah marked this pull request as ready for review November 6, 2022 21:04

daneah added 2 commits November 6, 2022 16:05

chore: add changeset

50551e6

fix(storybook): fix React Storybook build

85773d8

daneah added infrastructure and removed component/alert labels Nov 6, 2022

daneah commented Nov 6, 2022

View reviewed changes

daneah added 5 commits November 6, 2022 22:19

fix(storybook): update webpack config to fix GitHub Actions

307081b

fix(storybook): remove new Babel config to fix build

6d2dee4

fix(storybook): remove inline render to try fixing build

c3fa1f4

fix(storybook): remove story store v7 to fix build

393504a

satya-achanta-venkata approved these changes Nov 7, 2022

View reviewed changes

Merge branch 'develop' into feat/try-csf-for-alert

945a8d9

chrisjbrown approved these changes Nov 7, 2022

View reviewed changes

jialin-he approved these changes Nov 7, 2022

View reviewed changes

daneah merged commit 6cbeb91 into develop Nov 7, 2022

daneah deleted the feat/try-csf-for-alert branch November 7, 2022 15:56

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

Version Packages #450

Merged

daneah removed the status/code review label Mar 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook: Convert stories to CSF 3 #435

Storybook: Convert stories to CSF 3 #435

daneah commented Oct 31, 2022 •

edited

changeset-bot bot commented Oct 31, 2022 •

edited

github-actions bot commented Oct 31, 2022 •

edited

daneah Nov 6, 2022

daneah Nov 6, 2022

Storybook: Convert stories to CSF 3 #435

Storybook: Convert stories to CSF 3 #435

Conversation

daneah commented Oct 31, 2022 • edited

changeset-bot bot commented Oct 31, 2022 • edited

🦋 Changeset detected

github-actions bot commented Oct 31, 2022 • edited

size-limit report 📦

daneah Nov 6, 2022

Choose a reason for hiding this comment

daneah Nov 6, 2022

Choose a reason for hiding this comment

daneah commented Oct 31, 2022 •

edited

changeset-bot bot commented Oct 31, 2022 •

edited

github-actions bot commented Oct 31, 2022 •

edited