@duskmoon-dev/components 0.1.2

package/dist/components/message/Message.types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+export type MessageType = "success" | "error" | "info" | "warning" | "loading";
+export type MessagePlacement = "top" | "bottom";
+export interface MessageConfig {
+    top?: number;
+    duration?: number;
+    maxCount?: number;
+    prefixCls?: string;
+    getContainer?: () => HTMLElement;
+    placement?: MessagePlacement;
+}
+export interface MessageArgsProps {
+    key?: string | number;
+    type?: MessageType;
+    content?: ReactNode;
+    duration?: number;
+    className?: string;
+    icon?: ReactNode;
+    onClose?: () => void;
+}
+export type MessageContent = ReactNode | MessageArgsProps;
+export interface MessageInstance {
+    key: string;
+    type: MessageType;
+    content?: ReactNode;
+    duration: number;
+    className?: string;
+    icon?: ReactNode;
+    onClose?: () => void;
+}
+export interface MessageHandle extends Promise<void> {
+    key: string;
+    close: () => void;
+}
+export interface MessageApi {
+    open: (config: MessageArgsProps) => MessageHandle;
+    success: (content: MessageContent, duration?: number, onClose?: () => void) => MessageHandle;
+    error: (content: MessageContent, duration?: number, onClose?: () => void) => MessageHandle;
+    info: (content: MessageContent, duration?: number, onClose?: () => void) => MessageHandle;
+    warning: (content: MessageContent, duration?: number, onClose?: () => void) => MessageHandle;
+    loading: (content: MessageContent, duration?: number, onClose?: () => void) => MessageHandle;
+    destroy: (key?: string | number) => void;
+    config: (config: MessageConfig) => void;
+    useMessage: () => [MessageApi, ReactNode];
+}

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

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

package/dist/components/message/index.js

