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>
2026-05-04 22:07:57 +02:00
parent 5e019857fc
commit 62317f2ad7
172 changed files with 31397 additions and 1 deletions
@@ -0,0 +1,126 @@
+import type { Preview } from "@storybook/react";
+import "@managemate/css";
+import "@managemate/icons";
+import "./preview.css";
+
+const preview: Preview = {
+  parameters: {
+    layout: "padded",
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: "page",
+      values: [
+        { name: "page", value: "var(--mmg-color-bg-page)" },
+        { name: "surface", value: "var(--mmg-color-bg-surface)" },
+        { name: "white", value: "#FFFFFF" },
+        { name: "dark", value: "#0B0D14" },
+      ],
+    },
+    a11y: {
+      // axe-core configuration. WCAG 2.1 AA + RGAA tags.
+      config: {
+        rules: [
+          { id: "color-contrast", enabled: true },
+          { id: "label", enabled: true },
+          { id: "button-name", enabled: true },
+        ],
+      },
+      options: {
+        runOnly: {
+          type: "tag",
+          values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "best-practice"],
+        },
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          "Intro",
+          "Tokens",
+          ["Colors", "Spacing", "Typography", "Shadows", "Motion"],
+          "Layout",
+          "Forms",
+          ["Button", "Input", "Select", "Checkbox", "Radio", "Switch"],
+          "Feedback",
+          "Overlays",
+          "Navigation",
+          "Data display",
+          "Advanced",
+          "Theming",
+        ],
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: "Thème global",
+      defaultValue: "light",
+      toolbar: {
+        title: "Thème",
+        icon: "circlehollow",
+        items: [
+          { value: "light", title: "Light" },
+          { value: "dark", title: "Dark" },
+          { value: "system", title: "Système" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    accent: {
+      description: "Couleur d'accent (preset DSMMG)",
+      defaultValue: "synapse",
+      toolbar: {
+        title: "Accent",
+        icon: "paintbrush",
+        items: [
+          { value: "synapse", title: "Synapse (rose)" },
+          { value: "rose", title: "Rose vif" },
+          { value: "blue", title: "Bleu" },
+          { value: "violet", title: "Violet" },
+          { value: "green", title: "Vert" },
+          { value: "amber", title: "Ambre" },
+          { value: "red", title: "Rouge" },
+          { value: "cyan", title: "Cyan" },
+          { value: "slate", title: "Ardoise" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    density: {
+      description: "Densité",
+      defaultValue: "comfortable",
+      toolbar: {
+        title: "Densité",
+        icon: "component",
+        items: [
+          { value: "comfortable", title: "Comfortable" },
+          { value: "cozy", title: "Cozy" },
+          { value: "compact", title: "Compact" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, ctx) => {
+      const root = document.documentElement;
+      // Theme
+      if (ctx.globals.theme === "system") root.removeAttribute("data-mmg-theme");
+      else root.setAttribute("data-mmg-theme", ctx.globals.theme);
+      // Accent
+      if (ctx.globals.accent === "synapse") root.removeAttribute("data-mmg-accent");
+      else root.setAttribute("data-mmg-accent", ctx.globals.accent);
+      // Density
+      if (ctx.globals.density === "comfortable") root.removeAttribute("data-mmg-density");
+      else root.setAttribute("data-mmg-density", ctx.globals.density);
+      return Story();
+    },
+  ],
+};
+
+export default preview;