@wakastellar/ui 3.2.0 → 3.3.0

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

package/src/components/waka-credit-activity-feed/index.tsx

@@ -0,0 +1,364 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  ArrowDownLeft,
+  ArrowUpRight,
+  RotateCcw,
+  Gift,
+  Clock,
+  ChevronDown,
+  Inbox,
+} from "lucide-react"
+import { Button } from "../button"
+import type {
+  CreditTransaction,
+  CreditTransactionType,
+} from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WakaCreditActivityFeedProps {
+  /** List of credit transactions to display */
+  activities: CreditTransaction[]
+  /** Maximum number of items to display */
+  maxItems?: number
+  /** Show "Load more" button at bottom */
+  showLoadMore?: boolean
+  /** Callback when "Load more" is clicked */
+  onLoadMore?: () => void
+  /** Show loading skeleton state */
+  loading?: boolean
+  /** Message to display when activity list is empty */
+  emptyMessage?: string
+  /** Enable staggered fade-in animation for items */
+  animated?: boolean
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Transaction Type Configuration
+// ============================================================================
+
+const transactionTypeConfig: Record<
+  CreditTransactionType,
+  {
+    icon: React.ElementType
+    color: string
+    bgColor: string
+    dotColor: string
+    amountColor: string
+    amountPrefix: string
+    label: string
+  }
+> = {
+  debit: {
+    icon: ArrowDownLeft,
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100 dark:bg-red-900/30",
+    dotColor: "bg-red-500",
+    amountColor: "text-red-600 dark:text-red-400",
+    amountPrefix: "-",
+    label: "Debit",
+  },
+  credit: {
+    icon: ArrowUpRight,
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-100 dark:bg-green-900/30",
+    dotColor: "bg-green-500",
+    amountColor: "text-green-600 dark:text-green-400",
+    amountPrefix: "+",
+    label: "Credit",
+  },
+  refund: {
+    icon: RotateCcw,
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-100 dark:bg-blue-900/30",
+    dotColor: "bg-blue-500",
+    amountColor: "text-blue-600 dark:text-blue-400",
+    amountPrefix: "+",
+    label: "Refund",
+  },
+  bonus: {
+    icon: Gift,
+    color: "text-purple-600 dark:text-purple-400",
+    bgColor: "bg-purple-100 dark:bg-purple-900/30",
+    dotColor: "bg-purple-500",
+    amountColor: "text-purple-600 dark:text-purple-400",
+    amountPrefix: "+",
+    label: "Bonus",
+  },
+  expiry: {
+    icon: Clock,
+    color: "text-gray-500 dark:text-gray-400",
+    bgColor: "bg-gray-100 dark:bg-gray-800/30",
+    dotColor: "bg-gray-400",
+    amountColor: "text-gray-500 dark:text-gray-400",
+    amountPrefix: "-",
+    label: "Expired",
+  },
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  if (diffInSeconds < 60) {
+    return "just now"
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60)
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes} min ago`
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60)
+  if (diffInHours < 24) {
+    return `${diffInHours}h ago`
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24)
+  if (diffInDays === 1) {
+    return "yesterday"
+  }
+  if (diffInDays < 7) {
+    return `${diffInDays} days ago`
+  }
+
+  const diffInWeeks = Math.floor(diffInDays / 7)
+  if (diffInWeeks < 4) {
+    return `${diffInWeeks}w ago`
+  }
+
+  const diffInMonths = Math.floor(diffInDays / 30)
+  if (diffInMonths < 12) {
+    return `${diffInMonths}mo ago`
+  }
+
+  const diffInYears = Math.floor(diffInDays / 365)
+  return `${diffInYears}y ago`
+}
+
+function formatAmount(amount: number, prefix: string): string {
+  return `${prefix}${amount.toLocaleString("en-US")}`
+}
+
+// ============================================================================
+// Skeleton Item
+// ============================================================================
+
+function ActivitySkeleton() {
+  return (
+    <div className="flex gap-3 py-3">
+      {/* Timeline dot placeholder */}
+      <div className="flex flex-col items-center flex-shrink-0">
+        <div className="h-8 w-8 rounded-full bg-muted animate-pulse" />
+      </div>
+      {/* Content placeholder */}
+      <div className="flex-1 min-w-0 space-y-2">
+        <div className="h-4 w-3/4 bg-muted rounded animate-pulse" />
+        <div className="h-3 w-1/3 bg-muted rounded animate-pulse" />
+      </div>
+      {/* Amount placeholder */}
+      <div className="flex flex-col items-end flex-shrink-0 space-y-2">
+        <div className="h-4 w-16 bg-muted rounded animate-pulse" />
+        <div className="h-3 w-12 bg-muted rounded animate-pulse" />
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Activity Item
+// ============================================================================
+
+interface ActivityItemProps {
+  activity: CreditTransaction
+  isLast: boolean
+  animated: boolean
+  index: number
+}
+
+function ActivityItem({ activity, isLast, animated, index }: ActivityItemProps) {
+  const config = transactionTypeConfig[activity.type]
+  const Icon = config.icon
+  const timestamp = new Date(activity.timestamp)
+
+  return (
+    <div
+      className={cn(
+        "relative flex gap-3 py-3",
+        animated && "animate-feed-item-in",
+      )}
+      style={
+        animated
+          ? ({ "--stagger-delay": `${index * 80}ms` } as React.CSSProperties)
+          : undefined
+      }
+    >
+      {/* Timeline column: icon + connecting line */}
+      <div className="flex flex-col items-center flex-shrink-0">
+        <div
+          className={cn(
+            "flex h-8 w-8 items-center justify-center rounded-full flex-shrink-0",
+            config.bgColor,
+          )}
+        >
+          <Icon className={cn("h-4 w-4", config.color)} />
+        </div>
+        {!isLast && (
+          <div className="w-px flex-1 bg-border mt-1 min-h-[16px]" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0 pt-1">
+        <p className="text-sm font-medium text-foreground leading-tight truncate">
+          {activity.description}
+        </p>
+        {activity.service && (
+          <p className="text-xs text-muted-foreground mt-0.5 truncate">
+            {activity.service}
+          </p>
+        )}
+      </div>
+
+      {/* Amount + Time */}
+      <div className="flex flex-col items-end flex-shrink-0 pt-1">
+        <span
+          className={cn(
+            "text-sm font-semibold tabular-nums",
+            config.amountColor,
+          )}
+        >
+          {formatAmount(activity.amount, config.amountPrefix)}
+        </span>
+        <span className="text-xs text-muted-foreground mt-0.5">
+          {formatRelativeTime(timestamp)}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Empty State
+// ============================================================================
+
+interface EmptyStateProps {
+  message: string
+}
+
+function EmptyState({ message }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <Inbox className="h-12 w-12 text-muted-foreground/50 mb-4" />
+      <p className="text-sm text-muted-foreground">{message}</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditActivityFeed({
+  activities,
+  maxItems,
+  showLoadMore = false,
+  onLoadMore,
+  loading = false,
+  emptyMessage = "No recent activity",
+  animated = false,
+  className,
+}: WakaCreditActivityFeedProps) {
+  const displayActivities = React.useMemo(() => {
+    if (maxItems && maxItems > 0) {
+      return activities.slice(0, maxItems)
+    }
+    return activities
+  }, [activities, maxItems])
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className={cn("divide-y divide-transparent", className)}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <ActivitySkeleton key={i} />
+        ))}
+      </div>
+    )
+  }
+
+  // Empty state
+  if (displayActivities.length === 0) {
+    return (
+      <div className={className}>
+        <EmptyState message={emptyMessage} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      {/* Activity list */}
+      <div>
+        {displayActivities.map((activity, index) => (
+          <ActivityItem
+            key={activity.id}
+            activity={activity}
+            isLast={index === displayActivities.length - 1}
+            animated={animated}
+            index={index}
+          />
+        ))}
+      </div>
+
+      {/* Load More */}
+      {showLoadMore && onLoadMore && (
+        <div className="flex justify-center pt-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onLoadMore}
+            className="gap-2"
+          >
+            <ChevronDown className="h-4 w-4" />
+            Load more
+          </Button>
+        </div>
+      )}
+
+      {/* Animation styles */}
+      {animated && (
+        <style>{`
+          @keyframes feed-item-in {
+            0% {
+              opacity: 0;
+              transform: translateY(8px);
+            }
+            100% {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+          .animate-feed-item-in {
+            opacity: 0;
+            animation: feed-item-in 0.35s ease-out forwards;
+            animation-delay: var(--stagger-delay, 0ms);
+          }
+        `}</style>
+      )}
+    </div>
+  )
+}
+
+export default WakaCreditActivityFeed