From 9f0ad8bb2f7c8cabc370857319cebfe24ce0811d Mon Sep 17 00:00:00 2001
From: zakher <zakhermasri@gmail.com>
Date: Thu, 15 Aug 2024 09:08:30 +0300
Subject: [PATCH] chore: update Input to accept maxLength

SIKKA-7693[closed]
closes #70
---
 apps/docs/CHANGELOG.md                        | 14 +++
 apps/docs/package.json                        |  2 +-
 packages/components/CHANGELOG.md              | 14 +++
 packages/components/elements/input/Input.tsx  | 62 ++++++++------
 packages/components/package.json              |  2 +-
 packages/storybook/CHANGELOG.md               | 14 +++
 packages/storybook/package.json               |  2 +-
 .../stories/ElementsStories/Input.stories.tsx | 85 +++++--------------
 prettier.config.js                            |  9 +-
 9 files changed, 110 insertions(+), 94 deletions(-)

diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
index 13458e12..04f3043e 100644
--- a/apps/docs/CHANGELOG.md
+++ b/apps/docs/CHANGELOG.md
@@ -1,5 +1,19 @@
 # hawa-docs
 
+## 0.0.111
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.46.3
+
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.46.2
+
 ## 0.0.109
 
 ### Patch Changes
diff --git a/apps/docs/package.json b/apps/docs/package.json
index cf73db8f..ceaa2aad 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index af0c8996..e7b4d29d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @sikka/hawa
 
+## 0.46.3
+
+### Patch Changes
+
+- Disallow the letter "e" when input type is `number`
+
+## 0.46.2
+
+### Patch Changes
+
+- Rename `TextFieldTypes` to `InputFieldProps`
+- Fix `maxLength` not being applied to `Input` when type is `number`
+- Update prettier config to be 100 printWidth
+
 ## 0.46.1
 
 ### Patch Changes
diff --git a/packages/components/elements/input/Input.tsx b/packages/components/elements/input/Input.tsx
index 8d382224..8cb46deb 100644
--- a/packages/components/elements/input/Input.tsx
+++ b/packages/components/elements/input/Input.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 
 import { cn } from "@util/index";
 
@@ -6,7 +6,7 @@ import { HelperText } from "../helperText";
 import { Label, LabelProps } from "../label/Label";
 import { Skeleton } from "../skeleton/Skeleton";
 
-export type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {
+export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
   isLoading?: boolean;
   isLoadingError?: boolean;
   containerClassName?: string;
@@ -39,7 +39,7 @@ export type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {
   outsidePrefix?: any;
   loadingErrorMesssage?: string;
 };
-export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
+export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
   (
     {
       margin = "none",
@@ -55,6 +55,8 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
     },
     ref,
   ) => {
+    const [value, setValue] = useState(props.value || "");
+
     let marginStyles = {
       none: "hawa-mb-0",
       normal: "hawa-mb-3",
@@ -74,6 +76,7 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       let newValue = e.target.value;
+      setValue(newValue);
 
       if (props.prefixText) {
         // If newValue is shorter than prefixText, set newValue to prefixText
@@ -90,9 +93,27 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
       }
 
       if (props.onChange) {
-        const newEvent = { ...e, target: { ...e.target, value: newValue } };
-        props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);
+        if (props.type === "number" && props.maxLength) {
+          console.log("type is ", props.type);
+          console.log("max length is ", props.maxLength);
+          let v = newValue.replace(/[^0-9]/g, "").slice(0, props.maxLength);
+          const newEvent = { ...e, target: { ...e.target, value: v } };
+          setValue(v);
+          props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);
+        } else {
+          console.log("NETIHERRRER");
+          const newEvent = { ...e, target: { ...e.target, value: newValue } };
+          setValue(newValue);
+          props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);
+        }
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (props.type === "number" && ["e", "E", "+", "-", "."].includes(e.key)) {
+        e.preventDefault();
       }
+      props.onKeyDown && props.onKeyDown(e);
     };
 
     return (
@@ -108,12 +129,7 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
         {props.label && <Label {...labelProps}>{props.label}</Label>}
         <div className="hawa-flex hawa-flex-row hawa-w-full hawa-items-center">
           {props.outsidePrefix && (
-            <span
-              className={cn(
-                "hawa-me-2 hawa-opacity-90",
-                !forceHideHelperText && "hawa-mb-2",
-              )}
-            >
+            <span className={cn("hawa-me-2 hawa-opacity-90", !forceHideHelperText && "hawa-mb-2")}>
               {props.outsidePrefix}
             </span>
           )}
@@ -184,13 +200,15 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
                     required
                     dir={props.dir}
                     type={props.type}
-                    value={props.value}
+                    value={props.value || value}
                     onChange={handleChange}
+                    onKeyDown={handleKeyDown}
                     autoComplete={props.autoComplete}
                     defaultValue={props.defaultValue}
                     placeholder={placeholder}
                     disabled={props.disabled || preview}
                     style={{ height: 40 }}
+                    maxLength={props.maxLength}
                     {...inputProps}
                     className={cn(
                       defaultInputStyle,
@@ -200,25 +218,20 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
                         "hawa-ps-9": props.startIcon,
                         "hawa-pe-[60px]": countPosition === "center",
                       },
-                      preview &&
-                        "hawa-border-transparent hawa-bg-transparent hawa-px-0",
+                      preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
                       inputProps?.className,
                     )}
                   />
                 </div>
 
                 {/* Regular helper text */}
