@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-cost-breakdown/WakaCostBreakdown.stories.tsx

@@ -0,0 +1,348 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCostBreakdown, useCostBreakdown } from './index'
+import type { CostItem } from './index'
+import * as React from 'react'
+
+const cloudCostData: CostItem[] = [
+  {
+    id: 'compute',
+    name: 'Compute',
+    value: 0,
+    change: 12.5,
+    children: [
+      { id: 'ec2', name: 'EC2 Instances', value: 4500, change: 8.2 },
+      { id: 'lambda', name: 'Lambda', value: 1200, change: 25.0 },
+      { id: 'ecs', name: 'ECS/Fargate', value: 2300, change: -5.0 },
+    ],
+  },
+  {
+    id: 'storage',
+    name: 'Storage',
+    value: 0,
+    change: -3.2,
+    children: [
+      { id: 's3', name: 'S3', value: 2000, change: 2.0 },
+      { id: 'ebs', name: 'EBS Volumes', value: 1500, change: -8.0 },
+      { id: 'glacier', name: 'Glacier', value: 300, change: 0 },
+    ],
+  },
+  {
+    id: 'database',
+    name: 'Database',
+    value: 0,
+    change: 5.8,
+    children: [
+      { id: 'rds', name: 'RDS', value: 3200, change: 10.0 },
+      { id: 'dynamodb', name: 'DynamoDB', value: 800, change: -2.0 },
+      { id: 'elasticache', name: 'ElastiCache', value: 600, change: 15.0 },
+    ],
+  },
+  {
+    id: 'network',
+    name: 'Network',
+    value: 0,
+    change: 18.0,
+    children: [
+      { id: 'data-transfer', name: 'Data Transfer', value: 1800, change: 20.0 },
+      { id: 'cloudfront', name: 'CloudFront', value: 900, change: 15.0 },
+      { id: 'route53', name: 'Route 53', value: 100, change: 0 },
+    ],
+  },
+  { id: 'other', name: 'Other Services', value: 1200, change: 5.0 },
+]
+
+const departmentBudgetData: CostItem[] = [
+  {
+    id: 'engineering',
+    name: 'Engineering',
+    value: 0,
+    color: '#3b82f6',
+    children: [
+      { id: 'salaries-eng', name: 'Salaries', value: 450000 },
+      { id: 'tools-eng', name: 'Tools & Licenses', value: 35000 },
+      { id: 'infra', name: 'Infrastructure', value: 80000 },
+    ],
+  },
+  {
+    id: 'marketing',
+    name: 'Marketing',
+    value: 0,
+    color: '#22c55e',
+    children: [
+      { id: 'salaries-mkt', name: 'Salaries', value: 180000 },
+      { id: 'ads', name: 'Advertising', value: 120000 },
+      { id: 'events', name: 'Events', value: 50000 },
+    ],
+  },
+  {
+    id: 'sales',
+    name: 'Sales',
+    value: 0,
+    color: '#f59e0b',
+    children: [
+      { id: 'salaries-sales', name: 'Salaries', value: 320000 },
+      { id: 'commissions', name: 'Commissions', value: 95000 },
+      { id: 'travel', name: 'Travel', value: 45000 },
+    ],
+  },
+  {
+    id: 'operations',
+    name: 'Operations',
+    value: 0,
+    color: '#8b5cf6',
+    children: [
+      { id: 'salaries-ops', name: 'Salaries', value: 150000 },
+      { id: 'facilities', name: 'Facilities', value: 80000 },
+      { id: 'legal', name: 'Legal & Compliance', value: 40000 },
+    ],
+  },
+]
+
+const simpleData: CostItem[] = [
+  { id: 'rent', name: 'Rent', value: 2500 },
+  { id: 'utilities', name: 'Utilities', value: 350 },
+  { id: 'groceries', name: 'Groceries', value: 600 },
+  { id: 'transport', name: 'Transport', value: 400 },
+  { id: 'entertainment', name: 'Entertainment', value: 250 },
+  { id: 'savings', name: 'Savings', value: 800 },
+]
+
+const meta: Meta<typeof WakaCostBreakdown> = {
+  title: 'Components/Charts/WakaCostBreakdown',
+  component: WakaCostBreakdown,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A cost breakdown visualization with treemap and sunburst variants, drill-down navigation, and comparison indicators.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['treemap', 'sunburst'],
+      description: 'Visualization variant',
+    },
+    currency: {
+      control: 'text',
+      description: 'Currency symbol',
+    },
+    showLegend: {
+      control: 'boolean',
+      description: 'Show legend sidebar',
+    },
+    showComparison: {
+      control: 'boolean',
+      description: 'Show comparison indicators',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCostBreakdown>
+
+export const Default: Story = {
+  args: {
+    data: cloudCostData,
+    currency: '$',
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
+}
+
+export const TreemapVariant: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={departmentBudgetData}
+      variant="treemap"
+      currency="$"
+    />
+  ),
+}
+
+export const SunburstVariant: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={departmentBudgetData}
+      variant="sunburst"
+      currency="$"
+    />
+  ),
+}
+
+export const WithComparison: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      showComparison
+      currency="$"
+    />
+  ),
+}
+
+export const SimpleData: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={simpleData}
+      currency="$"
+      showComparison={false}
+    />
+  ),
+}
+
+export const NoLegend: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      showLegend={false}
+      currency="$"
+    />
+  ),
+}
+
+export const DrillDownExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Click on a category to drill down into its subcategories
+      </p>
+      <WakaCostBreakdown
+        data={cloudCostData}
+        currency="$"
+        showComparison
+        onItemClick={(id, path) => console.log('Clicked:', id, 'Path:', path)}
+      />
+    </div>
+  ),
+}
+
+export const CustomFormatter: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      currency=""
+      formatValue={(value) => {
+        if (value >= 1000) {
+          return `${(value / 1000).toFixed(1)}K USD`
+        }
+        return `${value} USD`
+      }}
+    />
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { path, drillDown, drillUp, reset, getCurrentData } = useCostBreakdown({
+      data: cloudCostData,
+      onDrillDown: (path) => console.log('Drill down:', path),
+    })
+
+    const currentData = getCurrentData()
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 items-center">
+          <button
+            onClick={drillUp}
+            disabled={path.length === 0}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted disabled:opacity-50"
+          >
+            Back
+          </button>
+          <button
+            onClick={reset}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Reset
+          </button>
+          <span className="text-sm text-muted-foreground">
+            Path: {path.length === 0 ? 'Root' : path.join(' / ')}
+          </span>
+        </div>
+        <WakaCostBreakdown
+          data={cloudCostData}
+          currency="$"
+        />
+      </div>
+    )
+  },
+}
+
+export const CloudCostDashboard: Story = {
+  render: () => (
+    <div className="w-[750px] p-6 border rounded-lg">
+      <div className="flex justify-between items-start mb-6">
+        <div>
+          <h3 className="text-xl font-semibold">Cloud Cost Analysis</h3>
+          <p className="text-sm text-muted-foreground">December 2024</p>
+        </div>
+        <div className="text-right">
+          <p className="text-sm text-muted-foreground">Month-over-Month</p>
+          <p className="text-lg font-semibold text-red-600">+8.5%</p>
+        </div>
+      </div>
+      <WakaCostBreakdown
+        data={cloudCostData}
+        currency="$"
+        showComparison
+      />
+    </div>
+  ),
+}
+
+export const DepartmentBudgetDashboard: Story = {
+  render: () => (
+    <div className="w-[750px] p-6 border rounded-lg">
+      <div className="mb-6">
+        <h3 className="text-xl font-semibold">Department Budget Allocation</h3>
+        <p className="text-sm text-muted-foreground">Fiscal Year 2024</p>
+      </div>
+      <WakaCostBreakdown
+        data={departmentBudgetData}
+        variant="sunburst"
+        currency="$"
+      />
+    </div>
+  ),
+}
+
+export const ComparisonVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-2">Treemap View</h4>
+        <WakaCostBreakdown
+          data={simpleData}
+          variant="treemap"
+          currency="$"
+          showLegend={false}
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Sunburst View</h4>
+        <WakaCostBreakdown
+          data={simpleData}
+          variant="sunburst"
+          currency="$"
+          showLegend={false}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      animated={false}
+      currency="$"
+    />
+  ),
+}

