Set up Storybook

[rnair-tw]

User Story

As a developer I want to set up storybook in our project So that I can facilitate component-driven development, improve collaboration, and streamline UI testing

Definition of Done

• Storybook is installed with proper config in the iw-complaint-manager repo.

  • Make sure it is it's own "module" by creating a iw-storybook folder in the root of iw-complaint-manager

  • The folder structure should be:

    .
    └── iw-complaint-manager/
      └── *iw-storybook/
          └── package.json
    
    *This will eventually be moved out into its own repo, but for the sake of easy importing we'll build it as a monorepo

• It's set up to work with MUI

• Autodocs functionality is implemented

• A sample story is visible

Resources:

Install for React + Vite Setup Integrate MUI + Storybook How to write a story in Typescript Implementing Automatic Documentation

Acceptance Criteria

Given Storybook has been installed and set up When I run npm run storybook Then it successfully launches a local dev server for Storybook.

Given Storybook is running locally When I view the page Then it shows a sample Storybook story

[rnair-tw]

Setting up a sample app: https://github.com/storybookjs/storybook/issues/25154