@grampro/kit 0.0.0-stage → 2.4.1

package/source/legacy-components/datagrid/layout/index.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import type { GridProps } from "../type";
+import Pagination from "./GridPagination";
+import GridBody from "./GridBody";
+import GridToolbar from "./GridToolbar";
+import { GridProvider, useGridContext } from "../context/GridContext";
+
+// Main Grid component that uses context
+export const GridMemoised = forwardRef((props: GridProps, ref) => {
+  return (
+    <GridProvider props={props}>
+      <GridContent ref={ref} />
+    </GridProvider>
+  );
+});
+
+// Internal component that uses context
+const GridContent = forwardRef((_, ref) => {
+  const {
+    gridContainerClass,
+    handleSearch,
+    handleApplyFilter,
+    clearFilter,
+    goToPage,
+    nextPage,
+    prevPage,
+    goToFirstPage,
+    goToEndPage,
+    activeFilterArray,
+  } = useGridContext();
+
+  // Making Grid Functions Accessible in Parent
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        goToPage,
+        nextPage,
+        prevPage,
+        goToFirstPage,
+        goToEndPage,
+        handleSearch,
+        handleApplyFilter,
+        clearFilter,
+        getActiveFilters: () => activeFilterArray,
+      };
+    },
+    [
+      goToPage,
+      nextPage,
+      prevPage,
+      goToFirstPage,
+      goToEndPage,
+      handleSearch,
+      handleApplyFilter,
+      clearFilter,
+      activeFilterArray,
+    ]
+  );
+
+  return (
+    <div className={gridContainerClass}>
+      <GridToolbar />
+      <GridBody />
+      <Pagination />
+    </div>
+  );
+});

package/source/legacy-components/datagrid/type.ts

