@duskmoon-dev/components 0.1.2

package/dist/components/dm-menu/DmMenu.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { MenuItemType } from "../menu/Menu.types";
+import type { DmMenuProps, DmMenuSchema } from "./DmMenu.types";
+export declare function createDmMenuItems(menus: DmMenuSchema[] | undefined, locale?: string): MenuItemType[];
+export declare const DmMenu: React.ForwardRefExoticComponent<DmMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dm-menu/DmMenu.types.d.ts

@@ -0,0 +1,44 @@
+import type { Key, ReactNode } from "react";
+import type { MenuClickInfo, MenuProps } from "../menu/Menu.types";
+export interface DmMenuPageElement {
+    eleId?: number;
+    eleCode?: string;
+    operationName?: string;
+    apiUrl?: string;
+    operationType?: string;
+    description?: string;
+    sensitiveOperationProtection?: boolean;
+}
+export interface DmMenuSchema {
+    menuId?: number | string;
+    parentId?: number | string;
+    productId?: number | string;
+    menuName: string;
+    menuNameEn?: string;
+    menuType?: number | string;
+    subRouter?: boolean;
+    menuUrl: string;
+    menuNum?: number;
+    enable?: boolean;
+    children?: DmMenuSchema[];
+    menuIdentifier?: string;
+    iconStr?: ReactNode;
+    tipsEnabled?: boolean;
+    tips?: ReactNode;
+    tipsEn?: ReactNode;
+    pageElements?: DmMenuPageElement[];
+}
+export interface DmMenuClickInfo extends MenuClickInfo {
+    menu?: DmMenuSchema;
+}
+export interface DmMenuProps extends Omit<MenuProps, "items" | "children" | "onClick" | "ref"> {
+    menus?: DmMenuSchema[];
+    items?: MenuProps["items"];
+    hideProductHeader?: boolean;
+    productIcon?: ReactNode;
+    productTitle?: ReactNode;
+    locale?: string;
+    onCollapsed?: () => void;
+    onClick?: (info: DmMenuClickInfo) => void;
+}
+export type DmMenuKey = Key;

package/dist/components/dm-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DmMenu";
+export * from "./DmMenu.types";

package/dist/components/dm-menu/index.js

