@wakastellar/ui 3.2.0 → 3.3.0

package/src/components/waka-credit-alert/WakaCreditAlert.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCreditAlert } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaCreditAlert> = {
+  title: 'Components/Credit/WakaCreditAlert',
+  component: WakaCreditAlert,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Alert banner for credit thresholds. Displays contextual messages with 4 severity levels: info, warning, critical, and depleted.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    level: {
+      control: 'select',
+      options: ['info', 'warning', 'critical', 'depleted'],
+      description: 'Alert severity level',
+    },
+    balance: {
+      control: { type: 'number', min: 0, max: 10000 },
+      description: 'Current credit balance',
+    },
+    threshold: {
+      control: { type: 'number', min: 0, max: 10000 },
+      description: 'Threshold that triggered the alert',
+    },
+    message: {
+      control: 'text',
+      description: 'Custom message (overrides default)',
+    },
+    topUpLabel: {
+      control: 'text',
+      description: 'Label for the top-up button',
+    },
+    dismissable: {
+      control: 'boolean',
+      description: 'Whether the alert can be dismissed',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditAlert>
+
+export const Info: Story = {
+  args: {
+    level: 'info',
+    balance: 500,
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    level: 'warning',
+    balance: 85,
+    threshold: 100,
+  },
+}
+
+export const Critical: Story = {
+  args: {
+    level: 'critical',
+    balance: 12,
+    threshold: 20,
+  },
+}
+
+export const Depleted: Story = {
+  args: {
+    level: 'depleted',
+    balance: 0,
+  },
+}
+
+export const WithTopUp: Story = {
+  render: () => (
+    <div className="space-y-4 w-[500px]">
+      <WakaCreditAlert
+        level="info"
+        balance={500}
+        onTopUp={() => alert('Top up clicked')}
+      />
+      <WakaCreditAlert
+        level="warning"
+        balance={85}
+        threshold={100}
+        onTopUp={() => alert('Top up clicked')}
+      />
+      <WakaCreditAlert
+        level="critical"
+        balance={12}
+        threshold={20}
+        onTopUp={() => alert('Top up clicked')}
+        topUpLabel="Recharge Now"
+      />
+      <WakaCreditAlert
+        level="depleted"
+        balance={0}
+        onTopUp={() => alert('Top up clicked')}
+        topUpLabel="Buy Credits"
+      />
+    </div>
+  ),
+}
+
+export const Dismissable: Story = {
+  render: function DismissableStory() {
+    const [visibleAlerts, setVisibleAlerts] = React.useState({
+      info: true,
+      warning: true,
+      critical: true,
+      depleted: true,
+    })
+
+    const resetAll = () =>
+      setVisibleAlerts({ info: true, warning: true, critical: true, depleted: true })
+
+    return (
+      <div className="space-y-4 w-[500px]">
+        {visibleAlerts.info && (
+          <WakaCreditAlert
+            level="info"
+            balance={500}
+            dismissable
+            onDismiss={() => setVisibleAlerts((v) => ({ ...v, info: false }))}
+          />
+        )}
+        {visibleAlerts.warning && (
+          <WakaCreditAlert
+            level="warning"
+            balance={85}
+            threshold={100}
+            dismissable
+            onDismiss={() => setVisibleAlerts((v) => ({ ...v, warning: false }))}
+          />
+        )}
+        {visibleAlerts.critical && (
+          <WakaCreditAlert
+            level="critical"
+            balance={12}
+            threshold={20}
+            dismissable
+            onDismiss={() => setVisibleAlerts((v) => ({ ...v, critical: false }))}
+          />
+        )}
+        {visibleAlerts.depleted && (
+          <WakaCreditAlert
+            level="depleted"
+            balance={0}
+            dismissable
+            onDismiss={() => setVisibleAlerts((v) => ({ ...v, depleted: false }))}
+          />
+        )}
+        {Object.values(visibleAlerts).some((v) => !v) && (
+          <button
+            className="px-3 py-1.5 text-sm rounded-md border bg-card hover:bg-muted transition-colors"
+            onClick={resetAll}
+          >
+            Reset All
+          </button>
+        )}
+      </div>
+    )
+  },
+}

package/src/components/waka-credit-alert/index.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Info, AlertTriangle, AlertCircle, XCircle, X } from "lucide-react"
+import type { CreditAlertLevel } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type { CreditAlertLevel } from "../waka-credit-balance/types"
+
+export interface WakaCreditAlertProps {
+  /** Alert severity level */
+  level: CreditAlertLevel
+  /** Current credit balance */
+  balance: number
+  /** Threshold value that triggered the alert */
+  threshold?: number
+  /** Custom message (overrides default) */
+  message?: string
+  /** Callback when dismissing the alert */
+  onDismiss?: () => void
+  /** Callback when clicking the top-up action */
+  onTopUp?: () => void
+  /** Label for the top-up button */
+  topUpLabel?: string
+  /** Whether the alert can be dismissed */
+  dismissable?: boolean
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Config
+// ============================================================================
+
+const LEVEL_CONFIG: Record<
+  CreditAlertLevel,
+  {
+    icon: React.ElementType
+    bg: string
+    border: string
+    text: string
+    iconColor: string
+    buttonBg: string
+    buttonHover: string
+    dismissColor: string
+  }
+> = {
+  info: {
+    icon: Info,
+    bg: "bg-blue-50 dark:bg-blue-950/40",
+    border: "border-blue-200 dark:border-blue-800",
+    text: "text-blue-900 dark:text-blue-100",
+    iconColor: "text-blue-500 dark:text-blue-400",
+    buttonBg: "bg-blue-600 hover:bg-blue-700 text-white",
+    buttonHover: "hover:bg-blue-700",
+    dismissColor: "text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-200",
+  },
+  warning: {
+    icon: AlertTriangle,
+    bg: "bg-amber-50 dark:bg-amber-950/40",
+    border: "border-amber-200 dark:border-amber-800",
+    text: "text-amber-900 dark:text-amber-100",
+    iconColor: "text-amber-500 dark:text-amber-400",
+    buttonBg: "bg-amber-600 hover:bg-amber-700 text-white",
+    buttonHover: "hover:bg-amber-700",
+    dismissColor: "text-amber-500 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-200",
+  },
+  critical: {
+    icon: AlertCircle,
+    bg: "bg-red-50 dark:bg-red-950/40",
+    border: "border-red-200 dark:border-red-800",
+    text: "text-red-900 dark:text-red-100",
+    iconColor: "text-red-500 dark:text-red-400",
+    buttonBg: "bg-red-600 hover:bg-red-700 text-white",
+    buttonHover: "hover:bg-red-700",
+    dismissColor: "text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200",
+  },
+  depleted: {
+    icon: XCircle,
+    bg: "bg-red-100 dark:bg-red-950/60",
+    border: "border-red-300 dark:border-red-700",
+    text: "text-red-950 dark:text-red-50",
+    iconColor: "text-red-700 dark:text-red-300",
+    buttonBg: "bg-red-800 hover:bg-red-900 text-white",
+    buttonHover: "hover:bg-red-900",
+    dismissColor: "text-red-600 hover:text-red-800 dark:text-red-300 dark:hover:text-red-100",
+  },
+}
+
+const DEFAULT_MESSAGES: Record<CreditAlertLevel, (balance: number) => string> = {
+  info: (balance) => `Your credit balance is ${balance.toLocaleString()} credits.`,
+  warning: (balance) => `Low balance! You have ${balance.toLocaleString()} credits remaining.`,
+  critical: (balance) => `Critical! Only ${balance.toLocaleString()} credits left. Recharge now.`,
+  depleted: () => "No credits remaining. Services may be interrupted.",
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function WakaCreditAlert({
+  level,
+  balance,
+  threshold,
+  message,
+  onDismiss,
+  onTopUp,
+  topUpLabel = "Top Up",
+  dismissable = false,
+  className,
+}: WakaCreditAlertProps) {
+  const config = LEVEL_CONFIG[level]
+  const Icon = config.icon
+  const displayMessage = message ?? DEFAULT_MESSAGES[level](balance)
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "relative flex items-start gap-3 rounded-lg border px-4 py-3",
+        config.bg,
+        config.border,
+        config.text,
+        className
+      )}
+    >
+      <Icon
+        className={cn("h-5 w-5 mt-0.5 shrink-0", config.iconColor)}
+        aria-hidden="true"
+      />
+
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium leading-relaxed">
+          {displayMessage}
+        </p>
+        {threshold !== undefined && (
+          <p className="text-xs mt-1 opacity-75">
+            Threshold: {threshold.toLocaleString()} credits
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {onTopUp && (
+          <button
+            type="button"
+            onClick={onTopUp}
+            className={cn(
+              "inline-flex items-center rounded-md px-3 py-1.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              config.buttonBg
+            )}
+          >
+            {topUpLabel}
+          </button>
+        )}
+
+        {dismissable && onDismiss && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            className={cn(
+              "inline-flex items-center justify-center rounded-md p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              config.dismissColor
+            )}
+            aria-label="Dismiss alert"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default WakaCreditAlert

package/src/components/waka-credit-balance/WakaCreditBalance.stories.tsx

@@ -0,0 +1,259 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCreditBalance } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaCreditBalance> = {
+  title: 'Components/Credit/WakaCreditBalance',
+  component: WakaCreditBalance,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Displays the current credit balance with animated counter, trend indicators, and threshold-based color changes.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['card', 'compact', 'minimal'],
+      description: 'Visual variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Component size',
+    },
+    balance: {
+      control: { type: 'number', min: 0, max: 10000 },
+      description: 'Current credit balance',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animated counter',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Show loading skeleton',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditBalance>
+
+export const Default: Story = {
+  args: {
+    balance: 2450,
+    currency: 'credits',
+    trend: { direction: 'up', value: '+12%', text: 'from last month' },
+  },
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6 w-[400px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Card (default)</p>
+        <WakaCreditBalance
+          balance={2450}
+          trend={{ direction: 'up', value: '+12%', text: 'from last month' }}
+          variant="card"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Compact</p>
+        <WakaCreditBalance
+          balance={2450}
+          trend={{ direction: 'up', value: '+12%', text: 'from last month' }}
+          variant="compact"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Minimal</p>
+        <WakaCreditBalance
+          balance={2450}
+          trend={{ direction: 'up', value: '+12%', text: 'from last month' }}
+          variant="minimal"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-6 w-[400px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaCreditBalance
+          balance={1200}
+          trend={{ direction: 'up', value: '+5%' }}
+          variant="card"
+          size="sm"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (default)</p>
+        <WakaCreditBalance
+          balance={1200}
+          trend={{ direction: 'up', value: '+5%' }}
+          variant="card"
+          size="md"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaCreditBalance
+          balance={1200}
+          trend={{ direction: 'up', value: '+5%' }}
+          variant="card"
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithThresholds: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <p className="text-sm text-muted-foreground">
+        Custom thresholds: warning at 500, critical at 100
+      </p>
+      <WakaCreditBalance
+        balance={800}
+        thresholds={{ warning: 500, critical: 100 }}
+        variant="card"
+      />
+      <WakaCreditBalance
+        balance={350}
+        thresholds={{ warning: 500, critical: 100 }}
+        variant="card"
+      />
+      <WakaCreditBalance
+        balance={50}
+        thresholds={{ warning: 500, critical: 100 }}
+        variant="card"
+      />
+    </div>
+  ),
+}
+
+export const LowBalance: Story = {
+  args: {
+    balance: 75,
+    currency: 'credits',
+    thresholds: { warning: 100, critical: 20 },
+    trend: { direction: 'down', value: '-28%', text: 'this week' },
+  },
+}
+
+export const CriticalBalance: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Critical (below threshold)</p>
+        <WakaCreditBalance
+          balance={15}
+          thresholds={{ warning: 100, critical: 20 }}
+          trend={{ direction: 'down', value: '-80%' }}
+          variant="card"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Depleted (zero)</p>
+        <WakaCreditBalance
+          balance={0}
+          thresholds={{ warning: 100, critical: 20 }}
+          variant="card"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Depleted compact</p>
+        <WakaCreditBalance
+          balance={0}
+          thresholds={{ warning: 100, critical: 20 }}
+          variant="compact"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Depleted minimal</p>
+        <WakaCreditBalance
+          balance={0}
+          thresholds={{ warning: 100, critical: 20 }}
+          variant="minimal"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Animated: Story = {
+  render: function AnimatedStory() {
+    const [balance, setBalance] = React.useState(1000)
+
+    return (
+      <div className="space-y-4 w-[400px]">
+        <WakaCreditBalance
+          balance={balance}
+          animated={true}
+          variant="card"
+          trend={{
+            direction: balance >= 1000 ? 'up' : 'down',
+            value: balance >= 1000 ? '+' + (balance - 1000) : String(balance - 1000),
+          }}
+        />
+        <div className="flex gap-2">
+          <button
+            className="px-3 py-1.5 text-sm rounded-md border bg-card hover:bg-muted transition-colors"
+            onClick={() => setBalance((b) => b + 250)}
+          >
+            + 250 credits
+          </button>
+          <button
+            className="px-3 py-1.5 text-sm rounded-md border bg-card hover:bg-muted transition-colors"
+            onClick={() => setBalance((b) => Math.max(0, b - 250))}
+          >
+            - 250 credits
+          </button>
+          <button
+            className="px-3 py-1.5 text-sm rounded-md border bg-card hover:bg-muted transition-colors"
+            onClick={() => setBalance(1000)}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="space-y-6 w-[400px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Card loading</p>
+        <WakaCreditBalance balance={0} loading variant="card" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Compact loading</p>
+        <WakaCreditBalance balance={0} loading variant="compact" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Minimal loading</p>
+        <WakaCreditBalance balance={0} loading variant="minimal" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Card loading (sm)</p>
+        <WakaCreditBalance balance={0} loading variant="card" size="sm" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Card loading (lg)</p>
+        <WakaCreditBalance balance={0} loading variant="card" size="lg" />
+      </div>
+    </div>
+  ),
+}