flexprice/flexprice-front
Add Storybook Stories for Existing React Components
Open
#159 opened on Apr 10, 2025
good first issuehacktoberfestreactstorybook
Repository metrics
- Stars
- (32 stars)
- PR merge metrics
- (PR metrics pending)
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>
);