@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-tournament-bracket/WakaTournamentBracket.stories.tsx

@@ -0,0 +1,375 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTournamentBracket, useTournamentBracket } from './index'
+import type { BracketRound, Match, Participant } from './index'
+import * as React from 'react'
+
+const participants: Participant[] = [
+  { id: '1', name: 'DragonSlayer', avatar: 'https://i.pravatar.cc/100?img=1', seed: 1 },
+  { id: '2', name: 'NightHawk', avatar: 'https://i.pravatar.cc/100?img=2', seed: 2 },
+  { id: '3', name: 'ShadowMage', avatar: 'https://i.pravatar.cc/100?img=3', seed: 3 },
+  { id: '4', name: 'BlazeFury', avatar: 'https://i.pravatar.cc/100?img=4', seed: 4 },
+  { id: '5', name: 'IceStorm', avatar: 'https://i.pravatar.cc/100?img=5', seed: 5 },
+  { id: '6', name: 'ThunderBolt', avatar: 'https://i.pravatar.cc/100?img=6', seed: 6 },
+  { id: '7', name: 'PhoenixRise', avatar: 'https://i.pravatar.cc/100?img=7', seed: 7 },
+  { id: '8', name: 'VoidWalker', avatar: 'https://i.pravatar.cc/100?img=8', seed: 8 },
+]
+
+const completedRounds: BracketRound[] = [
+  {
+    name: 'Quarter Finals',
+    matches: [
+      { id: 'qf1', round: 0, position: 0, participant1: participants[0], participant2: participants[7], score1: 3, score2: 1, status: 'completed', winnerId: '1' },
+      { id: 'qf2', round: 0, position: 1, participant1: participants[3], participant2: participants[4], score1: 2, score2: 3, status: 'completed', winnerId: '5' },
+      { id: 'qf3', round: 0, position: 2, participant1: participants[2], participant2: participants[5], score1: 3, score2: 0, status: 'completed', winnerId: '3' },
+      { id: 'qf4', round: 0, position: 3, participant1: participants[1], participant2: participants[6], score1: 3, score2: 2, status: 'completed', winnerId: '2' },
+    ],
+  },
+  {
+    name: 'Semi Finals',
+    matches: [
+      { id: 'sf1', round: 1, position: 0, participant1: participants[0], participant2: participants[4], score1: 3, score2: 2, status: 'completed', winnerId: '1' },
+      { id: 'sf2', round: 1, position: 1, participant1: participants[2], participant2: participants[1], score1: 1, score2: 3, status: 'completed', winnerId: '2' },
+    ],
+  },
+  {
+    name: 'Finals',
+    matches: [
+      { id: 'f1', round: 2, position: 0, participant1: participants[0], participant2: participants[1], score1: 3, score2: 2, status: 'completed', winnerId: '1' },
+    ],
+  },
+]
+
+const liveRounds: BracketRound[] = [
+  {
+    name: 'Quarter Finals',
+    matches: [
+      { id: 'qf1', round: 0, position: 0, participant1: participants[0], participant2: participants[7], score1: 3, score2: 1, status: 'completed', winnerId: '1' },
+      { id: 'qf2', round: 0, position: 1, participant1: participants[3], participant2: participants[4], score1: 2, score2: 3, status: 'completed', winnerId: '5' },
+      { id: 'qf3', round: 0, position: 2, participant1: participants[2], participant2: participants[5], score1: 2, score2: 1, status: 'in_progress' },
+      { id: 'qf4', round: 0, position: 3, participant1: participants[1], participant2: participants[6], status: 'pending' },
+    ],
+  },
+  {
+    name: 'Semi Finals',
+    matches: [
+      { id: 'sf1', round: 1, position: 0, participant1: participants[0], participant2: participants[4], status: 'pending' },
+      { id: 'sf2', round: 1, position: 1, status: 'pending' },
+    ],
+  },
+  {
+    name: 'Finals',
+    matches: [
+      { id: 'f1', round: 2, position: 0, status: 'pending' },
+    ],
+  },
+]
+
+const meta: Meta<typeof WakaTournamentBracket> = {
+  title: 'Components/Gamification/WakaTournamentBracket',
+  component: WakaTournamentBracket,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A tournament bracket visualization with zoom/pan, winner path highlighting, match details popover, and celebration effects.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Match card size',
+    },
+    enableZoomPan: {
+      control: 'boolean',
+      description: 'Enable zoom and pan controls',
+    },
+    showTimes: {
+      control: 'boolean',
+      description: 'Show scheduled match times',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTournamentBracket>
+
+export const Default: Story = {
+  args: {
+    title: 'Summer Championship 2024',
+    rounds: completedRounds,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaTournamentBracket {...args} />
+    </div>
+  ),
+}
+
+export const LiveTournament: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaTournamentBracket
+        title="Live Tournament"
+        rounds={liveRounds}
+      />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaTournamentBracket
+          title="Small Bracket"
+          rounds={completedRounds}
+          size="sm"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaTournamentBracket
+          title="Default Bracket"
+          rounds={completedRounds}
+          size="default"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaTournamentBracket
+          title="Large Bracket"
+          rounds={completedRounds}
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithScheduledTimes: Story = {
+  render: () => {
+    const scheduledRounds: BracketRound[] = liveRounds.map(round => ({
+      ...round,
+      matches: round.matches.map(match => ({
+        ...match,
+        scheduledAt: new Date(Date.now() + Math.random() * 24 * 60 * 60 * 1000),
+      })),
+    }))
+
+    return (
+      <div className="p-6">
+        <WakaTournamentBracket
+          title="Scheduled Tournament"
+          rounds={scheduledRounds}
+          showTimes
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedMatch, setSelectedMatch] = React.useState<Match | null>(null)
+
+    return (
+      <div className="p-6">
+        <WakaTournamentBracket
+          title="Interactive Tournament"
+          rounds={liveRounds}
+          onMatchClick={(match) => setSelectedMatch(match)}
+          onMatchHover={(match) => console.log('Hovered:', match?.id)}
+        />
+
+        {selectedMatch && (
+          <div className="fixed bottom-4 right-4 p-4 rounded-lg border bg-card shadow-lg max-w-xs">
+            <h4 className="font-semibold mb-2">Selected Match</h4>
+            <div className="text-sm space-y-1">
+              <div>ID: {selectedMatch.id}</div>
+              <div>Status: {selectedMatch.status}</div>
+              <div>
+                {selectedMatch.participant1?.name || 'TBD'} vs {selectedMatch.participant2?.name || 'TBD'}
+              </div>
+              {selectedMatch.status === 'completed' && (
+                <div className="font-medium text-green-500">
+                  Winner: {selectedMatch.winnerId === selectedMatch.participant1?.id
+                    ? selectedMatch.participant1?.name
+                    : selectedMatch.participant2?.name}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      rounds,
+      startMatch,
+      completeMatch,
+      currentMatch,
+      winner,
+      resetBracket,
+    } = useTournamentBracket({
+      participants: participants.slice(0, 4),
+    })
+
+    return (
+      <div className="p-6">
+        <WakaTournamentBracket
+          title="Generated Bracket"
+          rounds={rounds}
+        />
+
+        <div className="fixed bottom-4 left-4 p-4 rounded-lg border bg-card shadow-lg">
+          <h4 className="font-semibold mb-2">Controls</h4>
+          {currentMatch && (
+            <div className="text-sm mb-3">
+              <div>Current Match: {currentMatch.id}</div>
+              <div>
+                {currentMatch.participant1?.name} vs {currentMatch.participant2?.name}
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-wrap gap-2">
+            {currentMatch && currentMatch.status === 'pending' && (
+              <button
+                onClick={() => startMatch(currentMatch.id)}
+                className="px-3 py-1.5 text-xs rounded bg-primary text-primary-foreground"
+              >
+                Start Match
+              </button>
+            )}
+            {currentMatch && currentMatch.status === 'in_progress' && (
+              <>
+                <button
+                  onClick={() => completeMatch(currentMatch.id, 3, 1)}
+                  className="px-3 py-1.5 text-xs rounded bg-green-500 text-white"
+                >
+                  P1 Wins (3-1)
+                </button>
+                <button
+                  onClick={() => completeMatch(currentMatch.id, 1, 3)}
+                  className="px-3 py-1.5 text-xs rounded bg-blue-500 text-white"
+                >
+                  P2 Wins (1-3)
+                </button>
+              </>
+            )}
+            <button
+              onClick={() => resetBracket()}
+              className="px-3 py-1.5 text-xs rounded border hover:bg-muted"
+            >
+              Reset
+            </button>
+          </div>
+
+          {winner && (
+            <div className="mt-3 pt-3 border-t text-center">
+              <span className="text-amber-500 font-bold">
+                Champion: {winner.name}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const SixteenTeams: Story = {
+  render: () => {
+    const allParticipants: Participant[] = Array.from({ length: 16 }, (_, i) => ({
+      id: `p${i + 1}`,
+      name: `Team ${i + 1}`,
+      seed: i + 1,
+    }))
+
+    const { rounds } = useTournamentBracket({
+      participants: allParticipants,
+    })
+
+    // Simulate some completed matches
+    const simulatedRounds = rounds.map((round, rIdx) => ({
+      ...round,
+      matches: round.matches.map((match, mIdx) => {
+        if (rIdx === 0 && mIdx < 4) {
+          return {
+            ...match,
+            score1: Math.floor(Math.random() * 3) + 1,
+            score2: Math.floor(Math.random() * 2),
+            status: 'completed' as const,
+            winnerId: match.participant1?.id,
+          }
+        }
+        return match
+      }),
+    }))
+
+    return (
+      <div className="p-6">
+        <WakaTournamentBracket
+          title="16-Team Championship"
+          rounds={simulatedRounds}
+          size="sm"
+        />
+      </div>
+    )
+  },
+}
+
+export const NoZoomPan: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaTournamentBracket
+        title="Static Bracket"
+        rounds={completedRounds}
+        enableZoomPan={false}
+      />
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaTournamentBracket
+        title="No Animation"
+        rounds={completedRounds}
+        animated={false}
+      />
+    </div>
+  ),
+}
+
+export const EsportsStyled: Story = {
+  render: () => (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-white mb-2">World Championship 2024</h1>
+          <p className="text-purple-300">Grand Finals • $100,000 Prize Pool</p>
+        </div>
+
+        <WakaTournamentBracket
+          title=""
+          rounds={completedRounds}
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}