Add `InputField` component to Mellow React template

[babblebey]

Description

This issue aims to implement a new InputField component in the mellow-react template of the project. The InputField component is intended to provide a reusable input field with customizable options, such as different types (name, email, password) and different states (default, valid, invalid).

Parent Issue #17

Screenshot

Changes to be Made

1. Create a new file component directory with filename within the components directory InputField/input-field.js to contain the implementation of the InputField component.
2. Define the InputField component as a functional component using the React library.
3. Create a MellowIcon directory within within the components directory to implement all associated icons in components (i.e EnvelopeIcon, PortraitIcon, EyeIcon, LockIcon), make this Icon components reusable with props such as size, color and additional props using the spread operator (...props).
4. Define the prop types for the component, including name, label, placeholder, type, and state as required.
5. Within the component, create a ref using the useRef hook to reference the input element.
6. Implement the component's JSX structure, including a label, input field, icons, and error message display.
7. Dynamically apply CSS classes to the input field based on the field's state (i.e. default, valid, invalid) prop using the clsx library.
8. Handle different type props (name, email, password) to display the appropriate icons.
9. Add event handling to the password EyeIcon component to toggle the visibility of the password text.
10. Write the necessary CSS styles to achieve the desired visual appearance and behavior of the InputField component.

Criteria

• The InputField component should render an input field with associated label, icons, and optional error message.
• The component should accept various props, such as name, label, placeholder, type, and state, with appropriate prop type validations using PropTypes.
• CSS classes and styles should be applied to the input field dynamically based on the provided state prop.
• The component should handle the different type props to display the corresponding icons.
• Event handling should be implemented for the password icon to toggle the visibility of the password text.

Additional Notes

• Ensure that the InputField component is reusable, configurable, and can be easily integrated into different forms throughout the project.
• Write unit tests (if possible) to validate the component's behavior, including prop type validations and event handling.

[babblebey]

Working on this!

[DominusKelvin]

As discussed @babblebey I will be closing these issues and associated PRs

[babblebey]

🥱