@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-error-shake/WakaErrorShake.stories.tsx

@@ -0,0 +1,410 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaErrorShake, WakaFormFieldShake, useErrorShake } from './index'
+import type { WakaErrorShakeRef } from './index'
+import * as React from 'react'
+import { Button } from '../button'
+import { AlertCircle } from 'lucide-react'
+
+const meta: Meta<typeof WakaErrorShake> = {
+  title: 'Components/Effects/WakaErrorShake',
+  component: WakaErrorShake,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An error shake animation component for visual feedback on errors or invalid input.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    intensity: {
+      control: 'select',
+      options: ['light', 'medium', 'strong'],
+      description: 'Shake intensity',
+    },
+    duration: {
+      control: { type: 'range', min: 200, max: 1000, step: 50 },
+      description: 'Animation duration in ms',
+    },
+    glitchEffect: {
+      control: 'boolean',
+      description: 'Enable glitch/distortion effect',
+    },
+    flashEffect: {
+      control: 'boolean',
+      description: 'Enable red flash effect',
+    },
+    flashColor: {
+      control: 'color',
+      description: 'Flash color',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaErrorShake>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    const handleShake = () => {
+      setTrigger(true)
+      setTimeout(() => setTrigger(false), 100)
+    }
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger}>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Error Content</h3>
+            <p className="text-sm text-muted-foreground">
+              This content will shake when triggered.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button variant="destructive" onClick={handleShake}>
+          Trigger Shake
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const Intensities: Story = {
+  render: () => {
+    const [triggers, setTriggers] = React.useState({
+      light: false,
+      medium: false,
+      strong: false,
+    })
+
+    const handleTrigger = (intensity: keyof typeof triggers) => {
+      setTriggers((prev) => ({ ...prev, [intensity]: true }))
+      setTimeout(() => setTriggers((prev) => ({ ...prev, [intensity]: false })), 100)
+    }
+
+    return (
+      <div className="flex gap-6">
+        {(['light', 'medium', 'strong'] as const).map((intensity) => (
+          <div key={intensity} className="flex flex-col items-center gap-4">
+            <WakaErrorShake trigger={triggers[intensity]} intensity={intensity}>
+              <div className="p-4 border rounded-lg bg-card w-[150px] text-center">
+                <span className="capitalize">{intensity}</span>
+              </div>
+            </WakaErrorShake>
+            <Button size="sm" variant="outline" onClick={() => handleTrigger(intensity)}>
+              Shake
+            </Button>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}
+
+export const WithGlitchEffect: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger} glitchEffect intensity="strong">
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2 text-destructive">Critical Error</h3>
+            <p className="text-sm text-muted-foreground">
+              This includes a glitch/distortion effect.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Trigger Glitch
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const NoFlashEffect: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger} flashEffect={false}>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">No Flash</h3>
+            <p className="text-sm text-muted-foreground">
+              Only shake animation, no red flash.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          variant="outline"
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Shake Only
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const CustomFlashColor: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger} flashColor="rgb(251, 146, 60)">
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Warning Flash</h3>
+            <p className="text-sm text-muted-foreground">
+              Orange flash color for warnings.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          className="bg-orange-500 hover:bg-orange-600"
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Trigger Warning
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const FormFieldShake: Story = {
+  render: () => {
+    const [error, setError] = React.useState(false)
+    const [value, setValue] = React.useState('')
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+      if (!value.includes('@')) {
+        setError(true)
+      } else {
+        setError(false)
+        alert('Submitted!')
+      }
+    }
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[300px] space-y-4">
+        <div>
+          <label className="text-sm font-medium">Email</label>
+          <WakaFormFieldShake hasError={error}>
+            <input
+              type="text"
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value)
+                if (error) setError(false)
+              }}
+              className={`w-full mt-1 px-3 py-2 border rounded-md ${
+                error ? 'border-destructive' : ''
+              }`}
+              placeholder="Enter your email"
+            />
+          </WakaFormFieldShake>
+          {error && (
+            <p className="text-sm text-destructive mt-1 flex items-center gap-1">
+              <AlertCircle className="h-3 w-3" />
+              Please enter a valid email
+            </p>
+          )}
+        </div>
+        <Button type="submit" className="w-full">
+          Submit
+        </Button>
+      </form>
+    )
+  },
+}
+
+export const WithRef: Story = {
+  render: () => {
+    const ref = React.useRef<WakaErrorShakeRef>(null)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake ref={ref}>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Controlled via Ref</h3>
+            <p className="text-sm text-muted-foreground">
+              Use the ref to trigger shake programmatically.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <div className="flex gap-2">
+          <Button variant="destructive" onClick={() => ref.current?.shake()}>
+            Shake
+          </Button>
+          <Button variant="outline" onClick={() => ref.current?.reset()}>
+            Reset
+          </Button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { shake, ShakeWrapper } = useErrorShake({
+      intensity: 'medium',
+      onComplete: () => console.log('Shake complete!'),
+    })
+
+    return (
+      <div className="space-y-6">
+        <ShakeWrapper>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Using Hook</h3>
+            <p className="text-sm text-muted-foreground">
+              Controlled via useErrorShake hook.
+            </p>
+          </div>
+        </ShakeWrapper>
+        <Button variant="destructive" onClick={shake}>
+          Trigger via Hook
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const LoginFormExample: Story = {
+  render: () => {
+    const [username, setUsername] = React.useState('')
+    const [password, setPassword] = React.useState('')
+    const [errors, setErrors] = React.useState({ username: false, password: false })
+    const [loginError, setLoginError] = React.useState(false)
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+
+      const newErrors = {
+        username: !username,
+        password: !password,
+      }
+      setErrors(newErrors)
+
+      if (!newErrors.username && !newErrors.password) {
+        if (username !== 'admin' || password !== 'password') {
+          setLoginError(true)
+          setTimeout(() => setLoginError(false), 100)
+        } else {
+          alert('Login successful!')
+        }
+      }
+    }
+
+    return (
+      <WakaErrorShake trigger={loginError} intensity="medium">
+        <form onSubmit={handleSubmit} className="w-[320px] p-6 border rounded-lg bg-card">
+          <h2 className="text-xl font-bold mb-6 text-center">Login</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Username</label>
+              <WakaFormFieldShake hasError={errors.username}>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => {
+                    setUsername(e.target.value)
+                    setErrors((p) => ({ ...p, username: false }))
+                  }}
+                  className={`w-full mt-1 px-3 py-2 border rounded-md ${
+                    errors.username ? 'border-destructive' : ''
+                  }`}
+                  placeholder="Enter username"
+                />
+              </WakaFormFieldShake>
+              {errors.username && (
+                <p className="text-xs text-destructive mt-1">Username is required</p>
+              )}
+            </div>
+            <div>
+              <label className="text-sm font-medium">Password</label>
+              <WakaFormFieldShake hasError={errors.password}>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => {
+                    setPassword(e.target.value)
+                    setErrors((p) => ({ ...p, password: false }))
+                  }}
+                  className={`w-full mt-1 px-3 py-2 border rounded-md ${
+                    errors.password ? 'border-destructive' : ''
+                  }`}
+                  placeholder="Enter password"
+                />
+              </WakaFormFieldShake>
+              {errors.password && (
+                <p className="text-xs text-destructive mt-1">Password is required</p>
+              )}
+            </div>
+            <Button type="submit" className="w-full">
+              Sign In
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground mt-4 text-center">
+            Try: admin / password
+          </p>
+        </form>
+      </WakaErrorShake>
+    )
+  },
+}
+
+export const WithCallback: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+    const [message, setMessage] = React.useState('')
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake
+          trigger={trigger}
+          onComplete={() => setMessage('Shake animation completed!')}
+        >
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">With Callback</h3>
+            <p className="text-sm text-muted-foreground">
+              Callback fires when animation ends.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            setMessage('')
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Trigger
+        </Button>
+        {message && (
+          <p className="text-sm text-muted-foreground">{message}</p>
+        )}
+      </div>
+    )
+  },
+}

