@wakastellar/ui 3.2.0 → 3.3.2

package/src/components/waka-credit-pricing-pack/WakaCreditPricingPack.stories.tsx

@@ -0,0 +1,217 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCreditPricingPack } from './index'
+import type { CreditPack } from '../waka-credit-balance/types'
+import * as React from 'react'
+
+// ============================================================================
+// Sample Data
+// ============================================================================
+
+const samplePacks: CreditPack[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    credits: 1000,
+    price: 9.99,
+    unitPrice: 0.01,
+    bonusPercent: 0,
+    highlighted: false,
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    credits: 5000,
+    price: 39.99,
+    unitPrice: 0.008,
+    bonusPercent: 10,
+    highlighted: true,
+    highlightLabel: 'Best Value',
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    credits: 20000,
+    price: 129.99,
+    unitPrice: 0.0065,
+    bonusPercent: 20,
+    highlighted: false,
+  },
+]
+
+const fourPacks: CreditPack[] = [
+  {
+    id: 'micro',
+    name: 'Micro',
+    credits: 250,
+    price: 2.99,
+    unitPrice: 0.012,
+  },
+  ...samplePacks,
+]
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta: Meta<typeof WakaCreditPricingPack> = {
+  title: 'Components/Credit/WakaCreditPricingPack',
+  component: WakaCreditPricingPack,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A grid of credit pack cards. Each card displays pack name, credit amount, price, unit price, bonus percentage, and a highlight badge for featured packs.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    columns: {
+      control: 'select',
+      options: [2, 3, 4],
+      description: 'Number of grid columns',
+    },
+    currency: {
+      control: 'text',
+      description: 'Currency symbol',
+    },
+    selectedId: {
+      control: 'text',
+      description: 'ID of the currently selected pack',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditPricingPack>
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    packs: samplePacks,
+    onSelect: (pack: CreditPack) => console.log('Selected:', pack.name),
+  },
+}
+
+export const WithHighlighted: Story = {
+  render: function WithHighlightedStory() {
+    const [selectedId, setSelectedId] = React.useState<string | undefined>('pro')
+
+    return (
+      <WakaCreditPricingPack
+        packs={[
+          {
+            id: 'basic',
+            name: 'Basic',
+            credits: 500,
+            price: 4.99,
+            unitPrice: 0.01,
+          },
+          {
+            id: 'popular',
+            name: 'Popular',
+            credits: 5000,
+            price: 39.99,
+            unitPrice: 0.008,
+            bonusPercent: 10,
+            highlighted: true,
+            highlightLabel: 'Most Popular',
+          },
+          {
+            id: 'mega',
+            name: 'Mega',
+            credits: 50000,
+            price: 299.99,
+            unitPrice: 0.006,
+            bonusPercent: 30,
+            highlighted: true,
+            highlightLabel: 'Best Value',
+          },
+        ]}
+        selectedId={selectedId}
+        onSelect={(pack) => setSelectedId(pack.id)}
+      />
+    )
+  },
+}
+
+export const TwoColumns: Story = {
+  render: function TwoColumnsStory() {
+    const [selectedId, setSelectedId] = React.useState<string | undefined>()
+
+    return (
+      <WakaCreditPricingPack
+        packs={[
+          {
+            id: 'small',
+            name: 'Small Pack',
+            credits: 1000,
+            price: 9.99,
+            unitPrice: 0.01,
+          },
+          {
+            id: 'large',
+            name: 'Large Pack',
+            credits: 10000,
+            price: 79.99,
+            unitPrice: 0.008,
+            bonusPercent: 15,
+            highlighted: true,
+            highlightLabel: 'Save 20%',
+          },
+        ]}
+        selectedId={selectedId}
+        onSelect={(pack) => setSelectedId(pack.id)}
+        columns={2}
+      />
+    )
+  },
+}
+
+export const FourColumns: Story = {
+  render: function FourColumnsStory() {
+    const [selectedId, setSelectedId] = React.useState<string | undefined>()
+
+    return (
+      <WakaCreditPricingPack
+        packs={fourPacks}
+        selectedId={selectedId}
+        onSelect={(pack) => setSelectedId(pack.id)}
+        columns={4}
+        currency="$"
+      />
+    )
+  },
+}
+
+export const SinglePack: Story = {
+  render: function SinglePackStory() {
+    const [selectedId, setSelectedId] = React.useState<string | undefined>()
+
+    return (
+      <div className="max-w-sm mx-auto">
+        <WakaCreditPricingPack
+          packs={[
+            {
+              id: 'only',
+              name: 'Credit Top-Up',
+              credits: 2500,
+              price: 19.99,
+              unitPrice: 0.008,
+              bonusPercent: 5,
+              highlighted: true,
+              highlightLabel: 'Limited Offer',
+            },
+          ]}
+          selectedId={selectedId}
+          onSelect={(pack) => setSelectedId(pack.id)}
+          columns={2}
+        />
+      </div>
+    )
+  },
+}

