Composants UI : Le Hub de votre Design System

interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost';
size: 'sm' | 'md' | 'lg';
disabled?: boolean;
children: React.ReactNode;
onClick?: () => void;
}

export function Button({ variant, size, disabled, children, onClick }: ButtonProps) {
const base = 'rounded-lg font-medium transition-colors';
const variants = {
  primary: 'bg-emerald-600 text-white hover:bg-emerald-700',
  secondary: 'bg-stone-200 text-stone-900 hover:bg-stone-300',
  ghost: 'bg-transparent text-stone-600 hover:bg-stone-100',
};
const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' };

return (
  <button
    className={`${base} ${variants[variant]} ${sizes[size]}`}
    disabled={disabled}
    onClick={onClick}
  >
    {children}
  </button>
);
}

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

const meta: Meta<typeof Button> = {
title: 'Atoms/Button',
component: Button,
argTypes: {
  variant: { control: 'select', options: ['primary', 'secondary', 'ghost'] },
  size: { control: 'select', options: ['sm', 'md', 'lg'] },
},
};

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

export const Primary: Story = {
args: { variant: 'primary', children: 'Cliquer' },
};

export const Secondary: Story = {
args: { variant: 'secondary', children: 'Annuler' },
};

export const Disabled: Story = {
args: { variant: 'primary', disabled: true, children: 'Désactivé' },
};

// tokens.json (exporté depuis Tokens Studio / Figma)
{
"color": {
  "primary": { "value": "#22c55e", "type": "color" },
  "secondary": { "value": "#6366f1", "type": "color" },
  "background": { "value": "#ffffff", "type": "color" }
},
"space": {
  "sm": { "value": "8px", "type": "spacing" },
  "md": { "value": "16px", "type": "spacing" },
  "lg": { "value": "32px", "type": "spacing" }
},
"font": {
  "body": { "value": "1rem/1.5 Inter", "type": "typography" }
}
}

/* tokens.css (généré par Style Dictionary) */
:root {
--color-primary: #22c55e;
--color-secondary: #6366f1;
--color-background: #ffffff;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--font-body: 1rem/1.5 Inter;
}