@grampro/kit 0.0.0-stage → 2.4.0

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

@@ -0,0 +1,127 @@
+export type Option = {
+  value: string;
+  label: string;
+};
+export interface FormElement extends HTMLFormElement {
+  [key: string]: any;
+}
+
+export type FormItem = {
+  id?: string;
+  name?: string;
+  component?:
+    | "input"
+    | "select"
+    | "multi-select"
+    | "datepicker"
+    | "checkbox"
+    | "button";
+  type?: string;
+  required?: boolean | string;
+  placeholder?: string;
+  options?: { value: string; label: string }[];
+  value?: string;
+  label?: string;
+  button_type?: "button" | "submit" | "reset";
+  key?: string;
+  dependency?: string;
+  hasDependents?: boolean;
+  isReady?: boolean;
+  disabled?: string | boolean;
+  onChangeEvent?: (event: any) => void;
+  stepProperty?: {
+    customClass?: {
+      inputClass?: string;
+    };
+  };
+};
+
+export type FormRendererProps = {
+  onSubmit?: (formData: FormData) => void;
+  schema?: FormItem[] | undefined;
+  formFormationClass?: string;
+  formParentClass?: string;
+};
+
+// Handler Props Starts here
+export type FieldValue = string | boolean | number | null;
+
+export type CheckboxHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  changeTrigger?: number;
+  setChangeTrigger?: React.Dispatch<React.SetStateAction<number>>;
+  sourceData?: FormItem[];
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+
+export interface FormContext {
+  [componentName: string]: {
+    [fieldName: string]: FieldValue;
+  };
+}
+
+export type InputHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  onChangeEvent?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+
+export type DatePickerHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+
+export type SelectHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+
+export type MultiSelectHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+// Handler Props Ends here

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

