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
@@ -1,2 +1,88 @@
-# DSMMG
+# DSMMG — Design System ManageMate Group

+Préfixe : `mmg-`. Inspiré de l'architecture du DSFR (gouvernement français) — fondation tokens + CSS vanilla + wrappers React.
+
+## Structure
+
+```
+managemate-ds/
+├── packages/
+│   ├── css/        # @managemate/css — tokens, base, composants vanilla
+│   ├── react/      # @managemate/react — wrappers React typés
+│   └── icons/      # @managemate/icons — système d'icônes (Remix Icon based)
+└── demo/           # vitrine + showcase
+```
+
+## Démarrer la vitrine
+
+```bash
+pnpm install
+pnpm --filter @managemate/icons build
+pnpm --filter demo dev
+```
+
+Ouvre http://localhost:5180.
+
+## Utilisation dans un projet
+
+### Vanilla HTML / CSS
+
+```html
+<link rel="stylesheet" href="@managemate/css">
+<link rel="stylesheet" href="@managemate/icons">
+
+<button class="mmg-btn mmg-btn--primary">
+  <span class="mmg-icon mmg-icon-arrow-right"></span> Continuer
+</button>
+```
+
+### React (recommandé)
+
+```tsx
+import "@managemate/css";
+import "@managemate/icons";
+import { Button, Hero, Header, Footer } from "@managemate/react";
+
+<Button icon="arrow-right" iconPosition="right">Continuer</Button>
+```
+
+## Composants v0.1
+
+| Catégorie | Composants |
+|---|---|
+| **Layout** | Container, Section, Stack, Inline, Card, Tile, Hero, Grid (`.mmg-col-*`) |
+| **Boutons** | Button (6 variants × 5 sizes, icon, loading, block) |
+| **Forms** | Field, Input, Textarea, Select, Checkbox, Radio, Switch |
+| **Feedback** | Alert, Notice, Badge, Modal, ToastRegion, Spinner, Skeleton |
+| **Chrome** | Header, Footer, Breadcrumb, Sidebar, Topbar, Tabs, Pagination, AppShell, Avatar, Stat, SkipLink |
+| **Icônes** | 49 icônes via `mmg-icon-<name>` |
+
+## Tokens
+
+Tous les tokens sont des CSS custom properties préfixées `--mmg-*`. Light + dark mode via `[data-mmg-theme]`.
+
+**Couleur de marque** : rose `#D12B6A` corporate, partagée par tous les produits.
+
+## TODO v0.2
+
+- [ ] Tooltip
+- [ ] Stepper
+- [ ] DatePicker
+- [ ] DataTable avancée (tri, filtres, pagination intégrée)
+- [ ] Combobox / Autocomplete
+- [ ] FileUpload
+- [ ] CommandMenu (cmd+k)
+- [ ] Storybook
+- [ ] Tests visuels
+- [ ] Variants line/fill pour toutes les icônes (Remix Icon)
+- [ ] Détection Wappalyzer (PR sur webappanalyzer)
+
+## Wappalyzer
+
+Pour la détection automatique :
+1. Ajouter `<meta name="generator" content="DSMMG">` dans le `<head>` des sites.
+2. Ouvrir une PR sur https://github.com/enthec/webappanalyzer avec un fichier qui matche `class*="mmg-"` + le meta tag.
+
+## Licence
+
+Privée — usage interne ManageMate Group uniquement.