@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/DataTable/DataTable.mdx

@@ -0,0 +1,87 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './DataTable.stories'
+
+<Meta of={Stories} />
+
+# DataTable
+
+Headless table powered by TanStack Table with sorting, filtering, pagination, and column visibility.
+
+> ⚠️ **Composant en refactor.** Ce composant est marqué `refactor` dans l'audit (cf. `docs/audit/components/DataTable.md`). Il pourra être fusionné, scindé ou déplacé dans un sous-projet futur ; vérifiez la fiche d'audit avant tout usage massif.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { DataTable } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add DataTable`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Selection
+
+<Canvas of={Stories.WithSelection} />
+
+### With Pagination
+
+<Canvas of={Stories.WithPagination} />
+
+### Striped
+
+<Canvas of={Stories.Striped} />
+
+### Compact
+
+<Canvas of={Stories.Compact} />
+
+### Loading
+
+<Canvas of={Stories.Loading} />
+
+### Empty
+
+<Canvas of={Stories.Empty} />
+
+### With Error
+
+<Canvas of={Stories.WithError} />
+
+### With Toolbar
+
+<Canvas of={Stories.WithToolbar} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/DataTable.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/DataTable/DataTable.stories.tsx

@@ -59,7 +59,6 @@ const meta: Meta<typeof DataTable<User>> = {
   parameters: {
     layout: "padded",
   },
-  tags: ["autodocs"],
   argTypes: {
     layout: {
       control: "select",

package/src/components/MDX_DOCS_GUIDELINE.md

@@ -0,0 +1,69 @@
+# MDX Component Docs — convention
+
+Each component in `@wakastellar/ui` may ship a sibling `<ComponentName>.mdx`
+documentation page. Storybook picks them up automatically via the
+`../src/**/*.mdx` glob in `.storybook/main.ts`.
+
+## File layout
+
+```
+src/components/
+└── button/
+    ├── index.tsx
+    ├── Button.stories.tsx
+    └── Button.mdx        ← the docs page
+```
+
+## Required structure
+
+Every MDX file MUST attach to its sibling stories module so Storybook renders
+interactive Canvas blocks instead of static prose.
+
+```mdx
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './ComponentName.stories'
+
+<Meta of={Stories} />
+
+# ComponentName
+
+One-sentence description.
+
+## Installation
+## Usage
+## Examples
+## API Reference
+## Accessibility
+## Theming
+## Related
+```
+
+The eight sections above are mandatory in this order. Empty sections may be
+omitted only when truly not applicable (e.g. Theming for purely structural
+components like Separator).
+
+## Source of truth: stories, not MDX
+
+Never duplicate a code example in MDX. Reference an existing story export:
+
+```mdx
+<Canvas of={Stories.MultiSeries} />
+```
+
+If a useful example does not yet exist as a story, add it to
+`<ComponentName>.stories.tsx` first, then reference it from MDX.
+
+## Authoring a new docs page
+
+1. Run the generator (recommended):
+   ```bash
+   pnpm tsx audit/scripts/generate-mdx-docs.ts
+   ```
+2. Or copy `scripts/templates/component.mdx.template` manually and fill the
+   four placeholders: `{{ComponentName}}`, `{{component-slug}}`,
+   `{{StoryTitle}}`, `{{one-line-description}}`.
+
+## Validation
+
+`pnpm build-storybook` MUST succeed. Storybook will warn at build time about
+broken `<Canvas of={Stories.X} />` references when a story export goes missing.

package/src/components/accordion/Accordion.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Accordion.stories'
+
+<Meta of={Stories} />
+
+# Accordion
+
+Vertically stacked, expandable sections built on Radix UI; supports single and multiple modes.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Accordion } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add accordion`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Multiple
+
+<Canvas of={Stories.Multiple} />
+
+### Default Open
+
+<Canvas of={Stories.DefaultOpen} />
+
+### FAQ
+
+<Canvas of={Stories.FAQ} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### Rich Content
+
+<Canvas of={Stories.RichContent} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/accordion.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/accordion/Accordion.stories.tsx

@@ -12,7 +12,6 @@ const meta: Meta<typeof Accordion> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
@@ -91,3 +90,86 @@ export const DefaultOpen: Story = {
     </Accordion>
   ),
 }
+
+export const FAQ: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[480px]">
+      <AccordionItem value="billing">
+        <AccordionTrigger>How does monthly billing work?</AccordionTrigger>
+        <AccordionContent>
+          You are charged on the same day each month based on your active seat
+          count. Mid-cycle changes are pro-rated and reflected on the next
+          invoice.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="cancel">
+        <AccordionTrigger>Can I cancel anytime?</AccordionTrigger>
+        <AccordionContent>
+          Yes. You can downgrade or cancel from the workspace settings; you
+          keep access until the end of the current billing period.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="data">
+        <AccordionTrigger>Where is my data stored?</AccordionTrigger>
+        <AccordionContent>
+          By default in EU regions (Paris). Enterprise plans can pin storage
+          to specific regions and request signed BAAs for HDS workloads.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="export">
+        <AccordionTrigger>How do I export my data?</AccordionTrigger>
+        <AccordionContent>
+          Every workspace can request a full export at any time; the bundle is
+          delivered as a ZIP signed with the workspace's release key.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Available section</AccordionTrigger>
+        <AccordionContent>You can open this one freely.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2" disabled>
+        <AccordionTrigger>Coming soon</AccordionTrigger>
+        <AccordionContent>This trigger is disabled.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Another available section</AccordionTrigger>
+        <AccordionContent>Open me too.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const RichContent: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[480px]">
+      <AccordionItem value="release">
+        <AccordionTrigger>Release notes — v2.7.0</AccordionTrigger>
+        <AccordionContent>
+          <ul className="ml-4 list-disc space-y-1 text-sm">
+            <li>Live theme switcher in the Storybook toolbar.</li>
+            <li>JSDoc enrichment for 14 wrapper components.</li>
+            <li>Cmd+K shortcut alias for sidebar search.</li>
+            <li>Defensive sweep on lucide-react icon imports.</li>
+          </ul>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="next">
+        <AccordionTrigger>What is next?</AccordionTrigger>
+        <AccordionContent>
+          <p className="text-sm">
+            Visual regression on Chromatic, plus a final{' '}
+            <code className="rounded bg-muted px-1">a11y</code> sweep across
+            Radix-driven components.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}

