@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,710 +0,0 @@
-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>
-  `,
-};