package/src/components/waka-credit-pricing-pack/index.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import { Coins, Check, Sparkles } from "lucide-react"
+import { cn } from "../../utils/cn"
+import { Card, CardContent, CardHeader } from "../card"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import type { CreditPack } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WakaCreditPricingPackProps {
+  /** Credit packs to display */
+  packs: CreditPack[]
+  /** Currently selected pack ID */
+  selectedId?: string
+  /** Callback when a pack is selected */
+  onSelect: (pack: CreditPack) => void
+  /** Currency symbol for display (overrides pack currency) */
+  currency?: string
+  /** Number of grid columns */
+  columns?: 2 | 3 | 4
+  /** Additional class names */
+  className?: string
+}
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function formatNumber(value: number): string {
+  return value.toLocaleString("en-US")
+}
+
+function formatPrice(price: number, currency: string): string {
+  if (Number.isInteger(price)) {
+    return `${price}${currency}`
+  }
+  return `${price.toFixed(2)}${currency}`
+}
+
+function formatUnitPrice(unitPrice: number, currency: string): string {
+  return `${unitPrice.toFixed(4).replace(/0+$/, "").replace(/\.$/, "")}${currency}/credit`
+}
+
+// ============================================================================
+// Sub-Components
+// ============================================================================
+
+interface PackCardProps {
+  pack: CreditPack
+  selected: boolean
+  onSelect: (pack: CreditPack) => void
+  currency: string
+}
+
+function PackCard({ pack, selected, onSelect, currency }: PackCardProps) {
+  const displayCurrency = pack.currency || currency
+
+  return (
+    <Card
+      className={cn(
+        "relative flex flex-col transition-all duration-200 cursor-pointer",
+        selected && [
+          "border-primary shadow-lg shadow-primary/10",
+          "ring-2 ring-primary/30",
+        ],
+        pack.highlighted && !selected && "bg-muted/30",
+        !selected && !pack.highlighted && "hover:border-muted-foreground/30"
+      )}
+      onClick={() => onSelect(pack)}
+    >
+      {/* Highlighted badge */}
+      {pack.highlighted && pack.highlightLabel && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
+          <Badge className="inline-flex items-center gap-1 rounded-full px-3 py-1 shadow-sm">
+            <Sparkles className="h-3 w-3" />
+            {pack.highlightLabel}
+          </Badge>
+        </div>
+      )}
+
+      <CardHeader className={cn("pb-2", pack.highlighted && "pt-8")}>
+        <h3 className="text-lg font-bold text-foreground">{pack.name}</h3>
+      </CardHeader>
+
+      <CardContent className="flex flex-1 flex-col gap-3">
+        {/* Credits amount */}
+        <div className="flex items-center gap-2">
+          <Coins className="h-5 w-5 text-primary" />
+          <span className="text-3xl font-bold text-foreground">
+            {formatNumber(pack.credits)}
+          </span>
+          <span className="text-sm text-muted-foreground">credits</span>
+        </div>
+
+        {/* Price */}
+        <div className="text-2xl font-semibold text-foreground">
+          {formatPrice(pack.price, displayCurrency)}
+        </div>
+
+        {/* Unit price */}
+        {pack.unitPrice != null && pack.unitPrice > 0 && (
+          <p className="text-sm text-muted-foreground">
+            {formatUnitPrice(pack.unitPrice, displayCurrency)}
+          </p>
+        )}
+
+        {/* Bonus badge */}
+        {pack.bonusPercent != null && pack.bonusPercent > 0 && (
+          <Badge variant="secondary" className="w-fit rounded-full">
+            +{pack.bonusPercent}% bonus
+          </Badge>
+        )}
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Select button */}
+        <Button
+          type="button"
+          variant={selected ? "default" : "outline"}
+          className="mt-2 w-full"
+          onClick={(e) => {
+            e.stopPropagation()
+            onSelect(pack)
+          }}
+        >
+          {selected ? (
+            <>
+              <Check className="h-4 w-4" />
+              Selected
+            </>
+          ) : (
+            "Select"
+          )}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditPricingPack({
+  packs,
+  selectedId,
+  onSelect,
+  currency = "\u20ac",
+  columns = 3,
+  className,
+}: WakaCreditPricingPackProps) {
+  const columnClasses = {
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+  }
+
+  return (
+    <div
+      className={cn(
+        "grid gap-6",
+        columnClasses[columns],
+        className
+      )}
+    >
+      {packs.map((pack) => (
+        <PackCard
+          key={pack.id}
+          pack={pack}
+          selected={pack.id === selectedId}
+          onSelect={onSelect}
+          currency={currency}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default WakaCreditPricingPack

package/src/components/waka-credit-projection/WakaCreditProjection.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditProjection } from "./index"
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+/**
+ * Generate realistic declining balance data over N days.
+ * Starts at `startBalance` and applies a random daily burn
+ * centered around `avgDailyBurn` with some noise.
+ */
+function generateHistoricalData(
+  days: number,
+  startBalance: number,
+  avgDailyBurn: number
+): { date: string; value: number }[] {
+  const data: { date: string; value: number }[] = []
+  const now = new Date()
+  let balance = startBalance
+
+  for (let i = days; i >= 0; i--) {
+    const d = new Date(now)
+    d.setDate(d.getDate() - i)
+    const dateStr = d.toISOString().split("T")[0]
+
+    data.push({ date: dateStr, value: Math.round(balance) })
+
+    // Daily burn with +/- 40% noise
+    const noise = 0.6 + Math.random() * 0.8 // 0.6 to 1.4
+    const dailyBurn = avgDailyBurn * noise
+    balance = Math.max(0, balance - dailyBurn)
+  }
+
+  return data
+}
+
+// 30 days of historical data, starting from 10,000, burning ~150/day
+const defaultData = generateHistoricalData(30, 10000, 150)
+const currentBalance = defaultData[defaultData.length - 1].value
+
+// Near-depletion scenario: 30 days, starting 3,000, burning ~120/day
+const nearDepletionData = generateHistoricalData(30, 3000, 120)
+const nearDepletionBalance = nearDepletionData[nearDepletionData.length - 1].value
+
+// Long history: 60 days, starting 20,000, burning ~200/day
+const longHistoryData = generateHistoricalData(60, 20000, 200)
+const longHistoryBalance = longHistoryData[longHistoryData.length - 1].value
+
+// Short history: 10 days, starting 5,000, burning ~100/day
+const shortHistoryData = generateHistoricalData(10, 5000, 100)
+const shortHistoryBalance = shortHistoryData[shortHistoryData.length - 1].value
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta: Meta<typeof WakaCreditProjection> = {
+  title: "Components/Credit/WakaCreditProjection",
+  component: WakaCreditProjection,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Area chart showing historical credit balance and projected future balance with optional confidence interval. Uses linear extrapolation from burn rate to estimate depletion date.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    projectionDays: {
+      control: { type: "number", min: 7, max: 180 },
+      description: "Number of days to project into the future",
+    },
+    confidenceInterval: {
+      control: "boolean",
+      description: "Show confidence interval band around projection",
+    },
+    height: {
+      control: { type: "number", min: 150, max: 600 },
+      description: "Chart height in pixels",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable chart animations",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[800px] mx-auto">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditProjection>
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/** Default projection with 30 days of history and 30 days forward. */
+export const Default: Story = {
+  args: {
+    historicalData: defaultData,
+    balance: currentBalance,
+    projectionDays: 30,
+    confidenceInterval: false,
+    height: 300,
+    animated: true,
+  },
+}
+
+/** Projection with confidence interval band showing upper/lower bounds. */
+export const WithConfidence: Story = {
+  args: {
+    historicalData: defaultData,
+    balance: currentBalance,
+    projectionDays: 30,
+    confidenceInterval: true,
+    height: 300,
+    animated: true,
+  },
+}
+
+/** Short 7-day projection with 10 days of history. */
+export const ShortProjection: Story = {
+  args: {
+    historicalData: shortHistoryData,
+    balance: shortHistoryBalance,
+    projectionDays: 7,
+    confidenceInterval: false,
+    height: 300,
+    animated: true,
+  },
+}
+
+/** Long 90-day projection with 60 days of history. */
+export const LongProjection: Story = {
+  args: {
+    historicalData: longHistoryData,
+    balance: longHistoryBalance,
+    projectionDays: 90,
+    confidenceInterval: true,
+    height: 350,
+    animated: true,
+  },
+}
+
+/** Balance nearly depleted -- projection should cross zero soon. */
+export const NearDepletion: Story = {
+  args: {
+    historicalData: nearDepletionData,
+    balance: nearDepletionBalance,
+    projectionDays: 30,
+    confidenceInterval: true,
+    height: 300,
+    animated: true,
+  },
+}