Dinawo
133feff75d
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>
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
pnpm install
pnpm --filter @managemate/icons build
pnpm --filter demo dev
Ouvre http://localhost:5180.
Utilisation dans un projet
Vanilla HTML / CSS
<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é)
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 :
- Ajouter
<meta name="generator" content="DSMMG">dans le<head>des sites. - 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.