# 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
```
### React (recommandé)
```tsx
import "@managemate/css";
import "@managemate/icons";
import { Button, Hero, Header, Footer } from "@managemate/react";
```
## 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-` |
## 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 `` dans le `` 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.