@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/components/waka-content-recommendation/WakaContentRecommendation.stories.tsx

@@ -1,16 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { WakaContentRecommendation } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider/index"
+
+const adConfig = {
+  network: "custom" as const,
+  testMode: true,
+  testMode: true,
+}
 
 const meta: Meta<typeof WakaContentRecommendation> = {
   title: "Sponsoring/WakaContentRecommendation",
   component: WakaContentRecommendation,
   parameters: { layout: "padded" },
   tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={adConfig}>
+        <Story />
+      </WakaAdProvider>
+    ),
+  ],
   argTypes: {
     layout: { control: "select", options: ["grid", "carousel", "list"], description: "Disposition" },
     columns: { control: "select", options: [2, 3, 4], description: "Colonnes (grid)" },
-    showArrows: { control: "boolean", description: "Flèches navigation" },
-    autoScroll: { control: "boolean", description: "Défilement auto" },
+    showArrows: { control: "boolean", description: "Fleches navigation" },
+    autoScroll: { control: "boolean", description: "Defilement auto" },
   },
 }
 
@@ -25,12 +39,12 @@ export const Default: Story = {
 }
 
 export const Carousel: Story = {
-  args: { title: "À découvrir", slotIds, layout: "carousel", showArrows: true, autoScroll: false },
+  args: { title: "A decouvrir", slotIds, layout: "carousel", showArrows: true, autoScroll: false },
   render: (args) => <WakaContentRecommendation {...args} />,
 }
 
 export const List: Story = {
-  args: { title: "Articles suggérés", slotIds: slotIds.slice(0, 3), layout: "list" },
+  args: { title: "Articles suggeres", slotIds: slotIds.slice(0, 3), layout: "list" },
   render: (args) => <WakaContentRecommendation {...args} />,
 }
 
@@ -38,4 +52,3 @@ export const TwoColumns: Story = {
   args: { title: "Pour vous", slotIds: slotIds.slice(0, 4), layout: "grid", columns: 2 },
   render: (args) => <WakaContentRecommendation {...args} />,
 }
-

package/src/components/waka-content-recommendation/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-engagement` (workspace package
+ * `packages/ui-blocks-engagement`). 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-engagement'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-engagement` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-contribution-graph/WakaContributionGraph.mdx

