@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-morph-button/WakaMorphButton.stories.tsx

@@ -0,0 +1,405 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaMorphButton, WakaAsyncButton, useMorphButton } from './index'
+import type { MorphState } from './index'
+import * as React from 'react'
+import { Send, Download, Trash2, Upload, Check, X, Loader2 } from 'lucide-react'
+
+const meta: Meta<typeof WakaMorphButton> = {
+  title: 'Components/Effects/WakaMorphButton',
+  component: WakaMorphButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A morphing button that transitions between states (idle, loading, success, error) with smooth animations.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['idle', 'loading', 'success', 'error'],
+      description: 'Current button state',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline', 'ghost'],
+      description: 'Button variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Button size',
+    },
+    rounded: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'full'],
+      description: 'Border radius',
+    },
+    hapticFeedback: {
+      control: 'boolean',
+      description: 'Enable haptic feedback on mobile',
+    },
+    animationDuration: {
+      control: { type: 'range', min: 100, max: 500, step: 50 },
+      description: 'Animation duration in ms',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMorphButton>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => {
+    const [state, setState] = React.useState<MorphState>('idle')
+
+    const handleClick = () => {
+      setState('loading')
+      setTimeout(() => {
+        setState('success')
+      }, 2000)
+    }
+
+    return (
+      <WakaMorphButton
+        state={state}
+        idleText="Submit"
+        loadingText="Submitting..."
+        successText="Done!"
+        onClick={handleClick}
+        onReset={() => setState('idle')}
+      />
+    )
+  },
+}
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <WakaMorphButton state="idle" idleText="Idle State" />
+      <WakaMorphButton state="loading" idleText="Submit" loadingText="Loading..." />
+      <WakaMorphButton state="success" idleText="Submit" successText="Success!" />
+      <WakaMorphButton state="error" idleText="Submit" errorText="Failed!" />
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => {
+    const [states, setStates] = React.useState<Record<string, MorphState>>({
+      default: 'idle',
+      outline: 'idle',
+      ghost: 'idle',
+    })
+
+    const handleClick = (variant: string) => {
+      setStates((prev) => ({ ...prev, [variant]: 'loading' }))
+      setTimeout(() => {
+        setStates((prev) => ({ ...prev, [variant]: 'success' }))
+      }, 1500)
+    }
+
+    return (
+      <div className="flex gap-4">
+        <WakaMorphButton
+          variant="default"
+          state={states.default}
+          idleText="Default"
+          onClick={() => handleClick('default')}
+          onReset={() => setStates((p) => ({ ...p, default: 'idle' }))}
+        />
+        <WakaMorphButton
+          variant="outline"
+          state={states.outline}
+          idleText="Outline"
+          onClick={() => handleClick('outline')}
+          onReset={() => setStates((p) => ({ ...p, outline: 'idle' }))}
+        />
+        <WakaMorphButton
+          variant="ghost"
+          state={states.ghost}
+          idleText="Ghost"
+          onClick={() => handleClick('ghost')}
+          onReset={() => setStates((p) => ({ ...p, ghost: 'idle' }))}
+        />
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <WakaMorphButton size="sm" idleText="Small" />
+      <WakaMorphButton size="default" idleText="Default" />
+      <WakaMorphButton size="lg" idleText="Large" />
+    </div>
+  ),
+}
+
+export const Rounded: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaMorphButton rounded="sm" idleText="Small" />
+      <WakaMorphButton rounded="default" idleText="Default" />
+      <WakaMorphButton rounded="lg" idleText="Large" />
+      <WakaMorphButton rounded="full" idleText="Full" />
+    </div>
+  ),
+}
+
+export const WithCustomIcons: Story = {
+  render: () => {
+    const [state, setState] = React.useState<MorphState>('idle')
+
+    const handleClick = () => {
+      setState('loading')
+      setTimeout(() => {
+        setState('success')
+      }, 2000)
+    }
+
+    return (
+      <WakaMorphButton
+        state={state}
+        idleText="Send Message"
+        loadingText="Sending..."
+        successText="Sent!"
+        errorText="Failed"
+        idleIcon={<Send className="h-4 w-4" />}
+        loadingIcon={<Loader2 className="h-4 w-4 animate-spin" />}
+        successIcon={<Check className="h-4 w-4" />}
+        errorIcon={<X className="h-4 w-4" />}
+        onClick={handleClick}
+        onReset={() => setState('idle')}
+      />
+    )
+  },
+}
+
+export const ErrorState: Story = {
+  render: () => {
+    const [state, setState] = React.useState<MorphState>('idle')
+
+    const handleClick = () => {
+      setState('loading')
+      setTimeout(() => {
+        setState('error')
+      }, 2000)
+    }
+
+    return (
+      <WakaMorphButton
+        state={state}
+        idleText="Delete Item"
+        loadingText="Deleting..."
+        successText="Deleted!"
+        errorText="Delete Failed"
+        idleIcon={<Trash2 className="h-4 w-4" />}
+        onClick={handleClick}
+        onReset={() => setState('idle')}
+      />
+    )
+  },
+}
+
+export const AsyncButton: Story = {
+  render: () => {
+    const simulateUpload = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+    }
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          WakaAsyncButton handles async state automatically
+        </p>
+        <WakaAsyncButton
+          idleText="Upload File"
+          loadingText="Uploading..."
+          successText="Uploaded!"
+          errorText="Upload Failed"
+          idleIcon={<Upload className="h-4 w-4" />}
+          onClick={simulateUpload}
+        />
+      </div>
+    )
+  },
+}
+
+export const AsyncButtonWithError: Story = {
+  render: () => {
+    const simulateFailedUpload = async () => {
+      await new Promise((_, reject) =>
+        setTimeout(() => reject(new Error('Network error')), 2000)
+      )
+    }
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Click to see error state
+        </p>
+        <WakaAsyncButton
+          idleText="Upload File"
+          loadingText="Uploading..."
+          successText="Uploaded!"
+          errorText="Upload Failed"
+          idleIcon={<Upload className="h-4 w-4" />}
+          onClick={simulateFailedUpload}
+          onError={(err) => console.log('Error:', err)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const fetchData = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+      return { success: true }
+    }
+
+    const { state, execute, isLoading, isSuccess } = useMorphButton(fetchData, {
+      onSuccess: () => console.log('Success!'),
+      resetDelay: 3000,
+    })
+
+    return (
+      <div className="space-y-4">
+        <WakaMorphButton
+          state={state}
+          idleText="Fetch Data"
+          loadingText="Fetching..."
+          successText="Data Loaded!"
+          idleIcon={<Download className="h-4 w-4" />}
+          onClick={execute}
+        />
+        <p className="text-sm text-muted-foreground">
+          Loading: {isLoading ? 'Yes' : 'No'} | Success: {isSuccess ? 'Yes' : 'No'}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const FormSubmission: Story = {
+  render: () => {
+    const [state, setState] = React.useState<MorphState>('idle')
+    const [email, setEmail] = React.useState('')
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+      setState('loading')
+      setTimeout(() => {
+        if (email.includes('@')) {
+          setState('success')
+        } else {
+          setState('error')
+        }
+      }, 1500)
+    }
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[300px] space-y-4">
+        <div>
+          <label className="text-sm font-medium">Email</label>
+          <input
+            type="text"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full mt-1 px-3 py-2 border rounded-md"
+            placeholder="you@example.com"
+          />
+        </div>
+        <WakaMorphButton
+          type="submit"
+          className="w-full"
+          state={state}
+          idleText="Subscribe"
+          loadingText="Subscribing..."
+          successText="Subscribed!"
+          errorText="Invalid Email"
+          onReset={() => setState('idle')}
+        />
+      </form>
+    )
+  },
+}
+
+export const CustomResetDelay: Story = {
+  render: () => {
+    const [state, setState] = React.useState<MorphState>('idle')
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Success state persists for 5 seconds
+        </p>
+        <WakaMorphButton
+          state={state}
+          idleText="Long Success"
+          loadingText="Processing..."
+          successText="Done! (5s)"
+          resetDelay={5000}
+          onClick={() => {
+            setState('loading')
+            setTimeout(() => setState('success'), 1500)
+          }}
+          onReset={() => setState('idle')}
+        />
+      </div>
+    )
+  },
+}
+
+export const NoHaptic: Story = {
+  render: () => {
+    const [state, setState] = React.useState<MorphState>('idle')
+
+    return (
+      <WakaMorphButton
+        state={state}
+        idleText="No Vibration"
+        hapticFeedback={false}
+        onClick={() => {
+          setState('loading')
+          setTimeout(() => setState('success'), 1500)
+        }}
+        onReset={() => setState('idle')}
+      />
+    )
+  },
+}
+
+export const CustomAnimationDuration: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <div className="text-center">
+        <WakaMorphButton
+          idleText="Fast (100ms)"
+          animationDuration={100}
+          state="loading"
+        />
+      </div>
+      <div className="text-center">
+        <WakaMorphButton
+          idleText="Normal (300ms)"
+          animationDuration={300}
+          state="loading"
+        />
+      </div>
+      <div className="text-center">
+        <WakaMorphButton
+          idleText="Slow (500ms)"
+          animationDuration={500}
+          state="loading"
+        />
+      </div>
+    </div>
+  ),
+}