@grampro/kit 0.0.0-stage → 2.4.0

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

@@ -0,0 +1,50 @@
+import type { MenuItem, IconComponent } from "../type";
+
+type SidebarFooterProps = {
+  footerItems?: MenuItem[];
+  iconMap: Record<string, IconComponent>;
+};
+
+export const SidebarFooter = ({ footerItems, iconMap }: SidebarFooterProps) => {
+  if (!footerItems) return null;
+  if (!iconMap) return null;
+
+  return (
+    <div className="border-t border-gray-200">
+      <ul className="px-4 py-2 space-y-1">
+        {footerItems?.map((item) => {
+          const IconComponent = iconMap[item.icon] || (() => null);
+
+          if (item.type === "custom" && item.component) {
+            const CustomComponent = item.component;
+            return (
+              <li
+                key={item.id}
+                className="py-2 px-3 flex items-center text-sm text-gray-700"
+              >
+                <span className="mr-3">
+                  <IconComponent />
+                </span>
+                <CustomComponent />
+              </li>
+            );
+          }
+
+          return (
+            <li key={item.id}>
+              <a
+                href={item.path}
+                className="flex items-center py-2 px-3 rounded-md text-sm text-gray-700 hover:bg-gray-50"
+              >
+                <span className="mr-3">
+                  <IconComponent />
+                </span>
+                <span>{item?.name}</span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import type { MenuData } from "../type";
+
+type SidebarLogoProps = {
+  logo: MenuData["logo"];
+};
+
+export const SidebarLogo = ({ logo }: SidebarLogoProps) => {
+  if (!logo) return null;
+
+  return (
+    <div className="p-4 flex items-center">
+      <div className="flex-shrink-0 mr-2">
+        <div className="h-6 w-6 bg-black text-white rounded flex items-center justify-center">
+          <img
+            src={logo?.logoUrl}
+            alt={logo?.name}
+            className="h-4 w-4 text-white"
+          />
+        </div>
+      </div>
+      <span className="text-gray-800 font-semibold text-lg">{logo?.name}</span>
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+import type { IconComponent, MenuSection } from "../type";
+import { MenuSection as MenuSectionComponent } from "./MenuSection";
+
+type SidebarMenuProps = {
+  sections?: MenuSection[];
+  iconMap: Record<string, IconComponent>;
+  toggleItem: (sectionIndex: number, itemId: number | string) => void;
+};
+
+export const SidebarMenu = ({
+  sections,
+  iconMap,
+  toggleItem,
+  
+}: SidebarMenuProps) => {
+  return (
+    <div className="flex-grow overflow-y-auto px-4 py-2">
+      {sections?.map((section, sectionIndex) => (
+        <MenuSectionComponent
+          key={section.title}
+          section={section}
+          sectionIndex={sectionIndex}
+          iconMap={iconMap}
+          toggleItem={toggleItem}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,31 @@
+import type { MenuData } from "../type";
+
+type UserProfileProps = {
+  profile: MenuData["profile"];
+};
+
+export const UserProfile = ({ profile }: UserProfileProps) => {
+  if (!profile) return null;
+
+  return (
+    <div className="border-t border-gray-200 px-4 py-3 flex flex-col gap-2">
+      <div className="flex">
+        <div className="w-8 h-8 rounded-full bg-orange-100 text-orange-700 flex items-center justify-center mr-3">
+          <span className="text-xs font-medium">
+            {profile?.name
+              .split(" ")
+              .map((n) => n[0])
+              .join("")}
+          </span>
+        </div>
+        <div className="flex-grow">
+          <div className="text-sm font-medium text-gray-700">
+            {profile?.name}
+          </div>
+          <div className="text-xs text-gray-400">{profile?.email}</div>
+        </div>
+      </div>
+      <div className="text-xs text-gray-400">© 2024 Sequence Inc.</div>
+    </div>
+  );
+};

package/source/legacy-components/sidebar/hooks/useSidebarState.ts

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import type { MenuData } from "../type";
+
+export const useSidebarState = (menuData: MenuData) => {
+  const [sidebarData, setSidebarData] = useState<MenuData>(menuData);
+
+  const toggleItem = (sectionIndex: number, itemId: number | string): void => {
+    const newData = { ...sidebarData };
+
+    const section = newData.sections?.[sectionIndex];
+    if (!section) return;
+
+    const itemIndex = section.items.findIndex((item) => item.id === itemId);
+    if (itemIndex === -1) return;
+
+    if (section.items[itemIndex].expandable) {
+      section.items[itemIndex].expanded = !section.items[itemIndex].expanded;
+      setSidebarData({ ...newData });
+    }
+  };
+
+  const toggleMode = (): void => {
+    const newData = { ...sidebarData };
+    if (!newData.footer) return;
+
+    const toggleModeIndex = newData.footer.findIndex(
+      (item) => item.type === "toggle"
+    );
+    if (toggleModeIndex === -1) return;
+
+    newData.footer[toggleModeIndex].active =
+      !newData.footer[toggleModeIndex].active;
+    setSidebarData({ ...newData });
+  };
+
+  return {
+    sidebarData,
+    toggleItem,
+    toggleMode,
+  };
+};

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

@@ -0,0 +1,77 @@
+import type { SidebarProps } from "./type";
+import { useSidebarState } from "./hooks/useSidebarState";
+import { SidebarLogo } from "./components/SidebarLogo";
+import { SidebarMenu } from "./components/SidebarMenu";
+import { SidebarFooter } from "./components/SidebarFooter";
+import { UserProfile } from "./components/UserProfile";
+import Icon from "../icon/Icon";
+import { menuIcon, x } from "../icon/iconPaths";
+import { useState } from "react";
+
+export function Sidebar({ menuData, iconMap }: SidebarProps) {
+  const { sidebarData, toggleItem } = useSidebarState(menuData);
+  const [showSideBarMobile, setShowSideBarMobile] = useState(false);
+
+  return (
+    <div>
+      {/* Mobile menu button - only show when sidebar is closed */}
+      {!showSideBarMobile && (
+        <button
+          className="md:hidden flex items-center justify-between absolute p-4 border z-50 bg-white rounded-xl top-3 left-3"
+          onClick={() => setShowSideBarMobile(true)}
+        >
+          <Icon
+            elements={menuIcon}
+            svgClass={"stroke-black fill-none"}
+            dimensions={{ width: "18", height: "18" }}
+          />
+        </button>
+      )}
+
+      {/* Mobile sidebar overlay */}
+      {showSideBarMobile && (
+        <div
+          className="md:hidden fixed inset-0 z-40"
+          onClick={() => setShowSideBarMobile(false)}
+        />
+      )}
+
+      {/* Mobile sidebar */}
+      <div
+        className={`md:hidden fixed left-0 top-0 h-screen bg-white w-64 border-r border-gray-200 z-40 transform transition-transform duration-300 ease-in-out ${
+          showSideBarMobile ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <div className="flex items-center justify-between pr-4">
+          <SidebarLogo logo={sidebarData.logo} />
+          <button onClick={() => setShowSideBarMobile(false)}>
+            <Icon
+              elements={x}
+              svgClass={"stroke-black fill-none"}
+              dimensions={{ width: "18", height: "18" }}
+            />
+          </button>
+        </div>
+        <SidebarMenu
+          sections={sidebarData.sections}
+          iconMap={iconMap}
+          toggleItem={toggleItem}
+        />
+        <SidebarFooter footerItems={sidebarData.footer} iconMap={iconMap} />
+        <UserProfile profile={sidebarData.profile} />
+      </div>
+
+      {/* Desktop sidebar */}
+      <div className="hidden md:flex flex-col h-screen bg-white w-64 border-r border-gray-200 sticky left-0 top-0">
+        <SidebarLogo logo={sidebarData.logo} />
+        <SidebarMenu
+          sections={sidebarData.sections}
+          iconMap={iconMap}
+          toggleItem={toggleItem}
+        />
+        <SidebarFooter footerItems={sidebarData.footer} iconMap={iconMap} />
+        <UserProfile profile={sidebarData.profile} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+export type IconComponent = React.FC;
+
+export type MenuItem = {
+  id: number | string;
+  name: string;
+  icon: string;
+  path?: string;
+  active?: boolean;
+  expandable?: boolean;
+  expanded?: boolean;
+  badge?: string;
+  toggle?: boolean;
+  type?: string;
+  component?: React.FC;
+};
+
+export type MenuSection = {
+  id?: number | string;
+  title: string;
+  items: MenuItem[];
+  component?: React.FC;
+  type?: string;
+};
+
+export type MenuData = {
+  logo?: {
+    name: string;
+    logoUrl: string;
+  };
+  sections?: MenuSection[];
+  footer?: MenuItem[];
+  profile?: {
+    name: string;
+    email: string;
+    avatarUrl: string;
+  };
+};
+
+export type SidebarProps = {
+  menuData: MenuData;
+  iconMap: Record<string, IconComponent>;
+};

package/source/legacy-components/spinner/Stroke.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+interface StrokeProps {
+  size?: string;
+  strokeColor?: string;
+}
+
+export default function Stroke(props: StrokeProps) {
+  const { size, strokeColor } = props;
+  return (
+    <svg
+      className={`${size} animate-spin ${strokeColor}`}
+      viewBox="0 0 256 256"
+    >
+      <line
+        x1="128"
+        y1="32"
+        x2="128"
+        y2="64"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="195.9"
+        y1="60.1"
+        x2="173.3"
+        y2="82.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="224"
+        y1="128"
+        x2="192"
+        y2="128"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="195.9"
+        y1="195.9"
+        x2="173.3"
+        y2="173.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="128"
+        y1="224"
+        x2="128"
+        y2="192"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="60.1"
+        y1="195.9"
+        x2="82.7"
+        y2="173.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="32"
+        y1="128"
+        x2="64"
+        y2="128"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="60.1"
+        y1="60.1"
+        x2="82.7"
+        y2="82.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+    </svg>
+  );
+}

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

@@ -0,0 +1,54 @@
+/**
+ * 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 Stroke from "./Stroke";
+import type { SpinnerProps } from "./types";
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = "h-10 w-10",
+  color = "border-blue-500",
+  fullCircleColor = "border-t-blue-400",
+  dotColor = "bg-blue-500",
+  duration = "duration-500",
+  type = "circle",
+  strokeColor = "stroke-blue-500",
+}) => {
+  if (type === "circle") {
+    return (
+      <div
+        className={`loader ease-linear rounded-full border-4 border-t-4 ${color} ${size} ${duration} border-t-transparent animate-spin`}
+      ></div>
+    );
+  } else if (type === "circle-bg") {
+    return (
+      <div
+        className={`${size} animate-spin rounded-full border-4 ${fullCircleColor}`}
+      ></div>
+    );
+  } else if (type === "dot") {
+    return (
+      <div className="flex space-x-2 dark:invert">
+        <div
+          className={`${size} ${dotColor} rounded-full animate-bounce`}
+          style={{ animationDelay: "-0.3s" }}
+        ></div>
+        <div
+          className={`${size} ${dotColor} rounded-full animate-bounce`}
+          style={{ animationDelay: "-0.15s" }}
+        ></div>
+        <div
+          className={`${size} ${dotColor} rounded-full animate-bounce`}
+        ></div>
+      </div>
+    );
+  } else if (type === "stroke") {
+    return <Stroke size={size} strokeColor={strokeColor} />;
+  } else {
+    return null;
+  }
+};

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

@@ -0,0 +1,9 @@
+export type SpinnerProps = {
+  size?: string;
+  color?: string;
+  fullCircleColor?: string;
+  dotColor?: string;
+  duration?: string;
+  type?: "circle" | "circle-bg" | "dot" | "stroke";
+  strokeColor?: string;
+};

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

@@ -0,0 +1,71 @@
+/**
+ * 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 { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import type { TabsProps } from "./types";
+
+export function Tabs({
+  tabs,
+  defaultTabId,
+  renderContent,
+  onChange,
+  className = "",
+  variant = "line",
+}: TabsProps) {
+  const [activeTabId, setActiveTabId] = useState<string>(
+    defaultTabId || (tabs.length > 0 ? tabs[0].id : "")
+  );
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTabId(tabId);
+    if (onChange) {
+      onChange(tabId);
+    }
+  };
+
+  const isPills = variant === "pills";
+
+  return (
+    <div className={twMerge("w-full", className)}>
+      <nav
+        className={twMerge(
+          "flex gap-1",
+          isPills
+            ? "rounded-lg bg-zinc-100 p-1 dark:bg-zinc-900"
+            : "border-b border-zinc-200 dark:border-zinc-800"
+        )}
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTabId === tab.id;
+
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              disabled={tab.disabled}
+              className={twMerge(
+                "min-h-9 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white disabled:cursor-not-allowed disabled:text-zinc-400",
+                isPills ? "rounded-md" : "-mb-px border-b-2 border-transparent",
+                isActive && isPills
+                  ? "bg-white text-zinc-950 shadow-sm dark:bg-zinc-800 dark:text-white"
+                  : "",
+                isActive && !isPills
+                  ? "border-black text-black dark:border-white dark:text-white"
+                  : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-100"
+              )}
+              onClick={() => !tab.disabled && handleTabChange(tab.id)}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </nav>
+      <div className="pt-4">{renderContent(activeTabId)}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  tabs: TabItem[];
+  defaultTabId?: string;
+  renderContent: (activeTabId: string) => ReactNode;
+  onChange?: (tabId: string) => void;
+  className?: string;
+  variant?: "line" | "pills";
+}

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

@@ -0,0 +1,123 @@
+import React, { useState, useRef, useEffect } from "react";
+import { twMerge } from "tailwind-merge";
+import type { TextAreaProps } from "./types";
+
+export const TextArea = ({
+  label,
+  placeholder = "Enter your text here...",
+  value,
+  onChange,
+  error,
+  helperText,
+  rows = 4,
+  maxLength,
+  required = false,
+  disabled = false,
+  variant = "default",
+  className = "",
+  ...props
+}: TextAreaProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (typeof value === "string") {
+      setCharCount(value.length);
+    }
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCharCount(e.target.value.length);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const isFloating = variant === "minimal" && (isFocused || Boolean(value));
+
+  const variantClasses = {
+    default: {
+      textarea:
+        "border border-zinc-300 bg-white text-zinc-900 shadow-sm hover:border-zinc-400 focus:border-black focus:ring-black/20 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100 dark:focus:border-white dark:focus:ring-white/20",
+      label: "mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
+    },
+    minimal: {
+      textarea:
+        "border-0 border-b-2 border-zinc-200 bg-transparent px-0 shadow-none focus:border-black dark:border-zinc-800 dark:text-zinc-100 dark:focus:border-white",
+      label: twMerge(
+        "absolute left-0 pointer-events-none transition-all duration-200",
+        isFloating ? "-top-5 text-xs text-black dark:text-white font-semibold" : "top-3 text-sm text-zinc-400"
+      ),
+    },
+    glass: {
+      textarea:
+        "border border-white/40 bg-white/70 text-zinc-900 shadow-sm backdrop-blur hover:border-white/70 focus:border-black focus:ring-black/20 dark:border-white/10 dark:bg-zinc-950/70 dark:text-zinc-100 dark:focus:border-white dark:focus:ring-white/20",
+      label: "mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
+    },
+  }[variant];
+
+  return (
+    <div className={twMerge("relative w-full", className)}>
+      {label && variant !== "minimal" && (
+        <label className={variantClasses.label}>
+          {label}
+          {required && <span className="ml-1 text-rose-500">*</span>}
+        </label>
+      )}
+
+      <div className="relative">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          placeholder={variant === "minimal" ? (isFocused ? placeholder : "") : placeholder}
+          rows={rows}
+          maxLength={maxLength}
+          required={required}
+          disabled={disabled}
+          className={twMerge(
+            "w-full resize-none rounded-lg px-3 py-3 text-sm outline-none transition-all duration-200 focus:ring-2 disabled:cursor-not-allowed disabled:bg-zinc-50 dark:disabled:bg-zinc-900 disabled:opacity-60",
+            variantClasses.textarea,
+            error ? "border-rose-500 focus:border-rose-500 focus:ring-rose-500/20" : ""
+          )}
+          {...props}
+        />
+
+        {variant === "minimal" && label && (
+          <label
+            className={variantClasses.label}
+            onClick={() => textareaRef.current?.focus()}
+          >
+            {label}
+            {required && <span className="ml-1 text-rose-500">*</span>}
+          </label>
+        )}
+      </div>
+
+      <div className="mt-2 flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          {error ? (
+            <p className="text-xs font-medium text-rose-600">{error}</p>
+          ) : helperText ? (
+            <p className="text-xs text-zinc-500">{helperText}</p>
+          ) : null}
+        </div>
+
+        {maxLength && (
+          <span
+            className={twMerge(
+              "shrink-0 text-xs text-zinc-400",
+              charCount > maxLength * 0.9 ? "text-amber-600" : "",
+              charCount === maxLength ? "text-rose-600" : ""
+            )}
+          >
+            {charCount}/{maxLength}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  error?: string;
+  helperText?: string;
+  rows?: number;
+  maxLength?: number;
+  required?: boolean;
+  disabled?: boolean;
+  variant?: "default" | "minimal" | "glass";
+  className?: string;
+}