@@ -0,0 +1,101 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaContributionGraph.stories'
+
+<Meta of={Stories} />
+
+# WakaContributionGraph
+
+Contribution Graph component for the WakaStart UI library.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaContributionGraph } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-contribution-graph`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Color Schemes
+
+<Canvas of={Stories.ColorSchemes} />
+
+### Cell Sizes
+
+<Canvas of={Stories.CellSizes} />
+
+### High Activity
+
+<Canvas of={Stories.HighActivity} />
+
+### Sparse Activity
+
+<Canvas of={Stories.SparseActivity} />
+
+### Without Labels
+
+<Canvas of={Stories.WithoutLabels} />
+
+### No Tooltip
+
+<Canvas of={Stories.NoTooltip} />
+
+### Custom Colors
+
+<Canvas of={Stories.CustomColors} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Git Hub Profile
+
+<Canvas of={Stories.GitHubProfile} />
+
+### Compact Widget
+
+<Canvas of={Stories.CompactWidget} />
+
+### Multiple Users
+
+<Canvas of={Stories.MultipleUsers} />
+
+### Custom Tooltip
+
+<Canvas of={Stories.CustomTooltip} />
+
+
+## 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-contribution-graph.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-contribution-graph/WakaContributionGraph.stories.tsx

@@ -84,7 +84,6 @@ const meta: Meta<typeof WakaContributionGraph> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     colorScheme: {
       control: 'select',
@@ -103,14 +102,10 @@ const meta: Meta<typeof WakaContributionGraph> = {
       control: 'boolean',
       description: 'Show month labels',
     },
-    showDayLabels: {
+    showWeekdayLabels: {
       control: 'boolean',
       description: 'Show day of week labels',
     },
-    showTooltip: {
-      control: 'boolean',
-      description: 'Show tooltip on hover',
-    },
   },
 }
 
@@ -119,13 +114,12 @@ type Story = StoryObj<typeof WakaContributionGraph>
 
 export const Default: Story = {
   args: {
-    data: defaultData,
+    contributions: defaultData,
     colorScheme: 'green',
     cellSize: 12,
     cellGap: 2,
     showMonthLabels: true,
-    showDayLabels: true,
-    showTooltip: true,
+    showWeekdayLabels: true,
   },
   render: (args) => <WakaContributionGraph {...args} />,
 }
@@ -135,23 +129,23 @@ export const ColorSchemes: Story = {
     <div className="space-y-6">
       <div>
         <p className="text-sm text-muted-foreground mb-2">Green (Default)</p>
-        <WakaContributionGraph data={defaultData} colorScheme="green" />
+        <WakaContributionGraph contributions={defaultData} colorScheme="green" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Blue</p>
-        <WakaContributionGraph data={defaultData} colorScheme="blue" />
+        <WakaContributionGraph contributions={defaultData} colorScheme="blue" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Purple</p>
-        <WakaContributionGraph data={defaultData} colorScheme="purple" />
+        <WakaContributionGraph contributions={defaultData} colorScheme="purple" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Orange</p>
-        <WakaContributionGraph data={defaultData} colorScheme="orange" />
+        <WakaContributionGraph contributions={defaultData} colorScheme="orange" />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Pink</p>
-        <WakaContributionGraph data={defaultData} colorScheme="pink" />
+        <WakaContributionGraph contributions={defaultData} colorScheme="pink" />
       </div>
     </div>
   ),
@@ -162,15 +156,15 @@ export const CellSizes: Story = {
     <div className="space-y-6">
       <div>
         <p className="text-sm text-muted-foreground mb-2">Small (8px)</p>
-        <WakaContributionGraph data={defaultData} cellSize={8} cellGap={1} />
+        <WakaContributionGraph contributions={defaultData} cellSize={8} cellGap={1} />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Medium (11px - Default)</p>
-        <WakaContributionGraph data={defaultData} cellSize={11} cellGap={2} />
+        <WakaContributionGraph contributions={defaultData} cellSize={11} cellGap={2} />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">Large (14px)</p>
-        <WakaContributionGraph data={defaultData} cellSize={14} cellGap={3} />
+        <WakaContributionGraph contributions={defaultData} cellSize={14} cellGap={3} />
       </div>
     </div>
   ),
@@ -180,7 +174,7 @@ export const HighActivity: Story = {
   render: () => (
     <div className="space-y-2">
       <p className="text-sm text-muted-foreground">Highly active contributor</p>
-      <WakaContributionGraph data={highActivityData} />
+      <WakaContributionGraph contributions={highActivityData} />
     </div>
   ),
 }
@@ -189,7 +183,7 @@ export const SparseActivity: Story = {
   render: () => (
     <div className="space-y-2">
       <p className="text-sm text-muted-foreground">Occasional contributor</p>
-      <WakaContributionGraph data={sparseData} />
+      <WakaContributionGraph contributions={sparseData} />
     </div>
   ),
 }
@@ -199,31 +193,33 @@ export const WithoutLabels: Story = {
     <div className="space-y-6">
       <div>
         <p className="text-sm text-muted-foreground mb-2">No month labels</p>
-        <WakaContributionGraph data={defaultData} showMonthLabels={false} />
+        <WakaContributionGraph contributions={defaultData} showMonthLabels={false} />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">No day labels</p>
-        <WakaContributionGraph data={defaultData} showDayLabels={false} />
+        <WakaContributionGraph contributions={defaultData} showWeekdayLabels={false} />
       </div>
       <div>
         <p className="text-sm text-muted-foreground mb-2">No labels</p>
-        <WakaContributionGraph data={defaultData} showMonthLabels={false} showDayLabels={false} />
+        <WakaContributionGraph contributions={defaultData} showMonthLabels={false} showWeekdayLabels={false} />
       </div>
     </div>
   ),
 }
 
 export const NoTooltip: Story = {
-  render: () => <WakaContributionGraph data={defaultData} showTooltip={false} />,
+  args: {
+    contributions: defaultData,
+  },
+  render: (args) => <WakaContributionGraph {...args} />,
 }
 
 export const CustomColors: Story = {
-  render: () => (
-    <WakaContributionGraph
-      data={defaultData}
-      colors={['#fef3c7', '#fcd34d', '#f59e0b', '#d97706', '#92400e']}
-    />
-  ),
+  args: {
+    contributions: defaultData,
+    colors: ['#fef3c7', '#fcd34d', '#f59e0b', '#d97706', '#92400e'],
+  },
+  render: (args) => <WakaContributionGraph {...args} />,
 }
 
 export const Interactive: Story = {
@@ -233,7 +229,7 @@ export const Interactive: Story = {
     return (
       <div className="space-y-4">
         <WakaContributionGraph
-          data={defaultData}
+          contributions={defaultData}
           onDayClick={(day) => setSelectedDay(day)}
         />
         {selectedDay && (
@@ -267,7 +263,7 @@ export const GitHubProfile: Story = {
             </p>
           </div>
         </div>
-        <WakaContributionGraph data={defaultData} />
+        <WakaContributionGraph contributions={defaultData} />
         <div className="flex items-center justify-end gap-2 mt-4 text-xs text-muted-foreground">
           <span>Less</span>
           <div className="flex gap-1">
@@ -295,11 +291,11 @@ export const CompactWidget: Story = {
       <div className="p-4 border rounded-lg w-fit">
         <h4 className="text-sm font-medium mb-2">Recent Activity</h4>
         <WakaContributionGraph
-          data={recentData}
+          contributions={recentData}
           cellSize={10}
           cellGap={2}
           showMonthLabels={false}
-          showDayLabels={false}
+          showWeekdayLabels={false}
         />
       </div>
     )
@@ -315,7 +311,7 @@ export const MultipleUsers: Story = {
           <span className="font-medium">alice</span>
           <span className="text-sm text-muted-foreground">2,847 contributions</span>
         </div>
-        <WakaContributionGraph data={highActivityData} colorScheme="blue" cellSize={9} />
+        <WakaContributionGraph contributions={highActivityData} colorScheme="blue" cellSize={9} />
       </div>
       <div>
         <div className="flex items-center gap-2 mb-2">
@@ -323,7 +319,7 @@ export const MultipleUsers: Story = {
           <span className="font-medium">bob</span>
           <span className="text-sm text-muted-foreground">1,234 contributions</span>
         </div>
-        <WakaContributionGraph data={defaultData} colorScheme="green" cellSize={9} />
+        <WakaContributionGraph contributions={defaultData} colorScheme="green" cellSize={9} />
       </div>
       <div>
         <div className="flex items-center gap-2 mb-2">
@@ -331,24 +327,22 @@ export const MultipleUsers: Story = {
           <span className="font-medium">carol</span>
           <span className="text-sm text-muted-foreground">342 contributions</span>
         </div>
-        <WakaContributionGraph data={sparseData} colorScheme="purple" cellSize={9} />
+        <WakaContributionGraph contributions={sparseData} colorScheme="purple" cellSize={9} />
       </div>
     </div>
   ),
 }
 
 export const CustomTooltip: Story = {
-  render: () => (
-    <WakaContributionGraph
-      data={defaultData}
-      tooltipFormatter={(day) =>
+  args: {
+    contributions: defaultData,
+    tooltipFormatter: (day) =>
         `${day.count} commit${day.count !== 1 ? 's' : ''} on ${new Date(day.date).toLocaleDateString('en-US', {
           weekday: 'long',
           year: 'numeric',
           month: 'long',
           day: 'numeric',
-        })}`
-      }
-    />
-  ),
+        })}`,
+  },
+  render: (args) => <WakaContributionGraph {...args} />,
 }

