@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-log-viewer/WakaLogViewer.stories.tsx

@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaLogViewer, defaultLogs } from './index'
+import type { LogEntry, LogLevel } from './index'
+import * as React from 'react'
+
+const generateLogs = (count: number): LogEntry[] => {
+  const sources = ['api', 'db', 'cache', 'auth', 'worker', 'main']
+  const levels: LogLevel[] = ['info', 'debug', 'warn', 'error', 'trace']
+  const messages = [
+    'Request processed successfully',
+    'Loading configuration from environment',
+    'Connection established',
+    'Cache miss, fetching from database',
+    'User authentication successful',
+    'Processing batch job',
+    'Deprecated API version detected',
+    'High memory usage warning',
+    'Failed to connect to service',
+    'Query execution timeout',
+  ]
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: `log-${i}`,
+    timestamp: new Date(Date.now() - (count - i) * 1000),
+    level: levels[Math.floor(Math.random() * levels.length)],
+    message: messages[Math.floor(Math.random() * messages.length)],
+    source: sources[Math.floor(Math.random() * sources.length)],
+  }))
+}
+
+const logsWithMetadata: LogEntry[] = [
+  {
+    id: '1',
+    timestamp: new Date(),
+    level: 'info',
+    message: 'Application started successfully',
+    source: 'main',
+  },
+  {
+    id: '2',
+    timestamp: new Date(),
+    level: 'debug',
+    message: 'Loading configuration from /etc/app/config.yaml',
+    source: 'config',
+    metadata: { path: '/etc/app/config.yaml', format: 'yaml', size: '2.4KB' },
+  },
+  {
+    id: '3',
+    timestamp: new Date(),
+    level: 'info',
+    message: 'Database connection established',
+    source: 'db',
+    metadata: { host: 'postgres.example.com', port: 5432, database: 'production' },
+  },
+  {
+    id: '4',
+    timestamp: new Date(),
+    level: 'warn',
+    message: 'Deprecated API version detected, please upgrade to v2',
+    source: 'api',
+    metadata: { currentVersion: 'v1', recommendedVersion: 'v2', deprecationDate: '2024-06-01' },
+  },
+  {
+    id: '5',
+    timestamp: new Date(),
+    level: 'error',
+    message: 'Failed to connect to Redis cache',
+    source: 'cache',
+    metadata: { host: 'redis.example.com', port: 6379 },
+    stackTrace: `Error: Connection refused
+    at RedisClient.connect (/app/node_modules/redis/lib/client.js:123:15)
+    at async CacheService.init (/app/src/services/cache.ts:45:5)
+    at async bootstrap (/app/src/main.ts:22:3)`,
+  },
+  {
+    id: '6',
+    timestamp: new Date(),
+    level: 'info',
+    message: 'Retry connection attempt 1/3',
+    source: 'cache',
+  },
+  {
+    id: '7',
+    timestamp: new Date(),
+    level: 'debug',
+    message: 'Request: GET /api/users/123',
+    source: 'api',
+    metadata: { method: 'GET', path: '/api/users/123', statusCode: 200, duration: '45ms' },
+  },
+  {
+    id: '8',
+    timestamp: new Date(),
+    level: 'trace',
+    message: 'SQL query executed',
+    source: 'db',
+    metadata: { query: 'SELECT * FROM users WHERE id = $1', params: [123], duration: '12ms' },
+  },
+]
+
+const meta: Meta<typeof WakaLogViewer> = {
+  title: 'Components/DevOps/WakaLogViewer',
+  component: WakaLogViewer,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A log viewer with level filtering, search, expandable metadata, stack traces, streaming support, and export functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showTimestamp: {
+      control: 'boolean',
+      description: 'Show timestamps',
+    },
+    showSource: {
+      control: 'boolean',
+      description: 'Show log source',
+    },
+    autoScroll: {
+      control: 'boolean',
+      description: 'Enable auto-scroll to bottom',
+    },
+    maxLogs: {
+      control: { type: 'number', min: 100, max: 5000, step: 100 },
+      description: 'Maximum number of logs to display',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLogViewer>
+
+export const Default: Story = {
+  args: {
+    logs: defaultLogs,
+    showTimestamp: true,
+    showSource: true,
+    autoScroll: true,
+    maxLogs: 1000,
+  },
+  render: (args) => (
+    <div className="w-[800px] h-[500px]">
+      <WakaLogViewer {...args} />
+    </div>
+  ),
+}
+
+export const WithMetadata: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Click on log entries to expand metadata and stack traces
+      </p>
+      <WakaLogViewer logs={logsWithMetadata} />
+    </div>
+  ),
+}
+
+export const LiveStreaming: Story = {
+  render: () => {
+    const [logs, setLogs] = React.useState<LogEntry[]>(defaultLogs)
+    const [isStreaming, setIsStreaming] = React.useState(true)
+
+    React.useEffect(() => {
+      if (!isStreaming) return
+
+      const levels: LogLevel[] = ['info', 'debug', 'warn', 'error']
+      const sources = ['api', 'db', 'cache', 'worker']
+      const messages = [
+        'Request processed',
+        'Cache hit',
+        'Query executed',
+        'Task completed',
+        'High latency detected',
+        'Connection timeout',
+      ]
+
+      const interval = setInterval(() => {
+        const newLog: LogEntry = {
+          id: `log-${Date.now()}`,
+          timestamp: new Date(),
+          level: levels[Math.floor(Math.random() * levels.length)],
+          message: messages[Math.floor(Math.random() * messages.length)],
+          source: sources[Math.floor(Math.random() * sources.length)],
+        }
+        setLogs(prev => [...prev.slice(-99), newLog])
+      }, 500)
+
+      return () => clearInterval(interval)
+    }, [isStreaming])
+
+    return (
+      <div className="w-[800px] h-[500px]">
+        <WakaLogViewer
+          logs={logs}
+          isStreaming={isStreaming}
+          onToggleStreaming={() => setIsStreaming(!isStreaming)}
+          onClear={() => setLogs([])}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyLogs: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        500 logs with virtualization
+      </p>
+      <WakaLogViewer logs={generateLogs(500)} />
+    </div>
+  ),
+}
+
+export const NoTimestamps: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaLogViewer logs={logsWithMetadata} showTimestamp={false} />
+    </div>
+  ),
+}
+
+export const NoSource: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaLogViewer logs={logsWithMetadata} showSource={false} />
+    </div>
+  ),
+}
+
+export const WithCallbacks: Story = {
+  render: () => {
+    const [logs, setLogs] = React.useState<LogEntry[]>(logsWithMetadata)
+
+    return (
+      <div className="w-[800px] h-[500px]">
+        <WakaLogViewer
+          logs={logs}
+          onClear={() => setLogs([])}
+          onExport={(filteredLogs) => {
+            console.log('Exporting logs:', filteredLogs)
+            alert(`Exporting ${filteredLogs.length} logs`)
+          }}
+          onLoadMore={() => {
+            console.log('Loading more logs...')
+            setLogs(prev => [...generateLogs(10), ...prev])
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const ErrorsOnly: Story = {
+  render: () => {
+    const errorLogs: LogEntry[] = [
+      {
+        id: '1',
+        timestamp: new Date(Date.now() - 5 * 60 * 1000),
+        level: 'error',
+        message: 'TypeError: Cannot read property "id" of undefined',
+        source: 'api',
+        stackTrace: `TypeError: Cannot read property 'id' of undefined
+    at UserController.getUser (/app/src/controllers/user.ts:45:15)
+    at processRequest (/app/src/middleware/router.ts:89:12)`,
+      },
+      {
+        id: '2',
+        timestamp: new Date(Date.now() - 10 * 60 * 1000),
+        level: 'error',
+        message: 'ECONNREFUSED: Connection refused to database',
+        source: 'db',
+        metadata: { host: 'db.example.com', port: 5432 },
+      },
+      {
+        id: '3',
+        timestamp: new Date(Date.now() - 15 * 60 * 1000),
+        level: 'error',
+        message: 'OutOfMemoryError: Heap space exceeded',
+        source: 'worker',
+        stackTrace: `java.lang.OutOfMemoryError: Java heap space
+    at java.util.Arrays.copyOf(Arrays.java:3210)
+    at java.util.ArrayList.grow(ArrayList.java:265)`,
+      },
+    ]
+
+    return (
+      <div className="w-[800px] h-[400px]">
+        <WakaLogViewer logs={errorLogs} title="Error Logs" />
+      </div>
+    )
+  },
+}
+
+export const CustomTitle: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaLogViewer logs={logsWithMetadata} title="Application Logs - Production" />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[800px] h-[300px]">
+      <WakaLogViewer logs={[]} />
+    </div>
+  ),
+}

package/src/components/waka-loot-box/WakaLootBox.stories.tsx

@@ -0,0 +1,374 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaLootBox, useLootBox } from './index'
+import type { LootBoxItem, LootBoxRarity } from './index'
+import * as React from 'react'
+import { Sword, Shield, Crown, Gem, Star, Zap, Heart, Coins } from 'lucide-react'
+
+const sampleItems: LootBoxItem[] = [
+  {
+    id: '1',
+    name: 'Legendary Sword',
+    description: 'A blade forged in dragon fire',
+    rarity: 'legendary',
+    icon: <Sword className="h-12 w-12" />,
+  },
+  {
+    id: '2',
+    name: 'Epic Shield',
+    description: 'Unbreakable defense',
+    rarity: 'epic',
+    icon: <Shield className="h-12 w-12" />,
+  },
+  {
+    id: '3',
+    name: 'Rare Gem',
+    description: 'A precious stone',
+    rarity: 'rare',
+    icon: <Gem className="h-12 w-12" />,
+    quantity: 5,
+  },
+]
+
+const commonLoot: LootBoxItem[] = [
+  { id: 'c1', name: 'Gold Coins', description: '+100 gold', rarity: 'common', icon: <Coins className="h-10 w-10" />, quantity: 100 },
+  { id: 'c2', name: 'Health Potion', description: 'Restore 50 HP', rarity: 'common', icon: <Heart className="h-10 w-10" />, quantity: 3 },
+]
+
+const rareLoot: LootBoxItem[] = [
+  { id: 'r1', name: 'Energy Crystal', description: '+50 Energy', rarity: 'rare', icon: <Zap className="h-10 w-10" /> },
+  { id: 'r2', name: 'Sapphire', description: 'A rare gemstone', rarity: 'rare', icon: <Gem className="h-10 w-10" /> },
+]
+
+const epicLoot: LootBoxItem[] = [
+  { id: 'e1', name: 'Phoenix Feather', description: 'Grants revival', rarity: 'epic', icon: <Star className="h-10 w-10" /> },
+]
+
+const legendaryLoot: LootBoxItem[] = [
+  { id: 'l1', name: 'Crown of Kings', description: 'Ultimate power', rarity: 'legendary', icon: <Crown className="h-10 w-10" /> },
+]
+
+const meta: Meta<typeof WakaLootBox> = {
+  title: 'Components/Gamification/WakaLootBox',
+  component: WakaLootBox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A loot box opening experience with shake animation, glow effects, particle bursts, and item reveal sequence.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['chest', 'crate', 'gift', 'orb'],
+      description: 'Visual style of the loot box',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size of the loot box',
+    },
+    autoReveal: {
+      control: 'boolean',
+      description: 'Auto-reveal items without navigation',
+    },
+    autoRevealDelay: {
+      control: { type: 'number', min: 500, max: 5000, step: 500 },
+      description: 'Delay between auto-reveal items (ms)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable interaction',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLootBox>
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+    variant: 'chest',
+    size: 'default',
+    autoReveal: false,
+    autoRevealDelay: 1500,
+    disabled: false,
+  },
+  render: (args) => <WakaLootBox {...args} />,
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8 items-end">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Chest</p>
+        <WakaLootBox items={sampleItems} variant="chest" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Crate</p>
+        <WakaLootBox items={rareLoot} variant="crate" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Gift</p>
+        <WakaLootBox items={epicLoot} variant="gift" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Orb</p>
+        <WakaLootBox items={legendaryLoot} variant="orb" />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8 items-end">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaLootBox items={commonLoot} size="sm" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaLootBox items={rareLoot} size="default" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaLootBox items={epicLoot} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const RarityEffects: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8 items-end">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Common Loot</p>
+        <WakaLootBox items={commonLoot} variant="crate" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Rare Loot</p>
+        <WakaLootBox items={rareLoot} variant="gift" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Epic Loot</p>
+        <WakaLootBox items={epicLoot} variant="chest" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Legendary Loot</p>
+        <WakaLootBox items={legendaryLoot} variant="orb" />
+      </div>
+    </div>
+  ),
+}
+
+export const AutoReveal: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Items will automatically cycle through after opening
+      </p>
+      <WakaLootBox items={sampleItems} autoReveal autoRevealDelay={2000} />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [openedBoxes, setOpenedBoxes] = React.useState(0)
+    const [totalItems, setTotalItems] = React.useState<LootBoxItem[]>([])
+
+    const handleRevealComplete = (items: LootBoxItem[]) => {
+      setOpenedBoxes(prev => prev + 1)
+      setTotalItems(prev => [...prev, ...items])
+    }
+
+    return (
+      <div className="space-y-6">
+        <div className="flex gap-8">
+          <WakaLootBox
+            items={commonLoot}
+            variant="crate"
+            onRevealComplete={handleRevealComplete}
+          />
+          <WakaLootBox
+            items={rareLoot}
+            variant="gift"
+            onRevealComplete={handleRevealComplete}
+          />
+          <WakaLootBox
+            items={epicLoot}
+            variant="chest"
+            onRevealComplete={handleRevealComplete}
+          />
+        </div>
+
+        <div className="p-4 rounded-lg border bg-muted/30">
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-muted-foreground">Boxes Opened: {openedBoxes}</span>
+            <span className="text-sm text-muted-foreground">Items Collected: {totalItems.length}</span>
+          </div>
+
+          {totalItems.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-2">
+              {totalItems.map((item, i) => (
+                <div
+                  key={`${item.id}-${i}`}
+                  className={`px-2 py-1 rounded text-xs font-medium ${
+                    item.rarity === 'legendary' ? 'bg-amber-500/20 text-amber-500' :
+                    item.rarity === 'epic' ? 'bg-purple-500/20 text-purple-500' :
+                    item.rarity === 'rare' ? 'bg-blue-500/20 text-blue-500' :
+                    'bg-slate-500/20 text-slate-500'
+                  }`}
+                >
+                  {item.name}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const [inventory, setInventory] = React.useState<LootBoxItem[]>([])
+
+    const lootBox = useLootBox({
+      items: sampleItems,
+      onRevealComplete: (items) => {
+        setInventory(prev => [...prev, ...items])
+      },
+    })
+
+    return (
+      <div className="space-y-6 w-[400px]">
+        <div className="flex justify-between items-center">
+          <h3 className="font-semibold">Loot Box Demo</h3>
+          <span className="text-sm text-muted-foreground">
+            Phase: {lootBox.phase}
+          </span>
+        </div>
+
+        <WakaLootBox
+          items={sampleItems}
+          isOpen={lootBox.isOpen}
+          onOpen={lootBox.open}
+          onClose={lootBox.close}
+        />
+
+        <div className="flex gap-2">
+          <button
+            onClick={() => lootBox.open()}
+            disabled={lootBox.isOpen}
+            className="px-3 py-1.5 text-sm rounded bg-primary text-primary-foreground disabled:opacity-50"
+          >
+            Open Box
+          </button>
+          <button
+            onClick={() => lootBox.reset()}
+            className="px-3 py-1.5 text-sm rounded border hover:bg-muted"
+          >
+            Reset
+          </button>
+        </div>
+
+        {inventory.length > 0 && (
+          <div className="p-4 rounded-lg border">
+            <h4 className="text-sm font-medium mb-2">Inventory ({inventory.length})</h4>
+            <div className="flex flex-wrap gap-2">
+              {inventory.map((item, i) => (
+                <div key={`${item.id}-${i}`} className="text-xs px-2 py-1 bg-muted rounded">
+                  {item.name} {item.quantity && `x${item.quantity}`}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const MixedRarityBox: Story = {
+  render: () => {
+    const mixedItems: LootBoxItem[] = [
+      ...commonLoot,
+      ...rareLoot,
+      ...epicLoot,
+      ...legendaryLoot,
+    ]
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground text-center">
+          Contains items of all rarities - the box glows based on the highest rarity inside
+        </p>
+        <WakaLootBox items={mixedItems} variant="chest" size="lg" />
+      </div>
+    )
+  },
+}
+
+export const GachaSimulator: Story = {
+  render: () => {
+    const [pulls, setPulls] = React.useState(0)
+    const [legendary, setLegendary] = React.useState(0)
+    const [currentItems, setCurrentItems] = React.useState<LootBoxItem[]>(commonLoot)
+
+    const getRandomLoot = (): LootBoxItem[] => {
+      const roll = Math.random()
+      if (roll < 0.01) return legendaryLoot
+      if (roll < 0.10) return epicLoot
+      if (roll < 0.30) return rareLoot
+      return commonLoot
+    }
+
+    const handleOpen = () => {
+      setPulls(prev => prev + 1)
+      const loot = getRandomLoot()
+      setCurrentItems(loot)
+      if (loot[0]?.rarity === 'legendary') {
+        setLegendary(prev => prev + 1)
+      }
+    }
+
+    return (
+      <div className="space-y-6 w-[400px]">
+        <div className="p-4 rounded-lg border bg-gradient-to-r from-amber-500/10 to-orange-500/10">
+          <h3 className="font-bold text-center mb-2">Gacha Simulator</h3>
+          <div className="flex justify-between text-sm">
+            <span>Total Pulls: {pulls}</span>
+            <span className="text-amber-500">Legendaries: {legendary}</span>
+          </div>
+          <div className="text-xs text-muted-foreground text-center mt-2">
+            1% Legendary | 10% Epic | 30% Rare | 59% Common
+          </div>
+        </div>
+
+        <WakaLootBox
+          key={pulls}
+          items={currentItems}
+          variant="orb"
+          onOpen={handleOpen}
+        />
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Disabled state - cannot be opened
+      </p>
+      <WakaLootBox items={sampleItems} disabled />
+    </div>
+  ),
+}