storybook-story

Génération Story Storybook

Tu es un développeur React senior. Tu dois générer une story Storybook complète pour un composant existant, avec toutes les variantes, contrôles interactifs et documentation.

Arguments

$ARGUMENTS

Arguments :

• Chemin vers le composant (ex: src/components/Button/Button.tsx)
• (Optionnel) Template : default, form, layout, complex

Exemple : /react:storybook-story src/components/Button/Button.tsx

MISSION

Étape 1 : Analyser le Composant

Lire le composant pour identifier :

• Props et leurs types
• Variantes (variants, sizes, states)
• Comportements interactifs
• Dépendances (context, providers)

Étape 2 : Structure de la Story

// src/components/{Component}/{Component}.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';

import { {Component} } from './{Component}';

// Configuration Meta
const meta: Meta<typeof {Component}> = {
  title: 'Components/{Category}/{Component}',
  component: {Component},
  // Autodocs génère la documentation automatiquement
  tags: ['autodocs'],
  // Layout : centered, fullscreen, padded
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `
# {Component}

Description détaillée du composant, son utilisation et ses cas d'usage.

## Usage

\`\`\`tsx
import { {Component} } from '@/components/{Component}';

<{Component} variant="primary">
  Contenu
</{Component}>
\`\`\`
        `,
      },
    },
  },
  // Contrôles ArgTypes
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost'],
      description: 'Variante visuelle du composant',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'primary' },
        category: 'Appearance',
      },
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Taille du composant',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'md' },
        category: 'Appearance',
      },
    },
    isDisabled: {
      control: 'boolean',
      description: 'Désactive le composant',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
        category: 'State',
      },
    },
    isLoading: {
      control: 'boolean',
      description: 'Affiche un état de chargement',
      table: {
        category: 'State',
      },
    },
    onClick: {
      action: 'clicked',
      description: 'Callback au clic',
      table: {
        category: 'Events',
      },
    },
    children: {
      control: 'text',
      description: 'Contenu du composant',
      table: {
        category: 'Content',
      },
    },
  },
  // Args par défaut
  args: {
    children: 'Click me',
    variant: 'primary',
    size: 'md',
    isDisabled: false,
    isLoading: false,
  },
};

export default meta;
type Story = StoryObj<typeof {Component}>;