feat: Storybook integration for UI components

[anjy7]

What does this PR do?

Added Storybook config

Fixes #973

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change adds a new database migration
• This change requires a documentation update

How should this be tested?

• Test A
• Test B

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

@anjy7 is attempting to deploy a commit to the formbricks Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[anjy7]

Will be configuring package.json to get UI from workspace and will add stories to render components on storybook soon

[anjy7]

Also just to let you know - Earlier I was facing issues in storybook installation and upon inspection, I found these 2 helpful discussions -

For prettier-plugin-tailwindcss => tailwindlabs/prettier-plugin-tailwindcss#207
For prettier - tailwindlabs/prettier-plugin-tailwindcss#188

and after downgrading versions of prettier-plugin-tailwindcss and prettier, storybook worked perfectly.

Basically because Storybook isn't compatible with prettier V3

However I'll try to upgrade prettier-plugin-tailwindcss to back to what it was to see if it still breaks. But we'll have to use the downgraded prettier most probably..

[jobenjada]

Lovely, great progress! Please mark this PR as ready to review once it is :)

[jobenjada]

@anjy7 Any updates on this one? Our Design System is ready and we are keen to release the first batch of issues to build out components :)

[anjy7]

@anjy7 Any updates on this one? Our Design System is ready and we are keen to release the first batch of issues to build out components :)

Yup, almost done, need to write the story for the button component

[anjy7]

Hey @jobenjada, I might need some help with tailwind config for the storybook workspace. I have added tailwind.config.js postcss.config.js which import the shared configs still for some reason the CSS isnt showing up in the storybook.
Here's the current state -

Button is rendering from ui components and I can add varients/sizes to it as well. But the css isnt reflecting..

[Palanikannan1437]

I have added tailwind.config.js postcss.config.js which import the shared configs still for some reason the CSS isnt showing up in the storybook.
Here's the current state -

Button is rendering from ui components and I can add varients/sizes to it as well. But the css isnt reflecting..

Hey @anjy7, you'll have to add the storybook packages' source files' path to the "content" of the Tailwind config while extending it.

https://storybook.js.org/recipes/tailwindcss

Follow the above carefully, and you should be good to go

And the next change would be using tsup as the bundler/in the build step instead of vite since we use that across the monorepo.

You can follow the bellow blog as a reference for that. Cheers 🙌

https://allenhwkim.medium.com/react-library-with-typescript-and-storybook-in-5-minutes-9031e0f2d755

[anjy7]

Also I figured out why tailwind wasn't working 🤓. Now it works!!!! @Palanikannan1437 @jobenjada
Edit: have added tsup as the bundler in the build step..

[anjy7]

Here's the demo @jobenjada @Palanikannan1437 -
https://www.loom.com/share/2dc9fa6668f142c490ab7fff38c52798?sid=b7115da5-dd89-48a5-bbdf-59214ae7fe41

Also as asked, pnpm dev --filter=storybook will work to start the storybook..

[anjy7]

Here's the demo @jobenjada @Palanikannan1437 - https://www.loom.com/share/2dc9fa6668f142c490ab7fff38c52798?sid=b7115da5-dd89-48a5-bbdf-59214ae7fe41

Also as asked, pnpm dev --filter=storybook will work to start the storybook..

Just noticed that the dropdown for variant and size is not visible in the loom video, basically there's a dropdown for the available variants and size...fyi @jobenjada

[mattinannt]

@anjy7 Thanks a lot for the PR 😊 Looks great 👍 💪

We recently changed the structure of our @formbricks/ui package. Please pull the latest changes (git pull origin main) and make sure your tailwindconfig works with the new changes (see https://github.com/formbricks/formbricks/blob/main/packages/tailwind-config/tailwind.config.js for reference).

Also I would like to use the components from @formbricks/ui directly. Please add the Button.stories.ts as stories.ts to packages/ui/Button/ and make sure storybook looks in the ui package for stories (and excludes node_modules folder if possible).

For the prettier config I would prefer if we can stay on prettier 3 for most of the repository. Can we use prettier 2 only for the storybook app?

[anjy7]

@anjy7 Thanks a lot for the PR 😊 Looks great 👍 💪

We recently changed the structure of our @formbricks/ui package. Please pull the latest changes (git pull origin main) and make sure your tailwindconfig works with the new changes (see https://github.com/formbricks/formbricks/blob/main/packages/tailwind-config/tailwind.config.js for reference).

Also I would like to use the components from @formbricks/ui directly. Please add the Button.stories.ts as stories.ts to packages/ui/Button/ and make sure storybook looks in the ui package for stories (and excludes node_modules folder if possible).

For the prettier config I would prefer if we can stay on prettier 3 for most of the repository. Can we use prettier 2 only for the storybook app?

Sure @mattinannt, I'll make the changes and try to use prettier 2 only for the storybook 🚀

[anjy7]

Hey @mattinannt, I have shifted the stories to packages/ui/{Component_Name}/ and upgraded the global version of prettier and kept the downgraded version only for the storybook app. I don't think we can exclude the node_modules in the storybook because of prettier and some other storybook specific packages ( Please let me know if there's any solution to this ). Other than this everything looks good, please have a look :)

[mattinannt]

@anjy7 Thanks a lot for making the changes :-) Great job!
I only changes a few small things; e.g. because the colors were missing in the tailwind config the highlight button in green didn't work correctly. Now I inherited the tailwind config for storybook from the common config in the packages.

I will merge the PR into main now 😊