@quan-erp/shared-ui 1.0.0

package/dist/es/components/custom/error-screen.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Attention, Refresh } from "@icon-park/react";
+import "../ui/accordion.js";
+import "../ui/alert.js";
+import "../ui/avatar.js";
+import "../ui/badge.js";
+import "../ui/breadcrumb.js";
+import "../ui/button-group.js";
+import { Button } from "../ui/button.js";
+import "react";
+import "lucide-react";
+import "react-day-picker";
+import "../ui/popover.js";
+import "../ui/drawer.js";
+import "../ui/select.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import "../ui/carousel.js";
+import "../ui/chart.js";
+import "../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../ui/command.js";
+import "../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../ui/dropdown-menu.js";
+import "../ui/field.js";
+import "../ui/form.js";
+import "../ui/hover-card.js";
+import "../ui/input-group.js";
+import "../ui/input-otp.js";
+import "../ui/input.js";
+import "../ui/item.js";
+import "@radix-ui/react-label";
+import "../ui/menubar.js";
+import "../ui/navigation-menu.js";
+import "../ui/pagination.js";
+import "../ui/progress.js";
+import "../ui/radio-group.js";
+import "react-resizable-panels";
+import "../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../ui/sidebar.js";
+import "../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../ui/spinner.js";
+import "../ui/switch.js";
+import "../ui/table.js";
+import "../ui/tabs.js";
+import "../ui/textarea.js";
+import "../ui/toggle-group.js";
+import "../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+const ErrorState = ({
+  title = "Error Occurred",
+  error = "An unexpected synchronization error occurred.",
+  onRetry,
+  retryText = "Retry",
+  className,
+  pluginName
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-plugin": pluginName,
+    className: cn(
+      "shared:w-full shared:h-full shared:min-h-[200px] shared:flex shared:flex-col shared:items-center shared:justify-center shared:p-8 shared:text-center shared:text-muted-foreground shared:bg-background/20 shared:rounded-3xl shared:border shared:border-dashed shared:border-border/50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx(Attention, { className: "shared:mb-4 shared:opacity-20", size: 48 }),
+      /* @__PURE__ */ jsx("h2", { className: "shared:text-xl shared:font-semibold shared:text-foreground/80 shared:mb-2", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "shared:text-sm shared:opacity-80 shared:max-w-sm", children: typeof error === "string" ? error : "An unexpected error occurred." }),
+      onRetry && /* @__PURE__ */ jsx("div", { className: "shared:mt-4", children: /* @__PURE__ */ jsxs(Button, { onClick: onRetry, variant: "secondary", size: "sm", children: [
+        /* @__PURE__ */ jsx(Refresh, { className: "shared:mr-2", size: 14 }),
+        retryText
+      ] }) })
+    ]
+  }
+);
+export {
+  ErrorState
+};

