@wakastellar/ui 3.2.0 → 3.3.2

package/src/components/waka-actors-list/index.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { ActorBadge } from "../waka-actor-badge"
+
+export interface Actor {
+  id: string
+  userId: string
+  userName: string
+  role: string
+  isPrimary: boolean
+}
+
+export interface ActorsListProps {
+  wakaActors: Actor[]
+  ppActors: Actor[]
+  requiredWakaRoles: string[]
+  requiredPpRoles: string[]
+  onAdd: (side: "waka" | "pp") => void
+  onRemove: (actorId: string) => void
+  onTogglePrimary: (actorId: string) => void
+}
+
+function ActorPanel({
+  title,
+  actors,
+  requiredRoles,
+  bgClass,
+  side,
+  onAdd,
+  onRemove,
+  onTogglePrimary,
+}: {
+  title: string
+  actors: Actor[]
+  requiredRoles: string[]
+  bgClass: string
+  side: "waka" | "pp"
+  onAdd: (side: "waka" | "pp") => void
+  onRemove: (actorId: string) => void
+  onTogglePrimary: (actorId: string) => void
+}) {
+  const filledRoles = new Set(actors.map((a) => a.role))
+  const missingRequired = requiredRoles.filter((r) => !filledRoles.has(r))
+
+  return (
+    <div className={cn("flex-1 rounded-lg border p-3 space-y-2", bgClass)}>
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-semibold">{title}</h4>
+        <button
+          onClick={() => onAdd(side)}
+          className="rounded-md bg-background border px-2 py-1 text-xs hover:bg-accent"
+          aria-label={`Ajouter un acteur ${title}`}
+        >
+          + Ajouter
+        </button>
+      </div>
+
+      {missingRequired.length > 0 && (
+        <div className="text-xs text-red-600 border border-red-200 rounded p-1.5 bg-red-50 dark:bg-red-900/10">
+          Roles obligatoires manquants : {missingRequired.join(", ")}
+        </div>
+      )}
+
+      <div className="space-y-1.5">
+        {actors.map((a) => (
+          <div key={a.id} className="flex items-center justify-between rounded-md bg-background/80 px-2 py-1.5">
+            <ActorBadge role={a.role} name={a.userName} isPrimary={a.isPrimary} />
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => onTogglePrimary(a.id)}
+                className="text-xs text-muted-foreground hover:text-foreground"
+                title={a.isPrimary ? "Retirer principal" : "Marquer principal"}
+              >
+                {a.isPrimary ? "★" : "☆"}
+              </button>
+              <button
+                onClick={() => onRemove(a.id)}
+                className="text-xs text-red-500 hover:text-red-700 ml-1"
+                aria-label={`Retirer ${a.userName}`}
+              >
+                ×
+              </button>
+            </div>
+          </div>
+        ))}
+        {actors.length === 0 && (
+          <p className="text-xs text-muted-foreground text-center py-2">Aucun acteur</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ActorsList({
+  wakaActors, ppActors, requiredWakaRoles, requiredPpRoles, onAdd, onRemove, onTogglePrimary,
+}: ActorsListProps) {
+  return (
+    <div className="flex gap-3">
+      <ActorPanel
+        title="Acteurs Waka"
+        actors={wakaActors}
+        requiredRoles={requiredWakaRoles}
+        bgClass="bg-blue-50/50 dark:bg-blue-950/10"
+        side="waka"
+        onAdd={onAdd}
+        onRemove={onRemove}
+        onTogglePrimary={onTogglePrimary}
+      />
+      <ActorPanel
+        title="Acteurs PP"
+        actors={ppActors}
+        requiredRoles={requiredPpRoles}
+        bgClass="bg-emerald-50/50 dark:bg-emerald-950/10"
+        side="pp"
+        onAdd={onAdd}
+        onRemove={onRemove}
+        onTogglePrimary={onTogglePrimary}
+      />
+    </div>
+  )
+}
+
+export { ActorsList }

package/src/components/waka-ai-assistant-button/index.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+export interface AiAssistantButtonProps {
+  onClick: () => void
+  hasExistingDoc?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+function AiAssistantButton({ onClick, hasExistingDoc, disabled, className }: AiAssistantButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+        "bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50",
+        className,
+      )}
+      aria-label={hasExistingDoc ? "Ouvrir document IA" : "Assistant IA"}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
+      {hasExistingDoc ? "Ouvrir document IA" : "Assistant IA"}
+    </button>
+  )
+}
+
+export { AiAssistantButton }

package/src/components/waka-credit-activity-feed/WakaCreditActivityFeed.stories.tsx

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditActivityFeed } from "./index"
+import type { CreditTransaction } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const now = new Date()
+
+function minutesAgo(minutes: number): Date {
+  return new Date(now.getTime() - minutes * 60 * 1000)
+}
+
+function hoursAgo(hours: number): Date {
+  return new Date(now.getTime() - hours * 60 * 60 * 1000)
+}
+
+function daysAgo(days: number): Date {
+  return new Date(now.getTime() - days * 24 * 60 * 60 * 1000)
+}
+
+const mockActivities: CreditTransaction[] = [
+  {
+    id: "1",
+    type: "debit",
+    amount: 150,
+    description: "Kubernetes cluster deployment",
+    service: "InfraOperator",
+    timestamp: minutesAgo(2),
+    status: "completed",
+    balanceAfter: 2300,
+  },
+  {
+    id: "2",
+    type: "credit",
+    amount: 500,
+    description: "Credit pack purchase - Standard",
+    timestamp: minutesAgo(35),
+    status: "completed",
+    balanceAfter: 2450,
+  },
+  {
+    id: "3",
+    type: "debit",
+    amount: 75,
+    description: "Docker image build",
+    service: "ImageBuilder",
+    timestamp: hoursAgo(1),
+    status: "completed",
+    balanceAfter: 1950,
+  },
+  {
+    id: "4",
+    type: "refund",
+    amount: 200,
+    description: "Failed deployment refund",
+    service: "InfraOperator",
+    timestamp: hoursAgo(3),
+    status: "completed",
+    balanceAfter: 2025,
+  },
+  {
+    id: "5",
+    type: "bonus",
+    amount: 100,
+    description: "Welcome bonus credits",
+    timestamp: daysAgo(1),
+    status: "completed",
+    balanceAfter: 1825,
+  },
+  {
+    id: "6",
+    type: "debit",
+    amount: 50,
+    description: "Helm chart deployment",
+    service: "HelmCharts",
+    timestamp: daysAgo(1),
+    status: "completed",
+    balanceAfter: 1725,
+  },
+  {
+    id: "7",
+    type: "expiry",
+    amount: 250,
+    description: "Promotional credits expired",
+    timestamp: daysAgo(3),
+    status: "completed",
+    balanceAfter: 1775,
+  },
+  {
+    id: "8",
+    type: "credit",
+    amount: 1000,
+    description: "Credit pack purchase - Premium",
+    timestamp: daysAgo(5),
+    status: "completed",
+    balanceAfter: 2025,
+  },
+]
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta: Meta<typeof WakaCreditActivityFeed> = {
+  title: "Components/Credit/WakaCreditActivityFeed",
+  component: WakaCreditActivityFeed,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Vertical timeline feed of recent credit operations. Each item shows a type icon, description, amount, and relative time.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    maxItems: {
+      control: { type: "number", min: 1, max: 20 },
+      description: "Maximum number of items to display",
+    },
+    showLoadMore: {
+      control: "boolean",
+      description: "Show load more button",
+    },
+    loading: {
+      control: "boolean",
+      description: "Show loading skeleton state",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable staggered fade-in animation",
+    },
+    emptyMessage: {
+      control: "text",
+      description: "Message shown when activity list is empty",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[460px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditActivityFeed>
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    activities: mockActivities,
+  },
+}
+
+export const WithLoadMore: Story = {
+  args: {
+    activities: mockActivities.slice(0, 5),
+    showLoadMore: true,
+    onLoadMore: () => {
+      console.log("Load more clicked")
+    },
+  },
+}
+
+export const Animated: Story = {
+  args: {
+    activities: mockActivities,
+    animated: true,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    activities: [],
+    emptyMessage: "No credit activity to display",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    activities: [],
+    loading: true,
+  },
+}
+
+export const LimitedItems: Story = {
+  args: {
+    activities: mockActivities,
+    maxItems: 3,
+    showLoadMore: true,
+    onLoadMore: () => {
+      console.log("Load more clicked")
+    },
+  },
+}
+
+export const AllTypes: Story = {
+  render: () => {
+    const allTypes: CreditTransaction[] = [
+      {
+        id: "t-debit",
+        type: "debit",
+        amount: 150,
+        description: "Kubernetes cluster deployment",
+        service: "InfraOperator",
+        timestamp: minutesAgo(5),
+        status: "completed",
+      },
+      {
+        id: "t-credit",
+        type: "credit",
+        amount: 500,
+        description: "Credit pack purchase",
+        timestamp: minutesAgo(30),
+        status: "completed",
+      },
+      {
+        id: "t-refund",
+        type: "refund",
+        amount: 200,
+        description: "Failed deployment refund",
+        service: "InfraOperator",
+        timestamp: hoursAgo(2),
+        status: "completed",
+      },
+      {
+        id: "t-bonus",
+        type: "bonus",
+        amount: 100,
+        description: "Welcome bonus credits",
+        timestamp: daysAgo(1),
+        status: "completed",
+      },
+      {
+        id: "t-expiry",
+        type: "expiry",
+        amount: 250,
+        description: "Promotional credits expired",
+        timestamp: daysAgo(3),
+        status: "completed",
+      },
+    ]
+
+    return (
+      <div className="w-[460px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          All transaction types with their respective colors and icons
+        </p>
+        <WakaCreditActivityFeed activities={allTypes} />
+      </div>
+    )
+  },
+}