chore: initial DSMMG v0.2 — refonte architecturale complète
Mise en place du Design System ManageMate Group v0.2 — refonte du
système de tokens (préfixe --mmg-color-*), 9 presets accent
user-themable validés WCAG AA, overlays Radix UI + Floating UI,
Storybook 8 + Vitest + axe-core en CI, doc Astro Starlight,
DESIGN.md (format google-labs-code) et exports tokens DTCG/CSS/
TS/Figma/Tailwind v3 et v4.
- 4 packages monorepo pnpm : @managemate/{tokens,css,react,icons}
- 62 composants React headless-first (Sheet, HoverCard, ContextMenu,
Slider, ToggleGroup, AvatarGroup, UserCard, ProfileHeader,
MetricCard, PricingCard, FeatureCard, Text/Display/Eyebrow/Lead…)
- Lint contraste WCAG : 37/37 paires AA, branché CI
- Toast pile Sonner-style avec ResizeObserver
- Theming user (9 presets) sans casser sémantique fixe
- Identité Synapse (rose #D12B6A) préservée
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { Button } from "@managemate/react";
|
||||
|
||||
const meta = {
|
||||
title: "Forms/Button",
|
||||
component: Button,
|
||||
tags: ["autodocs"],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Bouton DSMMG avec variants Material 3 / Fluent. Pill par défaut. Tous les états (default, hover, active, focus-visible, disabled, loading) sont stylés. Touch target 44×44 garanti pour `icon-only`.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: "select",
|
||||
options: ["primary", "tonal", "secondary", "tertiary", "ghost", "elevated", "danger", "success"],
|
||||
},
|
||||
size: { control: "select", options: ["xs", "sm", "md", "lg", "xl"] },
|
||||
loading: { control: "boolean" },
|
||||
disabled: { control: "boolean" },
|
||||
block: { control: "boolean" },
|
||||
},
|
||||
args: { children: "Continuer", variant: "primary", size: "md" },
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Primary: Story = {};
|
||||
|
||||
export const Tonal: Story = { args: { variant: "tonal" } };
|
||||
export const Secondary: Story = { args: { variant: "secondary" } };
|
||||
export const Tertiary: Story = { args: { variant: "tertiary" } };
|
||||
export const Ghost: Story = { args: { variant: "ghost" } };
|
||||
export const Elevated: Story = { args: { variant: "elevated" } };
|
||||
export const Danger: Story = { args: { variant: "danger", children: "Supprimer" } };
|
||||
export const Success: Story = { args: { variant: "success", children: "Valider" } };
|
||||
|
||||
export const Loading: Story = { args: { loading: true } };
|
||||
export const Disabled: Story = { args: { disabled: true } };
|
||||
export const Block: Story = { args: { block: true } };
|
||||
|
||||
export const WithIcon: Story = {
|
||||
args: { icon: "arrow-right-line", iconPosition: "right" },
|
||||
};
|
||||
|
||||
export const IconOnly: Story = {
|
||||
args: { icon: "settings-3-line", "aria-label": "Paramètres", children: undefined },
|
||||
};
|
||||
|
||||
export const AllSizes: Story = {
|
||||
render: (args) => (
|
||||
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
|
||||
<Button {...args} size="xs">XS</Button>
|
||||
<Button {...args} size="sm">Small</Button>
|
||||
<Button {...args} size="md">Medium</Button>
|
||||
<Button {...args} size="lg">Large</Button>
|
||||
<Button {...args} size="xl">Extra</Button>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="tonal">Tonal</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="tertiary">Tertiary</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="elevated">Elevated</Button>
|
||||
<Button variant="danger">Danger</Button>
|
||||
<Button variant="success">Success</Button>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
Reference in New Issue
Block a user