@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-autocomplete/WakaAutocomplete.stories.tsx

@@ -0,0 +1,224 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaAutocomplete, type AutocompleteOption } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaAutocomplete> = {
+  title: 'Components/Forms/WakaAutocomplete',
+  component: WakaAutocomplete,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An autocomplete component with async search, multi-select, and creatable options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    multiple: {
+      control: 'boolean',
+      description: 'Enable multi-select mode',
+    },
+    creatable: {
+      control: 'boolean',
+      description: 'Allow creating new options',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the component',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAutocomplete>
+
+const fruits: AutocompleteOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'honeydew', label: 'Honeydew' },
+]
+
+const groupedOptions: AutocompleteOption[] = [
+  { value: 'apple', label: 'Apple', group: 'Fruits' },
+  { value: 'banana', label: 'Banana', group: 'Fruits' },
+  { value: 'cherry', label: 'Cherry', group: 'Fruits' },
+  { value: 'carrot', label: 'Carrot', group: 'Vegetables' },
+  { value: 'broccoli', label: 'Broccoli', group: 'Vegetables' },
+  { value: 'spinach', label: 'Spinach', group: 'Vegetables' },
+]
+
+export const Default: Story = {
+  render: function AutocompleteDemo() {
+    const [value, setValue] = React.useState<string | string[] | null>(null)
+
+    return (
+      <div className="w-[300px]">
+        <WakaAutocomplete
+          options={fruits}
+          value={value as string | undefined}
+          onChange={setValue}
+          placeholder="Select a fruit..."
+          label="Favorite Fruit"
+        />
+      </div>
+    )
+  },
+}
+
+export const Multiple: Story = {
+  render: function MultipleDemo() {
+    const [value, setValue] = React.useState<string | string[] | null>([])
+
+    return (
+      <div className="w-[300px]">
+        <WakaAutocomplete
+          options={fruits}
+          value={value as string[]}
+          onChange={setValue}
+          multiple
+          placeholder="Select fruits..."
+          label="Favorite Fruits"
+          description="You can select multiple options"
+        />
+      </div>
+    )
+  },
+}
+
+export const Creatable: Story = {
+  render: function CreatableDemo() {
+    const [value, setValue] = React.useState<string | string[] | null>(null)
+
+    return (
+      <div className="w-[300px]">
+        <WakaAutocomplete
+          options={fruits}
+          value={value as string | undefined}
+          onChange={setValue}
+          creatable
+          placeholder="Select or create..."
+          label="Fruit"
+          description="Type to create a new option"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithGroups: Story = {
+  render: function GroupedDemo() {
+    const [value, setValue] = React.useState<string | string[] | null>(null)
+
+    return (
+      <div className="w-[300px]">
+        <WakaAutocomplete
+          options={groupedOptions}
+          value={value as string | undefined}
+          onChange={setValue}
+          placeholder="Select an item..."
+          label="Food"
+        />
+      </div>
+    )
+  },
+}
+
+export const AsyncSearch: Story = {
+  render: function AsyncDemo() {
+    const [value, setValue] = React.useState<string | string[] | null>(null)
+
+    const searchFn = async (query: string): Promise<AutocompleteOption[]> => {
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      return fruits.filter((f) =>
+        f.label.toLowerCase().includes(query.toLowerCase())
+      )
+    }
+
+    return (
+      <div className="w-[300px]">
+        <WakaAutocomplete
+          options={[]}
+          value={value as string | undefined}
+          onChange={setValue}
+          onSearch={searchFn}
+          placeholder="Search fruits..."
+          label="Async Search"
+          description="Type to search"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithMaxSelections: Story = {
+  render: function MaxSelectionsDemo() {
+    const [value, setValue] = React.useState<string | string[] | null>([])
+
+    return (
+      <div className="w-[300px]">
+        <WakaAutocomplete
+          options={fruits}
+          value={value as string[]}
+          onChange={setValue}
+          multiple
+          maxSelections={3}
+          placeholder="Select up to 3 fruits..."
+          label="Limited Selection"
+          description="Maximum 3 selections allowed"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: function ErrorDemo() {
+    const [value, setValue] = React.useState<string | string[] | null>(null)
+
+    return (
+      <div className="w-[300px]">
+        <WakaAutocomplete
+          options={fruits}
+          value={value as string | undefined}
+          onChange={setValue}
+          placeholder="Select a fruit..."
+          label="Required Field"
+          error="This field is required"
+        />
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaAutocomplete
+        options={fruits}
+        value="apple"
+        disabled
+        placeholder="Select a fruit..."
+        label="Disabled"
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaAutocomplete
+        options={fruits}
+        loading
+        placeholder="Loading..."
+        label="Loading State"
+      />
+    </div>
+  ),
+}

package/src/components/waka-badge-showcase/WakaBadgeShowcase.stories.tsx

@@ -0,0 +1,269 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaBadgeShowcase } from './index'
+import type { Badge } from './index'
+import * as React from 'react'
+import { Trophy, Star, Flame, Crown, Gem, Shield, Zap, Target, Heart, Award } from 'lucide-react'
+
+const sampleBadges: Badge[] = [
+  { id: '1', name: 'First Steps', description: 'Complete the tutorial', icon: <Star className="h-6 w-6" />, rarity: 'common', unlockedAt: new Date() },
+  { id: '2', name: 'Champion', description: 'Win 10 games', icon: <Trophy className="h-6 w-6" />, rarity: 'rare', unlockedAt: new Date() },
+  { id: '3', name: 'Fire Starter', description: 'Get a 7-day streak', icon: <Flame className="h-6 w-6" />, rarity: 'rare', unlockedAt: new Date() },
+  { id: '4', name: 'Gem Collector', description: 'Collect 100 gems', icon: <Gem className="h-6 w-6" />, rarity: 'epic', unlockedAt: new Date() },
+  { id: '5', name: 'Guardian', description: 'Help 50 players', icon: <Shield className="h-6 w-6" />, rarity: 'epic', unlockedAt: new Date() },
+  { id: '6', name: 'Legend', description: 'Reach max level', icon: <Crown className="h-6 w-6" />, rarity: 'legendary', unlockedAt: new Date() },
+  { id: '7', name: 'Speed Demon', description: 'Complete speedrun', icon: <Zap className="h-6 w-6" />, rarity: 'legendary' },
+  { id: '8', name: 'Sharpshooter', description: '100% accuracy', icon: <Target className="h-6 w-6" />, rarity: 'epic' },
+  { id: '9', name: 'Beloved', description: 'Get 1000 likes', icon: <Heart className="h-6 w-6" />, rarity: 'rare' },
+  { id: '10', name: 'Elite', description: 'Top 1% player', icon: <Award className="h-6 w-6" />, rarity: 'legendary' },
+]
+
+const meta: Meta<typeof WakaBadgeShowcase> = {
+  title: 'Components/Gamification/WakaBadgeShowcase',
+  component: WakaBadgeShowcase,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A badge showcase with grid/list/showcase modes, rarity tiers, and hover effects.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['grid', 'list', 'showcase'],
+      description: 'Display variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    columns: {
+      control: { type: 'number', min: 2, max: 6 },
+      description: 'Number of columns (grid mode)',
+    },
+    showLocked: {
+      control: 'boolean',
+      description: 'Show locked badges',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBadgeShowcase>
+
+export const Default: Story = {
+  args: {
+    badges: sampleBadges.slice(0, 6),
+    variant: 'grid',
+    size: 'md',
+    columns: 3,
+    showLocked: false,
+    animated: true,
+  },
+  render: (args) => (
+    <div className="w-[500px]">
+      <WakaBadgeShowcase {...args} />
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Grid</p>
+        <div className="w-[400px]">
+          <WakaBadgeShowcase badges={sampleBadges.slice(0, 6)} variant="grid" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">List</p>
+        <div className="w-[350px]">
+          <WakaBadgeShowcase badges={sampleBadges.slice(0, 4)} variant="list" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Showcase</p>
+        <div className="w-[500px]">
+          <WakaBadgeShowcase badges={sampleBadges.slice(0, 5)} variant="showcase" />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <div className="w-[300px]">
+          <WakaBadgeShowcase badges={sampleBadges.slice(0, 6)} size="sm" columns={3} />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <div className="w-[400px]">
+          <WakaBadgeShowcase badges={sampleBadges.slice(0, 6)} size="md" columns={3} />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <div className="w-[500px]">
+          <WakaBadgeShowcase badges={sampleBadges.slice(0, 6)} size="lg" columns={3} />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const RarityTiers: Story = {
+  render: () => {
+    const badgesByRarity = {
+      common: sampleBadges.filter((b) => b.rarity === 'common'),
+      rare: sampleBadges.filter((b) => b.rarity === 'rare'),
+      epic: sampleBadges.filter((b) => b.rarity === 'epic'),
+      legendary: sampleBadges.filter((b) => b.rarity === 'legendary'),
+    }
+
+    return (
+      <div className="w-[500px] space-y-6">
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="h-2 w-2 rounded-full bg-slate-400" />
+            <span className="text-sm font-medium text-slate-500">Common</span>
+          </div>
+          <WakaBadgeShowcase badges={badgesByRarity.common} columns={4} size="sm" />
+        </div>
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="h-2 w-2 rounded-full bg-blue-400" />
+            <span className="text-sm font-medium text-blue-500">Rare</span>
+          </div>
+          <WakaBadgeShowcase badges={badgesByRarity.rare} columns={4} size="sm" />
+        </div>
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="h-2 w-2 rounded-full bg-purple-400" />
+            <span className="text-sm font-medium text-purple-500">Epic</span>
+          </div>
+          <WakaBadgeShowcase badges={badgesByRarity.epic} columns={4} size="sm" />
+        </div>
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="h-2 w-2 rounded-full bg-amber-400" />
+            <span className="text-sm font-medium text-amber-500">Legendary</span>
+          </div>
+          <WakaBadgeShowcase badges={badgesByRarity.legendary} columns={4} size="sm" />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithLockedBadges: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaBadgeShowcase badges={sampleBadges} showLocked />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedBadge, setSelectedBadge] = React.useState<Badge | null>(null)
+
+    return (
+      <div className="w-[500px] space-y-4">
+        <WakaBadgeShowcase
+          badges={sampleBadges.slice(0, 6)}
+          onBadgeClick={setSelectedBadge}
+        />
+
+        {selectedBadge && (
+          <div className="p-4 rounded-lg border bg-muted/30">
+            <div className="flex items-center gap-3">
+              <div className={`p-2 rounded-lg ${
+                selectedBadge.rarity === 'legendary' ? 'bg-amber-500/20 text-amber-500' :
+                selectedBadge.rarity === 'epic' ? 'bg-purple-500/20 text-purple-500' :
+                selectedBadge.rarity === 'rare' ? 'bg-blue-500/20 text-blue-500' :
+                'bg-slate-500/20 text-slate-500'
+              }`}>
+                {selectedBadge.icon}
+              </div>
+              <div>
+                <h4 className="font-semibold">{selectedBadge.name}</h4>
+                <p className="text-sm text-muted-foreground">{selectedBadge.description}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {selectedBadge.unlockedAt ? `Unlocked ${selectedBadge.unlockedAt.toLocaleDateString()}` : 'Not unlocked'}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const ProfileShowcase: Story = {
+  render: () => (
+    <div className="w-[450px] p-6 rounded-xl border bg-card">
+      <div className="flex items-center gap-4 mb-6">
+        <div className="w-16 h-16 rounded-full bg-gradient-to-br from-violet-500 to-purple-600" />
+        <div>
+          <h3 className="text-xl font-bold">ProGamer_42</h3>
+          <p className="text-sm text-muted-foreground">Level 42 • 1,847 XP</p>
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">Featured Badges</h4>
+        <WakaBadgeShowcase
+          badges={sampleBadges.filter(b => b.unlockedAt).slice(0, 3)}
+          variant="showcase"
+        />
+      </div>
+
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <h4 className="text-sm font-medium text-muted-foreground">All Badges</h4>
+          <span className="text-xs text-muted-foreground">6/10</span>
+        </div>
+        <WakaBadgeShowcase badges={sampleBadges} showLocked columns={5} size="sm" />
+      </div>
+    </div>
+  ),
+}
+
+export const CompactWidget: Story = {
+  render: () => (
+    <div className="w-[280px] p-4 rounded-lg border">
+      <div className="flex justify-between items-center mb-3">
+        <h4 className="text-sm font-semibold">Recent Badges</h4>
+        <a href="#" className="text-xs text-primary hover:underline">View All</a>
+      </div>
+      <WakaBadgeShowcase
+        badges={sampleBadges.filter(b => b.unlockedAt).slice(0, 4)}
+        variant="grid"
+        columns={4}
+        size="sm"
+      />
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaBadgeShowcase badges={sampleBadges.slice(0, 6)} animated={false} />
+    </div>
+  ),
+}