@@ -0,0 +1,444 @@
+"use client";
+
+// src/components/menu/Menu.tsx
+import { forwardRef, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/menu.ts
+var menuBaseClass = "menu";
+var menuShowClass = "menu-show";
+var menuItemClass = "menu-item";
+var menuItemActiveClass = "menu-item-active";
+var menuItemDisabledClass = "menu-item-disabled";
+var menuItemIconClass = "menu-item-icon";
+var menuItemTrailingClass = "menu-item-trailing";
+var menuItemSubmenuClass = "menu-item-submenu";
+var menuDividerClass = "menu-divider";
+var menuLabelClass = "menu-label";
+var menuSubmenuClass = "menu-submenu";
+var menuCompactClass = "menu-compact";
+var menuWideClass = "menu-wide";
+var menuModeClasses = {
+  vertical: "menu-vertical",
+  horizontal: "menu-horizontal",
+  inline: "menu-inline"
+};
+var menuThemeClasses = {
+  light: "",
+  dark: "menu-dark menu-surface-container-highest"
+};
+var menuSizeClasses = {
+  sm: menuCompactClass,
+  md: "",
+  lg: menuWideClass
+};
+function getMenuClasses({
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  inlineCollapsed,
+  disabled,
+  className
+}) {
+  return cn(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+}
+function getMenuItemClasses({
+  active,
+  disabled,
+  danger,
+  submenu,
+  className
+}) {
+  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+}
+
+// src/components/menu/Menu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function normalizeKeys(keys) {
+  return keys?.map(String) ?? [];
+}
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function keyForItem(item, indexPath) {
+  return String(item.key ?? indexPath.join("-"));
+}
+function isActivationKey(key) {
+  return key === "Enter" || key === " ";
+}
+var MenuItem = forwardRef(({
+  children,
+  icon,
+  extra,
+  active,
+  disabled,
+  danger,
+  className,
+  role,
+  ...props
+}, ref) => /* @__PURE__ */ jsxs("li", {
+  ...props,
+  ref,
+  role: role ?? "menuitem",
+  "aria-disabled": disabled || undefined,
+  className: getMenuItemClasses({
+    active,
+    disabled,
+    danger,
+    className
+  }),
+  children: [
+    icon ? /* @__PURE__ */ jsx("span", {
+      className: menuItemIconClass,
+      children: icon
+    }) : null,
+    /* @__PURE__ */ jsx("span", {
+      children
+    }),
+    extra ? /* @__PURE__ */ jsx("span", {
+      className: menuItemTrailingClass,
+      children: extra
+    }) : null
+  ]
+}));
+MenuItem.displayName = "Menu.Item";
+var MenuDivider = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+  ...props,
+  ref,
+  role: "separator",
+  className: cn(menuDividerClass, className)
+}));
+MenuDivider.displayName = "Menu.Divider";
+var MenuItemGroup = forwardRef(({ title, children, className, ...props }, ref) => /* @__PURE__ */ jsxs("li", {
+  ...props,
+  ref,
+  className: cn("menu-group", className),
+  children: [
+    hasNode(title) ? /* @__PURE__ */ jsx("div", {
+      className: menuLabelClass,
+      children: title
+    }) : null,
+    /* @__PURE__ */ jsx("ul", {
+      className: cn(menuSubmenuClass, "menu-show"),
+      children
+    })
+  ]
+}));
+MenuItemGroup.displayName = "Menu.ItemGroup";
+var MenuRoot = forwardRef(({
+  items,
+  children,
+  selectedKeys,
+  defaultSelectedKeys,
+  openKeys,
+  defaultOpenKeys,
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  selectable = true,
+  multiple,
+  inlineCollapsed,
+  disabled,
+  onClick,
+  onSelect,
+  onDeselect,
+  onOpenChange,
+  className,
+  ...props
+}, ref) => {
+  const selectedControlled = selectedKeys !== undefined;
+  const openControlled = openKeys !== undefined;
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(() => normalizeKeys(defaultSelectedKeys));
+  const [internalOpenKeys, setInternalOpenKeys] = useState(() => normalizeKeys(defaultOpenKeys));
+  const currentSelectedKeys = selectedControlled ? normalizeKeys(selectedKeys) : internalSelectedKeys;
+  const currentOpenKeys = openControlled ? normalizeKeys(openKeys) : internalOpenKeys;
+  function setNextSelectedKeys(nextSelectedKeys) {
+    if (!selectedControlled) {
+      setInternalSelectedKeys(nextSelectedKeys);
+    }
+  }
+  function setNextOpenKeys(nextOpenKeys) {
+    if (!openControlled) {
+      setInternalOpenKeys(nextOpenKeys);
+    }
+    onOpenChange?.(nextOpenKeys);
+  }
+  function buildInfo(item, key, keyPath, domEvent, nextSelectedKeys = currentSelectedKeys) {
+    return {
+      key,
+      keyPath,
+      item,
+      selectedKeys: nextSelectedKeys,
+      domEvent
+    };
+  }
+  function activateItem(item, key, keyPath, event) {
+    if (disabled || item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    let nextSelectedKeys = currentSelectedKeys;
+    const selected = currentSelectedKeys.includes(key);
+    if (selectable) {
+      if (selected && multiple) {
+        nextSelectedKeys = currentSelectedKeys.filter((selectedKey) => selectedKey !== key);
+        setNextSelectedKeys(nextSelectedKeys);
+        onDeselect?.(buildInfo(item, key, keyPath, event, nextSelectedKeys));
+      } else if (!selected) {
+        nextSelectedKeys = multiple ? [...currentSelectedKeys, key] : [key];
+        setNextSelectedKeys(nextSelectedKeys);
+        onSelect?.(buildInfo(item, key, keyPath, event, nextSelectedKeys));
+      }
+    }
+    onClick?.(buildInfo(item, key, keyPath, event, nextSelectedKeys));
+  }
+  function toggleSubmenu(key) {
+    const open = currentOpenKeys.includes(key);
+    setNextOpenKeys(open ? currentOpenKeys.filter((openKey) => openKey !== key) : [...currentOpenKeys, key]);
+  }
+  function renderItem(item, indexPath, parentKeyPath = []) {
+    if (item.type === "divider") {
+      return /* @__PURE__ */ jsx(MenuDivider, {}, `divider-${indexPath.join("-")}`);
+    }
+    const key = keyForItem(item, indexPath);
+    const keyPath = [key, ...parentKeyPath];
+    if (item.type === "group") {
+      return /* @__PURE__ */ jsx(MenuItemGroup, {
+        title: item.label ?? item.title,
+        children: item.children?.map((child, childIndex) => renderItem(child, [...indexPath, childIndex], keyPath))
+      }, key);
+    }
+    const hasChildren = Boolean(item.children?.length);
+    const selected = currentSelectedKeys.includes(key);
+    const open = currentOpenKeys.includes(key);
+    const itemDisabled = disabled || item.disabled;
+    if (hasChildren) {
+      return /* @__PURE__ */ jsxs("li", {
+        className: cn("menu-submenu-wrapper", item.className),
+        children: [
+          /* @__PURE__ */ jsxs("button", {
+            type: "button",
+            className: getMenuItemClasses({
+              active: selected,
+              disabled: itemDisabled,
+              danger: item.danger,
+              submenu: true
+            }),
+            disabled: itemDisabled,
+            "aria-expanded": open,
+            onClick: () => toggleSubmenu(key),
+            children: [
+              item.icon ? /* @__PURE__ */ jsx("span", {
+                className: menuItemIconClass,
+                children: item.icon
+              }) : null,
+              /* @__PURE__ */ jsx("span", {
+                children: item.label ?? item.title
+              }),
+              item.extra ? /* @__PURE__ */ jsx("span", {
+                className: menuItemTrailingClass,
+                children: item.extra
+              }) : null
+            ]
+          }),
+          open ? /* @__PURE__ */ jsx("ul", {
+            className: cn(menuSubmenuClass, "menu-show"),
+            children: item.children?.map((child, childIndex) => renderItem(child, [...indexPath, childIndex], keyPath))
+          }) : null
+        ]
+      }, key);
+    }
+    return /* @__PURE__ */ jsx(MenuItem, {
+      role: "menuitem",
+      tabIndex: itemDisabled ? undefined : 0,
+      active: selected,
+      disabled: itemDisabled,
+      danger: item.danger,
+      icon: item.icon,
+      extra: item.extra,
+      className: item.className,
+      onClick: (event) => activateItem(item, key, keyPath, event),
+      onKeyDown: (event) => {
+        if (!isActivationKey(event.key)) {
+          return;
+        }
+        event.preventDefault();
+        activateItem(item, key, keyPath, event);
+      },
+      children: item.label
+    }, key);
+  }
+  return /* @__PURE__ */ jsx("ul", {
+    ...props,
+    ref,
+    role: props.role ?? "menu",
+    className: getMenuClasses({
+      mode,
+      theme,
+      size,
+      inlineCollapsed,
+      disabled,
+      className
+    }),
+    children: items ? items.map((item, index) => renderItem(item, [index])) : children
+  });
+});
+MenuRoot.displayName = "Menu";
+MenuRoot.Item = MenuItem;
+MenuRoot.Divider = MenuDivider;
+MenuRoot.ItemGroup = MenuItemGroup;
+var Menu = MenuRoot;
+// src/components/dm-menu/DmMenu.tsx
+import { forwardRef as forwardRef2, useMemo } from "react";
+
+// src/classes/dm-menu.ts
+var dmMenuClass = "dm-menu";
+var dmMenuNoHeaderClass = "dm-menu-no-header";
+var dmMenuCollapsedClass = "dm-menu-collapsed";
+var dmMenuHeaderClass = "dm-menu-header";
+var dmMenuProductIconClass = "dm-menu-product-icon";
+var dmMenuContentClass = "dm-menu-content";
+var dmMenuFooterClass = "dm-menu-footer";
+var dmMenuCollapseButtonClass = "dm-menu-collapse-button";
+function getDmMenuClasses({
+  hideProductHeader,
+  inlineCollapsed,
+  className
+}) {
+  return cn(dmMenuClass, hideProductHeader && dmMenuNoHeaderClass, inlineCollapsed && dmMenuCollapsedClass, className);
+}
+
+// src/components/dm-menu/DmMenu.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getMenuLabel(menu, locale) {
+  return locale === "en-US" && menu.menuNameEn ? menu.menuNameEn : menu.menuName;
+}
+function renderIcon(icon) {
+  if (!icon)
+    return;
+  return typeof icon === "string" ? /* @__PURE__ */ jsx2("span", {
+    className: dmMenuProductIconClass,
+    "aria-hidden": "true",
+    children: icon
+  }) : icon;
+}
+function isEnabled(menu) {
+  return menu.enable !== false;
+}
+function toMenuItems(menus, locale, byKey) {
+  return (menus ?? []).filter((menu) => !menu.subRouter && isEnabled(menu)).sort((a, b) => (a.menuNum ?? 0) - (b.menuNum ?? 0)).map((menu) => {
+    const key = menu.menuUrl || String(menu.menuId ?? menu.menuIdentifier);
+    byKey?.set(key, menu);
+    return {
+      key,
+      label: getMenuLabel(menu, locale),
+      title: getMenuLabel(menu, locale),
+      icon: renderIcon(menu.iconStr),
+      children: toMenuItems(menu.children, locale, byKey)
+    };
+  });
+}
+function createDmMenuItems(menus, locale) {
+  return toMenuItems(menus, locale);
+}
+var DmMenu = forwardRef2(({
+  menus = [],
+  items,
+  hideProductHeader = false,
+  productTitle = "DuskMoon",
+  productIcon,
+  inlineCollapsed,
+  onCollapsed,
+  locale,
+  onClick,
+  className,
+  ...props
+}, ref) => {
+  const menuByKey = useMemo(() => new Map, []);
+  const schemaItems = useMemo(() => {
+    menuByKey.clear();
+    return toMenuItems(menus, locale, menuByKey);
+  }, [locale, menuByKey, menus]);
+  const contentItems = items ?? schemaItems;
+  function handleClick(info) {
+    onClick?.({
+      ...info,
+      menu: menuByKey.get(info.key)
+    });
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    ref,
+    className: getDmMenuClasses({
+      hideProductHeader,
+      inlineCollapsed,
+      className
+    }),
+    children: [
+      hideProductHeader ? null : /* @__PURE__ */ jsx2("div", {
+        className: dmMenuHeaderClass,
+        children: /* @__PURE__ */ jsx2(Menu, {
+          mode: "inline",
+          inlineCollapsed,
+          selectable: false,
+          items: [
+            {
+              key: "__product",
+              label: productTitle,
+              title: productTitle,
+              icon: renderIcon(productIcon)
+            }
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        className: dmMenuContentClass,
+        children: /* @__PURE__ */ jsx2(Menu, {
+          ...props,
+          mode: props.mode ?? "inline",
+          items: contentItems,
+          inlineCollapsed,
+          onClick: handleClick
+        })
+      }),
+      onCollapsed ? /* @__PURE__ */ jsx2("div", {
+        className: dmMenuFooterClass,
+        children: /* @__PURE__ */ jsx2("button", {
+          type: "button",
+          className: dmMenuCollapseButtonClass,
+          "aria-label": inlineCollapsed ? "Expand menu" : "Collapse menu",
+          onClick: onCollapsed,
+          children: inlineCollapsed ? ">" : "<"
+        })
+      }) : null
+    ]
+  });
+});
+DmMenu.displayName = "DmMenu";
+export {
+  createDmMenuItems,
+  DmMenu
+};

package/dist/components/dm-message/DmMessage.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { DmMessageContentProps, DmMessageHolderProps, DmMessageType } from "./DmMessage.types";
+export declare function DmMessageContent({ content, className, }: DmMessageContentProps): React.JSX.Element;
+declare function open(content: string, key?: string, type?: DmMessageType): import("../message").MessageHandle;
+declare function destroy(key?: string): void;
+export declare function DmMessageHolder({ className }: DmMessageHolderProps): React.JSX.Element;
+export declare const DmMessage: {
+    error: (content: string, key?: string) => import("../message").MessageHandle;
+    success: (content: string, key?: string) => import("../message").MessageHandle;
+    warning: (content: string, key?: string) => import("../message").MessageHandle;
+    info: (content: string, key?: string) => import("../message").MessageHandle;
+    loading: (content: string, key?: string) => import("../message").MessageHandle;
+    open: typeof open;
+    destroy: typeof destroy;
+};
+export default DmMessage;

package/dist/components/dm-message/DmMessage.types.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { MessageArgsProps, MessageHandle, MessageType } from "../message/Message.types";
+export type DmMessageType = MessageType;
+export interface DmMessageContentProps {
+    content: string;
+    className?: string;
+}
+export interface DmMessageApi {
+    error: (content: string, key?: string) => MessageHandle;
+    success: (content: string, key?: string) => MessageHandle;
+    warning: (content: string, key?: string) => MessageHandle;
+    info: (content: string, key?: string) => MessageHandle;
+    loading: (content: string, key?: string) => MessageHandle;
+    open: (content: string, key?: string, type?: DmMessageType) => MessageHandle;
+    destroy: (key?: string) => void;
+}
+export interface DmMessageHolderProps {
+    className?: string;
+}
+export interface DmMessageOpenConfig extends Omit<MessageArgsProps, "content" | "type"> {
+    content: string;
+    type?: DmMessageType;
+}
+export type DmMessageContentNode = ReactNode;

package/dist/components/dm-message/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DmMessage";
+export type * from "./DmMessage.types";