gbs-add-block 0.0.32 → 0.0.33

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.31)
+# GBS Building Blocks 2.0 (v0.0.33)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -8,9 +8,7 @@ For detailed documentation on usage and props, Please visit: [Building Block Doc
 
 ## What's New 🎉 (Ver 0.0.23)
 
-- Updated Grid
-- Updated Modal
-- New Components (Material Input (Material Design Inspired Input), Form Renderer(Dynamic Form Rendering))
+- Updated Form Renderer (Added Multi Select)
 
 ## Authors
 

package/package.json

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

package/source/components/formrenderer/InputHandles.tsx

@@ -52,7 +52,7 @@ const InputHandles = ({
         name={item?.name}
         placeholder={item?.placeholder || ""}
         onChange={handleChange}
-        className={`border rounded p-2 w-full text-black ${
+        className={`border rounded-md px-4 py-[6px] w-full text-black ${
           inputError || (item?.name && requirementError.includes(item?.name))
             ? "border-red-500"
             : "border-gray-300"

package/source/components/formrenderer/MultiHandles.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { FormItem } from "./types";
+import { MultiSelect } from "../multiselect";
+
+interface MultiSelectHandlesProps {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+}
+
+export default function MultiHandles({
+  item,
+  requirementError,
+  setRequirementError,
+  formRef,
+}: MultiSelectHandlesProps) {
+  const handleSelect = (value: string[], key: string) => {
+    if (formRef && formRef.current) {
+      const hiddenInput = formRef.current.querySelector(
+        `input[name="${key}"]`
+      ) as HTMLInputElement;
+
+      if (hiddenInput) {
+        hiddenInput.value = Array.isArray(value)
+          ? JSON.stringify(value)
+          : value;
+      } else {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = key;
+        input.value = Array.isArray(value) ? JSON.stringify(value) : value;
+        formRef.current.appendChild(input);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+        </label>
+      )}
+      <MultiSelect
+        name={item?.name}
+        items={item?.options}
+        onSelect={(value: string[]) => {
+          if (item?.name) {
+            handleSelect(value, item.name);
+            setRequirementError?.((prevErrors) =>
+              prevErrors.filter((errorName) => errorName !== item.name)
+            );
+          }
+        }}
+        error={
+          item?.name && requirementError.includes(item.name)
+            ? `${item.name} is required`
+            : undefined
+        }
+      />
+    </div>
+  );
+}

package/source/components/formrenderer/SelectHandles.tsx

@@ -45,7 +45,7 @@ export default function SelectHandles({
         items={item?.options}
         selectedItem={item?.value ?? ""}
         onSelect={(value: string) => {
-          item?.key && handleSelect(value, item.key);
+          item?.name && handleSelect(value, item.name);
           setRequirementError &&
             setRequirementError((prevErrors: any) =>
               prevErrors.filter((errorName: any) => errorName !== item?.name)

package/source/components/formrenderer/index.tsx

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Copyright (c) Grampro Business Services and affiliates.
  *
@@ -9,6 +10,7 @@ import React, { useRef, useState } from "react";
 import InputHandles from "./InputHandles";
 import SelectHandles from "./SelectHandles";
 import { FormItem, FormRendererProps } from "./types";
+import MultiHandles from "./MultiHandles";
 
 const FormRenderer = ({
   onSubmit,
@@ -71,6 +73,17 @@ const FormRenderer = ({
                   />
                 );
 
+              case "multi-select":
+                return (
+                  <MultiHandles
+                    key={index}
+                    item={item}
+                    requirementError={requirementError}
+                    setRequirementError={setRequirementError}
+                    formRef={formRef}
+                  />
+                );
+
               case "button":
                 return (
                   <div key={index} className="w-full mt-1">

package/source/components/multiselect/index.tsx

@@ -17,207 +17,223 @@ import React, {
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import { getSourceData } from "../utils";
-import type { MultiSelectProps } from "./types";
-
-interface ItemsProps {
-  value: string;
-  label: string;
-}
-
-const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
-  const {
-    placeholder = "Select an Item...",
-    items,
-    lazy = false,
-    showSearch = true,
-    onSelect,
-    truncate = true,
-    selectedItems = [],
-  } = props;
-
-  const [showPopover, setShowPopover] = useState(false);
-  const [workingDataSource, setWorkingDataSource] = useState<ItemsProps[]>([]);
-  const [filteredItems, setFilteredItems] = useState<ItemsProps[]>([]);
-  const [selected, setSelected] = useState<string[]>(selectedItems);
-  const [searchTerm, setSearchTerm] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-  const selectRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, [showPopover]);
-
-  useEffect(() => {
-    handleDataSource();
-  }, [items]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        selectRef.current &&
-        !selectRef.current.contains(event.target as Node)
-      ) {
-        setShowPopover(false);
+import type { ItemsProps, MultiSelectHandle, MultiSelectProps } from "./types";
+import { primary } from "../globalStyle";
+
+const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
+  (props, ref) => {
+    const {
+      placeholder = "Select Items...",
+      items,
+      lazy = false,
+      showSearch = true,
+      onSelect,
+      truncate = true,
+      selectedItems = [],
+      name,
+      error,
+    } = props;
+
+    const [showPopover, setShowPopover] = useState(false);
+    const [workingDataSource, setWorkingDataSource] = useState<ItemsProps[]>(
+      []
+    );
+    const [filteredItems, setFilteredItems] = useState<ItemsProps[]>([]);
+    const [selected, setSelected] = useState<string[]>(selectedItems);
+    const [searchTerm, setSearchTerm] = useState("");
+    const inputRef = useRef<HTMLInputElement>(null);
+    const selectRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      inputRef.current?.focus();
+    }, [showPopover]);
+
+    useEffect(() => {
+      handleDataSource();
+    }, [items]);
+
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          selectRef.current &&
+          !selectRef.current.contains(event.target as Node)
+        ) {
+          setShowPopover(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    const getSelectItems = async (itemsApi: string) => {
+      const itemsData = await getSourceData(itemsApi);
+      setWorkingDataSource(itemsData.sourcedata);
+      setFilteredItems(itemsData.sourcedata);
+    };
+
+    const handleDataSource = async () => {
+      if (Array.isArray(items)) {
+        setWorkingDataSource(items);
+        setFilteredItems(items);
+      } else if (typeof items === "string") {
+        await getSelectItems(items);
+      }
+    };
+
+    const togglePopover = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setShowPopover(!showPopover);
+    };
+
+    const handleSelect = useCallback(
+      (value: string) => {
+        const newSelected = selected.includes(value)
+          ? selected.filter((item) => item !== value)
+          : [...selected, value];
+        setSelected(newSelected);
+        onSelect?.(newSelected);
+      },
+      [selected, onSelect]
+    );
+
+    const getSelectedDisplay = () => {
+      if (selected.length === 0) return placeholder;
+      const displayedItems = selected
+        .slice(0, 3)
+        .map(
+          (value) =>
+            workingDataSource.find((item) => item.value === value)?.label || ""
+        );
+      let display = displayedItems.join(", ");
+      if (selected.length > 3 && truncate) {
+        display += `, +${selected.length - 3} more`;
       }
+      return display;
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const getSelectItems = async (itemsApi: string) => {
-    const itemsData = await getSourceData(itemsApi);
-    setWorkingDataSource(itemsData.sourcedata);
-    setFilteredItems(itemsData.sourcedata);
-  };
-
-  const handleDataSource = async () => {
-    if (Array.isArray(items)) {
-      setWorkingDataSource(items);
-      setFilteredItems(items);
-    } else if (typeof items === "string") {
-      await getSelectItems(items);
-    }
-  };
-
-  const togglePopover = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setShowPopover(!showPopover);
-  };
-
-  const handleSelect = useCallback(
-    (value: string) => {
-      const newSelected = selected.includes(value)
-        ? selected.filter((item) => item !== value)
-        : [...selected, value];
-      setSelected(newSelected);
-      onSelect?.(newSelected);
-    },
-    [selected, onSelect]
-  );
-
-  const getSelectedDisplay = () => {
-    if (selected.length === 0) return placeholder;
-    const displayedItems = selected
-      .slice(0, 3)
-      .map(
-        (value) =>
-          workingDataSource.find((item) => item.value === value)?.label || ""
-      );
-    let display = displayedItems.join(", ");
-    if (selected.length > 3 && truncate) {
-      display += `, +${selected.length - 3} more`;
-    }
-    return display;
-  };
-
-  const inputSearchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.toLowerCase();
-    setSearchTerm(value);
-    if (!lazy) {
-      setFilteredItems(
-        workingDataSource.filter((item) =>
-          Object.values(item).some((val) =>
-            val.toString().toLowerCase().includes(value)
+
+    const inputSearchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value.toLowerCase();
+      setSearchTerm(value);
+      if (!lazy) {
+        setFilteredItems(
+          workingDataSource.filter((item) =>
+            Object.values(item).some((val) =>
+              val.toString().toLowerCase().includes(value)
+            )
           )
-        )
-      );
-    }
-  };
-
-  const clearSelected = () => {
-    setSelected([]);
-    setShowPopover(false);
-    if (onSelect) onSelect([]);
-  };
-
-  useImperativeHandle(ref, () => ({
-    workingDataSource,
-    items,
-    clearSelected,
-    togglePopover,
-    getSelectItems,
-    selectedDisplay: getSelectedDisplay(),
-    selected,
-  }));
-
-  return (
-    <div className="relative w-[200px]" ref={selectRef}>
-      <div className="relative border w-[200px] flex items-center px-4 py-2 rounded-lg">
-        <button
-          onClick={togglePopover}
-          className="flex-grow text-sm text-left"
-          type="button"
+        );
+      }
+    };
+
+    const clearSelected = () => {
+      setSelected([]);
+      setShowPopover(false);
+      if (onSelect) onSelect([]);
+    };
+
+    useImperativeHandle(ref, () => ({
+      workingDataSource,
+      items,
+      clearSelected,
+      togglePopover,
+      getSelectItems,
+      selectedDisplay: getSelectedDisplay(),
+      selected,
+    }));
+
+    return (
+      <div className="relative w-full" ref={selectRef}>
+        <div
+          className={`relative border w-full flex items-center px-4 py-2 rounded-lg ${
+            error && "border-red-500"
+          }`}
         >
-          {getSelectedDisplay()}
-        </button>
-        <div className="flex items-center space-x-2">
-          {selected.length > 0 && (
-            <button
-              className="flex items-center px-2"
-              onClick={clearSelected}
-              type="button"
-            >
-              <Icon
-                elements={x}
-                svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
-              />
-            </button>
-          )}
-          <button onClick={togglePopover} type="button">
-            <Icon
-              elements={upDown}
-              svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
-            />
+          <button
+            onClick={togglePopover}
+            className="flex-grow text-sm text-left font-medium"
+            type="button"
+          >
+            {getSelectedDisplay()}
           </button>
-        </div>
-      </div>
-
-      {showPopover && (
-        <div className="w-[200px] absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white">
-          {showSearch && (
-            <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">
-              <Icon
-                elements={search}
-                svgClass="stroke-gray-500 fill-none dark:stroke-white"
-              />
-              <input
-                autoComplete="off"
-                type="text"
-                name="search"
-                id="search"
-                placeholder="Search a value"
-                className="w-full outline-none dark:bg-black"
-                ref={inputRef}
-                value={searchTerm}
-                onChange={inputSearchHandler}
-              />
-            </div>
-          )}
-          {filteredItems.length > 0 ? (
-            filteredItems.map(({ value, label }) => (
+          <div className="flex items-center space-x-2">
+            {selected.length > 0 && (
               <button
+                className="flex items-center px-2"
+                onClick={clearSelected}
                 type="button"
-                key={value}
-                className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
-                onClick={() => handleSelect(value)}
               >
                 <Icon
-                  elements={check}
-                  svgClass={`h-4 w-4 fill-none ${
-                    selected.includes(value) ? "stroke-gray-500" : ""
-                  }`}
+                  elements={x}
+                  svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
                 />
-                {label}
               </button>
-            ))
-          ) : (
-            <div className="text-sm text-center">No Data Found</div>
-          )}
+            )}
+            <button onClick={togglePopover} type="button">
+              <Icon
+                elements={upDown}
+                svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
+              />
+            </button>
+          </div>
         </div>
-      )}
-    </div>
-  );
-});
+        <p className={primary["error-primary"]}>{error && error}</p>
+
+        {/* Hidden input to integrate with the form */}
+        <input
+          type="hidden"
+          name={name}
+          value={JSON.stringify(selected) || ""}
+          readOnly
+        />
+
+        {showPopover && (
+          <div className="w-full absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white">
+            {showSearch && (
+              <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">
+                <Icon
+                  elements={search}
+                  svgClass="stroke-gray-500 fill-none dark:stroke-white"
+                />
+                <input
+                  autoComplete="off"
+                  type="text"
+                  name="search"
+                  id="search"
+                  placeholder="Search a value"
+                  className="w-full outline-none dark:bg-black"
+                  ref={inputRef}
+                  value={searchTerm}
+                  onChange={inputSearchHandler}
+                />
+              </div>
+            )}
+            {filteredItems.length > 0 ? (
+              filteredItems.map(({ value, label }) => (
+                <button
+                  type="button"
+                  key={value}
+                  className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
+                  onClick={() => handleSelect(value)}
+                >
+                  <Icon
+                    elements={check}
+                    svgClass={`h-4 w-4 fill-none ${
+                      selected.includes(value) ? "stroke-gray-500" : ""
+                    }`}
+                  />
+                  {label}
+                </button>
+              ))
+            ) : (
+              <div className="text-sm text-center">No Data Found</div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
 const MemoizedMultiSelect = memo(MultiSelect);
 export { MemoizedMultiSelect as MultiSelect };

package/source/components/multiselect/types.ts

@@ -1,14 +1,25 @@
-interface ItemsProps {
+export type ItemsProps = {
   value: string;
   label: string;
-}
+};
 
 export type MultiSelectProps = {
   placeholder?: string;
   items?: ItemsProps[] | string;
   lazy?: boolean;
   showSearch?: boolean;
-  onSelect?: any;
+  onSelect?: (selectedItem: string[]) => void;
   truncate?: boolean;
   selectedItems?: string[];
+  name?: string;
+  error?: string;
+};
+
+export type MultiSelectHandle = {
+  workingDataSource: ItemsProps[];
+  clearSelected: () => void;
+  togglePopover: (e: React.MouseEvent) => void;
+  getSelectItems: (itemsApi: string) => Promise<void>;
+  selectedDisplay: string;
+  selected: string[] | undefined;
 };