@tribepad/themis 1.0.0

package/src/elements/OTPInput/OTPInput.stories.tsx

@@ -0,0 +1,404 @@
+/**
+ * OTPInput Component Stories
+ * Storybook stories for OTPInput component demonstrating all variants, sizes, and states
+ *
+ * @see PRD.md (OTPInput Product Requirements Document)
+ * @see ACCESSIBILITY.md (WCAG 2.2 AAA Compliance Documentation)
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { OTPInput } from './OTPInput';
+import { useState } from 'react';
+
+const meta = {
+  title: 'Elements/OTPInput',
+  component: OTPInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Fully accessible OTP (One-Time Password) input component with WCAG 2.2 AAA compliance. Features single hidden input pattern, auto-advance, paste support, and comprehensive keyboard navigation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Accessible label (required)',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    length: {
+      control: { type: 'number', min: 4, max: 10 },
+      description: 'Number of OTP digits',
+      table: {
+        defaultValue: { summary: '6' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Visual size variant',
+      table: {
+        defaultValue: { summary: 'md' },
+      },
+    },
+    type: {
+      control: 'select',
+      options: ['numeric', 'alphanumeric', 'custom'],
+      description: 'Input validation type',
+      table: {
+        defaultValue: { summary: 'numeric' },
+      },
+    },
+    inputMode: {
+      control: 'select',
+      options: ['numeric', 'text', 'tel'],
+      description: 'Mobile keyboard type',
+      table: {
+        defaultValue: { summary: 'numeric' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable input',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Read-only mode',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    mask: {
+      control: 'boolean',
+      description: 'Mask digits (show as bullets)',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    showSuccess: {
+      control: 'boolean',
+      description: 'Show success state when complete',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    description: {
+      control: 'text',
+      description: 'Helper text below input',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message',
+    },
+  },
+} satisfies Meta<typeof OTPInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    label: 'Enter verification code',
+    length: 6,
+    size: 'md',
+    type: 'numeric',
+  },
+};
+
+// With description
+export const WithDescription: Story = {
+  args: {
+    label: 'Enter 6-digit code sent to your email',
+    description: 'Code expires in 10 minutes',
+    length: 6,
+  },
+};
+
+// Error state
+export const ErrorState: Story = {
+  args: {
+    label: 'Enter verification code',
+    error: 'Invalid code. Please try again.',
+    value: '123456',
+    length: 6,
+  },
+};
+
+// Success state
+export const SuccessState: Story = {
+  args: {
+    label: 'Enter verification code',
+    value: '123456',
+    showSuccess: true,
+    length: 6,
+  },
+};
+
+// Disabled state
+export const Disabled: Story = {
+  args: {
+    label: 'Enter verification code',
+    disabled: true,
+    value: '123456',
+    length: 6,
+  },
+};
+
+// Read-only state
+export const ReadOnly: Story = {
+  args: {
+    label: 'Enter verification code',
+    readOnly: true,
+    value: '123456',
+    length: 6,
+  },
+};
+
+// Masked (PIN mode)
+export const Masked: Story = {
+  args: {
+    label: 'Enter PIN code',
+    mask: true,
+    value: '1234',
+    length: 4,
+    description: 'Enter your 4-digit PIN',
+  },
+};
+
+// Size variants
+export const SmallSize: Story = {
+  args: {
+    label: 'Enter code (small)',
+    size: 'sm',
+    length: 6,
+  },
+};
+
+export const MediumSize: Story = {
+  args: {
+    label: 'Enter code (medium)',
+    size: 'md',
+    length: 6,
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    label: 'Enter code (large)',
+    size: 'lg',
+    length: 6,
+  },
+};
+
+// All sizes grid
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', alignItems: 'center' }}>
+      <OTPInput label="Small (sm)" size="sm" length={6} />
+      <OTPInput label="Medium (md)" size="md" length={6} />
+      <OTPInput label="Large (lg)" size="lg" length={6} />
+    </div>
+  ),
+};
+
+// Different lengths
+export const FourDigits: Story = {
+  args: {
+    label: 'Enter 4-digit PIN',
+    length: 4,
+    description: 'Your account PIN',
+  },
+};
+
+export const EightDigits: Story = {
+  args: {
+    label: 'Enter 8-digit code',
+    length: 8,
+    description: 'Extended verification code',
+  },
+};
+
+// Type variants
+export const NumericType: Story = {
+  args: {
+    label: 'Enter numeric code',
+    type: 'numeric',
+    inputMode: 'numeric',
+    length: 6,
+    description: 'Only numbers allowed',
+  },
+};
+
+export const AlphanumericType: Story = {
+  args: {
+    label: 'Enter alphanumeric code',
+    type: 'alphanumeric',
+    inputMode: 'text',
+    length: 6,
+    description: 'Letters and numbers allowed',
+  },
+};
+
+export const CustomPatternType: Story = {
+  args: {
+    label: 'Enter uppercase code',
+    type: 'custom',
+    pattern: /^[A-Z0-9]$/,
+    inputMode: 'text',
+    length: 6,
+    description: 'Only uppercase letters and numbers',
+  },
+};
+
+// Interactive controlled example
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState('');
+
+    const handleComplete = (code: string): void => {
+      // Simulate validation
+      if (code === '000000') {
+        setError('Invalid code. Please try again.');
+      } else {
+        setError('');
+         
+        alert(`Code verified: ${code}`);
+      }
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <OTPInput
+          label="Enter 6-digit verification code"
+          value={value}
+          onChange={setValue}
+          onComplete={handleComplete}
+          error={error}
+          length={6}
+          description="Try entering 000000 to see error state"
+        />
+        <div style={{ fontSize: '14px', color: '#666' }}>
+          Current value: {value || '(empty)'}
+        </div>
+      </div>
+    );
+  },
+};
+
+// Paste support demo
+export const PasteDemo: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [pasteMessage, setPasteMessage] = useState('');
+
+    const handlePaste = (pastedText: string): boolean => {
+      setPasteMessage(`Pasted: "${pastedText}"`);
+      setTimeout(() => setPasteMessage(''), 3000);
+      return true; // Allow paste
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <OTPInput
+          label="Try pasting a code"
+          value={value}
+          onChange={setValue}
+          onPaste={handlePaste}
+          length={6}
+          description="Paste a 6-digit code (e.g., 123456)"
+        />
+        {pasteMessage && (
+          <div style={{ fontSize: '14px', color: '#0070f3', fontWeight: 500 }}>
+            {pasteMessage}
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+// All states grid (for visual regression)
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '24px' }}>
+      <div>
+        <h3 style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 600 }}>Default</h3>
+        <OTPInput label="Default state" length={6} />
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 600 }}>Filled</h3>
+        <OTPInput label="Filled state" value="123456" length={6} />
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 600 }}>Partial</h3>
+        <OTPInput label="Partial state" value="123___" length={6} />
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 600 }}>Error</h3>
+        <OTPInput label="Error state" value="123456" error="Invalid code" length={6} />
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 600 }}>Success</h3>
+        <OTPInput label="Success state" value="123456" showSuccess length={6} />
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 600 }}>Disabled</h3>
+        <OTPInput label="Disabled state" value="123456" disabled length={6} />
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 600 }}>Masked</h3>
+        <OTPInput label="Masked state" value="1234" mask length={4} />
+      </div>
+    </div>
+  ),
+};
+
+// Theme modes (for visual regression)
+export const LightTheme: Story = {
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    label: 'Light theme',
+    value: '123___',
+    length: 6,
+  },
+};
+
+export const DarkTheme: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    label: 'Dark theme',
+    value: '123___',
+    length: 6,
+  },
+};
+
+export const HighContrast: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    label: 'High contrast theme',
+    value: '123___',
+    length: 6,
+    description: '7:1 contrast ratio',
+  },
+};