/* tokens/colors.css */
:root {
  /* Palette primitive */
  --color-blue-50: #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-900: #1e3a8a;
  
  /* Tokens sémantiques */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  
  /* Tokens contextuels */
  --color-button-primary-bg: var(--color-primary);
  --color-button-primary-text: var(--color-white);
  --color-button-primary-border: var(--color-primary);
}

/* Dark mode override */
[data-theme="dark"] {
  --color-text-primary: var(--color-gray-100);
  --color-text-secondary: var(--color-gray-400);
  --color-surface: var(--color-gray-800);
}

tokens/
├── colors.css           # Palettes et sémantique
├── typography.css       # Fonts, sizes, weights
├── spacing.css         # Margins, paddings, gaps
├── shadows.css         # Box-shadows, elevations
├── radius.css          # Border-radius variations
└── motion.css          # Animations, transitions

// Button.tsx - Composant avec variantes
import React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  // Base styles
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline'
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10'
      }
    },
    defaultVariants: {
      variant: 'default',
      size: 'default'
    }
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);

export { Button, buttonVariants };

// Card.tsx - Composant composé
import { cn } from '@/lib/utils';

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
      {...props}
    />
  )
);

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
  )
);

const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
  )
);

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
  )
);

// Usage
<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Vous avez 3 nouveaux messages.</p>
  </CardContent>
</Card>

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-design-tokens',
    'storybook-addon-designs'
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {}
  }
};

// .storybook/preview.js
import '../src/index.css';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    }
  },
  docs: {
    autodocs: 'tag'
  }
};

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 'Bouton polyvalent avec variants et tailles multiples. Base de l\'interaction utilisateur.'
      }
    }
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link']
    },
    size: {
      control: { type: 'select' },
      options: ['default', 'sm', 'lg', 'icon']
    },
    disabled: {
      control: { type: 'boolean' }
    }
  }
};

export default meta;
type Story = StoryObj<typeof meta>;

// Story de base
export const Default: Story = {
  args: {
    children: 'Button'
  }
};

// Variations
export const Variants: Story = {
  render: () => (
    <div className="flex gap-2">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
};

// Tailles
export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  )
};

// États
export const States: Story = {
  render: () => (
    <div className="flex gap-2">
      <Button>Normal</Button>
      <Button disabled>Disabled</Button>
      <Button className="opacity-50 cursor-not-allowed">Loading</Button>
    </div>
  )
};

// Use cases réels
export const UseCases: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <h3 className="mb-2">Form actions</h3>
        <div className="flex gap-2">
          <Button>Enregistrer</Button>
          <Button variant="outline">Annuler</Button>
        </div>
      </div>
      <div>
        <h3 className="mb-2">Destructive actions</h3>
        <Button variant="destructive">Supprimer</Button>
      </div>
    </div>
  )
};

# scripts/create-component.sh
#!/bin/bash

COMPONENT_NAME=$1
COMPONENT_DIR="src/components/$COMPONENT_NAME"

mkdir -p $COMPONENT_DIR

# Template component
cat > "$COMPONENT_DIR/$COMPONENT_NAME.tsx" << EOF
import React from 'react';
import { cn } from '@/lib/utils';

interface ${COMPONENT_NAME}Props extends React.HTMLAttributes<HTMLDivElement> {
  // Props spécifiques
}

const $COMPONENT_NAME = React.forwardRef<HTMLDivElement, ${COMPONENT_NAME}Props>(
  ({ className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn('', className)}
        {...props}
      />
    );
  }
);

$COMPONENT_NAME.displayName = '$COMPONENT_NAME';

export { $COMPONENT_NAME };
EOF

# Template stories
cat > "$COMPONENT_DIR/$COMPONENT_NAME.stories.tsx" << EOF
import type { Meta, StoryObj } from '@storybook/react';
import { $COMPONENT_NAME } from './$COMPONENT_NAME';

