@grampro/kit 0.0.0-stage → 2.4.0

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

@@ -0,0 +1,156 @@
+/**
+ * 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, useCallback, memo } from "react";
+import NavItemComponent from "./NavItemComponent";
+import SearchBar from "./SearchBar";
+import AuthSection from "./AuthSection";
+import MobileToggle from "./MobileToggle";
+import type { NavbarProps } from "./types";
+import {
+  getContainerClasses,
+  getPositionClasses,
+  getThemeClasses,
+} from "./helperFunctions";
+
+const Navbar: React.FC<NavbarProps> = memo(
+  ({
+    brand,
+    items,
+    variant = "light",
+    position = "sticky",
+    containerType = "contained",
+    showSearchBar = false,
+    showAuthButtons = false,
+    authState = "loggedOut",
+    userProfile,
+    rightSection,
+    leftSection,
+    centerSection,
+    onSearch,
+    onLogin,
+    onSignup,
+    onLogout,
+    onProfileClick,
+  }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [scrolled, setScrolled] = useState(false);
+    const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+
+    useEffect(() => {
+      if (position !== "static") {
+        const handleScroll = () => {
+          setScrolled(window.scrollY > 20);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+      }
+    }, [position]);
+
+    useEffect(() => {
+      if (isOpen) {
+        const handleClickOutside = (e: MouseEvent) => {
+          const target = e.target as HTMLElement;
+          if (
+            !target.closest(".navbar-menu") &&
+            !target.closest(".navbar-toggle")
+          ) {
+            setIsOpen(false);
+          }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+          document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [isOpen]);
+
+    const toggleMenu = useCallback(() => {
+      setIsOpen((prev) => !prev);
+    }, []);
+
+    const toggleSubmenu = useCallback((id: string, e: React.MouseEvent) => {
+      e.preventDefault();
+      setActiveSubmenu((prev) => (prev === id ? null : id));
+    }, []);
+
+    return (
+      <nav
+        className={`${getThemeClasses(variant)} ${getPositionClasses(
+          position
+        )} ${scrolled ? "shadow-md" : ""} transition-shadow duration-300`}
+      >
+        <div
+          className={`${getContainerClasses(
+            containerType
+          )} flex flex-wrap items-center justify-between py-3`}
+        >
+          <div className="flex items-center flex-shrink-0 mr-6">
+            {leftSection || (
+              <a href={brand.href} className="flex items-center">
+                {brand.logo && <div className="mr-2">{brand.logo}</div>}
+                <span className="text-lg font-semibold">{brand.name}</span>
+              </a>
+            )}
+          </div>
+
+          <MobileToggle isOpen={isOpen} toggleMenu={toggleMenu} />
+
+          {centerSection && (
+            <div className="hidden md:block flex-grow-0 order-3 md:order-2">
+              {centerSection}
+            </div>
+          )}
+
+          <div
+            className={`navbar-menu w-full md:flex md:items-center md:w-auto order-last md:order-3 ${
+              isOpen ? "block" : "hidden"
+            } md:block`}
+          >
+            <div className="text-sm md:flex-grow mt-4 md:mt-0">
+              <NavItemComponent
+                items={items}
+                isMobile={!isOpen ? false : true}
+                activeSubmenu={activeSubmenu}
+                toggleSubmenu={toggleSubmenu}
+                variant={variant}
+              />
+            </div>
+
+            <div className="flex flex-col md:flex-row md:items-center">
+              {rightSection || (
+                <>
+                  {showSearchBar && (
+                    <SearchBar
+                      variant={variant}
+                      searchQuery={searchQuery}
+                      setSearchQuery={setSearchQuery}
+                      onSearch={onSearch}
+                    />
+                  )}
+                  <AuthSection
+                    showAuthButtons={showAuthButtons}
+                    authState={authState}
+                    userProfile={userProfile}
+                    variant={variant}
+                    onLogin={onLogin}
+                    onSignup={onSignup}
+                    onLogout={onLogout}
+                    onProfileClick={onProfileClick}
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+    );
+  }
+);
+
+Navbar.displayName = "Navbar";
+export default Navbar;

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

@@ -0,0 +1,69 @@
+interface AuthSectionProps {
+  showAuthButtons: boolean;
+  authState: "loggedIn" | "loggedOut";
+  userProfile?: { name: string; avatar?: string };
+  variant: "light" | "dark" | "colored";
+  onLogin?: () => void;
+  onSignup?: () => void;
+  onLogout?: () => void;
+  onProfileClick?: () => void;
+}
+
+interface MobileToggleProps {
+  isOpen: boolean;
+  toggleMenu: () => void;
+}
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+  children?: NavItem[];
+  highlight?: boolean;
+  customComponent?: React.ReactNode;
+}
+
+interface NavbarProps {
+  brand: { name: string; logo?: React.ReactNode; href: string };
+  items: NavItem[];
+  variant?: "light" | "dark" | "colored";
+  position?: "fixed" | "sticky" | "static";
+  containerType?: "full" | "contained";
+  showSearchBar?: boolean;
+  showAuthButtons?: boolean;
+  authState?: "loggedIn" | "loggedOut";
+  userProfile?: { name: string; avatar?: string };
+  rightSection?: React.ReactNode;
+  leftSection?: React.ReactNode;
+  centerSection?: React.ReactNode;
+  onSearch?: (query: string) => void;
+  onLogin?: () => void;
+  onSignup?: () => void;
+  onLogout?: () => void;
+  onProfileClick?: () => void;
+}
+
+interface NavItemComponentProps {
+  items: NavItem[];
+  isMobile: boolean;
+  activeSubmenu: string | null;
+  toggleSubmenu: (id: string, e: React.MouseEvent) => void;
+  variant: "light" | "dark" | "colored";
+}
+
+interface SearchBarProps {
+  variant: "light" | "dark" | "colored";
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  onSearch?: (query: string) => void;
+}
+
+export type {
+  SearchBarProps,
+  NavItemComponentProps,
+  NavItem,
+  MobileToggleProps,
+  AuthSectionProps,
+  NavbarProps,
+};

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

@@ -0,0 +1,59 @@
+import { useEffect, useState, useCallback } 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 });
+
+  const updatePosition = useCallback(() => {
+    if (targetRef && 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,
+      });
+    }
+  }, [targetRef]);
+
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+
+      // Listen to scroll events anywhere in the document (use capture to catch scroll inside elements)
+      window.addEventListener("scroll", updatePosition, true);
+      // Listen to window resizing
+      window.addEventListener("resize", updatePosition);
+    }
+
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isVisible, updatePosition]);
+
+  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
+  );
+};

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

@@ -0,0 +1,249 @@
+/**
+ * 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, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import Icon from "../icon/Icon";
+import { check, search, upDown, x } from "../icon/iconPaths";
+import type { ItemsProps, SelectHandle, SelectProps } from "./types";
+import { selectStyle } from "../globalStyle";
+import { iconClass, primary } from "../globalStyle";
+import {
+  useSelectState,
+  useSelectData,
+  applyScrollbarStyles,
+  useKeyboardNavigation,
+  useClickOutside,
+} from "@grampro/headless-helpers";
+import { PortalDropdown } from "./PortalDropDown";
+
+const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
+  const {
+    id = "",
+    name = "",
+    placeholder = "Select an Item...",
+    items,
+    lazy = false,
+    showSearch = true,
+    onSelect,
+    selectedItem: initialSelectedItem,
+    error = undefined,
+    onFiltering,
+    disabled = false,
+    className = "",
+  } = props;
+
+  applyScrollbarStyles();
+
+  const {
+    showPopover,
+    setShowPopover,
+    workingDataSource,
+    setWorkingDataSource,
+    searchTerm,
+    setSearchTerm,
+    selectedItem,
+    setSelectedItem,
+    togglePopover,
+    clearSelected,
+  } = useSelectState(initialSelectedItem);
+
+  const { getSelectItems, selectedDisplay, filteredItems } = useSelectData(
+    items,
+    setWorkingDataSource,
+    workingDataSource,
+    searchTerm,
+    lazy,
+    selectedItem
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useClickOutside(selectRef as React.RefObject<HTMLElement>, (event) => {
+    const portalElement = document.querySelector('[data-select-portal="true"]');
+    if (portalElement && portalElement.contains(event.target as Node)) {
+      return;
+    }
+    setShowPopover(false);
+  });
+
+  // Update the handleSelect to accept a SelectItem
+  const handleSelect = useCallback(
+    (item: ItemsProps) => {
+      setSelectedItem(item.value);
+      setShowPopover(false);
+      setSearchTerm("");
+      if (onSelect) onSelect(item.value);
+    },
+    [onSelect, setSelectedItem, setShowPopover, setSearchTerm]
+  );
+
+  // Set up keyboard navigation with the correct item type
+  const { focusedIndex, setFocusedIndex, itemRefs, handleKeyDown } =
+    useKeyboardNavigation<ItemsProps>({
+      items: filteredItems,
+      isOpen: showPopover,
+      onSelect: handleSelect,
+      onClose: () => setShowPopover(false),
+    });
+
+  useEffect(() => {
+    if (showPopover) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+    }
+  }, [showPopover]);
+
+  useEffect(() => {
+    if (initialSelectedItem) {
+      setSelectedItem(initialSelectedItem);
+    }
+  }, [initialSelectedItem, setSelectedItem]);
+
+  const handleClear = () => {
+    if (disabled) return;
+    clearSelected();
+    if (onSelect) onSelect(undefined);
+  };
+
+  useImperativeHandle(ref, () => ({
+    workingDataSource,
+    items,
+    clearSelected,
+    togglePopover,
+    getSelectItems,
+    selectedDisplay,
+    selected: selectedItem,
+  }));
+
+  // Portal dropdown content
+  const dropdownContent = (
+    <>
+      <div className={selectStyle["input-parent"]}>
+        {showSearch && (
+          <div className="flex items-center gap-2 px-2 py-1">
+            <Icon elements={search} svgClass={iconClass["grey-common"]} />
+            <input
+              autoComplete="off"
+              type="text"
+              name="search"
+              id="search"
+              placeholder="Search a value"
+              className="w-full bg-transparent outline-none text-slate-900 placeholder:text-slate-400 dark:text-slate-100"
+              ref={inputRef}
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                if (onFiltering) onFiltering(e.target.value);
+                setFocusedIndex(-1);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      {filteredItems.length > 0 ? (
+        filteredItems.map(({ value, label }, index: number) => (
+          <div className="w-full px-1" key={value}>
+            <button
+              ref={(el: any) => {
+                if (itemRefs.current) {
+                  itemRefs.current[index] = el;
+                }
+              }}
+              className={`${selectStyle["filter-button"]} ${
+                focusedIndex === index ? "bg-zinc-100 text-black dark:bg-zinc-900 dark:text-white" : ""
+              }`}
+              onClick={() => handleSelect({ value, label })}
+              onMouseEnter={() => setFocusedIndex(index)}
+            >
+              <Icon
+                elements={check}
+                svgClass={`h-4 w-4 fill-none ${
+                  selectedItem === value ? "stroke-black dark:stroke-white" : ""
+                }`}
+              />
+              {label.length > 20 ? `${label.substring(0, 20)}...` : label}
+            </button>
+          </div>
+        ))
+      ) : (
+        <div className="text-sm text-center p-2">No Data Found</div>
+      )}
+    </>
+  );
+
+  return (
+    <div
+      className={`relative w-full ${className}`}
+      ref={selectRef}
+      id={id}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="w-full relative">
+        <button
+          ref={buttonRef}
+          className={`${error ? primary["error-border"] : "border"} ${
+            selectStyle["select-button"]
+          } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+          onClick={togglePopover}
+          type="button"
+          disabled={disabled}
+        >
+          {selectedDisplay.length > 20
+            ? `${selectedDisplay.substring(0, 20)}...` // We will truncate the display text if it exceeds 20 characters
+            : selectedDisplay || placeholder}
+          <Icon
+            elements={upDown}
+            svgClass={`${iconClass["grey-common"]} ${
+              disabled ? "opacity-50" : ""
+            }`}
+          />
+        </button>
+        {selectedDisplay && !disabled && (
+          <button
+            className={selectStyle["selectedDisplay-Button"]}
+            onClick={handleClear}
+          >
+            <Icon elements={x} svgClass={iconClass["grey-common"]} />
+          </button>
+        )}
+        {error && <p className={primary["error-primary"]}>{error}</p>}
+      </div>
+
+      <input
+        type="hidden"
+        name={name}
+        value={selectedItem || ""}
+        readOnly
+        disabled={disabled}
+      />
+
+      {/* Portal Dropdown - renders to document.body */}
+      <PortalDropdown
+        targetRef={buttonRef}
+        isVisible={showPopover && !disabled}
+      >
+        {dropdownContent}
+      </PortalDropdown>
+    </div>
+  );
+});
+
+Select.displayName = "Select";
+
+const MemoizedSelect = memo(Select);
+export { MemoizedSelect as Select };
+

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