package/src/components/waka-file-upload/WakaFileUpload.stories.tsx

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaFileUpload } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaFileUpload> = {
+  title: 'Components/Forms/WakaFileUpload',
+  component: WakaFileUpload,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A file upload component with drag & drop, preview, and progress tracking.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['dropzone', 'button', 'inline'],
+      description: 'Display variant',
+    },
+    multiple: {
+      control: 'boolean',
+      description: 'Allow multiple files',
+    },
+    showPreview: {
+      control: 'boolean',
+      description: 'Show file preview',
+    },
+    showProgress: {
+      control: 'boolean',
+      description: 'Show upload progress',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable upload',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFileUpload>
+
+// Mock upload function
+const mockUpload = (file: File, onProgress: (progress: number) => void): Promise<string> => {
+  return new Promise((resolve) => {
+    let progress = 0
+    const interval = setInterval(() => {
+      progress += 10
+      onProgress(progress)
+      if (progress >= 100) {
+        clearInterval(interval)
+        resolve(`https://example.com/uploads/${file.name}`)
+      }
+    }, 200)
+  })
+}
+
+export const Default: Story = {
+  args: {
+    label: 'Upload Files',
+    description: 'Drag and drop files here or click to browse',
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        {...args}
+        onUpload={mockUpload}
+        onComplete={(files) => console.log('Uploaded:', files)}
+      />
+    </div>
+  ),
+}
+
+export const Dropzone: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        variant="dropzone"
+        label="Documents"
+        placeholder="Drop your documents here"
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const ButtonVariant: Story = {
+  render: () => (
+    <WakaFileUpload
+      variant="button"
+      placeholder="Upload File"
+      onUpload={mockUpload}
+    />
+  ),
+}
+
+export const InlineVariant: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaFileUpload
+        variant="inline"
+        placeholder="Add attachment"
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const ImagesOnly: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        label="Upload Images"
+        accept="image/*"
+        placeholder="Drop images here (PNG, JPG, GIF)"
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const PDFOnly: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        label="Upload PDF"
+        accept=".pdf"
+        placeholder="Drop PDF files here"
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const MultipleFiles: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        label="Upload Multiple Files"
+        multiple
+        maxFiles={5}
+        placeholder="Drop up to 5 files here"
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const WithSizeLimit: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        label="Upload (Max 2MB)"
+        maxSize={2 * 1024 * 1024}
+        onUpload={mockUpload}
+        onError={(error) => console.error('Error:', error)}
+      />
+    </div>
+  ),
+}
+
+export const NoPreview: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        label="Upload"
+        showPreview={false}
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const NoProgress: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        label="Quick Upload"
+        showProgress={false}
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaFileUpload
+        label="Upload (Disabled)"
+        disabled
+      />
+    </div>
+  ),
+}
+
+export const ProfilePicture: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-4">
+      <h3 className="font-semibold">Profile Picture</h3>
+      <WakaFileUpload
+        accept="image/*"
+        maxSize={5 * 1024 * 1024}
+        maxFiles={1}
+        placeholder="Upload a profile picture (max 5MB)"
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}
+
+export const DocumentUpload: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-4 p-4 border rounded-lg">
+      <div>
+        <h3 className="font-semibold">Document Submission</h3>
+        <p className="text-sm text-muted-foreground">
+          Upload your required documents
+        </p>
+      </div>
+      <WakaFileUpload
+        label="ID Document"
+        accept=".pdf,.jpg,.png"
+        maxSize={10 * 1024 * 1024}
+        placeholder="Upload ID (PDF, JPG, PNG)"
+        onUpload={mockUpload}
+      />
+      <WakaFileUpload
+        label="Proof of Address"
+        accept=".pdf,.jpg,.png"
+        maxSize={10 * 1024 * 1024}
+        placeholder="Upload proof of address"
+        onUpload={mockUpload}
+      />
+    </div>
+  ),
+}