gbs-add-block 0.0.1

package/index.js

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+
+const fs = require("fs-extra");
+const path = require("path");
+const readline = require("readline");
+
+const COMPONENTS = [
+  "Select",
+  "Grid",
+  "MultiSelect",
+  "Button",
+  "DatePicker",
+  "Checkbox",
+  "DarkMode",
+  "Dialog",
+  "Input",
+  "Modal",
+  "Spinner",
+  "Toast",
+];
+const SOURCE_PATH = path.join(process.cwd(), "source", "components");
+const DEST_PATH = path.join(process.cwd(), "src", "component-lib");
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+let isFirstCopy = true;
+
+function listComponents() {
+  console.log("Available components:");
+  COMPONENTS.forEach((component, index) => {
+    console.log(`${index + 1}. ${component}`);
+  });
+}
+
+function copyCommonFiles() {
+  // Copy utils.ts
+  const utilsSrc = path.join(SOURCE_PATH, "..", "utils.ts");
+  const utilsDest = path.join(DEST_PATH, "utils.ts");
+  fs.copySync(utilsSrc, utilsDest, { overwrite: true });
+  console.log(`utils.ts copied successfully to ${utilsDest}`);
+
+  // Copy icon folder
+  const iconSrc = path.join(SOURCE_PATH, "..", "icon");
+  const iconDest = path.join(DEST_PATH, "icon");
+  fs.copySync(iconSrc, iconDest, { overwrite: true });
+  console.log(`icon folder copied successfully to ${iconDest}`);
+}
+
+function copyComponent(component) {
+  const componentSrc = path.join(SOURCE_PATH, component.toLowerCase());
+  const componentDest = path.join(DEST_PATH, component.toLowerCase());
+
+  if (!fs.existsSync(componentSrc)) {
+    console.error(`Component ${component} not found in source directory.`);
+    return;
+  }
+
+  fs.copySync(componentSrc, componentDest, { overwrite: true });
+  console.log(`Component ${component} copied successfully to ${componentDest}`);
+
+  if (isFirstCopy) {
+    copyCommonFiles();
+    isFirstCopy = false;
+  }
+}
+
+function promptForComponent() {
+  listComponents();
+  rl.question(
+    'Enter the number of the component you want to copy (or "q" to quit): ',
+    (answer) => {
+      if (answer.toLowerCase() === "q") {
+        rl.close();
+        return;
+      }
+
+      const index = parseInt(answer) - 1;
+      if (isNaN(index) || index < 0 || index >= COMPONENTS.length) {
+        console.log("Invalid selection. Please try again.");
+        promptForComponent();
+        return;
+      }
+
+      const selectedComponent = COMPONENTS[index];
+      copyComponent(selectedComponent);
+
+      rl.question(
+        "Do you want to copy another component? (y/n): ",
+        (answer) => {
+          if (answer.toLowerCase() === "y") {
+            promptForComponent();
+          } else {
+            rl.close();
+          }
+        }
+      );
+    }
+  );
+}
+
+// Ensure the destination directory exists
+fs.ensureDirSync(DEST_PATH);
+
+// Start the component selection process
+promptForComponent();

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "gbs-add-block",
+  "version": "0.0.1",
+  "description": "React Component Library",
+  "files": [
+    "index.js",
+    "source"
+  ],
+  "engines": {
+    "node": ">=17"
+  },
+  "bin": {
+    "gbs-add-block": "./index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Anandhu Remanan",
+  "license": "ISC",
+  "dependencies": {
+    "fs-extra": "^11.2.0",
+    "path": "^0.12.7"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4"
+  }
+}

package/source/components/button/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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, { ButtonHTMLAttributes } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: any;
+  buttonClass?: string;
+}
+
+export const Button = ({
+  children,
+  buttonClass = "px-2 py-1 bg-black text-white rounded-md hover:bg-gray-700",
+  ...props
+}: ButtonProps) => {
+  return (
+    <button className={buttonClass} {...props}>
+      {children}
+    </button>
+  );
+};

package/source/components/checkbox/index.tsx

@@ -0,0 +1,9 @@
+import React, { InputHTMLAttributes } from "react";
+
+export const Checkbox = ({
+  ...props
+}: InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <input type="checkbox" className="w-5 h-5 cursor-pointer" {...props} />
+  );
+};

