@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-skill-tree/WakaSkillTree.stories.tsx

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSkillTree, useSkillTree } from './index'
+import type { Skill, SkillBranch } from './index'
+import * as React from 'react'
+import { Sword, Shield, Zap, Heart, Flame, Star, Crown, Target, Eye, Wind } from 'lucide-react'
+
+const sampleSkills: Skill[] = [
+  // Attack branch
+  { id: 'atk-1', name: 'Basic Attack', description: 'Increases base attack damage by 10%', icon: <Sword className="h-6 w-6 text-white" />, unlocked: true, available: true, branch: 'attack', position: { x: 100, y: 100 }, cost: 1 },
+  { id: 'atk-2', name: 'Power Strike', description: 'A powerful attack that deals 150% damage', icon: <Sword className="h-6 w-6 text-white" />, unlocked: false, available: true, prerequisites: ['atk-1'], branch: 'attack', position: { x: 100, y: 220 }, cost: 2 },
+  { id: 'atk-3', name: 'Critical Mastery', description: 'Increases critical hit chance by 15%', icon: <Target className="h-6 w-6 text-white" />, unlocked: false, available: false, prerequisites: ['atk-2'], branch: 'attack', position: { x: 100, y: 340 }, cost: 3 },
+
+  // Defense branch
+  { id: 'def-1', name: 'Basic Defense', description: 'Increases armor by 10%', icon: <Shield className="h-6 w-6 text-white" />, unlocked: true, available: true, branch: 'defense', position: { x: 300, y: 100 }, cost: 1 },
+  { id: 'def-2', name: 'Iron Wall', description: 'Reduces incoming damage by 20%', icon: <Shield className="h-6 w-6 text-white" />, unlocked: false, available: true, prerequisites: ['def-1'], branch: 'defense', position: { x: 300, y: 220 }, cost: 2 },
+  { id: 'def-3', name: 'Thorns', description: 'Reflects 10% damage back to attackers', icon: <Flame className="h-6 w-6 text-white" />, unlocked: false, available: false, prerequisites: ['def-2'], branch: 'defense', position: { x: 300, y: 340 }, cost: 3 },
+
+  // Magic branch
+  { id: 'mag-1', name: 'Mana Pool', description: 'Increases max mana by 20%', icon: <Zap className="h-6 w-6 text-white" />, unlocked: false, available: true, branch: 'magic', position: { x: 500, y: 100 }, cost: 1 },
+  { id: 'mag-2', name: 'Spell Power', description: 'Increases spell damage by 15%', icon: <Star className="h-6 w-6 text-white" />, unlocked: false, available: false, prerequisites: ['mag-1'], branch: 'magic', position: { x: 500, y: 220 }, cost: 2 },
+  { id: 'mag-3', name: 'Arcane Mastery', description: 'Reduces spell cooldowns by 25%', icon: <Crown className="h-6 w-6 text-white" />, unlocked: false, available: false, prerequisites: ['mag-2'], branch: 'magic', position: { x: 500, y: 340 }, cost: 4 },
+
+  // Health branch
+  { id: 'hp-1', name: 'Vitality', description: 'Increases max HP by 15%', icon: <Heart className="h-6 w-6 text-white" />, unlocked: false, available: true, branch: 'health', position: { x: 700, y: 100 }, cost: 1 },
+  { id: 'hp-2', name: 'Regeneration', description: 'Recover 1% HP every 5 seconds', icon: <Heart className="h-6 w-6 text-white" />, unlocked: false, available: false, prerequisites: ['hp-1'], branch: 'health', position: { x: 700, y: 220 }, cost: 2 },
+]
+
+const branches: SkillBranch[] = [
+  { id: 'attack', name: 'Attack', color: '#ef4444' },
+  { id: 'defense', name: 'Defense', color: '#3b82f6' },
+  { id: 'magic', name: 'Magic', color: '#8b5cf6' },
+  { id: 'health', name: 'Health', color: '#22c55e' },
+]
+
+const meta: Meta<typeof WakaSkillTree> = {
+  title: 'Components/Gamification/WakaSkillTree',
+  component: WakaSkillTree,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'An interactive skill tree with branches, prerequisites, zoom/pan controls, unlock animations, and progress tracking.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showConnections: {
+      control: 'boolean',
+      description: 'Show connection lines between skills',
+    },
+    zoomable: {
+      control: 'boolean',
+      description: 'Enable zoom controls',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    showResetButton: {
+      control: 'boolean',
+      description: 'Show reset button',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSkillTree>
+
+export const Default: Story = {
+  args: {
+    skills: sampleSkills,
+    skillPoints: 10,
+    branches: branches,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaSkillTree {...args} />
+    </div>
+  ),
+}
+
+export const WithoutBranchPanel: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaSkillTree
+        skills={sampleSkills.slice(0, 6)}
+        skillPoints={5}
+        branches={branches.slice(0, 2)}
+      />
+    </div>
+  ),
+}
+
+export const AllUnlocked: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaSkillTree
+        skills={sampleSkills.map(s => ({ ...s, unlocked: true, available: true }))}
+        skillPoints={0}
+        branches={branches}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const {
+      skills,
+      skillPoints,
+      unlockSkill,
+      addPoints,
+      resetSkills,
+      totalUnlocked,
+      totalSkills,
+      progress,
+    } = useSkillTree({
+      initialSkills: sampleSkills,
+      initialPoints: 10,
+      onSkillUnlock: (skill) => console.log('Unlocked:', skill.name),
+    })
+
+    return (
+      <div className="p-6">
+        <WakaSkillTree
+          skills={skills}
+          skillPoints={skillPoints}
+          branches={branches}
+          onUnlock={unlockSkill}
+          onReset={resetSkills}
+        />
+
+        <div className="fixed bottom-4 left-4 p-4 rounded-lg border bg-card shadow-lg">
+          <div className="text-sm space-y-1">
+            <div>Progress: {progress.toFixed(0)}%</div>
+            <div>Skills: {totalUnlocked}/{totalSkills}</div>
+          </div>
+          <div className="mt-3 flex gap-2">
+            <button
+              onClick={() => addPoints(5)}
+              className="px-3 py-1 text-xs rounded bg-primary text-primary-foreground"
+            >
+              +5 Points
+            </button>
+            <button
+              onClick={resetSkills}
+              className="px-3 py-1 text-xs rounded border hover:bg-muted"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const NoZoom: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaSkillTree
+        skills={sampleSkills}
+        skillPoints={5}
+        branches={branches}
+        zoomable={false}
+      />
+    </div>
+  ),
+}
+
+export const NoConnections: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaSkillTree
+        skills={sampleSkills}
+        skillPoints={5}
+        branches={branches}
+        showConnections={false}
+      />
+    </div>
+  ),
+}
+
+export const NoAnimations: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaSkillTree
+        skills={sampleSkills}
+        skillPoints={5}
+        branches={branches}
+        animated={false}
+      />
+    </div>
+  ),
+}
+
+export const LargeSkillTree: Story = {
+  render: () => {
+    const largeSkills: Skill[] = [
+      // Tier 1
+      { id: 's1', name: 'Core Skill', description: 'The foundation', unlocked: true, available: true, branch: 'core', position: { x: 400, y: 50 }, cost: 0 },
+
+      // Tier 2
+      { id: 's2a', name: 'Path A', description: 'First path', unlocked: false, available: true, prerequisites: ['s1'], branch: 'power', position: { x: 200, y: 150 }, cost: 1 },
+      { id: 's2b', name: 'Path B', description: 'Second path', unlocked: false, available: true, prerequisites: ['s1'], branch: 'defense', position: { x: 400, y: 150 }, cost: 1 },
+      { id: 's2c', name: 'Path C', description: 'Third path', unlocked: false, available: true, prerequisites: ['s1'], branch: 'utility', position: { x: 600, y: 150 }, cost: 1 },
+
+      // Tier 3
+      { id: 's3a1', name: 'Power I', description: 'Power skill 1', unlocked: false, available: false, prerequisites: ['s2a'], branch: 'power', position: { x: 100, y: 250 }, cost: 2 },
+      { id: 's3a2', name: 'Power II', description: 'Power skill 2', unlocked: false, available: false, prerequisites: ['s2a'], branch: 'power', position: { x: 300, y: 250 }, cost: 2 },
+      { id: 's3b1', name: 'Defense I', description: 'Defense skill 1', unlocked: false, available: false, prerequisites: ['s2b'], branch: 'defense', position: { x: 400, y: 250 }, cost: 2 },
+      { id: 's3c1', name: 'Utility I', description: 'Utility skill 1', unlocked: false, available: false, prerequisites: ['s2c'], branch: 'utility', position: { x: 500, y: 250 }, cost: 2 },
+      { id: 's3c2', name: 'Utility II', description: 'Utility skill 2', unlocked: false, available: false, prerequisites: ['s2c'], branch: 'utility', position: { x: 700, y: 250 }, cost: 2 },
+
+      // Tier 4
+      { id: 's4a', name: 'Ultimate Power', description: 'Ultimate power skill', unlocked: false, available: false, prerequisites: ['s3a1', 's3a2'], branch: 'power', position: { x: 200, y: 350 }, cost: 4 },
+      { id: 's4b', name: 'Ultimate Defense', description: 'Ultimate defense skill', unlocked: false, available: false, prerequisites: ['s3b1'], branch: 'defense', position: { x: 400, y: 350 }, cost: 4 },
+      { id: 's4c', name: 'Ultimate Utility', description: 'Ultimate utility skill', unlocked: false, available: false, prerequisites: ['s3c1', 's3c2'], branch: 'utility', position: { x: 600, y: 350 }, cost: 4 },
+
+      // Final tier
+      { id: 's5', name: 'Ascension', description: 'The ultimate skill', unlocked: false, available: false, prerequisites: ['s4a', 's4b', 's4c'], branch: 'core', position: { x: 400, y: 450 }, cost: 10 },
+    ]
+
+    const largeBranches: SkillBranch[] = [
+      { id: 'core', name: 'Core', color: '#f59e0b' },
+      { id: 'power', name: 'Power', color: '#ef4444' },
+      { id: 'defense', name: 'Defense', color: '#3b82f6' },
+      { id: 'utility', name: 'Utility', color: '#22c55e' },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaSkillTree
+          skills={largeSkills}
+          skillPoints={20}
+          branches={largeBranches}
+        />
+      </div>
+    )
+  },
+}
+
+export const MultiLevelSkills: Story = {
+  render: () => {
+    const multiLevelSkills: Skill[] = [
+      { id: 'skill-1', name: 'Strength', description: '+10 ATK per level', unlocked: true, available: true, branch: 'attack', position: { x: 200, y: 150 }, cost: 1, maxLevel: 5, level: 3 },
+      { id: 'skill-2', name: 'Endurance', description: '+10 DEF per level', unlocked: true, available: true, branch: 'defense', position: { x: 400, y: 150 }, cost: 1, maxLevel: 5, level: 2 },
+      { id: 'skill-3', name: 'Intelligence', description: '+10 MP per level', unlocked: true, available: true, branch: 'magic', position: { x: 600, y: 150 }, cost: 1, maxLevel: 5, level: 5 },
+    ]
+
+    return (
+      <div className="p-6">
+        <p className="text-sm text-muted-foreground text-center mb-4">
+          Multi-level skills show current/max level on the node
+        </p>
+        <WakaSkillTree
+          skills={multiLevelSkills}
+          skillPoints={5}
+          branches={branches.slice(0, 3)}
+        />
+      </div>
+    )
+  },
+}
+
+export const RPGCharacterBuild: Story = {
+  render: () => (
+    <div className="p-6">
+      <div className="mb-6 p-4 rounded-xl border bg-gradient-to-r from-violet-500/10 to-purple-500/10">
+        <div className="flex items-center gap-4">
+          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
+            <Crown className="h-8 w-8 text-white" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold">Warrior Build</h2>
+            <p className="text-sm text-muted-foreground">Level 42 • 3,450 XP to next level</p>
+          </div>
+          <div className="ml-auto text-right">
+            <div className="text-2xl font-bold text-amber-500">12</div>
+            <div className="text-xs text-muted-foreground">Skill Points</div>
+          </div>
+        </div>
+      </div>
+
+      <WakaSkillTree
+        skills={sampleSkills}
+        skillPoints={12}
+        branches={branches}
+      />
+    </div>
+  ),
+}
+
+export const LowPoints: Story = {
+  render: () => (
+    <div className="p-6">
+      <p className="text-sm text-muted-foreground text-center mb-4">
+        With only 1 point, expensive skills show as locked even when available
+      </p>
+      <WakaSkillTree
+        skills={sampleSkills}
+        skillPoints={1}
+        branches={branches}
+      />
+    </div>
+  ),
+}

