@wakastellar/ui 2.3.5 → 3.0.0

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-container-list/WakaContainerList.stories.tsx

@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaContainerList, defaultContainers } from './index'
+import type { Container, ContainerStatus } from './index'
+import * as React from 'react'
+
+const manyContainers: Container[] = [
+  ...defaultContainers,
+  {
+    id: 'mno345pqr678',
+    name: 'nginx-proxy',
+    image: 'nginx:alpine',
+    status: 'running',
+    createdAt: new Date(Date.now() - 10 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 5 * 24 * 3600000),
+    ports: [
+      { host: 80, container: 80, protocol: 'tcp' },
+      { host: 443, container: 443, protocol: 'tcp' },
+    ],
+    resources: {
+      cpu: 2.1,
+      memory: 32 * 1024 * 1024,
+      memoryLimit: 128 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 100,
+      networkTx: 1024 * 1024 * 80,
+    },
+  },
+  {
+    id: 'pqr678stu901',
+    name: 'elasticsearch',
+    image: 'elasticsearch:8.10',
+    status: 'running',
+    createdAt: new Date(Date.now() - 20 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 10 * 24 * 3600000),
+    ports: [
+      { host: 9200, container: 9200, protocol: 'tcp' },
+      { host: 9300, container: 9300, protocol: 'tcp' },
+    ],
+    resources: {
+      cpu: 45.8,
+      memory: 2048 * 1024 * 1024,
+      memoryLimit: 4096 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 20,
+      networkTx: 1024 * 1024 * 15,
+    },
+  },
+  {
+    id: 'stu901vwx234',
+    name: 'grafana',
+    image: 'grafana/grafana:10.0',
+    status: 'running',
+    createdAt: new Date(Date.now() - 15 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 15 * 24 * 3600000),
+    ports: [{ host: 3000, container: 3000, protocol: 'tcp' }],
+    resources: {
+      cpu: 8.3,
+      memory: 128 * 1024 * 1024,
+      memoryLimit: 256 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 5,
+      networkTx: 1024 * 1024 * 10,
+    },
+  },
+  {
+    id: 'vwx234yza567',
+    name: 'prometheus',
+    image: 'prom/prometheus:v2.45',
+    status: 'stopped',
+    createdAt: new Date(Date.now() - 30 * 24 * 3600000),
+    exitCode: 0,
+  },
+  {
+    id: 'yza567bcd890',
+    name: 'alertmanager',
+    image: 'prom/alertmanager:v0.26',
+    status: 'exited',
+    createdAt: new Date(Date.now() - 5 * 24 * 3600000),
+    exitCode: 1,
+  },
+]
+
+const allStatuses: Container[] = [
+  { id: '1', name: 'running-container', image: 'nginx:latest', status: 'running', createdAt: new Date(), startedAt: new Date(Date.now() - 3600000), resources: { cpu: 15.5, memory: 64 * 1024 * 1024, memoryLimit: 128 * 1024 * 1024, networkRx: 1024 * 1024, networkTx: 512 * 1024 } },
+  { id: '2', name: 'stopped-container', image: 'redis:alpine', status: 'stopped', createdAt: new Date() },
+  { id: '3', name: 'paused-container', image: 'postgres:15', status: 'paused', createdAt: new Date() },
+  { id: '4', name: 'restarting-container', image: 'mysql:8', status: 'restarting', createdAt: new Date() },
+  { id: '5', name: 'exited-container', image: 'busybox', status: 'exited', createdAt: new Date(), exitCode: 137 },
+  { id: '6', name: 'created-container', image: 'alpine:latest', status: 'created', createdAt: new Date() },
+]
+
+const meta: Meta<typeof WakaContainerList> = {
+  title: 'Components/DevOps/WakaContainerList',
+  component: WakaContainerList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A container list with status, resource metrics, port mappings, search, and lifecycle actions (start, stop, restart, remove).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state for refresh button',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaContainerList>
+
+export const Default: Story = {
+  args: {
+    containers: defaultContainers,
+  },
+  render: (args) => (
+    <div className="w-[900px] h-[500px]">
+      <WakaContainerList
+        {...args}
+        onStart={(id) => console.log('Start:', id)}
+        onStop={(id) => console.log('Stop:', id)}
+        onRestart={(id) => console.log('Restart:', id)}
+        onRemove={(id) => console.log('Remove:', id)}
+        onViewLogs={(id) => console.log('View logs:', id)}
+        onExec={(id) => console.log('Exec:', id)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const AllStatuses: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Containers in all possible states
+      </p>
+      <WakaContainerList
+        containers={allStatuses}
+        onStart={(id) => console.log('Start:', id)}
+        onStop={(id) => console.log('Stop:', id)}
+        onRestart={(id) => console.log('Restart:', id)}
+        onRemove={(id) => console.log('Remove:', id)}
+        onViewLogs={(id) => console.log('View logs:', id)}
+        onExec={(id) => console.log('Exec:', id)}
+      />
+    </div>
+  ),
+}
+
+export const ManyContainers: Story = {
+  render: () => (
+    <div className="w-[900px] h-[600px]">
+      <WakaContainerList
+        containers={manyContainers}
+        title="Docker Containers"
+        onStart={(id) => console.log('Start:', id)}
+        onStop={(id) => console.log('Stop:', id)}
+        onRestart={(id) => console.log('Restart:', id)}
+        onRemove={(id) => console.log('Remove:', id)}
+        onViewLogs={(id) => console.log('View logs:', id)}
+        onExec={(id) => console.log('Exec:', id)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="w-[900px] h-[400px]">
+      <WakaContainerList
+        containers={defaultContainers}
+        isLoading
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [containers, setContainers] = React.useState<Container[]>(defaultContainers)
+
+    const handleStart = (id: string) => {
+      setContainers((prev) =>
+        prev.map((c) =>
+          c.id === id
+            ? {
+                ...c,
+                status: 'running' as ContainerStatus,
+                startedAt: new Date(),
+                resources: {
+                  cpu: Math.random() * 30,
+                  memory: Math.random() * 256 * 1024 * 1024,
+                  memoryLimit: 512 * 1024 * 1024,
+                  networkRx: 0,
+                  networkTx: 0,
+                },
+              }
+            : c
+        )
+      )
+    }
+
+    const handleStop = (id: string) => {
+      setContainers((prev) =>
+        prev.map((c) =>
+          c.id === id
+            ? { ...c, status: 'stopped' as ContainerStatus, startedAt: undefined, resources: undefined }
+            : c
+        )
+      )
+    }
+
+    const handleRestart = (id: string) => {
+      setContainers((prev) =>
+        prev.map((c) =>
+          c.id === id ? { ...c, status: 'restarting' as ContainerStatus } : c
+        )
+      )
+
+      setTimeout(() => {
+        setContainers((prev) =>
+          prev.map((c) =>
+            c.id === id
+              ? {
+                  ...c,
+                  status: 'running' as ContainerStatus,
+                  startedAt: new Date(),
+                }
+              : c
+          )
+        )
+      }, 2000)
+    }
+
+    const handleRemove = (id: string) => {
+      setContainers((prev) => prev.filter((c) => c.id !== id))
+    }
+
+    return (
+      <div className="w-[900px] h-[500px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Interactive demo - try starting, stopping, and removing containers
+        </p>
+        <WakaContainerList
+          containers={containers}
+          title="Docker Containers"
+          onStart={handleStart}
+          onStop={handleStop}
+          onRestart={handleRestart}
+          onRemove={handleRemove}
+          onViewLogs={(id) => alert(`Viewing logs for container ${id}`)}
+          onExec={(id) => alert(`Opening terminal for container ${id}`)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[900px] h-[400px]">
+      <WakaContainerList
+        containers={[]}
+        title="No Containers"
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        View-only mode (no action callbacks provided)
+      </p>
+      <WakaContainerList
+        containers={defaultContainers}
+        title="Container Status"
+      />
+    </div>
+  ),
+}
+
+export const DockerDashboard: Story = {
+  render: () => (
+    <div className="p-6 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">Docker Dashboard</h2>
+          <p className="text-sm text-muted-foreground">Host: localhost</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-green-500" />
+          <span className="text-sm text-green-500 font-medium">Connected</span>
+        </div>
+      </div>
+
+      <div className="w-[850px]">
+        <WakaContainerList
+          containers={manyContainers}
+          onStart={(id) => console.log('Start:', id)}
+          onStop={(id) => console.log('Stop:', id)}
+          onRestart={(id) => console.log('Restart:', id)}
+          onRemove={(id) => console.log('Remove:', id)}
+          onViewLogs={(id) => console.log('View logs:', id)}
+          onExec={(id) => console.log('Exec:', id)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    </div>
+  ),
+}

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} />,
+}
+