@grampro/kit 0.0.0-stage → 2.4.0

package/source/icon/iconPaths.ts

@@ -0,0 +1,206 @@
+// Add Icon paths here and refer it in with <Icon /> component
+
+export const leftArrows: any = [
+  { type: "path", d: "m11 17-5-5 5-5", key: "13zhaf" },
+  { type: "path", d: "m18 17-5-5 5-5", key: "h8a8et" },
+];
+export const leftArrow: any = [
+  { type: "path", d: "m11 17-5-5 5-5", key: "13zhaf" },
+];
+export const rightArrow: any = [
+  { type: "path", d: "m9 18 6-6-6-6", key: "mthhwq" },
+];
+export const rightArrows: any = [
+  { type: "path", d: "m6 17 5-5-5-5", key: "xnjwq" },
+  { type: "path", d: "m13 17 5-5-5-5", key: "17xmmf" },
+];
+export const search: any = [
+  { type: "circle", cx: "11", cy: "11", r: "8", key: "4ej97u" },
+  { type: "path", d: "m21 21-4.3-4.3", key: "1qie3q" },
+];
+export const listFilter: any = [
+  { type: "path", d: "M3 6h18", key: "d0wm0j" },
+  { type: "path", d: "M7 12h10", key: "b7w52i" },
+  { type: "path", d: "M10 18h4", key: "1ulq68" },
+];
+export const down: any = [{ type: "path", d: "m6 9 6 6 6-6", key: "qrunsl" }];
+export const calender: any = [
+  { type: "path", d: "M8 2v4", key: "1cmpym" },
+  { type: "path", d: "M16 2v4", key: "4m81vk" },
+
+  {
+    type: "rect",
+    width: "18",
+    height: "18",
+    x: "3",
+    y: "4",
+    rx: "2",
+    key: "1hopcy",
+  },
+  ,
+  { type: "path", d: "M3 10h18", key: "8toen8" },
+];
+export let upDown: any = [
+  { type: "path", d: "m7 15 5 5 5-5", key: "1hf1tw" },
+  { type: "path", d: "m7 9 5-5 5 5", key: "sgt6xg" },
+];
+export let x: any = [
+  { type: "path", d: "M18 6 6 18", key: "1bl5f8" },
+  { type: "path", d: "m6 6 12 12", key: "d8bk6v" },
+];
+export let check: any = [{ type: "path", d: "M20 6 9 17l-5-5", key: "1gmf2c" }];
+export let eye: any = [
+  {
+    type: "path",
+    d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+    key: "1nclc0",
+  },
+  { type: "circle", cx: "12", cy: "12", r: "3", key: "1v7zrd" },
+];
+
+export let circleCheck: any = [
+  { type: "path", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14", key: "g774vq" },
+  { type: "path", d: "m9 11 3 3L22 4", key: "1pflzl" },
+];
+
+export let xCircle: any = [
+  { type: "circle", cx: "12", cy: "12", r: "10", key: "1mglay" },
+  { type: "path", d: "m15 9-6 6", key: "1uzhvr" },
+  { type: "path", d: "m9 9 6 6", key: "z0biqf" },
+];
+
+export let info: any = [
+  { type: "circle", cx: "12", cy: "12", r: "10", key: "1mglay" },
+  { type: "path", d: "M12 16v-4", key: "1dtifu" },
+  { type: "path", d: "M12 8h.01", key: "e9boi3" },
+];
+
+export let sun: any = [
+  { type: "circle", cx: "12", cy: "12", r: "4", key: "4exip2" },
+  { type: "path", d: "M12 20v2", key: "1lh1kg" },
+  { type: "path", d: "M12 2v2", key: "tus03m" },
+  { type: "path", d: "m4.93 4.93 1.41 1.41", key: "149t6j" },
+  { type: "path", d: "m17.66 17.66 1.41 1.41", key: "ptbguv" },
+  { type: "path", d: "M2 12h2", key: "1t8f8n" },
+  { type: "path", d: "M20 12h2", key: "1q8mjw" },
+  { type: "path", d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" },
+  { type: "path", d: "m19.07 4.93-1.41 1.41", key: "1shlcs" },
+];
+
+export let moon: any = [
+  { type: "path", d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z", key: "a7tn18" },
+];
+
+export const upload: any = [
+  {
+    type: "path",
+    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+    key: "ih7n3h",
+  },
+  { type: "polyline", points: "17 8 12 3 7 8", key: "t8dd8p" },
+  { type: "line", x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" },
+];
+
+export const filetext: any = [
+  {
+    type: "path",
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
+    key: "1rqfz7",
+  },
+  { type: "path", d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" },
+  { type: "path", d: "M10 9H8", key: "b1mrlr" },
+  { type: "path", d: "M16 13H8", key: "t4e002" },
+  { type: "path", d: "M16 17H8", key: "z1uh3a" },
+];
+
+export const fileimage: any = [
+  {
+    type: "path",
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
+    key: "1rqfz7",
+  },
+  { type: "path", d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" },
+  { type: "circle", cx: "10", cy: "12", r: "2", key: "737tya" },
+  {
+    type: "path",
+    d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22",
+    key: "wt3hpn",
+  },
+];
+
+export const music: any = [
+  { type: "path", d: "M9 18V5l12-2v13", key: "1jmyc2" },
+  { type: "circle", cx: "6", cy: "18", r: "3", key: "fqmcym" },
+  { type: "circle", cx: "18", cy: "16", r: "3", key: "1hluhg" },
+];
+
+export const film: any = [
+  {
+    type: "rect",
+    width: "18",
+    height: "18",
+    x: "3",
+    y: "3",
+    rx: "2",
+    key: "afitv7",
+  },
+  { type: "path", d: "M7 3v18", key: "bbkbws" },
+  { type: "path", d: "M3 7.5h4", key: "zfgn84" },
+  { type: "path", d: "M3 12h18", key: "1i2n21" },
+  { type: "path", d: "M3 16.5h4", key: "1230mu" },
+  { type: "path", d: "M17 3v18", key: "in4fa5" },
+  { type: "path", d: "M17 7.5h4", key: "myr1c1" },
+  { type: "path", d: "M17 16.5h4", key: "go4c1d" },
+];
+
+export const filespreadsheet: any = [
+  {
+    type: "path",
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
+    key: "1rqfz7",
+  },
+  ,
+  { type: "path", d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" },
+  { type: "path", d: "M8 13h2", key: "yr2amv" },
+  { type: "path", d: "M14 13h2", key: "un5t4a" },
+  { type: "path", d: "M8 17h2", key: "2yhykz" },
+  { type: "path", d: "M14 17h2", key: "10kma7" },
+];
+
+export const cloudDownload: any = [
+  { type: "path", d: "m12 21 4-4", key: "1lfcce" },
+  { type: "path", d: "M12 13v8l-4-4", key: "1f5nwf" },
+  {
+    type: "path",
+
+    d: "M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284",
+    key: "ui1hmy",
+  },
+];
+
+export const plus: any = [
+  { type: "path", d: "M12 5v14", key: "vertical" },
+  { type: "path", d: "M5 12h14", key: "horizontal" },
+];
+
+export const trash: any = [
+  {
+    type: "path",
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+    key: "bin",
+    fill: "none",
+  },
+  { type: "path", d: "M3 6h18", key: "lid", fill: "none" },
+  {
+    type: "path",
+    d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+    key: "handle",
+    fill: "none",
+  },
+];
+
+export const menuIcon: any = [
+  { type: "path", d: "M4 12h16", key: "m1" },
+  { type: "path", d: "M4 6h16", key: "m2" },
+  { type: "path", d: "M4 18h16", key: "m3" },
+];

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { useState } from "react";
+import type { BarChartProps } from "./type";
+
+export const BarChart: React.FC<BarChartProps> = ({
+  data,
+  height = 300,
+  title = "Title",
+  showXValue = true,
+  barColor = "bg-black dark:bg-zinc-800",
+}) => {
+  const [hoveredBar, setHoveredBar] = useState<number | null>(null);
+  const maxValue = Math.max(...data.map((d) => d.value));
+  const chartHeight = height * 0.8; // Leave room for labels
+
+  // Calculate y-axis ticks
+  const yAxisTicks = Array.from({ length: 6 }, (_, i) =>
+    Math.round((maxValue * i) / 5),
+  );
+
+  return (
+    <div className="w-100 p-4">
+      <h2 className="text-sm font-bold mb-16 text-gray-800 text-left">
+        {title}
+      </h2>
+
+      <div className="flex">
+        {/* Y-axis labels */}
+        <div className="flex flex-col justify-between pr-2 text-right">
+          {yAxisTicks.reverse().map((tick, i) => (
+            <div
+              key={i}
+              className="text-xs text-gray-500 h-8 flex items-center justify-end"
+            >
+              {tick}
+            </div>
+          ))}
+        </div>
+
+        {/* Chart area */}
+        <div className="flex-1">
+          <div className="relative h-48">
+            {/* Bars */}
+            <div className="absolute bottom-0 left-0 right-0 flex items-end h-40 space-x-1 pt-4">
+              {data.map((d, i) => {
+                const barHeight = (d.value / maxValue) * chartHeight;
+                const isHovered = hoveredBar === i;
+
+                return (
+                  <div key={i} className="flex flex-col items-center flex-1">
+                    {/* Value label on top of bar when hovered */}
+                    {isHovered && (
+                      <div className="mb-1 text-xs font-medium bg-gray-800 text-white px-2 py-1 rounded shadow-lg z-10">
+                        {d.value}
+                      </div>
+                    )}
+
+                    {/* Bar */}
+                    <div
+                      className={`w-full ${
+                        isHovered ? "bg-zinc-800" : barColor
+                      } rounded-t transition-all duration-200 ease-in-out relative`}
+                      style={{
+                        height: `${barHeight}px`,
+                        boxShadow: isHovered
+                          ? "0 4px 12px rgba(59, 130, 246, 0.5)"
+                          : "none",
+                      }}
+                      onMouseEnter={() => setHoveredBar(i)}
+                      onMouseLeave={() => setHoveredBar(null)}
+                    ></div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* X-axis */}
+          <div className="flex border-t border-gray-300 pt-2 mt-2">
+            {data.map((d, i) => (
+              <div key={i} className="flex-1 text-center">
+                <div className="text-sm font-medium text-gray-700">
+                  {d.label}
+                </div>
+                {showXValue && (
+                  <div className="text-xs text-gray-500 mt-1">{d.value}</div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+type BarData = {
+  label: string;
+  value: number;
+};
+
+export type BarChartProps = {
+  data: BarData[];
+  height?: number;
+  title?: string;
+  showXValue?: boolean;
+  barColor?: string;
+};

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

@@ -0,0 +1,66 @@
+/**
+ * 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 { useLocation } from "@grampro/headless-helpers";
+import Icon from "../icon/Icon";
+import { rightArrow } from "../icon/iconPaths";
+import type { BreadcrumbsProps } from "./types";
+
+export const Breadcrumb = ({
+  showHome = true,
+  rootPath = "/",
+  homeLabel = "Home",
+  transformLabel,
+  className = "",
+  activeLinkClass = "font-medium text-gray-900 dark:text-white",
+  inactiveLinkClass = "text-gray-500 hover:text-gray-700",
+}: BreadcrumbsProps) => {
+  const { pathSegments } = useLocation({
+    showHome,
+    rootPath,
+    homeLabel,
+    transformLabel,
+  });
+
+  if (pathSegments.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex flex-wrap items-center">
+        {pathSegments.map((segment, index) => {
+          const isLast = index === pathSegments.length - 1;
+          return (
+            <li key={index} className="flex items-center">
+              <>
+                <a
+                  href={segment.path}
+                  className={isLast ? activeLinkClass : inactiveLinkClass}
+                >
+                  {segment.label}
+                </a>
+                {!isLast && (
+                  <span className="mx-2 text-gray-400">
+                    <Icon
+                      elements={rightArrow}
+                      dimensions={{ width: 14, height: 14 }}
+                      svgClass={
+                        "stroke-black fill-none dark:stroke-white cursor-pointer"
+                      }
+                    />
+                  </span>
+                )}
+              </>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

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

@@ -0,0 +1,10 @@
+export type BreadcrumbsProps = {
+  homeLabel?: string;
+  showHome?: boolean;
+  transformLabel?: (segment: string) => string;
+  rootPath?: string;
+  className?: string;
+  separator?: string | React.ReactNode;
+  activeLinkClass?: string;
+  inactiveLinkClass?: string;
+};

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

@@ -0,0 +1,42 @@
+/**
+ * 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, { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { buttonStyles } from "../globalStyle";
+import type { ComponentSize, ComponentVariant } from "../theme";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+  variant?: ComponentVariant;
+  size?: ComponentSize;
+  buttonClass?: string;
+}
+
+export const Button = ({
+  children,
+  variant = "primary",
+  size = "md",
+  buttonClass,
+  className,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={twMerge(
+        buttonStyles.base,
+        buttonStyles.sizes[size],
+        buttonStyles.variants[variant],
+        className,
+        buttonClass
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,31 @@
+import React, { type HTMLAttributes, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { cardStyles } from "../globalStyle";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  cardClass?: string;
+  interactive?: boolean;
+}
+
+export function Card({
+  children,
+  cardClass,
+  className,
+  interactive = false,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={twMerge(
+        cardStyles.base,
+        interactive ? cardStyles.interactive : "",
+        className,
+        cardClass
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+/**
+ * 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, { type InputHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export const Checkbox = ({
+  className,
+  ...props
+}: InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      type="checkbox"
+      className={twMerge(
+        "h-5 w-5 cursor-pointer rounded border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-black dark:text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
+        className
+      )}
+      {...props}
+    />
+  );
+};

package/source/legacy-components/contextmenu/ContextMenu.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect, useCallback, MouseEvent } from "react";
+import type { ContextMenuProps, Position } from "./types";
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
+  const [viewportSize, setViewportSize] = useState<Position>({ x: 0, y: 0 });
+
+  const handleContextMenu = useCallback(
+    (event: MouseEvent | globalThis.MouseEvent) => {
+      event.preventDefault();
+      setIsVisible(true);
+      setPosition({
+        x: event.pageX,
+        y: event.pageY,
+      });
+    },
+    []
+  );
+
+  const handleClick = useCallback(() => {
+    if (isVisible) setIsVisible(false);
+  }, [isVisible]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setViewportSize({
+        x: window.innerWidth,
+        y: window.innerHeight,
+      });
+
+      const handleResize = () => {
+        setViewportSize({
+          x: window.innerWidth,
+          y: window.innerHeight,
+        });
+      };
+
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.addEventListener("click", handleClick);
+      document.addEventListener("contextmenu", handleContextMenu);
+
+      return () => {
+        document.removeEventListener("click", handleClick);
+        document.removeEventListener("contextmenu", handleContextMenu);
+      };
+    }
+  }, [handleClick, handleContextMenu]);
+
+  const adjustedPosition = useCallback(
+    (pos: Position): Position => {
+      const menuWidth = 160; // min-width from CSS
+      const menuHeight = 200; // approximate max height
+
+      return {
+        x: Math.min(pos.x, Math.max(viewportSize.x - menuWidth, 0)),
+        y: Math.min(pos.y, Math.max(viewportSize.y - menuHeight, 0)),
+      };
+    },
+    [viewportSize]
+  );
+
+  const finalPosition = adjustedPosition(position);
+
+  return (
+    <>
+      {isVisible && (
+        <div
+          className="fixed bg-white rounded-lg shadow-lg border border-gray-200 py-2 min-w-[160px]"
+          style={{
+            top: finalPosition.y,
+            left: finalPosition.x,
+            zIndex: 1000,
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};

package/source/legacy-components/contextmenu/ContextMenuItem.tsx

@@ -0,0 +1,30 @@
+import type { ContextMenuItemProps } from "./types";
+
+export const ContextMenuItem: React.FC<ContextMenuItemProps> = ({
+  onClick,
+  icon,
+  children,
+  disabled = false,
+}) => (
+  <button
+    onClick={(e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!disabled) {
+        onClick?.();
+      }
+    }}
+    disabled={disabled}
+    className={`w-full px-4 py-2 text-left flex items-center gap-2 ${
+      disabled
+        ? "text-gray-400 cursor-not-allowed"
+        : "hover:bg-gray-100 cursor-pointer"
+    }`}
+  >
+    {icon && <span className="w-4 h-4">{icon}</span>}
+    {children}
+  </button>
+);
+
+export const ContextMenuDivider: React.FC = () => (
+  <div className="my-1 border-t border-gray-200" />
+);

package/source/legacy-components/contextmenu/index.ts

@@ -0,0 +1,2 @@
+export * from "./ContextMenu";
+export * from "./ContextMenuItem";

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ContextMenuProps {
+  children: ReactNode;
+}
+
+interface ContextMenuItemProps {
+  onClick?: () => void;
+  icon?: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+export type { Position, ContextMenuProps, ContextMenuItemProps };

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

@@ -0,0 +1,55 @@
+/**
+ * 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 } from "react";
+import Icon from "../icon/Icon";
+import { moon, sun } from "../icon/iconPaths";
+
+export const DarkMode = () => {
+  const [dark, setDark] = React.useState(false);
+
+  useEffect(() => {
+    // Check for user's preference in localStorage or system preference
+    const isDarkMode =
+      localStorage.getItem("darkMode") === "true" ||
+      (!("darkMode" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+    setDark(isDarkMode);
+    updateDarkMode(isDarkMode);
+  }, []);
+
+  const updateDarkMode = (isDark: boolean) => {
+    if (isDark) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    localStorage.setItem("darkMode", isDark.toString());
+  };
+
+  const darkModeHandler = () => {
+    const newDarkMode = !dark;
+    setDark(newDarkMode);
+    updateDarkMode(newDarkMode);
+  };
+
+  return (
+    <button onClick={darkModeHandler}>
+      {dark ? (
+        <Icon
+          elements={sun}
+          svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+        />
+      ) : (
+        <Icon
+          elements={moon}
+          svgClass={"stroke-black fill-none dark:stroke-white"}
+        />
+      )}
+    </button>
+  );
+};