@tpzdsp/next-toolkit 1.2.9 → 1.4.0

package/src/components/form/Input.stories.tsx

@@ -0,0 +1,435 @@
+/* eslint-disable custom/padding-between-jsx-elements */
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from './Input';
+
+const meta = {
+  title: 'Components/Form/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A styled input component with error state support and customizable styling.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    hasError: {
+      control: 'boolean',
+      description: 'Whether the input should display in error state',
+      defaultValue: false,
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search'],
+      description: 'The type of input',
+      defaultValue: 'text',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the input',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled',
+      defaultValue: false,
+    },
+    required: {
+      control: 'boolean',
+      description: 'Whether the input is required',
+      defaultValue: false,
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default input with standard styling.',
+      },
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    hasError: true,
+    placeholder: 'This input has an error',
+    value: 'Invalid input',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Input in error state with red border styling.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'This input is disabled',
+    value: 'Disabled input',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled input with reduced opacity and gray background.',
+      },
+    },
+  },
+};
+
+export const Required: Story = {
+  render: () => (
+    <div className="w-80">
+      <label htmlFor="required-input" className="block text-sm font-medium mb-1">
+        Full Name <span className="text-red-500">*</span>
+      </label>
+      <Input
+        id="required-input"
+        required
+        placeholder="Enter your full name"
+        aria-describedby="required-help"
+      />
+      <p id="required-help" className="text-gray-600 text-xs mt-1">
+        * This field is required
+      </p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Required input field with visual indicator (red asterisk) and helper text.',
+      },
+    },
+  },
+};
+
+export const RequiredWithError: Story = {
+  render: () => (
+    <div className="w-80">
+      <label htmlFor="required-error-input" className="block text-sm font-medium mb-1">
+        Full Name <span className="text-red-500">*</span>
+      </label>
+      <Input
+        id="required-error-input"
+        required
+        hasError
+        aria-invalid="true"
+        aria-describedby="required-error-help"
+      />
+      <p id="required-error-help" className="text-red-600 text-xs mt-1" role="alert">
+        This field is required
+      </p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Required field showing error state when left empty.',
+      },
+    },
+  },
+};
+
+export const DifferentTypes: Story = {
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label htmlFor="email-input" className="block text-sm font-medium mb-1">
+          Email
+        </label>
+
+        <Input id="email-input" type="email" placeholder="user@example.com" />
+      </div>
+
+      <div>
+        <label htmlFor="password-input" className="block text-sm font-medium mb-1">
+          Password
+        </label>
+
+        <Input id="password-input" type="password" placeholder="Enter password" />
+      </div>
+
+      <div>
+        <label htmlFor="number-input" className="block text-sm font-medium mb-1">
+          Age
+        </label>
+
+        <Input id="number-input" type="number" placeholder="25" min={0} max={120} />
+      </div>
+
+      <div>
+        <label htmlFor="tel-input" className="block text-sm font-medium mb-1">
+          Phone
+        </label>
+
+        <Input id="tel-input" type="tel" placeholder="+1 (555) 123-4567" />
+      </div>
+
+      <div>
+        <label htmlFor="url-input" className="block text-sm font-medium mb-1">
+          Website
+        </label>
+
+        <Input id="url-input" type="url" placeholder="https://example.com" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Showcase of different input types with proper labels for accessibility.',
+      },
+    },
+  },
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="space-y-4 w-80">
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium mb-1">
+          Full Name
+        </label>
+
+        <Input id="name" type="text" placeholder="John Doe" required />
+      </div>
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium mb-1">
+          Email Address
+        </label>
+
+        <Input id="email" type="email" placeholder="john@example.com" required />
+      </div>
+
+      <div>
+        <label htmlFor="phone" className="block text-sm font-medium mb-1">
+          Phone Number
+        </label>
+
+        <Input id="phone" type="tel" placeholder="+1 (555) 123-4567" />
+      </div>
+
+      <div>
+        <label htmlFor="age" className="block text-sm font-medium mb-1">
+          Age
+        </label>
+
+        <Input id="age" type="number" placeholder="25" min={18} max={120} />
+      </div>
+
+      <button
+        type="submit"
+        className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700
+          focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        Submit
+      </button>
+    </form>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete form example showing inputs in a realistic context with proper labels and validation.',
+      },
+    },
+  },
+};
+
+export const ErrorStates: Story = {
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label htmlFor="error-email" className="block text-sm font-medium mb-1">
+          Email (Invalid)
+        </label>
+
+        <Input
+          id="error-email"
+          type="email"
+          hasError
+          value="invalid-email"
+          aria-invalid="true"
+          aria-describedby="email-error"
+        />
+
+        <p id="email-error" className="text-red-600 text-xs mt-1">
+          Please enter a valid email address.
+        </p>
+      </div>
+
+      <div>
+        <label htmlFor="error-required" className="block text-sm font-medium mb-1">
+          Required Field
+        </label>
+
+        <Input
+          id="error-required"
+          hasError
+          placeholder="This field is required"
+          aria-invalid="true"
+          aria-describedby="required-error"
+        />
+
+        <p id="required-error" className="text-red-600 text-xs mt-1">
+          This field is required.
+        </p>
+      </div>
+
+      <div>
+        <label htmlFor="error-number" className="block text-sm font-medium mb-1">
+          Age (Out of Range)
+        </label>
+
+        <Input
+          id="error-number"
+          type="number"
+          hasError
+          value="150"
+          min={0}
+          max={120}
+          aria-invalid="true"
+          aria-describedby="age-error"
+        />
+
+        <p id="age-error" className="text-red-600 text-xs mt-1">
+          Age must be between 0 and 120.
+        </p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Examples of input error states with proper ARIA attributes and error messages for accessibility.',
+      },
+    },
+  },
+};
+
+export const CustomStyling: Story = {
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label htmlFor="large-input" className="block text-sm font-medium mb-1">
+          Large Input
+        </label>
+
+        <Input id="large-input" placeholder="Large input" className="text-lg p-3" />
+      </div>
+
+      <div>
+        <label htmlFor="custom-border" className="block text-sm font-medium mb-1">
+          Custom Border
+        </label>
+
+        <Input
+          id="custom-border"
+          placeholder="Custom border color"
+          className="border-2 border-purple-500 focus:border-purple-700"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="no-rounded" className="block text-sm font-medium mb-1">
+          Square Corners
+        </label>
+
+        <Input id="no-rounded" placeholder="No border radius" className="rounded-none" />
+      </div>
+
+      <div>
+        <label htmlFor="full-width" className="block text-sm font-medium mb-1">
+          Full Width
+        </label>
+
+        <Input id="full-width" placeholder="Full width input" className="w-full" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Examples of custom styling using className prop. The component uses tailwind-merge to properly handle class overrides.',
+      },
+    },
+  },
+};
+
+export const Accessibility: Story = {
+  render: () => (
+    <div className="space-y-6 w-80">
+      <div className="bg-blue-50 border border-blue-200 rounded p-4">
+        <h3 className="font-bold text-blue-800 mb-2">Accessibility Features:</h3>
+
+        <ul className="list-disc list-inside space-y-1 text-blue-700 text-sm">
+          <li>Proper label association with htmlFor/id</li>
+          <li>ARIA attributes for error states</li>a<li>Descriptive error messages</li>
+          <li>Keyboard navigation support</li>
+          <li>Screen reader compatibility</li>
+        </ul>
+      </div>
+
+      <div>
+        <label htmlFor="accessible-input" className="block text-sm font-medium mb-1">
+          Accessible Input Example
+        </label>
+
+        <Input
+          id="accessible-input"
+          type="email"
+          placeholder="user@example.com"
+          aria-describedby="input-help input-error"
+          required
+        />
+
+        <p id="input-help" className="text-gray-600 text-xs mt-1">
+          We&apos;ll never share your email with anyone else.
+        </p>
+      </div>
+
+      <div>
+        <label htmlFor="accessible-error" className="block text-sm font-medium mb-1">
+          Input with Error
+        </label>
+
+        <Input
+          id="accessible-error"
+          hasError
+          value="invalid@"
+          aria-invalid="true"
+          aria-describedby="accessible-error-msg"
+        />
+
+        <p id="accessible-error-msg" className="text-red-600 text-xs mt-1" role="alert">
+          Please enter a valid email address.
+        </p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Comprehensive accessibility example showing proper ARIA attributes, error handling, and screen reader support.',
+      },
+    },
+  },
+};