@@ -0,0 +1,198 @@
+import type { ChangeEvent } from "react";
+
+interface PageSettingsProps {
+  pageNumber: number;
+  totalCount?: number;
+}
+
+export interface ActiveFilterArrayValue {
+  filterColumn: string;
+  filterCondition: string;
+  filterValue: string;
+}
+
+export type GridProps = {
+  dataSource: any[] | string;
+  columns?: any[];
+  pageSettings?: PageSettingsProps;
+  pageSize?: number;
+  enableSearch?: boolean;
+  lazy?: boolean;
+  enableExcelExport?: boolean;
+  excelName?: string;
+  enablePdfExport?: boolean;
+  pdfName?: string;
+  gridContainerClass?: string;
+  gridButtonClass?: string;
+  gridHeaderClass?: string;
+  gridToolbarClass?: string;
+  gridPaginationClass?: string;
+  gridRowEvenClass?: string;
+  gridRowOddClass?: string;
+  gridRowSelectedClass?: string;
+  gridGlobalSearchButtonClass?: string;
+  gridPaginationButtonClass?: string;
+  pdfOptions?: any;
+  isFetching?: boolean;
+  showPagination?: boolean;
+  selectAll?: boolean;
+  onSelectRow?: (value: any) => void;
+  tableHeaderStyle?: string;
+  gridColumnStyleSelectAll?: string;
+  gridColumnStyle?: string;
+  rowChange?: (rowData: any) => void;
+  onRowClick?: (rowData: any) => void;
+  pageStatus?: ({ currentPage }: { currentPage: number }) => void;
+  onPageChange?: ({ currentPage }: { currentPage: number }) => void;
+  activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
+  onFilterChange?: (filters: ActiveFilterArrayValue[]) => void;
+  searchParamValue?: (value: string) => void;
+  onSearchChange?: (value: string) => void;
+  showTotalPages?: boolean;
+  onSearch?: (value: string) => void;
+  onToolbarButtonClick?: (action: string) => void;
+  initialFilters?: ActiveFilterArrayValue[];
+  initialSearchParam?: string;
+};
+
+interface GridColumn {
+  key: string;
+  label: string;
+  [key: string]: any;
+}
+
+interface PDFExportOptions {
+  layout: "portrait" | "landscape";
+  paperSize:
+    | "a3"
+    | "a4"
+    | "letter"
+    | "legal"
+    | "tabloid"
+    | "statement"
+    | "executive";
+}
+
+export type GridToolbarProps = {
+  enableExcelExport: boolean;
+  enableSearch: boolean;
+  enablePdfExport: boolean;
+  gridButtonClass: string;
+  workingDataSource: any[];
+  columns: GridColumn[];
+  excelName: string;
+  pdfName: string;
+  pdfOptions: PDFExportOptions;
+  searchParam: string;
+  handleSearchInput: (event: ChangeEvent<HTMLInputElement>) => void;
+  handleSearch: (searchTerm: string) => void;
+};
+
+export type PaginationProps = {
+  goToFirstPage: () => void;
+  currentPage: number;
+  prevPage: () => void;
+  pageStart: number;
+  goToPage: (page: number) => void;
+  workingDataSource: any[];
+  pageEnd: number;
+  totalPages: number;
+  nextPage: () => void;
+  goToEndPage: () => void;
+};
+
+export type Column = {
+  field: string;
+  headerText?: string;
+  width?: number;
+  filter?: boolean;
+  template?: React.FC<{
+    rowData: any;
+    rowIndex: number;
+    rowChange: (changes: any) => void;
+  }>;
+  tooltip?: boolean;
+  showFilterPopup?: boolean;
+};
+
+export type GridBodyProps = {
+  selectAll?: boolean;
+  handleSelectAll: () => void;
+  workingColumns: Column[];
+  tableHeaderStyle: string;
+  toggleFilterPopup: (index: number) => void;
+  activeFilterArray: { filterColumn: string }[];
+  handleFilterAction: (action: any, index: number) => void;
+  workingDataSource: any[];
+  isFetching: boolean | undefined;
+  currentPage: number;
+  pageSettings: { pageNumber: number };
+  gridColumnStyleSelectAll: string;
+  isRowSelected: (rowData: any) => boolean;
+  handleSelect: (rowData: any) => void;
+  gridColumnStyle: string;
+  rowChange?: (changes: any) => void;
+};
+
+export interface GridContextType {
+  workingDataSource: any[];
+  fallbackSourceData: any[];
+  workingColumns: any[];
+  currentPage: number;
+  pageStart: number;
+  pageEnd: number;
+  totalPages: number;
+  searchParam: string;
+  activeFilterArray: any[];
+  selectedRows: any[];
+  isFetching: boolean | undefined;
+
+  // Navigation methods
+  nextPage: () => void;
+  prevPage: () => void;
+  goToEndPage: () => void;
+  goToFirstPage: () => void;
+  goToPage: (page: number) => void;
+  lazy: boolean;
+
+  // Search methods
+  handleSearchInput: (e: any) => void;
+  handleSearch: (searchParam: string) => void;
+
+  // Filter methods
+  toggleFilterPopup: (index: number) => void;
+  handleApplyFilter: (event: any) => void;
+  clearFilter: (event: any) => void;
+  handleFilterAction: (action: any, colIndex: number) => void;
+
+  // Row selection methods
+  handleSelectAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSelect: (rowData: any) => void;
+  isRowSelected: (rowData: any) => boolean;
+
+  // Grid settings
+  columns: any[];
+  pageSettings: any;
+  pageSize: number;
+  enableSearch: boolean;
+  enableExcelExport: boolean;
+  enablePdfExport: boolean;
+  excelName: string;
+  pdfName: string;
+  pdfOptions: any;
+  gridButtonClass: string;
+  selectAll: boolean;
+  tableHeaderStyle: string;
+  gridContainerClass: string;
+  gridToolbarClass: string;
+  gridPaginationClass: string;
+  gridRowEvenClass: string;
+  gridRowOddClass: string;
+  gridRowSelectedClass: string;
+  gridColumnStyleSelectAll: string;
+  gridColumnStyle: string;
+  rowChange: (rowData: any) => void;
+  showTotalPages?: boolean;
+  onSearch?: (searchParam: string) => void;
+  onToolbarButtonClick?: (action: string) => void;
+}

package/source/legacy-components/datepicker/index.tsx

