gbs-add-block 0.0.27 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/button/index.tsx

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: any;
+  children?: ReactNode;
   buttonClass?: string;
 }
 

package/source/components/checkbox/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, { InputHTMLAttributes } from "react";
 
 export const Checkbox = ({

package/source/components/darkmode/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, { useEffect } from "react";
 import Icon from "../icon/Icon";
 import { moon, sun } from "../icon/iconPaths";
@@ -45,4 +52,4 @@ export const DarkMode = () => {
       )}
     </button>
   );
-}
+};

package/source/components/formrenderer/InputHandles.tsx

@@ -1,33 +1,69 @@
-import React from "react";
+import React, { useState } from "react";
+import { validateEmail, validatePhoneNumber } from "./helperFunctions";
 import { Input } from "../input";
+import { FormItem } from "./types";
 
-export default function InputHandles({
+interface InputHandlesProps {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const InputHandles = ({
   item,
   requirementError,
   setRequirementError,
-}: any) {
+}: InputHandlesProps) => {
+  const [inputError, setInputError] = useState<string | null>(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+
+    setRequirementError &&
+      setRequirementError((prevErrors: string[]) =>
+        prevErrors.filter((error) => error !== item?.name)
+      );
+
+    // Validation based on input type
+    if (item?.type === "email") {
+      if (!validateEmail(value)) {
+        setInputError("Invalid email format");
+      } else {
+        setInputError(null);
+      }
+    } else if (item?.type === "tel") {
+      if (!validatePhoneNumber(value)) {
+        setInputError("Invalid phone number. Must be 10 digits.");
+      } else {
+        setInputError(null);
+      }
+    }
+  };
+
   return (
     <div className="w-full">
-      {item.label && (
+      {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
         </label>
       )}
       <Input
-        type={item.type}
-        name={item.name}
-        placeholder={item.placeholder || ""}
-        error={
-          requirementError.includes(item.name)
-            ? `${item.name} is required`
-            : undefined
-        }
-        onChange={() =>
-          setRequirementError((prevErrors: any) =>
-            prevErrors.filter((errorName: any) => errorName !== item.name)
-          )
-        }
+        type={item?.type}
+        name={item?.name}
+        placeholder={item?.placeholder || ""}
+        onChange={handleChange}
+        className={`border rounded p-2 w-full text-black ${
+          inputError || (item?.name && requirementError.includes(item?.name))
+            ? "border-red-500"
+            : "border-gray-300"
+        }`}
       />
+      {item?.name && requirementError.includes(item.name) && (
+        <p className="text-red-500 text-xs">{`${item?.name} is required`}</p>
+      )}
+      {inputError && <p className="text-red-500 text-xs">{inputError}</p>}
     </div>
   );
-}
+};
+
+export default InputHandles;

package/source/components/formrenderer/SelectHandles.tsx

@@ -1,14 +1,22 @@
 import React from "react";
 import { Select } from "../select";
+import { FormItem } from "./types";
+
+interface SelectHandlesProps {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement>;
+}
 
 export default function SelectHandles({
   item,
   requirementError,
   setRequirementError,
   formRef,
-}: any) {
+}: SelectHandlesProps) {
   const handleSelect = (value: string, key: string) => {
-    if (formRef.current) {
+    if (formRef && formRef.current) {
       const hiddenInput = formRef.current.querySelector(
         `input[name="${key}"]`
       ) as HTMLInputElement;
@@ -27,22 +35,23 @@ export default function SelectHandles({
 
   return (
     <div className="w-full">
-      {item.label && (
+      {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
         </label>
       )}
       <Select
-        name={item.name}
-        items={item.options}
+        name={item?.name}
+        items={item?.options}
         onSelect={(value: string) => {
-          handleSelect(value, item.key);
-          setRequirementError((prevErrors: any) =>
-            prevErrors.filter((errorName: any) => errorName !== item.name)
-          );
+          item?.key && handleSelect(value, item.key);
+          setRequirementError &&
+            setRequirementError((prevErrors: any) =>
+              prevErrors.filter((errorName: any) => errorName !== item?.name)
+            );
         }}
         error={
-          requirementError.includes(item.name)
+          item?.name && requirementError.includes(item.name)
             ? `${item.name} is required`
             : undefined
         }

package/source/components/formrenderer/helperFunctions.ts

@@ -0,0 +1,9 @@
+export const validateEmail = (email: string) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+export const validatePhoneNumber = (phone: string) => {
+  const phoneRegex = /^[0-9]{10}$/;
+  return phoneRegex.test(phone);
+};

package/source/components/formrenderer/index.tsx

@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, { useRef, useState } from "react";
-import { Button } from "../button";
 import InputHandles from "./InputHandles";
 import SelectHandles from "./SelectHandles";
+import { FormItem, FormRendererProps } from "./types";
 
-const FormRenderer = ({ onSubmit, sourceData }: any) => {
+const FormRenderer = ({ onSubmit, sourceData }: FormRendererProps) => {
   const formRef = useRef<HTMLFormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
 
@@ -12,8 +19,8 @@ const FormRenderer = ({ onSubmit, sourceData }: any) => {
 
     const requirementErrorItems: string[] = [];
 
-    sourceData.forEach((item: any) => {
-      if (item.required) {
+    sourceData?.forEach((item: FormItem) => {
+      if (item.required && item.name) {
         const field = formRef.current?.querySelector(
           `[name="${item.name}"]`
         ) as HTMLInputElement | null;
@@ -29,14 +36,14 @@ const FormRenderer = ({ onSubmit, sourceData }: any) => {
     if (requirementErrorItems.length > 0) return;
 
     const formData = new FormData(formRef.current as HTMLFormElement);
-    onSubmit(formData);
+    if (onSubmit) onSubmit(formData);
   };
 
   return (
     <form ref={formRef} onSubmit={handleSubmit} className="w-96">
-      {sourceData?.length > 0 ? (
+      {sourceData && sourceData?.length > 0 ? (
         <div className="flex flex-col items-start text-left gap-4">
-          {sourceData.map((item: any, index: number) => {
+          {sourceData.map((item: FormItem, index: number) => {
             switch (item.component) {
               case "input":
                 return (
@@ -62,12 +69,12 @@ const FormRenderer = ({ onSubmit, sourceData }: any) => {
               case "button":
                 return (
                   <div key={index} className="w-full mt-2">
-                    <Button
-                      type={item.type}
-                      className="w-full bg-black text-white py-2 rounded-xl hover:bg-gray-800"
+                    <button
+                      type={item.button_type}
+                      className="w-full bg-black text-white py-2 rounded-xl hover:bg-gray-800 dark:hover:bg-gray-300 dark:bg-white dark:text-black"
                     >
                       {item.value}
-                    </Button>
+                    </button>
                   </div>
                 );
 

package/source/components/formrenderer/types.ts

@@ -0,0 +1,17 @@
+export type FormItem = {
+  name?: string;
+  component?: string;
+  type?: string;
+  required?: boolean;
+  placeholder?: string;
+  options?: { value: string; label: string }[];
+  value?: string;
+  label?: string;
+  button_type?: "button" | "submit" | "reset";
+  key?: string;
+};
+
+export type FormRendererProps = {
+  onSubmit?: (formData: FormData) => void;
+  sourceData?: FormItem[] | undefined;
+};

package/source/components/input/index.tsx

@@ -15,21 +15,24 @@ export const Input = ({
   OTPField = false,
   OTPValue = "",
   OTPLength = 4,
-  OTPClass = "w-8 h-10 m-1 border border-gray-600 rounded-lg text-center",
+  OTPClass = "w-8 h-10 m-1 border border-gray-600 rounded-lg text-center text-black",
   onOTPValueChange,
   error = undefined,
   ...props
 }: InputProps) => {
   const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
   const [showPassword, setShowPassword] = useState(false);
-  const inputRefs = useRef<any>([]);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
   const defaultClass = `bg-gray-100 p-2 rounded-lg ${
     error ? "border border-red-600" : ""
   }`;
 
   // This will update the OTP Field Value
-  const updateOtpValue = (index: number, e: any) => {
+  const updateOtpValue = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     e.preventDefault();
     const input = e.target;
     if (input) {
@@ -37,7 +40,7 @@ export const Input = ({
       newOtpValues[index] = input.value;
       setOtpValues(newOtpValues);
       if (index < OTPLength - 1 && input.value) {
-        inputRefs.current[index + 1].focus();
+        inputRefs.current[index + 1]?.focus();
       }
       OTPValue = newOtpValues.join("");
       if (onOTPValueChange) onOTPValueChange(OTPValue);
@@ -45,13 +48,16 @@ export const Input = ({
   };
 
   // Function for handling keyboard navigation in OTP Field
-  const handleKeydown = (index: number, e: any) => {
+  const handleKeydown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
     if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
-      inputRefs.current[index - 1].focus();
+      inputRefs.current[index - 1]?.focus();
     } else if (e.key === "ArrowLeft" && index > 0) {
-      inputRefs.current[index - 1].focus();
+      inputRefs.current[index - 1]?.focus();
     } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
-      inputRefs.current[index + 1].focus();
+      inputRefs.current[index + 1]?.focus();
     }
   };
 
@@ -65,7 +71,10 @@ export const Input = ({
       {!OTPField ? (
         <div className="text-input-container w-full relative">
           <input
-            className={twMerge(defaultClass, "w-full focus:outline-blue-400")}
+            className={twMerge(
+              defaultClass,
+              "w-full text-black focus:outline-blue-400"
+            )}
             {...props}
             type={
               props.type === "password" && showPassword ? "text" : props.type

package/source/components/select/index.tsx

@@ -18,11 +18,11 @@ import React, {
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import { getSourceData } from "../utils";
-import type { ItemsProps, SelectProps } from "./types";
+import type { ItemsProps, SelectHandle, SelectProps } from "./types";
 import { selectStyle } from "./style";
 import { popUp, primary } from "../globalStyle";
 
-const Select = forwardRef<any, SelectProps>((props, ref) => {
+const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   const {
     id = "",
     name = "",
@@ -227,5 +227,7 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
   );
 });
 
+Select.displayName = "Select";
+
 const MemoizedSelect = memo(Select);
 export { MemoizedSelect as Select };

package/source/components/select/types.ts

@@ -11,7 +11,16 @@ export type SelectProps = {
   items?: ItemsProps[] | string;
   lazy?: boolean;
   showSearch?: boolean;
-  onSelect?: any;
+  onSelect?: (selectedItem: string) => void;
   selectedItem?: string;
-  onFiltering?: any;
+  onFiltering?: (searchTerm: string) => void;
+};
+
+export type SelectHandle = {
+  workingDataSource: ItemsProps[];
+  clearSelected: () => void;
+  togglePopover: (e: React.MouseEvent) => void;
+  getSelectItems: (itemsApi: string) => Promise<void>;
+  selectedDisplay: string;
+  selected: string | undefined;
 };

package/source/fallback/index.tsx

@@ -4,7 +4,7 @@ export default function Fallback(props: any) {
   const { component } = props;
   return (
     <div>
-      <p>oops {component} failed!!</p>
+      <p>Oops {component} failed!!</p>
       <button>Raise an Issue</button>
     </div>
   );