@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-combo-counter/WakaComboCounter.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaComboCounter, useComboCounter } from "./index"
+import { Button } from "../button"
+import * as React from "react"
+
+const InteractiveDemo = () => {
+  const { combo, multiplier, timeRemaining, increment, reset } = useComboCounter({
+    timerDuration: 3000,
+    autoDecay: true,
+  })
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <WakaComboCounter
+        combo={combo}
+        multiplier={multiplier}
+        timeRemaining={timeRemaining}
+        size="lg"
+        showTimer
+        showMultiplier
+        animated
+      />
+      <div className="flex gap-2">
+        <Button onClick={() => increment()}>+1 Combo</Button>
+        <Button onClick={() => increment(5)} variant="secondary">+5 Combo</Button>
+        <Button onClick={reset} variant="destructive">Reset</Button>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta<typeof WakaComboCounter> = {
+  title: "Components/Gamification/WakaComboCounter",
+  component: WakaComboCounter,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+      description: "Size variant",
+    },
+    intensity: {
+      control: "select",
+      options: ["low", "medium", "high", "extreme"],
+      description: "Visual intensity",
+    },
+    showTimer: {
+      control: "boolean",
+      description: "Show timer bar",
+    },
+    showMultiplier: {
+      control: "boolean",
+      description: "Show multiplier badge",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaComboCounter>
+
+export const Default: Story = {
+  args: {
+    combo: 15,
+    multiplier: 2,
+    timeRemaining: 75,
+    size: "md",
+    intensity: "medium",
+    showTimer: true,
+    showMultiplier: true,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const HighCombo: Story = {
+  args: {
+    combo: 50,
+    multiplier: 5,
+    timeRemaining: 60,
+    size: "lg",
+    intensity: "high",
+    showTimer: true,
+    showMultiplier: true,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const Extreme: Story = {
+  args: {
+    combo: 100,
+    multiplier: 10,
+    maxMultiplier: 10,
+    timeRemaining: 40,
+    size: "xl",
+    intensity: "extreme",
+    showTimer: true,
+    showMultiplier: true,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    combo: 8,
+    multiplier: 1,
+    timeRemaining: 90,
+    size: "sm",
+    intensity: "low",
+    showTimer: true,
+    showMultiplier: false,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveDemo />,
+}
+

package/src/components/waka-command-bar/WakaCommandBar.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCommandBar, type CommandItem } from "./index"
+import { Settings, User, FileText, Search, Zap } from "lucide-react"
+
+const meta: Meta<typeof WakaCommandBar> = {
+  title: "Navigation/WakaCommandBar",
+  component: WakaCommandBar,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: { control: "text", description: "Placeholder" },
+    showShortcuts: { control: "boolean", description: "Raccourcis clavier" },
+    showCategories: { control: "boolean", description: "Afficher les catégories" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCommandBar>
+
+const commands: CommandItem[] = [
+  { id: "search", label: "Rechercher", icon: <Search className="tw-h-4 tw-w-4" />, shortcut: ["⌘", "K"], category: "Navigation" },
+  { id: "settings", label: "Paramètres", icon: <Settings className="tw-h-4 tw-w-4" />, shortcut: ["⌘", ","], category: "Navigation" },
+  { id: "profile", label: "Mon profil", icon: <User className="tw-h-4 tw-w-4" />, category: "Compte" },
+  { id: "docs", label: "Documentation", icon: <FileText className="tw-h-4 tw-w-4" />, category: "Aide" },
+  { id: "actions", label: "Actions rapides", icon: <Zap className="tw-h-4 tw-w-4" />, category: "Actions" },
+]
+
+export const Default: Story = {
+  args: { commands, placeholder: "Tapez une commande...", showShortcuts: true, showCategories: true },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaCommandBar {...args} />
+    </div>
+  ),
+}
+
+export const NoCategories: Story = {
+  args: { commands, placeholder: "Rechercher...", showCategories: false },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaCommandBar {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-compare-period/WakaComparePeriod.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaComparePeriod } from "./index"
+
+const meta: Meta<typeof WakaComparePeriod> = {
+  title: "Admin/WakaComparePeriod",
+  component: WakaComparePeriod,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    preset: { control: "select", options: ["last_week", "last_month", "last_quarter", "last_year", "custom"], description: "Préréglage" },
+    showChart: { control: "boolean", description: "Afficher le graphique" },
+    showPercentage: { control: "boolean", description: "Afficher les pourcentages" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaComparePeriod>
+
+const metrics = [
+  { id: "revenue", label: "Revenu", current: 45000, previous: 38000, format: "currency" as const },
+  { id: "users", label: "Utilisateurs", current: 1250, previous: 1100, format: "number" as const },
+  { id: "conversion", label: "Conversion", current: 3.5, previous: 3.2, format: "percent" as const },
+]
+
+export const Default: Story = {
+  args: {
+    metrics,
+    preset: "last_month",
+    currentPeriod: { start: new Date("2024-01-01"), end: new Date("2024-01-31") },
+    previousPeriod: { start: new Date("2023-12-01"), end: new Date("2023-12-31") },
+    showChart: true,
+    showPercentage: true,
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaComparePeriod {...args} />
+    </div>
+  ),
+}
+
+export const WeekComparison: Story = {
+  args: {
+    metrics,
+    preset: "last_week",
+    showChart: true,
+    showPercentage: true,
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaComparePeriod {...args} />
+    </div>
+  ),
+}
+
+export const NegativeTrend: Story = {
+  args: {
+    metrics: metrics.map(m => ({ ...m, current: m.previous * 0.9, previous: m.current })),
+    preset: "last_month",
+    showPercentage: true,
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaComparePeriod {...args} />
+    </div>
+  ),
+}
+
+export const NoChart: Story = {
+  args: { metrics, preset: "last_quarter", showChart: false, showPercentage: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaComparePeriod {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-config-comparator/WakaConfigComparator.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaConfigComparator, defaultConfigEnvironments, type ConfigEnvironment } from "./index"
+
+const meta: Meta<typeof WakaConfigComparator> = {
+  title: "DevOps/WakaConfigComparator",
+  component: WakaConfigComparator,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showDiffsOnly: { control: "boolean", description: "Afficher uniquement les différences" },
+    title: { control: "text", description: "Titre du comparateur" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaConfigComparator>
+
+const environments: ConfigEnvironment[] = [
+  {
+    id: "dev",
+    name: "Development",
+    values: [
+      { key: "API_URL", value: "http://localhost:3000" },
+      { key: "DEBUG", value: true },
+      { key: "LOG_LEVEL", value: "debug" },
+      { key: "CACHE_TTL", value: 60 },
+      { key: "HOT_RELOAD", value: true },
+    ],
+  },
+  {
+    id: "staging",
+    name: "Staging",
+    values: [
+      { key: "API_URL", value: "https://staging.api.example.com" },
+      { key: "DEBUG", value: true },
+      { key: "LOG_LEVEL", value: "info" },
+      { key: "CACHE_TTL", value: 300 },
+      { key: "TEST_MODE", value: true },
+    ],
+  },
+  {
+    id: "prod",
+    name: "Production",
+    values: [
+      { key: "API_URL", value: "https://api.example.com" },
+      { key: "DEBUG", value: false },
+      { key: "LOG_LEVEL", value: "error" },
+      { key: "CACHE_TTL", value: 3600 },
+      { key: "MAX_CONNECTIONS", value: 100 },
+    ],
+  },
+]
+
+export const Default: Story = {
+  args: {
+    environments,
+    leftEnvId: "dev",
+    rightEnvId: "prod",
+    title: "Configuration Comparison",
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaConfigComparator {...args} />
+    </div>
+  ),
+}
+
+export const DiffOnly: Story = {
+  args: {
+    environments,
+    leftEnvId: "staging",
+    rightEnvId: "prod",
+    showDiffsOnly: true,
+    title: "Configuration Diff",
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaConfigComparator {...args} />
+    </div>
+  ),
+}
+
+export const TwoEnvironments: Story = {
+  args: {
+    environments: environments.slice(0, 2),
+    leftEnvId: "dev",
+    rightEnvId: "staging",
+    title: "Dev vs Staging",
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaConfigComparator {...args} />
+    </div>
+  ),
+}
+
+export const WithCallbacks: Story = {
+  args: {
+    environments,
+    leftEnvId: "dev",
+    rightEnvId: "prod",
+    onEnvironmentChange: (left, right) => console.log(`Changed: ${left} vs ${right}`),
+    onCopyValue: (key, value, from, to) => console.log(`Copy ${key}=${value} from ${from} to ${to}`),
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaConfigComparator {...args} />
+    </div>
+  ),
+}
+
+export const UsingDefaultData: Story = {
+  args: {
+    environments: defaultConfigEnvironments,
+    leftEnvId: "production",
+    rightEnvId: "staging",
+    title: "Production vs Staging",
+  },
+  render: (args) => (
+    <div className="max-w-4xl">
+      <WakaConfigComparator {...args} />
+    </div>
+  ),
+}
+
+export const MultipleComparisons: Story = {
+  render: () => (
+    <div className="space-y-6 max-w-4xl">
+      <WakaConfigComparator
+        environments={defaultConfigEnvironments}
+        leftEnvId="production"
+        rightEnvId="staging"
+        title="Production vs Staging"
+      />
+      <WakaConfigComparator
+        environments={defaultConfigEnvironments}
+        leftEnvId="staging"
+        rightEnvId="development"
+        title="Staging vs Development"
+      />
+    </div>
+  ),
+}

package/src/components/waka-connection-matrix/WakaConnectionMatrix.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaConnectionMatrix, type Connection } from "./index"
+
+const meta: Meta<typeof WakaConnectionMatrix> = {
+  title: "DevOps/WakaConnectionMatrix",
+  component: WakaConnectionMatrix,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showLegend: { control: "boolean", description: "Afficher la légende" },
+    showStats: { control: "boolean", description: "Afficher les stats" },
+    interactive: { control: "boolean", description: "Mode interactif" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaConnectionMatrix>
+
+const services = [
+  { id: "api", name: "API Gateway" },
+  { id: "auth", name: "Auth Service" },
+  { id: "user", name: "User Service" },
+  { id: "order", name: "Order Service" },
+  { id: "payment", name: "Payment Service" },
+  { id: "db", name: "Database" },
+]
+
+const connections: Connection[] = [
+  { source: "api", target: "auth", weight: 90, type: "http", latency: 5 },
+  { source: "api", target: "user", weight: 75, type: "http", latency: 10 },
+  { source: "api", target: "order", weight: 60, type: "http", latency: 15 },
+  { source: "auth", target: "db", weight: 80, type: "database", latency: 2 },
+  { source: "user", target: "db", weight: 85, type: "database", latency: 3 },
+  { source: "order", target: "payment", weight: 50, type: "grpc", latency: 20 },
+  { source: "order", target: "db", weight: 70, type: "database", latency: 5 },
+]
+
+export const Default: Story = {
+  args: { services, connections, showLegend: true, showStats: true, interactive: true },
+  render: (args) => <WakaConnectionMatrix {...args} />,
+}
+
+export const Simple: Story = {
+  args: { services: services.slice(0, 4), connections: connections.slice(0, 4), showLegend: false },
+  render: (args) => <WakaConnectionMatrix {...args} />,
+}
+
+export const Static: Story = {
+  args: { services, connections, interactive: false, showStats: true },
+  render: (args) => <WakaConnectionMatrix {...args} />,
+}
+

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaContentRecommendation } from "./index"
+
+const meta: Meta<typeof WakaContentRecommendation> = {
+  title: "Sponsoring/WakaContentRecommendation",
+  component: WakaContentRecommendation,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  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" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaContentRecommendation>
+
+const slotIds = ["rec-1", "rec-2", "rec-3", "rec-4"]
+
+export const Default: Story = {
+  args: { title: "Recommandations", slotIds, layout: "grid", columns: 4 },
+  render: (args) => <WakaContentRecommendation {...args} />,
+}
+
+export const Carousel: Story = {
+  args: { title: "À découvrir", 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" },
+  render: (args) => <WakaContentRecommendation {...args} />,
+}
+
+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-coupon-input/WakaCouponInput.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCouponInput, type Coupon } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaCouponInput> = {
+  title: "E-commerce/WakaCouponInput",
+  component: WakaCouponInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
+    },
+    disabled: {
+      control: "boolean",
+      description: "État désactivé",
+    },
+    maxCoupons: {
+      control: "number",
+      description: "Nombre max de coupons",
+    },
+    showAppliedCoupons: {
+      control: "boolean",
+      description: "Afficher les coupons appliqués",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCouponInput>
+
+const appliedCoupons: Coupon[] = [
+  {
+    code: "SUMMER20",
+    discountValue: 20,
+    discountType: "percentage",
+    description: "Réduction été",
+  },
+]
+
+const mockValidate = async (code: string) => {
+  await new Promise(r => setTimeout(r, 500))
+  if (code === "VALID10") {
+    return {
+      isValid: true,
+      coupon: { code, discountValue: 10, discountType: "percentage" as const },
+    }
+  }
+  if (code === "FLAT50") {
+    return {
+      isValid: true,
+      coupon: { code, discountValue: 50, discountType: "fixed" as const, description: "50€ de réduction" },
+    }
+  }
+  return { isValid: false, errorMessage: "Code coupon invalide" }
+}
+
+export const Default: Story = {
+  args: {
+    placeholder: "Entrez votre code promo",
+    showAppliedCoupons: true,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaCouponInput {...args} onValidate={mockValidate} />
+    </div>
+  ),
+}
+
+export const WithAppliedCoupon: Story = {
+  args: {
+    appliedCoupons,
+    placeholder: "Ajouter un autre code",
+    showAppliedCoupons: true,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaCouponInput {...args} onValidate={mockValidate} />
+    </div>
+  ),
+}
+
+export const MultipleCoupons: Story = {
+  args: {
+    appliedCoupons: [
+      ...appliedCoupons,
+      { code: "FLAT50", discountValue: 50, discountType: "fixed" as const },
+    ],
+    maxCoupons: 3,
+    showAppliedCoupons: true,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaCouponInput {...args} onValidate={mockValidate} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Code promo désactivé",
+    disabled: true,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaCouponInput {...args} />
+    </div>
+  ),
+}
+
+export const SingleCouponOnly: Story = {
+  args: {
+    maxCoupons: 1,
+    placeholder: "Un seul code autorisé",
+    showAppliedCoupons: true,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaCouponInput {...args} onValidate={mockValidate} />
+    </div>
+  ),
+}
+