gbs-add-block 0.0.2 → 0.0.4

package/package.json

@@ -1,16 +1,16 @@
 {
-  "name": "gbs-add-block",
-  "version": "0.0.2",
-  "description": "React Component Library",
+ "name": "gbs-add-block",
+  "version": "0.0.4",
+  "main": "bin/index.js",
   "files": [
-    "index.js",
-    "source"
+    "bin",
+    "components",
+    "src",
+    "utils.ts",
+    "icon"
   ],
-  "engines": {
-    "node": ">=17"
-  },
   "bin": {
-    "gbs-add-block": "./index.js"
+    "gbs-add-block": "./bin/index.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/index.js

@@ -1,127 +0,0 @@
-#!/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",
-];
-
-// Use __dirname to get the directory where the script is located
-const PACKAGE_ROOT = path.join(__dirname, "..");
-const SOURCE_PATH = path.join(PACKAGE_ROOT, "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(PACKAGE_ROOT, "utils.ts");
-  const utilsDest = path.join(DEST_PATH, "utils.ts");
-  if (fs.existsSync(utilsSrc)) {
-    fs.copySync(utilsSrc, utilsDest, { overwrite: true });
-    console.log(`utils.ts copied successfully to ${utilsDest}`);
-  } else {
-    console.warn(`utils.ts not found at ${utilsSrc}`);
-  }
-
-  // Copy icon folder
-  const iconSrc = path.join(PACKAGE_ROOT, "icon");
-  const iconDest = path.join(DEST_PATH, "icon");
-  if (fs.existsSync(iconSrc)) {
-    fs.copySync(iconSrc, iconDest, { overwrite: true });
-    console.log(`icon folder copied successfully to ${iconDest}`);
-  } else {
-    console.warn(`icon folder not found at ${iconSrc}`);
-  }
-}
-
-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: ${componentSrc}`
-    );
-    return false;
-  }
-
-  fs.copySync(componentSrc, componentDest, { overwrite: true });
-  console.log(`Component ${component} copied successfully to ${componentDest}`);
-
-  if (isFirstCopy) {
-    copyCommonFiles();
-    isFirstCopy = false;
-  }
-
-  return true;
-}
-
-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];
-      const success = copyComponent(selectedComponent);
-
-      if (success) {
-        rl.question(
-          "Do you want to copy another component? (y/n): ",
-          (answer) => {
-            if (answer.toLowerCase() === "y") {
-              promptForComponent();
-            } else {
-              rl.close();
-            }
-          }
-        );
-      } else {
-        promptForComponent();
-      }
-    }
-  );
-}
-
-// Ensure the destination directory exists
-fs.ensureDirSync(DEST_PATH);
-
-// Start the component selection process
-promptForComponent();

package/source/components/button/index.tsx

@@ -1,25 +0,0 @@
-/**
- * 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

@@ -1,9 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,258 +0,0 @@
-/**
- * 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

@@ -1,9 +0,0 @@
-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

@@ -1,44 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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>
-    )
-  );
-}