@@ -0,0 +1,205 @@
+"use client";
+
+// src/components/message/Message.tsx
+import React, { useSyncExternalStore } 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/message.ts
+var messageHolderClass = "message-holder";
+var messageBaseClass = "message";
+var messageContentClass = "message-content";
+var messageIconClass = "message-icon";
+var messageCloseClass = "message-close";
+var messageTypeClasses = {
+  info: "message-info alert alert-info",
+  success: "message-success alert alert-success",
+  error: "message-error alert alert-error",
+  warning: "message-warning alert alert-warning",
+  loading: "message-loading alert"
+};
+var messagePlacementClasses = {
+  top: "message-top",
+  bottom: "message-bottom"
+};
+function getMessageHolderClasses({
+  placement = "top",
+  className
+}) {
+  return cn(messageHolderClass, messagePlacementClasses[placement], className);
+}
+function getMessageClasses({
+  type = "info",
+  className
+}) {
+  return cn(messageBaseClass, messageTypeClasses[type], className);
+}
+
+// src/components/message/Message.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var seed = 0;
+var globalConfig = {
+  duration: 3,
+  placement: "top"
+};
+var messages = [];
+var listeners = new Set;
+var timers = new Map;
+var snapshot = { messages, config: globalConfig };
+function emit() {
+  snapshot = { messages, config: globalConfig };
+  for (const listener of listeners) {
+    listener();
+  }
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getSnapshot() {
+  return snapshot;
+}
+function normalizeContent(type, content, duration, onClose) {
+  if (typeof content === "object" && content !== null && !React.isValidElement(content) && (("content" in content) || ("type" in content) || ("key" in content))) {
+    return { type, ...content };
+  }
+  return { type, content, duration, onClose };
+}
+function makeHandle(key) {
+  const promise = Promise.resolve();
+  promise.key = key;
+  promise.close = () => destroy(key);
+  return promise;
+}
+function clearTimer(key) {
+  const timer = timers.get(key);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(key);
+  }
+}
+function destroy(key) {
+  if (key === undefined) {
+    for (const item of messages) {
+      clearTimer(item.key);
+      item.onClose?.();
+    }
+    messages = [];
+    emit();
+    return;
+  }
+  const targetKey = String(key);
+  const target = messages.find((item) => item.key === targetKey);
+  clearTimer(targetKey);
+  messages = messages.filter((item) => item.key !== targetKey);
+  target?.onClose?.();
+  emit();
+}
+function open(config) {
+  const key = String(config.key ?? `message-${seed += 1}`);
+  const duration = config.duration ?? globalConfig.duration;
+  const next = {
+    key,
+    type: config.type ?? "info",
+    content: config.content,
+    duration,
+    className: config.className,
+    icon: config.icon,
+    onClose: config.onClose
+  };
+  clearTimer(key);
+  messages = messages.filter((item) => item.key !== key).concat(next);
+  if (globalConfig.maxCount && messages.length > globalConfig.maxCount) {
+    const overflow = messages.slice(0, messages.length - globalConfig.maxCount);
+    for (const item of overflow) {
+      clearTimer(item.key);
+      item.onClose?.();
+    }
+    messages = messages.slice(-globalConfig.maxCount);
+  }
+  if (duration > 0) {
+    timers.set(key, setTimeout(() => destroy(key), duration * 1000));
+  }
+  emit();
+  return makeHandle(key);
+}
+function typedOpen(type) {
+  return (content, duration, onClose) => open(normalizeContent(type, content, duration, onClose));
+}
+function config(nextConfig) {
+  globalConfig = { ...globalConfig, ...nextConfig };
+  emit();
+}
+function MessageHolder({ className }) {
+  const snapshot2 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return /* @__PURE__ */ jsx("div", {
+    className: getMessageHolderClasses({
+      placement: snapshot2.config.placement,
+      className
+    }),
+    children: snapshot2.messages.map((item) => /* @__PURE__ */ jsxs("div", {
+      className: getMessageClasses({
+        type: item.type,
+        className: item.className
+      }),
+      children: [
+        item.icon ? /* @__PURE__ */ jsx("span", {
+          className: messageIconClass,
+          children: item.icon
+        }) : null,
+        /* @__PURE__ */ jsx("span", {
+          className: messageContentClass,
+          children: item.content
+        }),
+        /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: messageCloseClass,
+          "aria-label": "Close message",
+          onClick: () => destroy(item.key),
+          children: "x"
+        })
+      ]
+    }, item.key))
+  });
+}
+var apiBase = {
+  open,
+  success: typedOpen("success"),
+  error: typedOpen("error"),
+  info: typedOpen("info"),
+  warning: typedOpen("warning"),
+  loading: typedOpen("loading"),
+  destroy,
+  config
+};
+var message = {
+  ...apiBase,
+  useMessage: () => [message, /* @__PURE__ */ jsx(MessageHolder, {}, "message-holder")]
+};
+export {
+  message,
+  MessageHolder
+};

package/dist/components/modal/Modal.d.ts

@@ -0,0 +1,2 @@
+import type { ModalComponent } from "./Modal.types";
+export declare const Modal: ModalComponent;

package/dist/components/modal/Modal.types.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from "react";
+export interface ModalProps extends Omit<ComponentProps<"div">, "children" | "className" | "content" | "title"> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    title?: ReactNode;
+    children?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode | null;
+    onOk?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onCancel?: (event: MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    confirmLoading?: boolean;
+    closable?: boolean;
+    maskClosable?: boolean;
+    width?: CSSProperties["width"];
+    centered?: boolean;
+    destroyOnClose?: boolean;
+    afterOpenChange?: (open: boolean) => void;
+    className?: string;
+    maskClassName?: string;
+    closeIcon?: ReactNode;
+}
+export interface ModalFuncProps {
+    title?: ReactNode;
+    content?: ReactNode;
+    onOk?: () => void;
+    onCancel?: () => void;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+}
+export interface ModalFuncHandle {
+    destroy: () => void;
+    update: (config: ModalFuncProps) => void;
+}
+export interface ModalComponent extends ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>> {
+    confirm: (config: ModalFuncProps) => ModalFuncHandle;
+    info: (config: ModalFuncProps) => ModalFuncHandle;
+    success: (config: ModalFuncProps) => ModalFuncHandle;
+    error: (config: ModalFuncProps) => ModalFuncHandle;
+    warning: (config: ModalFuncProps) => ModalFuncHandle;
+    destroyAll: () => void;
+}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalComponent, ModalFuncHandle, ModalFuncProps, ModalProps, } from "./Modal.types";

