gbs-add-block 0.0.33 → 0.0.35

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.33)
+# GBS Building Blocks 2.0 (v0.0.35)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.23)
+## What's New 🎉 (Ver 0.0.35)
 
-- Updated Form Renderer (Added Multi Select)
+- Updated Form Renderer (Added Multi Select) with form builder
+- Updated Date Picker
 
 ## Authors
 

package/package.json

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

package/source/components/datepicker/index.tsx

@@ -17,7 +17,7 @@ export const DatePicker = ({
   minDate = null,
   maxDate = null,
   yearLimitStart = 50,
-  yearLimitEnd = 30,
+  yearLimitEnd = 0,
   onDateChange,
 }: DatePickerProps) => {
   const [showDatepicker, setShowDatepicker] = useState(false);
@@ -36,6 +36,12 @@ export const DatePicker = ({
   const dateRef = useRef<HTMLDivElement>(null);
   const today = new Date();
 
+  const actualCurrentYear = today.getFullYear();
+  const years = Array.from(
+    { length: yearLimitStart + yearLimitEnd + 1 },
+    (_, i) => actualCurrentYear - yearLimitStart + i
+  ).sort((a, b) => b - a);
+
   useEffect(() => {
     if (selectedDateValue) {
       setSelectedDate(selectedDateValue);
@@ -44,13 +50,10 @@ export const DatePicker = ({
     }
   }, [selectedDateValue]);
 
-  // This useEffect will ensure the server and client
-  // rendererd date will not mismatch
   useEffect(() => {
     setHasMounted(true);
   }, []);
 
-  // This will helps to close the popup when clicked outside of datepicker component
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (dateRef.current && !dateRef.current.contains(event.target as Node)) {
@@ -68,13 +71,11 @@ export const DatePicker = ({
     setDays(generateCalendarHelper(currentYear, currentMonth));
   }, [currentYear, currentMonth]);
 
-  // DatePicker Toggler
   const toggleDatepicker = () => {
     setShowDatepicker(!showDatepicker);
     setShowYearMonthPicker(false);
   };
 
-  // YearMonthPicker Toggler
   const toggleYearMonthPicker = () => {
     setShowYearMonthPicker(!showYearMonthPicker);
   };
@@ -93,7 +94,6 @@ export const DatePicker = ({
     setDays(generateCalendarHelper(year, month));
   };
 
-  // *** DatePicker navigation starts here
   const prevMonth = () => {
     if (currentMonth === 0) {
       setCurrentMonth(11);
@@ -118,12 +118,6 @@ export const DatePicker = ({
     setSelectedDate(new Date());
     if (onDateChange) onDateChange(new Date());
   };
-  // DatePicker navigation ends here ***
-
-  const years = Array.from(
-    { length: yearLimitEnd },
-    (_, i) => currentYear - yearLimitStart + i
-  );
 
   if (!hasMounted) {
     return null;
@@ -137,9 +131,9 @@ export const DatePicker = ({
         className="border p-2 rounded w-full flex items-center gap-2 dark:text-white"
       >
         <Icon
-          dimensions={{ width: "30", height: "30" }}
+          dimensions={{ width: "20", height: "20" }}
           elements={calender}
-          svgClass={"stroke-black fill-none dark:stroke-white"}
+          svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
         />
 
         {showPlaceHolder ? showPlaceHolder : selectedDate.toLocaleDateString()}

package/source/components/formrenderer/SelectHandles.tsx

@@ -1,36 +1,114 @@
-import React from "react";
+import React, { useEffect, useState } 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 | null>;
-}
+import { Option, SelectHandlesProps } from "./types";
 
 export default function SelectHandles({
   item,
   requirementError,
   setRequirementError,
   formRef,
+  dependencyMap = {},
 }: SelectHandlesProps) {
-  const handleSelect = (value: string, key: string) => {
-    if (formRef && formRef.current) {
-      const hiddenInput = formRef.current.querySelector(
-        `input[name="${key}"]`
-      ) as HTMLInputElement;
-
-      if (hiddenInput) {
-        hiddenInput.value = value;
-      } else {
-        const input = document.createElement("input");
-        input.type = "hidden";
-        input.name = key;
-        input.value = value;
-        formRef.current.appendChild(input);
+  const [options, setOptions] = useState<Option[]>(item?.options || []);
+
+  const getFieldValue = (fieldName: string): string => {
+    if (!formRef?.current) return "";
+    const field = formRef.current.querySelector(
+      `input[name="${fieldName}"]`
+    ) as HTMLInputElement;
+    return field?.value || "";
+  };
+
+  const getDependentOptions = (fieldName: string): Option[] => {
+    const fieldConfig = dependencyMap[fieldName];
+    if (!fieldConfig) return [];
+
+    let currentData = fieldConfig.dataStructure;
+
+    if (fieldConfig.parent) {
+      const parentValue = getFieldValue(fieldConfig.parent);
+      if (!parentValue) return [];
+
+      const getNestedValue = (data: any, path: string[]): any => {
+        return path.reduce((acc, key) => acc?.[key], data);
+      };
+
+      const parentChain: string[] = [];
+      let currentField = fieldName;
+      while (dependencyMap[currentField]?.parent) {
+        const parent = dependencyMap[currentField].parent!;
+        parentChain.unshift(getFieldValue(parent));
+        currentField = parent;
       }
+
+      currentData = getNestedValue(currentData, parentChain);
+    }
+
+    if (Array.isArray(currentData)) {
+      return currentData.map((value) => ({ value, label: value }));
+    } else if (typeof currentData === "object" && currentData !== null) {
+      return Object.keys(currentData).map((key) => ({
+        value: key,
+        label: key,
+      }));
+    }
+
+    return [];
+  };
+
+  useEffect(() => {
+    if (!item?.name || !dependencyMap[item.name]) {
+      return;
     }
+
+    const updateOptions = () => {
+      const newOptions = getDependentOptions(item.name!);
+      setOptions(newOptions);
+    };
+
+    updateOptions();
+
+    const parentField = dependencyMap[item.name]?.parent;
+    if (parentField && formRef?.current) {
+      const parentInput = formRef.current.querySelector(
+        `input[name="${parentField}"]`
+      );
+
+      const handleParentChange = () => {
+        if (formRef.current) {
+          const currentField = formRef.current.querySelector(
+            `input[name="${item.name}"]`
+          ) as HTMLInputElement;
+          if (currentField) {
+            currentField.value = "";
+          }
+        }
+        updateOptions();
+      };
+
+      parentInput?.addEventListener("change", handleParentChange);
+      return () =>
+        parentInput?.removeEventListener("change", handleParentChange);
+    }
+  }, [item?.name, dependencyMap, formRef]);
+
+  const handleSelect = (value: string, key: string) => {
+    if (!formRef?.current) return;
+
+    let input = formRef.current.querySelector(
+      `input[name="${key}"]`
+    ) as HTMLInputElement;
+
+    if (!input) {
+      input = document.createElement("input");
+      input.type = "hidden";
+      input.name = key;
+      formRef.current.appendChild(input);
+    }
+
+    input.value = value;
+    const event = new Event("change", { bubbles: true });
+    input.dispatchEvent(event);
   };
 
   return (
@@ -42,13 +120,13 @@ export default function SelectHandles({
       )}
       <Select
         name={item?.name}
-        items={item?.options}
+        items={options}
         selectedItem={item?.value ?? ""}
         onSelect={(value: string) => {
           item?.name && handleSelect(value, item.name);
           setRequirementError &&
-            setRequirementError((prevErrors: any) =>
-              prevErrors.filter((errorName: any) => errorName !== item?.name)
+            setRequirementError((prevErrors) =>
+              prevErrors.filter((errorName) => errorName !== item?.name)
             );
         }}
         error={
@@ -56,7 +134,7 @@ export default function SelectHandles({
             ? `${item.name} is required`
             : undefined
         }
-      ></Select>
+      />
     </div>
   );
 }

package/source/components/formrenderer/helperFunctions.ts

@@ -7,3 +7,16 @@ export const validatePhoneNumber = (phone: string) => {
   const phoneRegex = /^[0-9]{10}$/;
   return phoneRegex.test(phone);
 };
+
+// In case of return as objects
+export const formDataToObject = (formData: FormData) => {
+  const obj: Record<string, any> = {};
+  formData.forEach((value, key) => {
+    try {
+      obj[key] = JSON.parse(value as string);
+    } catch {
+      obj[key] = value;
+    }
+  });
+  return obj;
+};

package/source/components/formrenderer/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 /**
  * Copyright (c) Grampro Business Services and affiliates.
  *
@@ -17,13 +16,13 @@ const FormRenderer = ({
   sourceData,
   formFormationClass = "grid grid-cols-1 text-left gap-4",
   formParentClass = "w-96",
+  dependencyConfig,
 }: FormRendererProps) => {
   const formRef = useRef<HTMLFormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-
     const requirementErrorItems: string[] = [];
 
     sourceData?.forEach((item: FormItem) => {
@@ -70,6 +69,7 @@ const FormRenderer = ({
                     requirementError={requirementError}
                     setRequirementError={setRequirementError}
                     formRef={formRef}
+                    dependencyMap={dependencyConfig}
                   />
                 );
 

package/source/components/formrenderer/types.ts

@@ -9,11 +9,40 @@ export type FormItem = {
   label?: string;
   button_type?: "button" | "submit" | "reset";
   key?: string;
+  dependency?: string;
+  hasDependents?: boolean;
 };
 
+interface DependencyConfig {
+  source: string;
+  parent?: string;
+  dataStructure: any;
+}
+
 export type FormRendererProps = {
   onSubmit?: (formData: FormData) => void;
   sourceData?: FormItem[] | undefined;
   formFormationClass?: string;
   formParentClass?: string;
+  dependencyConfig?: Record<string, DependencyConfig>;
+};
+
+export type SelectHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  dependencyMap?: Record<
+    string,
+    {
+      source: string;
+      parent?: string;
+      dataStructure: any;
+    }
+  >;
+};
+
+export type Option = {
+  value: string;
+  label: string;
 };