Component Documentation with Storybook

// 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 } };

// 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' },
};

// 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();
});

1. Writing stories that don't cover a component's meaningful prop variations, missing the point of documenting its different states.
2. Letting stories go stale by not updating them when the component's actual props change.
3. Treating Storybook as a replacement for real tests, when it's primarily a documentation and visual-development tool.

• Storybook is a tool for developing and documenting UI components in isolation, outside of a full running app.
• A story defines one specific rendered state of a component, like a Button with different variants.
• Storybook makes it easy to visually browse every state of every component without navigating the whole app to reach them.
• It pairs well with, but doesn't replace, automated tests like those written with Jest/Testing Library.

Requires npm install storybook — runs its own separate dev server, not available in this CDN-only sandbox.