lifeomic / chroma-react

Open source design system from LifeOmic, built with React

https://lifeomic.github.io/chroma-react/

MIT License

48 stars 9 forks source link

Update first half of T- Components to Storybook CSF3 #396

Closed MMFane closed 1 year ago

MMFane commented 1 year ago

What Was Changed

Common to all CSF3 updates

Replaced now-defunct CSF 1 & 2 types ComponentStory and ComponentMeta with StoryObj and Meta respectively
Updated all stories to the new single-const format
Removed titles from ungrouped components whose name is the same as their filename
Created Story type and added it to all stories for increased type safety

Unique to this PR

Tabs
- Added a story for manualControl, which was unable to be demonstrated by adjusting the props
- It's a halfway solution that could be improved
  - the onClick() functions are obfuscated in Storybook, so a completely new Chrōma user without reference to usage of Tabs in phc-ui, for example, may not quite be able to figure out how to set this up.
  - the proper way to do manualControl within a story involves the Storybook Actions and/or State add-ons.
  - I spent some time looking into these and decided it could wait until later because it was going to be a big change and take some time.
the other two components should look and behave the same as before

Screenshots

New `Tabs` Manual Control Story

https://github.com/lifeomic/chroma-react/assets/5824697/a7a3c3c0-8c0c-4e08-b360-587dc9a464b1

In-Browser	In VS Code

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 5.2.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket: