ManageMate-Group/DSMMG
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
133feff75d29647f947a120fb713f7de84d9ce0b
DSMMG/CONTRIBUTING.md
T
Dinawo 133feff75d
Release / Release / open changeset PR (push) Has been cancelled
Details
CI / Build, typecheck, test, a11y (push) Has been cancelled
Details
feat(v1): bloquants release v1 — tests, stories, visual regression, gouvernance, publishing 
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>
2026-05-04 22:29:35 +02:00

4.6 KiB
Raw Blame History

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

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. 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. 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.

Licence

Tout contribution est faite sous la licence du projet (voir LICENSE). En soumettant une PR, vous accordez à ManageMate Group le droit d'utiliser votre contribution dans le cadre du DSMMG.

Reference in New Issue View Git Blame Copy Permalink