Prismm Frontend Docs

Appearance

Storybook and chromatic: ​

Storybook ​

Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and many other frameworks. It allows developers to create components independently and showcase their behaviors in various states without needing to run the full app. Storybook helps build robust UIs faster by breaking down the UI into manageable, reusable pieces that can be tested and documented outside of the main application context.

Chromatic ​

Chromatic is a cloud service created by the developers of Storybook. It simplifies the process of hosting and managing Storybooks online, providing tools for visual testing and collaboration. Chromatic automates capturing snapshots of components, making it easy to spot visual bugs and document changes over time. It integrates directly with your version control system to track component changes in every commit.

Our chromatic can be found here

If you don't have access, message Tom on teams or at tom@prismm.com to request access.

Integration and Usage ​

We use Chromatic to publish our Storybooks. Currently, updates to our Storybook are managed manually from the master branch by running:

bash
yarn chromatic

Storybook Project Structure ​

Our Storybook is managed in a dedicated application within our monorepo, located under the apps/ant-storybook folder. This app consolidates all the stories from our various modules. To maintain clarity and organization, please follow the existing structure when adding new stories:

  1. Create New Stories: Use the examples provided in the app as templates.
  2. Organize: Keep the app organized with folders corresponding to each module or component type.

Component Driven Development (CDD) ​

We aim to practice Component Driven Development (CDD), focusing on designing "pure" components that are devoid of side effects and logic. These pure components are then used as building blocks for more complex components that include business logic and state management. This approach is demonstrated in our Storybook examples and detailed further in the following resources: