gbs-add-block 0.0.34 → 0.0.36

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.33)
+# GBS Building Blocks 2.0 (v0.0.36)
 
 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.36)
 
-- Updated Form Renderer (Added Multi Select)
+- Updated Form Renderer with form builder and AI support
+- Updated Grid
 
 ## Authors
 

package/package.json

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

package/source/components/formrenderer/InputHandles.tsx

@@ -45,6 +45,7 @@ const InputHandles = ({
       {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
+          {item.required && <span className="text-red-500">*</span>}
         </label>
       )}
       <Input

package/source/components/formrenderer/MultiHandles.tsx

@@ -40,6 +40,7 @@ export default function MultiHandles({
       {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
+          {item.required && <span className="text-red-500">*</span>}
         </label>
       )}
       <MultiSelect

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 (
@@ -38,17 +116,18 @@ export default function SelectHandles({
       {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
+          {item.required && <span className="text-red-500">*</span>}
         </label>
       )}
       <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 +135,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

@@ -1,4 +1,5 @@
 export type FormItem = {
+  id?: string;
   name?: string;
   component?: string;
   type?: string;
@@ -9,11 +10,41 @@ export type FormItem = {
   label?: string;
   button_type?: "button" | "submit" | "reset";
   key?: string;
+  dependency?: string;
+  hasDependents?: boolean;
+  isReady?: 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;
 };

package/source/components/grid/Grid.tsx

@@ -232,6 +232,8 @@ export const GridMemoised = forwardRef((props: GridProps, ref) => {
 
   // This will render template passed to Grid
   const renderCell = (rowData: any, column: any, rowIndex: number) => {
+    const cellValue = rowData[column.field];
+
     if (column.template) {
       return (
         <column.template
@@ -243,7 +245,18 @@ export const GridMemoised = forwardRef((props: GridProps, ref) => {
         />
       );
     }
-    return rowData[column.field];
+
+    if (column.tooltip) {
+      return (
+        <span title={cellValue?.toString()}>
+          {cellValue && cellValue.length > 10
+            ? `${cellValue.slice(0, 10)}...`
+            : cellValue}
+        </span>
+      );
+    }
+
+    return cellValue;
   };
 
   // *** Filter Handling Functions Starts Here

package/source/components/grid/RenderCell.tsx

@@ -0,0 +1,32 @@
+const renderCell = (
+  rowData: any,
+  column: any,
+  rowIndex: number,
+  currentPage: number,
+  pageSettings: any,
+  rowChange?: any
+) => {
+  const cellValue = rowData[column.field];
+
+  if (column.template) {
+    return (
+      <column.template
+        rowData={rowData}
+        rowIndex={rowIndex + currentPage * pageSettings.pageNumber}
+        rowChange={(changes: any) => {
+          if (rowChange) rowChange(changes);
+        }}
+      />
+    );
+  }
+
+  if (column.tooltip) {
+    return (
+      <span title={cellValue?.toString()}>
+        {column.tooltip ? cellValue.slice(0, 10) : cellValue}
+      </span>
+    );
+  }
+
+  return cellValue;
+};