@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-capacity-planner/WakaCapacityPlanner.stories.tsx

@@ -0,0 +1,273 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCapacityPlanner, type ResourceData, type ScalingRecommendation } from "./index"
+
+const meta: Meta<typeof WakaCapacityPlanner> = {
+  title: "DevOps/WakaCapacityPlanner",
+  component: WakaCapacityPlanner,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    initialTimelineRange: { control: "select", options: ["1m", "3m", "6m", "12m"], description: "Plage temporelle initiale" },
+    showRecommendations: { control: "boolean", description: "Afficher les recommandations" },
+    showTimeline: { control: "boolean", description: "Afficher le slider de timeline" },
+    showProjectionChart: { control: "boolean", description: "Afficher le graphique de projection" },
+    animated: { control: "boolean", description: "Activer les animations" },
+    size: { control: "select", options: ["sm", "md", "lg"], description: "Taille du composant" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCapacityPlanner>
+
+const resources: ResourceData[] = [
+  {
+    id: "cpu",
+    name: "CPU",
+    type: "cpu",
+    current: 65,
+    total: 100,
+    unit: "%",
+    growthRate: 5,
+    projections: { "1m": 70, "3m": 85, "6m": 95, "12m": 110 },
+  },
+  {
+    id: "memory",
+    name: "Memory",
+    type: "memory",
+    current: 78,
+    total: 128,
+    unit: "GB",
+    growthRate: 8,
+    projections: { "1m": 84, "3m": 95, "6m": 110, "12m": 130 },
+  },
+  {
+    id: "storage",
+    name: "Storage",
+    type: "storage",
+    current: 450,
+    total: 1000,
+    unit: "GB",
+    growthRate: 10,
+    projections: { "1m": 495, "3m": 600, "6m": 750, "12m": 950 },
+  },
+  {
+    id: "network",
+    name: "Network",
+    type: "network",
+    current: 200,
+    total: 1000,
+    unit: "Mbps",
+    growthRate: 3,
+    projections: { "1m": 210, "3m": 230, "6m": 260, "12m": 300 },
+  },
+]
+
+const recommendations: ScalingRecommendation[] = [
+  {
+    id: "rec-1",
+    resourceId: "cpu",
+    type: "scale_up",
+    priority: "high",
+    title: "Upgrade CPU capacity",
+    description: "CPU utilization is projected to exceed 90% within 3 months.",
+    action: "Upgrade Now",
+    timeframe: "Within 3 months",
+    costImpact: "+$150/month",
+  },
+  {
+    id: "rec-2",
+    resourceId: "memory",
+    type: "scale_out",
+    priority: "medium",
+    title: "Add more memory nodes",
+    description: "Consider horizontal scaling to distribute memory load.",
+    action: "Plan Scaling",
+    timeframe: "Within 6 months",
+    costImpact: "+$200/month",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    resources,
+    recommendations,
+    initialTimelineRange: "3m",
+    showRecommendations: true,
+    showTimeline: true,
+    showProjectionChart: true,
+    animated: true,
+    size: "md",
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}
+
+export const CriticalCapacity: Story = {
+  args: {
+    resources: [
+      {
+        id: "cpu",
+        name: "CPU",
+        type: "cpu",
+        current: 92,
+        total: 100,
+        unit: "%",
+        growthRate: 3,
+        projections: { "1m": 95, "3m": 100, "6m": 110, "12m": 130 },
+      },
+      {
+        id: "memory",
+        name: "Memory",
+        type: "memory",
+        current: 120,
+        total: 128,
+        unit: "GB",
+        growthRate: 5,
+        projections: { "1m": 126, "3m": 135, "6m": 150, "12m": 175 },
+      },
+    ],
+    recommendations: [
+      {
+        id: "rec-urgent",
+        resourceId: "cpu",
+        type: "scale_up",
+        priority: "urgent",
+        title: "Immediate CPU upgrade required",
+        description: "CPU is critically overloaded and affecting performance.",
+        action: "Urgent Action",
+        timeframe: "Immediate",
+        costImpact: "+$300/month",
+      },
+    ],
+    showRecommendations: true,
+    initialTimelineRange: "1m",
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}
+
+export const HealthyCapacity: Story = {
+  args: {
+    resources: [
+      {
+        id: "cpu",
+        name: "CPU",
+        type: "cpu",
+        current: 35,
+        total: 100,
+        unit: "%",
+        growthRate: 2,
+        projections: { "1m": 37, "3m": 42, "6m": 48, "12m": 55 },
+      },
+      {
+        id: "memory",
+        name: "Memory",
+        type: "memory",
+        current: 40,
+        total: 128,
+        unit: "GB",
+        growthRate: 3,
+        projections: { "1m": 42, "3m": 47, "6m": 55, "12m": 65 },
+      },
+      {
+        id: "storage",
+        name: "Storage",
+        type: "storage",
+        current: 250,
+        total: 1000,
+        unit: "GB",
+        growthRate: 5,
+        projections: { "1m": 265, "3m": 300, "6m": 360, "12m": 450 },
+      },
+    ],
+    recommendations: [],
+    initialTimelineRange: "6m",
+    showRecommendations: true,
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}
+
+export const SmallSize: Story = {
+  args: {
+    resources: resources.slice(0, 2),
+    initialTimelineRange: "3m",
+    showRecommendations: false,
+    size: "sm",
+  },
+  render: (args) => (
+    <div className="max-w-2xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  args: {
+    resources,
+    recommendations,
+    initialTimelineRange: "6m",
+    showRecommendations: true,
+    size: "lg",
+  },
+  render: (args) => (
+    <div className="max-w-5xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}
+
+export const NoAnimations: Story = {
+  args: {
+    resources,
+    initialTimelineRange: "3m",
+    animated: false,
+    showRecommendations: false,
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}
+
+export const TimelineOnly: Story = {
+  args: {
+    resources,
+    initialTimelineRange: "3m",
+    showTimeline: true,
+    showProjectionChart: false,
+    showRecommendations: false,
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}
+
+export const WithCallbacks: Story = {
+  args: {
+    resources,
+    recommendations,
+    initialTimelineRange: "3m",
+    showRecommendations: true,
+    onTimelineChange: (range) => console.log("Timeline changed:", range),
+    onResourceClick: (resource) => console.log("Resource clicked:", resource.name),
+    onRecommendationAction: (rec) => console.log("Action triggered:", rec.title),
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaCapacityPlanner {...args} />
+    </div>
+  ),
+}

package/src/components/waka-cart-summary/WakaCartSummary.stories.tsx

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCartSummary, type CartItem } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaCartSummary> = {
+  title: "E-commerce/WakaCartSummary",
+  component: WakaCartSummary,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    showImages: {
+      control: "boolean",
+      description: "Afficher les images",
+    },
+    enableQuantityEdit: {
+      control: "boolean",
+      description: "Activer l'édition des quantités",
+    },
+    enableRemove: {
+      control: "boolean",
+      description: "Activer la suppression d'articles",
+    },
+    currency: {
+      control: "text",
+      description: "Code devise ISO 4217 (EUR, USD, etc.)",
+    },
+    taxRate: {
+      control: { type: "number", min: 0, max: 1, step: 0.01 },
+      description: "Taux de TVA (0.2 = 20%)",
+    },
+    shippingCost: {
+      control: "number",
+      description: "Frais de livraison",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCartSummary>
+
+const sampleItems: CartItem[] = [
+  {
+    id: "1",
+    name: "T-shirt Premium",
+    description: "Coton bio, Taille M",
+    image: "https://picsum.photos/seed/tshirt/100/100",
+    price: 29.99,
+    quantity: 2,
+    maxQuantity: 10,
+  },
+  {
+    id: "2",
+    name: "Pantalon Chino",
+    description: "Beige, Taille 42",
+    image: "https://picsum.photos/seed/pants/100/100",
+    price: 59.99,
+    quantity: 1,
+    maxQuantity: 5,
+  },
+  {
+    id: "3",
+    name: "Sneakers Classic",
+    description: "Blanc/Noir, Pointure 43",
+    image: "https://picsum.photos/seed/shoes/100/100",
+    price: 89.99,
+    quantity: 1,
+    maxQuantity: 3,
+  },
+]
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+    showImages: true,
+    enableQuantityEdit: true,
+    enableRemove: true,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCartSummary {...args} />
+    </div>
+  ),
+}
+
+export const WithoutImages: Story = {
+  args: {
+    items: sampleItems,
+    showImages: false,
+    enableQuantityEdit: true,
+    enableRemove: true,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCartSummary {...args} />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  args: {
+    items: sampleItems,
+    showImages: true,
+    enableQuantityEdit: false,
+    enableRemove: false,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCartSummary {...args} />
+    </div>
+  ),
+}
+
+export const SingleItem: Story = {
+  args: {
+    items: [sampleItems[0]],
+    showImages: true,
+    enableQuantityEdit: true,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCartSummary {...args} />
+    </div>
+  ),
+}
+
+export const EmptyCart: Story = {
+  args: {
+    items: [],
+    showImages: true,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCartSummary {...args} />
+    </div>
+  ),
+}
+
+export const USDCurrency: Story = {
+  args: {
+    items: sampleItems.map(item => ({ ...item, price: item.price * 1.1 })),
+    showImages: true,
+    enableQuantityEdit: true,
+    currency: "USD",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCartSummary {...args} />
+    </div>
+  ),
+}
+
+export const WithTaxAndShipping: Story = {
+  args: {
+    items: sampleItems,
+    showImages: true,
+    enableQuantityEdit: true,
+    enableRemove: true,
+    currency: "EUR",
+    taxRate: 0.2,
+    shippingCost: 5.99,
+    freeShippingThreshold: 100,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCartSummary {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-cart-summary/index.tsx

@@ -930,28 +930,35 @@ export function useCartSummary(
   // Add item
   const addItem = useCallback(
     (item: CartItem) => {
-      setItems((prev) => {
-        const existingIndex = prev.findIndex((i) => i.id === item.id)
+      setItemsState((prev: CartItem[]) => {
+        const existingIndex = prev.findIndex((i: CartItem) => i.id === item.id)
         if (existingIndex >= 0) {
           const updated = [...prev]
           updated[existingIndex] = {
             ...updated[existingIndex],
             quantity: updated[existingIndex].quantity + item.quantity,
           }
+          onCartChange?.(updated)
           return updated
         }
-        return [...prev, item]
+        const newItems = [...prev, item]
+        onCartChange?.(newItems)
+        return newItems
       })
     },
-    [setItems]
+    [onCartChange]
   )
 
   // Remove item
   const removeItem = useCallback(
     (itemId: string) => {
-      setItems((prev) => prev.filter((i) => i.id !== itemId))
+      setItemsState((prev: CartItem[]) => {
+        const newItems = prev.filter((i: CartItem) => i.id !== itemId)
+        onCartChange?.(newItems)
+        return newItems
+      })
     },
-    [setItems]
+    [onCartChange]
   )
 
   // Update quantity
@@ -962,13 +969,15 @@ export function useCartSummary(
         return
       }
 
-      setItems((prev) =>
-        prev.map((item) =>
+      setItemsState((prev: CartItem[]) => {
+        const newItems = prev.map((item: CartItem) =>
           item.id === itemId ? { ...item, quantity } : item
         )
-      )
+        onCartChange?.(newItems)
+        return newItems
+      })
     },
-    [setItems, removeItem]
+    [removeItem, onCartChange]
   )
 
   // Clear cart

package/src/components/waka-challenge-timer/WakaChallengeTimer.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaChallengeTimer, Challenge } from "./index"
+
+const createChallenge = (hoursRemaining: number, category: Challenge["category"] = "daily"): Challenge => ({
+  id: "challenge-1",
+  name: "Complete 5 Tasks",
+  description: "Finish 5 tasks to earn bonus XP",
+  endTime: new Date(Date.now() + hoursRemaining * 60 * 60 * 1000),
+  category,
+  tasks: [
+    { id: "t1", text: "Complete a quiz", completed: true },
+    { id: "t2", text: "Invite a friend", completed: true },
+    { id: "t3", text: "Reach level 10", completed: false, current: 7, target: 10 },
+    { id: "t4", text: "Earn 100 XP", completed: false, current: 45, target: 100 },
+    { id: "t5", text: "Play for 30 minutes", completed: false },
+  ],
+  rewards: [
+    { type: "xp", label: "XP", value: 500 },
+    { type: "badge", label: "Badge", value: "Speed Demon" },
+  ],
+})
+
+const meta: Meta<typeof WakaChallengeTimer> = {
+  title: "Components/Gamification/WakaChallengeTimer",
+  component: WakaChallengeTimer,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["compact", "default", "large"],
+      description: "Size variant",
+    },
+    isPaused: {
+      control: "boolean",
+      description: "Whether timer is paused",
+    },
+    urgentThreshold: {
+      control: "number",
+      description: "Seconds threshold for urgent mode",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaChallengeTimer>
+
+export const Default: Story = {
+  args: {
+    challenge: createChallenge(24),
+    size: "default",
+  },
+  render: (args) => <WakaChallengeTimer {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    challenge: createChallenge(12, "weekly"),
+    size: "compact",
+  },
+  render: (args) => <WakaChallengeTimer {...args} />,
+}
+
+export const Large: Story = {
+  args: {
+    challenge: createChallenge(48, "event"),
+    size: "large",
+  },
+  render: (args) => (
+    <div className="w-[500px]">
+      <WakaChallengeTimer {...args} />
+    </div>
+  ),
+}
+
+export const Urgent: Story = {
+  args: {
+    challenge: createChallenge(0.5), // 30 minutes
+    size: "default",
+    urgentThreshold: 3600,
+  },
+  render: (args) => <WakaChallengeTimer {...args} />,
+}
+
+export const Personal: Story = {
+  args: {
+    challenge: {
+      ...createChallenge(2, "personal"),
+      isPersonal: true,
+    },
+    size: "default",
+    isPaused: false,
+  },
+  render: (args) => <WakaChallengeTimer {...args} />,
+}
+