@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-player-card/WakaPlayerCard.stories.tsx

@@ -0,0 +1,333 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaPlayerCard } from './index'
+import type { Player, PlayerRarity } from './index'
+import * as React from 'react'
+import { Swords, Shield, Heart, Zap, Crown, Star, Flame } from 'lucide-react'
+
+const samplePlayer: Player = {
+  id: '1',
+  name: 'DragonSlayer99',
+  avatar: 'https://i.pravatar.cc/150?img=1',
+  title: 'Master of Fire',
+  level: 42,
+  rarity: 'legendary',
+  stats: [
+    { name: 'ATK', value: 850, max: 1000 },
+    { name: 'DEF', value: 720, max: 1000 },
+    { name: 'SPD', value: 680, max: 1000 },
+  ],
+  achievements: 156,
+  joinedAt: new Date('2022-03-15'),
+}
+
+const playersByRarity: Record<PlayerRarity, Player> = {
+  common: {
+    id: 'common-1',
+    name: 'Rookie123',
+    avatar: 'https://i.pravatar.cc/150?img=10',
+    title: 'Beginner',
+    level: 5,
+    rarity: 'common',
+    stats: [
+      { name: 'ATK', value: 120, max: 1000 },
+      { name: 'DEF', value: 100, max: 1000 },
+      { name: 'SPD', value: 150, max: 1000 },
+    ],
+    achievements: 3,
+  },
+  rare: {
+    id: 'rare-1',
+    name: 'BladeRunner',
+    avatar: 'https://i.pravatar.cc/150?img=12',
+    title: 'Swift Striker',
+    level: 18,
+    rarity: 'rare',
+    stats: [
+      { name: 'ATK', value: 350, max: 1000 },
+      { name: 'DEF', value: 280, max: 1000 },
+      { name: 'SPD', value: 420, max: 1000 },
+    ],
+    achievements: 24,
+  },
+  epic: {
+    id: 'epic-1',
+    name: 'ShadowMage',
+    avatar: 'https://i.pravatar.cc/150?img=15',
+    title: 'Arcane Master',
+    level: 35,
+    rarity: 'epic',
+    stats: [
+      { name: 'ATK', value: 620, max: 1000 },
+      { name: 'DEF', value: 450, max: 1000 },
+      { name: 'SPD', value: 580, max: 1000 },
+    ],
+    achievements: 87,
+  },
+  legendary: samplePlayer,
+  mythic: {
+    id: 'mythic-1',
+    name: 'CosmicOverlord',
+    avatar: 'https://i.pravatar.cc/150?img=20',
+    title: 'Dimensional Conqueror',
+    level: 100,
+    rarity: 'mythic',
+    stats: [
+      { name: 'ATK', value: 999, max: 1000 },
+      { name: 'DEF', value: 950, max: 1000 },
+      { name: 'SPD', value: 980, max: 1000 },
+    ],
+    achievements: 500,
+    joinedAt: new Date('2021-01-01'),
+  },
+}
+
+const meta: Meta<typeof WakaPlayerCard> = {
+  title: 'Components/Gamification/WakaPlayerCard',
+  component: WakaPlayerCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A collectible player card with rarity tiers, holographic effects, stats display, and flip animation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'compact', 'full'],
+      description: 'Card display variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Card size',
+    },
+    showBack: {
+      control: 'boolean',
+      description: 'Enable flip to show back side',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations and effects',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPlayerCard>
+
+export const Default: Story = {
+  args: {
+    player: samplePlayer,
+    variant: 'default',
+    size: 'md',
+    showStats: true,
+    showHolographic: true,
+    flippable: true,
+    animated: true,
+  },
+  render: (args) => <WakaPlayerCard {...args} />,
+}
+
+export const Rarities: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-6 items-start">
+      {(['common', 'rare', 'epic', 'legendary', 'mythic'] as PlayerRarity[]).map((rarity) => (
+        <div key={rarity} className="text-center">
+          <p className="text-sm text-muted-foreground mb-2 capitalize">{rarity}</p>
+          <WakaPlayerCard player={playersByRarity[rarity]} size="sm" />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default (with flip)</p>
+        <WakaPlayerCard player={samplePlayer} showBack />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Compact</p>
+        <div className="w-[350px]">
+          <WakaPlayerCard player={samplePlayer} variant="compact" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Full</p>
+        <div className="w-[400px]">
+          <WakaPlayerCard player={samplePlayer} variant="full" />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-6 items-end">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaPlayerCard player={samplePlayer} size="sm" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Medium</p>
+        <WakaPlayerCard player={samplePlayer} size="md" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaPlayerCard player={samplePlayer} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithFlip: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">Click the card to flip it</p>
+      <div className="flex gap-6">
+        <WakaPlayerCard player={playersByRarity.epic} showBack />
+        <WakaPlayerCard player={playersByRarity.legendary} showBack />
+        <WakaPlayerCard player={playersByRarity.mythic} showBack />
+      </div>
+    </div>
+  ),
+}
+
+export const HolographicEffects: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Move your mouse over the legendary and mythic cards to see holographic effects
+      </p>
+      <div className="flex gap-6">
+        <WakaPlayerCard player={playersByRarity.legendary} />
+        <WakaPlayerCard player={playersByRarity.mythic} />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedPlayer, setSelectedPlayer] = React.useState<Player | null>(null)
+
+    return (
+      <div className="space-y-6">
+        <div className="flex flex-wrap gap-4">
+          {Object.values(playersByRarity).map((player) => (
+            <WakaPlayerCard
+              key={player.id}
+              player={player}
+              size="sm"
+              onClick={() => setSelectedPlayer(player)}
+            />
+          ))}
+        </div>
+
+        {selectedPlayer && (
+          <div className="p-4 rounded-lg border bg-muted/30">
+            <h4 className="font-semibold mb-2">Selected Player</h4>
+            <div className="grid grid-cols-2 gap-2 text-sm">
+              <div>Name: {selectedPlayer.name}</div>
+              <div>Level: {selectedPlayer.level}</div>
+              <div>Rarity: {selectedPlayer.rarity}</div>
+              <div>Achievements: {selectedPlayer.achievements}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const CompactCollection: Story = {
+  render: () => (
+    <div className="w-[500px] p-4 rounded-xl border bg-card">
+      <h3 className="font-semibold mb-4">My Collection</h3>
+      <div className="space-y-3">
+        {Object.values(playersByRarity).map((player) => (
+          <WakaPlayerCard
+            key={player.id}
+            player={player}
+            variant="compact"
+          />
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const FullCardShowcase: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaPlayerCard player={playersByRarity.mythic} variant="full" />
+    </div>
+  ),
+}
+
+export const TeamRoster: Story = {
+  render: () => (
+    <div className="w-[600px] p-6 rounded-xl border bg-gradient-to-br from-violet-500/10 to-purple-500/10">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">Elite Squad</h2>
+          <p className="text-sm text-muted-foreground">5 Members • Power: 4,250</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Crown className="h-5 w-5 text-amber-500" />
+          <span className="font-semibold">Rank #12</span>
+        </div>
+      </div>
+
+      <div className="flex justify-center gap-4">
+        {[playersByRarity.mythic, playersByRarity.legendary, playersByRarity.epic].map((player) => (
+          <WakaPlayerCard key={player.id} player={player} size="sm" />
+        ))}
+      </div>
+
+      <div className="mt-6 pt-4 border-t">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Team Average Level</span>
+          <span className="font-medium">Level 59</span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomBackContent: Story = {
+  render: () => (
+    <WakaPlayerCard
+      player={samplePlayer}
+      showBack
+      backContent={
+        <div className="h-full flex flex-col items-center justify-center p-4 text-center">
+          <Flame className="h-8 w-8 text-orange-500 mb-2" />
+          <h4 className="font-bold text-lg">Special Ability</h4>
+          <p className="text-sm text-muted-foreground mt-1">Dragon's Breath</p>
+          <p className="text-xs text-muted-foreground mt-2">
+            Deals 500% damage to all enemies in a cone
+          </p>
+          <div className="mt-4 px-3 py-1 rounded-full bg-orange-500/10 text-orange-500 text-xs font-medium">
+            5 Turn Cooldown
+          </div>
+        </div>
+      }
+    />
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <WakaPlayerCard player={playersByRarity.legendary} animated={false} />
+      <WakaPlayerCard player={playersByRarity.mythic} animated={false} />
+    </div>
+  ),
+}