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>
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { Tooltip, TooltipProvider, Button } from "@managemate/react";
|
|
|
|
const meta = {
|
|
title: "Overlays/Tooltip",
|
|
component: Tooltip,
|
|
tags: ["autodocs"],
|
|
decorators: [
|
|
(Story) => (
|
|
<TooltipProvider>
|
|
<Story />
|
|
</TooltipProvider>
|
|
),
|
|
],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"Tooltip basé sur Radix UI. Auto-flip, focus management, Escape, prefers-reduced-motion. Exige `<TooltipProvider>` à la racine.",
|
|
},
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Tooltip>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
args: { content: "Action sécurisée" },
|
|
render: (args) => (
|
|
<Tooltip {...args}>
|
|
<Button variant="ghost">Survoler ou focus</Button>
|
|
</Tooltip>
|
|
),
|
|
};
|
|
|
|
export const Placements: Story = {
|
|
render: () => (
|
|
<div style={{ display: "flex", gap: 24, justifyContent: "center", padding: 80 }}>
|
|
{(["top", "right", "bottom", "left"] as const).map((p) => (
|
|
<Tooltip key={p} content={`Position ${p}`} placement={p}>
|
|
<Button variant="ghost">{p}</Button>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
),
|
|
};
|