@reliability-design/web 1.0.2

package/dist/components/rel-textfield/rel-textfield.stories.ts

@@ -0,0 +1,710 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-textfield';
+
+/**
+ * The TextField component is a versatile input element that supports multiple states,
+ * sizes, input types, and icon configurations. Built with Lit web components.
+ *
+ * ## Features
+ * - **4 States**: default, focused, error, disabled
+ * - **3 Sizes**: small, medium, large
+ * - **Icon Support**: Left icon, right icon, or both
+ * - **Input Types**: text, password, email, number, search, tel, url
+ * - **Supporting Text**: Helper text and error messages
+ * - **Labels**: Optional field labels
+ * - **Accessibility**: Full ARIA support and keyboard navigation
+ */
+const meta: Meta = {
+  title: 'Components/TextField',
+  tags: ['autodocs'],
+  component: 'rel-textfield',
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text for the input field',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['text', 'password', 'email', 'number', 'search', 'tel', 'url'],
+      description: 'HTML input type',
+      table: {
+        defaultValue: { summary: 'text' },
+        type: { summary: 'string' },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'Current value of the input',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    state: {
+      control: { type: 'select' },
+      options: ['default', 'focused', 'error', 'disabled'],
+      description: 'Visual state of the input',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      description: 'Input field size',
+      table: {
+        defaultValue: { summary: 'medium' },
+        type: { summary: 'string' },
+      },
+    },
+    supportingText: {
+      control: 'text',
+      description: 'Helper or error message text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    leftIcon: {
+      control: 'text',
+      description: 'Icon to display on the left (SVG or emoji)',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    rightIcon: {
+      control: 'text',
+      description: 'Icon to display on the right (SVG or emoji)',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-textfield
+      label="${args.label || ''}"
+      placeholder="${args.placeholder || ''}"
+      type="${args.type || 'text'}"
+      value="${args.value || ''}"
+      state="${args.state || 'default'}"
+      size="${args.size || 'medium'}"
+      supportingText="${args.supportingText || ''}"
+      leftIcon="${args.leftIcon || ''}"
+      rightIcon="${args.rightIcon || ''}"
+    ></rel-textfield>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default text field - basic input with label
+ */
+export const Default: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+  },
+};
+
+/**
+ * Medium size (default) - standard input height
+ */
+export const MediumSize: Story = {
+  args: {
+    label: 'Email Address',
+    placeholder: 'you@example.com',
+    size: 'medium',
+  },
+};
+
+/**
+ * Small size - compact input for tight layouts
+ */
+export const SmallSize: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search...',
+    size: 'small',
+  },
+};
+
+/**
+ * Large size - prominent input for important fields
+ */
+export const LargeSize: Story = {
+  args: {
+    label: 'Full Name',
+    placeholder: 'John Doe',
+    size: 'large',
+  },
+};
+
+/**
+ * With left icon - visual indicator on the left
+ */
+export const WithLeftIcon: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter email',
+    leftIcon: '📧',
+  },
+};
+
+/**
+ * With right icon - visual indicator on the right
+ */
+export const WithRightIcon: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Search products...',
+    rightIcon: '🔍',
+  },
+};
+
+/**
+ * With both icons - icons on both sides
+ */
+export const WithBothIcons: Story = {
+  args: {
+    label: 'Amount',
+    placeholder: '0.00',
+    leftIcon: '💲',
+    rightIcon: '✓',
+  },
+};
+
+/**
+ * With supporting text - helper text below input
+ */
+export const WithSupportingText: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter password',
+    supportingText: 'Must be at least 8 characters',
+  },
+};
+
+/**
+ * Error state - shows validation error
+ */
+export const ErrorState: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'you@example.com',
+    value: 'invalid-email',
+    state: 'error',
+    supportingText: 'Please enter a valid email address',
+  },
+};
+
+/**
+ * Error with icon - error state with visual indicator
+ */
+export const ErrorWithIcon: Story = {
+  args: {
+    label: 'Phone Number',
+    placeholder: '+1 (555) 000-0000',
+    value: '123',
+    state: 'error',
+    leftIcon: '📱',
+    supportingText: 'Phone number is too short',
+  },
+};
+
+/**
+ * Disabled state - non-interactive input
+ */
+export const Disabled: Story = {
+  args: {
+    label: 'Account ID',
+    value: 'ACC-12345',
+    state: 'disabled',
+    supportingText: 'This field cannot be edited',
+  },
+};
+
+/**
+ * Disabled with icon - disabled input with icon
+ */
+export const DisabledWithIcon: Story = {
+  args: {
+    label: 'User ID',
+    value: 'USER-98765',
+    state: 'disabled',
+    leftIcon: '👤',
+  },
+};
+
+/**
+ * Password input - secure password field
+ */
+export const PasswordInput: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter your password',
+    leftIcon: '🔒',
+  },
+};
+
+/**
+ * Email input - email type with validation
+ */
+export const EmailInput: Story = {
+  args: {
+    label: 'Email Address',
+    type: 'email',
+    placeholder: 'name@company.com',
+    leftIcon: '✉️',
+  },
+};
+
+/**
+ * Number input - numeric input field
+ */
+export const NumberInput: Story = {
+  args: {
+    label: 'Age',
+    type: 'number',
+    placeholder: '18',
+  },
+};
+
+/**
+ * Search input - search field with icon
+ */
+export const SearchInput: Story = {
+  args: {
+    label: 'Search',
+    type: 'search',
+    placeholder: 'Search products, orders, customers...',
+    leftIcon: '🔍',
+  },
+};
+
+/**
+ * Tel input - telephone number field
+ */
+export const TelInput: Story = {
+  args: {
+    label: 'Phone Number',
+    type: 'tel',
+    placeholder: '+1 (555) 000-0000',
+    leftIcon: '📞',
+  },
+};
+
+/**
+ * URL input - website URL field
+ */
+export const URLInput: Story = {
+  args: {
+    label: 'Website',
+    type: 'url',
+    placeholder: 'https://example.com',
+    leftIcon: '🌐',
+  },
+};
+
+/**
+ * Without label - input without label text
+ */
+export const WithoutLabel: Story = {
+  args: {
+    placeholder: 'Quick search...',
+    leftIcon: '🔍',
+  },
+};
+
+/**
+ * Pre-filled value - input with existing value
+ */
+export const PrefilledValue: Story = {
+  args: {
+    label: 'Full Name',
+    value: 'John Doe',
+  },
+};
+
+/**
+ * All sizes comparison - shows all three sizes
+ */
+export const AllSizes: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; max-width: 400px;">
+      <rel-textfield
+        label="Small Size"
+        placeholder="Small input"
+        size="small"
+      ></rel-textfield>
+      <rel-textfield
+        label="Medium Size"
+        placeholder="Medium input"
+        size="medium"
+      ></rel-textfield>
+      <rel-textfield
+        label="Large Size"
+        placeholder="Large input"
+        size="large"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * All states comparison - shows all four states
+ */
+export const AllStates: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; max-width: 400px;">
+      <rel-textfield
+        label="Default State"
+        placeholder="Default input"
+        state="default"
+      ></rel-textfield>
+      <rel-textfield
+        label="Focused State"
+        placeholder="Focused input"
+        state="focused"
+        supportingText="This field is currently focused"
+      ></rel-textfield>
+      <rel-textfield
+        label="Error State"
+        value="invalid@"
+        state="error"
+        supportingText="Please enter a valid value"
+      ></rel-textfield>
+      <rel-textfield
+        label="Disabled State"
+        value="Cannot edit this"
+        state="disabled"
+        supportingText="This field is disabled"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Icon variations - different icon positions
+ */
+export const IconVariations: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; max-width: 400px;">
+      <rel-textfield
+        label="No Icons"
+        placeholder="Plain input"
+      ></rel-textfield>
+      <rel-textfield
+        label="Left Icon"
+        placeholder="Search..."
+        leftIcon="🔍"
+      ></rel-textfield>
+      <rel-textfield
+        label="Right Icon"
+        placeholder="Enter text"
+        rightIcon="✓"
+      ></rel-textfield>
+      <rel-textfield
+        label="Both Icons"
+        placeholder="Amount"
+        leftIcon="💲"
+        rightIcon="✓"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Input types showcase - different input types
+ */
+export const InputTypes: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; max-width: 400px;">
+      <rel-textfield
+        label="Text"
+        type="text"
+        placeholder="Enter text"
+      ></rel-textfield>
+      <rel-textfield
+        label="Password"
+        type="password"
+        placeholder="Enter password"
+        leftIcon="🔒"
+      ></rel-textfield>
+      <rel-textfield
+        label="Email"
+        type="email"
+        placeholder="you@example.com"
+        leftIcon="📧"
+      ></rel-textfield>
+      <rel-textfield
+        label="Number"
+        type="number"
+        placeholder="123"
+      ></rel-textfield>
+      <rel-textfield
+        label="Search"
+        type="search"
+        placeholder="Search..."
+        leftIcon="🔍"
+      ></rel-textfield>
+      <rel-textfield
+        label="Phone"
+        type="tel"
+        placeholder="+1 (555) 000-0000"
+        leftIcon="📱"
+      ></rel-textfield>
+      <rel-textfield
+        label="Website"
+        type="url"
+        placeholder="https://example.com"
+        leftIcon="🌐"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Form example - realistic form layout
+ */
+export const FormExample: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; max-width: 500px; background: #f5f5f5; border-radius: 8px;">
+      <h3 style="margin: 0 0 8px 0; font-size: 1.5rem;">Create Account</h3>
+      <rel-textfield
+        label="Full Name"
+        placeholder="John Doe"
+        leftIcon="👤"
+      ></rel-textfield>
+      <rel-textfield
+        label="Email Address"
+        type="email"
+        placeholder="you@example.com"
+        leftIcon="📧"
+        supportingText="We'll never share your email"
+      ></rel-textfield>
+      <rel-textfield
+        label="Password"
+        type="password"
+        placeholder="Min. 8 characters"
+        leftIcon="🔒"
+        supportingText="Must include letters and numbers"
+      ></rel-textfield>
+      <rel-textfield
+        label="Phone Number (Optional)"
+        type="tel"
+        placeholder="+1 (555) 000-0000"
+        leftIcon="📱"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Small size variations - all states in small size
+ */
+export const SmallSizeAllStates: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; max-width: 400px;">
+      <rel-textfield
+        size="small"
+        label="Default"
+        placeholder="Default small"
+      ></rel-textfield>
+      <rel-textfield
+        size="small"
+        label="With Icon"
+        placeholder="Small with icon"
+        leftIcon="🔍"
+      ></rel-textfield>
+      <rel-textfield
+        size="small"
+        label="Error"
+        value="invalid"
+        state="error"
+        supportingText="Error in small size"
+      ></rel-textfield>
+      <rel-textfield
+        size="small"
+        label="Disabled"
+        value="Disabled small"
+        state="disabled"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Large size variations - all states in large size
+ */
+export const LargeSizeAllStates: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; max-width: 500px;">
+      <rel-textfield
+        size="large"
+        label="Default"
+        placeholder="Default large"
+      ></rel-textfield>
+      <rel-textfield
+        size="large"
+        label="With Icon"
+        placeholder="Large with icon"
+        leftIcon="🔍"
+      ></rel-textfield>
+      <rel-textfield
+        size="large"
+        label="Error"
+        value="invalid"
+        state="error"
+        supportingText="Error in large size"
+      ></rel-textfield>
+      <rel-textfield
+        size="large"
+        label="Disabled"
+        value="Disabled large"
+        state="disabled"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Login form - realistic login example
+ */
+export const LoginForm: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px; padding: 32px; max-width: 400px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+      <h2 style="margin: 0 0 8px 0;">Sign In</h2>
+      <rel-textfield
+        label="Email"
+        type="email"
+        placeholder="Enter your email"
+        leftIcon="📧"
+        size="large"
+      ></rel-textfield>
+      <rel-textfield
+        label="Password"
+        type="password"
+        placeholder="Enter your password"
+        leftIcon="🔒"
+        size="large"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Search variations - different search field styles
+ */
+export const SearchVariations: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; max-width: 500px;">
+      <rel-textfield
+        placeholder="Quick search"
+        type="search"
+        leftIcon="🔍"
+        size="small"
+      ></rel-textfield>
+      <rel-textfield
+        label="Search Products"
+        type="search"
+        placeholder="Search by name, SKU, or category..."
+        leftIcon="🔍"
+        size="medium"
+      ></rel-textfield>
+      <rel-textfield
+        type="search"
+        placeholder="What are you looking for?"
+        leftIcon="🔍"
+        rightIcon="✕"
+        size="large"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Error variations - different error scenarios
+ */
+export const ErrorVariations: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; max-width: 400px;">
+      <rel-textfield
+        label="Email"
+        value="invalid-email"
+        state="error"
+        supportingText="Please enter a valid email address"
+      ></rel-textfield>
+      <rel-textfield
+        label="Password"
+        type="password"
+        value="123"
+        state="error"
+        leftIcon="🔒"
+        supportingText="Password must be at least 8 characters"
+      ></rel-textfield>
+      <rel-textfield
+        label="Phone"
+        value="+1 555"
+        state="error"
+        leftIcon="📱"
+        supportingText="Phone number is incomplete"
+        size="small"
+      ></rel-textfield>
+      <rel-textfield
+        label="Amount"
+        value="-50"
+        state="error"
+        leftIcon="💲"
+        supportingText="Amount must be positive"
+        size="large"
+      ></rel-textfield>
+    </div>
+  `,
+};
+
+/**
+ * Disabled variations - different disabled scenarios
+ */
+export const DisabledVariations: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; max-width: 400px;">
+      <rel-textfield
+        label="User ID"
+        value="USER-12345"
+        state="disabled"
+        size="small"
+      ></rel-textfield>
+      <rel-textfield
+        label="Account Type"
+        value="Premium Account"
+        state="disabled"
+        leftIcon="⭐"
+        size="medium"
+      ></rel-textfield>
+      <rel-textfield
+        label="Registration Date"
+        value="January 15, 2024"
+        state="disabled"
+        leftIcon="📅"
+        rightIcon="🔒"
+        size="large"
+      ></rel-textfield>
+    </div>
+  `,
+};