@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/on-call-schedule/OnCallSchedule.stories.tsx

@@ -0,0 +1,381 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { OnCallScheduleBlock, defaultOnCallSchedule } from './index'
+import type { OnCallSchedule, OnCallUser, OnCallShift, EscalationLevel } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof OnCallScheduleBlock> = {
+  title: 'Blocks/OnCallSchedule',
+  component: OnCallScheduleBlock,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'An on-call schedule component with weekly view, escalation policies, team members, current on-call status, and shift management.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof OnCallScheduleBlock>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <OnCallScheduleBlock
+        schedule={defaultOnCallSchedule}
+        onEditSchedule={() => console.log('Edit schedule')}
+        onAddOverride={(date) => console.log('Add override:', date)}
+        onSwapShift={(shift) => console.log('Swap shift:', shift)}
+        onContactOnCall={(user) => console.log('Contact:', user)}
+      />
+    </div>
+  ),
+}
+
+export const CurrentlyOnCall: Story = {
+  render: () => {
+    // Ensure someone is currently on call
+    const now = new Date()
+    const currentShift: OnCallShift = {
+      id: 'current-shift',
+      user: defaultOnCallSchedule.users[0],
+      startTime: new Date(now.getTime() - 4 * 3600000), // Started 4 hours ago
+      endTime: new Date(now.getTime() + 8 * 3600000), // Ends in 8 hours
+      level: 1,
+    }
+
+    const scheduleWithCurrent: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      shifts: [currentShift, ...defaultOnCallSchedule.shifts],
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock
+          schedule={scheduleWithCurrent}
+          onContactOnCall={(user) => alert(`Calling ${user.name}...`)}
+        />
+      </div>
+    )
+  },
+}
+
+export const NoCurrentOnCall: Story = {
+  render: () => {
+    // All shifts in the future
+    const futureShifts: OnCallShift[] = defaultOnCallSchedule.shifts.map(shift => ({
+      ...shift,
+      startTime: new Date(Date.now() + 24 * 3600000),
+      endTime: new Date(Date.now() + 48 * 3600000),
+    }))
+
+    const scheduleNoOnCall: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      shifts: futureShifts,
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock schedule={scheduleNoOnCall} />
+      </div>
+    )
+  },
+}
+
+export const WithOverride: Story = {
+  render: () => {
+    const now = new Date()
+    const overrideShift: OnCallShift = {
+      id: 'override-shift',
+      user: defaultOnCallSchedule.users[2],
+      startTime: new Date(now.getTime() - 2 * 3600000),
+      endTime: new Date(now.getTime() + 10 * 3600000),
+      level: 1,
+      overrideReason: 'Covering for John who is on PTO',
+    }
+
+    const scheduleWithOverride: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      shifts: [overrideShift, ...defaultOnCallSchedule.shifts],
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock
+          schedule={scheduleWithOverride}
+          onContactOnCall={(user) => console.log('Contact:', user)}
+        />
+      </div>
+    )
+  },
+}
+
+export const DifferentRotations: Story = {
+  render: () => {
+    const weeklySchedule: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      name: 'Backend Team On-Call',
+      team: 'Backend Engineering',
+      rotation: 'weekly',
+    }
+
+    const dailySchedule: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      id: 'daily',
+      name: 'Frontend Team On-Call',
+      team: 'Frontend Engineering',
+      rotation: 'daily',
+    }
+
+    return (
+      <div className="p-6 space-y-8">
+        <OnCallScheduleBlock schedule={weeklySchedule} />
+        <OnCallScheduleBlock schedule={dailySchedule} />
+      </div>
+    )
+  },
+}
+
+export const MultipleEscalationLevels: Story = {
+  render: () => {
+    const now = new Date()
+    const multiLevelShifts: OnCallShift[] = [
+      {
+        id: 'level1-shift',
+        user: defaultOnCallSchedule.users[0],
+        startTime: new Date(now.getTime() - 4 * 3600000),
+        endTime: new Date(now.getTime() + 8 * 3600000),
+        level: 1,
+      },
+      {
+        id: 'level2-shift',
+        user: defaultOnCallSchedule.users[1],
+        startTime: new Date(now.getTime() - 4 * 3600000),
+        endTime: new Date(now.getTime() + 8 * 3600000),
+        level: 2,
+      },
+      {
+        id: 'level3-shift',
+        user: defaultOnCallSchedule.users[2],
+        startTime: new Date(now.getTime() - 4 * 3600000),
+        endTime: new Date(now.getTime() + 8 * 3600000),
+        level: 3,
+      },
+    ]
+
+    const multiLevelSchedule: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      shifts: [...multiLevelShifts, ...defaultOnCallSchedule.shifts],
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock
+          schedule={multiLevelSchedule}
+          onContactOnCall={(user) => console.log('Contact:', user)}
+        />
+      </div>
+    )
+  },
+}
+
+export const SmallTeam: Story = {
+  render: () => {
+    const smallTeam: OnCallUser[] = [
+      { id: '1', name: 'Alice', email: 'alice@example.com', phone: '+1 555-0101', status: 'available' },
+      { id: '2', name: 'Bob', email: 'bob@example.com', phone: '+1 555-0102', status: 'available' },
+    ]
+
+    const now = new Date()
+    const smallTeamShifts: OnCallShift[] = [
+      {
+        id: 's1',
+        user: smallTeam[0],
+        startTime: new Date(now.getTime() - 2 * 3600000),
+        endTime: new Date(now.getTime() + 22 * 3600000),
+        level: 1,
+      },
+    ]
+
+    const smallTeamSchedule: OnCallSchedule = {
+      id: 'small-team',
+      name: 'Startup On-Call',
+      team: 'Engineering',
+      rotation: 'daily',
+      escalationPolicy: {
+        level1Timeout: 10,
+        level2Timeout: 20,
+        level3Timeout: 30,
+      },
+      shifts: smallTeamShifts,
+      users: smallTeam,
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock schedule={smallTeamSchedule} />
+      </div>
+    )
+  },
+}
+
+export const LargeTeam: Story = {
+  render: () => {
+    const largeTeam: OnCallUser[] = Array.from({ length: 12 }, (_, i) => ({
+      id: `user-${i + 1}`,
+      name: `Team Member ${i + 1}`,
+      email: `member${i + 1}@example.com`,
+      phone: `+1 555-${String(i + 1).padStart(4, '0')}`,
+      status: (['available', 'busy', 'available', 'offline'] as const)[i % 4],
+      timezone: ['America/New_York', 'America/Los_Angeles', 'Europe/London', 'Asia/Tokyo'][i % 4],
+    }))
+
+    const largeTeamSchedule: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      name: 'Global Support Team',
+      team: 'Customer Support',
+      users: largeTeam,
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock schedule={largeTeamSchedule} />
+      </div>
+    )
+  },
+}
+
+export const DifferentUserStatuses: Story = {
+  render: () => {
+    const usersWithStatuses: OnCallUser[] = [
+      { id: '1', name: 'John (Available)', email: 'john@example.com', status: 'available' },
+      { id: '2', name: 'Jane (Busy)', email: 'jane@example.com', status: 'busy' },
+      { id: '3', name: 'Bob (DND)', email: 'bob@example.com', status: 'dnd' },
+      { id: '4', name: 'Alice (Offline)', email: 'alice@example.com', status: 'offline' },
+    ]
+
+    const statusSchedule: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      users: usersWithStatuses,
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock schedule={statusSchedule} />
+      </div>
+    )
+  },
+}
+
+export const CustomEscalationPolicy: Story = {
+  render: () => {
+    const criticalSchedule: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      name: 'Critical Infrastructure',
+      team: 'SRE',
+      escalationPolicy: {
+        level1Timeout: 5,  // Very fast escalation
+        level2Timeout: 10,
+        level3Timeout: 15,
+      },
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock schedule={criticalSchedule} />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [schedule, setSchedule] = React.useState(defaultOnCallSchedule)
+
+    const handleAddOverride = (date: Date) => {
+      alert(`Add override for ${date.toLocaleDateString()}`)
+    }
+
+    const handleSwapShift = (shift: OnCallShift) => {
+      alert(`Swap shift: ${shift.user.name}'s shift on ${shift.startTime.toLocaleDateString()}`)
+    }
+
+    const handleContact = (user: OnCallUser) => {
+      alert(`Contacting ${user.name}:\nEmail: ${user.email}\nPhone: ${user.phone || 'N/A'}`)
+    }
+
+    const handleEditSchedule = () => {
+      alert('Opening schedule editor...')
+    }
+
+    return (
+      <div className="p-6">
+        <OnCallScheduleBlock
+          schedule={schedule}
+          onEditSchedule={handleEditSchedule}
+          onAddOverride={handleAddOverride}
+          onSwapShift={handleSwapShift}
+          onContactOnCall={handleContact}
+        />
+      </div>
+    )
+  },
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="p-6">
+      <OnCallScheduleBlock schedule={defaultOnCallSchedule} />
+    </div>
+  ),
+}
+
+export const IncidentDashboard: Story = {
+  render: () => {
+    const now = new Date()
+    const currentOnCall: OnCallShift = {
+      id: 'current',
+      user: {
+        ...defaultOnCallSchedule.users[0],
+        status: 'available',
+      },
+      startTime: new Date(now.getTime() - 6 * 3600000),
+      endTime: new Date(now.getTime() + 6 * 3600000),
+      level: 1,
+    }
+
+    const incidentSchedule: OnCallSchedule = {
+      ...defaultOnCallSchedule,
+      shifts: [currentOnCall, ...defaultOnCallSchedule.shifts],
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="font-bold text-xl">Incident Management</h1>
+              <p className="text-sm text-muted-foreground">On-Call & Escalation</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">Current incident:</span>
+              <span className="px-2 py-1 bg-green-500/10 text-green-600 rounded text-sm font-medium">
+                No active incidents
+              </span>
+            </div>
+          </div>
+        </header>
+        <main className="p-6">
+          <OnCallScheduleBlock
+            schedule={incidentSchedule}
+            onContactOnCall={(user) => console.log('Contact:', user)}
+            onAddOverride={(date) => console.log('Override:', date)}
+          />
+        </main>
+      </div>
+    )
+  },
+}

