@grampro/kit 0.0.0-stage → 2.4.0

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

@@ -0,0 +1,269 @@
+/**
+ * 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 {
+  useCallback,
+  forwardRef,
+  useRef,
+  useEffect,
+  memo,
+  useImperativeHandle,
+} from "react";
+import type { MultiSelectHandle, MultiSelectProps } from "./types";
+import {
+  useMultiSelectState,
+  useClickOutside,
+  applyScrollbarStyles,
+} from "@grampro/headless-helpers";
+import Icon from "../icon/Icon";
+import { check, search, upDown, x } from "../icon/iconPaths";
+import { iconClass, primary } from "../globalStyle";
+import { selectStyle } from "../globalStyle";
+import { PortalDropdown } from "./PortalDropDown";
+
+const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
+  (props, ref) => {
+    const {
+      placeholder = "Select Items...",
+      items,
+      lazy = false,
+      showSearch = true,
+      onSelect,
+      truncate = true,
+      selectedItems = [],
+      name,
+      error,
+      disabled = false,
+    } = props;
+
+    applyScrollbarStyles();
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const selectRef = useRef<HTMLDivElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    const {
+      showPopover,
+      setShowPopover,
+      workingDataSource,
+      filteredItems,
+      selected,
+      searchTerm,
+      setSearchTerm,
+      handleSelect,
+      togglePopover,
+      clearSelected,
+      getSelectItems,
+    } = useMultiSelectState(items, selectedItems, lazy, onSelect);
+
+    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);
+    });
+
+    useEffect(() => {
+      if (showPopover) {
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 0);
+      }
+    }, [showPopover]);
+
+    const getSelectedDisplay = useCallback(() => {
+      const displayedItems = selected
+        .slice(0, 3)
+        .map(
+          (value) =>
+            workingDataSource.find((item) => item.value === value)?.label || ""
+        );
+      let display = displayedItems.join(", ");
+      if (selected.length > 3 && truncate) {
+        display += `, +${selected.length - 3} more`;
+      }
+      return display;
+    }, [selected, workingDataSource, placeholder, truncate]);
+
+    const handleClear = () => {
+      if (disabled) return;
+      clearSelected();
+      if (onSelect) onSelect([]);
+    };
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        workingDataSource,
+        items,
+        clearSelected,
+        togglePopover,
+        getSelectItems,
+        selectedDisplay: getSelectedDisplay(),
+        selected,
+      }),
+      [
+        workingDataSource,
+        items,
+        clearSelected,
+        togglePopover,
+        getSelectItems,
+        getSelectedDisplay,
+        selected,
+      ]
+    );
+
+    // 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 outline-none dark:bg-transparent"
+                ref={inputRef}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+
+        {filteredItems.length > 0 ? (
+          filteredItems.map(({ value, label }) => (
+            <div className="w-full px-1" key={value}>
+              <button
+                type="button"
+                className={selectStyle["filter-button"]}
+                onClick={() => handleSelect(value)}
+              >
+                <Icon
+                  elements={check}
+                  svgClass={`h-4 w-4 fill-none ${
+                    selected.includes(value) ? "stroke-black dark:stroke-white" : ""
+                  }`}
+                />
+                {label.length > 20 ? `${label.substring(0, 20)}...` : label}
+              </button>
+            </div>
+          ))
+        ) : (
+          <div className="text-sm text-center">No Data Found</div>
+        )}
+      </>
+    );
+
+    const selectedDisplay = (
+      <div className="flex items-center gap-1 flex-wrap pr-16">
+        {selected
+          .slice(0, truncate && selected.length > 3 ? 3 : selected.length)
+          .map((value: string, index: number) => {
+            const item = workingDataSource.find(
+              (dataItem) => dataItem.value === value
+            );
+            const label = item?.label || value;
+
+            return (
+              <span
+                key={index}
+                className="bg-black text-white dark:bg-zinc-900 px-2 py-1 rounded flex items-center gap-1 text-xs whitespace-nowrap border border-transparent dark:border-zinc-800"
+              >
+                {label.length > 15 ? `${label.substring(0, 15)}...` : label}
+                <span
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleSelect(value);
+                  }}
+                  className="cursor-pointer hover:bg-zinc-800 dark:hover:bg-zinc-700 rounded p-0.5"
+                >
+                  <Icon elements={x} svgClass="h-3 w-3 stroke-white" />
+                </span>
+              </span>
+            );
+          })}
+        {truncate && selected.length > 3 && (
+          <span className="bg-black text-white dark:bg-zinc-900 px-2 py-1 rounded text-xs whitespace-nowrap border border-transparent dark:border-zinc-800">
+            +{selected.length - 3} more
+          </span>
+        )}
+      </div>
+    );
+
+    return (
+      <div className="relative w-full" ref={selectRef}>
+        <div className="w-full relative">
+          <button
+            ref={buttonRef}
+            className={`${error ? primary["error-border"] : "border"} ${
+              selectStyle["select-button"]
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""} relative`}
+            onClick={togglePopover}
+            type="button"
+            disabled={disabled}
+          >
+            {selected.length == 0 ? (
+              <span className="pr-8">{placeholder}</span>
+            ) : (
+              selectedDisplay
+            )}
+
+            <div className="absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
+              <Icon
+                elements={upDown}
+                svgClass={`${iconClass["grey-common"]} ${
+                  disabled ? "opacity-50" : ""
+                }`}
+              />
+            </div>
+          </button>
+
+          {selected.length > 0 && (
+            <button
+              className={`${selectStyle["selectedDisplay-Button"]}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleClear();
+              }}
+              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={JSON.stringify(selected) || ""}
+          readOnly
+          disabled={disabled}
+        />
+
+        <PortalDropdown
+          targetRef={buttonRef}
+          isVisible={showPopover && !disabled}
+        >
+          {dropdownContent}
+        </PortalDropdown>
+      </div>
+    );
+  }
+);
+
+const MemoizedMultiSelect = memo(MultiSelect);
+export { MemoizedMultiSelect as MultiSelect };
+

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

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

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

@@ -0,0 +1,98 @@
+import React from "react";
+import type { AuthSectionProps } from "./types";
+
+const AuthSection: React.FC<AuthSectionProps> = ({
+  showAuthButtons,
+  authState,
+  userProfile,
+  variant,
+  onLogin,
+  onSignup,
+  onLogout,
+  onProfileClick,
+}) => {
+  if (!showAuthButtons) return null;
+
+  if (authState === "loggedIn" && userProfile) {
+    return (
+      <div className="ml-4 relative">
+        <button
+          onClick={onProfileClick}
+          className="flex items-center text-sm focus:outline-none"
+        >
+          {userProfile.avatar ? (
+            <img
+              className="h-8 w-8 rounded-full"
+              src={userProfile.avatar}
+              alt={userProfile.name}
+            />
+          ) : (
+            <div className="h-8 w-8 rounded-full bg-black dark:bg-white text-white dark:text-black flex items-center justify-center font-bold">
+              {userProfile.name.charAt(0).toUpperCase()}
+            </div>
+          )}
+          <span className="ml-2 hidden md:block">{userProfile.name}</span>
+          <svg
+            className="ml-1 h-4 w-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </button>
+        <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 hidden">
+          <a
+            href="/profile"
+            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            Your Profile
+          </a>
+          <a
+            href="/settings"
+            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            Settings
+          </a>
+          <button
+            onClick={onLogout}
+            className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            Sign out
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="md:ml-4 mt-4 md:mt-0 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
+      <button
+        onClick={onLogin}
+        className={`
+          px-4 py-2 text-sm font-medium rounded-md border border-zinc-300 dark:border-zinc-700
+          ${
+            variant === "dark"
+              ? "text-white hover:bg-zinc-850"
+              : "text-black hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-900"
+          }
+        `}
+      >
+        Log in
+      </button>
+      <button
+        onClick={onSignup}
+        className="px-4 py-2 text-sm font-medium text-white bg-black dark:bg-white dark:text-black rounded-md hover:bg-zinc-900 dark:hover:bg-zinc-100 transition-colors"
+      >
+        Sign up
+      </button>
+    </div>
+  );
+};
+
+export default AuthSection;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import type { MobileToggleProps } from "./types";
+
+const MobileToggle: React.FC<MobileToggleProps> = ({ isOpen, toggleMenu }) => {
+  return (
+    <div className="block md:hidden">
+      <button
+        className="navbar-toggle flex items-center px-3 py-2 border rounded"
+        onClick={toggleMenu}
+      >
+        <svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
+          {isOpen ? (
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          ) : (
+            <path
+              fillRule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+              clipRule="evenodd"
+            />
+          )}
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default MobileToggle;

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

@@ -0,0 +1,119 @@
+import React from "react";
+import type { NavItem, NavItemComponentProps } from "./types";
+
+const NavItemComponent: React.FC<NavItemComponentProps> = ({
+  items,
+  isMobile,
+  activeSubmenu,
+  toggleSubmenu,
+  variant,
+}) => {
+  const renderNavItems = (navItems: NavItem[], isSubmenu: boolean = false) => {
+    return navItems.map((item) => {
+      const hasChildren = item.children && item.children.length > 0;
+
+      if (item.customComponent) {
+        return (
+          <li
+            key={item.id}
+            className={`${isMobile ? "block w-full" : "relative"} ${
+              isSubmenu ? "w-full" : ""
+            }`}
+          >
+            {item.customComponent}
+          </li>
+        );
+      }
+
+      return (
+        <li
+          key={item.id}
+          className={`${isMobile ? "block w-full" : "relative"} ${
+            isSubmenu ? "w-full" : ""
+          }`}
+        >
+          {hasChildren ? (
+            <>
+              <button
+                onClick={(e) => toggleSubmenu(item.id, e)}
+                className={`
+                  flex items-center justify-between px-3 py-2 rounded-md
+                  ${item.highlight ? "font-bold text-black dark:text-white" : ""}
+                  ${
+                    isMobile
+                      ? "w-full text-left"
+                      : "hover:bg-opacity-10 hover:bg-gray-200"
+                  }
+                `}
+              >
+                <span className="flex items-center">
+                  {item.icon && <span className="mr-2">{item.icon}</span>}
+                  {item.label}
+                </span>
+                <svg
+                  className={`ml-1 h-4 w-4 transition-transform ${
+                    activeSubmenu === item.id ? "rotate-180" : ""
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <div
+                className={`
+                  ${
+                    isMobile
+                      ? "pl-4 border-l border-gray-200"
+                      : "absolute left-0 min-w-max shadow-lg rounded-md py-2 bg-white z-50"
+                  }
+                  ${
+                    variant === "dark" && !isMobile
+                      ? "bg-gray-800 text-white"
+                      : ""
+                  }
+                  ${activeSubmenu === item.id ? "block" : "hidden"}
+                  ${!isMobile ? "mt-1" : ""}
+                `}
+              >
+                <ul className="w-full">
+                  {renderNavItems(item.children || [], true)}
+                </ul>
+              </div>
+            </>
+          ) : (
+            <a
+              href={item.href}
+              className={`
+                flex items-center px-3 py-2 rounded-md
+                ${item.highlight ? "font-bold text-black dark:text-white" : ""}
+                ${
+                  isMobile
+                    ? "block w-full"
+                    : "hover:bg-opacity-10 hover:bg-gray-200"
+                }
+              `}
+            >
+              {item.icon && <span className="mr-2">{item.icon}</span>}
+              {item.label}
+            </a>
+          )}
+        </li>
+      );
+    });
+  };
+
+  return (
+    <ul className="md:flex md:space-x-1 flex-col md:flex-row">
+      {renderNavItems(items)}
+    </ul>
+  );
+};
+
+export default NavItemComponent;

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

@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+import type { SearchBarProps } from "./types";
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  variant,
+  searchQuery,
+  setSearchQuery,
+  onSearch,
+}) => {
+  const handleSearch = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      if (onSearch) {
+        onSearch(searchQuery);
+      }
+    },
+    [searchQuery, onSearch]
+  );
+
+  return (
+    <form onSubmit={handleSearch} className="relative md:ml-4 mt-3 md:mt-0">
+      <input
+        type="search"
+        placeholder="Search..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className={`
+          w-full md:w-auto pl-10 pr-4 py-2 rounded-md text-sm focus:outline-none
+          ${
+            variant === "dark"
+              ? "bg-gray-800 text-white"
+              : "bg-gray-100 text-gray-800"
+          }
+        `}
+      />
+      <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
+        <svg
+          className="h-4 w-4 text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+    </form>
+  );
+};
+
+export default SearchBar;

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

@@ -0,0 +1,27 @@
+const getThemeClasses = (variant: string) => {
+  switch (variant) {
+    case "dark":
+      return "bg-gray-900 text-white shadow-md";
+    case "colored":
+      return "bg-blue-600 text-white shadow-md";
+    default:
+      return "bg-white text-gray-800 shadow-md";
+  }
+};
+
+const getPositionClasses = (position: string) => {
+  switch (position) {
+    case "fixed":
+      return "fixed top-0 left-0 right-0 z-50";
+    case "sticky":
+      return "sticky top-0 z-40";
+    default:
+      return "";
+  }
+};
+
+const getContainerClasses = (containerType: string) => {
+  return containerType === "contained" ? "max-w-6xl mx-auto px-4" : "px-4";
+};
+
+export { getContainerClasses, getPositionClasses, getThemeClasses };