-                {!forceHideHelperText && (
-                  <HelperText helperText={props.helperText} />
-                )}
+                {!forceHideHelperText && <HelperText helperText={props.helperText} />}
                 {/* Popover helper text */}
                 {!props.disabled && forceHideHelperText && (
                   <div
                     className={cn(
                       "hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all",
-                      props.helperText
-                        ? "hawa-border hawa-p-1"
-                        : "hawa-border-none hawa-p-0",
+                      props.helperText ? "hawa-border hawa-p-1" : "hawa-border-none hawa-p-0",
                     )}
                   >
                     {props.helperText}
@@ -230,16 +243,13 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
                     className={cn(
                       "hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all",
                       {
-                        "hawa-end-0 hawa-top-[62px]":
-                          countPosition === "bottom",
-                        "hawa-bottom-[62px] hawa-end-0":
-                          countPosition === "top",
+                        "hawa-end-0 hawa-top-[62px]": countPosition === "bottom",
+                        "hawa-bottom-[62px] hawa-end-0": countPosition === "top",
                         "hawa-end-2": countPosition === "center",
                       },
                     )}
                   >
-                    {props.value ? String(props.value).length : 0}/
-                    {props.maxLength}
+                    {props.value ? String(props.value).length : 0}/{props.maxLength}
                   </div>
                 )}
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 384d0fe7..72308650 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.46.1",
+  "version": "0.46.3",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
index 8e8b2873..9a294769 100644
--- a/packages/storybook/CHANGELOG.md
+++ b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,19 @@
 # hawa-storybook
 
+## 0.26.133
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.46.3
+
+## 0.26.132
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.46.2
+
 ## 0.26.131
 
 ### Patch Changes
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 218cadd1..3ed6aa94 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.131",
+  "version": "0.26.133",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
diff --git a/packages/storybook/stories/ElementsStories/Input.stories.tsx b/packages/storybook/stories/ElementsStories/Input.stories.tsx
index 7f5171f5..58060531 100644
--- a/packages/storybook/stories/ElementsStories/Input.stories.tsx
+++ b/packages/storybook/stories/ElementsStories/Input.stories.tsx
@@ -26,9 +26,16 @@ export const Default: Story = {
     const [text, setText] = useState("");
     return (
       <div className="hawa-flex hawa-flex-col hawa-gap-4">
-        <div className="hawa-flex hawa-flex-row hawa-gap-4 ">
+        <div className="hawa-flex hawa-flex-row hawa-gap-4">
           <Input label="Input Field" placeholder={"Bismillah"} />
           <Input label="Disabled" disabled placeholder={"Bismillah"} />
+          <Input
+            label="Number"
+            placeholder={"120"}
+            type="number"
+            maxLength={3}
+            onChange={(e) => console.log("im outside", e.target.value)}
+          />
         </div>
       </div>
     );
@@ -52,25 +59,12 @@ export const PreviewMode: Story = {
           label={t("first-name")}
           preview={preview}
           placeholder={"Fulan"}
-          value={'Zakher Masri'}
-        />
-        <Input
-          label={t("last-name")}
-          preview={preview}
-          placeholder={"Al-Fulani"}
-        />
-        <Input
-          label={t("email")}
-          preview={preview}
-          placeholder={"contact@sikka.io"}
+          value={"Zakher Masri"}
         />
+        <Input label={t("last-name")} preview={preview} placeholder={"Al-Fulani"} />
+        <Input label={t("email")} preview={preview} placeholder={"contact@sikka.io"} />
         <Input label={"Username"} preview={preview} placeholder={"fulan"} />
-        <Input
-          label={"Hide Line"}
-          preview={preview}
-          placeholder={"fulan"}
-          hideSeparator
-        />
+        <Input label={"Hide Line"} preview={preview} placeholder={"fulan"} hideSeparator />
       </div>
     );
   },