@@ -0,0 +1,142 @@
+/**
+ * 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, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import Icon from "../icon/Icon";
+import { eye, search } from "../icon/iconPaths";
+import type { InputProps } from "./types";
+import { iconClass, inputStyles, primary } from "../globalStyle";
+
+export const Input = ({
+  OTPField = false,
+  OTPValue = "",
+  OTPLength = 4,
+  OTPClass = inputStyles.otp,
+  onOTPValueChange,
+  error = undefined,
+  className,
+  ...props
+}: InputProps) => {
+  const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
+  const [showPassword, setShowPassword] = useState(false);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const updateOtpValue = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    e.preventDefault();
+    const input = e.target;
+    if (input) {
+      const newOtpValues = [...otpValues];
+      newOtpValues[index] = input.value;
+      setOtpValues(newOtpValues);
+      if (index < OTPLength - 1 && input.value) {
+        inputRefs.current[index + 1]?.focus();
+      }
+      OTPValue = newOtpValues.join("");
+      if (onOTPValueChange) onOTPValueChange(OTPValue);
+    }
+  };
+
+  const handleKeydown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      inputRefs.current[index - 1]?.focus();
+      setTimeout(() => {
+        const inputEl = inputRefs.current[index - 1];
+        if (inputEl) {
+          const length = inputEl.value.length;
+          inputEl.setSelectionRange(length, length);
+        }
+      }, 0);
+    } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
+      e.preventDefault();
+      inputRefs.current[index + 1]?.focus();
+      setTimeout(() => {
+        const inputEl = inputRefs.current[index + 1];
+        if (inputEl) {
+          const length = inputEl.value.length;
+          inputEl.setSelectionRange(length, length);
+        }
+      }, 0);
+    }
+  };
+
+  const toggleTypeForPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div>
+      {!OTPField ? (
+        <div className="text-input-container relative flex w-full flex-col">
+          <div className="relative">
+            <input
+              className={twMerge(
+                inputStyles.default,
+                error ? inputStyles.error : "",
+                "w-full pr-10",
+                className
+              )}
+              {...props}
+              type={
+                props.type === "password" && showPassword ? "text" : props.type
+              }
+            />
+            {props.type === "search" && (
+              <div className="absolute inset-y-0 right-2 flex items-center">
+                <Icon elements={search} svgClass={iconClass["grey-common"]} />
+              </div>
+            )}
+            {props.type === "password" && (
+              <button
+                type="button"
+                className="absolute inset-y-0 right-2 flex items-center rounded-md p-1"
+                onClick={toggleTypeForPassword}
+              >
+                <Icon
+                  elements={eye}
+                  svgClass={
+                    error ? iconClass["error-icon"] : iconClass["grey-common"]
+                  }
+                />
+              </button>
+            )}
+          </div>
+          {error && <div className={primary["error-primary"]}>{error}</div>}
+        </div>
+      ) : (
+        <div className={inputStyles.otpContainer}>
+          {Array(OTPLength)
+            .fill("")
+            .map((_, index) => (
+              <input
+                key={index}
+                type="text"
+                maxLength={1}
+                pattern="[0-9]*"
+                value={otpValues[index]}
+                onChange={(e) => updateOtpValue(index, e)}
+                onKeyDown={(e) => handleKeydown(index, e)}
+                ref={(ref) => {
+                  inputRefs.current[index] = ref;
+                }}
+                className={OTPClass}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from "react";
+
+export type InputProps = {
+  OTPField?: boolean;
+  OTPValue?: string;
+  OTPLength?: number;
+  OTPClass?: string;
+  onOTPValueChange?: (value: string) => void;
+  error?: undefined | string;
+} & InputHTMLAttributes<HTMLInputElement>;

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

@@ -0,0 +1,138 @@
+/**
+ * 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, useRef } from "react";
+import type { MaterialInputProps } from "./types";
+
+const MaterialInput = ({
+  label,
+  type = "text",
+  value,
+  onChange,
+  error,
+  helperText,
+  required = false,
+  disabled = false,
+  className = "",
+  textarea = false,
+  rows = 3,
+  cols = 30,
+  ...props
+}: MaterialInputProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
+
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => {
+    if (!value) {
+      setIsFocused(false);
+    }
+  };
+
+  const isFloating = isFocused || value;
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      <div className="relative">
+        {textarea ? (
+          <textarea
+            {...props}
+            ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+            value={value}
+            onChange={(e) => {
+              if (onChange) onChange(e.target.value);
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            rows={rows}
+            cols={cols}
+            disabled={disabled}
+            required={required}
+            className={`
+            peer w-full px-3 py-3
+            bg-transparent
+            border rounded-md
+            outline-none
+            transition-all duration-200 ease-in-out
+            placeholder-transparent
+            ${
+              error
+                ? "border-red-500 focus:border-red-500"
+                : "border-gray-300 focus:border-black"
+            }
+            ${disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-900"}
+          `}
+          />
+        ) : (
+          <input
+            {...props}
+            autoComplete="off"
+            ref={inputRef as React.RefObject<HTMLInputElement>}
+            type={type}
+            value={value}
+            onChange={(e) => {
+              if (onChange) onChange(e.target.value);
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            required={required}
+            className={`
+            peer w-full px-3 py-3
+            bg-transparent
+            border rounded-md
+            outline-none
+            transition-all duration-200 ease-in-out
+            placeholder-transparent
+            ${
+              error
+                ? "border-red-500 focus:border-red-500"
+                : "border-gray-300 focus:border-black"
+            }
+            ${disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-900"}
+          `}
+          />
+        )}
+        <label
+          onClick={() => inputRef.current?.focus()}
+          className={`
+            absolute left-3 
+            pointer-events-none
+            transition-all duration-200 ease-in-out
+            cursor-text
+            ${isFloating ? "-top-2 text-xs bg-white px-1" : "top-2 text-base"}
+            ${
+              error
+                ? "text-red-500"
+                : isFocused
+                ? "text-black"
+                : "text-gray-500"
+            }
+            ${disabled ? "text-gray-400 cursor-not-allowed" : ""}
+          `}
+        >
+          {label}
+          {required && " *"}
+        </label>
+      </div>
+
+      {/* Helper text or error message */}
+      {(helperText || error) && (
+        <div
+          className={`
+            mt-1 text-xs
+            ${error ? "text-red-500" : "text-gray-500"}
+          `}
+        >
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MaterialInput;

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

@@ -0,0 +1,16 @@
+import type { InputHTMLAttributes } from "react";
+
+export type MaterialInputProps = {
+  label?: string;
+  type?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  textarea?: boolean;
+  rows?: number;
+  cols?: number;
+} & InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;

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

@@ -0,0 +1,152 @@
+/**
+ * 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, { useEffect, useCallback, memo, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import Icon from "../icon/Icon";
+import { x } from "../icon/iconPaths";
+import type { ModalProps } from "./types";
+
+const defaultClasses = {
+  modal:
+    "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-slate-950/55 p-4 backdrop-blur-sm",
+  modalContent:
+    "relative max-h-[90vh] overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl shadow-slate-950/20 dark:border-slate-700 dark:bg-slate-950",
+  modalTitle:
+    "flex items-center justify-between gap-4 px-5 py-4 text-base font-semibold text-slate-950 dark:text-slate-50",
+  closeButton:
+    "absolute right-3 top-3 rounded-md p-2 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:hover:bg-slate-800 dark:hover:text-white",
+  closeIcon: "h-5 w-5 stroke-current fill-none",
+};
+
+const sizeClasses = {
+  sm: "w-full max-w-sm",
+  md: "w-full max-w-lg",
+  lg: "w-full max-w-2xl",
+  xl: "w-full max-w-4xl",
+};
+
+export const Modal = memo(
+  ({
+    showModal = false,
+    setShowModal,
+    modalTitle = "Modal Title",
+    modalClass = defaultClasses.modal,
+    modalContentClass = defaultClasses.modalContent,
+    classModalContent = "",
+    modalTitleClass = defaultClasses.modalTitle,
+    classModalTitle = "",
+    className = "",
+    size = "md",
+    children,
+    showCloseButton = false,
+    dismissible = false,
+    titleId = "modal-title",
+    closeButtonContent,
+    animationDuration = 200,
+    showTitle = true,
+  }: ModalProps) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const previousActiveElement = useRef<HTMLElement | null>(null);
+
+    const handleEscKey = useCallback(
+      (event: KeyboardEvent) => {
+        if (event.key === "Escape" && showModal && dismissible) {
+          setShowModal(false);
+        }
+      },
+      [showModal, dismissible, setShowModal]
+    );
+
+    const handleOutsideClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target === e.currentTarget && dismissible) {
+          setShowModal(false);
+        }
+      },
+      [dismissible, setShowModal]
+    );
+
+    const handleClose = useCallback(() => {
+      setShowModal(false);
+    }, [setShowModal]);
+
+    useEffect(() => {
+      if (showModal) {
+        previousActiveElement.current = document.activeElement as HTMLElement;
+        document.addEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "hidden";
+        modalRef.current?.focus();
+      } else {
+        document.removeEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "";
+        previousActiveElement.current?.focus();
+      }
+
+      return () => {
+        document.removeEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "";
+      };
+    }, [showModal, handleEscKey]);
+
+    const modalStyles: React.CSSProperties = {
+      transition: `opacity ${animationDuration}ms ease-in-out`,
+      opacity: showModal ? 1 : 0,
+      visibility: showModal ? "visible" : "hidden",
+    };
+
+    if (!showModal) {
+      return null;
+    }
+
+    return (
+      <div
+        className={modalClass}
+        aria-labelledby={titleId}
+        role="dialog"
+        aria-modal="true"
+        onClick={handleOutsideClick}
+        style={modalStyles}
+      >
+        <div
+          ref={modalRef}
+          className={twMerge(
+            modalContentClass,
+            sizeClasses[size],
+            className,
+            classModalContent
+          )}
+          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+          role="document"
+          tabIndex={-1}
+        >
+          <div className={twMerge(modalTitleClass, classModalTitle)}>
+            {showTitle && <h2 id={titleId}>{modalTitle}</h2>}
+            {showCloseButton && (
+              <button
+                onClick={handleClose}
+                className={defaultClasses.closeButton}
+                aria-label="Close modal"
+                type="button"
+              >
+                {closeButtonContent || (
+                  <Icon elements={x} svgClass={defaultClasses.closeIcon} />
+                )}
+              </button>
+            )}
+          </div>
+          {showTitle && <hr className="border-slate-200 dark:border-slate-700" />}
+          <div className="max-h-[calc(90vh-73px)] overflow-y-auto p-5 text-sm text-slate-700 dark:text-slate-200">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+Modal.displayName = "Modal";

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

@@ -0,0 +1,19 @@
+export type ModalProps = {
+  showModal?: boolean;
+  setShowModal: (show: boolean) => void;
+  modalTitle?: string;
+  modalClass?: string;
+  modalContentClass?: string;
+  classModalContent?: string;
+  modalTitleClass?: string;
+  classModalTitle?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl";
+  children: React.ReactNode;
+  showCloseButton?: boolean;
+  dismissible?: boolean;
+  titleId?: string;
+  closeButtonContent?: React.ReactNode;
+  animationDuration?: number;
+  showTitle?: boolean;
+};

package/source/legacy-components/multiselect/PortalDropDown.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { popUp } from "../globalStyle";
+
+export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
+  const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+
+  useEffect(() => {
+    if (isVisible && targetRef.current) {
+      const rect = targetRef.current.getBoundingClientRect();
+      const scrollTop =
+        window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft =
+        window.pageXOffset || document.documentElement.scrollLeft;
+
+      setPosition({
+        top: rect.bottom + scrollTop + 1,
+        left: rect.left + scrollLeft,
+        width: rect.width,
+      });
+    }
+  }, [isVisible, targetRef]);
+
+  if (!isVisible) return null;
+
+  return createPortal(
+    <div
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        width: position.width,
+        zIndex: 1000,
+        visibility: position.top === 0 ? "hidden" : "visible",
+      }}
+      className={popUp["pop-up-style"]}
+      data-select-portal="true"
+    >
+      {children}
+    </div>,
+    document.body
+  );
+};
+