package/src/components/waka-spin-wheel/WakaSpinWheel.stories.tsx

@@ -0,0 +1,368 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSpinWheel } from './index'
+import type { SpinWheelSegment } from './index'
+import * as React from 'react'
+import { Gift, Star, Zap, Crown, Gem, Coins, Heart, Flame } from 'lucide-react'
+
+const sampleSegments: SpinWheelSegment[] = [
+  { id: '1', label: '100 Points', color: '#3b82f6', weight: 30 },
+  { id: '2', label: '200 Points', color: '#22c55e', weight: 25 },
+  { id: '3', label: '500 Points', color: '#f59e0b', weight: 15 },
+  { id: '4', label: 'Try Again', color: '#6b7280', weight: 20 },
+  { id: '5', label: '1000 Points', color: '#8b5cf6', weight: 8 },
+  { id: '6', label: 'JACKPOT!', color: '#ef4444', weight: 2 },
+]
+
+const prizeSegments: SpinWheelSegment[] = [
+  { id: 'p1', label: 'Gold Coins', color: '#fbbf24', icon: <Coins className="h-5 w-5 text-white" /> },
+  { id: 'p2', label: 'Gems', color: '#8b5cf6', icon: <Gem className="h-5 w-5 text-white" /> },
+  { id: 'p3', label: 'Energy', color: '#3b82f6', icon: <Zap className="h-5 w-5 text-white" /> },
+  { id: 'p4', label: 'Crown', color: '#f59e0b', icon: <Crown className="h-5 w-5 text-white" /> },
+  { id: 'p5', label: 'Heart', color: '#ef4444', icon: <Heart className="h-5 w-5 text-white" /> },
+  { id: 'p6', label: 'Star', color: '#22c55e', icon: <Star className="h-5 w-5 text-white" /> },
+]
+
+const meta: Meta<typeof WakaSpinWheel> = {
+  title: 'Components/Gamification/WakaSpinWheel',
+  component: WakaSpinWheel,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A fortune wheel with weighted probabilities, smooth spin physics, tick sound callbacks, and customizable appearance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Wheel size',
+    },
+    spinDuration: {
+      control: { type: 'number', min: 2000, max: 10000, step: 500 },
+      description: 'Spin duration in milliseconds',
+    },
+    rotations: {
+      control: { type: 'number', min: 2, max: 10, step: 1 },
+      description: 'Number of full rotations before stopping',
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show segment labels',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable spinning',
+    },
+    pointerPosition: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'Position of the pointer',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSpinWheel>
+
+export const Default: Story = {
+  args: {
+    segments: sampleSegments,
+    size: 'md',
+    spinDuration: 4000,
+    rotations: 5,
+    showLabels: true,
+    disabled: false,
+    pointerPosition: 'top',
+  },
+  render: (args) => <WakaSpinWheel {...args} />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8 items-center">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Small</p>
+        <WakaSpinWheel segments={sampleSegments} size="sm" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Medium (Default)</p>
+        <WakaSpinWheel segments={sampleSegments} size="md" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Large</p>
+        <WakaSpinWheel segments={sampleSegments} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <WakaSpinWheel segments={prizeSegments} size="lg" />
+  ),
+}
+
+export const PointerPositions: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Top (Default)</p>
+        <WakaSpinWheel segments={sampleSegments} pointerPosition="top" size="sm" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Right</p>
+        <WakaSpinWheel segments={sampleSegments} pointerPosition="right" size="sm" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Bottom</p>
+        <WakaSpinWheel segments={sampleSegments} pointerPosition="bottom" size="sm" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Left</p>
+        <WakaSpinWheel segments={sampleSegments} pointerPosition="left" size="sm" />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [result, setResult] = React.useState<SpinWheelSegment | null>(null)
+    const [isSpinning, setIsSpinning] = React.useState(false)
+    const [spinCount, setSpinCount] = React.useState(0)
+
+    return (
+      <div className="space-y-6">
+        <WakaSpinWheel
+          segments={sampleSegments}
+          onSpin={() => {
+            setIsSpinning(true)
+            setSpinCount(prev => prev + 1)
+          }}
+          onResult={(segment) => {
+            setIsSpinning(false)
+            setResult(segment)
+          }}
+          size="lg"
+        />
+
+        <div className="p-4 rounded-lg border bg-muted/30 w-[350px]">
+          <div className="grid grid-cols-2 gap-2 text-sm mb-3">
+            <div>Spin Count: {spinCount}</div>
+            <div>Status: {isSpinning ? 'Spinning...' : 'Ready'}</div>
+          </div>
+
+          {result && (
+            <div className="pt-3 border-t">
+              <h4 className="font-medium mb-1">Last Result</h4>
+              <div
+                className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-white text-sm font-medium"
+                style={{ backgroundColor: result.color }}
+              >
+                {result.label}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithCallbacks: Story = {
+  render: () => {
+    const [log, setLog] = React.useState<string[]>([])
+
+    const addLog = (message: string) => {
+      setLog(prev => [...prev.slice(-4), `${new Date().toLocaleTimeString()}: ${message}`])
+    }
+
+    return (
+      <div className="flex gap-8">
+        <WakaSpinWheel
+          segments={sampleSegments}
+          onSpin={() => addLog('Spin started')}
+          onTick={() => addLog('Tick')}
+          onSlowDown={() => addLog('Slowing down...')}
+          onResult={(segment) => addLog(`Result: ${segment.label}`)}
+        />
+
+        <div className="w-[250px] p-4 rounded-lg border bg-muted/30">
+          <h4 className="font-medium mb-2">Event Log</h4>
+          <div className="space-y-1 font-mono text-xs">
+            {log.map((entry, i) => (
+              <div key={i} className="text-muted-foreground">{entry}</div>
+            ))}
+            {log.length === 0 && (
+              <div className="text-muted-foreground italic">Spin to see events...</div>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WeightedProbabilities: Story = {
+  render: () => {
+    const weightedSegments: SpinWheelSegment[] = [
+      { id: '1', label: '10 pts', color: '#6b7280', weight: 50 },
+      { id: '2', label: '50 pts', color: '#3b82f6', weight: 30 },
+      { id: '3', label: '100 pts', color: '#22c55e', weight: 15 },
+      { id: '4', label: '500 pts', color: '#f59e0b', weight: 4 },
+      { id: '5', label: 'JACKPOT', color: '#ef4444', weight: 1 },
+    ]
+
+    const [results, setResults] = React.useState<Record<string, number>>({})
+
+    return (
+      <div className="space-y-6">
+        <WakaSpinWheel
+          segments={weightedSegments}
+          onResult={(segment) => {
+            setResults(prev => ({
+              ...prev,
+              [segment.id]: (prev[segment.id] || 0) + 1,
+            }))
+          }}
+          size="lg"
+        />
+
+        <div className="w-[350px] p-4 rounded-lg border">
+          <h4 className="font-medium mb-3">Probability Distribution</h4>
+          <div className="space-y-2">
+            {weightedSegments.map((segment) => (
+              <div key={segment.id} className="flex items-center gap-2">
+                <div
+                  className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: segment.color }}
+                />
+                <span className="flex-1 text-sm">{segment.label}</span>
+                <span className="text-xs text-muted-foreground">
+                  {segment.weight}% chance
+                </span>
+                <span className="text-xs font-mono">
+                  Won: {results[segment.id] || 0}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CustomSpinSettings: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Fast Spin (2s, 3 rotations)</p>
+        <WakaSpinWheel
+          segments={sampleSegments}
+          spinDuration={2000}
+          rotations={3}
+          size="sm"
+        />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Slow Spin (8s, 8 rotations)</p>
+        <WakaSpinWheel
+          segments={sampleSegments}
+          spinDuration={8000}
+          rotations={8}
+          size="sm"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const CustomCenterContent: Story = {
+  render: () => (
+    <WakaSpinWheel
+      segments={prizeSegments}
+      size="lg"
+      centerContent={
+        <div className="flex flex-col items-center">
+          <Flame className="h-6 w-6 text-amber-900" />
+          <span className="text-[10px] font-bold text-amber-900">GO!</span>
+        </div>
+      }
+    />
+  ),
+}
+
+export const DailySpinGame: Story = {
+  render: () => {
+    const [spinsLeft, setSpinsLeft] = React.useState(3)
+    const [totalWon, setTotalWon] = React.useState(0)
+
+    const dailySegments: SpinWheelSegment[] = [
+      { id: '1', label: '50', color: '#6b7280', weight: 30 },
+      { id: '2', label: '100', color: '#3b82f6', weight: 25 },
+      { id: '3', label: '200', color: '#22c55e', weight: 20 },
+      { id: '4', label: '500', color: '#f59e0b', weight: 15 },
+      { id: '5', label: '1K', color: '#8b5cf6', weight: 8 },
+      { id: '6', label: '5K', color: '#ef4444', weight: 2 },
+    ]
+
+    return (
+      <div className="p-6 rounded-xl border bg-gradient-to-br from-violet-500/10 to-purple-500/10">
+        <div className="flex justify-between items-center mb-6">
+          <div>
+            <h3 className="text-xl font-bold">Daily Spin</h3>
+            <p className="text-sm text-muted-foreground">Win coins every day!</p>
+          </div>
+          <div className="text-right">
+            <div className="text-2xl font-bold text-amber-500">{totalWon.toLocaleString()}</div>
+            <div className="text-xs text-muted-foreground">Coins Won</div>
+          </div>
+        </div>
+
+        <WakaSpinWheel
+          segments={dailySegments}
+          disabled={spinsLeft === 0}
+          onSpin={() => setSpinsLeft(prev => prev - 1)}
+          onResult={(segment) => {
+            const value = parseInt(segment.label.replace('K', '000'))
+            setTotalWon(prev => prev + value)
+          }}
+        />
+
+        <div className="mt-6 pt-4 border-t flex justify-between items-center">
+          <div className="flex items-center gap-2">
+            <Flame className="h-4 w-4 text-orange-500" />
+            <span className="text-sm">{spinsLeft} spins remaining</span>
+          </div>
+          <button
+            onClick={() => setSpinsLeft(3)}
+            className="text-sm text-primary hover:underline"
+          >
+            Reset (Demo)
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const NoLabels: Story = {
+  render: () => (
+    <WakaSpinWheel segments={prizeSegments} showLabels={false} />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Disabled state - cannot spin
+      </p>
+      <WakaSpinWheel segments={sampleSegments} disabled />
+    </div>
+  ),
+}