@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-glow-card/WakaGlowCard.stories.tsx

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaGlowCard, WakaGlowCardPrimary, WakaGlowCardSuccess, WakaGlowCardWarning, WakaGlowCardDanger, WakaGlowCardRainbow, WakaGlowGrid } from './index'
+import * as React from 'react'
+import { Zap, Rocket, Shield, Star, Heart, Code } from 'lucide-react'
+
+const meta: Meta<typeof WakaGlowCard> = {
+  title: 'Components/Effects/WakaGlowCard',
+  component: WakaGlowCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A card component with cursor-following glow effect, border glow, and various hover animations.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    glowColor: {
+      control: 'color',
+      description: 'Glow color (CSS color value)',
+    },
+    glowIntensity: {
+      control: { type: 'range', min: 0, max: 1, step: 0.05 },
+      description: 'Glow intensity (0-1)',
+    },
+    glowSize: {
+      control: { type: 'range', min: 100, max: 800, step: 50 },
+      description: 'Glow size in pixels',
+    },
+    borderGlow: {
+      control: 'boolean',
+      description: 'Show border glow',
+    },
+    followCursor: {
+      control: 'boolean',
+      description: 'Glow follows cursor',
+    },
+    hoverEffect: {
+      control: 'select',
+      options: ['lift', 'scale', 'tilt', 'none'],
+      description: 'Animation on hover',
+    },
+    gradient: {
+      control: 'boolean',
+      description: 'Gradient background',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaGlowCard>
+
+export const Default: Story = {
+  args: {
+    className: 'w-[350px] p-6',
+  },
+  render: (args) => (
+    <WakaGlowCard {...args}>
+      <h3 className="font-semibold text-lg mb-2">Glow Card</h3>
+      <p className="text-muted-foreground">
+        Hover over this card to see the cursor-following glow effect.
+      </p>
+    </WakaGlowCard>
+  ),
+}
+
+export const HoverEffects: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <WakaGlowCard hoverEffect="lift" className="p-6">
+        <h4 className="font-medium mb-2">Lift Effect</h4>
+        <p className="text-sm text-muted-foreground">Card lifts on hover</p>
+      </WakaGlowCard>
+      <WakaGlowCard hoverEffect="scale" className="p-6">
+        <h4 className="font-medium mb-2">Scale Effect</h4>
+        <p className="text-sm text-muted-foreground">Card scales on hover</p>
+      </WakaGlowCard>
+      <WakaGlowCard hoverEffect="tilt" className="p-6">
+        <h4 className="font-medium mb-2">Tilt Effect</h4>
+        <p className="text-sm text-muted-foreground">Card tilts with cursor</p>
+      </WakaGlowCard>
+      <WakaGlowCard hoverEffect="none" className="p-6">
+        <h4 className="font-medium mb-2">No Effect</h4>
+        <p className="text-sm text-muted-foreground">Only glow, no animation</p>
+      </WakaGlowCard>
+    </div>
+  ),
+}
+
+export const ColorVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <WakaGlowCardPrimary className="w-[350px] p-6">
+        <div className="flex items-center gap-3">
+          <Zap className="h-6 w-6 text-primary" />
+          <div>
+            <h4 className="font-medium">Primary</h4>
+            <p className="text-sm text-muted-foreground">Uses primary color</p>
+          </div>
+        </div>
+      </WakaGlowCardPrimary>
+
+      <WakaGlowCardSuccess className="w-[350px] p-6">
+        <div className="flex items-center gap-3">
+          <Shield className="h-6 w-6 text-green-500" />
+          <div>
+            <h4 className="font-medium">Success</h4>
+            <p className="text-sm text-muted-foreground">Green success glow</p>
+          </div>
+        </div>
+      </WakaGlowCardSuccess>
+
+      <WakaGlowCardWarning className="w-[350px] p-6">
+        <div className="flex items-center gap-3">
+          <Star className="h-6 w-6 text-yellow-500" />
+          <div>
+            <h4 className="font-medium">Warning</h4>
+            <p className="text-sm text-muted-foreground">Yellow warning glow</p>
+          </div>
+        </div>
+      </WakaGlowCardWarning>
+
+      <WakaGlowCardDanger className="w-[350px] p-6">
+        <div className="flex items-center gap-3">
+          <Heart className="h-6 w-6 text-destructive" />
+          <div>
+            <h4 className="font-medium">Danger</h4>
+            <p className="text-sm text-muted-foreground">Red danger glow</p>
+          </div>
+        </div>
+      </WakaGlowCardDanger>
+    </div>
+  ),
+}
+
+export const Rainbow: Story = {
+  render: () => (
+    <WakaGlowCardRainbow className="w-[350px] p-6">
+      <div className="flex items-center gap-3">
+        <Rocket className="h-8 w-8" />
+        <div>
+          <h3 className="font-semibold text-lg">Rainbow Card</h3>
+          <p className="text-sm text-muted-foreground">
+            Animated rainbow border effect
+          </p>
+        </div>
+      </div>
+    </WakaGlowCardRainbow>
+  ),
+}
+
+export const WithGradient: Story = {
+  render: () => (
+    <WakaGlowCard gradient className="w-[350px] p-6">
+      <h3 className="font-semibold text-lg mb-2">Gradient Background</h3>
+      <p className="text-muted-foreground">
+        This card has a subtle gradient that intensifies on hover.
+      </p>
+    </WakaGlowCard>
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <WakaGlowCard glowColor="rgb(147, 51, 234)" className="w-[200px] p-6">
+        <h4 className="font-medium">Purple</h4>
+        <p className="text-sm text-muted-foreground">Custom purple glow</p>
+      </WakaGlowCard>
+      <WakaGlowCard glowColor="rgb(236, 72, 153)" className="w-[200px] p-6">
+        <h4 className="font-medium">Pink</h4>
+        <p className="text-sm text-muted-foreground">Custom pink glow</p>
+      </WakaGlowCard>
+      <WakaGlowCard glowColor="rgb(6, 182, 212)" className="w-[200px] p-6">
+        <h4 className="font-medium">Cyan</h4>
+        <p className="text-sm text-muted-foreground">Custom cyan glow</p>
+      </WakaGlowCard>
+    </div>
+  ),
+}
+
+export const IntensityLevels: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <WakaGlowCard glowIntensity={0.1} className="w-[200px] p-6">
+        <h4 className="font-medium">Subtle</h4>
+        <p className="text-sm text-muted-foreground">10% intensity</p>
+      </WakaGlowCard>
+      <WakaGlowCard glowIntensity={0.25} className="w-[200px] p-6">
+        <h4 className="font-medium">Medium</h4>
+        <p className="text-sm text-muted-foreground">25% intensity</p>
+      </WakaGlowCard>
+      <WakaGlowCard glowIntensity={0.4} className="w-[200px] p-6">
+        <h4 className="font-medium">Strong</h4>
+        <p className="text-sm text-muted-foreground">40% intensity</p>
+      </WakaGlowCard>
+    </div>
+  ),
+}
+
+export const GridLayout: Story = {
+  render: () => (
+    <WakaGlowGrid columns={3} gap="md">
+      {[
+        { icon: <Zap className="h-6 w-6" />, title: 'Fast', desc: 'Lightning speed' },
+        { icon: <Shield className="h-6 w-6" />, title: 'Secure', desc: 'Enterprise grade' },
+        { icon: <Star className="h-6 w-6" />, title: 'Premium', desc: 'Top quality' },
+        { icon: <Heart className="h-6 w-6" />, title: 'Loved', desc: 'By developers' },
+        { icon: <Rocket className="h-6 w-6" />, title: 'Powerful', desc: 'Feature rich' },
+        { icon: <Code className="h-6 w-6" />, title: 'Modern', desc: 'Latest tech' },
+      ].map((item, i) => (
+        <WakaGlowCard key={i} className="p-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-primary/10 text-primary">{item.icon}</div>
+            <div>
+              <h4 className="font-medium">{item.title}</h4>
+              <p className="text-sm text-muted-foreground">{item.desc}</p>
+            </div>
+          </div>
+        </WakaGlowCard>
+      ))}
+    </WakaGlowGrid>
+  ),
+}
+
+export const ProductCard: Story = {
+  render: () => (
+    <WakaGlowCard
+      glowColor="rgb(124, 58, 237)"
+      gradient
+      hoverEffect="lift"
+      className="w-[350px] overflow-hidden"
+    >
+      <div className="aspect-video bg-gradient-to-br from-violet-500 to-purple-700" />
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium text-violet-500">PRO PLAN</span>
+          <span className="text-xs bg-violet-500/10 text-violet-500 px-2 py-1 rounded-full">Popular</span>
+        </div>
+        <h3 className="font-bold text-xl mb-2">Premium Features</h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          Unlock all advanced features and get priority support.
+        </p>
+        <div className="flex items-end gap-1">
+          <span className="text-3xl font-bold">$49</span>
+          <span className="text-muted-foreground">/month</span>
+        </div>
+      </div>
+    </WakaGlowCard>
+  ),
+}
+
+export const NoBorderGlow: Story = {
+  render: () => (
+    <WakaGlowCard borderGlow={false} className="w-[350px] p-6">
+      <h3 className="font-semibold text-lg mb-2">No Border Glow</h3>
+      <p className="text-muted-foreground">
+        This card only has the center glow effect, no border glow.
+      </p>
+    </WakaGlowCard>
+  ),
+}
+
+export const StaticGlow: Story = {
+  render: () => (
+    <WakaGlowCard followCursor={false} className="w-[350px] p-6">
+      <h3 className="font-semibold text-lg mb-2">Static Glow</h3>
+      <p className="text-muted-foreground">
+        The glow doesn't follow the cursor - it stays centered.
+      </p>
+    </WakaGlowCard>
+  ),
+}