const meta: Meta<typeof $COMPONENT_NAME> = {
  title: 'Components/$COMPONENT_NAME',
  component: $COMPONENT_NAME,
  parameters: {
    layout: 'centered'
  },
  tags: ['autodocs']
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {};
EOF

# Template tests
cat > "$COMPONENT_DIR/$COMPONENT_NAME.test.tsx" << EOF
import { render, screen } from '@testing-library/react';
import { $COMPONENT_NAME } from './$COMPONENT_NAME';

describe('$COMPONENT_NAME', () => {
  it('renders correctly', () => {
    render(<$COMPONENT_NAME />);
    // Tests spécifiques
  });
});
EOF

echo "✅ Component $COMPONENT_NAME created successfully!"

// .vscode/snippets.json
{
  "Design System Component": {
    "scope": "typescriptreact",
    "prefix": "dsc",
    "body": [
      "import React from 'react';",
      "import { cva, type VariantProps } from 'class-variance-authority';",
      "import { cn } from '@/lib/utils';",
      "",
      "const ${1:componentName}Variants = cva(",
      "  '${2:base-classes}',",
      "  {",
      "    variants: {",
      "      variant: {",
      "        default: '${3:default-classes}'",
      "      },",
      "      size: {",
      "        default: '${4:size-classes}'",
      "      }",
      "    },",
      "    defaultVariants: {",
      "      variant: 'default',",
      "      size: 'default'",
      "    }",
      "  }",
      ");",
      "",
      "export interface ${1:componentName}Props",
      "  extends React.HTMLAttributes<HTMLElement>,",
      "    VariantProps<typeof ${1:componentName}Variants> {}",
      "",
      "const ${1:componentName} = React.forwardRef<HTMLElement, ${1:componentName}Props>(",
      "  ({ className, variant, size, ...props }, ref) => {",
      "    return (",
      "      <div",
      "        className={cn(${1:componentName}Variants({ variant, size, className }))}",
      "        ref={ref}",
      "        {...props}",
      "      />",
      "    );",
      "  }",
      ");",
      "",
      "${1:componentName}.displayName = '${1:componentName}';",
      "",
      "export { ${1:componentName} };"
    ]
  }
}

# Contributing to Design System

## 1. Nouvelle proposition de composant
- Issue GitHub avec template "New Component"
- Use case et justification métier
- Audit existant (pas déjà couvert ?)
- Maquette Figma + specs

## 2. Review design
- Cohérence avec tokens existants
- Accessibilité (contraste, navigation)
- Responsive behavior
- Dark mode compatibility

## 3. Implémentation
- Fork + branch feature/component-name
- Respect conventions naming
- Tests unitaires obligatoires
- Stories Storybook complètes
- Documentation usage

## 4. Review technique
- Code review par 2 personnes min
- Tests automatisés passants
- Performance (bundle impact)
- Breaking changes ?

## 5. Documentation
- Update changelog
- Migration guide si breaking
- Communication aux équipes

// package.json
{
  "name": "@company/design-system",
  "version": "2.1.4",
  "scripts": {
    "build": "rollup -c",
    "test": "jest",
    "storybook": "storybook dev -p 6006",
    "release": "changeset publish"
  }
}

// .changeset/config.json
{
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "restricted",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": ["@company/design-system-docs"]
}

// hooks/useComponentAnalytics.ts
import { useEffect } from 'react';
import { analytics } from '@/lib/analytics';

export const useComponentAnalytics = (
  componentName: string,
  variant?: string,
  props?: Record<string, any>
) => {
  useEffect(() => {
    analytics.track('component_usage', {
      component: componentName,
      variant,
      props: Object.keys(props || {}),
      timestamp: Date.now()
    });
  }, [componentName, variant]);
};

// Usage dans les composants
const Button = ({ variant, ...props }) => {
  useComponentAnalytics('Button', variant, props);
  // ... rest of component
};

// Analytics queries (exemple BigQuery)
SELECT 
  component,
  variant,
  COUNT(*) as usage_count,
  COUNT(DISTINCT user_id) as unique_users
FROM component_usage
WHERE timestamp >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 30 DAY)
GROUP BY component, variant
ORDER BY usage_count DESC;

-- Top composants les plus utilisés
-- Variants populaires
-- Taux d'adoption par équipe
-- Composants délaissés (candidates à deprecation)

// Migration guide exemple : Button v1 → v2
// AVANT (v1)
<Button color="primary" size="large">
  Click me
</Button>

// APRÈS (v2)
<Button variant="default" size="lg">
  Click me
</Button>

// Composant de transition avec warnings
const ButtonV1Compat = ({ color, size, ...props }) => {
  if (process.env.NODE_ENV === 'development') {
    console.warn('Button: props "color" and "size" are deprecated. Use "variant" and new size values.');
  }
  
  const variantMap = { primary: 'default', secondary: 'secondary' };
  const sizeMap = { small: 'sm', medium: 'default', large: 'lg' };
  
  return (
    <ButtonV2
      variant={variantMap[color] || 'default'}
      size={sizeMap[size] || 'default'}
      {...props}
    />
  );
};

// codemods/button-migration.js
const j = require('jscodeshift');

module.exports = function transformer(file, api) {
  const j = api.jscodeshift;
  
  return j(file.source)
    .find(j.JSXElement, {
      openingElement: { name: { name: 'Button' } }
    })
    .forEach(path => {
      const attributes = path.value.openingElement.attributes;
      
      attributes.forEach(attr => {
        if (attr.name.name === 'color' && attr.value.value === 'primary') {
          attr.name.name = 'variant';
          attr.value.value = 'default';
        }
        if (attr.name.name === 'size' && attr.value.value === 'large') {
          attr.value.value = 'lg';
        }
      });
    })
    .toSource();
};

// Utilisation
npx jscodeshift -t codemods/button-migration.js src/**/*.tsx

// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    nodeResolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
      declaration: true,
      declarationDir: 'dist/types'
    })
  ],
  external: ['react', 'react-dom']
};

Investissement Design System :
├── Setup initial : 6-8 semaines (1 dev + 1 designer)
├── Documentation : 2 semaines
├── Formation équipes : 1 semaine
└── Total : 45-50j homme

ROI sur 18 mois :
├── Gain vélocité : +200j développement
├── Réduction bugs : +30j debugging évité
├── Maintenance CSS : +60j refactoring évité
└── Total économisé : 290j = 180k€ (sur équipe 6 devs)

ROI ratio : 3.6x dès 18 mois