Storybook से Component Documentation

Components को Isolation में क्यों Develop करें

एक component को सिर्फ अपने full app के अंदर build और check करने का मतलब है एक छोटा सा piece देखने के लिए कई screens navigate करना, और इसके सारे variations (जैसे एक Button की default, disabled, और loading states) side by side देखना hard बनाता है।

Storybook हर component को इसके अपने अलग render करता है, हर documented state directly दिखाते हुए।

उदाहरण: Why Develop Components in Isolation

// Run in your local React project (npm install required)
// Button.stories.js
import Button from './Button';

export default { component: Button };

export const Default = { args: { children: 'Click me' } };
export const Disabled = { args: { children: 'Disabled', disabled: true } };

एक Story लिखना

एक story एक छोटा object है जो किसी component को render करने के एक specific तरीके को describe करता है — usually सिर्फ इसे pass करने के लिए args (props) का एक set। Storybook हर exported story को इसके UI में अपने browsable entry के रूप में automatically render करता है, आपको वह exact variation देखने और इससे interact करने देते हुए।

उदाहरण: Writing a Story

// Run in your local React project (npm install required)
// Card.stories.js
import Card from './Card';

export default { component: Card };

export const WithImage = {
  args: { title: 'Mountain View', imageUrl: '/mountain.jpg' },
};
export const NoImage = {
  args: { title: 'No Image Provided' },
};

Storybook vs. Automated Tests

Storybook primarily एक visual development और documentation tool है — एक component की states browse और manually verify करने का एक great तरीका। यह Jest/Testing Library जैसे automated tests का replacement नहीं है, जो programmatically verify करते हैं कि behavior बिना किसी human के हर state को देखे सही है।

उदाहरण: Storybook vs. Automated Tests

// Run in your local React project (npm install required)
// Storybook: for visually browsing states
// Button.stories.js -> shows Default, Disabled, Loading visually

// Testing Library: for automated verification
// Button.test.js
test('disabled button cannot be clicked', () => {
  render(<Button disabled>Click</Button>);
  expect(screen.getByRole('button')).toBeDisabled();
});