flexprice/flexprice-front
Add Storybook Stories for Existing React Components
Ouverte
#159 ouverte le 10 avr. 2025
good first issuehacktoberfestreactstorybook
Métriques du dépôt
- Stars
- (32 étoiles)
- Métriques de merge PR
- (Merge moyen 1j 1h) (116 PRs mergées en 30 j)
Description
📚 Description
We are building a React project and want to integrate Storybook to help us visualize and document our UI components in isolation.
This issue is perfect for first-time contributors and those new to open-source. You'll be helping us create *.stories.tsx or *.stories.jsx files for our React components so they can be showcased in Storybook.
🛠️ Task Details
- Locate components inside the
src/components/directory - For each component, create a corresponding Storybook story file in
src/stories/(or alongside the component if our project prefers that) - Follow the Component Story Format (CSF) to write your stories
- Add multiple variations of the component, such as:
- Default / Primary
- Secondary
- Disabled
- Loading (if applicable)
🧪 Example
If we have a Button.tsx component:
// src/components/Button.tsx
import React from 'react';
type ButtonProps = {
label: string;
onClick: () => void;
};
export const Button = ({ label, onClick }: ButtonProps) => (
<button onClick={onClick}>{label}</button>
);