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>
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { type ReactNode } from "react";
|
|
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
import { cx } from "./utils";
|
|
import { Icon } from "./Icon";
|
|
|
|
export type DrawerProps = {
|
|
open: boolean;
|
|
/** Callback de fermeture — déclenché par Esc, click backdrop, click close. */
|
|
onClose: () => void;
|
|
/** Côté d'apparition. Défaut "right". */
|
|
side?: "left" | "right";
|
|
/** Largeur. Défaut "md" (480px). */
|
|
size?: "sm" | "md" | "lg" | "xl";
|
|
title?: ReactNode;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Drawer — panneau latéral (Radix Dialog).
|
|
*
|
|
* API simplifiée par rapport à Sheet : uniquement left/right, callback
|
|
* `onClose` (au lieu de `onOpenChange`). Pour bottom/top sheet ou plus
|
|
* de contrôle, utiliser directement Sheet.
|
|
*
|
|
* Backing Radix : focus trap, scroll lock, restitution focus, Esc — tout
|
|
* natif. Anciennement custom (useFocusTrap), maintenant aligné avec Sheet.
|
|
*/
|
|
export function Drawer({
|
|
open,
|
|
onClose,
|
|
side = "right",
|
|
size = "md",
|
|
title,
|
|
children,
|
|
footer,
|
|
className,
|
|
}: DrawerProps) {
|
|
return (
|
|
<RadixDialog.Root open={open} onOpenChange={(o) => !o && onClose()}>
|
|
<RadixDialog.Portal>
|
|
<RadixDialog.Overlay className="mmg-sheet__overlay" />
|
|
<RadixDialog.Content
|
|
className={cx(
|
|
"mmg-sheet",
|
|
`mmg-sheet--${side}`,
|
|
`mmg-sheet--${size}`,
|
|
"mmg-drawer",
|
|
className,
|
|
)}
|
|
>
|
|
{title && (
|
|
<header className="mmg-sheet__header">
|
|
<div className="mmg-sheet__header-text">
|
|
<RadixDialog.Title className="mmg-sheet__title">{title}</RadixDialog.Title>
|
|
</div>
|
|
<RadixDialog.Close asChild>
|
|
<button type="button" className="mmg-sheet__close" aria-label="Fermer">
|
|
<Icon name="close-line" size="md" />
|
|
</button>
|
|
</RadixDialog.Close>
|
|
</header>
|
|
)}
|
|
<div className="mmg-sheet__body">{children}</div>
|
|
{footer && <footer className="mmg-sheet__footer">{footer}</footer>}
|
|
</RadixDialog.Content>
|
|
</RadixDialog.Portal>
|
|
</RadixDialog.Root>
|
|
);
|
|
}
|