@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-success-explosion/WakaSuccessExplosion.stories.tsx

@@ -0,0 +1,389 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSuccessExplosion, useSuccessExplosion } from './index'
+import type { WakaSuccessExplosionRef } from './index'
+import * as React from 'react'
+import { Button } from '../button'
+
+const meta: Meta<typeof WakaSuccessExplosion> = {
+  title: 'Components/Effects/WakaSuccessExplosion',
+  component: WakaSuccessExplosion,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A confetti explosion animation with checkmark for celebrating successful actions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description: 'Size of the explosion',
+    },
+    particleCount: {
+      control: { type: 'range', min: 8, max: 50, step: 2 },
+      description: 'Number of confetti particles',
+    },
+    duration: {
+      control: { type: 'range', min: 500, max: 2000, step: 100 },
+      description: 'Animation duration in ms',
+    },
+    showCheckmark: {
+      control: 'boolean',
+      description: 'Show checkmark animation',
+    },
+    autoHide: {
+      control: 'boolean',
+      description: 'Auto-hide after animation',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSuccessExplosion>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    const handleClick = () => {
+      setTrigger(true)
+      setTimeout(() => setTrigger(false), 100)
+    }
+
+    return (
+      <div className="flex flex-col items-center gap-6">
+        <WakaSuccessExplosion trigger={trigger} />
+        <Button onClick={handleClick}>Trigger Explosion</Button>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => {
+    const [triggers, setTriggers] = React.useState({
+      sm: false,
+      md: false,
+      lg: false,
+      xl: false,
+    })
+
+    const handleTrigger = (size: keyof typeof triggers) => {
+      setTriggers((prev) => ({ ...prev, [size]: true }))
+      setTimeout(() => setTriggers((prev) => ({ ...prev, [size]: false })), 100)
+    }
+
+    return (
+      <div className="flex gap-12">
+        {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+          <div key={size} className="flex flex-col items-center gap-4">
+            <WakaSuccessExplosion trigger={triggers[size]} size={size} />
+            <Button size="sm" variant="outline" onClick={() => handleTrigger(size)}>
+              {size.toUpperCase()}
+            </Button>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}
+
+export const CustomColors: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="flex flex-col items-center gap-6">
+        <WakaSuccessExplosion
+          trigger={trigger}
+          primaryColor="rgb(147, 51, 234)"
+          secondaryColor="rgb(236, 72, 153)"
+          accentColor="rgb(251, 146, 60)"
+          checkmarkColor="rgb(147, 51, 234)"
+        />
+        <Button
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Purple Explosion
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const ParticleCounts: Story = {
+  render: () => {
+    const [triggers, setTriggers] = React.useState({
+      few: false,
+      normal: false,
+      many: false,
+    })
+
+    return (
+      <div className="flex gap-12">
+        <div className="flex flex-col items-center gap-4">
+          <WakaSuccessExplosion trigger={triggers.few} particleCount={12} />
+          <Button
+            variant="outline"
+            onClick={() => {
+              setTriggers((p) => ({ ...p, few: true }))
+              setTimeout(() => setTriggers((p) => ({ ...p, few: false })), 100)
+            }}
+          >
+            12 Particles
+          </Button>
+        </div>
+        <div className="flex flex-col items-center gap-4">
+          <WakaSuccessExplosion trigger={triggers.normal} particleCount={24} />
+          <Button
+            variant="outline"
+            onClick={() => {
+              setTriggers((p) => ({ ...p, normal: true }))
+              setTimeout(() => setTriggers((p) => ({ ...p, normal: false })), 100)
+            }}
+          >
+            24 Particles
+          </Button>
+        </div>
+        <div className="flex flex-col items-center gap-4">
+          <WakaSuccessExplosion trigger={triggers.many} particleCount={48} />
+          <Button
+            variant="outline"
+            onClick={() => {
+              setTriggers((p) => ({ ...p, many: true }))
+              setTimeout(() => setTriggers((p) => ({ ...p, many: false })), 100)
+            }}
+          >
+            48 Particles
+          </Button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const NoCheckmark: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="flex flex-col items-center gap-6">
+        <WakaSuccessExplosion trigger={trigger} showCheckmark={false} />
+        <Button
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Confetti Only
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const PersistentCheckmark: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="flex flex-col items-center gap-6">
+        <WakaSuccessExplosion trigger={trigger} autoHide={false} />
+        <Button
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Show (Stays Visible)
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const WithRef: Story = {
+  render: () => {
+    const ref = React.useRef<WakaSuccessExplosionRef>(null)
+
+    return (
+      <div className="flex flex-col items-center gap-6">
+        <WakaSuccessExplosion ref={ref} />
+        <div className="flex gap-2">
+          <Button onClick={() => ref.current?.explode()}>Explode</Button>
+          <Button variant="outline" onClick={() => ref.current?.reset()}>
+            Reset
+          </Button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { explode, ExplosionComponent } = useSuccessExplosion({
+      size: 'lg',
+      onComplete: () => console.log('Explosion complete!'),
+    })
+
+    return (
+      <div className="flex flex-col items-center gap-6">
+        <ExplosionComponent />
+        <Button onClick={explode}>Trigger via Hook</Button>
+      </div>
+    )
+  },
+}
+
+export const FormSubmitExample: Story = {
+  render: () => {
+    const [submitted, setSubmitted] = React.useState(false)
+    const [trigger, setTrigger] = React.useState(false)
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+      setSubmitted(true)
+      setTrigger(true)
+      setTimeout(() => setTrigger(false), 100)
+    }
+
+    if (submitted) {
+      return (
+        <div className="text-center">
+          <WakaSuccessExplosion trigger={trigger} size="lg" autoHide={false} />
+          <p className="mt-4 text-lg font-medium">Form Submitted!</p>
+          <Button
+            variant="outline"
+            className="mt-4"
+            onClick={() => setSubmitted(false)}
+          >
+            Submit Another
+          </Button>
+        </div>
+      )
+    }
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[300px] space-y-4">
+        <div>
+          <label className="text-sm font-medium">Email</label>
+          <input
+            type="email"
+            required
+            className="w-full mt-1 px-3 py-2 border rounded-md"
+            placeholder="you@example.com"
+          />
+        </div>
+        <div>
+          <label className="text-sm font-medium">Message</label>
+          <textarea
+            required
+            className="w-full mt-1 px-3 py-2 border rounded-md"
+            rows={3}
+            placeholder="Your message..."
+          />
+        </div>
+        <Button type="submit" className="w-full">
+          Submit
+        </Button>
+      </form>
+    )
+  },
+}
+
+export const PaymentSuccess: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+    const [processing, setProcessing] = React.useState(false)
+    const [success, setSuccess] = React.useState(false)
+
+    const handlePayment = () => {
+      setProcessing(true)
+      setTimeout(() => {
+        setProcessing(false)
+        setSuccess(true)
+        setTrigger(true)
+        setTimeout(() => setTrigger(false), 100)
+      }, 1500)
+    }
+
+    if (success) {
+      return (
+        <div className="text-center p-8 border rounded-lg">
+          <WakaSuccessExplosion
+            trigger={trigger}
+            size="xl"
+            autoHide={false}
+            primaryColor="rgb(34, 197, 94)"
+            secondaryColor="rgb(250, 204, 21)"
+            accentColor="rgb(59, 130, 246)"
+          />
+          <h3 className="mt-4 text-xl font-bold text-green-600">Payment Successful!</h3>
+          <p className="text-muted-foreground">Thank you for your purchase.</p>
+          <Button variant="outline" className="mt-4" onClick={() => setSuccess(false)}>
+            Make Another Payment
+          </Button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="w-[350px] p-6 border rounded-lg">
+        <h3 className="font-semibold text-lg mb-4">Complete Payment</h3>
+        <div className="space-y-4">
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Subtotal</span>
+            <span>$99.00</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Tax</span>
+            <span>$8.91</span>
+          </div>
+          <div className="flex justify-between font-semibold border-t pt-4">
+            <span>Total</span>
+            <span>$107.91</span>
+          </div>
+          <Button className="w-full" onClick={handlePayment} disabled={processing}>
+            {processing ? 'Processing...' : 'Pay Now'}
+          </Button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithCallback: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+    const [message, setMessage] = React.useState('')
+
+    return (
+      <div className="flex flex-col items-center gap-6">
+        <WakaSuccessExplosion
+          trigger={trigger}
+          onComplete={() => setMessage('Animation completed!')}
+        />
+        <Button
+          onClick={() => {
+            setMessage('')
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Trigger
+        </Button>
+        {message && (
+          <p className="text-sm text-green-600 font-medium">{message}</p>
+        )}
+      </div>
+    )
+  },
+}