@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-quest-card/WakaQuestCard.stories.tsx

@@ -0,0 +1,394 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaQuestCard, WakaQuestList, WakaQuestCardSkeleton, useQuests } from './index'
+import type { Quest, QuestObjective, QuestReward } from './index'
+import * as React from 'react'
+import { Sword, Shield, Target, Gem, Star, Trophy } from 'lucide-react'
+
+const sampleQuest: Quest = {
+  id: 'quest-1',
+  title: 'Dragon Slayer',
+  description: 'Defeat the ancient dragon terrorizing the village and claim your reward.',
+  type: 'story',
+  difficulty: 'hard',
+  objectives: [
+    { id: 'obj-1', text: 'Find the dragon\'s lair', completed: true },
+    { id: 'obj-2', text: 'Defeat the dragon', completed: false, current: 0, target: 1 },
+    { id: 'obj-3', text: 'Collect dragon scales', completed: false, current: 3, target: 5 },
+  ],
+  rewards: [
+    { type: 'xp', value: 500 },
+    { type: 'badge', value: 'Dragon Slayer' },
+    { type: 'item', value: 'Dragon Sword' },
+  ],
+  progress: 40,
+  status: 'in_progress',
+  expiresAt: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
+}
+
+const questTypes: Quest[] = [
+  {
+    id: 'daily-1',
+    title: 'Daily Login',
+    description: 'Log in to the app today.',
+    type: 'daily',
+    difficulty: 'easy',
+    objectives: [{ id: 'obj-1', text: 'Log in', completed: true }],
+    rewards: [{ type: 'xp', value: 50 }],
+    progress: 100,
+    status: 'completed',
+  },
+  {
+    id: 'weekly-1',
+    title: 'Weekly Warrior',
+    description: 'Complete 10 battles this week.',
+    type: 'weekly',
+    difficulty: 'medium',
+    objectives: [{ id: 'obj-1', text: 'Complete battles', completed: false, current: 7, target: 10 }],
+    rewards: [{ type: 'xp', value: 200 }, { type: 'currency', value: 500 }],
+    progress: 70,
+    status: 'in_progress',
+    expiresAt: new Date(Date.now() + 4 * 24 * 60 * 60 * 1000),
+  },
+  {
+    id: 'challenge-1',
+    title: 'Speed Run',
+    description: 'Complete a level in under 60 seconds.',
+    type: 'challenge',
+    difficulty: 'legendary',
+    objectives: [{ id: 'obj-1', text: 'Beat the clock', completed: false }],
+    rewards: [{ type: 'badge', value: 'Speed Demon' }],
+    progress: 0,
+    status: 'available',
+  },
+  {
+    id: 'achievement-1',
+    title: 'First Blood',
+    description: 'Win your first PvP battle.',
+    type: 'achievement',
+    difficulty: 'easy',
+    objectives: [{ id: 'obj-1', text: 'Win a PvP battle', completed: true }],
+    rewards: [{ type: 'badge', value: 'Fighter' }, { type: 'xp', value: 100 }],
+    progress: 100,
+    status: 'claimed',
+  },
+]
+
+const meta: Meta<typeof WakaQuestCard> = {
+  title: 'Components/Gamification/WakaQuestCard',
+  component: WakaQuestCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A quest card with objectives tracking, progress bar, difficulty indicators, rewards display, and celebration effects.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['compact', 'detailed'],
+      description: 'Display variant',
+    },
+    showAbandonConfirm: {
+      control: 'boolean',
+      description: 'Show abandon confirmation dialog',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaQuestCard>
+
+export const Default: Story = {
+  args: {
+    quest: sampleQuest,
+    variant: 'default',
+    showProgress: true,
+    showRewards: true,
+    showTimer: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div className="w-[450px]">
+      <WakaQuestCard {...args} />
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Detailed (Default)</p>
+        <div className="w-[450px]">
+          <WakaQuestCard quest={sampleQuest} variant="detailed" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Compact</p>
+        <div className="w-[350px]">
+          <WakaQuestCard quest={sampleQuest} variant="compact" />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const QuestTypes: Story = {
+  render: () => (
+    <div className="space-y-4 w-[450px]">
+      {questTypes.map((quest) => (
+        <WakaQuestCard key={quest.id} quest={quest} variant="compact" />
+      ))}
+    </div>
+  ),
+}
+
+export const DifficultyLevels: Story = {
+  render: () => {
+    const difficulties: Quest['difficulty'][] = ['easy', 'medium', 'hard', 'legendary']
+
+    return (
+      <div className="grid grid-cols-2 gap-4 w-[800px]">
+        {difficulties.map((difficulty) => (
+          <WakaQuestCard
+            key={difficulty}
+            quest={{
+              ...sampleQuest,
+              id: difficulty,
+              difficulty,
+              title: `${difficulty.charAt(0).toUpperCase() + difficulty.slice(1)} Quest`,
+            }}
+            variant="compact"
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const QuestStatuses: Story = {
+  render: () => {
+    const statuses: Quest['status'][] = ['available', 'in_progress', 'completed', 'claimed', 'expired']
+
+    return (
+      <div className="space-y-4 w-[450px]">
+        {statuses.map((status) => (
+          <WakaQuestCard
+            key={status}
+            quest={{
+              ...sampleQuest,
+              id: status,
+              status,
+              title: `Quest - ${status.replace('_', ' ')}`,
+              progress: status === 'completed' || status === 'claimed' ? 100 : sampleQuest.progress,
+              expiresAt: status === 'expired' ? new Date(Date.now() - 1000) : sampleQuest.expiresAt,
+            }}
+            variant="compact"
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const WithCountdown: Story = {
+  render: () => {
+    const urgentQuest: Quest = {
+      ...sampleQuest,
+      expiresAt: new Date(Date.now() + 30 * 60 * 1000), // 30 minutes
+    }
+
+    return (
+      <div className="w-[450px] space-y-4">
+        <p className="text-sm text-muted-foreground">Urgent quest - expires in 30 minutes</p>
+        <WakaQuestCard quest={urgentQuest} />
+      </div>
+    )
+  },
+}
+
+export const CompletedWithClaim: Story = {
+  render: () => {
+    const completedQuest: Quest = {
+      ...sampleQuest,
+      status: 'completed',
+      progress: 100,
+      objectives: sampleQuest.objectives.map(obj => ({ ...obj, completed: true })),
+    }
+
+    return (
+      <div className="w-[450px]">
+        <WakaQuestCard
+          quest={completedQuest}
+          onClaim={(id) => console.log('Claimed:', id)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [quest, setQuest] = React.useState<Quest>({
+      ...sampleQuest,
+      objectives: [
+        { id: 'obj-1', text: 'Kill 10 enemies', completed: false, current: 0, target: 10 },
+        { id: 'obj-2', text: 'Collect 5 gems', completed: false, current: 0, target: 5 },
+        { id: 'obj-3', text: 'Find the treasure', completed: false },
+      ],
+      progress: 0,
+      status: 'in_progress',
+    })
+
+    const incrementProgress = (objectiveId: string) => {
+      setQuest(prev => {
+        const newObjectives = prev.objectives.map(obj => {
+          if (obj.id !== objectiveId) return obj
+          if (obj.target !== undefined && obj.current !== undefined) {
+            const newCurrent = Math.min(obj.target, obj.current + 1)
+            return { ...obj, current: newCurrent, completed: newCurrent >= obj.target }
+          }
+          return { ...obj, completed: true }
+        })
+
+        const completedCount = newObjectives.filter(o => o.completed).length
+        const progress = (completedCount / newObjectives.length) * 100
+        const allComplete = completedCount === newObjectives.length
+
+        return {
+          ...prev,
+          objectives: newObjectives,
+          progress,
+          status: allComplete ? 'completed' : 'in_progress',
+        }
+      })
+    }
+
+    return (
+      <div className="w-[450px] space-y-4">
+        <WakaQuestCard
+          quest={quest}
+          onObjectiveClick={(_, objId) => incrementProgress(objId)}
+          onClaim={(id) => setQuest(prev => ({ ...prev, status: 'claimed' }))}
+        />
+
+        <div className="p-4 rounded-lg border text-sm">
+          <p className="text-muted-foreground mb-2">Click on objectives to progress them</p>
+          <div className="flex gap-2">
+            {quest.objectives.map(obj => (
+              <button
+                key={obj.id}
+                onClick={() => incrementProgress(obj.id)}
+                disabled={obj.completed}
+                className="px-2 py-1 text-xs rounded bg-muted hover:bg-muted/80 disabled:opacity-50"
+              >
+                +1 {obj.text.split(' ')[0]}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      quests,
+      updateObjective,
+      incrementObjective,
+      claimQuest,
+      activeQuests,
+      completedQuests,
+    } = useQuests({
+      initialQuests: questTypes,
+      onQuestComplete: (quest) => console.log('Completed:', quest.title),
+      onQuestClaimed: (quest) => console.log('Claimed:', quest.title),
+    })
+
+    return (
+      <div className="w-[500px] space-y-6">
+        <div>
+          <div className="flex justify-between items-center mb-3">
+            <h3 className="font-semibold">Active Quests ({activeQuests.length})</h3>
+          </div>
+          <WakaQuestList
+            quests={activeQuests}
+            variant="compact"
+            onClaim={claimQuest}
+            onObjectiveClick={updateObjective}
+          />
+        </div>
+
+        <div>
+          <h3 className="font-semibold mb-3">Completed ({completedQuests.length})</h3>
+          <WakaQuestList
+            quests={completedQuests}
+            variant="compact"
+            onClaim={claimQuest}
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const QuestList: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <h3 className="font-semibold mb-4">Available Quests</h3>
+      <WakaQuestList
+        quests={questTypes}
+        variant="compact"
+        onClaim={(id) => console.log('Claimed:', id)}
+      />
+    </div>
+  ),
+}
+
+export const EmptyList: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaQuestList
+        quests={[]}
+        emptyMessage="No quests available right now. Check back later!"
+      />
+    </div>
+  ),
+}
+
+export const Skeleton: Story = {
+  render: () => (
+    <div className="space-y-4 w-[450px]">
+      <WakaQuestCardSkeleton variant="detailed" />
+      <WakaQuestCardSkeleton variant="compact" />
+      <WakaQuestCardSkeleton variant="compact" />
+    </div>
+  ),
+}
+
+export const QuestJournal: Story = {
+  render: () => (
+    <div className="w-[550px] p-6 rounded-xl border bg-gradient-to-br from-amber-500/5 to-orange-500/5">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
+          <Trophy className="h-5 w-5 text-white" />
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Quest Journal</h2>
+          <p className="text-sm text-muted-foreground">3 active • 12 completed</p>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {questTypes.filter(q => q.status !== 'claimed').map(quest => (
+          <WakaQuestCard key={quest.id} quest={quest} variant="compact" />
+        ))}
+      </div>
+    </div>
+  ),
+}