bhattrahul007 / onekey

MIT License
0 stars 0 forks source link

Create Customizable Input Box Component #1

Open bhattrahul007 opened 4 weeks ago

bhattrahul007 commented 4 weeks ago

We are tasked with creating a highly customizable input box component that enhances user interaction and can be tailored to fit various design requirements. The input box should allow developers to modify its appearance and behavior easily while maintaining a consistent and user-friendly interface.

Objectives:

Requirements:

  1. Input Types:

    • Support for multiple input types:
      • Text
      • Email
      • Password
      • Number
      • Tel (telephone)
      • URL
  2. Customizable Styles:

    • Ability to customize:
      • Border color and width
      • Background color
      • Font size and style
      • Padding and margin
      • Height and width
    • CSS classes for easy integration with existing styles.
  3. Placeholder Text:

    • Allow users to set placeholder text for the input box.
  4. Validation:

    • Provide visual feedback for input validation:
      • Success (e.g., green border)
      • Error (e.g., red border, error message below input)
    • Ability to trigger validations on input change and on form submission.
  5. Icons:

    • Support for optional leading and trailing icons.
    • Icons should be customizable (e.g., size, color).
  6. Accessibility:

    • Implement ARIA attributes for improved accessibility.
    • Ensure keyboard navigability.
  7. Documentation:

    • Provide usage examples and code snippets in the documentation.
    • Include a live demo in the documentation site.

Proposed Interface Specification:


interface CustomInputProps {
    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
    placeholder?: string;
    value: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    style?: React.CSSProperties;
    className?: string;
    error?: string; // Error message to display
    success?: boolean; // Indicates successful validation
    startIcon?: React.ReactNode; // Icon to display before the input
    endIcon?: React.ReactNode; // Icon to display after the input
    required?: boolean; // Marks the input as required
    disabled?: boolean; // Disables the input field
}
bhattrahul007 commented 4 weeks ago

Add improvements for error ui state changes and customizing error display