@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-xp-bar/WakaXPBar.stories.tsx

@@ -0,0 +1,305 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaXPBar, useXPBar } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaXPBar> = {
+  title: 'Components/Gamification/WakaXPBar',
+  component: WakaXPBar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An experience points progress bar with particle effects, level badges, and celebratory animations.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    currentXP: {
+      control: { type: 'range', min: 0, max: 10000, step: 100 },
+      description: 'Current XP value',
+    },
+    requiredXP: {
+      control: { type: 'range', min: 1000, max: 20000, step: 1000 },
+      description: 'XP required for next level',
+    },
+    level: {
+      control: { type: 'number', min: 1, max: 100 },
+      description: 'Current level',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    showParticles: {
+      control: 'boolean',
+      description: 'Show particle effects',
+    },
+    showLevel: {
+      control: 'boolean',
+      description: 'Show level badge',
+    },
+    showXPCount: {
+      control: 'boolean',
+      description: 'Show XP count display',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaXPBar>
+
+export const Default: Story = {
+  args: {
+    currentXP: 2500,
+    requiredXP: 5000,
+    level: 5,
+    size: 'md',
+    showParticles: false,
+    showLevel: true,
+    showXPCount: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <WakaXPBar {...args} />
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaXPBar currentXP={1500} maxXP={3000} level={3} variant="default" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Gradient</p>
+        <WakaXPBar currentXP={2000} maxXP={3000} level={5} variant="gradient" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Glow</p>
+        <WakaXPBar currentXP={2800} maxXP={3000} level={8} variant="glow" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Minimal</p>
+        <WakaXPBar currentXP={1200} maxXP={3000} level={2} variant="minimal" />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaXPBar currentXP={1500} maxXP={3000} level={3} size="sm" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaXPBar currentXP={2000} maxXP={3000} level={5} size="md" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaXPBar currentXP={2500} maxXP={3000} level={8} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const ProgressStates: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Just Started (10%)</p>
+        <WakaXPBar currentXP={300} maxXP={3000} level={1} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Halfway (50%)</p>
+        <WakaXPBar currentXP={1500} maxXP={3000} level={5} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Almost There (90%)</p>
+        <WakaXPBar currentXP={2700} maxXP={3000} level={9} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Max Level Ready</p>
+        <WakaXPBar currentXP={3000} maxXP={3000} level={10} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithParticles: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">With Particles</p>
+        <WakaXPBar currentXP={2500} maxXP={3000} level={7} showParticles />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Without Particles</p>
+        <WakaXPBar currentXP={2500} maxXP={3000} level={7} showParticles={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [xp, setXp] = React.useState(1000)
+    const maxXP = 5000
+    const level = Math.floor(xp / 1000) + 1
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <WakaXPBar currentXP={xp} maxXP={maxXP} level={level} showParticles animated />
+        <div className="flex gap-2">
+          <button
+            onClick={() => setXp((prev) => Math.min(prev + 500, maxXP))}
+            className="px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90"
+          >
+            +500 XP
+          </button>
+          <button
+            onClick={() => setXp((prev) => Math.max(prev - 500, 0))}
+            className="px-4 py-2 rounded-lg bg-muted text-muted-foreground font-medium hover:bg-muted/80"
+          >
+            -500 XP
+          </button>
+          <button
+            onClick={() => setXp(0)}
+            className="px-4 py-2 rounded-lg border font-medium hover:bg-muted"
+          >
+            Reset
+          </button>
+        </div>
+        <p className="text-sm text-muted-foreground text-center">
+          Level {level} • {xp.toLocaleString()} / {maxXP.toLocaleString()} XP
+        </p>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { currentXP, maxXP, level, percentage, addXP, reset, levelUp } = useXPBar({
+      initialXP: 1500,
+      initialMaxXP: 3000,
+      initialLevel: 3,
+    })
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <WakaXPBar currentXP={currentXP} maxXP={maxXP} level={level} variant="gradient" showParticles />
+
+        <div className="grid grid-cols-3 gap-2 text-center">
+          <div className="p-3 rounded-lg border">
+            <p className="text-2xl font-bold">{level}</p>
+            <p className="text-xs text-muted-foreground">Level</p>
+          </div>
+          <div className="p-3 rounded-lg border">
+            <p className="text-2xl font-bold">{currentXP.toLocaleString()}</p>
+            <p className="text-xs text-muted-foreground">Current XP</p>
+          </div>
+          <div className="p-3 rounded-lg border">
+            <p className="text-2xl font-bold">{Math.round(percentage)}%</p>
+            <p className="text-xs text-muted-foreground">Progress</p>
+          </div>
+        </div>
+
+        <div className="flex gap-2 flex-wrap">
+          <button
+            onClick={() => addXP(100)}
+            className="px-3 py-1.5 text-sm rounded bg-green-500 text-white hover:bg-green-600"
+          >
+            +100 XP
+          </button>
+          <button
+            onClick={() => addXP(500)}
+            className="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600"
+          >
+            +500 XP
+          </button>
+          <button
+            onClick={levelUp}
+            className="px-3 py-1.5 text-sm rounded bg-purple-500 text-white hover:bg-purple-600"
+          >
+            Level Up
+          </button>
+          <button
+            onClick={reset}
+            className="px-3 py-1.5 text-sm rounded border hover:bg-muted"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const GamerProfile: Story = {
+  render: () => (
+    <div className="w-[450px] p-6 rounded-xl border bg-gradient-to-br from-background to-muted/30">
+      <div className="flex items-center gap-4 mb-6">
+        <div className="w-16 h-16 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl">
+          JD
+        </div>
+        <div>
+          <h3 className="text-xl font-bold">JaneDoe_42</h3>
+          <p className="text-sm text-muted-foreground">Legendary Player</p>
+        </div>
+        <div className="ml-auto text-right">
+          <p className="text-sm text-muted-foreground">Rank</p>
+          <p className="text-lg font-bold text-amber-500">#127</p>
+        </div>
+      </div>
+
+      <WakaXPBar currentXP={8750} maxXP={10000} level={42} variant="glow" showParticles />
+
+      <div className="mt-6 grid grid-cols-3 gap-4 text-center">
+        <div className="p-3 rounded-lg bg-muted/50">
+          <p className="text-2xl font-bold">1,247</p>
+          <p className="text-xs text-muted-foreground">Games Won</p>
+        </div>
+        <div className="p-3 rounded-lg bg-muted/50">
+          <p className="text-2xl font-bold">89%</p>
+          <p className="text-xs text-muted-foreground">Win Rate</p>
+        </div>
+        <div className="p-3 rounded-lg bg-muted/50">
+          <p className="text-2xl font-bold">156</p>
+          <p className="text-xs text-muted-foreground">Achievements</p>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaXPBar currentXP={2500} maxXP={5000} level={5} animated={false} showParticles={false} />
+    </div>
+  ),
+}
+
+export const CompactWidget: Story = {
+  render: () => (
+    <div className="w-[250px] p-4 rounded-lg border bg-card">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium">Your Progress</span>
+        <span className="text-xs text-muted-foreground">Lv. 12</span>
+      </div>
+      <WakaXPBar currentXP={2200} maxXP={3000} level={12} size="sm" variant="minimal" />
+    </div>
+  ),
+}