Description

We need to integrate Storybook into our Experience Builder frontend application to streamline the development, documentation, and testing of UI components in isolation. This addition will improve our component-level testing and enhance collaborative workflows between developers.

XB's current UI components can be divided into three groups:

  1. some borrowed from Radix and unmodified
  2. some borrowed from Radix and customized
  3. some completely custom

The plan is to use Storybook for any of the components in group 2 and 3, and specifically for the new components in the recently delivered designs.

Stories GIF

CommentFileSizeAuthor
#14 output.gif463.73 KBsoaratul

Issue fork experience_builder-3486888

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

soaratul created an issue. See original summary.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Title: Implement storybook js in XB » Implement Storybook
Component: Documentation » Miscellaneous
Issue summary: View changes

tinarey made their first commit to this issue’s fork.

tinarey opened merge request !414

tinarey’s picture

tinarey commented

I was working on adding SB and a component last week as well and found this too late. I've merged my work (adds a button component and a fix for radix root making autodoc components too high). and opened an MR. Would be great to get this merged so we can split out the work for storybook components.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Status: Active » Needs work
Issue tags: -components +DX (Developer Experience)
finnsky’s picture

finnsky commented

I want to suggest this one for SDC components.
It is still in development, but already supports lot of things
https://www.npmjs.com/package/storybook-addon-sdc

Check Readme ;)

soaratul’s picture

soaratul commented

@finnsky Thanks for your suggestion it looks great, but we’re implementing Storybook for the XB React app’s UI, and not for SDCs.

finnsky’s picture

finnsky commented

Radix components also can be SDC :) And folow JSON schema definitions.

soaratul’s picture

soaratul commented

Below google sheet viewable for everyone having the list of all components used in XB that are not connected to Redux store and if we can write stories as of not or not with reason.
https://docs.google.com/spreadsheets/d/1h61Yo__ejYYSQrxHMboiEu7Tw5DS5tyf...

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: soaratul » Unassigned
Status: Needs work » Fixed

Fantastic work! 👏🏻

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Fixed » Needs work
Issue tags: +Needs screenshots

Can we please get a screenshot in the issue summary to show this off? 😄 Or better yet: a short screencast! 🤓

soaratul’s picture

soaratul commented
Assigned: Unassigned » wim leers
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new output.gif463.73 KB

@wim-leers Added gif for stories!

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: wim leers » Unassigned
Status: Needs review » Fixed
Issue tags: -Needs screenshots

Thanks, @soaratul! 😄

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.