package/src/components/form/Input.test.tsx

@@ -0,0 +1,214 @@
+import { Input } from './Input';
+import { render, screen } from '../../test/renderers';
+
+const ROUNDED_MD = 'rounded-md';
+const BORDER_ERROR = 'border-error';
+
+describe('Input', () => {
+  describe('general', () => {
+    it('renders an input element', () => {
+      render(<Input />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toBeInTheDocument();
+    });
+
+    it('applies default classes', () => {
+      render(<Input />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveClass(
+        ROUNDED_MD,
+        'border',
+        'p-1',
+        'disabled:opacity-60',
+        'disabled:bg-gray-100',
+      );
+    });
+
+    it('applies error styling when hasError is true', () => {
+      render(<Input hasError />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveClass(BORDER_ERROR);
+    });
+
+    it('does not apply error styling when hasError is false', () => {
+      render(<Input hasError={false} />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).not.toHaveClass(BORDER_ERROR);
+    });
+
+    it('does not apply error styling when hasError is undefined', () => {
+      render(<Input />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).not.toHaveClass(BORDER_ERROR);
+    });
+
+    it('merges custom className with default classes', () => {
+      render(<Input className="custom-class" />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveClass(ROUNDED_MD, 'border', 'p-1', 'custom-class');
+    });
+
+    it('allows custom className to override default classes', () => {
+      render(<Input className="border-2" />); // This actually overrides border (1px)
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveClass('border-2');
+      expect(input).not.toHaveClass('border'); // Now this is correctly overridden
+    });
+
+    it('forwards standard input props', () => {
+      render(
+        <Input
+          type="email"
+          placeholder="Enter email"
+          value="test@example.com"
+          name="email"
+          id="email-input"
+          readOnly
+        />,
+      );
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveAttribute('type', 'email');
+      expect(input).toHaveAttribute('placeholder', 'Enter email');
+      expect(input).toHaveAttribute('value', 'test@example.com');
+      expect(input).toHaveAttribute('name', 'email');
+      expect(input).toHaveAttribute('id', 'email-input');
+      expect(input).toHaveAttribute('readonly');
+    });
+
+    it('applies disabled styling when disabled', () => {
+      render(<Input disabled />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toBeDisabled();
+      expect(input).toHaveClass('disabled:opacity-60', 'disabled:bg-gray-100');
+    });
+
+    it('combines hasError with custom className', () => {
+      render(<Input hasError className="w-full" />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveClass(BORDER_ERROR, 'w-full', ROUNDED_MD, 'border', 'p-1');
+    });
+
+    it('handles different input types', () => {
+      const { rerender } = render(
+        <>
+          <label htmlFor="password-input">Password</label>
+
+          <Input type="password" id="password-input" />
+        </>,
+      );
+
+      let input = screen.getByLabelText('Password');
+
+      expect(input).toHaveAttribute('type', 'password');
+
+      rerender(
+        <>
+          <label htmlFor="number-input">Age</label>
+
+          <Input type="number" id="number-input" />
+        </>,
+      );
+      input = screen.getByLabelText('Age');
+      expect(input).toHaveAttribute('type', 'number');
+      expect(input).toHaveAttribute('type', 'number');
+      // We can also verify the role changed
+      expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+
+      rerender(
+        <>
+          <label htmlFor="email-input">Email</label>
+
+          <Input type="email" id="email-input" />
+        </>,
+      );
+      input = screen.getByLabelText('Email');
+      expect(input).toHaveAttribute('type', 'email');
+      // Still a textbox role for email inputs
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('supports required attribute', () => {
+      render(<Input required />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toBeRequired();
+    });
+
+    it('supports aria attributes', () => {
+      render(
+        <Input aria-label="Email address" aria-describedby="email-help" aria-invalid="true" />,
+      );
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveAttribute('aria-label', 'Email address');
+      expect(input).toHaveAttribute('aria-describedby', 'email-help');
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('handles complex className override scenarios', () => {
+      render(<Input hasError className="border-green-500 p-4" />);
+
+      const input = screen.getByRole('textbox');
+
+      // Custom classes should override defaults due to twMerge
+      expect(input).toHaveClass('border-green-500', 'p-4');
+      expect(input).toHaveClass(ROUNDED_MD); // Default class preserved
+      expect(input).toHaveClass('border'); // Base border class is still present
+      expect(input).not.toHaveClass('p-1'); // Overridden by p-4
+      expect(input).not.toHaveClass(BORDER_ERROR); // Overridden by border-green-500
+    });
+  });
+
+  describe('accessibility', () => {
+    it('is accessible by role', () => {
+      render(<Input />);
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('supports form labels via id', () => {
+      render(
+        <>
+          <label htmlFor="test-input">Test Label</label>
+
+          <Input id="test-input" />
+        </>,
+      );
+
+      const input = screen.getByLabelText('Test Label');
+
+      expect(input).toBeInTheDocument();
+    });
+
+    it('supports error state for screen readers', () => {
+      render(<Input hasError aria-invalid="true" />);
+
+      const input = screen.getByRole('textbox');
+
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+      expect(input).toHaveClass(BORDER_ERROR);
+    });
+  });
+});

package/src/components/form/Input.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { twMerge } from 'tailwind-merge';
+
+import type { ExtendProps } from '../../types/utils';
+
+type Props = {
+  hasError?: boolean;
+};
+
+export type InputProps = ExtendProps<'input', Props>;
+
+export const Input = ({ hasError, className, ...props }: InputProps) => {
+  return (
+    <input
+      {...props}
+      className={twMerge(
+        'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100',
+        hasError ? 'border-error' : '',
+        className,
+      )}
+    />
+  );
+};