@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-leaderboard/WakaLeaderboard.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaLeaderboard, useLeaderboard } from './index'
+import type { LeaderboardEntry } from './index'
+import * as React from 'react'
+
+const sampleEntries: LeaderboardEntry[] = [
+  { id: '1', rank: 1, name: 'ProGamer123', score: 15420, avatar: 'https://i.pravatar.cc/100?img=1', change: 2, level: 45 },
+  { id: '2', rank: 2, name: 'SpeedRunner', score: 14890, avatar: 'https://i.pravatar.cc/100?img=2', change: -1, level: 42 },
+  { id: '3', rank: 3, name: 'NightOwl', score: 14350, avatar: 'https://i.pravatar.cc/100?img=3', change: 1, level: 41 },
+  { id: '4', rank: 4, name: 'CodeNinja', score: 13920, avatar: 'https://i.pravatar.cc/100?img=4', change: 0, level: 39 },
+  { id: '5', rank: 5, name: 'PixelMaster', score: 13500, avatar: 'https://i.pravatar.cc/100?img=5', change: -2, level: 38 },
+  { id: '6', rank: 6, name: 'SkyWalker42', score: 12890, avatar: 'https://i.pravatar.cc/100?img=6', change: 3, level: 36 },
+  { id: '7', rank: 7, name: 'ByteMe', score: 12450, avatar: 'https://i.pravatar.cc/100?img=7', change: 1, level: 35 },
+  { id: '8', rank: 8, name: 'FireStorm', score: 11980, avatar: 'https://i.pravatar.cc/100?img=8', change: -1, level: 34 },
+  { id: '9', rank: 9, name: 'CoolCat', score: 11500, avatar: 'https://i.pravatar.cc/100?img=9', change: 0, level: 32 },
+  { id: '10', rank: 10, name: 'ZeroHero', score: 11050, avatar: 'https://i.pravatar.cc/100?img=10', change: 2, level: 31 },
+]
+
+const meta: Meta<typeof WakaLeaderboard> = {
+  title: 'Components/Gamification/WakaLeaderboard',
+  component: WakaLeaderboard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A leaderboard component with podium display, rank changes, and animations for competitive gamification.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'compact', 'podium'],
+      description: 'Display variant',
+    },
+    showPodium: {
+      control: 'boolean',
+      description: 'Show podium for top 3',
+    },
+    showRankChange: {
+      control: 'boolean',
+      description: 'Show rank change indicators',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    highlightUserId: {
+      control: 'text',
+      description: 'ID of user to highlight',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLeaderboard>
+
+export const Default: Story = {
+  args: {
+    entries: sampleEntries,
+    variant: 'default',
+    showPodium: false,
+    showRankChange: false,
+    animated: true,
+  },
+  render: (args) => (
+    <div className="w-[450px]">
+      <WakaLeaderboard {...args} />
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <div className="w-[450px]">
+          <WakaLeaderboard entries={sampleEntries.slice(0, 5)} variant="default" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Compact</p>
+        <div className="w-[350px]">
+          <WakaLeaderboard entries={sampleEntries.slice(0, 5)} variant="compact" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Podium</p>
+        <div className="w-[500px]">
+          <WakaLeaderboard entries={sampleEntries.slice(0, 5)} variant="podium" showPodium />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithPodium: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaLeaderboard entries={sampleEntries} showPodium />
+    </div>
+  ),
+}
+
+export const WithRankChanges: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaLeaderboard entries={sampleEntries} showRankChange />
+    </div>
+  ),
+}
+
+export const HighlightCurrentUser: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaLeaderboard
+        entries={sampleEntries}
+        highlightUserId="5"
+        showRankChange
+      />
+    </div>
+  ),
+}
+
+export const TopThreeOnly: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaLeaderboard
+        entries={sampleEntries.slice(0, 3)}
+        showPodium
+        variant="podium"
+      />
+    </div>
+  ),
+}
+
+export const WithCustomScoreLabel: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaLeaderboard
+        entries={sampleEntries.map(e => ({ ...e, score: Math.round(e.score / 100) }))}
+        scoreLabel="Wins"
+        showRankChange
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [entries, setEntries] = React.useState(sampleEntries)
+
+    const shuffleScores = () => {
+      const shuffled = [...entries].map(entry => ({
+        ...entry,
+        score: entry.score + Math.floor(Math.random() * 1000) - 500,
+        change: Math.floor(Math.random() * 5) - 2,
+      })).sort((a, b) => b.score - a.score).map((entry, index) => ({
+        ...entry,
+        rank: index + 1,
+      }))
+      setEntries(shuffled)
+    }
+
+    return (
+      <div className="w-[450px] space-y-4">
+        <WakaLeaderboard entries={entries} showPodium showRankChange animated />
+        <button
+          onClick={shuffleScores}
+          className="w-full px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90"
+        >
+          Simulate Score Update
+        </button>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      entries,
+      updateScore,
+      getTopN,
+      getUserRank,
+      sortBy,
+    } = useLeaderboard({
+      initialEntries: sampleEntries,
+    })
+
+    return (
+      <div className="w-[500px] space-y-4">
+        <WakaLeaderboard entries={entries} showPodium showRankChange />
+
+        <div className="flex gap-2">
+          <button
+            onClick={() => updateScore('5', sampleEntries[4].score + 5000)}
+            className="px-3 py-1.5 text-sm rounded bg-green-500 text-white hover:bg-green-600"
+          >
+            Boost #5
+          </button>
+          <button
+            onClick={() => sortBy('level')}
+            className="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600"
+          >
+            Sort by Level
+          </button>
+          <button
+            onClick={() => sortBy('score')}
+            className="px-3 py-1.5 text-sm rounded border hover:bg-muted"
+          >
+            Sort by Score
+          </button>
+        </div>
+
+        <p className="text-sm text-muted-foreground">
+          PixelMaster's rank: #{getUserRank('5')}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const WeeklyLeaderboard: Story = {
+  render: () => (
+    <div className="w-[500px] p-6 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">Weekly Leaderboard</h2>
+          <p className="text-sm text-muted-foreground">Resets in 3 days</p>
+        </div>
+        <div className="flex gap-2">
+          <button className="px-3 py-1 text-sm rounded-full bg-primary text-primary-foreground">
+            This Week
+          </button>
+          <button className="px-3 py-1 text-sm rounded-full border hover:bg-muted">
+            All Time
+          </button>
+        </div>
+      </div>
+      <WakaLeaderboard
+        entries={sampleEntries}
+        showPodium
+        showRankChange
+        highlightUserId="7"
+      />
+    </div>
+  ),
+}
+
+export const TournamentStandings: Story = {
+  render: () => (
+    <div className="w-[550px] p-6 rounded-xl border bg-gradient-to-br from-amber-500/10 to-orange-500/10">
+      <div className="flex items-center gap-4 mb-6">
+        <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
+          <span className="text-2xl">🏆</span>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Summer Championship 2024</h2>
+          <p className="text-sm text-muted-foreground">Grand Finals - Round 3</p>
+        </div>
+      </div>
+      <WakaLeaderboard
+        entries={sampleEntries.slice(0, 8)}
+        showPodium
+        showRankChange
+        variant="podium"
+      />
+      <div className="mt-4 pt-4 border-t flex justify-between text-sm">
+        <span className="text-muted-foreground">Prize Pool: $10,000</span>
+        <span className="font-medium text-amber-500">16 Players Remaining</span>
+      </div>
+    </div>
+  ),
+}
+
+export const SmallWidget: Story = {
+  render: () => (
+    <div className="w-[280px] p-4 rounded-lg border">
+      <div className="flex items-center justify-between mb-3">
+        <h4 className="text-sm font-semibold">Top Players</h4>
+        <a href="#" className="text-xs text-primary hover:underline">View All</a>
+      </div>
+      <WakaLeaderboard
+        entries={sampleEntries.slice(0, 5)}
+        variant="compact"
+      />
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaLeaderboard entries={sampleEntries} animated={false} />
+    </div>
+  ),
+}

