@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/components/waka-charts/WakaMiniChart.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaMiniChart } from './WakaMiniChart'
+
+const trendingUp = [10, 12, 14, 18, 22, 28, 35]
+const trendingDown = [50, 45, 40, 36, 28, 22, 18]
+const flat = [20, 21, 19, 20, 22, 21, 20]
+const points = [
+  { name: 'M', value: 12 },
+  { name: 'T', value: 18 },
+  { name: 'W', value: 24 },
+  { name: 'T', value: 22 },
+  { name: 'F', value: 30 },
+]
+
+const meta: Meta<typeof WakaMiniChart> = {
+  title: 'Components/Charts/WakaMiniChart',
+  component: WakaMiniChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Compact mini-chart designed for table cells and KPI tiles. Renders a sparkline plus an automatic trend indicator (up/down/neutral).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'inline-radio', options: ['line', 'bar', 'area', 'sparkline'] },
+    showTrend: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMiniChart>
+
+export const Default: Story = {
+  args: { data: trendingUp, showTrend: true },
+}
+
+export const TrendDown: Story = {
+  args: { data: trendingDown, showTrend: true, color: 'var(--destructive)' },
+}
+
+export const Flat: Story = {
+  args: { data: flat, showTrend: true },
+}
+
+export const FromObjectData: Story = {
+  args: { data: points, showTrend: true, type: 'bar' },
+}
+
+export const FormattedValue: Story = {
+  args: {
+    data: trendingUp,
+    showTrend: true,
+    valueFormatter: (v) => `${v} k€`,
+  },
+}
+
+export const InTableRow: Story = {
+  render: () => (
+    <table className="text-sm">
+      <thead>
+        <tr className="border-b">
+          <th className="text-left p-2">Metric</th>
+          <th className="text-left p-2">Trend (7d)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr className="border-b">
+          <td className="p-2">Active users</td>
+          <td className="p-2"><WakaMiniChart data={trendingUp} showTrend /></td>
+        </tr>
+        <tr className="border-b">
+          <td className="p-2">Errors / day</td>
+          <td className="p-2"><WakaMiniChart data={trendingDown} showTrend color="var(--destructive)" /></td>
+        </tr>
+        <tr>
+          <td className="p-2">Avg latency</td>
+          <td className="p-2"><WakaMiniChart data={flat} showTrend /></td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+}
+
+export const EmptyData: Story = {
+  args: { data: [], showTrend: true },
+}
+
+/**
+ * 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: {
+    showTrend: false,
+  },
+  render: (args) => <WakaMiniChart {...args} />,
+}

package/src/components/waka-charts/WakaPieChart.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaPieChart } from './WakaPieChart'
+
+const data = [
+  { name: 'Chrome', value: 45 },
+  { name: 'Firefox', value: 20 },
+  { name: 'Safari', value: 15 },
+  { name: 'Edge', value: 12 },
+  { name: 'Opera', value: 5 },
+  { name: 'Other', value: 3 },
+]
+
+const singleData = [{ name: 'Used', value: 80 }, { name: 'Free', value: 20 }]
+
+const meta: Meta<typeof WakaPieChart> = {
+  title: 'Components/Charts/WakaPieChart',
+  component: WakaPieChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Pie / donut chart based on Recharts. Supports configurable inner radius, label modes (percent/value/name), and animated entrance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'gradient', 'outline', 'glass'] },
+    label: { control: 'select', options: [true, false, 'percent', 'value', 'name'] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPieChart>
+
+export const Default: Story = {
+  args: {
+    data,
+    title: 'Browser Usage',
+    description: 'Q1 2026',
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <WakaPieChart {...args} />
+    </div>
+  ),
+}
+
+export const Donut: Story = {
+  args: {
+    data,
+    innerRadius: '60%',
+    title: 'Donut Chart',
+    legend: true,
+  },
+  render: (args) => (
+    <div className="w-[450px]">
+      <WakaPieChart {...args} />
+    </div>
+  ),
+}
+
+export const PercentLabels: Story = {
+  args: {
+    data,
+    label: 'percent',
+    title: 'With Percent Labels',
+  },
+  render: (args) => (
+    <div className="w-[450px]">
+      <WakaPieChart {...args} />
+    </div>
+  ),
+}
+
+export const TwoSlice: Story = {
+  args: {
+    data: singleData,
+    innerRadius: '70%',
+    title: 'Quota Used',
+    description: 'Edge case: 2 slices, donut',
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <WakaPieChart {...args} />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    data,
+    loading: true,
+    title: 'Loading…',
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <WakaPieChart {...args} />
+    </div>
+  ),
+}
+
+export const EmptyState: Story = {
+  args: {
+    data: [],
+    title: 'No data',
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <WakaPieChart {...args} />
+    </div>
+  ),
+}

package/src/components/waka-charts/WakaSparkline.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSparkline } from './WakaSparkline'
+
+const data = [12, 19, 8, 15, 22, 17, 25, 30, 28, 24, 32, 38]
+const flat = [10, 10, 10, 10, 10, 10, 10]
+const spike = [5, 5, 6, 5, 7, 50, 6, 5, 5]
+
+const meta: Meta<typeof WakaSparkline> = {
+  title: 'Components/Charts/WakaSparkline',
+  component: WakaSparkline,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Inline mini-chart for KPIs and tables. Three rendering modes (line, bar, area), optional min/max markers, optional current-value badge.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'inline-radio', options: ['line', 'bar', 'area'] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSparkline>
+
+export const Default: Story = {
+  args: { data, type: 'line' },
+}
+
+export const BarType: Story = {
+  args: { data, type: 'bar', color: 'var(--primary)' },
+}
+
+export const AreaType: Story = {
+  args: { data, type: 'area', fillOpacity: 0.3 },
+}
+
+export const WithMinMaxAndValue: Story = {
+  args: { data, showMinMax: true, showValue: true },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <span className="text-sm text-muted-foreground">Revenue:</span>
+      <WakaSparkline {...args} />
+    </div>
+  ),
+}
+
+export const InlineKPI: Story = {
+  args: { data, width: 80, height: 24 },
+  render: (args) => (
+    <div className="flex items-center gap-2 text-sm">
+      <span>Sales last 30 days</span>
+      <WakaSparkline {...args} />
+      <strong className="text-emerald-600">+38%</strong>
+    </div>
+  ),
+}
+
+export const FlatData: Story = {
+  args: { data: flat, showMinMax: true, showValue: true },
+  render: (args) => (
+    <div className="text-sm">
+      <p className="mb-1">Edge case: zero variance</p>
+      <WakaSparkline {...args} />
+    </div>
+  ),
+}
+
+export const SpikeData: Story = {
+  args: { data: spike, type: 'bar' },
+  render: (args) => (
+    <div className="text-sm">
+      <p className="mb-1">Edge case: outlier spike</p>
+      <WakaSparkline {...args} />
+    </div>
+  ),
+}
+
+export const SizesGrid: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <span className="text-xs w-12">sm</span>
+        <WakaSparkline data={data} width={60} height={16} />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="text-xs w-12">md</span>
+        <WakaSparkline data={data} width={120} height={32} />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="text-xs w-12">lg</span>
+        <WakaSparkline data={data} width={200} height={48} />
+      </div>
+    </div>
+  ),
+}

package/src/components/waka-chat-bubble/WakaChatBubble.mdx

@@ -0,0 +1,69 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaChatBubble.stories'
+
+<Meta of={Stories} />
+
+# WakaChatBubble
+
+Chat message bubble (left/right alignment, status, attachment slot).
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaChatBubble } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-chat-bubble`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Sent
+
+<Canvas of={Stories.Sent} />
+
+### With Reactions
+
+<Canvas of={Stories.WithReactions} />
+
+### Failed
+
+<Canvas of={Stories.Failed} />
+
+### Sending
+
+<Canvas of={Stories.Sending} />
+
+
+## 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/waka-chat-bubble.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-chat-bubble/WakaChatBubble.stories.tsx

@@ -7,7 +7,6 @@ const meta: Meta<typeof WakaChatBubble> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     message: {
       control: "text",
@@ -31,14 +30,6 @@ const meta: Meta<typeof WakaChatBubble> = {
       control: "boolean",
       description: "Afficher l'avatar",
     },
-    showStatus: {
-      control: "boolean",
-      description: "Afficher le statut",
-    },
-    showTimestamp: {
-      control: "boolean",
-      description: "Afficher l'horodatage",
-    },
   },
 }
 
@@ -52,8 +43,6 @@ export const Default: Story = {
     status: "read",
     timestamp: new Date(),
     showAvatar: true,
-    showStatus: true,
-    showTimestamp: true,
     sender: {
       id: "1",
       name: "Alice",
@@ -69,8 +58,6 @@ export const Sent: Story = {
     variant: "sent",
     status: "delivered",
     timestamp: new Date(),
-    showStatus: true,
-    showTimestamp: true,
   },
   render: (args) => <WakaChatBubble {...args} />,
 }
@@ -100,7 +87,6 @@ export const Failed: Story = {
     variant: "sent",
     status: "failed",
     timestamp: new Date(),
-    showStatus: true,
   },
   render: (args) => <WakaChatBubble {...args} />,
 }
@@ -111,7 +97,6 @@ export const Sending: Story = {
     variant: "sent",
     status: "sending",
     timestamp: new Date(),
-    showStatus: true,
   },
   render: (args) => <WakaChatBubble {...args} />,
 }

package/src/components/waka-checklist/WakaChecklist.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaChecklist.stories'
+
+<Meta of={Stories} />
+
+# WakaChecklist
+
+Interactive checklist with completion percentage and persisted state.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaChecklist } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-checklist`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### All Completed
+
+<Canvas of={Stories.AllCompleted} />
+
+### With Skipped
+
+<Canvas of={Stories.WithSkipped} />
+
+### Compact
+
+<Canvas of={Stories.Compact} />
+
+
+## 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/waka-checklist.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-checklist/WakaChecklist.stories.tsx

@@ -5,7 +5,6 @@ const meta: Meta<typeof WakaChecklist> = {
   title: "Admin/WakaChecklist",
   component: WakaChecklist,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     showProgress: { control: "boolean", description: "Afficher la progression" },
     showSkip: { control: "boolean", description: "Permettre de passer" },

package/src/components/waka-checkout-stepper/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-business` (workspace package
+ * `packages/ui-blocks-business`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-business'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-business` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-cohort-table/WakaCohortTable.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCohortTable.stories'
+
+<Meta of={Stories} />
+
+# WakaCohortTable
+
+Cohort retention matrix with diagonal heat-map colouring.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCohortTable } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-cohort-table`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Churn Metric
+
+<Canvas of={Stories.ChurnMetric} />
+
+### Weekly Period
+
+<Canvas of={Stories.WeeklyPeriod} />
+
+### Compact View
+
+<Canvas of={Stories.CompactView} />
+
+
+## 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/waka-cohort-table.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-cohort-table/WakaCohortTable.stories.tsx

@@ -5,11 +5,9 @@ const meta: Meta<typeof WakaCohortTable> = {
   title: "Admin/WakaCohortTable",
   component: WakaCohortTable,
   parameters: { layout: "padded" },
-  tags: ["autodocs"],
   argTypes: {
     metric: { control: "select", options: ["retention", "churn", "revenue", "engagement"], description: "Métrique" },
     period: { control: "select", options: ["day", "week", "month", "quarter"], description: "Période" },
-    showExport: { control: "boolean", description: "Exporter" },
     colorScale: { control: "select", options: ["green", "blue", "purple", "red"], description: "Échelle de couleur" },
   },
 }
@@ -26,13 +24,13 @@ const cohorts: CohortRow[] = [
 ]
 
 export const Default: Story = {
-  args: { cohorts, metric: "retention", period: "month", showExport: true },
+  args: { data: cohorts, metric: "retention", period: "month" },
   render: (args) => <WakaCohortTable {...args} />,
 }
 
 export const ChurnMetric: Story = {
   args: {
-    cohorts: cohorts.map(c => ({ ...c, data: c.data.map((d, i) => ({ value: i === 0 ? 0 : 100 - d.value })) })),
+    data: cohorts.map((c) => ({ ...c, data: c.data.map((d, i) => ({ value: i === 0 ? 0 : 100 - d.value })) })),
     metric: "churn",
     period: "month",
     colorScale: "red",
@@ -42,7 +40,7 @@ export const ChurnMetric: Story = {
 
 export const WeeklyPeriod: Story = {
   args: {
-    cohorts: cohorts.slice(0, 4).map((c, i) => ({ ...c, id: `w${i}`, label: `Semaine ${i + 1}` })),
+    data: cohorts.slice(0, 4).map((c, i) => ({ ...c, id: `w${i}`, label: `Semaine ${i + 1}` })),
     metric: "retention",
     period: "week",
   },
@@ -50,7 +48,6 @@ export const WeeklyPeriod: Story = {
 }
 
 export const CompactView: Story = {
-  args: { cohorts: cohorts.slice(0, 3), metric: "retention", showExport: false },
+  args: { data: cohorts.slice(0, 3), metric: "retention" },
   render: (args) => <WakaCohortTable {...args} />,
 }
-