gbs-add-block 0.0.38 → 0.0.39

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.38)
+# GBS Building Blocks 2.0 (v0.0.39)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,9 @@ 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.38)
+## What's New 🎉 (Ver 0.0.39)
 
-- Updated Material Input Component
+- Form Renderer Now Supports Date Picker and CheckBox
 
 ## Authors
 

package/package.json

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

package/source/components/datepicker/DatePickerHelper.ts

@@ -1,8 +1,8 @@
-const getDaysInMonth = (year: any, month: any) => {
+const getDaysInMonth = (year: number, month: number) => {
 	return new Date(year, month + 1, 0).getDate();
 };
 
-export const generateCalendarHelper = (year: any, month: any) => {
+export const generateCalendarHelper = (year: number, month: number) => {
 	const daysInMonth = getDaysInMonth(year, month);
 	const firstDay = new Date(year, month, 1).getDay();
 	const weeks = [];

package/source/components/datepicker/index.tsx

@@ -10,6 +10,7 @@ import { generateCalendarHelper, months } from "./DatePickerHelper";
 import Icon from "../icon/Icon";
 import { calender, down, leftArrows, rightArrows } from "../icon/iconPaths";
 import type { DatePickerProps } from "./types";
+import { primary } from "../globalStyle";
 
 export const DatePicker = ({
   selectedDateValue,
@@ -18,14 +19,20 @@ export const DatePicker = ({
   yearLimitStart = 50,
   yearLimitEnd = 0,
   onDateChange,
+  name,
+  error,
+  placeholder = "Select a date",
 }: DatePickerProps) => {
   const [showDatepicker, setShowDatepicker] = useState(false);
   const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
   const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
-  const [days, setDays] = useState<any>([]);
-  const [selectedDate, setSelectedDate] = useState<any>(
-    selectedDateValue ? selectedDateValue : new Date()
+  const [days, setDays] = useState<(Date | null)[][]>([]);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(
+    selectedDateValue || null
+  );
+  const [tempSelectedDate, setTempSelectedDate] = useState<Date | null>(
+    selectedDateValue || new Date()
   );
   const [hasMounted, setHasMounted] = useState(false);
 
@@ -41,6 +48,7 @@ export const DatePicker = ({
   useEffect(() => {
     if (selectedDateValue) {
       setSelectedDate(selectedDateValue);
+      setTempSelectedDate(selectedDateValue);
       setCurrentMonth(selectedDateValue.getMonth());
       setCurrentYear(selectedDateValue.getFullYear());
     }
@@ -54,6 +62,7 @@ export const DatePicker = ({
     function handleClickOutside(event: MouseEvent) {
       if (dateRef.current && !dateRef.current.contains(event.target as Node)) {
         setShowDatepicker(false);
+        setTempSelectedDate(selectedDate || new Date());
       }
     }
 
@@ -61,7 +70,7 @@ export const DatePicker = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
+  }, [selectedDate]);
 
   useEffect(() => {
     setDays(generateCalendarHelper(currentYear, currentMonth));
@@ -70,19 +79,26 @@ export const DatePicker = ({
   const toggleDatepicker = () => {
     setShowDatepicker(!showDatepicker);
     setShowYearMonthPicker(false);
+    if (!showDatepicker) {
+      setTempSelectedDate(selectedDate || new Date());
+      const date = selectedDate || new Date();
+      setCurrentMonth(date.getMonth());
+      setCurrentYear(date.getFullYear());
+    }
   };
 
   const toggleYearMonthPicker = () => {
     setShowYearMonthPicker(!showYearMonthPicker);
   };
 
-  const selectDate = (date: any) => {
+  const selectDate = (date: Date) => {
     setSelectedDate(date);
+    setTempSelectedDate(date);
     setShowDatepicker(false);
     if (onDateChange) onDateChange(date);
   };
 
-  const selectYearMonth = (year: any, month: any) => {
+  const selectYearMonth = (year: number, month: number) => {
     setCurrentYear(year);
     setCurrentMonth(month);
     setShowYearMonthPicker(false);
@@ -108,10 +124,13 @@ export const DatePicker = ({
   };
 
   const goToToday = () => {
+    const today = new Date();
     setCurrentMonth(today.getMonth());
     setCurrentYear(today.getFullYear());
-    setSelectedDate(new Date());
-    if (onDateChange) onDateChange(new Date());
+    setSelectedDate(today);
+    setTempSelectedDate(today);
+    if (onDateChange) onDateChange(today);
+    setShowDatepicker(false);
   };
 
   if (!hasMounted) {
@@ -119,19 +138,32 @@ export const DatePicker = ({
   }
 
   return (
-    <div className="relative inline-block w-80 dark:bg-black" ref={dateRef}>
+    <div className="relative inline-block w-full dark:bg-black" ref={dateRef}>
       <button
         type="button"
         onClick={toggleDatepicker}
-        className="border p-2 rounded w-full flex items-center gap-2 dark:text-white"
+        className={`${
+          error ? primary["error-border"] : "border"
+        } p-2 rounded-lg w-full flex items-center gap-2 dark:text-white`}
       >
         <Icon
           dimensions={{ width: "20", height: "20" }}
           elements={calender}
           svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
         />
-        {selectedDate.toLocaleDateString()}
+        <span className={!selectedDate ? "text-gray-400" : ""}>
+          {selectedDate ? selectedDate.toLocaleDateString() : placeholder}
+        </span>
       </button>
+      <p className={primary["error-primary"]}>{error && error}</p>
+
+      {/* Hidden input to integrate with the form */}
+      <input
+        type="hidden"
+        name={name}
+        value={selectedDate?.toDateString() || ""}
+        readOnly
+      />
 
       {showDatepicker && (
         <div className="absolute z-10 bg-white border border-gray-300 shadow-lg mt-1 w-full rounded dark:bg-black dark:text-white px-2">
@@ -223,18 +255,20 @@ export const DatePicker = ({
                   {day}
                 </div>
               ))}
-              {days.flat().map((day: any, index: any) => {
+              {days.flat().map((day: Date | null, index: number) => {
                 if (!day) {
                   return (
                     <div key={index} className="text-center p-1 w-8 h-8"></div>
                   );
                 }
-                const isDisabled: any =
-                  (minDate && day < minDate) || (maxDate && day > maxDate);
+                const isDisabled: boolean | undefined =
+                  (minDate && day < minDate) ||
+                  (maxDate && day > maxDate) ||
+                  undefined;
                 const isSelected =
-                  day.getDate() === selectedDate?.getDate() &&
-                  day.getMonth() === selectedDate?.getMonth() &&
-                  day.getFullYear() === selectedDate?.getFullYear();
+                  day.getDate() === tempSelectedDate?.getDate() &&
+                  day.getMonth() === tempSelectedDate?.getMonth() &&
+                  day.getFullYear() === tempSelectedDate?.getFullYear();
 
                 return (
                   <button

package/source/components/datepicker/types.ts

@@ -5,5 +5,7 @@ export type DatePickerProps = {
   maxDate?: Date | null;
   yearLimitStart?: number;
   yearLimitEnd?: number;
-  onDateChange?: any;
+  onDateChange?: (date: Date) => void;
+  name?: string;
+  error?: string;
 };

package/source/components/formrenderer/CheckBoxHandles.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { CheckboxHandlesProps, FormItem } from "./types";
+
+const CheckboxHandles = ({
+  item,
+  formRef,
+  requirementError,
+  setRequirementError,
+}: CheckboxHandlesProps) => {
+  const [checked, setChecked] = useState<boolean>(!!item?.value);
+
+  useEffect(() => {
+    if (item?.name) {
+      handleSelect(checked, item.name);
+    }
+  }, []);
+
+  const handleSelect = (value: boolean, key: string) => {
+    if (formRef && formRef.current) {
+      const hiddenInput = formRef.current.querySelector(
+        `input[name="${key}"]`
+      ) as HTMLInputElement;
+
+      if (hiddenInput) {
+        hiddenInput.value = value.toString();
+      } else {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = key;
+        input.value = value.toString();
+        formRef.current.appendChild(input);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full flex items-center gap-2">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => {
+          const newValue = e.target.checked;
+          setChecked(newValue);
+          if (item?.name) {
+            handleSelect(newValue, item.name);
+            setRequirementError?.((prevErrors) =>
+              prevErrors.filter((error) => error !== item.name)
+            );
+          }
+        }}
+        className={`w-5 h-5 cursor-pointer rounded-md border-2 transition-colors duration-200 ${
+          item?.name && requirementError.includes(item?.name)
+            ? "border-red-500"
+            : "border-gray-300"
+        }`}
+      />
+      {item?.label && (
+        <label htmlFor={item.name} className="font-medium text-sm">
+          {item.label}
+          {item.required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      {item?.name && requirementError.includes(item.name) && (
+        <p className="text-red-500 text-xs">{`${
+          item?.label || item?.name
+        } is required`}</p>
+      )}
+    </div>
+  );
+};
+
+export default CheckboxHandles;

package/source/components/formrenderer/DatePickerHandles.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { DatePicker } from "../datepicker";
+import { FormItem } from "./types";
+
+interface DatePickerHandlesProps {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+}
+
+export default function DatePickerHandles({
+  item,
+  requirementError,
+  setRequirementError,
+  formRef,
+}: DatePickerHandlesProps) {
+  const handleSelectDate = (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}
+          {item.required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <DatePicker
+        name={item?.name}
+        onDateChange={(value: any) => {
+          if (item?.name) {
+            handleSelectDate(value, item.name);
+            setRequirementError?.((prevErrors) =>
+              prevErrors.filter((errorName) => errorName !== item.name)
+            );
+          }
+        }}
+        error={
+          item?.name && requirementError.includes(item.name)
+            ? `${item.name} is required`
+            : undefined
+        }
+        selectedDateValue={item?.value ? new Date(item.value) : undefined}
+      />
+    </div>
+  );
+}

package/source/components/formrenderer/index.tsx

@@ -8,8 +8,10 @@
 import React, { useRef, useState } from "react";
 import InputHandles from "./InputHandles";
 import SelectHandles from "./SelectHandles";
-import { FormItem, FormRendererProps } from "./types";
+import { FormElement, FormItem, FormRendererProps } from "./types";
 import MultiHandles from "./MultiHandles";
+import DatePickerHandles from "./DatePickerHandles";
+import CheckboxHandles from "./CheckBoxHandles";
 
 const FormRenderer = ({
   onSubmit,
@@ -18,7 +20,7 @@ const FormRenderer = ({
   formParentClass = "w-96",
   dependencyConfig,
 }: FormRendererProps) => {
-  const formRef = useRef<HTMLFormElement>(null);
+  const formRef = useRef<FormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -84,6 +86,28 @@ const FormRenderer = ({
                   />
                 );
 
+              case "datepicker":
+                return (
+                  <DatePickerHandles
+                    key={index}
+                    item={item}
+                    requirementError={requirementError}
+                    setRequirementError={setRequirementError}
+                    formRef={formRef}
+                  />
+                );
+
+              case "checkbox":
+                return (
+                  <CheckboxHandles
+                    key={index}
+                    item={item}
+                    requirementError={requirementError}
+                    setRequirementError={setRequirementError}
+                    formRef={formRef}
+                  />
+                );
+
               case "button":
                 return (
                   <div key={index} className="w-full mt-1">

package/source/components/formrenderer/types.ts

@@ -1,3 +1,7 @@
+export interface FormElement extends HTMLFormElement {
+  [key: string]: any;
+}
+
 export type FormItem = {
   id?: string;
   name?: string;
@@ -48,3 +52,10 @@ export type Option = {
   value: string;
   label: string;
 };
+
+export type CheckboxHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+};