Dinawo
62317f2ad7
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>
89 lines
2.5 KiB
Markdown
89 lines
2.5 KiB
Markdown
# 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.
|