Component Documentation Generator

A documentation system that automatically generates component documentation with interactive examples and customizable layouts.

Requirements

Create a documentation system that:

1. Generates automatic documentation for a Button component including props table and examples
2. Provides a custom documentation page using MDX format that combines narrative text with interactive component examples
3. Displays different button variants (primary, secondary, disabled states) in the documentation
4. Includes code examples with syntax highlighting showing how to use the component

Implementation

@generates @generates @generates

Test Cases

Automatic documentation generation

• The Button stories file includes a default export with component metadata that enables automatic documentation generation @test
• The documentation displays a props/args table showing the Button component's available properties @test

Custom MDX documentation

• A custom MDX documentation file exists that combines markdown text with interactive story examples @test
• The MDX file uses documentation blocks to render the Button component with different configurations @test

Multiple story variants

• Multiple story variants are defined showing different button states (primary, secondary, disabled) @test
• Each story variant is accessible and can be viewed independently in the documentation @test

API

// Button.tsx
export interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps>;

// Button.stories.tsx
export default meta;
export const Primary;
export const Secondary;
export const Disabled;

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides Storybook React integration for component stories and documentation.

@storybook/blocks { .dependency }

Provides documentation blocks for building custom documentation pages.

react { .dependency }

Provides React component framework.