package/dist/es/components/custom/floating-action-btn.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useState, useMemo, useEffect, useContext } from "react";
+import { Vibration } from "@quan-erp/shared-frontend-core";
+import { useMobileBackDialog } from "../../hooks/use-mobile-back-dialog.js";
+import { useUserHandBehavior } from "../../hooks/use-user-hand-behavior.js";
+import { Portal } from "./portal.js";
+import { cn } from "../../lib/utils.js";
+import { AnimatePresence } from "../../shared-ui/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion } from "../../shared-ui/node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+const FAB_BUTTON = "FAB_BUTTON";
+const FAB_CONTAINER = "FAB_CONTAINER";
+const FloatingButtonContext = createContext({
+  expand: false,
+  expandable: true,
+  setExpand: (value) => {
+  }
+});
+function FloatingActionButton({
+  expandable = true,
+  onOpenVibrate = false,
+  adaptivePosition = false,
+  ...props
+}) {
+  const [internalExpand, setInternalExpand] = useState(false);
+  const [hand, setHand] = useState("unknown");
+  const isControlled = props.open !== void 0;
+  const expand = isControlled ? props.open || false : internalExpand;
+  const col = props.colSpan || 1;
+  const row = props.rowSpan || 1;
+  const padding = 0.25 * 2;
+  const colGap = col * 0.5;
+  const rowGap = row * 0.5;
+  const width = col * 3 + padding + colGap;
+  const height = row * 3 + padding + rowGap;
+  const { btn, container } = useMemo(() => {
+    let btn2 = null, container2 = null;
+    if (Array.isArray(props.children)) {
+      props.children.forEach((child) => {
+        if (child.type.typeTag === FAB_BUTTON) btn2 = child;
+        if (child.type.typeTag === FAB_CONTAINER) container2 = child;
+        if (child.type.typeTag === void 0) throw new Error("FloatingActionButton allow only [FloatingButton] and [FloatingContainer]");
+      });
+    } else {
+      btn2 = props.children;
+    }
+    return { btn: btn2, container: container2 };
+  }, [props.children]);
+  const setValue = (value) => {
+    if (props.disabled) return;
+    if (value && onOpenVibrate) {
+      Vibration.instance.vibrate(100);
+    }
+    if (!isControlled) {
+      setInternalExpand(value);
+    }
+    props.onOpenChange?.(value);
+  };
+  useMobileBackDialog({
+    enable: true,
+    open: expand,
+    onOpenChange: setValue
+  });
+  useEffect(() => {
+    if (expand) {
+      document.body.style.pointerEvents = "none";
+      document.body.setAttribute("data-scroll-locked", "true");
+    } else {
+      document.body.style.removeProperty("pointer-events");
+      document.body.removeAttribute("data-scroll-locked");
+    }
+    return () => {
+      document.body.style.removeProperty("pointer-events");
+    };
+  }, [expand]);
+  useUserHandBehavior({
+    enable: adaptivePosition,
+    delay: props.adaptivePositionDelay || 500,
+    callback: (hand2) => {
+      if (hand2 === "unknown") return;
+      setHand(hand2);
+    }
+  });
+  return /* @__PURE__ */ jsx(FloatingButtonContext.Provider, { value: {
+    colSpan: props.colSpan,
+    rowSpan: props.rowSpan,
+    disabled: props.disabled,
+    setExpand: setValue,
+    expandable,
+    expand
+  }, children: /* @__PURE__ */ jsxs(Portal, { children: [
+    expand && /* @__PURE__ */ jsx("div", { className: "shared:w-full shared:h-full shared:absolute shared:top-0 shared:left-0 shared:pointer-events-auto", onClick: () => {
+      setValue(false);
+    } }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-plugin": props.pluginName,
+        className: cn(
+          "shared:absolute shared:bottom-0 shared:right-0 shared:cupertino-corner shared:transition-all shared:duration-500 shared:ease-[cubic-bezier(0.34,1.56,0.64,1)] shared:overflow-hidden shared:w-[var(--fab-width)] shared:h-[var(--fab-height)] shared:opacity-[var(--fab-opacity)] shared:pointer-events-auto",
+          adaptivePosition && props.adaptivePositionClassName ? props.adaptivePositionClassName(hand) : hand === "left" ? "shared:left-5" : "shared:right-5",
+          props.className,
+          props.disabled ? "shared:cursor-not-allowed" : "shared:active:scale-95 shared:cursor-pointer",
+          expand ? "shared:rounded-4xl shared:shadow-[0_8px_30px_rgba(0,0,0,0.1)] shared:border shared:border-muted shared:bg-background shared:p-1 shared:overflow-hidden shared:z-10" : "shared:rounded-3xl shared:bg-primary shared:flex shared:items-center shared:justify-center shared:text-white",
+          expand && props.expandClassName
+        ),
+        style: {
+          ["--fab-width"]: expand ? `${width}rem` : "3rem",
+          ["--fab-height"]: expand ? `${height}rem` : "3rem",
+          ["--fab-opacity"]: expand ? `1` : props.disabled ? 0.5 : props.opacity,
+          ...props.style || {}
+        },
+        children: [
+          !expand && btn,
+          expandable && /* @__PURE__ */ jsx(AnimatePresence, { children: expand && container })
+        ]
+      }
+    )
+  ] }) });
+}
+function FloatingButton({ children, onClick }) {
+  const context = useContext(FloatingButtonContext);
+  if (!context) throw new Error("FloatingButton must be inside FloatingActionButton");
+  return /* @__PURE__ */ jsx("div", { className: "shared:absolute shared:left-0 shared:top-0 shared:w-full shared:h-full shared:flex shared:items-center shared:justify-center", onClick: (event) => {
+    if (context.disabled) return;
+    if (context.expandable) context.setExpand(true);
+    onClick?.(event);
+  }, children });
+}
+FloatingButton.typeTag = FAB_BUTTON;
+function FloatingContainer({
+  children,
+  className,
+  style
+}) {
+  const context = useContext(FloatingButtonContext);
+  const close = (event) => {
+    if (context.disabled) return;
+    event.stopPropagation();
+    context.setExpand(false);
+  };
+  if (!context) throw new Error("FloatingContainer must be inside FloatingActionButton");
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: {
+        translateY: "2rem",
+        scale: 0.9,
+        opacity: 0
+      },
+      animate: {
+        translateY: "0%",
+        scale: 1,
+        opacity: 1
+      },
+      exit: {
+        translateY: "2rem",
+        scale: 0.9,
+        opacity: 0,
+        transition: {
+          duration: 0.5,
+          delay: 0,
+          opacity: {
+            duration: 0.1
+          }
+        }
+      },
+      transition: {
+        duration: 0.5,
+        delay: 0.1,
+        type: "spring",
+        opacity: {
+          delay: 0.1,
+          duration: 0.6
+        }
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        close(e);
+      },
+      className: cn(
+        "shared:grid shared:grid-cols-2 shared:grid-rows-2 shared:gap-2 shared:absolute shared:inset-0 shared:top-0 shared:left-0 shared:p-3 shared:w-full shared:h-full",
+        !context.expand && "shared:pointer-events-none",
+        context.disabled && "shared:opacity-40",
+        className
+      ),
+      style: {
+        gridTemplateColumns: `repeat(${context.colSpan ?? 1}, minmax(0, 1fr))`,
+        gridTemplateRows: `repeat(${context.rowSpan ?? 1}, minmax(0, 1fr))`,
+        ...style || {}
+      },
+      children
+    }
+  );
+}
+FloatingContainer.typeTag = FAB_CONTAINER;
+export {
+  FloatingActionButton,
+  FloatingButton,
+  FloatingContainer
+};