package/src/components/waka-haptic-button/WakaHapticButton.stories.tsx

@@ -0,0 +1,349 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaHapticButton, WakaHapticIconButton } from './index'
+import * as React from 'react'
+import { Heart, Plus, Send, Download, Share2, Bell, Settings, Trash2, Check, X, ArrowRight, Star } from 'lucide-react'
+
+const meta: Meta<typeof WakaHapticButton> = {
+  title: 'Components/Effects/WakaHapticButton',
+  component: WakaHapticButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A button component with haptic feedback, ripple effect, press animations, and multiple variants.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'outline', 'ghost', 'glass', 'gradient', 'neon'],
+      description: 'Button variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg', 'xl', 'icon', 'icon-sm', 'icon-lg'],
+      description: 'Button size',
+    },
+    rounded: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'full'],
+      description: 'Border radius',
+    },
+    hapticEnabled: {
+      control: 'boolean',
+      description: 'Enable haptic feedback',
+    },
+    ripple: {
+      control: 'boolean',
+      description: 'Enable ripple effect',
+    },
+    pressScale: {
+      control: 'boolean',
+      description: 'Enable press scale animation',
+    },
+    glowOnPress: {
+      control: 'boolean',
+      description: 'Enable glow effect on press',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Loading state',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaHapticButton>
+
+export const Default: Story = {
+  args: {
+    children: 'Click Me',
+  },
+  render: (args) => <WakaHapticButton {...args} />,
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <WakaHapticButton variant="default">Default</WakaHapticButton>
+      <WakaHapticButton variant="secondary">Secondary</WakaHapticButton>
+      <WakaHapticButton variant="destructive">Destructive</WakaHapticButton>
+      <WakaHapticButton variant="outline">Outline</WakaHapticButton>
+      <WakaHapticButton variant="ghost">Ghost</WakaHapticButton>
+      <WakaHapticButton variant="gradient">Gradient</WakaHapticButton>
+      <WakaHapticButton variant="neon">Neon</WakaHapticButton>
+    </div>
+  ),
+}
+
+export const GlassVariant: Story = {
+  render: () => (
+    <div className="p-8 rounded-xl bg-gradient-to-br from-violet-600 to-indigo-800">
+      <WakaHapticButton variant="glass">
+        Glass Button
+      </WakaHapticButton>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <WakaHapticButton size="sm">Small</WakaHapticButton>
+      <WakaHapticButton size="default">Default</WakaHapticButton>
+      <WakaHapticButton size="lg">Large</WakaHapticButton>
+      <WakaHapticButton size="xl">Extra Large</WakaHapticButton>
+    </div>
+  ),
+}
+
+export const Rounded: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaHapticButton rounded="sm">Small Radius</WakaHapticButton>
+      <WakaHapticButton rounded="default">Default</WakaHapticButton>
+      <WakaHapticButton rounded="lg">Large Radius</WakaHapticButton>
+      <WakaHapticButton rounded="full">Full Radius</WakaHapticButton>
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <WakaHapticButton leftIcon={<Send className="h-4 w-4" />}>
+        Send
+      </WakaHapticButton>
+      <WakaHapticButton rightIcon={<ArrowRight className="h-4 w-4" />}>
+        Continue
+      </WakaHapticButton>
+      <WakaHapticButton leftIcon={<Download className="h-4 w-4" />}>
+        Download
+      </WakaHapticButton>
+      <WakaHapticButton variant="destructive" leftIcon={<Trash2 className="h-4 w-4" />}>
+        Delete
+      </WakaHapticButton>
+    </div>
+  ),
+}
+
+export const IconButtons: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaHapticIconButton icon={<Plus className="h-5 w-5" />} aria-label="Add" />
+      <WakaHapticIconButton icon={<Heart className="h-5 w-5" />} aria-label="Like" variant="secondary" />
+      <WakaHapticIconButton icon={<Bell className="h-5 w-5" />} aria-label="Notifications" variant="outline" />
+      <WakaHapticIconButton icon={<Settings className="h-5 w-5" />} aria-label="Settings" variant="ghost" />
+      <WakaHapticIconButton icon={<X className="h-5 w-5" />} aria-label="Close" variant="destructive" />
+    </div>
+  ),
+}
+
+export const IconButtonSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <WakaHapticIconButton icon={<Star className="h-4 w-4" />} aria-label="Star" size="icon-sm" />
+      <WakaHapticIconButton icon={<Star className="h-5 w-5" />} aria-label="Star" size="icon" />
+      <WakaHapticIconButton icon={<Star className="h-6 w-6" />} aria-label="Star" size="icon-lg" />
+    </div>
+  ),
+}
+
+export const HapticPatterns: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Test on mobile device for haptic feedback</p>
+      <div className="flex flex-wrap gap-4">
+        <WakaHapticButton hapticPattern="light">Light</WakaHapticButton>
+        <WakaHapticButton hapticPattern="medium">Medium</WakaHapticButton>
+        <WakaHapticButton hapticPattern="heavy">Heavy</WakaHapticButton>
+        <WakaHapticButton hapticPattern="success" variant="secondary" leftIcon={<Check className="h-4 w-4" />}>
+          Success
+        </WakaHapticButton>
+        <WakaHapticButton hapticPattern="warning" className="bg-orange-500 hover:bg-orange-600">
+          Warning
+        </WakaHapticButton>
+        <WakaHapticButton hapticPattern="error" variant="destructive">
+          Error
+        </WakaHapticButton>
+      </div>
+    </div>
+  ),
+}
+
+export const RippleEffect: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaHapticButton ripple>With Ripple</WakaHapticButton>
+      <WakaHapticButton ripple={false}>No Ripple</WakaHapticButton>
+    </div>
+  ),
+}
+
+export const CustomRippleColor: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaHapticButton rippleColor="rgba(255, 255, 255, 0.5)">
+        White Ripple
+      </WakaHapticButton>
+      <WakaHapticButton variant="secondary" rippleColor="rgba(0, 0, 0, 0.2)">
+        Dark Ripple
+      </WakaHapticButton>
+      <WakaHapticButton rippleColor="rgba(147, 51, 234, 0.4)">
+        Purple Ripple
+      </WakaHapticButton>
+    </div>
+  ),
+}
+
+export const PressAnimations: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaHapticButton pressScale pressScaleFactor={0.95}>
+        Press Scale
+      </WakaHapticButton>
+      <WakaHapticButton pressScale={false}>
+        No Scale
+      </WakaHapticButton>
+    </div>
+  ),
+}
+
+export const GlowOnPress: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaHapticButton glowOnPress>
+        Glow Effect
+      </WakaHapticButton>
+      <WakaHapticButton glowOnPress variant="secondary" glowColor="rgba(147, 51, 234, 0.5)">
+        Custom Glow
+      </WakaHapticButton>
+      <WakaHapticButton glowOnPress variant="destructive">
+        Destructive Glow
+      </WakaHapticButton>
+    </div>
+  ),
+}
+
+export const LoadingState: Story = {
+  render: () => {
+    const [loading, setLoading] = React.useState(false)
+
+    const handleClick = () => {
+      setLoading(true)
+      setTimeout(() => setLoading(false), 2000)
+    }
+
+    return (
+      <div className="flex gap-4">
+        <WakaHapticButton loading>Loading...</WakaHapticButton>
+        <WakaHapticButton loading={loading} onClick={handleClick}>
+          {loading ? 'Processing...' : 'Click to Load'}
+        </WakaHapticButton>
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaHapticButton disabled>Disabled</WakaHapticButton>
+      <WakaHapticButton disabled variant="secondary">Disabled</WakaHapticButton>
+      <WakaHapticButton disabled variant="outline">Disabled</WakaHapticButton>
+    </div>
+  ),
+}
+
+export const SubmitForm: Story = {
+  render: () => {
+    const [loading, setLoading] = React.useState(false)
+    const [success, setSuccess] = React.useState(false)
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+      setLoading(true)
+      setTimeout(() => {
+        setLoading(false)
+        setSuccess(true)
+        setTimeout(() => setSuccess(false), 2000)
+      }, 1500)
+    }
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[300px] space-y-4">
+        <input
+          type="text"
+          className="w-full px-3 py-2 border rounded-md"
+          placeholder="Enter your name"
+        />
+        <WakaHapticButton
+          type="submit"
+          className="w-full"
+          loading={loading}
+          hapticPattern={success ? 'success' : 'medium'}
+          leftIcon={success ? <Check className="h-4 w-4" /> : undefined}
+          variant={success ? 'secondary' : 'default'}
+        >
+          {success ? 'Submitted!' : loading ? 'Submitting...' : 'Submit'}
+        </WakaHapticButton>
+      </form>
+    )
+  },
+}
+
+export const SocialActions: Story = {
+  render: () => {
+    const [liked, setLiked] = React.useState(false)
+    const [shared, setShared] = React.useState(false)
+
+    return (
+      <div className="flex gap-3">
+        <WakaHapticButton
+          variant={liked ? 'destructive' : 'outline'}
+          size="sm"
+          hapticPattern={liked ? 'success' : 'selection'}
+          leftIcon={<Heart className={`h-4 w-4 ${liked ? 'fill-current' : ''}`} />}
+          onClick={() => setLiked(!liked)}
+        >
+          {liked ? 'Liked' : 'Like'}
+        </WakaHapticButton>
+        <WakaHapticButton
+          variant={shared ? 'secondary' : 'outline'}
+          size="sm"
+          hapticPattern="selection"
+          leftIcon={<Share2 className="h-4 w-4" />}
+          onClick={() => setShared(!shared)}
+        >
+          {shared ? 'Shared' : 'Share'}
+        </WakaHapticButton>
+      </div>
+    )
+  },
+}
+
+export const ButtonGroup: Story = {
+  render: () => (
+    <div className="flex">
+      <WakaHapticButton rounded="sm" className="rounded-r-none border-r-0">
+        Previous
+      </WakaHapticButton>
+      <WakaHapticButton rounded="sm" className="rounded-none border-r-0">
+        Current
+      </WakaHapticButton>
+      <WakaHapticButton rounded="sm" className="rounded-l-none">
+        Next
+      </WakaHapticButton>
+    </div>
+  ),
+}
+
+export const NoHaptic: Story = {
+  render: () => (
+    <WakaHapticButton hapticEnabled={false}>
+      No Haptic Feedback
+    </WakaHapticButton>
+  ),
+}