feat: add maxlength, readonly, type, and input mode attributes to textinput

src/components/TextInput.tsx

@@ -11,6 +11,25 @@ type TextInputProps = {
   isInvalid?: boolean;
   errorMessage?: string;
   isDisabled?: boolean;
+  isReadOnly?: boolean;
+  maxLength?: number;
+  type?:
+    | "text"
+    | "search"
+    | "url"
+    | "tel"
+    | "email"
+    | "password"
+    | (string & NonNullable<unknown>);
+  inputMode?:
+    | "none"
+    | "text"
+    | "tel"
+    | "url"
+    | "email"
+    | "numeric"
+    | "decimal"
+    | "search";
 };
 
 const TextInput = ({
@@ -23,6 +42,10 @@ const TextInput = ({
   isInvalid = false,
   errorMessage = "",
   isDisabled = false,
+  isReadOnly = false,
+  maxLength,
+  type = "text",
+  inputMode = "text",
 }: TextInputProps) => {
   return (
     <BaseInput
@@ -36,6 +59,10 @@ const TextInput = ({
       isInvalid={isInvalid}
       errorMessage={errorMessage}
       isDisabled={isDisabled}
+      isReadOnly={isReadOnly}
+      maxLength={maxLength}
+      type={type}
+      inputMode={inputMode}
     />
   );
 };

src/components/utils/baseComponents.tsx

@@ -15,9 +15,28 @@ type BaseInputProps = {
   onValueChange?: Dispatch<SetStateAction<string>>;
   isInvalid: boolean;
   errorMessage: string;
+  maxLength?: number;
+  type?:
+    | "text"
+    | "search"
+    | "url"
+    | "tel"
+    | "email"
+    | "password"
+    | (string & NonNullable<unknown>);
   // interaction
   isRequired?: boolean;
   isDisabled?: boolean;
+  isReadOnly?: boolean;
+  inputMode?:
+    | "none"
+    | "text"
+    | "tel"
+    | "url"
+    | "email"
+    | "numeric"
+    | "decimal"
+    | "search";
 };
 
 type baseInputClassNamesObj = { [key in InputSlots]: string };
@@ -60,12 +79,15 @@ export const BaseInput = ({
   onValueChange,
   isInvalid,
   errorMessage,
+  maxLength,
+  type = "text",
   isRequired = false,
   isDisabled = false,
+  isReadOnly = false,
+  inputMode = "text",
 }: BaseInputProps) => {
   return (
     <Input
-      type="text"
       label={label}
       endContent={endContent}
       placeholder={placeholder}
@@ -74,8 +96,12 @@ export const BaseInput = ({
       onValueChange={onValueChange}
       isInvalid={isInvalid}
       errorMessage={errorMessage}
+      maxLength={maxLength}
+      type={type}
       isRequired={isRequired}
       isDisabled={isDisabled}
+      isReadOnly={isReadOnly}
+      inputMode={inputMode}
       // appearance
       labelPlacement="outside"
       variant="bordered"

src/stories/TextInput.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
 
 export default meta;
 
-export const WithValidation = () => {
+export const CustomValidation = () => {
   const [value, setValue] = useState("");
 
   const validateEmail = (str: string) =>
@@ -47,9 +47,55 @@ export const IsClearable = () => {
 export const Disabled = () => {
   return (
     <TextInput
-      label="You can't change this!"
+      label="You can't interact with this component!"
       isDisabled={true}
       value="*Evil laughter*"
     />
   );
 };
+
+export const ReadOnly = () => {
+  return (
+    <TextInput
+      label="You can't change this value!"
+      isReadOnly={true}
+      value="*Neutral laughter*"
+    />
+  );
+};
+
+export const MaxLength = () => {
+  const [value, setValue] = useState("");
+  return (
+    <TextInput
+      label="Maximum of 10 characters"
+      maxLength={10}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+};
+
+export const PredefinedType = () => {
+  const [value, setValue] = useState("");
+  return (
+    <TextInput
+      label="This input is rendered as a password type"
+      type="password"
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+};
+
+export const PredefinedInputMode = () => {
+  const [value, setValue] = useState("");
+  return (
+    <TextInput
+      label="This keyboard for this input is shown as a numeric type"
+      inputMode="numeric"
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+}