package/src/components/waka-cost-breakdown/WakaCostBreakdown.mdx

@@ -0,0 +1,101 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCostBreakdown.stories'
+
+<Meta of={Stories} />
+
+# WakaCostBreakdown
+
+Cost breakdown summary with category bars and grand total.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCostBreakdown } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-cost-breakdown`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Treemap Variant
+
+<Canvas of={Stories.TreemapVariant} />
+
+### Sunburst Variant
+
+<Canvas of={Stories.SunburstVariant} />
+
+### With Comparison
+
+<Canvas of={Stories.WithComparison} />
+
+### Simple Data
+
+<Canvas of={Stories.SimpleData} />
+
+### No Legend
+
+<Canvas of={Stories.NoLegend} />
+
+### Drill Down Example
+
+<Canvas of={Stories.DrillDownExample} />
+
+### Custom Formatter
+
+<Canvas of={Stories.CustomFormatter} />
+
+### With Hook
+
+<Canvas of={Stories.WithHook} />
+
+### Cloud Cost Dashboard
+
+<Canvas of={Stories.CloudCostDashboard} />
+
+### Department Budget Dashboard
+
+<Canvas of={Stories.DepartmentBudgetDashboard} />
+
+### Comparison Variants
+
+<Canvas of={Stories.ComparisonVariants} />
+
+### No Animation
+
+<Canvas of={Stories.NoAnimation} />
+
+
+## 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-cost-breakdown.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-cost-breakdown/WakaCostBreakdown.stories.tsx

@@ -118,7 +118,6 @@ const meta: Meta<typeof WakaCostBreakdown> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
@@ -156,53 +155,48 @@ export const Default: Story = {
 }
 
 export const TreemapVariant: Story = {
-  render: () => (
-    <WakaCostBreakdown
-      data={departmentBudgetData}
-      variant="treemap"
-      currency="$"
-    />
-  ),
+  args: {
+    data: departmentBudgetData,
+    variant: "treemap",
+    currency: "$",
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
 }
 
 export const SunburstVariant: Story = {
-  render: () => (
-    <WakaCostBreakdown
-      data={departmentBudgetData}
-      variant="sunburst"
-      currency="$"
-    />
-  ),
+  args: {
+    data: departmentBudgetData,
+    variant: "sunburst",
+    currency: "$",
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
 }
 
 export const WithComparison: Story = {
-  render: () => (
-    <WakaCostBreakdown
-      data={cloudCostData}
-      showComparison
-      currency="$"
-    />
-  ),
+  args: {
+    data: cloudCostData,
+    showComparison: true,
+    currency: "$",
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
 }
 
 export const SimpleData: Story = {
-  render: () => (
-    <WakaCostBreakdown
-      data={simpleData}
-      currency="$"
-      showComparison={false}
-    />
-  ),
+  args: {
+    data: simpleData,
+    currency: "$",
+    showComparison: false,
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
 }
 
 export const NoLegend: Story = {
-  render: () => (
-    <WakaCostBreakdown
-      data={cloudCostData}
-      showLegend={false}
-      currency="$"
-    />
-  ),
+  args: {
+    data: cloudCostData,
+    showLegend: false,
+    currency: "$",
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
 }
 
 export const DrillDownExample: Story = {
@@ -222,18 +216,17 @@ export const DrillDownExample: Story = {
 }
 
 export const CustomFormatter: Story = {
-  render: () => (
-    <WakaCostBreakdown
-      data={cloudCostData}
-      currency=""
-      formatValue={(value) => {
+  args: {
+    data: cloudCostData,
+    currency: "",
+    formatValue: (value) => {
         if (value >= 1000) {
           return `${(value / 1000).toFixed(1)}K USD`
         }
         return `${value} USD`
-      }}
-    />
-  ),
+      },
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
 }
 
 export const WithHook: Story = {
@@ -338,11 +331,10 @@ export const ComparisonVariants: Story = {
 }
 
 export const NoAnimation: Story = {
-  render: () => (
-    <WakaCostBreakdown
-      data={cloudCostData}
-      animated={false}
-      currency="$"
-    />
-  ),
+  args: {
+    data: cloudCostData,
+    animated: false,
+    currency: "$",
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
 }