@wakastellar/ui 3.2.0 → 3.3.2

package/src/components/waka-credit-balance/types.ts

@@ -0,0 +1,38 @@
+export type CreditTransactionType = "debit" | "credit" | "refund" | "bonus" | "expiry"
+export type CreditTransactionStatus = "completed" | "pending" | "failed" | "cancelled"
+export type CreditAlertLevel = "info" | "warning" | "critical" | "depleted"
+
+export interface CreditTransaction {
+  id: string
+  type: CreditTransactionType
+  amount: number
+  description: string
+  service?: string
+  timestamp: string | Date
+  status: CreditTransactionStatus
+  balanceAfter?: number
+}
+
+export interface CreditPack {
+  id: string
+  name: string
+  credits: number
+  price: number
+  currency?: string
+  unitPrice?: number
+  bonusPercent?: number
+  highlighted?: boolean
+  highlightLabel?: string
+}
+
+export interface CreditThresholds {
+  warning: number
+  critical: number
+}
+
+export interface CreditServiceUsage {
+  id: string
+  name: string
+  value: number
+  color?: string
+}

package/src/components/waka-credit-breakdown/WakaCreditBreakdown.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCreditBreakdown } from './index'
+import type { BreakdownItem } from './index'
+import * as React from 'react'
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const mockData: BreakdownItem[] = [
+  { id: 'api-calls', name: 'API Calls', value: 4200 },
+  { id: 'builds', name: 'Builds', value: 2800 },
+  { id: 'storage', name: 'Storage', value: 1500 },
+  { id: 'network', name: 'Network', value: 950 },
+  { id: 'monitoring', name: 'Monitoring', value: 650 },
+]
+
+const customColorData: BreakdownItem[] = [
+  { id: 'api-calls', name: 'API Calls', value: 4200, color: '#3b82f6' },
+  { id: 'builds', name: 'Builds', value: 2800, color: '#22c55e' },
+  { id: 'storage', name: 'Storage', value: 1500, color: '#f59e0b' },
+  { id: 'network', name: 'Network', value: 950, color: '#ef4444' },
+  { id: 'monitoring', name: 'Monitoring', value: 650, color: '#8b5cf6' },
+  { id: 'ci-cd', name: 'CI/CD Pipelines', value: 420, color: '#06b6d4' },
+]
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta: Meta<typeof WakaCreditBreakdown> = {
+  title: 'Components/Credit/WakaCreditBreakdown',
+  component: WakaCreditBreakdown,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Credit consumption breakdown by service. Supports pie, donut, and horizontal bar chart variants using recharts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['pie', 'donut', 'bar'],
+      description: 'Visualization variant',
+    },
+    showPercentages: {
+      control: 'boolean',
+      description: 'Show percentage labels on chart',
+    },
+    showLegend: {
+      control: 'boolean',
+      description: 'Show legend',
+    },
+    height: {
+      control: { type: 'number', min: 200, max: 600, step: 50 },
+      description: 'Chart height in pixels',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditBreakdown>
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Pie: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaCreditBreakdown
+        data={mockData}
+        variant="pie"
+      />
+    </div>
+  ),
+}
+
+export const Donut: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaCreditBreakdown
+        data={mockData}
+        variant="donut"
+      />
+    </div>
+  ),
+}
+
+export const Bar: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaCreditBreakdown
+        data={mockData}
+        variant="bar"
+        height={300}
+      />
+    </div>
+  ),
+}
+
+export const WithPercentages: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-2">Pie with Percentages</h4>
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="pie"
+          showPercentages
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Donut with Percentages</h4>
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="donut"
+          showPercentages
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Bar with Percentages</h4>
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="bar"
+          showPercentages
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Clickable: Story = {
+  render: () => {
+    const [clicked, setClicked] = React.useState<BreakdownItem | null>(null)
+
+    return (
+      <div className="w-[500px] space-y-4">
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="donut"
+          showPercentages
+          onSegmentClick={(item) => setClicked(item)}
+        />
+        {clicked && (
+          <div className="p-3 rounded-lg border bg-muted/50 text-sm">
+            <span className="font-medium">Clicked:</span>{' '}
+            {clicked.name} ({clicked.value.toLocaleString()} credits)
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-2">Donut with Custom Colors</h4>
+        <WakaCreditBreakdown
+          data={customColorData}
+          variant="donut"
+          showPercentages
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Bar with Custom Colors</h4>
+        <WakaCreditBreakdown
+          data={customColorData}
+          variant="bar"
+          height={350}
+          formatValue={(value) => `${value.toLocaleString()} cr`}
+        />
+      </div>
+    </div>
+  ),
+}

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

@@ -0,0 +1,487 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface BreakdownItem {
+  /** Unique identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Credit consumption value */
+  value: number
+  /** Custom color for this segment */
+  color?: string
+}
+
+export interface WakaCreditBreakdownProps {
+  /** Breakdown data items */
+  data: BreakdownItem[]
+  /** Visualization variant */
+  variant?: "pie" | "donut" | "bar"
+  /** Show percentage labels */
+  showPercentages?: boolean
+  /** Show legend */
+  showLegend?: boolean
+  /** Chart height in pixels */
+  height?: number
+  /** Enable animations */
+  animated?: boolean
+  /** Callback when a segment is clicked */
+  onSegmentClick?: (item: BreakdownItem) => void
+  /** Custom value formatter */
+  formatValue?: (value: number) => string
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Default Colors (matching waka-cost-breakdown palette)
+// ============================================================================
+
+const defaultColors = [
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))",
+  "hsl(var(--primary))",
+  "hsl(var(--info))",
+  "hsl(var(--warning))",
+  "hsl(var(--success))",
+  "hsl(var(--destructive))",
+]
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function assignColors(items: BreakdownItem[]): BreakdownItem[] {
+  return items.map((item, index) => ({
+    ...item,
+    color: item.color || defaultColors[index % defaultColors.length],
+  }))
+}
+
+function calculateTotal(items: BreakdownItem[]): number {
+  return items.reduce((sum, item) => sum + item.value, 0)
+}
+
+function defaultFormatValue(value: number): string {
+  if (value >= 1000000) {
+    return `${(value / 1000000).toFixed(1)}M`
+  }
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(1)}K`
+  }
+  return value.toLocaleString()
+}
+
+// ============================================================================
+// Custom Tooltip
+// ============================================================================
+
+interface CustomTooltipProps {
+  active?: boolean
+  payload?: Array<{
+    name: string
+    value: number
+    payload: BreakdownItem & { color: string }
+  }>
+  total: number
+  formatter: (value: number) => string
+}
+
+function CustomTooltip({ active, payload, total, formatter }: CustomTooltipProps) {
+  if (!active || !payload || !payload.length) return null
+
+  const entry = payload[0]
+  const percentage = total > 0 ? ((entry.value / total) * 100).toFixed(1) : "0"
+
+  return (
+    <div
+      className={cn(
+        "px-3 py-2 text-sm rounded-lg shadow-lg",
+        "bg-foreground text-background",
+        "pointer-events-none min-w-[140px]"
+      )}
+    >
+      <div className="font-semibold mb-1 flex items-center gap-2">
+        <span
+          className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+          style={{ backgroundColor: entry.payload.color }}
+        />
+        {entry.name}
+      </div>
+      <div className="flex justify-between gap-4">
+        <span className="opacity-70">Value:</span>
+        <span className="font-medium">{formatter(entry.value)}</span>
+      </div>
+      <div className="flex justify-between gap-4">
+        <span className="opacity-70">Share:</span>
+        <span>{percentage}%</span>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Custom Label for Pie/Donut
+// ============================================================================
+
+interface PieLabelProps {
+  cx: number
+  cy: number
+  midAngle: number
+  innerRadius: number
+  outerRadius: number
+  percent: number
+  name: string
+}
+
+function renderPieLabel({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+}: PieLabelProps) {
+  const RADIAN = Math.PI / 180
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5 + 20
+  const x = cx + radius * Math.cos(-midAngle * RADIAN)
+  const y = cy + radius * Math.sin(-midAngle * RADIAN)
+
+  if (percent < 0.05) return null
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="currentColor"
+      textAnchor={x > cx ? "start" : "end"}
+      dominantBaseline="central"
+      className="text-xs fill-foreground"
+    >
+      {`${(percent * 100).toFixed(0)}%`}
+    </text>
+  )
+}
+
+// ============================================================================
+// Donut Center Label
+// ============================================================================
+
+interface CenterLabelProps {
+  viewBox?: { cx: number; cy: number }
+  total: number
+  formatter: (value: number) => string
+}
+
+function CenterLabel({ viewBox, total, formatter }: CenterLabelProps) {
+  if (!viewBox) return null
+  const { cx, cy } = viewBox
+
+  return (
+    <g>
+      <text
+        x={cx}
+        y={cy - 10}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        className="text-xs fill-muted-foreground"
+      >
+        Total
+      </text>
+      <text
+        x={cx}
+        y={cy + 12}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        className="text-base font-bold fill-foreground"
+      >
+        {formatter(total)}
+      </text>
+    </g>
+  )
+}
+
+// ============================================================================
+// Pie Variant
+// ============================================================================
+
+interface PieVariantProps {
+  data: BreakdownItem[]
+  total: number
+  height: number
+  animated: boolean
+  showPercentages: boolean
+  showLegend: boolean
+  formatter: (value: number) => string
+  onSegmentClick?: (item: BreakdownItem) => void
+}
+
+function PieVariant({
+  data,
+  total,
+  height,
+  animated,
+  showPercentages,
+  showLegend,
+  formatter,
+  onSegmentClick,
+}: PieVariantProps) {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          outerRadius={height / 2 - 40}
+          isAnimationActive={animated}
+          animationDuration={800}
+          label={showPercentages ? renderPieLabel : false}
+          labelLine={false}
+          onClick={
+            onSegmentClick
+              ? (_: unknown, index: number) => onSegmentClick(data[index])
+              : undefined
+          }
+          style={onSegmentClick ? { cursor: "pointer" } : undefined}
+        >
+          {data.map((entry) => (
+            <Cell key={entry.id} fill={entry.color} />
+          ))}
+        </Pie>
+        <Tooltip
+          content={
+            <CustomTooltip total={total} formatter={formatter} />
+          }
+        />
+        {showLegend && (
+          <Legend
+            verticalAlign="bottom"
+            formatter={(value: string) => (
+              <span className="text-sm text-foreground">{value}</span>
+            )}
+          />
+        )}
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}
+
+// ============================================================================
+// Donut Variant
+// ============================================================================
+
+function DonutVariant({
+  data,
+  total,
+  height,
+  animated,
+  showPercentages,
+  showLegend,
+  formatter,
+  onSegmentClick,
+}: PieVariantProps) {
+  const outerRadius = height / 2 - 40
+  const innerRadius = outerRadius * 0.55
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          isAnimationActive={animated}
+          animationDuration={800}
+          paddingAngle={2}
+          label={showPercentages ? renderPieLabel : false}
+          labelLine={false}
+          onClick={
+            onSegmentClick
+              ? (_: unknown, index: number) => onSegmentClick(data[index])
+              : undefined
+          }
+          style={onSegmentClick ? { cursor: "pointer" } : undefined}
+        >
+          {data.map((entry) => (
+            <Cell key={entry.id} fill={entry.color} />
+          ))}
+          <CenterLabel total={total} formatter={formatter} />
+        </Pie>
+        <Tooltip
+          content={
+            <CustomTooltip total={total} formatter={formatter} />
+          }
+        />
+        {showLegend && (
+          <Legend
+            verticalAlign="bottom"
+            formatter={(value: string) => (
+              <span className="text-sm text-foreground">{value}</span>
+            )}
+          />
+        )}
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}
+
+// ============================================================================
+// Bar Variant (Horizontal)
+// ============================================================================
+
+interface BarVariantProps {
+  data: BreakdownItem[]
+  total: number
+  height: number
+  animated: boolean
+  showPercentages: boolean
+  showLegend: boolean
+  formatter: (value: number) => string
+  onSegmentClick?: (item: BreakdownItem) => void
+}
+
+function BarVariant({
+  data,
+  total,
+  height,
+  animated,
+  showPercentages,
+  showLegend,
+  formatter,
+  onSegmentClick,
+}: BarVariantProps) {
+  const barData = data.map((item) => ({
+    ...item,
+    percentage: total > 0 ? ((item.value / total) * 100).toFixed(1) : "0",
+  }))
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <BarChart
+        data={barData}
+        layout="vertical"
+        barCategoryGap="20%"
+      >
+        <XAxis
+          type="number"
+          tickFormatter={(value: number) =>
+            showPercentages
+              ? `${total > 0 ? ((value / total) * 100).toFixed(0) : 0}%`
+              : formatter(value)
+          }
+          axisLine={false}
+          tickLine={false}
+          tick={{ className: "text-xs fill-muted-foreground" }}
+        />
+        <YAxis
+          dataKey="name"
+          type="category"
+          width={100}
+          axisLine={false}
+          tickLine={false}
+          tick={{ className: "text-sm fill-foreground" }}
+        />
+        <Tooltip
+          content={
+            <CustomTooltip total={total} formatter={formatter} />
+          }
+        />
+        {showLegend && (
+          <Legend
+            verticalAlign="bottom"
+            formatter={(value: string) => (
+              <span className="text-sm text-foreground">{value}</span>
+            )}
+          />
+        )}
+        <Bar
+          dataKey="value"
+          name="Credits"
+          radius={[0, 4, 4, 0]}
+          isAnimationActive={animated}
+          animationDuration={800}
+          barSize={24}
+          onClick={
+            onSegmentClick
+              ? (_: unknown, index: number) => onSegmentClick(data[index])
+              : undefined
+          }
+          style={onSegmentClick ? { cursor: "pointer" } : undefined}
+        >
+          {data.map((entry) => (
+            <Cell key={entry.id} fill={entry.color} />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditBreakdown({
+  data,
+  variant = "pie",
+  showPercentages = false,
+  showLegend = true,
+  height = 300,
+  animated = true,
+  onSegmentClick,
+  formatValue,
+  className,
+}: WakaCreditBreakdownProps) {
+  const coloredData = React.useMemo(() => assignColors(data), [data])
+  const total = React.useMemo(() => calculateTotal(coloredData), [coloredData])
+  const formatter = formatValue || defaultFormatValue
+
+  const sharedProps = {
+    data: coloredData,
+    total,
+    height,
+    animated,
+    showPercentages,
+    showLegend,
+    formatter,
+    onSegmentClick,
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      {variant === "pie" && <PieVariant {...sharedProps} />}
+      {variant === "donut" && <DonutVariant {...sharedProps} />}
+      {variant === "bar" && <BarVariant {...sharedProps} />}
+    </div>
+  )
+}
+
+export default WakaCreditBreakdown