package/dist/es/components/custom/loading-screen.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { LoadingOne } from "@icon-park/react";
+const LoadingState = ({
+  title = "Loading...",
+  message = "Processing request...",
+  className,
+  pluginName
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-plugin": pluginName,
+    className: cn(
+      "shared:w-full shared:h-full shared:min-h-[200px] shared:flex shared:flex-col shared:items-center shared:justify-center shared:p-8 shared:text-center shared:text-muted-foreground shared:bg-background/20 shared:rounded-3xl shared:border shared:border-dashed shared:border-border/50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx(LoadingOne, { className: "shared:mb-4 shared:opacity-20 shared:animate-spin", size: 48 }),
+      /* @__PURE__ */ jsx("h2", { className: "shared:text-xl shared:font-semibold shared:text-foreground/80 shared:mb-2", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "shared:text-sm shared:opacity-80 shared:max-w-sm", children: message })
+    ]
+  }
+);
+export {
+  LoadingState
+};

package/dist/es/components/custom/menu-tab.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { useLazyLocaleTranslation, useLocaleTranslation } from "../../locale/locale.js";
+const MENU_TAB_CLASSNAME = "shared:data-[active]:text-white shared:md:text-[1rem] shared:text-[1.2rem] shared:group-data-[type=bottom-nav]:text-2xl shared:group-data-[type=bottom-nav]:[&>svg]:text-2xl";
+function MenuTab({ pluginName, icon, labelKey, locale, isBeta = false }) {
+  const isLazy = typeof locale["en-US"] === "function" || typeof Object.values(locale)[0] === "function";
+  if (isLazy) {
+    return /* @__PURE__ */ jsx(MenuTabLazy, { pluginName, icon, labelKey, locale, isBeta });
+  }
+  return /* @__PURE__ */ jsx(MenuTabSync, { pluginName, icon, labelKey, locale, isBeta });
+}
+function MenuTabSync({ pluginName, icon, labelKey, locale, isBeta = false }) {
+  const l = useLocaleTranslation(locale);
+  return /* @__PURE__ */ jsx(MenuTabContent, { pluginName, icon, label: l.get(labelKey, labelKey), isBeta });
+}
+function MenuTabLazy({ pluginName, icon, labelKey, locale, isBeta = false }) {
+  const l = useLazyLocaleTranslation(locale);
+  return /* @__PURE__ */ jsx(MenuTabContent, { pluginName, icon, label: l.get(labelKey, labelKey), isBeta });
+}
+function MenuTabContent({ pluginName, icon, label, isBeta = false }) {
+  return /* @__PURE__ */ jsxs("div", { "data-plugin": pluginName, className: cn(
+    "shared:flex shared:items-center shared:justify-between shared:w-full shared:min-h-max shared:gap-2 shared:overflow-hidden",
+    "shared:group-data-[bottom-nav-selected=true]:text-primary"
+  ), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "shared:flex shared:items-center shared:gap-2 shared:w-full shared:overflow-hidden",
+      "shared:group-data-[type=bottom-nav]:flex-col"
+    ), children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: cn(
+        "shared:text-ellipsis shared:overflow-hidden",
+        "shared:group-data-[type=bottom-nav]:line-clamp-1 shared:group-data-[type=bottom-nav]:text-[0.6rem] shared:group-data-[type=bottom-nav]:text-center"
+      ), children: label })
+    ] }),
+    isBeta && /* @__PURE__ */ jsx("div", { className: "shared:min-w-max shared:px-2 shared:py-1 shared:text-white shared:rounded-full shared:text-[0.5rem] shared:italic shared:bg-linear-to-r shared:from-purple-400 shared:to-red-400 shared:group-data-[type=bottom-nav]:hidden", children: "Beta" })
+  ] });
+}
+function IconParkMenuTabIcon({ icon: Icon, className, pluginName, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, theme: "outline", "data-plugin": pluginName, className: cn(MENU_TAB_CLASSNAME, className) });
+}
+export {
+  IconParkMenuTabIcon,
+  MENU_TAB_CLASSNAME,
+  MenuTab
+};

