chore: update Input to accept maxLength

SIKKA-7693[closed]
closes #70

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

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",

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

packages/components/elements/input/Input.tsx

@@ -1,12 +1,12 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 
 import { cn } from "@util/index";
 
 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>
  )}
 

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",

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

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",

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"}

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",
+ ],
 };