package/src/blocks/player-profile/PlayerProfile.stories.tsx

@@ -0,0 +1,316 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  PlayerProfile,
+  defaultPlayerStats,
+  defaultAchievements,
+  defaultBadges,
+  defaultMatchHistory,
+} from './index'
+import type { PlayerStats, Achievement, PlayerBadge, MatchHistory } from './index'
+import * as React from 'react'
+import { Trophy, Star, Flame, Crown, Medal, Zap, Target, Shield, Swords, Users, Gamepad2 } from 'lucide-react'
+
+const meta: Meta<typeof PlayerProfile> = {
+  title: 'Blocks/PlayerProfile',
+  component: PlayerProfile,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A gaming player profile page with XP progression, level display, stats, achievements with rarity tiers, badges, and match history tracking.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof PlayerProfile>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6 max-w-4xl">
+      <PlayerProfile
+        name="ShadowHunter"
+        title="Elite Warrior"
+        level={42}
+        currentXP={7500}
+        maxXP={10000}
+        totalXP={125000}
+        rank="Diamond II"
+        stats={defaultPlayerStats}
+        achievements={defaultAchievements}
+        badges={defaultBadges}
+        matchHistory={defaultMatchHistory}
+        streak={14}
+        playtime="245h"
+        friendsCount={89}
+        isOnline={true}
+        joinDate={new Date('2023-06-15')}
+      />
+    </div>
+  ),
+}
+
+export const NewPlayer: Story = {
+  render: () => {
+    const newPlayerStats: PlayerStats[] = [
+      { label: 'Matches Played', value: 12, icon: <Gamepad2 className="h-5 w-5" />, color: 'blue' },
+      { label: 'Wins', value: 5, icon: <Trophy className="h-5 w-5" />, color: 'green' },
+      { label: 'Win Rate', value: '41.7%', icon: <Target className="h-5 w-5" />, color: 'yellow' },
+    ]
+
+    const newPlayerAchievements: Achievement[] = [
+      {
+        id: 'first-match',
+        name: 'Welcome Aboard',
+        description: 'Play your first match',
+        rarity: 'common',
+        unlockedAt: new Date(),
+        icon: <Star className="h-6 w-6 text-yellow-500" />,
+      },
+      {
+        id: 'first-win',
+        name: 'First Victory',
+        description: 'Win your first match',
+        rarity: 'common',
+        progress: 1,
+        maxProgress: 1,
+        icon: <Trophy className="h-6 w-6 text-yellow-500" />,
+      },
+      {
+        id: 'ten-matches',
+        name: 'Getting Started',
+        description: 'Play 10 matches',
+        rarity: 'common',
+        progress: 12,
+        maxProgress: 10,
+        icon: <Gamepad2 className="h-6 w-6 text-blue-500" />,
+      },
+    ]
+
+    return (
+      <div className="p-6 max-w-4xl">
+        <PlayerProfile
+          name="NewPlayer123"
+          level={3}
+          currentXP={350}
+          maxXP={500}
+          totalXP={850}
+          stats={newPlayerStats}
+          achievements={newPlayerAchievements}
+          matchHistory={defaultMatchHistory.slice(0, 3)}
+          streak={2}
+          playtime="3h"
+          friendsCount={2}
+          isOnline={true}
+          joinDate={new Date()}
+        />
+      </div>
+    )
+  },
+}
+
+export const TopPlayer: Story = {
+  render: () => {
+    const topStats: PlayerStats[] = [
+      { label: 'Matches Played', value: '2,847', icon: <Gamepad2 className="h-5 w-5" />, color: 'blue' },
+      { label: 'Wins', value: '1,923', icon: <Trophy className="h-5 w-5" />, color: 'green' },
+      { label: 'Win Rate', value: '67.5%', icon: <Target className="h-5 w-5" />, color: 'yellow' },
+      { label: 'Best Score', value: '98,450', icon: <Star className="h-5 w-5" />, color: 'purple' },
+      { label: 'Kills', value: '45,230', icon: <Swords className="h-5 w-5" />, color: 'red' },
+      { label: 'MVP Awards', value: 342, icon: <Crown className="h-5 w-5" />, color: 'default' },
+    ]
+
+    const legendaryAchievements: Achievement[] = [
+      { id: '1', name: 'Legendary Champion', description: 'Reach the top 100 global ranking', rarity: 'legendary', unlockedAt: new Date('2024-01-15'), icon: <Crown className="h-6 w-6 text-amber-500" /> },
+      { id: '2', name: 'Master Strategist', description: 'Win 1000 matches', rarity: 'legendary', unlockedAt: new Date('2024-02-20'), icon: <Trophy className="h-6 w-6 text-amber-500" /> },
+      { id: '3', name: 'Eternal Flame', description: 'Maintain a 100-day streak', rarity: 'legendary', unlockedAt: new Date('2024-03-01'), icon: <Flame className="h-6 w-6 text-amber-500" /> },
+      { id: '4', name: 'Community Hero', description: 'Have 500 friends', rarity: 'epic', unlockedAt: new Date('2024-01-10'), icon: <Users className="h-6 w-6 text-purple-500" /> },
+    ]
+
+    const topBadges: PlayerBadge[] = [
+      { id: '1', name: 'Season 1 Champion', icon: <Crown className="h-4 w-4" />, color: '#f59e0b' },
+      { id: '2', name: 'Top 100', icon: <Medal className="h-4 w-4" />, color: '#ef4444' },
+      { id: '3', name: 'Pro Player', icon: <Zap className="h-4 w-4" />, color: '#8b5cf6' },
+      { id: '4', name: 'Content Creator', icon: <Star className="h-4 w-4" />, color: '#ec4899' },
+      { id: '5', name: 'Beta Veteran', icon: <Shield className="h-4 w-4" />, color: '#3b82f6' },
+    ]
+
+    return (
+      <div className="p-6 max-w-4xl">
+        <PlayerProfile
+          name="xXLegendXx"
+          title="Grand Champion"
+          level={99}
+          currentXP={9500}
+          maxXP={10000}
+          totalXP={2500000}
+          rank="Challenger"
+          rankIcon={<Crown className="h-5 w-5 text-amber-500" />}
+          stats={topStats}
+          achievements={legendaryAchievements}
+          badges={topBadges}
+          matchHistory={defaultMatchHistory}
+          streak={142}
+          playtime="2,450h"
+          friendsCount={523}
+          isOnline={true}
+          joinDate={new Date('2022-01-01')}
+        />
+      </div>
+    )
+  },
+}
+
+export const OfflinePlayer: Story = {
+  render: () => (
+    <div className="p-6 max-w-4xl">
+      <PlayerProfile
+        name="GhostRider"
+        title="Veteran Player"
+        level={56}
+        currentXP={2300}
+        maxXP={8000}
+        totalXP={180000}
+        rank="Platinum I"
+        stats={defaultPlayerStats}
+        achievements={defaultAchievements}
+        badges={defaultBadges}
+        matchHistory={defaultMatchHistory}
+        streak={0}
+        playtime="320h"
+        friendsCount={45}
+        isOnline={false}
+        joinDate={new Date('2023-03-20')}
+      />
+    </div>
+  ),
+}
+
+export const WithAvatar: Story = {
+  render: () => (
+    <div className="p-6 max-w-4xl">
+      <PlayerProfile
+        name="AcePlayer"
+        avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=AcePlayer"
+        title="Rising Star"
+        level={28}
+        currentXP={4200}
+        maxXP={6000}
+        totalXP={75000}
+        rank="Gold III"
+        stats={defaultPlayerStats}
+        achievements={defaultAchievements}
+        badges={defaultBadges}
+        matchHistory={defaultMatchHistory}
+        streak={7}
+        playtime="120h"
+        friendsCount={34}
+        isOnline={true}
+        joinDate={new Date('2023-09-10')}
+      />
+    </div>
+  ),
+}
+
+export const MinimalProfile: Story = {
+  render: () => (
+    <div className="p-6 max-w-4xl">
+      <PlayerProfile
+        name="CasualGamer"
+        level={15}
+        currentXP={1200}
+        maxXP={2000}
+        stats={[
+          { label: 'Matches', value: 45, icon: <Gamepad2 className="h-5 w-5" />, color: 'blue' },
+          { label: 'Wins', value: 18, icon: <Trophy className="h-5 w-5" />, color: 'green' },
+        ]}
+        isOnline={false}
+      />
+    </div>
+  ),
+}
+
+export const WinStreak: Story = {
+  render: () => {
+    const winStreakHistory: MatchHistory[] = [
+      { id: '1', result: 'win', score: '5-0', opponent: 'Team Alpha', mode: 'Ranked', date: new Date(Date.now() - 1 * 3600000), xpGained: 250 },
+      { id: '2', result: 'win', score: '3-1', opponent: 'Team Beta', mode: 'Ranked', date: new Date(Date.now() - 2 * 3600000), xpGained: 200 },
+      { id: '3', result: 'win', score: '4-2', opponent: 'Team Gamma', mode: 'Ranked', date: new Date(Date.now() - 3 * 3600000), xpGained: 225 },
+      { id: '4', result: 'win', score: '2-0', opponent: 'Team Delta', mode: 'Ranked', date: new Date(Date.now() - 4 * 3600000), xpGained: 175 },
+      { id: '5', result: 'win', score: '3-0', opponent: 'Team Epsilon', mode: 'Ranked', date: new Date(Date.now() - 5 * 3600000), xpGained: 200 },
+    ]
+
+    return (
+      <div className="p-6 max-w-4xl">
+        <PlayerProfile
+          name="OnFirePlayer"
+          title="Unstoppable"
+          level={67}
+          currentXP={8900}
+          maxXP={10000}
+          totalXP={450000}
+          rank="Master"
+          rankIcon={<Flame className="h-5 w-5 text-orange-500" />}
+          stats={defaultPlayerStats}
+          achievements={defaultAchievements}
+          badges={[
+            { id: '1', name: 'Hot Streak', icon: <Flame className="h-4 w-4" />, color: '#f97316' },
+            ...defaultBadges,
+          ]}
+          matchHistory={winStreakHistory}
+          streak={28}
+          playtime="500h"
+          friendsCount={156}
+          isOnline={true}
+          joinDate={new Date('2023-01-01')}
+        />
+      </div>
+    )
+  },
+}
+
+export const GameProfile: Story = {
+  render: () => (
+    <div className="min-h-screen bg-gradient-to-b from-background to-muted/30">
+      <header className="bg-background/80 backdrop-blur border-b px-6 py-4">
+        <div className="flex items-center justify-between max-w-5xl mx-auto">
+          <div className="flex items-center gap-3">
+            <Gamepad2 className="h-6 w-6 text-primary" />
+            <h1 className="font-bold text-xl">Battle Arena</h1>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Profile</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Leaderboard</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Store</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Settings</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6 max-w-5xl mx-auto">
+        <PlayerProfile
+          name="DragonSlayer"
+          avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=DragonSlayer"
+          title="Legendary Warrior"
+          level={88}
+          currentXP={7200}
+          maxXP={10000}
+          totalXP={1250000}
+          rank="Grandmaster"
+          rankIcon={<Crown className="h-5 w-5 text-amber-500" />}
+          stats={defaultPlayerStats}
+          achievements={defaultAchievements}
+          badges={defaultBadges}
+          matchHistory={defaultMatchHistory}
+          streak={45}
+          playtime="1,250h"
+          friendsCount={234}
+          isOnline={true}
+          joinDate={new Date('2022-06-01')}
+        />
+      </main>
+    </div>
+  ),
+}