@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-scratch-card/WakaScratchCard.stories.tsx

@@ -0,0 +1,388 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaScratchCard, useScratchCard } from './index'
+import type { Prize, PrizeRarity } from './index'
+import * as React from 'react'
+import { Gift, Star, Crown, Gem, Coins, Zap, Trophy } from 'lucide-react'
+
+const samplePrize: Prize = {
+  id: '1',
+  name: 'Grand Prize',
+  description: 'You won the jackpot!',
+  rarity: 'legendary',
+  icon: <Crown className="h-12 w-12" />,
+  value: '$1,000',
+}
+
+const prizesByRarity: Record<PrizeRarity, Prize> = {
+  common: {
+    id: 'common',
+    name: 'Participation Reward',
+    description: 'Thanks for playing!',
+    rarity: 'common',
+    icon: <Star className="h-10 w-10" />,
+    value: '10 Points',
+  },
+  rare: {
+    id: 'rare',
+    name: 'Silver Prize',
+    description: 'Nice scratch!',
+    rarity: 'rare',
+    icon: <Coins className="h-10 w-10" />,
+    value: '50 Coins',
+  },
+  epic: {
+    id: 'epic',
+    name: 'Gold Prize',
+    description: 'Amazing luck!',
+    rarity: 'epic',
+    icon: <Gem className="h-10 w-10" />,
+    value: '200 Gems',
+  },
+  legendary: samplePrize,
+}
+
+const meta: Meta<typeof WakaScratchCard> = {
+  title: 'Components/Gamification/WakaScratchCard',
+  component: WakaScratchCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An interactive scratch card with canvas-based scratching, reveal effects, confetti celebration, and customizable overlay patterns.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: { type: 'number', min: 200, max: 500, step: 50 },
+      description: 'Card width in pixels',
+    },
+    height: {
+      control: { type: 'number', min: 150, max: 400, step: 50 },
+      description: 'Card height in pixels',
+    },
+    revealThreshold: {
+      control: { type: 'range', min: 0.3, max: 0.9, step: 0.1 },
+      description: 'Percentage of scratching needed to reveal (0-1)',
+    },
+    brushSize: {
+      control: { type: 'number', min: 20, max: 80, step: 10 },
+      description: 'Scratch brush size',
+    },
+    overlayPattern: {
+      control: 'select',
+      options: ['solid', 'stripes', 'dots', 'gradient'],
+      description: 'Overlay pattern style',
+    },
+    showProgress: {
+      control: 'boolean',
+      description: 'Show scratch progress indicator',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable scratching',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaScratchCard>
+
+export const Default: Story = {
+  args: {
+    prize: samplePrize,
+    width: 300,
+    height: 200,
+    revealThreshold: 0.5,
+    brushSize: 40,
+    overlayPattern: 'solid',
+  },
+  render: (args) => <WakaScratchCard {...args} />,
+}
+
+export const Rarities: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      {(['common', 'rare', 'epic', 'legendary'] as PrizeRarity[]).map((rarity) => (
+        <div key={rarity} className="text-center">
+          <p className="text-sm text-muted-foreground mb-2 capitalize">{rarity}</p>
+          <WakaScratchCard prize={prizesByRarity[rarity]} width={250} height={180} />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const OverlayPatterns: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Gradient (Default)</p>
+        <WakaScratchCard
+          prize={prizesByRarity.epic}
+          overlayPattern="gradient"
+          width={250}
+          height={180}
+        />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Solid</p>
+        <WakaScratchCard
+          prize={prizesByRarity.rare}
+          overlayPattern="solid"
+          overlayColor="#4f46e5"
+          width={250}
+          height={180}
+        />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Stripes</p>
+        <WakaScratchCard
+          prize={prizesByRarity.common}
+          overlayPattern="stripes"
+          overlayColor="#22c55e"
+          width={250}
+          height={180}
+        />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Dots</p>
+        <WakaScratchCard
+          prize={prizesByRarity.legendary}
+          overlayPattern="dots"
+          overlayColor="#f59e0b"
+          width={250}
+          height={180}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-6 items-start">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaScratchCard prize={prizesByRarity.common} width={200} height={150} />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaScratchCard prize={prizesByRarity.rare} width={300} height={200} />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaScratchCard prize={prizesByRarity.epic} width={400} height={280} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithProgress: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Scratch to see the progress indicator
+      </p>
+      <WakaScratchCard prize={samplePrize} showProgress />
+    </div>
+  ),
+}
+
+export const CustomRevealThreshold: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">30% threshold</p>
+        <WakaScratchCard
+          prize={prizesByRarity.rare}
+          revealThreshold={0.3}
+          showProgress
+          width={250}
+          height={180}
+        />
+      </div>
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground mb-2">80% threshold</p>
+        <WakaScratchCard
+          prize={prizesByRarity.epic}
+          revealThreshold={0.8}
+          showProgress
+          width={250}
+          height={180}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [revealed, setRevealed] = React.useState(false)
+    const [percentage, setPercentage] = React.useState(0)
+    const [revealedPrize, setRevealedPrize] = React.useState<Prize | null>(null)
+
+    return (
+      <div className="space-y-6 w-[350px]">
+        <WakaScratchCard
+          prize={samplePrize}
+          onScratch={(pct) => setPercentage(pct)}
+          onReveal={(prize) => {
+            setRevealed(true)
+            setRevealedPrize(prize)
+          }}
+          onReset={() => {
+            setRevealed(false)
+            setPercentage(0)
+            setRevealedPrize(null)
+          }}
+        />
+
+        <div className="p-4 rounded-lg border bg-muted/30">
+          <div className="grid grid-cols-2 gap-2 text-sm">
+            <div>Scratched: {percentage.toFixed(0)}%</div>
+            <div>Revealed: {revealed ? 'Yes' : 'No'}</div>
+          </div>
+          {revealedPrize && (
+            <div className="mt-2 pt-2 border-t text-sm">
+              <span className="text-muted-foreground">Prize: </span>
+              <span className="font-medium">{revealedPrize.name}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const scratchCard = useScratchCard({
+      threshold: 60,
+      onReveal: () => console.log('Revealed!'),
+    })
+
+    return (
+      <div className="space-y-6 w-[350px]">
+        <WakaScratchCard
+          prize={prizesByRarity.legendary}
+          onScratch={(pct) => scratchCard.setPercentage(pct)}
+          onReveal={() => scratchCard.reveal()}
+          onReset={() => scratchCard.reset()}
+        />
+
+        <div className="p-4 rounded-lg border">
+          <h4 className="font-medium mb-2">Hook State</h4>
+          <div className="grid grid-cols-2 gap-2 text-sm">
+            <div>Percentage: {scratchCard.percentage.toFixed(0)}%</div>
+            <div>Revealed: {scratchCard.isRevealed ? 'Yes' : 'No'}</div>
+            <div>Scratching: {scratchCard.isScratching ? 'Yes' : 'No'}</div>
+          </div>
+
+          <div className="mt-3 flex gap-2">
+            <button
+              onClick={() => scratchCard.reveal()}
+              disabled={scratchCard.isRevealed}
+              className="px-3 py-1.5 text-xs rounded bg-primary text-primary-foreground disabled:opacity-50"
+            >
+              Force Reveal
+            </button>
+            <button
+              onClick={() => scratchCard.reset()}
+              className="px-3 py-1.5 text-xs rounded border hover:bg-muted"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const LotteryTicket: Story = {
+  render: () => (
+    <div className="p-6 rounded-xl border bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/30">
+      <div className="text-center mb-4">
+        <h3 className="text-xl font-bold text-amber-600 dark:text-amber-400">Lucky Lottery</h3>
+        <p className="text-sm text-muted-foreground">Scratch to reveal your prize!</p>
+      </div>
+      <WakaScratchCard
+        prize={samplePrize}
+        overlayColor="#d97706"
+        overlayPattern="stripes"
+        showProgress
+      />
+      <p className="text-xs text-center text-muted-foreground mt-4">
+        Ticket #8472-9123 • Valid until Dec 31, 2024
+      </p>
+    </div>
+  ),
+}
+
+export const PromoCard: Story = {
+  render: () => {
+    const promoPrize: Prize = {
+      id: 'promo',
+      name: '50% OFF',
+      description: 'On your next purchase',
+      rarity: 'epic',
+      icon: <Gift className="h-12 w-12" />,
+      value: 'SAVE50',
+    }
+
+    return (
+      <div className="p-6 rounded-xl border bg-gradient-to-br from-violet-500/10 to-purple-500/10">
+        <div className="text-center mb-4">
+          <h3 className="text-lg font-bold">Special Offer</h3>
+          <p className="text-sm text-muted-foreground">Scratch to reveal your discount!</p>
+        </div>
+        <WakaScratchCard
+          prize={promoPrize}
+          overlayColor="#8b5cf6"
+          overlayPattern="dots"
+          width={280}
+          height={180}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomPrizeRenderer: Story = {
+  render: () => (
+    <WakaScratchCard
+      prize={prizesByRarity.legendary}
+      renderPrize={(prize, revealed) => (
+        <div
+          className={`h-full w-full flex flex-col items-center justify-center bg-gradient-to-br from-amber-900 to-orange-900 p-4 transition-all ${
+            revealed ? 'opacity-100' : 'opacity-0'
+          }`}
+        >
+          <Trophy className="h-16 w-16 text-amber-400 mb-3" />
+          <div className="text-2xl font-bold text-white">{prize.value}</div>
+          <div className="text-amber-300 text-center mt-2">
+            {prize.name}
+          </div>
+          {revealed && (
+            <button className="mt-4 px-4 py-2 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-400 transition-colors">
+              Claim Prize
+            </button>
+          )}
+        </div>
+      )}
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Disabled state - cannot scratch
+      </p>
+      <WakaScratchCard prize={samplePrize} disabled />
+    </div>
+  ),
+}

package/src/components/waka-secret-card/WakaSecretCard.stories.tsx

@@ -0,0 +1,314 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSecretCard, defaultSecret } from './index'
+import type { Secret } from './index'
+import * as React from 'react'
+
+const expiredSecret: Secret = {
+  id: '2',
+  name: 'Expired Certificate',
+  description: 'SSL certificate that has expired',
+  type: 'certificate',
+  value: '-----BEGIN CERTIFICATE-----...',
+  createdAt: new Date(Date.now() - 365 * 24 * 3600000),
+  updatedAt: new Date(Date.now() - 30 * 24 * 3600000),
+  expiresAt: new Date(Date.now() - 7 * 24 * 3600000),
+  tags: ['ssl', 'critical'],
+}
+
+const expiringSoonSecret: Secret = {
+  id: '3',
+  name: 'Database Password',
+  description: 'Password for production database',
+  type: 'password',
+  value: 'super-secret-password-123',
+  createdAt: new Date(Date.now() - 180 * 24 * 3600000),
+  updatedAt: new Date(Date.now() - 5 * 24 * 3600000),
+  expiresAt: new Date(Date.now() + 3 * 24 * 3600000),
+  rotatedAt: new Date(Date.now() - 5 * 24 * 3600000),
+  rotationPeriod: 90,
+  lastAccessedAt: new Date(Date.now() - 12 * 3600000),
+  lastAccessedBy: 'postgres-service',
+  tags: ['database', 'production'],
+}
+
+const needsRotationSecret: Secret = {
+  id: '4',
+  name: 'AWS Secret Key',
+  description: 'AWS access credentials',
+  type: 'api-key',
+  value: 'wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY',
+  createdAt: new Date(Date.now() - 120 * 24 * 3600000),
+  updatedAt: new Date(Date.now() - 45 * 24 * 3600000),
+  rotatedAt: new Date(Date.now() - 45 * 24 * 3600000),
+  rotationPeriod: 30,
+  lastAccessedAt: new Date(Date.now() - 1 * 3600000),
+  lastAccessedBy: 's3-backup-job',
+  tags: ['aws', 'cloud'],
+}
+
+const tokenSecret: Secret = {
+  id: '5',
+  name: 'GitHub Personal Access Token',
+  type: 'token',
+  value: 'ghp_1234567890abcdefghijklmnopqrstuvwxyz',
+  createdAt: new Date(Date.now() - 60 * 24 * 3600000),
+  updatedAt: new Date(Date.now() - 60 * 24 * 3600000),
+  tags: ['github', 'ci-cd'],
+}
+
+const simpleSecret: Secret = {
+  id: '6',
+  name: 'Simple API Key',
+  type: 'api-key',
+  createdAt: new Date(Date.now() - 30 * 24 * 3600000),
+  updatedAt: new Date(Date.now() - 30 * 24 * 3600000),
+}
+
+const meta: Meta<typeof WakaSecretCard> = {
+  title: 'Components/DevOps/WakaSecretCard',
+  component: WakaSecretCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A secret management card with expiration warnings, rotation indicators, access history, and secure value display.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isValueVisible: {
+      control: 'boolean',
+      description: 'Whether the secret value is visible',
+    },
+    showHistory: {
+      control: 'boolean',
+      description: 'Show access history section',
+    },
+    compact: {
+      control: 'boolean',
+      description: 'Compact row mode',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSecretCard>
+
+export const Default: Story = {
+  args: {
+    secret: defaultSecret,
+  },
+  render: (args) => (
+    <div className="w-[500px]">
+      <WakaSecretCard
+        {...args}
+        onRotate={() => console.log('Rotate')}
+        onDelete={() => console.log('Delete')}
+        onCopy={() => console.log('Copy')}
+        onView={() => console.log('View')}
+      />
+    </div>
+  ),
+}
+
+export const WithAccessHistory: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaSecretCard
+        secret={defaultSecret}
+        showHistory
+        onRotate={() => console.log('Rotate')}
+        onDelete={() => console.log('Delete')}
+        onCopy={() => console.log('Copy')}
+        onView={() => console.log('View')}
+      />
+    </div>
+  ),
+}
+
+export const Expired: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaSecretCard
+        secret={expiredSecret}
+        onRotate={() => console.log('Rotate')}
+        onDelete={() => console.log('Delete')}
+      />
+    </div>
+  ),
+}
+
+export const ExpiringSoon: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaSecretCard
+        secret={expiringSoonSecret}
+        onRotate={() => console.log('Rotate')}
+        onDelete={() => console.log('Delete')}
+        onCopy={() => console.log('Copy')}
+        onView={() => console.log('View')}
+      />
+    </div>
+  ),
+}
+
+export const NeedsRotation: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaSecretCard
+        secret={needsRotationSecret}
+        onRotate={() => console.log('Rotate')}
+        onDelete={() => console.log('Delete')}
+        onCopy={() => console.log('Copy')}
+        onView={() => console.log('View')}
+      />
+    </div>
+  ),
+}
+
+export const AllTypes: Story = {
+  render: () => {
+    const types: Secret['type'][] = ['api-key', 'password', 'certificate', 'token', 'other']
+
+    return (
+      <div className="space-y-4 w-[500px]">
+        {types.map((type) => (
+          <WakaSecretCard
+            key={type}
+            secret={{
+              id: type,
+              name: `${type.replace('-', ' ')} Secret`,
+              type,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            }}
+            compact
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const ValueVisible: Story = {
+  render: () => {
+    const [visible, setVisible] = React.useState(false)
+
+    return (
+      <div className="w-[500px]">
+        <WakaSecretCard
+          secret={defaultSecret}
+          isValueVisible={visible}
+          onView={() => setVisible(!visible)}
+          onCopy={() => {
+            navigator.clipboard?.writeText(defaultSecret.value || '')
+            alert('Copied to clipboard!')
+          }}
+          onRotate={() => console.log('Rotate')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Compact: Story = {
+  render: () => (
+    <div className="space-y-2 w-[500px]">
+      <WakaSecretCard
+        secret={defaultSecret}
+        compact
+        onCopy={() => console.log('Copy')}
+        onView={() => console.log('View')}
+        onRotate={() => console.log('Rotate')}
+      />
+      <WakaSecretCard
+        secret={expiredSecret}
+        compact
+        onCopy={() => console.log('Copy')}
+        onRotate={() => console.log('Rotate')}
+      />
+      <WakaSecretCard
+        secret={expiringSoonSecret}
+        compact
+        onCopy={() => console.log('Copy')}
+        onRotate={() => console.log('Rotate')}
+      />
+      <WakaSecretCard
+        secret={needsRotationSecret}
+        compact
+        onCopy={() => console.log('Copy')}
+        onRotate={() => console.log('Rotate')}
+      />
+    </div>
+  ),
+}
+
+export const NoActions: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Read-only view without action buttons
+      </p>
+      <WakaSecretCard secret={tokenSecret} />
+    </div>
+  ),
+}
+
+export const MinimalSecret: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Secret with minimal information
+      </p>
+      <WakaSecretCard
+        secret={simpleSecret}
+        onRotate={() => console.log('Rotate')}
+        onDelete={() => console.log('Delete')}
+      />
+    </div>
+  ),
+}
+
+export const SecretVault: Story = {
+  render: () => {
+    const secrets: Secret[] = [
+      defaultSecret,
+      expiredSecret,
+      expiringSoonSecret,
+      needsRotationSecret,
+      tokenSecret,
+    ]
+
+    return (
+      <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">Secret Vault</h2>
+            <p className="text-sm text-muted-foreground">Production Environment</p>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-red-500 font-medium">1 expired</span>
+            <span className="text-muted-foreground">•</span>
+            <span className="text-yellow-500 font-medium">1 expiring soon</span>
+            <span className="text-muted-foreground">•</span>
+            <span className="text-orange-500 font-medium">1 needs rotation</span>
+          </div>
+        </div>
+
+        <div className="space-y-2 w-[500px]">
+          {secrets.map((secret) => (
+            <WakaSecretCard
+              key={secret.id}
+              secret={secret}
+              compact
+              onCopy={() => console.log('Copy:', secret.name)}
+              onView={() => console.log('View:', secret.name)}
+              onRotate={() => console.log('Rotate:', secret.name)}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  },
+}