@ramesesinc/platform-core 0.1.5 → 0.1.8

package/dist/components/list/IconMenu.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { useState } from "react";
-import { twMerge } from "tailwind-merge";
-import DynamicIcon from "../../core/DynamicIcon";
-import { usePageContext } from "../../core/PageContext";
-import { usePageViewContext } from "../../core/PageViewContext";
-import { AbstractComponent } from "../../types/component";
-import useUIMenu, { MenuGroup, MenuItem } from "../common/UIMenu";
-
-/* ------------------------------------------------------------------ */
-/* Types */
-
-interface IconMenuProps extends AbstractComponent {
-  name?: string;
-  items?: MenuGroup[];
-  data?: Record<string, any>;
-  menugroup?: string;
-  depends?: string;
-  columns?: number;
-  size?: "sm" | "md" | "lg";
-  style?: string;
-}
-
-/* ------------------------------------------------------------------ */
-/* Size config */
-
-const sizeConfig = {
-  sm: { tile: "w-20 h-20", icon: 24, label: "text-xs", gap: "gap-2" },
-  md: { tile: "w-28 h-28", icon: 32, label: "text-sm", gap: "gap-3" },
-  lg: { tile: "w-36 h-36", icon: 40, label: "text-base", gap: "gap-4" },
-};
-
-/* ------------------------------------------------------------------ */
-/* Component */
-
-const IconMenu = (props: IconMenuProps) => {
-  const { name, menugroup, depends, items: itemsProp, data, columns = 5, size = "md", style = "" } = props ?? {};
-  const pageContext = usePageContext();
-  const pageView = usePageViewContext();
-  const contextKey = name ?? depends ?? "";
-  const [activeItem, setActiveItem] = useState<string | null>(null);
-
-  const defaultPopupClass = `bg-white rounded-lg shadow-xl w-[90%] h-[90%] flex flex-col`;
-  const finalPopupClass = twMerge(clsx(defaultPopupClass, style));
-
-  // useUIMenu always returns MenuGroup[]
-  const { items } = useUIMenu({ menugroup, items: itemsProp, data });
-
-  const cfg = sizeConfig[size];
-
-  /* ---------------------- Events ---------------------- */
-  const handleItemClick = (item: MenuItem) => {
-    if (!item.page || item.page === activeItem) return;
-    if (item.mode == "window") {
-      const oldHref = window.location.href;
-      const nidx = oldHref.lastIndexOf("/");
-      if (nidx > 0) {
-        const newUrl = oldHref.substring(0, nidx) + "/" + item.page;
-        window.location.href = newUrl;
-      }
-    } else {
-      setActiveItem(item.page);
-      if (contextKey && contextKey !== "selectedPage") {
-        pageContext?.set(contextKey, item.page);
-      } else {
-        pageView?.setPage(item.page);
-      }
-    }
-  };
-
-  /* ---------------------- Shared button ---------------------- */
-  const renderButton = (item: MenuItem, index: number) => (
-    <button
-      key={index}
-      onClick={() => handleItemClick(item)}
-      className={`
-        ${cfg.tile}
-        flex flex-col items-center justify-center gap-2
-        rounded-2xl select-none cursor-pointer
-        transition-all duration-200 ease-out
-        focus:outline-none
-        text-gray-600 hover:bg-gray-100 hover:text-gray-900
-      `}
-    >
-      <DynamicIcon icon={item.icon} size={cfg.icon} />
-      <span className={`${cfg.label} font-semibold leading-tight text-center px-1 truncate w-full`}>{item.title}</span>
-    </button>
-  );
-
-  /* ---------------------- Render ---------------------- */
-  return (
-    <div className="flex flex-col gap-6 p-4">
-      {(items as MenuGroup[]).map((group, groupIndex) => {
-        // Flat item — no group structure
-        if (!Array.isArray(group.items)) {
-          return renderButton(group as unknown as MenuItem, groupIndex);
-        }
-
-        // Grouped with category title
-        return (
-          <div key={groupIndex} className="flex flex-col gap-2">
-            {group.title && <span className="text-xs font-semibold text-gray-400 uppercase tracking-widest px-1">{group.title}</span>}
-            <div className={`grid ${cfg.gap} justify-items-center`} style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
-              {group.items.map((item, index) => renderButton(item, index))}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default IconMenu;

package/dist/components/list/TabMenu.tsx

@@ -1,127 +0,0 @@
-import { useEffect, useState } from "react";
-import { usePageContext } from "../../core/PageContext";
-import { usePageViewContext } from "../../core/PageViewContext";
-import useDependHandler from "../../core/UIDependHandler";
-import HPanel from "../../layouts/HPanel";
-import VPanel from "../../layouts/VPanel";
-
-type TabMenuProps = {
-  name?: string;
-  depends?: string;
-  items?: Record<string, any>[];
-  data?: Record<string, any>;
-  menugroup?: string;
-  orientation?: "horizontal" | "vertical";
-};
-
-type TabMenuItemProps = {
-  id: string;
-  title: string;
-  key: string;
-  component?: string;
-  attr?: Record<string, any>;
-  index: number;
-  selected?: boolean;
-  onClick: (item: Record<string, any>) => void;
-  [key: string]: any;
-};
-
-const TabMenu = (props: TabMenuProps) => {
-  const { name, depends, items = [], data, menugroup, orientation = "horizontal" } = props ?? {};
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const [refreshKey, setRefreshKey] = useState(0);
-  const pageContext = usePageContext();
-  const pageView = usePageViewContext();
-  const contextKey = name ?? depends ?? "";
-
-  const resolvedItems = items.map((item: any, index: number) => ({
-    ...item,
-    key: item.id ?? Math.random().toString(36).substring(2, 15),
-    index,
-  }));
-
-  const onRefresh = () => setRefreshKey((k) => k + 1);
-  useDependHandler({ name: depends, onRefresh });
-
-  const handleClick = (item: Record<string, any>) => {
-    setSelectedIndex(item.index);
-
-    if (item.page != null && item.page.trim() !== "") {
-      pageView.setPage(item.page);
-    } else if (contextKey != null && contextKey.trim() !== "") {
-      const selItem = { ...item };
-      delete selItem.id;
-      delete selItem.title;
-      delete selItem.index;
-      delete selItem.key;
-      delete selItem.selected;
-      delete selItem.onClick;
-      pageContext.set(contextKey, selItem); // ← sets "selectedTask" = "new_application_list"
-    }
-  };
-
-  useEffect(() => {
-    if (resolvedItems != null && resolvedItems.length > 0 && selectedIndex === -1) {
-      handleClick(resolvedItems[0]);
-    }
-  }, [resolvedItems]);
-
-  const render = () => {
-    if (resolvedItems.length === 0) return null;
-
-    const elems = resolvedItems.map((it) => {
-      const item = it as unknown as TabMenuItemProps;
-      item.selected = item.index === selectedIndex;
-      return <TabMenuItem {...item} key={item.key} onClick={handleClick} />;
-    });
-
-    if (orientation === "vertical") {
-      return (
-        <div className="border-r border-gray-200">
-          <VPanel gap={25}>{elems}</VPanel>
-        </div>
-      );
-    }
-
-    return (
-      <div className="w-full">
-        <HPanel gap={25}>{elems}</HPanel>
-      </div>
-    );
-  };
-
-  return <div>{render()}</div>;
-};
-
-export default TabMenu;
-
-/* ------------------------------------------------------------------ */
-/* TabMenuItem */
-
-const TabMenuItem = (props: TabMenuItemProps) => {
-  const { title, onClick } = props ?? {};
-
-  const handleClick = () => onClick(props);
-
-  const render = () => {
-    if (props.selected) {
-      return (
-        <div onClick={handleClick} className="relative px-4 py-3 cursor-pointer text-sm transition-all duration-200 text-gray-900 font-semibold">
-          {title}
-          <span className="absolute bottom-0 left-0 w-full h-[2px] rounded-full bg-gray-900" />
-        </div>
-      );
-    }
-
-    return (
-      <div
-        onClick={handleClick}
-        className="relative px-4 py-3 cursor-pointer text-sm transition-all duration-200 text-gray-500 font-normal hover:text-gray-600"
-      >
-        {title}
-      </div>
-    );
-  };
-
-  return <div onClick={handleClick}>{render()}</div>;
-};

package/dist/components/list/TreeMenu.tsx

@@ -1,279 +0,0 @@
-"use client";
-
-import { ChevronDown } from "lucide-react";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import DynamicIcon from "../../core/DynamicIcon";
-import { usePageContext } from "../../core/PageContext";
-import { usePageViewContext } from "../../core/PageViewContext";
-import { AbstractComponent } from "../../types/component";
-import useUIMenu, { MenuGroup, MenuItem } from "../common/UIMenu";
-
-/* ------------------------------------------------------------------ */
-/* Local type */
-type TreeMenuGroup = MenuGroup & { isDropdown?: boolean };
-
-/* ------------------------------------------------------------------ */
-/* Helpers */
-
-const buildItems = (raw: any[]): TreeMenuGroup[] => {
-  const mapped: TreeMenuGroup[] = [];
-
-  for (const entry of raw) {
-    if (Array.isArray(entry.items)) {
-      mapped.push({
-        ...entry,
-        isDropdown: entry.isDropdown ?? true,
-        items: buildItems(entry.items),
-      });
-    } else {
-      const lastGroup = mapped[mapped.length - 1];
-      if (lastGroup && lastGroup.title === "" && !lastGroup.isDropdown) {
-        lastGroup.items.push(entry);
-      } else {
-        mapped.push({ title: "", icon: undefined, isDropdown: false, items: [entry] });
-      }
-    }
-  }
-
-  return mapped;
-};
-
-const findFirstItem = (groups: TreeMenuGroup[]): MenuItem | null => {
-  for (const group of groups) {
-    for (const item of group.items) {
-      if (Array.isArray((item as any).items)) {
-        const found = findFirstItem([item as any as TreeMenuGroup]);
-        if (found) return found;
-      } else if (item.page) return item;
-    }
-  }
-  return null;
-};
-
-const findGroupPath = (groups: TreeMenuGroup[], targetPage: string | null, depth = 0): string[] => {
-  for (let i = 0; i < groups.length; i++) {
-    const group = groups[i];
-    const key = `${depth}-${i}`;
-
-    for (const item of group.items) {
-      if (Array.isArray((item as any).items)) {
-        const path = findGroupPath([item as any as TreeMenuGroup], targetPage, depth + 1);
-        if (path.length) return [key, ...path];
-      } else if (item.page === targetPage) return [key];
-    }
-  }
-  return [];
-};
-
-const findItemByPage = (groups: TreeMenuGroup[], targetPage: string | null): MenuItem | null => {
-  for (const group of groups) {
-    for (const item of group.items) {
-      if (Array.isArray((item as any).items)) {
-        const found = findItemByPage([item as any as TreeMenuGroup], targetPage);
-        if (found) return found;
-      } else {
-        // console.log("treemenu findItemByPage", targetPage, item.page);
-        if (item.page === targetPage) return item;
-      }
-    }
-  }
-  return null;
-};
-
-const isActiveItemInTree = (groups: TreeMenuGroup[], page: string | null): boolean =>
-  groups.some((group) =>
-    group.items.some((item) => (Array.isArray((item as any).items) ? isActiveItemInTree([item as any as TreeMenuGroup], page) : item.page === page)),
-  );
-
-/* ------------------------------------------------------------------ */
-/* Component */
-
-interface TreeMenuProps extends AbstractComponent {
-  name?: string;
-  items?: TreeMenuGroup[] | MenuItem[];
-  data?: Record<string, any>;
-  menugroup?: string;
-  depends?: string;
-}
-
-const TreeMenu = (props: TreeMenuProps) => {
-  const { name = "selectedPage", menugroup, depends, items: itemsProp, data } = props ?? {};
-
-  const pageContext = usePageContext();
-  const pageView = usePageViewContext();
-
-  const contextKey = name ?? depends ?? "";
-
-  const [openGroups, setOpenGroups] = useState<string[]>([]);
-  const [activeItem, setActiveItem] = useState<Record<string, any>>({});
-  const [items, setItems] = useState<TreeMenuGroup[]>([]);
-  const initializedRef = useRef(false);
-
-  const { items: rawItems } = useUIMenu({
-    items: itemsProp as Record<string, any>[],
-    data,
-    menugroup,
-  });
-
-  useLayoutEffect(() => {
-    const { path = "" } = pageView.getOriginalLocationInfo() ?? {};
-    const [, ...anchors] = path.split("#");
-    const [selectedPath] = anchors;
-    pageContext.set(contextKey, selectedPath);
-  }, []);
-
-  /* ---------------------- Sync active item from page view ---------------------- */
-  useLayoutEffect(() => {
-    if (items.length === 0 || !pageView.getSelectedPage()) return;
-    if (initializedRef.current) return;
-
-    const item = findItemByPage(items, pageView.getSelectedPage());
-    if (item) setActiveItem(item);
-  }, [items, pageView.getSelectedPage()]);
-
-  /* ---------------------- Build items ---------------------- */
-  useEffect(() => {
-    if (!Array.isArray(rawItems) || rawItems.length === 0) return;
-    setItems(buildItems(rawItems as any[]));
-  }, [rawItems]);
-
-  /* ---------------------- Auto-select first item on init ---------------------- */
-  useEffect(() => {
-    if (initializedRef.current || items.length === 0) return;
-
-    const firstItem = findFirstItem(items);
-    if (!firstItem?.page) return;
-
-    let selectedPage = pageContext.get(contextKey);
-    // console.log("treemenu selected page from context", contextKey, selectedPage);
-    if (selectedPage == null && contextKey === "selectedPage") {
-      selectedPage = pageView.getSelectedPage();
-      // console.log("treemenu selected page fallback from context", contextKey, selectedPage);
-    }
-    // console.log("treemenu selected page final", contextKey, selectedPage);
-    if (selectedPage != null) {
-      const selectedItem = findItemByPage(items, selectedPage);
-      // console.log("treemenu findItemByPage", selectedPage, selectedItem);
-      if (selectedItem) {
-        setOpenGroups(findGroupPath(items, selectedPage));
-        setActiveItem(selectedItem);
-      } else {
-        setOpenGroups(findGroupPath(items, firstItem.page));
-        setActiveItem(firstItem);
-      }
-    } else {
-      setOpenGroups(findGroupPath(items, firstItem.page));
-      setActiveItem(firstItem);
-    }
-
-    initializedRef.current = true;
-  }, [items, contextKey]);
-
-  /* ---------------------- Sync page context on active item change ---------------------- */
-  useEffect(() => {
-    const { mode, page } = (activeItem ?? {}) as Record<string, any>;
-    if (!page) return;
-
-    const idx = ["window", "popup"].indexOf(String(mode).toLowerCase());
-    if (idx >= 0) {
-      pageView.setPage(page, { mode });
-    } else {
-      pageView.setSelectedPage(page);
-      pageContext.set(contextKey, page);
-    }
-  }, [activeItem]);
-
-  /* ---------------------- Auto-open group containing active item ---------------------- */
-  useEffect(() => {
-    if (!activeItem?.page || items.length === 0) return;
-
-    const path = findGroupPath(items, activeItem.page);
-    if (path.length) {
-      setOpenGroups((prev) => Array.from(new Set([...prev, ...path])));
-    }
-  }, [activeItem, items]);
-
-  /* ---------------------- Helpers ---------------------- */
-  const toggleGroup = (key: string) => setOpenGroups((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
-
-  const isGroupOpen = (key: string) => openGroups.includes(key);
-
-  const calculateHeight = (items: any[], depth: number): number => {
-    return items.reduce((total: number, item: any, idx: number) => {
-      if (Array.isArray(item.items)) {
-        const key = `${depth + 1}-${idx}`;
-        return total + 36 + (isGroupOpen(key) ? calculateHeight(item.items, depth + 1) : 0);
-      }
-      return total + 36;
-    }, 0);
-  };
-
-  /* ---------------------- Events ---------------------- */
-  const handleSubItemClick = (item: MenuItem) => {
-    if (!item.page || item.page === activeItem.page) return;
-    setActiveItem(item);
-  };
-
-  /* ---------------------- Recursive render ---------------------- */
-  const renderGroup = (group: TreeMenuGroup, index: number, depth: number = 0): React.ReactNode => {
-    const paddingLeft = depth * 12;
-    const key = `${depth}-${index}`;
-
-    return (
-      <div key={key}>
-        {group.title && (
-          <div
-            onClick={() => group.isDropdown && toggleGroup(key)}
-            className="flex items-center justify-between px-3 py-2 cursor-pointer rounded-md"
-            style={{ paddingLeft: `${12 + paddingLeft}px` }}
-          >
-            <div className="flex items-center gap-2 h-6">
-              <div className="w-5 h-5 flex items-center justify-center">
-                <DynamicIcon icon={group.icon} size={18} />
-              </div>
-              <span className="text-sm font-medium truncate">{group.title}</span>
-            </div>
-            {group.isDropdown && <ChevronDown size={16} className={`transition-transform duration-200 ${isGroupOpen(key) ? "rotate-90" : ""}`} />}
-          </div>
-        )}
-
-        <div
-          style={{
-            maxHeight: !group.title || isGroupOpen(key) ? `${calculateHeight(group.items, depth)}px` : "0px",
-          }}
-          className="overflow-hidden transition-[max-height] duration-300"
-        >
-          {group.items.map((item: any, idx: number) => {
-            if (Array.isArray(item.items)) {
-              return renderGroup(item as TreeMenuGroup, idx, depth + 1);
-            }
-
-            const isActive = item.page === activeItem.page;
-            const itemPadding = group.title ? `${24 + paddingLeft}px` : `${12 + paddingLeft}px`;
-
-            return (
-              <div
-                key={idx}
-                onClick={() => handleSubItemClick(item)}
-                className={`py-2 text-sm cursor-pointer rounded-md flex items-center gap-2 hover:bg-[#d3e3fd] ${
-                  isActive ? "bg-[#e8f0fe] text-blue-700 font-medium" : ""
-                }`}
-                style={{ paddingLeft: itemPadding }}
-              >
-                <div className="w-5 h-5 flex items-center justify-center">
-                  <DynamicIcon icon={item.icon} size={16} />
-                </div>
-                <span className="text-sm truncate">{item.title}</span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  };
-
-  /* ---------------------- Render ---------------------- */
-  return <div className="flex flex-col gap-1 px-4 py-3 h-full overflow-y-auto">{items.map((group, index) => renderGroup(group, index, 0))}</div>;
-};
-
-export default TreeMenu;