package/src/components/alert/Alert.mdx

@@ -0,0 +1,85 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Alert.stories'
+
+<Meta of={Stories} />
+
+# Alert
+
+Inline notice with icon, title, and description. Five severity variants.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Alert } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add alert`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Destructive
+
+<Canvas of={Stories.Destructive} />
+
+### Variants
+
+<Canvas of={Stories.Variants} />
+
+### Without Icon
+
+<Canvas of={Stories.WithoutIcon} />
+
+### Title Only
+
+<Canvas of={Stories.TitleOnly} />
+
+### Success
+
+<Canvas of={Stories.Success} />
+
+### Warning
+
+<Canvas of={Stories.Warning} />
+
+### With Actions
+
+<Canvas of={Stories.WithActions} />
+
+### Dismissible
+
+<Canvas of={Stories.Dismissible} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/alert.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/alert/Alert.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Alert, AlertTitle, AlertDescription } from './index'
-import { AlertCircle, Terminal, Info, CheckCircle2 } from 'lucide-react'
+import { AlertCircle, Terminal, Info, CheckCircle2, AlertTriangle, Lightbulb, X } from 'lucide-react'
+import { Button } from '../button'
 
 const meta: Meta<typeof Alert> = {
   title: 'Components/Alert',
@@ -13,7 +14,6 @@ const meta: Meta<typeof Alert> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
@@ -27,11 +27,8 @@ export default meta
 type Story = StoryObj<typeof Alert>
 
 export const Default: Story = {
-  args: {
-    variant: 'default',
-  },
-  render: (args) => (
-    <Alert {...args} className="w-[400px]">
+  render: () => (
+    <Alert className="w-[400px]">
       <Terminal className="h-4 w-4" />
       <AlertTitle>Heads up!</AlertTitle>
       <AlertDescription>
@@ -93,3 +90,77 @@ export const TitleOnly: Story = {
     </Alert>
   ),
 }
+
+export const Success: Story = {
+  render: () => (
+    <Alert className="w-[400px] border-emerald-500/50 bg-emerald-50 text-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-100 [&>svg]:text-emerald-600">
+      <CheckCircle2 className="h-4 w-4" />
+      <AlertTitle>Deployment successful</AlertTitle>
+      <AlertDescription>
+        Your release has been pushed to production in 1m 23s.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Warning: Story = {
+  render: () => (
+    <Alert className="w-[400px] border-amber-500/50 bg-amber-50 text-amber-900 dark:bg-amber-950/40 dark:text-amber-100 [&>svg]:text-amber-600">
+      <AlertTriangle className="h-4 w-4" />
+      <AlertTitle>Quota nearing limit</AlertTitle>
+      <AlertDescription>
+        You have used 92% of your monthly compute credits. Consider upgrading to avoid
+        interruptions.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const WithActions: Story = {
+  render: () => (
+    <Alert className="w-[480px]">
+      <Lightbulb className="h-4 w-4" />
+      <AlertTitle>Tip</AlertTitle>
+      <AlertDescription className="space-y-3">
+        <p>You can speed up the build by enabling parallel compilation.</p>
+        <div className="flex gap-2">
+          <Button size="sm">Enable</Button>
+          <Button size="sm" variant="ghost">
+            Learn more
+          </Button>
+        </div>
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Dismissible: Story = {
+  render: () => (
+    <Alert className="relative w-[440px]">
+      <Info className="h-4 w-4" />
+      <AlertTitle>New feature available</AlertTitle>
+      <AlertDescription>
+        Try the new theme switcher in your toolbar.
+      </AlertDescription>
+      <Button
+        size="icon"
+        variant="ghost"
+        aria-label="Dismiss"
+        className="absolute right-2 top-2 h-7 w-7"
+      >
+        <X className="h-4 w-4" />
+      </Button>
+    </Alert>
+  ),
+}
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  args: {
+    variant: "default",
+  },
+  render: (args) => <Alert {...args} />,
+}

package/src/components/alert-dialog/AlertDialog.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './AlertDialog.stories'
+
+<Meta of={Stories} />
+
+# AlertDialog
+
+Confirmation dialog with mandatory user action; non-dismissible by ESC for destructive flows.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { AlertDialog } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add alert-dialog`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Destructive
+
+<Canvas of={Stories.Destructive} />
+
+### Logout Confirmation
+
+<Canvas of={Stories.LogoutConfirmation} />
+
+### Save Changes
+
+<Canvas of={Stories.SaveChanges} />
+
+### Publish Confirmation
+
+<Canvas of={Stories.PublishConfirmation} />
+
+### Remove Collaborator
+
+<Canvas of={Stories.RemoveCollaborator} />
+
+### Subscription Downgrade
+
+<Canvas of={Stories.SubscriptionDowngrade} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/alert-dialog.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)