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
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.iw-storybook
folder in the root ofiw-complaint-manager
The folder structure should be:
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