package/dist/es/components/custom/page.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useEffect } from "react";
+import { motion } from "motion/react";
+import { PluginAPI } from "@quan-erp/shared-frontend-core";
+import { BUILTIN_PLUGIN_NAME } from "../../common/common.js";
+import { cn } from "../../lib/utils.js";
+function PageTitle({ children }) {
+  return /* @__PURE__ */ jsx("h1", { className: "shared:md:text-2xl shared:text-xl shared:font-bold", children });
+}
+function PageContent({ children }) {
+  return children;
+}
+function PageNavTitle({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "shared:font-bold", children });
+}
+function Page({
+  pluginName,
+  className,
+  children,
+  navMenu,
+  bottomNav
+}) {
+  let title = null;
+  let content = null;
+  const syncNavMenu = PluginAPI.use(BUILTIN_PLUGIN_NAME, "useNavMenuStore")((state) => state.syncNavMenu);
+  const showBottomNav = PluginAPI.use(BUILTIN_PLUGIN_NAME, "useBottomNavBarStore")((state) => state.visibility.show);
+  const hideBottomNav = PluginAPI.use(BUILTIN_PLUGIN_NAME, "useBottomNavBarStore")((state) => state.visibility.hide);
+  React__default.Children.forEach(children, (child) => {
+    if (!React__default.isValidElement(child)) return;
+    if (child.type === PageTitle) {
+      title = child;
+    } else if (child.type === PageContent) {
+      content = child;
+    }
+  });
+  useEffect(() => {
+    return () => {
+      syncNavMenu({
+        visible: true,
+        visibleDefaultActionItem: true,
+        leadingBackButton: false,
+        menuTitle: void 0,
+        leading: void 0,
+        items: void 0,
+        actionItems: void 0
+      });
+      showBottomNav();
+    };
+  }, [syncNavMenu, showBottomNav]);
+  const navMenuLeadingBackButton = navMenu?.leadingBackButton;
+  const navMenuLeading = navMenu?.leading;
+  const navMenuItems = navMenu?.items;
+  const navMenuActionItems = navMenu?.actionItems;
+  const navMenuMenuTitle = navMenu?.menuTitle;
+  const navMenuVisibleDefaultActionItem = navMenu?.visibleDefaultActionItem;
+  const navMenuVisible = navMenu?.visible;
+  useEffect(() => {
+    syncNavMenu({
+      leadingBackButton: navMenuLeadingBackButton,
+      leading: navMenuLeading,
+      items: navMenuItems,
+      actionItems: navMenuActionItems,
+      menuTitle: navMenuMenuTitle,
+      visibleDefaultActionItem: navMenuVisibleDefaultActionItem,
+      visible: navMenuVisible
+    });
+  }, [
+    navMenuLeadingBackButton,
+    navMenuLeading,
+    navMenuItems,
+    navMenuActionItems,
+    navMenuMenuTitle,
+    navMenuVisibleDefaultActionItem,
+    navMenuVisible
+  ]);
+  const bottomNavVisible = bottomNav?.visible;
+  useEffect(() => {
+    if (bottomNavVisible !== void 0)
+      bottomNavVisible ? showBottomNav() : hideBottomNav();
+  }, [bottomNavVisible, showBottomNav, hideBottomNav]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { scale: 0.995, opacity: 0, translateY: "0.3rem" },
+      animate: { scale: 1, opacity: 1, translateY: "0rem" },
+      transition: {
+        duration: 0.3,
+        type: "tween",
+        ease: "easeOut"
+      },
+      "data-plugin": pluginName,
+      className: cn(`shared:flex shared:flex-col shared:md:p-6 shared:p-2 shared:gap-[1rem] shared:will-change-transform`, className),
+      children: [
+        title,
+        content
+      ]
+    }
+  );
+}
+export {
+  Page,
+  PageContent,
+  PageNavTitle,
+  PageTitle
+};