package/src/components/waka-level-progress/WakaLevelProgress.stories.tsx

@@ -0,0 +1,313 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaLevelProgress, useLevelProgress } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaLevelProgress> = {
+  title: 'Components/Gamification/WakaLevelProgress',
+  component: WakaLevelProgress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A level progress indicator with milestones, themes, and celebration effects for gamification.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    level: {
+      control: { type: 'number', min: 1, max: 100 },
+      description: 'Current level',
+    },
+    progress: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progress to next level (0-100)',
+    },
+    theme: {
+      control: 'select',
+      options: ['default', 'gold', 'silver', 'bronze', 'emerald', 'ruby'],
+      description: 'Color theme',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    showMilestones: {
+      control: 'boolean',
+      description: 'Show milestone markers',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLevelProgress>
+
+export const Default: Story = {
+  args: {
+    level: 15,
+    progress: 65,
+    theme: 'default',
+    size: 'md',
+    showMilestones: false,
+    animated: true,
+  },
+  render: (args) => (
+    <div className="w-[350px]">
+      <WakaLevelProgress {...args} />
+    </div>
+  ),
+}
+
+export const Themes: Story = {
+  render: () => (
+    <div className="w-[350px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaLevelProgress level={10} progress={50} theme="default" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Gold</p>
+        <WakaLevelProgress level={25} progress={75} theme="gold" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Silver</p>
+        <WakaLevelProgress level={15} progress={40} theme="silver" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Bronze</p>
+        <WakaLevelProgress level={5} progress={60} theme="bronze" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Emerald</p>
+        <WakaLevelProgress level={30} progress={85} theme="emerald" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Ruby</p>
+        <WakaLevelProgress level={50} progress={30} theme="ruby" />
+      </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>
+        <WakaLevelProgress level={8} progress={45} size="sm" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaLevelProgress level={15} progress={60} size="md" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaLevelProgress level={25} progress={80} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithMilestones: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">With Milestones</p>
+        <WakaLevelProgress level={12} progress={70} showMilestones />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Without Milestones</p>
+        <WakaLevelProgress level={12} progress={70} showMilestones={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const ProgressStages: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Just Started (10%)</p>
+        <WakaLevelProgress level={1} progress={10} theme="bronze" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Quarter Way (25%)</p>
+        <WakaLevelProgress level={5} progress={25} theme="silver" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Halfway (50%)</p>
+        <WakaLevelProgress level={10} progress={50} theme="default" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Almost There (90%)</p>
+        <WakaLevelProgress level={24} progress={90} theme="gold" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Max Level</p>
+        <WakaLevelProgress level={100} progress={100} theme="emerald" />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [level, setLevel] = React.useState(5)
+    const [progress, setProgress] = React.useState(30)
+
+    const gainXP = () => {
+      const newProgress = progress + 15
+      if (newProgress >= 100) {
+        setLevel((prev) => prev + 1)
+        setProgress(newProgress - 100)
+      } else {
+        setProgress(newProgress)
+      }
+    }
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <WakaLevelProgress level={level} progress={progress} theme="gold" showMilestones animated />
+
+        <div className="flex gap-2">
+          <button
+            onClick={gainXP}
+            className="flex-1 px-4 py-2 rounded-lg bg-amber-500 text-white font-medium hover:bg-amber-600"
+          >
+            Gain XP (+15%)
+          </button>
+          <button
+            onClick={() => { setLevel(5); setProgress(30) }}
+            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} • {progress}% to next level
+        </p>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      level,
+      progress,
+      addProgress,
+      levelUp,
+      reset,
+      canLevelUp,
+      progressToNextLevel,
+    } = useLevelProgress({
+      initialLevel: 10,
+      initialProgress: 45,
+    })
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <WakaLevelProgress level={level} progress={progress} theme="emerald" showMilestones />
+
+        <div className="grid grid-cols-2 gap-4 text-center">
+          <div className="p-3 rounded-lg border">
+            <p className="text-2xl font-bold">{level}</p>
+            <p className="text-xs text-muted-foreground">Current Level</p>
+          </div>
+          <div className="p-3 rounded-lg border">
+            <p className="text-2xl font-bold">{progressToNextLevel}%</p>
+            <p className="text-xs text-muted-foreground">To Next Level</p>
+          </div>
+        </div>
+
+        <div className="flex gap-2 flex-wrap">
+          <button
+            onClick={() => addProgress(10)}
+            className="px-3 py-1.5 text-sm rounded bg-green-500 text-white hover:bg-green-600"
+          >
+            +10%
+          </button>
+          <button
+            onClick={() => addProgress(25)}
+            className="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600"
+          >
+            +25%
+          </button>
+          <button
+            onClick={levelUp}
+            disabled={!canLevelUp}
+            className="px-3 py-1.5 text-sm rounded bg-amber-500 text-white hover:bg-amber-600 disabled:opacity-50"
+          >
+            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 RankSystem: Story = {
+  render: () => (
+    <div className="w-[450px] space-y-4">
+      <div className="p-4 rounded-xl border bg-gradient-to-r from-amber-900/20 to-yellow-900/20">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-yellow-600 flex items-center justify-center">
+            <span className="text-white font-bold text-sm">G</span>
+          </div>
+          <div>
+            <p className="font-bold text-amber-500">Gold Rank</p>
+            <p className="text-xs text-muted-foreground">Elite Player</p>
+          </div>
+        </div>
+        <WakaLevelProgress level={25} progress={78} theme="gold" showMilestones />
+      </div>
+
+      <div className="p-4 rounded-xl border bg-gradient-to-r from-slate-900/20 to-gray-900/20">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-400 to-gray-600 flex items-center justify-center">
+            <span className="text-white font-bold text-sm">S</span>
+          </div>
+          <div>
+            <p className="font-bold text-slate-400">Silver Rank</p>
+            <p className="text-xs text-muted-foreground">Skilled Player</p>
+          </div>
+        </div>
+        <WakaLevelProgress level={15} progress={45} theme="silver" showMilestones />
+      </div>
+
+      <div className="p-4 rounded-xl border bg-gradient-to-r from-orange-900/20 to-amber-900/20">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center">
+            <span className="text-white font-bold text-sm">B</span>
+          </div>
+          <div>
+            <p className="font-bold text-orange-500">Bronze Rank</p>
+            <p className="text-xs text-muted-foreground">Rising Player</p>
+          </div>
+        </div>
+        <WakaLevelProgress level={5} progress={20} theme="bronze" showMilestones />
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="w-[350px]">
+      <WakaLevelProgress level={15} progress={65} animated={false} />
+    </div>
+  ),
+}