Set Up Storybook.js for Component Driven UI Development, UI Testing and Documentation

[FelixTJDietrich]

Why Storybook?

Storybook allows us to develop and test components in isolation, making it easier to manage, debug, and maintain our UI. It also serves as a single source of truth for our components, improving team collaboration and reuse.

Read more about it here: Why Storybook?

Tasks

Each task can be a separate issue or a checklist item in this issue, adjust as needed.

• [x] Install Storybook:

  • Add Storybook to our Angular client.
  • Ensure all necessary dependencies are installed.

• [x] Configure Storybook:

  • Set up the main configuration files (main.ts, preview.ts, etc.).
  • Ensure Storybook recognizes our project’s components.

• [x] Create Initial Example Stories:

  • Write stories for a few key components to serve as examples.
  • Demonstrate different states and variations of the components.
  • We can reference spartan/ui, they use storybook and we can also have an ui folder in our project for general components as design system, e.g. buttons, etc.
  • We are using Angular CDK and build our components on top of it (https://github.com/angular/components)
  • We want to use Class Variance Authority for our components https://cva.style/docs

• [x] Add Essential Addons:

  • Reseach and identify essential addons for our project.
  • Install and configure useful addons.

• [x] Integrate with CI/CD:

  • Checkout chromatic as solution for visual regression testing, pricing is free for open source projects.
  • Set up a workflow to build and deploy Storybook automatically.
  • Ensure the deployed Storybook is accessible to the team.

• [x] Documentation:

  • Document the process of adding new stories and using Storybook.
  • Setup best practices for writing components and stories, e.g. dumb components, etc.

Acceptance Criteria

• Storybook is successfully installed and configured.
• Initial stories for key components are created and demonstrate various states.
• Essential addons are integrated and functional.
• Storybook builds and deploys as part of the CI/CD pipeline.
• Documentation is provided, and the team can read up on training documentation for using Storybook properly.