This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
Storybook is a powerful development environment for UI components. It allows you to build UI components in isolation, making it easier to develop, test, and document your components independently from your main application.
### Purpose in the Development Process
1.**Component Development**: Develop and test UI components in isolation.
3.**Documentation**: Automatically document components and their props.
4.**Collaboration**: Share components with your team or stakeholders for feedback.
### How to Use Storybook
1.**Start Storybook**:
Run the following command to start the Storybook development server:
```bash
npm run storybook
```
This will start Storybook on port 6006. Open [http://localhost:6006](http://localhost:6006) in your browser to view your component library.
2.**Build Storybook**:
To build a static version of Storybook for deployment, use:
```bash
npm run build-storybook
```
3.**Running Storybook Tests**:
Storybook tests can be run using:
```bash
npm run test-storybook
```
For CI environments, use:
```bash
npm run test-storybook:ci
```
4.**Writing Stories**:
Create `.stories.tsx` files alongside your components to define different states and variations of your components.
By integrating Storybook into our development workflow, we can streamline UI development, improve component reusability, and maintain a consistent design system across the project.
