components/input/InputEmail.tsx

import type { FunctionComponent } from "react";
import InputText from "./InputText";
import type { InputTextProps } from "./InputText";

/**
 * @interface
 * @augments InputTextProps
 * @property validation {never}
 */
interface InputEmailProps extends InputTextProps {
  validation?: never;
}

const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;

/**
 * InputEmail Component
 * @component
 * @param name {string} The html name attribute for the input tag.
 * @param label {string} The text for the html label tag.
 * @param placeholder {string} The input placeholder.
 * @param [icon] {ReactElement} The icon to display inside the input field.
 * @param [disabled] {disabled} Whether the input tag is disabled or not.
 * @param [required=false] {boolean} If this field is required or not.
 *
 * @author Giancarlo Pernudi Segura <gino@neuralberta.tech>
 */
const InputEmail: FunctionComponent<InputEmailProps> = (props) => {
  return <InputText type="email" {...props} validation={emailRegex} />;
};

export default InputEmail;