@@ -0,0 +1,29 @@
+export type ItemsProps = {
+  value: string;
+  label: string;
+};
+
+export type SelectProps = {
+  id?: string;
+  name?: string;
+  error?: undefined | string;
+  placeholder?: string;
+  items?: ItemsProps[] | string;
+  lazy?: boolean;
+  showSearch?: boolean;
+  onSelect?: (selectedItem: string | undefined) => void;
+  selectedItem?: string;
+  onFiltering?: (searchTerm: string) => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+export type SelectHandle = {
+  workingDataSource: ItemsProps[];
+  clearSelected: () => void;
+  togglePopover: (e: React.MouseEvent) => void;
+  getSelectItems: (itemsApi: string) => Promise<void>;
+  selectedDisplay: string;
+  selected: string | undefined;
+};
+

package/source/legacy-components/sidebar/components/MenuItem.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react";
+import type { MenuItem, IconComponent } from "../type";
+
+type MenuItemProps = {
+  item: MenuItem;
+  iconMap: Record<string, IconComponent>;
+  onToggle: () => void;
+};
+
+export const MenuItemComponent = ({
+  item,
+  iconMap,
+  onToggle,
+}: MenuItemProps) => {
+  const IconComponent = iconMap[item.icon] || (() => null);
+  const [path, setPath] = useState("");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setPath(window.location.pathname);
+    }
+  }, []);
+
+  if (item.type === "custom" && item.component) {
+    const CustomComponent = item.component;
+    return (
+      <li className="py-2 px-3 flex items-center text-sm text-gray-700">
+        <span className="mr-3">
+          <IconComponent />
+        </span>
+        <CustomComponent />
+      </li>
+    );
+  }
+
+  return (
+    <li>
+      <a
+        href={item.path}
+        onClick={
+          item.expandable
+            ? (e) => {
+                e.preventDefault();
+                onToggle();
+              }
+            : undefined
+        }
+        className={`flex items-center py-2 px-3 rounded-md text-sm ${
+          item.path === path
+            ? "bg-gray-100 text-black font-medium"
+            : "text-gray-700 hover:bg-gray-50"
+        }`}
+      >
+        <span className="mr-3">
+          <IconComponent />
+        </span>
+        <span className="flex-grow">{item.name}</span>
+        {item.badge && (
+          <span className="bg-black text-white text-xs px-2 py-0.5 rounded-full">
+            {item.badge}
+          </span>
+        )}
+        {item.expandable && (
+          <svg
+            className={`h-4 w-4 transform ${item.expanded ? "rotate-180" : ""}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        )}
+      </a>
+      {item.expandable && item.expanded && (
+        <ul className="pl-10 mt-1 space-y-1">
+          <li>
+            <a
+              href="#"
+              className="block py-1 text-sm text-gray-600 hover:text-teal-600"
+            >
+              Submenu Item 1
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-1 text-sm text-gray-600 hover:text-teal-600"
+            >
+              Submenu Item 2
+            </a>
+          </li>
+        </ul>
+      )}
+    </li>
+  );
+};

package/source/legacy-components/sidebar/components/MenuSection.tsx

@@ -0,0 +1,34 @@
+import type { MenuSection as MenuSectionType, IconComponent } from "../type";
+import { MenuItemComponent } from "./MenuItem";
+
+type MenuSectionProps = {
+  section: MenuSectionType;
+  sectionIndex: number;
+  iconMap: Record<string, IconComponent>;
+  toggleItem: (sectionIndex: number, itemId: number | string) => void;
+};
+
+export const MenuSection = ({
+  section,
+  sectionIndex,
+  iconMap,
+  toggleItem,
+}: MenuSectionProps) => {
+  return (
+    <div className="mb-6">
+      <div className="text-xs font-medium text-gray-400 mb-2">
+        {section.title}
+      </div>
+      <ul className="space-y-1">
+        {section.items.map((item) => (
+          <MenuItemComponent
+            key={item.id}
+            item={item}
+            iconMap={iconMap}
+            onToggle={() => toggleItem(sectionIndex, item.id)}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};