package/source/components/darkmode/index.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import Icon from "../icon/Icon";
+import { moon, sun } from "../icon/iconPaths";
+
+export const DarkMode = () => {
+  const [dark, setDark] = React.useState(false);
+
+  useEffect(() => {
+    // Check for user's preference in localStorage or system preference
+    const isDarkMode =
+      localStorage.getItem("darkMode") === "true" ||
+      (!("darkMode" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+    setDark(isDarkMode);
+    updateDarkMode(isDarkMode);
+  }, []);
+
+  const updateDarkMode = (isDark: boolean) => {
+    if (isDark) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    localStorage.setItem("darkMode", isDark.toString());
+  };
+
+  const darkModeHandler = () => {
+    const newDarkMode = !dark;
+    setDark(newDarkMode);
+    updateDarkMode(newDarkMode);
+  };
+
+  return (
+    <button onClick={darkModeHandler}>
+      {dark ? (
+        <Icon
+          elements={sun}
+          svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+        />
+      ) : (
+        <Icon
+          elements={moon}
+          svgClass={"stroke-black fill-none dark:stroke-white"}
+        />
+      )}
+    </button>
+  );
+}

package/source/components/datepicker/DatePickerHelper.ts

@@ -0,0 +1,42 @@
+const getDaysInMonth = (year: any, month: any) => {
+	return new Date(year, month + 1, 0).getDate();
+};
+
+export const generateCalendarHelper = (year: any, month: any) => {
+	const daysInMonth = getDaysInMonth(year, month);
+	const firstDay = new Date(year, month, 1).getDay();
+	const weeks = [];
+	let day = 1;
+
+	for (let i = 0; i < 6; i++) {
+		const week = [];
+		for (let j = 0; j < 7; j++) {
+			if (i === 0 && j < firstDay) {
+				week.push(null);
+			} else if (day > daysInMonth) {
+				week.push(null);
+			} else {
+				const date = new Date(year, month, day);
+				week.push(date);
+				day++;
+			}
+		}
+		weeks.push(week);
+	}
+	return weeks;
+};
+
+export const months = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December'
+];

package/source/components/datepicker/index.tsx

@@ -0,0 +1,258 @@
+/**
+ * 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, { useState, useEffect, useRef } from "react";
+import { generateCalendarHelper, months } from "./DatePickerHelper";
+import Icon from "../icon/Icon";
+import { calender, down, leftArrows, rightArrows } from "../icon/iconPaths";
+import type { DatePickerProps } from "./types";
+
+export const DatePicker = ({
+  placeholder = undefined,
+  selectedDate: initialSelectedDate = new Date(),
+  minDate = null,
+  maxDate = null,
+  yearLimitStart = 50,
+  yearLimitEnd = 30,
+  onDateChange,
+}: 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(initialSelectedDate);
+
+  const dateRef = useRef<HTMLDivElement>(null);
+  const today = new Date();
+
+  // 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)) {
+        setShowDatepicker(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    setDays(generateCalendarHelper(currentYear, currentMonth));
+  }, [currentYear, currentMonth]);
+
+  // DatePicker Toggler
+  const toggleDatepicker = () => {
+    setShowDatepicker(!showDatepicker);
+    setShowYearMonthPicker(false);
+  };
+
+  // YearMonthPicker Toggler
+  const toggleYearMonthPicker = () => {
+    setShowYearMonthPicker(!showYearMonthPicker);
+  };
+
+  const selectDate = (date: any) => {
+    setSelectedDate(date);
+    setShowDatepicker(false);
+    if (onDateChange) onDateChange(date);
+  };
+
+  const selectYearMonth = (year: any, month: any) => {
+    setCurrentYear(year);
+    setCurrentMonth(month);
+    setShowYearMonthPicker(false);
+    setDays(generateCalendarHelper(year, month));
+  };
+
+  // *** DatePicker navigation starts here
+  const prevMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+
+  const nextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+
+  const goToToday = () => {
+    setCurrentMonth(today.getMonth());
+    setCurrentYear(today.getFullYear());
+    setSelectedDate(new Date());
+    if (onDateChange) onDateChange(new Date());
+  };
+  // DatePicker navigation ends here ***
+
+  const years = Array.from(
+    { length: yearLimitEnd },
+    (_, i) => currentYear - yearLimitStart + i
+  );
+
+  return (
+    <div className="relative inline-block w-80 dark:bg-black" ref={dateRef}>
+      <button
+        onClick={toggleDatepicker}
+        className="border p-2 rounded w-full flex gap-2 items-center justify-center dark:text-white"
+      >
+        <Icon
+          elements={calender}
+          svgClass={"stroke-black fill-none dark:stroke-white"}
+        />
+        {placeholder ? (
+          <span className="text-gray-500">{placeholder}</span>
+        ) : (
+          selectedDate.toLocaleDateString()
+        )}
+      </button>
+
+      {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">
+          <div className="flex justify-between items-center p-2">
+            <button
+              onClick={prevMonth}
+              className="text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100"
+            >
+              <Icon
+                elements={leftArrows}
+                svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+              />
+            </button>
+            <div className="flex items-center space-x-2">
+              <span className="text-md font-semibold">
+                {new Date(currentYear, currentMonth).toLocaleString("default", {
+                  month: "long",
+                })}{" "}
+                {currentYear}
+              </span>
+              <button onClick={toggleYearMonthPicker} className="">
+                <Icon
+                  elements={down}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                />
+              </button>
+            </div>
+            <button
+              onClick={nextMonth}
+              className="text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100"
+            >
+              <Icon
+                elements={rightArrows}
+                svgClass={"stroke-black fill-none dark:stroke-white"}
+              />
+            </button>
+          </div>
+          {showYearMonthPicker ? (
+            <div className="flex p-2 h-[224px] scrollbar">
+              <div className="w-1/2 pr-1">
+                <h3 className="text-sm font-semibold mb-1">Month</h3>
+                <div className="overflow-y-auto h-[200px] scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 scrollbar">
+                  {months.map((month, index) => (
+                    <button
+                      key={month}
+                      onClick={() => selectYearMonth(currentYear, index)}
+                      className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
+                        index === currentMonth
+                          ? "bg-blue-500 text-white hover:bg-blue-600"
+                          : ""
+                      }`}
+                    >
+                      {month}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div className="w-1/2 pl-1">
+                <h3 className="text-sm font-semibold mb-1">Year</h3>
+                <div className="overflow-y-auto h-[200px] scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 scrollbar">
+                  {years.map((year) => (
+                    <button
+                      key={year}
+                      onClick={() => selectYearMonth(year, currentMonth)}
+                      className={`w-full text-left p-2 cursor-pointer rounded hover:bg-gray-200 transition duration-150 ease-in-out ${
+                        year === currentYear
+                          ? "bg-blue-500 text-white hover:bg-blue-600"
+                          : ""
+                      }`}
+                    >
+                      {year}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-7 gap-1 p-2">
+              {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (
+                <div key={day} className="text-center font-bold text-sm p-1">
+                  {day}
+                </div>
+              ))}
+              {days.flat().map((day: any, index: any) => {
+                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 isSelected =
+                  day.getDate() === selectedDate.getDate() &&
+                  day.getMonth() === selectedDate.getMonth() &&
+                  day.getFullYear() === selectedDate.getFullYear();
+
+                return (
+                  <button
+                    key={index}
+                    onClick={() => !isDisabled && selectDate(day)}
+                    disabled={isDisabled}
+                    className={`text-center p-1 w-8 h-8 cursor-pointer rounded-full hover:bg-gray-200 transition duration-150 ease-in-out ${
+                      isSelected
+                        ? "bg-blue-500 text-white hover:bg-blue-600"
+                        : ""
+                    } ${
+                      isDisabled
+                        ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                        : "hover:bg-gray-200"
+                    }`}
+                  >
+                    {day.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+          <div className="px-2 py-2 flex justify-between mb-8">
+            <button
+              onClick={goToToday}
+              className="text-blue-500 hover:text-blue-600 transition duration-150 ease-in-out"
+            >
+              Today
+            </button>
+            <button
+              onClick={toggleDatepicker}
+              className="text-gray-500 hover:text-gray-600 transition duration-150 ease-in-out"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/source/components/datepicker/types.ts

@@ -0,0 +1,9 @@
+export type DatePickerProps = {
+  placeholder?: string | undefined;
+  selectedDate?: Date;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  yearLimitStart?: number;
+  yearLimitEnd?: number;
+  onDateChange?: any;
+};

package/source/components/dialog/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 from "react";
+import { twMerge } from "tailwind-merge";
+import type { DialogProps } from "./types";
+
+export const Dialog = ({
+  showDialog = false,
+  dialogMessage = "Are you sure?",
+  dialogActionOne = "OK",
+  dialogActionTwo = "Cancel",
+  onDialogActionOneClick,
+  onDialogActionTwoClick,
+  dialogClass = "bg-white p-4 rounded-lg shadow-lg w-96",
+  dialogContentClass = "text-lg",
+  dialogActionOneStyle = "bg-black hover:bg-black text-white font-bold px-2 py-1 rounded mt-4",
+  dialogActionTwoStyle = "border text-black  font-bold px-2 py-1 rounded mt-4 ml-2",
+}: DialogProps) => {
+  if (!showDialog) return null;
+  return (
+    <div
+      className={twMerge(
+        dialogClass,
+        "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      )}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="dialog-title"
+    >
+      <p className={dialogContentClass}>{dialogMessage}</p>
+      <button className={dialogActionOneStyle} onClick={onDialogActionOneClick}>
+        {dialogActionOne}
+      </button>
+      <button className={dialogActionTwoStyle} onClick={onDialogActionTwoClick}>
+        {dialogActionTwo}
+      </button>
+    </div>
+  );
+};

package/source/components/dialog/types.ts

@@ -0,0 +1,12 @@
+export type DialogProps = {
+  showDialog?: boolean;
+  dialogMessage?: string;
+  dialogActionOne?: string;
+  dialogActionTwo?: string;
+  onDialogActionOneClick?: () => void;
+  onDialogActionTwoClick?: () => void;
+  dialogClass?: string;
+  dialogContentClass?: string;
+  dialogActionOneStyle?: string;
+  dialogActionTwoStyle?: string;
+};

package/source/components/grid/FilterPopup.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { useState } from "react";
+
+export default function FilterPopup({ show, columnHeader, filterAction }: any) {
+  const [filterValue, setFilterValue] = useState("");
+  const [filterType, setFilterType] = useState("contains");
+  const [isFilterActive, setIsFilterActive] = useState(false);
+
+  const handleFilterInput = (e: any) => {
+    const filterKeyword = e.target.value;
+    setFilterValue(filterKeyword);
+  };
+
+  const onCancel = () => {
+    filterAction({ type: "cancel" });
+  };
+
+  const applyFilter = () => {
+    filterAction({
+      type: "applyFilter",
+      filterValue,
+      filterType,
+      columnHeader,
+    });
+    show = false;
+    setIsFilterActive(true);
+  };
+
+  const clearFilter = () => {
+    setIsFilterActive(false);
+    filterAction({ type: "clearFilter", columnHeader });
+  };
+
+  return (
+    show && (
+      <div
+        className="absolute bg-gray-100 p-2 border z-50 mt-48 flex items-end flex-col shadow-lg gap-2 rounded-md dark:bg-gray-700"
+        role="dialog"
+      >
+        <select
+          name={`${columnHeader}-filter`}
+          id={`${columnHeader}-filter-id`}
+          className="w-full p-2 rounded-lg dark:bg-gray-600"
+          value={filterType}
+          onChange={(e: any) => {
+            setFilterType(e.target.value);
+          }}
+        >
+          <option value="contains">Contains</option>
+          <option value="starts_with">Starts With</option>
+          <option value="ends_with">Ends With</option>
+        </select>
+        <input
+          type="text"
+          placeholder="Enter filter value"
+          className="rounded-lg p-2 text-sm dark:bg-gray-600"
+          value={filterValue}
+          onInput={handleFilterInput}
+        />
+        <div className="mt-2">
+          <button
+            className="text-xs bg-red-600 text-white p-1 rounded-lg hover:bg-red-600"
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          {isFilterActive && (
+            <button
+              className="text-xs bg-black text-white p-1 rounded-lg dark:bg-white dark:text-white"
+              onClick={clearFilter}
+            >
+              Clear Filter
+            </button>
+          )}
+          <button
+            className="text-xs bg-black text-white p-1 rounded-lg dark:bg-white dark:text-black"
+            onClick={applyFilter}
+          >
+            Apply Filter
+          </button>
+        </div>
+      </div>
+    )
+  );
+}