@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-tooltip-tour/WakaTooltipTour.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { WakaTooltipTour, type TourStep } from "./index"
+
+const meta: Meta<typeof WakaTooltipTour> = {
+  title: "Navigation/WakaTooltipTour",
+  component: WakaTooltipTour,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    isActive: { control: "boolean", description: "Tour actif" },
+    showSkip: { control: "boolean", description: "Afficher le bouton skip" },
+    showProgress: { control: "boolean", description: "Afficher la progression" },
+    showNavigation: { control: "boolean", description: "Afficher la navigation" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTooltipTour>
+
+const steps: TourStep[] = [
+  {
+    id: "step-1",
+    target: "#tour-target-1",
+    title: "Navigation principale",
+    content: "Accédez rapidement aux sections clés.",
+    placement: "bottom",
+    highlight: true,
+  },
+  {
+    id: "step-2",
+    target: "#tour-target-2",
+    title: "Recherche",
+    content: "Trouvez des ressources avec la recherche.",
+    placement: "bottom",
+    highlight: true,
+  },
+  {
+    id: "step-3",
+    target: "#tour-target-3",
+    title: "Actions rapides",
+    content: "Lancez des actions en un clic.",
+    placement: "top",
+    highlight: true,
+  },
+]
+
+const DemoLayout = () => (
+  <div className="tw-space-y-4">
+    <div className="tw-flex tw-gap-3">
+      <button id="tour-target-1" className="tw-px-3 tw-py-2 tw-rounded tw-bg-primary tw-text-primary-foreground">
+        Menu
+      </button>
+      <button id="tour-target-2" className="tw-px-3 tw-py-2 tw-rounded tw-bg-muted">
+        Recherche
+      </button>
+      <button id="tour-target-3" className="tw-px-3 tw-py-2 tw-rounded tw-bg-muted">
+        Actions
+      </button>
+    </div>
+    <div className="tw-p-4 tw-border tw-rounded-lg">
+      <p className="tw-text-sm tw-text-muted-foreground">Zone de contenu</p>
+    </div>
+  </div>
+)
+
+export const Default: Story = {
+  args: {
+    tourId: "storybook-tooltip-tour",
+    steps,
+    isActive: true,
+    showSkip: true,
+    showProgress: true,
+    showNavigation: true,
+    closeOnOverlayClick: true,
+  },
+  render: (args) => {
+    const [active, setActive] = React.useState(Boolean(args.isActive))
+
+    React.useEffect(() => {
+      setActive(Boolean(args.isActive))
+    }, [args.isActive])
+
+    return (
+      <div>
+        <DemoLayout />
+        <WakaTooltipTour {...args} isActive={active} onActiveChange={setActive} steps={steps} />
+      </div>
+    )
+  },
+}
+

package/src/components/waka-tour-guide/WakaTourGuide.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { WakaTourGuide, type TourStep } from "./index"
+
+const meta: Meta<typeof WakaTourGuide> = {
+  title: "Navigation/WakaTourGuide",
+  component: WakaTourGuide,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    isOpen: { control: "boolean", description: "Tour ouvert" },
+    variant: { control: "select", options: ["modal", "tooltip"], description: "Variante" },
+    showSkip: { control: "boolean", description: "Afficher le bouton skip" },
+    showProgress: { control: "boolean", description: "Afficher la progression" },
+    showStepCounter: { control: "boolean", description: "Afficher le compteur" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTourGuide>
+
+const steps: TourStep[] = [
+  {
+    id: "welcome",
+    target: "#guide-target-1",
+    title: "Bienvenue",
+    content: "Voici un tour rapide des fonctions principales.",
+    placement: "bottom",
+  },
+  {
+    id: "profile",
+    target: "#guide-target-2",
+    title: "Profil",
+    content: "Gérez vos préférences et votre compte.",
+    placement: "right",
+  },
+  {
+    id: "settings",
+    target: "#guide-target-3",
+    title: "Paramètres",
+    content: "Configurez votre application ici.",
+    placement: "left",
+  },
+]
+
+const DemoLayout = () => (
+  <div className="tw-space-y-4">
+    <div className="tw-flex tw-gap-3">
+      <button id="guide-target-1" className="tw-px-3 tw-py-2 tw-rounded tw-bg-primary tw-text-primary-foreground">
+        Démarrer
+      </button>
+      <button id="guide-target-2" className="tw-px-3 tw-py-2 tw-rounded tw-bg-muted">
+        Profil
+      </button>
+      <button id="guide-target-3" className="tw-px-3 tw-py-2 tw-rounded tw-bg-muted">
+        Paramètres
+      </button>
+    </div>
+    <div className="tw-p-4 tw-border tw-rounded-lg">
+      <p className="tw-text-sm tw-text-muted-foreground">Zone de contenu</p>
+    </div>
+  </div>
+)
+
+export const Default: Story = {
+  args: {
+    steps,
+    isOpen: true,
+    variant: "modal",
+    showSkip: true,
+    showProgress: true,
+    showStepCounter: true,
+  },
+  render: (args) => {
+    const [open, setOpen] = React.useState(Boolean(args.isOpen))
+
+    React.useEffect(() => {
+      setOpen(Boolean(args.isOpen))
+    }, [args.isOpen])
+
+    return (
+      <div>
+        <DemoLayout />
+        <WakaTourGuide {...args} isOpen={open} onOpenChange={setOpen} steps={steps} />
+      </div>
+    )
+  },
+}
+

package/src/components/waka-treemap-chart/WakaTreemapChart.stories.tsx

@@ -3,104 +3,111 @@ import { WakaTreemapChart, useTreemapChart } from './index'
 import type { TreemapNode } from './index'
 import * as React from 'react'
 
-const diskUsageData: TreemapNode = {
-  id: 'root',
-  name: 'Disk Usage',
-  children: [
-    {
-      id: 'documents',
-      name: 'Documents',
-      children: [
-        { id: 'pdf', name: 'PDFs', value: 2500 },
-        { id: 'word', name: 'Word Docs', value: 1800 },
-        { id: 'spreadsheets', name: 'Spreadsheets', value: 1200 },
-      ],
-    },
-    {
-      id: 'media',
-      name: 'Media',
-      children: [
-        { id: 'photos', name: 'Photos', value: 8000 },
-        { id: 'videos', name: 'Videos', value: 15000 },
-        { id: 'music', name: 'Music', value: 3500 },
-      ],
-    },
-    {
-      id: 'apps',
-      name: 'Applications',
-      children: [
-        { id: 'system', name: 'System', value: 5000 },
-        { id: 'user', name: 'User Apps', value: 7000 },
-      ],
-    },
-    { id: 'other', name: 'Other', value: 2000 },
-  ],
-}
+// Données pour l'utilisation du disque - format tableau
+const diskUsageData: TreemapNode[] = [
+  {
+    id: 'documents',
+    label: 'Documents',
+    value: 5500,
+    category: 'files',
+    children: [
+      { id: 'pdf', label: 'PDFs', value: 2500, category: 'files' },
+      { id: 'word', label: 'Word Docs', value: 1800, category: 'files' },
+      { id: 'spreadsheets', label: 'Spreadsheets', value: 1200, category: 'files' },
+    ],
+  },
+  {
+    id: 'media',
+    label: 'Media',
+    value: 26500,
+    category: 'media',
+    children: [
+      { id: 'photos', label: 'Photos', value: 8000, category: 'media' },
+      { id: 'videos', label: 'Videos', value: 15000, category: 'media' },
+      { id: 'music', label: 'Music', value: 3500, category: 'media' },
+    ],
+  },
+  {
+    id: 'apps',
+    label: 'Applications',
+    value: 12000,
+    category: 'apps',
+    children: [
+      { id: 'system', label: 'System', value: 5000, category: 'apps' },
+      { id: 'user', label: 'User Apps', value: 7000, category: 'apps' },
+    ],
+  },
+  { id: 'other', label: 'Other', value: 2000, category: 'other' },
+]
 
-const salesByCategoryData: TreemapNode = {
-  id: 'sales',
-  name: 'Sales',
-  children: [
-    {
-      id: 'electronics',
-      name: 'Electronics',
-      color: '#3b82f6',
-      children: [
-        { id: 'phones', name: 'Phones', value: 45000 },
-        { id: 'laptops', name: 'Laptops', value: 38000 },
-        { id: 'tablets', name: 'Tablets', value: 22000 },
-        { id: 'accessories', name: 'Accessories', value: 15000 },
-      ],
-    },
-    {
-      id: 'clothing',
-      name: 'Clothing',
-      color: '#22c55e',
-      children: [
-        { id: 'mens', name: "Men's", value: 28000 },
-        { id: 'womens', name: "Women's", value: 35000 },
-        { id: 'kids', name: 'Kids', value: 18000 },
-      ],
-    },
-    {
-      id: 'home',
-      name: 'Home & Garden',
-      color: '#f59e0b',
-      children: [
-        { id: 'furniture', name: 'Furniture', value: 32000 },
-        { id: 'decor', name: 'Decor', value: 12000 },
-        { id: 'garden', name: 'Garden', value: 8000 },
-      ],
-    },
-  ],
-}
+// Données de ventes par catégorie
+const salesByCategoryData: TreemapNode[] = [
+  {
+    id: 'electronics',
+    label: 'Electronics',
+    value: 120000,
+    color: '#3b82f6',
+    category: 'electronics',
+    children: [
+      { id: 'phones', label: 'Phones', value: 45000, category: 'electronics' },
+      { id: 'laptops', label: 'Laptops', value: 38000, category: 'electronics' },
+      { id: 'tablets', label: 'Tablets', value: 22000, category: 'electronics' },
+      { id: 'accessories', label: 'Accessories', value: 15000, category: 'electronics' },
+    ],
+  },
+  {
+    id: 'clothing',
+    label: 'Clothing',
+    value: 81000,
+    color: '#22c55e',
+    category: 'clothing',
+    children: [
+      { id: 'mens', label: "Men's", value: 28000, category: 'clothing' },
+      { id: 'womens', label: "Women's", value: 35000, category: 'clothing' },
+      { id: 'kids', label: 'Kids', value: 18000, category: 'clothing' },
+    ],
+  },
+  {
+    id: 'home',
+    label: 'Home & Garden',
+    value: 52000,
+    color: '#f59e0b',
+    category: 'home',
+    children: [
+      { id: 'furniture', label: 'Furniture', value: 32000, category: 'home' },
+      { id: 'decor', label: 'Decor', value: 12000, category: 'home' },
+      { id: 'garden', label: 'Garden', value: 8000, category: 'home' },
+    ],
+  },
+]
 
-const portfolioData: TreemapNode = {
-  id: 'portfolio',
-  name: 'Investment Portfolio',
-  children: [
-    {
-      id: 'stocks',
-      name: 'Stocks',
-      children: [
-        { id: 'tech', name: 'Tech', value: 45000, color: '#3b82f6' },
-        { id: 'healthcare', name: 'Healthcare', value: 25000, color: '#22c55e' },
-        { id: 'finance', name: 'Finance', value: 20000, color: '#f59e0b' },
-        { id: 'energy', name: 'Energy', value: 10000, color: '#ef4444' },
-      ],
-    },
-    {
-      id: 'bonds',
-      name: 'Bonds',
-      children: [
-        { id: 'gov', name: 'Government', value: 30000, color: '#8b5cf6' },
-        { id: 'corp', name: 'Corporate', value: 15000, color: '#ec4899' },
-      ],
-    },
-    { id: 'cash', name: 'Cash', value: 20000, color: '#6b7280' },
-    { id: 'crypto', name: 'Crypto', value: 5000, color: '#06b6d4' },
-  ],
-}
+// Données de portefeuille d'investissement
+const portfolioData: TreemapNode[] = [
+  {
+    id: 'stocks',
+    label: 'Stocks',
+    value: 100000,
+    category: 'stocks',
+    children: [
+      { id: 'tech', label: 'Tech', value: 45000, color: '#3b82f6', category: 'stocks' },
+      { id: 'healthcare', label: 'Healthcare', value: 25000, color: '#22c55e', category: 'stocks' },
+      { id: 'finance', label: 'Finance', value: 20000, color: '#f59e0b', category: 'stocks' },
+      { id: 'energy', label: 'Energy', value: 10000, color: '#ef4444', category: 'stocks' },
+    ],
+  },
+  {
+    id: 'bonds',
+    label: 'Bonds',
+    value: 45000,
+    category: 'bonds',
+    children: [
+      { id: 'gov', label: 'Government', value: 30000, color: '#8b5cf6', category: 'bonds' },
+      { id: 'corp', label: 'Corporate', value: 15000, color: '#ec4899', category: 'bonds' },
+    ],
+  },
+  { id: 'cash', label: 'Cash', value: 20000, color: '#6b7280', category: 'cash' },
+  { id: 'crypto', label: 'Crypto', value: 5000, color: '#06b6d4', category: 'crypto' },
+]
 
 const meta: Meta<typeof WakaTreemapChart> = {
   title: 'Components/Charts/WakaTreemapChart',
@@ -117,9 +124,14 @@ const meta: Meta<typeof WakaTreemapChart> = {
   argTypes: {
     colorScheme: {
       control: 'select',
-      options: ['blues', 'greens', 'purples', 'oranges', 'category'],
+      options: ['default', 'cool', 'warm', 'neon', 'pastel'],
       description: 'Color scheme for nodes',
     },
+    colorBy: {
+      control: 'select',
+      options: ['category', 'value'],
+      description: 'How to assign colors',
+    },
     showLabels: {
       control: 'boolean',
       description: 'Show node labels',
@@ -132,9 +144,13 @@ const meta: Meta<typeof WakaTreemapChart> = {
       control: 'boolean',
       description: 'Enable drill-down on click',
     },
-    animated: {
+    showLegend: {
       control: 'boolean',
-      description: 'Enable animations',
+      description: 'Show legend',
+    },
+    animationDuration: {
+      control: { type: 'range', min: 0, max: 1000, step: 50 },
+      description: 'Animation duration in ms',
     },
     padding: {
       control: { type: 'range', min: 0, max: 8, step: 1 },
@@ -156,24 +172,41 @@ export const Default: Story = {
 }
 
 export const WithCustomColors: Story = {
-  render: () => <WakaTreemapChart data={salesByCategoryData} width={600} height={400} colorScheme="category" />,
+  render: () => <WakaTreemapChart data={salesByCategoryData} width={600} height={400} colorBy="category" />,
 }
 
 export const ColorSchemes: Story = {
   render: () => (
     <div className="space-y-6">
       <div>
-        <p className="text-sm text-muted-foreground mb-2">Blues</p>
-        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="blues" />
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="default" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Cool</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="cool" />
       </div>
       <div>
-        <p className="text-sm text-muted-foreground mb-2">Greens</p>
-        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="greens" />
+        <p className="text-sm text-muted-foreground mb-2">Warm</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="warm" />
       </div>
       <div>
-        <p className="text-sm text-muted-foreground mb-2">Purples</p>
-        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="purples" />
+        <p className="text-sm text-muted-foreground mb-2">Neon</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="neon" />
       </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Pastel</p>
+        <WakaTreemapChart data={diskUsageData} width={500} height={250} colorScheme="pastel" />
+      </div>
+    </div>
+  ),
+}
+
+export const ColorByValue: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Colors are based on value (gradient from blue to red)</p>
+      <WakaTreemapChart data={portfolioData} width={600} height={350} colorBy="value" showLegend={false} />
     </div>
   ),
 }
@@ -187,7 +220,8 @@ export const DrillDown: Story = {
         width={650}
         height={400}
         enableDrillDown
-        colorScheme="category"
+        showBreadcrumb
+        colorScheme="default"
       />
     </div>
   ),
@@ -252,12 +286,12 @@ export const Interactive: Story = {
           data={portfolioData}
           width={600}
           height={350}
-          colorScheme="category"
+          colorScheme="default"
           onNodeClick={(node) => setSelected(node)}
         />
         {selected && (
           <div className="p-4 border rounded-lg bg-muted/50">
-            <h4 className="font-semibold">{selected.name}</h4>
+            <h4 className="font-semibold">{selected.label}</h4>
             {selected.value && (
               <p className="text-2xl font-bold text-primary">
                 ${selected.value.toLocaleString()}
@@ -277,47 +311,79 @@ export const Interactive: Story = {
 
 export const WithHook: Story = {
   render: () => {
-    const { currentNode, breadcrumbs, drillDown, drillUp, reset, getTotalValue } = useTreemapChart(diskUsageData)
+    const [rootId, setRootId] = React.useState<string | null>(null)
+    const [path, setPath] = React.useState<TreemapNode[]>([])
+
+    const { computeLayout, getTotalValue, findNode, getPathToNode } = useTreemapChart({
+      width: 600,
+      height: 350,
+    })
+
+    const handleNodeClick = (node: TreemapNode) => {
+      if (node.children && node.children.length > 0) {
+        setRootId(node.id)
+        const newPath = getPathToNode(diskUsageData, node.id)
+        setPath(newPath)
+      }
+    }
+
+    const handleReset = () => {
+      setRootId(null)
+      setPath([])
+    }
+
+    const handleBack = () => {
+      if (path.length > 1) {
+        const parentId = path[path.length - 2].id
+        setRootId(parentId)
+        setPath(path.slice(0, -1))
+      } else {
+        handleReset()
+      }
+    }
+
+    const currentData = rootId ? (findNode(diskUsageData, rootId)?.children || diskUsageData) : diskUsageData
 
     return (
       <div className="space-y-4">
         <div className="flex items-center gap-2">
-          {breadcrumbs.map((crumb, index) => (
+          <button
+            onClick={handleReset}
+            className="text-sm hover:underline"
+          >
+            Root
+          </button>
+          {path.map((crumb, index) => (
             <React.Fragment key={crumb.id}>
-              {index > 0 && <span className="text-muted-foreground">/</span>}
-              <button
-                onClick={() => drillDown(crumb)}
-                className="text-sm hover:underline"
-              >
-                {crumb.name}
-              </button>
+              <span className="text-muted-foreground">/</span>
+              <span className="text-sm">{crumb.label}</span>
             </React.Fragment>
           ))}
         </div>
         <div className="flex gap-2">
           <button
-            onClick={drillUp}
-            disabled={breadcrumbs.length <= 1}
+            onClick={handleBack}
+            disabled={path.length === 0}
             className="px-3 py-1 text-sm border rounded hover:bg-muted disabled:opacity-50"
           >
             Back
           </button>
           <button
-            onClick={reset}
+            onClick={handleReset}
             className="px-3 py-1 text-sm border rounded hover:bg-muted"
           >
             Reset
           </button>
           <span className="px-3 py-1 text-sm bg-muted rounded">
-            Total: {getTotalValue(currentNode).toLocaleString()} MB
+            Total: {getTotalValue(currentData).toLocaleString()} MB
           </span>
         </div>
         <WakaTreemapChart
-          data={currentNode}
+          data={currentData}
           width={600}
           height={350}
           enableDrillDown={false}
-          onNodeClick={(node) => node.children && drillDown(node)}
+          onNodeClick={handleNodeClick}
         />
       </div>
     )
@@ -341,9 +407,9 @@ export const PortfolioDashboard: Story = {
         data={portfolioData}
         width={650}
         height={400}
-        colorScheme="category"
+        colorScheme="default"
         enableDrillDown
-        valueFormatter={(v) => `$${(v / 1000).toFixed(0)}K`}
+        showBreadcrumb
       />
     </div>
   ),
@@ -365,14 +431,53 @@ export const DiskUsageDashboard: Story = {
         data={diskUsageData}
         width={650}
         height={380}
-        colorScheme="blues"
+        colorScheme="cool"
         enableDrillDown
-        valueFormatter={(v) => `${(v / 1000).toFixed(1)} GB`}
+        showBreadcrumb
       />
     </div>
   ),
 }
 
 export const NoAnimation: Story = {
-  render: () => <WakaTreemapChart data={diskUsageData} width={500} height={300} animated={false} />,
+  render: () => <WakaTreemapChart data={diskUsageData} width={500} height={300} animationDuration={0} />,
+}
+
+export const WithLegend: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Legend on the right</p>
+        <WakaTreemapChart
+          data={salesByCategoryData}
+          width={600}
+          height={350}
+          showLegend
+          legendPosition="right"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Legend at the bottom</p>
+        <WakaTreemapChart
+          data={salesByCategoryData}
+          width={600}
+          height={350}
+          showLegend
+          legendPosition="bottom"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithZoomControls: Story = {
+  render: () => (
+    <WakaTreemapChart
+      data={portfolioData}
+      width={600}
+      height={400}
+      showZoomControls
+      enableZoomToFit
+    />
+  ),
 }

package/src/components/waka-treemap-chart/index.tsx

@@ -663,7 +663,7 @@ interface TreemapRectangleProps {
   minLabelSize: number
   animationDuration: number
   onClick: () => void
-  onMouseEnter: () => void
+  onMouseEnter: (e: React.MouseEvent<SVGGElement>) => void
   onMouseLeave: () => void
 }
 
@@ -989,7 +989,7 @@ export function WakaTreemapChart({
                   minLabelSize={minLabelSize}
                   animationDuration={animationDuration}
                   onClick={() => handleNodeClick(node)}
-                  onMouseEnter={(e: any) => handleMouseEnter(node, e)}
+                  onMouseEnter={(e: React.MouseEvent<SVGGElement>) => handleMouseEnter(node, e)}
                   onMouseLeave={handleMouseLeave}
                 />
               )