Storybook: Missing stories for components

[mirka]

Some @wordpress/components components don't have any stories in the Storybook, making it hard to audit or discover.

A quick list of the missing ones

$ cd packages/components/src && comm -23 <(find . -maxdepth 1 -type d | sort) <(find . -type d -name  'stories' | sed -E 's/(.+)\/stories/\1/g' | sort)

./animation
./autocomplete
./circular-option-picker
./clipboard-button
./color-control
./color-list-picker
./composite
./dashicon
./dimension-control
./disclosure
./focusable-iframe
./footer-message-control
./higher-order
./isolated-event-container
./menu-group
./menu-item
./mobile
./palette-edit
./shortcut
./style-provider
./ui
./utils

We should try to add stories when appropriate.

[bangank36]

@mirka can external contributor contribute to the missing story? I am working with Gutenberg components and notice some missing components' story as well. thx

[mirka]

@bangank36 Thanks for the offer! Which one specifically are you planning to add?

[bangank36]

I re-run your suggested commands for the list of the missing stories again

Detail status of Storybook stories

Edited on 08-Aug-2023

Component	TypeScript	Storybook
./animation	✅	➖
./autocomplete	✅	❌
./clipboard-button	✅	❌ Deprecated
./color-control	➖	➖
./composite	➖	➖
./dashicon	✅	❌
./disclosure	➖	➖
./focusable-iframe	❌	❌
./footer-message-control	➖	➖
./higher-order	➖	➖
./isolated-event-container	✅	❌
./menu-group	✅	✅ PR
./menu-item	✅ PR	✅ PR
./mobile	➖	➖
./shortcut	✅	✅ 53627
./style-provider	✅	➖
./ui	➖ #52953	➖
./utils	➖	➖

Though there are some components I am not sure wether they should have stories or not, so I use ➖ to mark them as unknown, maybe a Gutenberg code owner can provide insights for them

---

I think I can add stories for menu-group and menu-item, so far only menu-item-choice has story

• Other side notes on /ui, which is referred as Next Component System, it has some stories on storybook

1. FormGroup
2. Spinner
3. Tooltip
   Should ui be placed on separated category like Next Component? When first working with components I tried to import FormGroup from @wordpress/componets only to find out that it is part of other packages @wordpress/components/ui

[mirka]

I think I can add stories for menu-group and menu-item, so far only menu-item-choice has story

Yes, I think menu-group might be a good one to start. menu-item also needs a story, but in general it will be more efficient to migrate it to TypeScript first (part of #35744).

• Other side notes on /ui, which is referred as Next Component System, it has some stories on storybook

Thanks for reminding me about these, we've been meaning to clean them up a bit 😅 (#52953)

[bangank36]

menu-item

I can see prevous effort of converting menu-item to typescript here #37020, will keep track on this.
So menu-group as the start for amending story 👍

cc: @mirka for the pending PR for menu-group story

[bangank36]

@mirka I submitted the PR and there is ⚠️ Type of PR label error, which should be adding by the code owner right? Thnks

[skorasaurus]

@mirka I submitted the PR and there is ⚠️ Type of PR label error, which should be adding by the code owner right? Thnks

@bangank36 I took care of this for you and added the label to the PR.

[bangank36]

@bangank36 I took care of this for you and added the label to the PR.

I noticed, thank you so much @skorasaurus 🙇

[mirka]

FYI our Storybook is very broken right now ☹️ #53502

We'll try to get it fixed as soon as possible.

[mirka]

FYI our Storybook is very broken right now ☹️ #53502

Should be fixed soon by #53520 🎉

Some related follow-up work is need on #53541

[bangank36]

Should be fixed soon by #53520 🎉

That's great news, then I can contribute to the stories of MenuItem as followed up of the merged PR #53132, WIP Stories can be found on draft PR #53613

• There is some issue with parsing JSDoc and Types controls on Storybook, I guess it is related to forwardRef, working on it...

Some related follow-up work is need on #53541

Per my understanding, it's the removal of subcomponents tab on Storybook V7 that leads to this task?

I also noticed some ongoing discussions and complains about this feature is removed upon upgrading as well
developer questions , [Feature Request]: Subcomponents support

Do you think it worth follow the workaround suggestions to bring back the subcomponents while waiting for the #53541 to be completed? As I can see some V7 Storybook that support the subcomponents eg:
@psui preview.tsx / HoverCard stories

[bangank36]

@mirka Thanks for your valuable feedback on the recent PRs of MenuItem and Shortcut 🙇 , I'd like to keep contributing to Gutenberg, so far Text has not migrated to type and has no stories, I followed the checklist and I found some notes to get started

Text (packages/components/src/text) (check truncate behaviors noted in this #38842 (review), try #38842 (comment) from adjustLineHeightForInnerControls)

[mirka]

I'd like to keep contributing to Gutenberg, so far Text has not migrated to type and has no stories, I followed the checklist and I found some notes to get started

Text (packages/components/src/text) (check truncate behaviors noted in this #38842 (review), try #38842 (comment) from adjustLineHeightForInnerControls)

@bangank36 Wonderful. Let us know if you have any questions.

[ciampo]

Hey @bangank36 , just wanted to note that the Text component is being refactored to TypeScript in #54953 — although I'm not sure we'll also look at improving the truncate behaviour (like suggested in the notes that you quoted above).

I can see that a few more components now have stories. In the meantime, we've also tidied up (and removed) the ui folder.

What's left to track in this issue?

[bangank36]

@ciampo I just updated the tracking table here #36128 (comment)
On the Storybook column there are some leftovers components with no Stories, do you think these worth invest to?

[ciampo]

Probably the only component that we could add stories for is Autocomplete — every other component listed there is deprecated or discouraged (as it is the case for dashicons).

Do you have capacity to look into it?

[bangank36]

I will look into it if there is no PR currently! @ciampo

[ciampo]

I will look into it if there is no PR currently! @ciampo

Thank you! I'm not sure it's going to be easy to do so, because I vaguely remember the component being quite tightly coupled with other areas of Gutenberg. But please do give it a try and let me know how it goes!

[mirka]

Closing this out since we basically have full coverage now, and a story for Autocomplete may be impractical. Thank you for all your help @bangank36!