@@ -0,0 +1,365 @@
+/**
+ * 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, { useRef } from "react";
+import {
+  useDatePickerState,
+  useYearMonthNavigation,
+  useClickOutside,
+  isAtYearLimit,
+  months,
+  applyScrollbarStyles,
+} from "@grampro/headless-helpers";
+import Icon from "../icon/Icon";
+import { calender, down, leftArrow, rightArrow, x } from "../icon/iconPaths";
+import type { DatePickerProps } from "./types";
+import { iconClass, popUp, primary } from "../globalStyle";
+
+export const DatePicker = ({
+  selectedDateValue,
+  minDate = null,
+  maxDate = null,
+  yearLimitStart = 50,
+  yearLimitEnd = 0,
+  onDateChange,
+  name,
+  error,
+  placeholder = "Select a date",
+  disabled = false,
+  ...props
+}: DatePickerProps) => {
+  applyScrollbarStyles();
+
+  const dateRef = useRef<HTMLDivElement>(null);
+  const today = new Date();
+  const actualCurrentYear = today.getFullYear();
+
+  const {
+    showDatepicker,
+    setShowDatepicker,
+    showYearMonthPicker,
+    setShowYearMonthPicker,
+    currentMonth,
+    setCurrentMonth,
+    currentYear,
+    setCurrentYear,
+    days,
+    selectedDate,
+    setSelectedDate,
+    tempSelectedDate,
+    setTempSelectedDate,
+    hasMounted,
+    clearSelected,
+  } = useDatePickerState(selectedDateValue || null);
+
+  const { prevMonth, nextMonth } = useYearMonthNavigation(
+    currentMonth,
+    currentYear,
+    yearLimitStart,
+    yearLimitEnd,
+    setCurrentMonth,
+    setCurrentYear
+  );
+
+  useClickOutside(
+    dateRef as React.RefObject<HTMLElement>,
+    () => {
+      setShowDatepicker(false);
+      setTempSelectedDate(selectedDate || new Date());
+    },
+    [selectedDate]
+  );
+
+  const years = Array.from(
+    { length: yearLimitStart + yearLimitEnd + 1 },
+    (_, i) => actualCurrentYear - yearLimitStart + i
+  ).sort((a, b) => b - a);
+
+  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: Date) => {
+    setSelectedDate(date);
+    setTempSelectedDate(date);
+    setShowDatepicker(false);
+    if (onDateChange) onDateChange(date);
+  };
+
+  const selectYearMonth = (year: number, month: number) => {
+    setCurrentYear(year);
+    setCurrentMonth(month);
+    setShowYearMonthPicker(false);
+  };
+
+  const goToToday = () => {
+    const today = new Date();
+    setCurrentMonth(today.getMonth());
+    setCurrentYear(today.getFullYear());
+    setSelectedDate(today);
+    setTempSelectedDate(today);
+    if (onDateChange) onDateChange(today);
+    setShowDatepicker(false);
+  };
+
+  if (!hasMounted) {
+    return null;
+  }
+
+  const clearSelectedHandler = () => {
+    clearSelected();
+    if (onDateChange) onDateChange(null);
+  };
+
+  return (
+    <div className="relative inline-block w-full" ref={dateRef}>
+      <div
+        className={`${
+          error ? primary["error-border"] : "border border-gray-300"
+        } p-2 rounded-lg w-full flex items-center justify-between gap-2  ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        }`}
+      >
+        <button
+          type="button"
+          onClick={toggleDatepicker}
+          disabled={disabled}
+          className="flex items-center gap-2 w-full cursor-pointer"
+        >
+          <Icon
+            dimensions={{ width: "20", height: "20" }}
+            elements={calender}
+            svgClass={iconClass["grey-common"]}
+          />
+          <span className={!selectedDate ? "text-gray-400 text-sm" : "text-sm"}>
+            {selectedDate
+              ? selectedDate.toLocaleDateString("en-GB")
+              : placeholder}
+          </span>
+        </button>
+
+        {selectedDate && !disabled && (
+          <button onClick={clearSelectedHandler} type="button">
+            <Icon elements={x} svgClass={iconClass["grey-common"]} />
+          </button>
+        )}
+      </div>
+
+      {error && <p className={primary["error-primary"]}>{error}</p>}
+
+      <input
+        type="hidden"
+        name={name}
+        value={selectedDate?.toDateString() || ""}
+        readOnly
+        {...props}
+      />
+
+      {showDatepicker && !disabled && (
+        <div className={popUp["pop-up-style-calender"]}>
+          <div className="flex justify-between items-center p-2 text-xs">
+            <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=""
+                type="button"
+              >
+                <Icon
+                  elements={down}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
+                />
+              </button>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <button
+                type="button"
+                onClick={prevMonth}
+                disabled={isAtYearLimit(
+                  "prev",
+                  currentMonth,
+                  currentYear,
+                  yearLimitStart,
+                  yearLimitEnd
+                )}
+                className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                  isAtYearLimit(
+                    "prev",
+                    currentMonth,
+                    currentYear,
+                    yearLimitStart,
+                    yearLimitEnd
+                  )
+                    ? "opacity-50"
+                    : ""
+                }`}
+              >
+                <Icon
+                  elements={leftArrow}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={nextMonth}
+                disabled={isAtYearLimit(
+                  "next",
+                  currentMonth,
+                  currentYear,
+                  yearLimitStart,
+                  yearLimitEnd
+                )}
+                className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                  isAtYearLimit(
+                    "next",
+                    currentMonth,
+                    currentYear,
+                    yearLimitStart,
+                    yearLimitEnd
+                  )
+                    ? "opacity-50"
+                    : ""
+                }`}
+              >
+                <Icon
+                  elements={rightArrow}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
+                />
+              </button>
+            </div>
+          </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
+                      type="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-black text-white dark:bg-zinc-500"
+                          : ""
+                      }`}
+                    >
+                      {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
+                      type="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-black text-white dark:bg-zinc-500"
+                          : ""
+                      }`}
+                    >
+                      {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-xs p-1">
+                  {day}
+                </div>
+              ))}
+              {days.flat().map((day: Date | null, index: number) => {
+                if (!day) {
+                  return (
+                    <div
+                      key={index}
+                      className="text-center p-1 w-8 h-8 text-xs"
+                    ></div>
+                  );
+                }
+                const isDisabled: boolean | undefined =
+                  (minDate && day < minDate) ||
+                  (maxDate && day > maxDate) ||
+                  undefined;
+                const isSelected =
+                  day.getDate() === tempSelectedDate?.getDate() &&
+                  day.getMonth() === tempSelectedDate?.getMonth() &&
+                  day.getFullYear() === tempSelectedDate?.getFullYear();
+
+                return (
+                  <button
+                    type="button"
+                    key={index}
+                    onClick={() => !isDisabled && selectDate(day)}
+                    disabled={isDisabled}
+                    className={`text-center text-xs p-1 w-8 h-8 cursor-pointer rounded-md transition duration-150 ease-in-out ${
+                      isSelected
+                        ? "bg-black text-white hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
+                        : "hover:bg-gray-200 dark:hover:bg-zinc-800"
+                    } ${
+                      isDisabled
+                        ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-zinc-900 dark:text-zinc-600"
+                        : ""
+                    }`}
+                  >
+                    {day.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+          <div className="px-2 py-2 flex justify-between mb-8 text-xs">
+            <button
+              type="button"
+              onClick={goToToday}
+              className="text-black hover:text-zinc-650 transition duration-150 ease-in-out dark:text-zinc-400 dark:hover:text-zinc-200 font-semibold"
+            >
+              Today
+            </button>
+            <button
+              type="button"
+              onClick={toggleDatepicker}
+              className="text-gray-500 hover:text-gray-600 transition duration-150 ease-in-out"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+

package/source/legacy-components/datepicker/types.ts

@@ -0,0 +1,12 @@
+export type DatePickerProps = {
+  placeholder?: string | undefined;
+  selectedDateValue?: Date;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  yearLimitStart?: number;
+  yearLimitEnd?: number;
+  onDateChange?: (date: Date | null) => void;
+  name?: string;
+  error?: string;
+  disabled?: boolean;
+};

package/source/legacy-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/legacy-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;
+};