package/dist/components/modal/index.js

@@ -0,0 +1,214 @@
+"use client";
+
+// src/components/modal/Modal.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  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/modal.ts
+var modalBackdropClass = "modal-backdrop";
+var modalOpenClass = "modal-open";
+var modalBackdropCenterClass = "modal-backdrop-center";
+var modalClass = "modal";
+var modalHeaderClass = "modal-header";
+var modalTitleClass = "modal-title";
+var modalCloseClass = "modal-close";
+var modalBodyClass = "modal-body";
+var modalFooterClass = "modal-footer";
+function getModalBackdropClasses({
+  open,
+  centered,
+  className
+}) {
+  return cn(modalBackdropClass, open && modalOpenClass, centered && modalBackdropCenterClass, className);
+}
+function getModalClasses({ className }) {
+  return cn(modalClass, className);
+}
+
+// src/components/modal/Modal.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var defaultCloseIcon = "x";
+var serviceHandles = new Set;
+function createServiceHandle(config) {
+  let currentConfig = config;
+  const handle = {
+    destroy: () => {
+      serviceHandles.delete(handle);
+    },
+    update: (nextConfig) => {
+      currentConfig = { ...currentConfig, ...nextConfig };
+    }
+  };
+  serviceHandles.add(handle);
+  return handle;
+}
+function getModalStyle({
+  width,
+  style
+}) {
+  return {
+    ...style,
+    ...width !== undefined ? { width } : undefined
+  };
+}
+var ModalBase = forwardRef(({
+  open,
+  defaultOpen = false,
+  title,
+  children,
+  content,
+  footer,
+  onOk,
+  onCancel,
+  okText = "OK",
+  cancelText = "Cancel",
+  confirmLoading,
+  closable = true,
+  maskClosable = true,
+  width,
+  centered,
+  destroyOnClose,
+  afterOpenChange,
+  className,
+  maskClassName,
+  closeIcon = defaultCloseIcon,
+  style,
+  role = "dialog",
+  ...props
+}, ref) => {
+  const controlled = open !== undefined;
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const mergedOpen = controlled ? Boolean(open) : innerOpen;
+  const previousOpen = useRef(mergedOpen);
+  const showClose = closable && closeIcon !== null && closeIcon !== false;
+  const body = children ?? content;
+  useEffect(() => {
+    if (previousOpen.current === mergedOpen) {
+      return;
+    }
+    previousOpen.current = mergedOpen;
+    afterOpenChange?.(mergedOpen);
+  }, [afterOpenChange, mergedOpen]);
+  const close = useCallback((event) => {
+    if (!controlled) {
+      setInnerOpen(false);
+    }
+    onCancel?.(event);
+  }, [controlled, onCancel]);
+  const handleOk = useCallback((event) => {
+    onOk?.(event);
+  }, [onOk]);
+  const handleMaskClick = useCallback((event) => {
+    if (event.target !== event.currentTarget || !maskClosable) {
+      return;
+    }
+    close(event);
+  }, [close, maskClosable]);
+  if (!mergedOpen && destroyOnClose) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", {
+    "aria-hidden": mergedOpen ? undefined : true,
+    role: "presentation",
+    className: getModalBackdropClasses({
+      open: mergedOpen,
+      centered,
+      className: maskClassName
+    }),
+    onMouseDown: handleMaskClick,
+    children: /* @__PURE__ */ jsxs("div", {
+      ...props,
+      ref,
+      role,
+      "aria-modal": mergedOpen ? true : undefined,
+      className: getModalClasses({ className }),
+      style: getModalStyle({ width, style }),
+      children: [
+        title !== undefined || showClose ? /* @__PURE__ */ jsxs("div", {
+          className: modalHeaderClass,
+          children: [
+            title !== undefined ? /* @__PURE__ */ jsx("h2", {
+              className: modalTitleClass,
+              children: title
+            }) : null,
+            showClose ? /* @__PURE__ */ jsx("button", {
+              type: "button",
+              className: modalCloseClass,
+              "aria-label": "Close",
+              onClick: close,
+              children: closeIcon
+            }) : null
+          ]
+        }) : null,
+        /* @__PURE__ */ jsx("div", {
+          className: modalBodyClass,
+          children: body
+        }),
+        footer === null ? null : /* @__PURE__ */ jsx("div", {
+          className: modalFooterClass,
+          children: footer !== undefined ? footer : /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                onClick: close,
+                children: cancelText
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-busy": confirmLoading,
+                disabled: confirmLoading,
+                onClick: handleOk,
+                children: okText
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
+});
+ModalBase.displayName = "Modal";
+var Modal = ModalBase;
+Modal.confirm = createServiceHandle;
+Modal.info = createServiceHandle;
+Modal.success = createServiceHandle;
+Modal.error = createServiceHandle;
+Modal.warning = createServiceHandle;
+Modal.destroyAll = () => {
+  for (const handle of Array.from(serviceHandles)) {
+    handle.destroy();
+  }
+};
+export {
+  Modal
+};

package/dist/components/notification/Notification.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+import type { NotificationApi, NotificationConfig, NotificationStaticApi } from "./Notification.types";
+export declare function useNotification(config?: NotificationConfig): [NotificationApi, ReactNode];
+export declare const notification: NotificationStaticApi;

package/dist/components/notification/Notification.types.d.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode } from "react";
+export type NotificationType = "success" | "info" | "warning" | "error";
+export type NotificationPlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight";
+export type NotificationKey = string | number;
+export interface NotificationConfig {
+    placement?: NotificationPlacement;
+    duration?: number | null;
+    maxCount?: number;
+    top?: number;
+    bottom?: number;
+    closeIcon?: ReactNode;
+    getContainer?: () => HTMLElement;
+}
+export interface NotificationArgsProps {
+    key?: NotificationKey;
+    message: ReactNode;
+    description?: ReactNode;
+    btn?: ReactNode;
+    icon?: ReactNode;
+    closeIcon?: ReactNode;
+    placement?: NotificationPlacement;
+    duration?: number | null;
+    type?: NotificationType;
+    className?: string;
+    style?: CSSProperties;
+    role?: "alert" | "status";
+    onClick?: () => void;
+    onClose?: () => void;
+}
+export interface NotificationApi {
+    open: (config: NotificationArgsProps) => void;
+    success: (config: NotificationArgsProps) => void;
+    info: (config: NotificationArgsProps) => void;
+    warning: (config: NotificationArgsProps) => void;
+    error: (config: NotificationArgsProps) => void;
+    close: (key: NotificationKey) => void;
+    destroy: (key?: NotificationKey) => void;
+}
+export type NotificationUseNotification = (config?: NotificationConfig) => [NotificationApi, ReactNode];
+export interface NotificationStaticApi extends NotificationApi {
+    config: (config: NotificationConfig) => void;
+    useNotification: NotificationUseNotification;
+}

package/dist/components/notification/index.d.ts

@@ -0,0 +1,2 @@
+export { notification, useNotification } from "./Notification";
+export type { NotificationApi, NotificationArgsProps, NotificationConfig, NotificationKey, NotificationPlacement, NotificationStaticApi, NotificationType, NotificationUseNotification, } from "./Notification.types";