@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-achievement-unlock/WakaAchievementUnlock.stories.tsx

@@ -0,0 +1,353 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaAchievementUnlock, useAchievements } from './index'
+import type { Achievement } from './index'
+import * as React from 'react'
+import { Trophy, Star, Zap, Target, Flame, Crown, Gem, Award } from 'lucide-react'
+
+const sampleAchievement: Achievement = {
+  id: 'first-win',
+  name: 'First Victory',
+  description: 'Win your first game',
+  icon: <Trophy className="h-8 w-8" />,
+  rarity: 'common',
+  unlockedAt: new Date(),
+  xpReward: 100,
+}
+
+const achievements: Achievement[] = [
+  {
+    id: 'first-win',
+    name: 'First Victory',
+    description: 'Win your first game',
+    icon: <Trophy className="h-8 w-8" />,
+    rarity: 'common',
+    xpReward: 100,
+  },
+  {
+    id: 'streak-7',
+    name: 'Week Warrior',
+    description: 'Maintain a 7-day streak',
+    icon: <Flame className="h-8 w-8" />,
+    rarity: 'rare',
+    xpReward: 250,
+  },
+  {
+    id: 'level-25',
+    name: 'Quarter Century',
+    description: 'Reach level 25',
+    icon: <Star className="h-8 w-8" />,
+    rarity: 'epic',
+    xpReward: 500,
+  },
+  {
+    id: 'legendary-item',
+    name: 'Legendary Collector',
+    description: 'Obtain your first legendary item',
+    icon: <Crown className="h-8 w-8" />,
+    rarity: 'legendary',
+    xpReward: 1000,
+  },
+]
+
+const meta: Meta<typeof WakaAchievementUnlock> = {
+  title: 'Components/Gamification/WakaAchievementUnlock',
+  component: WakaAchievementUnlock,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An achievement unlock modal with particle effects, glow animations, and celebration effects.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['modal', 'toast', 'inline'],
+      description: 'Display variant',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    showConfetti: {
+      control: 'boolean',
+      description: 'Show confetti on unlock',
+    },
+    autoClose: {
+      control: 'boolean',
+      description: 'Auto close after delay',
+    },
+    autoCloseDelay: {
+      control: { type: 'number', min: 1000, max: 10000, step: 500 },
+      description: 'Auto close delay in ms',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAchievementUnlock>
+
+export const Default: Story = {
+  args: {
+    achievement: sampleAchievement,
+    isOpen: true,
+    variant: 'modal',
+    animated: true,
+    showConfetti: true,
+    autoClose: false,
+  },
+  render: (args) => <WakaAchievementUnlock {...args} onClose={() => {}} />,
+}
+
+export const Rarities: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4">
+      {achievements.map((achievement) => (
+        <WakaAchievementUnlock
+          key={achievement.id}
+          achievement={{ ...achievement, unlockedAt: new Date() }}
+          isOpen={true}
+          onClose={() => {}}
+          variant="inline"
+        />
+      ))}
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => {
+    const [variant, setVariant] = React.useState<'modal' | 'toast' | 'inline'>('inline')
+    const [isOpen, setIsOpen] = React.useState(true)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 mb-4">
+          <button
+            onClick={() => { setVariant('modal'); setIsOpen(true) }}
+            className={`px-3 py-1.5 text-sm rounded ${variant === 'modal' ? 'bg-primary text-primary-foreground' : 'border hover:bg-muted'}`}
+          >
+            Modal
+          </button>
+          <button
+            onClick={() => { setVariant('toast'); setIsOpen(true) }}
+            className={`px-3 py-1.5 text-sm rounded ${variant === 'toast' ? 'bg-primary text-primary-foreground' : 'border hover:bg-muted'}`}
+          >
+            Toast
+          </button>
+          <button
+            onClick={() => { setVariant('inline'); setIsOpen(true) }}
+            className={`px-3 py-1.5 text-sm rounded ${variant === 'inline' ? 'bg-primary text-primary-foreground' : 'border hover:bg-muted'}`}
+          >
+            Inline
+          </button>
+        </div>
+
+        <WakaAchievementUnlock
+          achievement={achievements[1]}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          variant={variant}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [currentAchievement, setCurrentAchievement] = React.useState<Achievement | null>(null)
+
+    const unlock = (achievement: Achievement) => {
+      setCurrentAchievement({ ...achievement, unlockedAt: new Date() })
+      setIsOpen(true)
+    }
+
+    return (
+      <div className="space-y-6">
+        <div className="grid grid-cols-2 gap-3">
+          {achievements.map((achievement) => (
+            <button
+              key={achievement.id}
+              onClick={() => unlock(achievement)}
+              className="p-4 rounded-lg border hover:border-primary/50 hover:bg-muted/50 text-left transition-all"
+            >
+              <div className="flex items-center gap-3">
+                <div className="text-muted-foreground">{achievement.icon}</div>
+                <div>
+                  <p className="font-medium">{achievement.name}</p>
+                  <p className="text-xs text-muted-foreground">{achievement.rarity}</p>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {currentAchievement && (
+          <WakaAchievementUnlock
+            achievement={currentAchievement}
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            showConfetti
+          />
+        )}
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      achievements: userAchievements,
+      unlock,
+      isUnlocked,
+      getByRarity,
+      totalXP,
+      pendingUnlock,
+      dismissPending,
+    } = useAchievements({
+      allAchievements: achievements,
+    })
+
+    return (
+      <div className="space-y-6 w-[400px]">
+        <div className="p-4 rounded-lg border">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="font-semibold">Achievements</h3>
+            <span className="text-sm text-muted-foreground">
+              {userAchievements.length}/{achievements.length} • {totalXP} XP
+            </span>
+          </div>
+
+          <div className="space-y-2">
+            {achievements.map((achievement) => (
+              <div
+                key={achievement.id}
+                className={`flex items-center gap-3 p-2 rounded-lg ${
+                  isUnlocked(achievement.id) ? 'bg-green-500/10' : 'bg-muted/30'
+                }`}
+              >
+                <div className={isUnlocked(achievement.id) ? '' : 'opacity-30'}>
+                  {achievement.icon}
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium">{achievement.name}</p>
+                  <p className="text-xs text-muted-foreground">{achievement.rarity}</p>
+                </div>
+                {!isUnlocked(achievement.id) && (
+                  <button
+                    onClick={() => unlock(achievement.id)}
+                    className="px-2 py-1 text-xs rounded bg-primary text-primary-foreground"
+                  >
+                    Unlock
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {pendingUnlock && (
+          <WakaAchievementUnlock
+            achievement={pendingUnlock}
+            isOpen={true}
+            onClose={dismissPending}
+            showConfetti
+          />
+        )}
+      </div>
+    )
+  },
+}
+
+export const ToastNotification: Story = {
+  render: () => {
+    const [queue, setQueue] = React.useState<Achievement[]>([])
+
+    const addToQueue = () => {
+      const randomAchievement = achievements[Math.floor(Math.random() * achievements.length)]
+      setQueue((prev) => [...prev, { ...randomAchievement, id: Date.now().toString(), unlockedAt: new Date() }])
+    }
+
+    const removeFromQueue = (id: string) => {
+      setQueue((prev) => prev.filter((a) => a.id !== id))
+    }
+
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={addToQueue}
+          className="px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium"
+        >
+          Unlock Random Achievement
+        </button>
+
+        <div className="fixed top-4 right-4 space-y-2 z-50">
+          {queue.map((achievement) => (
+            <WakaAchievementUnlock
+              key={achievement.id}
+              achievement={achievement}
+              isOpen={true}
+              onClose={() => removeFromQueue(achievement.id)}
+              variant="toast"
+              autoClose
+              autoCloseDelay={5000}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const AchievementShowcase: Story = {
+  render: () => {
+    const unlockedAchievements: Achievement[] = achievements.map((a) => ({
+      ...a,
+      unlockedAt: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000),
+    }))
+
+    return (
+      <div className="w-[500px] p-6 rounded-xl border bg-card">
+        <h2 className="text-xl font-bold mb-6">Achievement Showcase</h2>
+
+        <div className="grid grid-cols-2 gap-3">
+          {unlockedAchievements.map((achievement) => (
+            <WakaAchievementUnlock
+              key={achievement.id}
+              achievement={achievement}
+              isOpen={true}
+              onClose={() => {}}
+              variant="inline"
+              animated={false}
+            />
+          ))}
+        </div>
+
+        <div className="mt-6 pt-4 border-t">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Total XP Earned</span>
+            <span className="font-bold text-amber-500">1,850 XP</span>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaAchievementUnlock
+      achievement={sampleAchievement}
+      isOpen={true}
+      onClose={() => {}}
+      animated={false}
+      showConfetti={false}
+      variant="inline"
+    />
+  ),
+}

package/src/components/waka-artifact-list/WakaArtifactList.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaArtifactList, defaultArtifacts } from './index'
+import type { Artifact } from './index'
+import * as React from 'react'
+
+const manyArtifacts: Artifact[] = [
+  ...defaultArtifacts,
+  {
+    id: '7',
+    name: 'build-windows-x64.zip',
+    type: 'archive',
+    size: 48 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    expiresAt: new Date(Date.now() + 7 * 24 * 3600000),
+    downloadUrl: '#',
+    sha256: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
+  },
+  {
+    id: '8',
+    name: 'lint-report.json',
+    type: 'report',
+    size: 128 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: '#',
+  },
+  {
+    id: '9',
+    name: 'security-scan.sarif',
+    type: 'report',
+    size: 512 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: '#',
+  },
+  {
+    id: '10',
+    name: 'test-output.log',
+    type: 'log',
+    size: 2.5 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: '#',
+  },
+  {
+    id: '11',
+    name: 'app-binary',
+    type: 'binary',
+    size: 15 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: '#',
+    sha256: 'e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4',
+  },
+  {
+    id: '12',
+    name: 'screenshots.zip',
+    type: 'image',
+    size: 8 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 2 * 3600000),
+    downloadUrl: '#',
+  },
+]
+
+const expiringSoonArtifacts: Artifact[] = [
+  {
+    id: '1',
+    name: 'build-urgent.tar.gz',
+    type: 'archive',
+    size: 50 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 6 * 24 * 3600000),
+    expiresAt: new Date(Date.now() + 6 * 3600000),
+    downloadUrl: '#',
+  },
+  {
+    id: '2',
+    name: 'logs-expiring.txt',
+    type: 'log',
+    size: 1 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 6 * 24 * 3600000),
+    expiresAt: new Date(Date.now() + 12 * 3600000),
+    downloadUrl: '#',
+  },
+  {
+    id: '3',
+    name: 'stable-artifact.zip',
+    type: 'archive',
+    size: 30 * 1024 * 1024,
+    createdAt: new Date(Date.now() - 1 * 24 * 3600000),
+    expiresAt: new Date(Date.now() + 30 * 24 * 3600000),
+    downloadUrl: '#',
+  },
+]
+
+const meta: Meta<typeof WakaArtifactList> = {
+  title: 'Components/DevOps/WakaArtifactList',
+  component: WakaArtifactList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A build artifact list with type filtering, size display, expiration warnings, SHA256 checksums, and download/delete actions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showExpiration: {
+      control: 'boolean',
+      description: 'Show expiration dates',
+    },
+    allowDelete: {
+      control: 'boolean',
+      description: 'Allow artifact deletion',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaArtifactList>
+
+export const Default: Story = {
+  args: {
+    artifacts: defaultArtifacts,
+  },
+  render: (args) => (
+    <div className="w-[800px] h-[500px]">
+      <WakaArtifactList
+        {...args}
+        onDownload={(artifact) => console.log('Download:', artifact.name)}
+        onView={(artifact) => console.log('View:', artifact.name)}
+      />
+    </div>
+  ),
+}
+
+export const ManyArtifacts: Story = {
+  render: () => (
+    <div className="w-[800px] h-[600px]">
+      <WakaArtifactList
+        artifacts={manyArtifacts}
+        title="Build Artifacts"
+        onDownload={(artifact) => console.log('Download:', artifact.name)}
+        onView={(artifact) => console.log('View:', artifact.name)}
+      />
+    </div>
+  ),
+}
+
+export const WithDelete: Story = {
+  render: () => {
+    const [artifacts, setArtifacts] = React.useState(defaultArtifacts)
+
+    const handleDelete = (artifact: Artifact) => {
+      if (confirm(`Delete ${artifact.name}?`)) {
+        setArtifacts((prev) => prev.filter((a) => a.id !== artifact.id))
+      }
+    }
+
+    return (
+      <div className="w-[800px] h-[500px]">
+        <WakaArtifactList
+          artifacts={artifacts}
+          allowDelete
+          onDownload={(artifact) => console.log('Download:', artifact.name)}
+          onDelete={handleDelete}
+          onView={(artifact) => console.log('View:', artifact.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ExpiringSoon: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Some artifacts are expiring within 24 hours (highlighted in yellow)
+      </p>
+      <WakaArtifactList
+        artifacts={expiringSoonArtifacts}
+        title="Expiring Artifacts"
+        onDownload={(artifact) => console.log('Download:', artifact.name)}
+        onView={(artifact) => console.log('View:', artifact.name)}
+      />
+    </div>
+  ),
+}
+
+export const NoExpiration: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaArtifactList
+        artifacts={defaultArtifacts}
+        showExpiration={false}
+        onDownload={(artifact) => console.log('Download:', artifact.name)}
+        onView={(artifact) => console.log('View:', artifact.name)}
+      />
+    </div>
+  ),
+}
+
+export const ArchivesOnly: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaArtifactList
+        artifacts={defaultArtifacts.filter((a) => a.type === 'archive')}
+        title="Release Archives"
+        onDownload={(artifact) => console.log('Download:', artifact.name)}
+        onView={(artifact) => console.log('View:', artifact.name)}
+      />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaArtifactList
+        artifacts={[]}
+        title="No Artifacts"
+      />
+    </div>
+  ),
+}
+
+export const CIBuildArtifacts: Story = {
+  render: () => (
+    <div className="p-6 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">Build #1234 Artifacts</h2>
+          <p className="text-sm text-muted-foreground">
+            Branch: main • Commit: abc123f
+          </p>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">Total size:</span>
+          <span className="font-medium">339.9 MB</span>
+        </div>
+      </div>
+
+      <div className="w-[750px]">
+        <WakaArtifactList
+          artifacts={defaultArtifacts}
+          allowDelete
+          onDownload={(artifact) => {
+            console.log('Downloading:', artifact.name)
+            alert(`Downloading ${artifact.name}...`)
+          }}
+          onDelete={(artifact) => {
+            console.log('Delete:', artifact.name)
+          }}
+          onView={(artifact) => {
+            console.log('View:', artifact.name)
+            alert(`Viewing details for ${artifact.name}`)
+          }}
+        />
+      </div>
+    </div>
+  ),
+}