@wakastellar/ui 2.3.4 → 2.4.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/menubar/Menubar.stories.tsx

@@ -0,0 +1,278 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof Menubar> = {
+  title: 'Components/Menubar',
+  component: Menubar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A visually persistent menu common in desktop applications.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Menubar>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Menubar {...args}>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Share <MenubarShortcut>⌘S</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Cut <MenubarShortcut>⌘X</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Copy <MenubarShortcut>⌘C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Paste <MenubarShortcut>⌘V</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Reload</MenubarItem>
+          <MenubarItem disabled>Force Reload</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Toggle Fullscreen</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const WithCheckboxes: Story = {
+  render: function MenubarWithCheckboxes() {
+    const [showBookmarks, setShowBookmarks] = React.useState(true)
+    const [showFullUrls, setShowFullUrls] = React.useState(false)
+
+    return (
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem
+              checked={showBookmarks}
+              onCheckedChange={setShowBookmarks}
+            >
+              Show Bookmarks Bar
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              checked={showFullUrls}
+              onCheckedChange={setShowFullUrls}
+            >
+              Show Full URLs
+            </MenubarCheckboxItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Zoom In <MenubarShortcut>⌘+</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Zoom Out <MenubarShortcut>⌘-</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+  },
+}
+
+export const WithRadioGroup: Story = {
+  render: function MenubarWithRadio() {
+    const [theme, setTheme] = React.useState('system')
+
+    return (
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>Preferences</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+              <MenubarRadioItem value="light">Light</MenubarRadioItem>
+              <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+              <MenubarRadioItem value="system">System</MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+  },
+}
+
+export const WithSubmenus: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New File</MenubarItem>
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Print</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const FullExample: Story = {
+  render: function FullMenubar() {
+    const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
+    const [fullUrlsChecked, setFullUrlsChecked] = React.useState(false)
+    const [person, setPerson] = React.useState('pedro')
+
+    return (
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              New Window <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>New Incognito Window</MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Share</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Email link</MenubarItem>
+                <MenubarItem>Messages</MenubarItem>
+                <MenubarItem>Notes</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarSeparator />
+            <MenubarItem>
+              Print... <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Find</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Search the web</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Find...</MenubarItem>
+                <MenubarItem>Find Next</MenubarItem>
+                <MenubarItem>Find Previous</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarSeparator />
+            <MenubarItem>Cut</MenubarItem>
+            <MenubarItem>Copy</MenubarItem>
+            <MenubarItem>Paste</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem
+              checked={bookmarksChecked}
+              onCheckedChange={setBookmarksChecked}
+            >
+              Always Show Bookmarks Bar
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              checked={fullUrlsChecked}
+              onCheckedChange={setFullUrlsChecked}
+            >
+              Always Show Full URLs
+            </MenubarCheckboxItem>
+            <MenubarSeparator />
+            <MenubarItem inset>
+              Reload <MenubarShortcut>⌘R</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled inset>
+              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Hide Sidebar</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Profiles</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value={person} onValueChange={setPerson}>
+              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+              <MenubarRadioItem value="pedro">Pedro</MenubarRadioItem>
+            </MenubarRadioGroup>
+            <MenubarSeparator />
+            <MenubarItem inset>Edit...</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Add Profile...</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    )
+  },
+}