Storybook Implementation

[aggmoulik]

Description

We need Storybook to improve the reliability and consistency of our UI components. It allows us to develop and preview components in isolation without running the full app. This helps us test different states (loading, error, empty, variant props) quickly and ensures our design system remains consistent. Storybook also acts as living documentation for designers, QA, and new developers.

It will help the project to maintain components and create the design system while building features.

[linear]

OPE-531

[mwinel]

Hi @aggmoulik, I would love to take this on.

[mxkaske]

Challenging it. Do we really need storybook?

It adds one more layer of complexity.

Storybook is good for big teams with different scopes, lots of params,... We are using raw shadcn components and we could simply direct users to the official documentation.

I'd argue instead that we could improve the @openstatus/ui package and bring it back up to date (we are not using it anymore after splitting the status page, dashboard and web apps).

[aggmoulik]

Hey @mxkaske Thank you for the comment. Yes, I also discovered that @openstatus/ui is not up to date. As I have another issue opened for using a common package library. As I can see status page, dashboard and web apps all use different css for a common button component.

Can you help us in which component package are up to date and we can then start planning migration plan for up-to dating the package.

[mxkaske]

Yes! Either dashboard or status page should have the correct globals.css that can be used for the ui package.

I believe you can even start kicking out every component and simply re-install raw shadcn components in the ui package. We are mainly overriding the the styles via className props. (In fact this is intended to easily update shadcn components - so keep the components raw as well).