package/dist/es/components/custom/plugin-theme.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+function PluginTheme({ pluginName, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: React__default.Children.map(children, (child) => {
+    if (React__default.isValidElement(child)) {
+      return React__default.cloneElement(child, { "data-plugin": pluginName });
+    }
+    return child;
+  }) });
+}
+export {
+  PluginTheme
+};

package/dist/es/components/custom/portal.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+function Portal({ children }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return createPortal(children, document.body);
+}
+export {
+  Portal
+};

package/dist/es/components/custom/protected-page.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import { PluginAPI } from "@quan-erp/shared-frontend-core";
+import "@icon-park/react";
+import "../ui/accordion.js";
+import "../ui/alert.js";
+import "../ui/avatar.js";
+import "../ui/badge.js";
+import "../ui/breadcrumb.js";
+import "../ui/button-group.js";
+import "../ui/button.js";
+import "react";
+import "lucide-react";
+import "react-day-picker";
+import "clsx";
+import "tailwind-merge";
+import "../ui/popover.js";
+import "../ui/drawer.js";
+import "../ui/select.js";
+import "uuid";
+import "../ui/carousel.js";
+import "../ui/chart.js";
+import "../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../ui/command.js";
+import "../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../ui/dropdown-menu.js";
+import "../ui/field.js";
+import "../ui/form.js";
+import "../ui/hover-card.js";
+import "../ui/input-group.js";
+import "../ui/input-otp.js";
+import "../ui/input.js";
+import "../ui/item.js";
+import "@radix-ui/react-label";
+import "../ui/menubar.js";
+import "../ui/navigation-menu.js";
+import "../ui/pagination.js";
+import "../ui/progress.js";
+import "../ui/radio-group.js";
+import "react-resizable-panels";
+import "../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../ui/sidebar.js";
+import "../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../ui/spinner.js";
+import "../ui/switch.js";
+import "../ui/table.js";
+import "../ui/tabs.js";
+import "../ui/textarea.js";
+import "../ui/toggle-group.js";
+import "../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+function Protected(props) {
+  const ProtectedComponent = PluginAPI.use("builtin", "Protected");
+  return /* @__PURE__ */ jsx(ProtectedComponent, { ...props });
+}
+function ProtectedPage(props) {
+  const ProtectedComponent = PluginAPI.use("builtin", "Protected");
+  return /* @__PURE__ */ jsx(ProtectedComponent, { ...props });
+}
+function withProtected(element, requiredApis) {
+  return function ProtectedComponent() {
+    return /* @__PURE__ */ jsx(ProtectedPage, { requiredApis, children: element });
+  };
+}
+export {
+  Protected,
+  ProtectedPage,
+  withProtected
+};