@wakastellar/ui 2.3.5 → 3.0.0

package/src/components/input-otp/InputOTP.stories.tsx

@@ -0,0 +1,255 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { InputOTP } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof InputOTP> = {
+  title: 'Components/Forms/InputOTP',
+  component: InputOTP,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A one-time password input component with keyboard navigation and paste support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    length: {
+      control: 'number',
+      description: 'Number of OTP digits',
+    },
+    pattern: {
+      control: 'select',
+      options: ['numeric', 'alphanumeric', 'alpha'],
+      description: 'Allowed character pattern',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the inputs',
+    },
+    secure: {
+      control: 'boolean',
+      description: 'Mask the input (like password)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputOTP>
+
+export const Default: Story = {
+  render: function OTPDemo() {
+    const [value, setValue] = React.useState('')
+
+    return (
+      <div className="space-y-4">
+        <InputOTP
+          length={6}
+          value={value}
+          onChange={setValue}
+          onComplete={(code) => console.log('Complete:', code)}
+        />
+        <p className="text-sm text-muted-foreground text-center">
+          Enter the 6-digit code
+        </p>
+      </div>
+    )
+  },
+}
+
+export const FourDigit: Story = {
+  render: function FourDigitDemo() {
+    const [value, setValue] = React.useState('')
+
+    return (
+      <InputOTP
+        length={4}
+        value={value}
+        onChange={setValue}
+        onComplete={(code) => alert(`Code: ${code}`)}
+      />
+    )
+  },
+}
+
+export const WithSeparator: Story = {
+  render: function SeparatorDemo() {
+    const [value, setValue] = React.useState('')
+
+    return (
+      <InputOTP
+        length={6}
+        value={value}
+        onChange={setValue}
+        separator={3}
+        separatorElement={<span className="text-muted-foreground mx-1">-</span>}
+      />
+    )
+  },
+}
+
+export const Alphanumeric: Story = {
+  render: function AlphanumericDemo() {
+    const [value, setValue] = React.useState('')
+
+    return (
+      <div className="space-y-2">
+        <InputOTP
+          length={6}
+          value={value}
+          onChange={setValue}
+          pattern="alphanumeric"
+        />
+        <p className="text-sm text-muted-foreground text-center">
+          Letters and numbers allowed
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Secure: Story = {
+  render: function SecureDemo() {
+    const [value, setValue] = React.useState('')
+
+    return (
+      <div className="space-y-2">
+        <InputOTP
+          length={4}
+          value={value}
+          onChange={setValue}
+          secure
+        />
+        <p className="text-sm text-muted-foreground text-center">
+          Secure PIN entry
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [value, setValue] = React.useState('')
+
+    return (
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Small</p>
+          <InputOTP length={4} value={value} onChange={setValue} size="sm" />
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Medium</p>
+          <InputOTP length={4} value={value} onChange={setValue} size="md" />
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Large</p>
+          <InputOTP length={4} value={value} onChange={setValue} size="lg" />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: function ErrorDemo() {
+    const [value, setValue] = React.useState('123')
+
+    return (
+      <InputOTP
+        length={6}
+        value={value}
+        onChange={setValue}
+        error="Invalid verification code"
+      />
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <InputOTP length={6} value="123456" disabled />
+  ),
+}
+
+export const Prefilled: Story = {
+  render: function PrefilledDemo() {
+    const [value, setValue] = React.useState('842516')
+
+    return (
+      <div className="space-y-2">
+        <InputOTP
+          length={6}
+          value={value}
+          onChange={setValue}
+        />
+        <p className="text-sm text-green-600 text-center">
+          Code verified successfully
+        </p>
+      </div>
+    )
+  },
+}
+
+export const VerificationFlow: Story = {
+  render: function VerificationFlowDemo() {
+    const [value, setValue] = React.useState('')
+    const [status, setStatus] = React.useState<'idle' | 'verifying' | 'success' | 'error'>('idle')
+
+    const handleComplete = async (code: string) => {
+      setStatus('verifying')
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1500))
+      if (code === '123456') {
+        setStatus('success')
+      } else {
+        setStatus('error')
+      }
+    }
+
+    return (
+      <div className="space-y-4 p-6 border rounded-lg w-[350px]">
+        <div className="text-center">
+          <h3 className="font-semibold">Verify Your Email</h3>
+          <p className="text-sm text-muted-foreground mt-1">
+            We sent a code to your email
+          </p>
+        </div>
+
+        <InputOTP
+          length={6}
+          value={value}
+          onChange={(v) => {
+            setValue(v)
+            if (status === 'error') setStatus('idle')
+          }}
+          onComplete={handleComplete}
+          error={status === 'error' ? 'Invalid code. Try again.' : undefined}
+          disabled={status === 'verifying' || status === 'success'}
+        />
+
+        {status === 'verifying' && (
+          <p className="text-sm text-muted-foreground text-center">
+            Verifying...
+          </p>
+        )}
+
+        {status === 'success' && (
+          <p className="text-sm text-green-600 text-center">
+            Email verified successfully!
+          </p>
+        )}
+
+        <p className="text-xs text-muted-foreground text-center">
+          Hint: try 123456
+        </p>
+      </div>
+    )
+  },
+}

package/src/components/label/Label.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Label } from './index'
+import { Input } from '../input'
+import { Checkbox } from '../checkbox'
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Renders an accessible label associated with controls.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Label>
+
+export const Default: Story = {
+  args: {
+    children: 'Email address',
+  },
+  render: (args) => <Label {...args} />,
+}
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="Email" />
+    </div>
+  ),
+}
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+}
+
+export const Required: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="name">
+        Name <span className="text-destructive">*</span>
+      </Label>
+      <Input type="text" id="name" placeholder="Enter your name" />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="disabled" className="text-muted-foreground">
+        Disabled field
+      </Label>
+      <Input type="text" id="disabled" disabled placeholder="Disabled input" />
+    </div>
+  ),
+}

package/src/components/language-selector/LanguageSelector.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { LanguageSelector, Language } from "./index"
+
+const sampleLanguages: Language[] = [
+  { code: "en", label: "English", flagEmoji: "🇺🇸" },
+  { code: "fr", label: "Français", flagEmoji: "🇫🇷" },
+  { code: "de", label: "Deutsch", flagEmoji: "🇩🇪" },
+  { code: "es", label: "Español", flagEmoji: "🇪🇸" },
+  { code: "it", label: "Italiano", flagEmoji: "🇮🇹" },
+  { code: "pt", label: "Português", flagEmoji: "🇵🇹" },
+  { code: "ja", label: "日本語", flagEmoji: "🇯🇵" },
+]
+
+const meta: Meta<typeof LanguageSelector> = {
+  title: "Components/UI/LanguageSelector",
+  component: LanguageSelector,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "compact", "minimal"],
+      description: "Style variant of the selector",
+    },
+    showFlags: {
+      control: "boolean",
+      description: "Show flag icons",
+    },
+    showLabels: {
+      control: "boolean",
+      description: "Show language labels",
+    },
+    isLoading: {
+      control: "boolean",
+      description: "Loading state",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof LanguageSelector>
+
+export const Default: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "en",
+    showFlags: true,
+    showLabels: true,
+    variant: "default",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "fr",
+    showFlags: true,
+    showLabels: true,
+    variant: "compact",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const Minimal: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "de",
+    showFlags: true,
+    variant: "minimal",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const WithoutFlags: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "es",
+    showFlags: false,
+    showLabels: true,
+    variant: "default",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const IconOnly: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "ja",
+    showFlags: true,
+    showLabels: false,
+    variant: "compact",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const Loading: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "en",
+    isLoading: true,
+    variant: "default",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+