feat(v1): bloquants release v1 — tests, stories, visual regression, gouvernance, publishing
Release / Release / open changeset PR (push) Has been cancelled
CI / Build, typecheck, test, a11y (push) Has been cancelled

6 chantiers v1 sur 7 livrés (DataTable refonte reportée car nécessite
2-3j en propre — TanStack Table + virtualisation + filter builder).

v1-A — Tests (4 → 22 fichiers) :
- Avatar, AvatarGroup, UserCard, MetricCard, ProfileHeader, Tooltip,
  Sheet, Drawer, Slider, ToggleGroup, Tabs, Pagination, Accordion,
  Switch, Badge, ConfirmDialog, Popover, Menu, Text, PricingCard,
  FeatureCard, Toast — chacun avec render + clavier + axe-core.

v1-B — Storybook (7 → 23 fichiers) :
- Avatar, UserCard, ProfileHeader, MetricCard, PricingCard,
  FeatureCard, Sheet (4 sides), HoverCard, Slider, ToggleGroup,
  Menu+ContextMenu, Toast (avec démo "Empiler 5"), Tabs,
  Pagination, Accordion, Badge.

v1-D — Visual regression Playwright :
- playwright.config.ts (light + dark, threshold strict 0.2)
- e2e/visual.spec.ts (20 stories critiques)
- Step CI + upload report en cas de fail

v1-E — Site doc Starlight rempli :
- 11 pages composants détaillées (Button, Input, Tooltip, Dialog,
  Toast, Avatar, ThemePicker, MetricCard, PricingCard, ToggleGroup,
  Slider) avec API, anatomie, do/don't, A11y.

v1-F — Publishing Verdaccio :
- verdaccio/config.yaml, docker-compose.verdaccio.yml, .npmrc
- README setup local + déploiement prod + backups + sécurité

v1-G — Gouvernance :
- LICENSE, CONTRIBUTING.md, CODE_OF_CONDUCT.md, SECURITY.md
- CODEOWNERS, PR template, 3 issue templates (bug/feature/rfc)

Bug fix bonus : tooltip dark mode (text-primary comme bg + text-inverse
comme texte → blanc-sur-blanc invisible). Remplacé par neutral-900/0
en light + bg-raised/text-primary en dark.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dinawo
2026-05-04 22:29:35 +02:00
parent 62317f2ad7
commit 133feff75d
69 changed files with 3433 additions and 7 deletions
+129
View File
@@ -0,0 +1,129 @@
# Contribuer au DSMMG
Merci de prendre le temps de contribuer. Ce guide décrit le workflow
attendu pour ajouter / modifier un composant, fixer un bug, ou faire
évoluer le design system.
## Setup local
```sh
git clone https://git.dinawo.fr/ManageMate-Group/DSMMG.git
cd DSMMG
pnpm install
pnpm build # build tous les packages dans le bon ordre
pnpm storybook # lance Storybook localement (port 6006)
pnpm demo # lance la demo Vite (port 5180)
pnpm --filter @managemate/react test:watch
```
Pré-requis : Node ≥ 20, pnpm ≥ 9, Git.
## Workflow d'une PR
1. **Créer une branche** depuis `main` :
- `feat/<name>` — nouvelle fonctionnalité
- `fix/<name>` — correction de bug
- `chore/<name>` — outillage, refacto sans surface publique
- `docs/<name>` — documentation
2. **Coder + tests** :
- Tests unitaires (`*.test.tsx`) avec Vitest + axe-core
- Stories Storybook (`*.stories.tsx`) avec autodocs
- Doc MDX pour les composants publics
3. **Ajouter un changeset** : `pnpm changeset` (sélectionner les
packages impactés et le bump approprié — patch / minor / major).
4. **Push** + ouvrir la PR sur `main`.
5. **CI doit passer** :
- lint + typecheck
- tests Vitest
- axe-core (pas de violation a11y)
- lint contraste WCAG (`pnpm lint:contrast`)
- build Storybook + visual regression
- bundle size budget (`pnpm size`)
6. **1 review minimum** d'un CODEOWNER avant merge.
## Conventions de code
### Naming
- **Tokens couleur** : `--mmg-color-*` (jamais `--mmg-color-synapse-*`
directement dans un composant — toujours `--mmg-color-accent-*`).
- **Classes CSS** : `mmg-<comp>` BEM-like (`mmg-btn`, `mmg-btn--primary`,
`mmg-btn__icon`).
- **Utilitaires CSS** : `mmg-u-*` (`mmg-u-stack`, `mmg-u-text-primary`).
- **Composants React** : PascalCase (`Button`, `ProfileHeader`,
`MetricCard`). **Un fichier par composant**, pas de monolithe.
- **Tests** : `<Component>.test.tsx`, **stories** : `<Component>.stories.tsx`.
### Sémantique
- Choisir le tag HTML selon **la sémantique**, pas selon la taille
visuelle. Un titre de page reste `<h1>` même s'il est stylé en
`display-xl`.
- Préférer `<button>` à `<div onClick>`. Préférer `<a href>` pour la
navigation.
### Accessibilité (non-négociable)
- Tester en clavier (Tab, Shift+Tab, Esc, flèches, Enter, Espace).
- Tester avec un lecteur d'écran si possible (NVDA / VoiceOver).
- Tester en zoom 200 % et reflow 320px.
- Tester avec `prefers-reduced-motion` activé.
- Toute couleur d'info doit être redondée avec icône / texte / pattern
(RGAA 9 — couleur seule interdite).
- Aucun `outline: none` sans focus visible alternatif.
- Cible tactile ≥ 44×44 (WCAG SC 2.5.5).
## Ajouter un nouveau composant
1. Créer `packages/react/src/<Component>.tsx` (un fichier, exports
nommés, types exportés).
2. Si CSS dédié : `packages/css/src/components/<comp>.css` + l'importer
dans `packages/css/src/index.css` avec `layer(components)`.
3. **Story** : `storybook/stories/<Component>.stories.tsx` — au minimum
un default + variants + states (default/hover/focus/loading/empty/
error/disabled).
4. **Tests** : `packages/react/src/<Component>.test.tsx` — render, axe,
clavier, interactions critiques.
5. **Doc MDX** : `docs/src/content/docs/components/<component>.md`
anatomie, props, do/don't, accessibilité.
6. **Export** dans `packages/react/src/index.tsx`.
7. **Changeset** minor.
> **Un composant non documenté n'est pas livré.**
## RFC pour les changements majeurs
Voir [RFC process](docs/src/content/docs/contrib/rfc.md). Une RFC est
requise pour :
- nouveau composant non-trivial (DataTable v2, Calendar, Editor…)
- breaking change sur l'API publique
- refonte d'un token ou d'un groupe de tokens
- nouvelle dépendance externe
- changement architectural
## Versioning (SemVer strict)
- **major** : breaking change sur l'API publique
- **minor** : addition non-breaking (nouveau composant, nouvelle prop)
- **patch** : bugfix, doc, perf interne sans surface publique
Les 4 packages versionnés (`tokens`, `css`, `react`, `icons`) sont
**fixed** (même version) — pas d'incompatibilités cross-package.
## Code de conduite
Voir [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). Toute communication
toxique, harcèlement, ou comportement excluant entraîne l'exclusion du
projet.
## Sécurité
Les vulnérabilités doivent être signalées en privé. Voir
[SECURITY.md](SECURITY.md).
## Licence
Tout contribution est faite sous la licence du projet
(voir [LICENSE](LICENSE)). En soumettant une PR, vous accordez à
ManageMate Group le droit d'utiliser votre contribution dans le cadre
du DSMMG.