package/src/components/waka-daily-reward/WakaDailyReward.stories.tsx

@@ -0,0 +1,365 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDailyReward, WakaCompactDailyReward, useDailyRewards } from './index'
+import type { DailyReward, Reward } from './index'
+import * as React from 'react'
+import { Crown, Gem, Zap, Gift } from 'lucide-react'
+
+const defaultRewards: DailyReward[] = [
+  { day: 1, reward: { type: 'coins', value: 100 }, claimed: true },
+  { day: 2, reward: { type: 'xp', value: 50 }, claimed: true },
+  { day: 3, reward: { type: 'coins', value: 200 }, claimed: false },
+  { day: 4, reward: { type: 'item', value: 'Mystery Box' }, claimed: false },
+  { day: 5, reward: { type: 'xp', value: 100 }, claimed: false },
+  { day: 6, reward: { type: 'coins', value: 500 }, claimed: false },
+  { day: 7, reward: { type: 'badge', value: 'Weekly Champion' }, claimed: false, isBonus: true },
+]
+
+const meta: Meta<typeof WakaDailyReward> = {
+  title: 'Components/Gamification/WakaDailyReward',
+  component: WakaDailyReward,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A daily reward calendar with streak tracking, confetti celebration, countdown timer, and multiple reward types.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['horizontal', 'calendar'],
+      description: 'Layout variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    canClaim: {
+      control: 'boolean',
+      description: 'Whether the user can claim today\'s reward',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDailyReward>
+
+export const Default: Story = {
+  args: {
+    currentDay: 3,
+    rewards: defaultRewards,
+    streak: 3,
+    nextRewardIn: 43200,
+    variant: 'horizontal',
+    size: 'md',
+    canClaim: true,
+  },
+  render: (args) => <WakaDailyReward {...args} />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaDailyReward
+          currentDay={3}
+          rewards={defaultRewards}
+          streak={3}
+          size="sm"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaDailyReward
+          currentDay={3}
+          rewards={defaultRewards}
+          streak={3}
+          size="md"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaDailyReward
+          currentDay={3}
+          rewards={defaultRewards}
+          streak={3}
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const DayProgression: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Day 1 - First Day</p>
+        <WakaDailyReward
+          currentDay={1}
+          rewards={defaultRewards.map((r, i) => ({ ...r, claimed: false }))}
+          streak={0}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Day 4 - Mid Week</p>
+        <WakaDailyReward
+          currentDay={4}
+          rewards={defaultRewards.map((r, i) => ({ ...r, claimed: i < 3 }))}
+          streak={3}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Day 7 - Bonus Day</p>
+        <WakaDailyReward
+          currentDay={7}
+          rewards={defaultRewards.map((r, i) => ({ ...r, claimed: i < 6 }))}
+          streak={6}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const MissedDays: Story = {
+  render: () => {
+    const rewardsWithMissed: DailyReward[] = [
+      { day: 1, reward: { type: 'coins', value: 100 }, claimed: true },
+      { day: 2, reward: { type: 'xp', value: 50 }, claimed: false }, // Missed
+      { day: 3, reward: { type: 'coins', value: 200 }, claimed: false }, // Missed
+      { day: 4, reward: { type: 'item', value: 'Mystery Box' }, claimed: true },
+      { day: 5, reward: { type: 'xp', value: 100 }, claimed: false }, // Current
+      { day: 6, reward: { type: 'coins', value: 500 }, claimed: false },
+      { day: 7, reward: { type: 'badge', value: 'Weekly Champion' }, claimed: false, isBonus: true },
+    ]
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground text-center">
+          Days 2 and 3 were missed (shown with X)
+        </p>
+        <WakaDailyReward
+          currentDay={5}
+          rewards={rewardsWithMissed}
+          streak={1}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllClaimed: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Perfect week - all rewards claimed!
+      </p>
+      <WakaDailyReward
+        currentDay={7}
+        rewards={defaultRewards.map(r => ({ ...r, claimed: true }))}
+        streak={7}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [rewards, setRewards] = React.useState<DailyReward[]>(
+      defaultRewards.map((r, i) => ({ ...r, claimed: i < 2 }))
+    )
+    const [currentDay, setCurrentDay] = React.useState(3)
+    const [streak, setStreak] = React.useState(2)
+
+    const handleClaim = (day: number) => {
+      setRewards(prev => prev.map(r =>
+        r.day === day ? { ...r, claimed: true } : r
+      ))
+      setStreak(prev => prev + 1)
+      if (currentDay < 7) {
+        setTimeout(() => setCurrentDay(prev => prev + 1), 1500)
+      }
+    }
+
+    const reset = () => {
+      setRewards(defaultRewards.map((r, i) => ({ ...r, claimed: i < 2 })))
+      setCurrentDay(3)
+      setStreak(2)
+    }
+
+    return (
+      <div className="space-y-6">
+        <WakaDailyReward
+          currentDay={currentDay}
+          rewards={rewards}
+          streak={streak}
+          onClaim={handleClaim}
+        />
+
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={reset}
+            className="px-4 py-2 text-sm rounded border hover:bg-muted"
+          >
+            Reset Demo
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      rewards,
+      currentDay,
+      streak,
+      claimReward,
+      advanceDay,
+      canClaimToday,
+      getSecondsUntilMidnight,
+    } = useDailyRewards({
+      initialRewards: defaultRewards,
+      initialDay: 3,
+      initialStreak: 2,
+      onRewardClaimed: (day, reward) => {
+        console.log(`Claimed day ${day}:`, reward)
+      },
+    })
+
+    return (
+      <div className="space-y-6">
+        <WakaDailyReward
+          currentDay={currentDay}
+          rewards={rewards}
+          streak={streak}
+          onClaim={claimReward}
+          nextRewardIn={getSecondsUntilMidnight()}
+        />
+
+        <div className="p-4 rounded-lg border">
+          <h4 className="font-medium mb-2">Hook State</h4>
+          <div className="grid grid-cols-2 gap-2 text-sm mb-3">
+            <div>Current Day: {currentDay}</div>
+            <div>Streak: {streak}</div>
+            <div>Can Claim: {canClaimToday ? 'Yes' : 'No'}</div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={advanceDay}
+              className="px-3 py-1.5 text-xs rounded bg-primary text-primary-foreground"
+            >
+              Advance Day
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CompactVariant: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Can Claim</p>
+        <WakaCompactDailyReward
+          currentDay={3}
+          streak={2}
+          claimed={false}
+          onClaim={() => console.log('Claimed!')}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Already Claimed</p>
+        <WakaCompactDailyReward
+          currentDay={5}
+          streak={5}
+          claimed={true}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Perfect Week</p>
+        <WakaCompactDailyReward
+          currentDay={7}
+          streak={7}
+          claimed={true}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithCountdown: Story = {
+  render: () => (
+    <WakaDailyReward
+      currentDay={3}
+      rewards={defaultRewards.map((r, i) => ({ ...r, claimed: i < 3 }))}
+      streak={3}
+      nextRewardIn={7200} // 2 hours
+      canClaim={false}
+    />
+  ),
+}
+
+export const CustomRewardIcons: Story = {
+  render: () => {
+    const customRewards: DailyReward[] = [
+      { day: 1, reward: { type: 'xp', value: 100, icon: <Zap className="h-6 w-6 text-yellow-500" /> }, claimed: true },
+      { day: 2, reward: { type: 'item', value: 'Gift', icon: <Gift className="h-6 w-6 text-blue-500" /> }, claimed: true },
+      { day: 3, reward: { type: 'coins', value: 500, icon: <Gem className="h-6 w-6 text-purple-500" /> }, claimed: false },
+      { day: 4, reward: { type: 'xp', value: 200, icon: <Zap className="h-6 w-6 text-yellow-500" /> }, claimed: false },
+      { day: 5, reward: { type: 'item', value: 'Rare Box', icon: <Gift className="h-6 w-6 text-green-500" /> }, claimed: false },
+      { day: 6, reward: { type: 'coins', value: 1000, icon: <Gem className="h-6 w-6 text-purple-500" /> }, claimed: false },
+      { day: 7, reward: { type: 'badge', value: 'Crown', icon: <Crown className="h-6 w-6 text-amber-500" /> }, claimed: false, isBonus: true },
+    ]
+
+    return (
+      <WakaDailyReward
+        currentDay={3}
+        rewards={customRewards}
+        streak={2}
+      />
+    )
+  },
+}
+
+export const DashboardWidget: Story = {
+  render: () => (
+    <div className="w-[400px] p-4 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-semibold">Daily Check-In</h3>
+        <span className="text-xs text-muted-foreground">Week 12</span>
+      </div>
+      <WakaDailyReward
+        currentDay={4}
+        rewards={defaultRewards.map((r, i) => ({ ...r, claimed: i < 3 }))}
+        streak={10}
+        size="sm"
+      />
+    </div>
+  ),
+}
+
+export const CannotClaim: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Cannot claim - waiting for next day
+      </p>
+      <WakaDailyReward
+        currentDay={3}
+        rewards={defaultRewards.map((r, i) => ({ ...r, claimed: i < 3 }))}
+        streak={3}
+        canClaim={false}
+        nextRewardIn={28800}
+      />
+    </div>
+  ),
+}