@@ -84,16 +78,8 @@ export const LoadingMode: Story = {
           {loading ? "Disable" : "Enable"} Loading
         </Button>
         <Input label={"First Name"} isLoading={loading} placeholder={"Fulan"} />
-        <Input
-          label={"Middle Name"}
-          isLoading={loading}
-          placeholder={"Fulani"}
-        />
-        <Input
-          label={"Last Name"}
-          isLoading={loading}
-          placeholder={"Al-Fulani"}
-        />
+        <Input label={"Middle Name"} isLoading={loading} placeholder={"Fulani"} />
+        <Input label={"Last Name"} isLoading={loading} placeholder={"Al-Fulani"} />
         <Input label={"Username"} isLoading={loading} placeholder={"fulan"} />
       </div>
     );
@@ -104,29 +90,11 @@ export const ErrorMode: Story = {
     const [error, setError] = useState(true);
     return (
       <div className="hawa-flex hawa-max-w-md hawa-flex-col hawa-gap-4">
-        <Button onClick={() => setError(!error)}>
-          {error ? "Disable" : "Enable"} Error
-        </Button>
-        <Input
-          label={"First Name"}
-          isLoadingError={error}
-          placeholder={"Fulan"}
-        />
-        <Input
-          label={"Middle Name"}
-          isLoadingError={error}
-          placeholder={"Fulani"}
-        />
-        <Input
-          label={"Last Name"}
-          isLoadingError={error}
-          placeholder={"Al-Fulani"}
-        />
-        <Input
-          label={"Username"}
-          isLoadingError={error}
-          placeholder={"fulan"}
-        />
+        <Button onClick={() => setError(!error)}>{error ? "Disable" : "Enable"} Error</Button>
+        <Input label={"First Name"} isLoadingError={error} placeholder={"Fulan"} />
+        <Input label={"Middle Name"} isLoadingError={error} placeholder={"Fulani"} />
+        <Input label={"Last Name"} isLoadingError={error} placeholder={"Al-Fulani"} />
+        <Input label={"Username"} isLoadingError={error} placeholder={"fulan"} />
       </div>
     );
   },
@@ -196,7 +164,7 @@ export const WithCount: Story = {
     const [text, setText] = useState("");
     return (
       <div className="hawa-flex hawa-flex-col hawa-gap-4">
-        <div className="hawa-flex hawa-flex-row hawa-gap-4 ">
+        <div className="hawa-flex hawa-flex-row hawa-gap-4">
           <Input
             value={text}
             onChange={(e) => setText(e.target.value)}
@@ -236,7 +204,7 @@ export const WithPrefix: Story = {
     const [text, setText] = useState("");
     return (
       <div className="hawa-flex hawa-flex-col hawa-gap-4" dir={direction}>
-        <div className="hawa-flex hawa-flex-col hawa-gap-4 ">
+        <div className="hawa-flex hawa-flex-col hawa-gap-4">
           <Input
             value={text}
             onChange={(e) => setText(e.target.value)}
@@ -264,15 +232,8 @@ export const Examples: Story = {
     const [showPopup, setShowPopup] = useState(false);
     const [inputLang, setInputLang] = useState("en");
     return (
-      <div
-        className="hawa-flex hawa-max-w-md hawa-flex-col hawa-gap-4"
-        dir={direction}
-      >
-        <Input
-          dir={"ltr"}
-          inputProps={{ className: "hawa-text-right" }}
-          label={"Email"}
-        />
+      <div className="hawa-flex hawa-max-w-md hawa-flex-col hawa-gap-4" dir={direction}>
+        <Input dir={"ltr"} inputProps={{ className: "hawa-text-right" }} label={"Email"} />
 
         <Input
           type={"text"}
diff --git a/prettier.config.js b/prettier.config.js
index 531f3e95..2c1ebb99 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,4 +1,7 @@
+/** @type {import("prettier").Config} */
+
 module.exports = {
+  printWidth: 100,
   trailingComma: "all",
   importOrderSeparation: true,
   importOrder: [
@@ -9,10 +12,10 @@ module.exports = {
     "^@elements/(.*)$",
     "^@_types/(.*)$",
     "^@sikka/(.*)$",
-    "^[./]"
+    "^[./]",
   ],
   plugins: [
     "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss"
-  ]
+    "prettier-plugin-tailwindcss",
+  ],
 };