react-frontend-common-components 0.0.98 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.98",
+  "version": "0.1.0",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/app-input/app-input.tsx

@@ -12,7 +12,7 @@ import {
 } from "react";
 import "./app-input.css";
 
-interface AppInputProps extends InputProps {
+interface AppInputProps extends Omit<InputProps, "maxLength"> {
   className?: string;
   label?: string;
   name?: string;
@@ -32,6 +32,7 @@ interface AppInputProps extends InputProps {
   suffixIcon?: React.ReactNode;
   prefixIcon?: React.ReactNode;
   required?: boolean;
+  maxLength?: number;
 }
 
 const AppInput = ({
@@ -54,6 +55,7 @@ const AppInput = ({
   suffixIcon,
   prefixIcon,
   required,
+  maxLength,
   ...props
 }: AppInputProps) => {
   const inputRef = useRef<InputRef>(null);
@@ -77,6 +79,17 @@ const AppInput = ({
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     let newValue = e.target.value;
 
+    const isFloat = type === "float";
+    const isNumber = type === "number" || isFloat;
+
+    if (isNumber) {
+      const floatRegex = /^-?\d*\.?\d*$/;
+      if (!floatRegex.test(newValue)) return;
+
+      const digitCount = newValue.replace(/\./g, "").length;
+      if (maxLength && digitCount > maxLength) return;
+    }
+
     if (name === "name") {
       const alphabetOnly = /^[a-zA-Z\s]*$/;
       if (!alphabetOnly.test(newValue)) return;
@@ -86,11 +99,9 @@ const AppInput = ({
     setIsTyping(newValue.length > 0);
     handleChange?.(e);
   };
-  
 
   return (
-    <div className={`appInput ${className}`}>
-      {/* Show placeholder only if user hasn't started typing */}
+    <div className={`appInput ${className || ""}`}>
       {required && !isTyping && !inputValue && (
         <div className="placeHolder" onClick={() => inputRef.current?.focus()}>
           <label className="requiredText" htmlFor={id}>
@@ -101,7 +112,8 @@ const AppInput = ({
       )}
 
       <Input
-        type={type}
+        type={type === "float" ? "text" : type}
+        inputMode={type === "float" ? "decimal" : undefined}
         data-test-id={dataTestId}
         id={id}
         disabled={disabled}

package/src/components/app-phone-input/app-phone-input.tsx

@@ -7,6 +7,7 @@ interface AppPhoneInputProps {
   countryIsoCode?: string;
   countryCode?: string;
   phone: string;
+  placeholder?: string;
   handleChange: (
     phone: string,
     countryCode: string,
@@ -21,6 +22,7 @@ const AppPhoneInput = ({
   handleChange,
   countryIsoCode,
   phone,
+  placeholder,
   className,
   id,
 }: AppPhoneInputProps) => {
@@ -43,10 +45,13 @@ const AppPhoneInput = ({
           country={countryIsoCode || "us"}
           countryCodeEditable={false}
           enableSearch={true}
-          inputProps={{ required: true }}
+          inputProps={{
+            required: true,
+            placeholder: placeholder || "",
+          }}
           onChange={(value, country: CountryData) => {
             handleChange(
-              value, 
+              value,
               country.dialCode,
               country.countryCode,
               country.name