@duskmoon-dev/components 0.1.2

package/dist/components/notification/index.js

@@ -0,0 +1,420 @@
+"use client";
+
+// src/components/notification/Notification.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { createRoot } from "react-dom/client";
+
+// ../../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/notification.ts
+var notificationRootClass = "notification-root";
+var notificationHolderClass = "notification-holder";
+var notificationNoticeClass = "notification-notice";
+var notificationNoticeOpenClass = "notification-notice-open";
+var notificationIconClass = "notification-icon";
+var notificationContentClass = "notification-content";
+var notificationMessageClass = "notification-message";
+var notificationDescriptionClass = "notification-description";
+var notificationActionsClass = "notification-actions";
+var notificationCloseClass = "notification-close";
+var notificationPlacementClasses = {
+  top: "notification-top",
+  topLeft: "notification-top-left",
+  topRight: "notification-top-right",
+  bottom: "notification-bottom",
+  bottomLeft: "notification-bottom-left",
+  bottomRight: "notification-bottom-right"
+};
+var notificationTypeClasses = {
+  info: "toast-info alert-info",
+  success: "toast-success alert-success",
+  error: "toast-error alert-error",
+  warning: "toast-warning alert-warning"
+};
+function getNotificationHolderClasses({
+  placement,
+  className
+}) {
+  return cn(notificationHolderClass, notificationPlacementClasses[placement], className);
+}
+function getNotificationNoticeClasses({
+  type = "info",
+  open = true,
+  className
+}) {
+  return cn("toast", "alert", notificationNoticeClass, notificationTypeClasses[type], open && "toast-show", open && notificationNoticeOpenClass, className);
+}
+
+// src/components/notification/Notification.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var defaultConfig = {
+  placement: "topRight",
+  duration: 4.5
+};
+var defaultIcons = {
+  info: "i",
+  success: "✓",
+  warning: "!",
+  error: "!"
+};
+var globalConfig = { ...defaultConfig };
+var globalNotices = [];
+var globalCounter = 0;
+var globalContainer = null;
+var globalRoot = null;
+var globalTimers = new Map;
+var listeners = new Set;
+function getKey(key) {
+  if (key !== undefined) {
+    return key;
+  }
+  globalCounter += 1;
+  return `notification-${globalCounter}`;
+}
+function getDuration(config, holderConfig) {
+  return config.duration ?? holderConfig.duration ?? defaultConfig.duration;
+}
+function getPlacement(config, holderConfig) {
+  return config.placement ?? holderConfig.placement ?? defaultConfig.placement;
+}
+function applyMaxCount(notices, maxCount) {
+  if (!maxCount || notices.length <= maxCount) {
+    return notices;
+  }
+  return notices.slice(notices.length - maxCount);
+}
+function groupByPlacement(notices) {
+  return notices.reduce((groups, notice) => {
+    groups[notice.placement].push(notice);
+    return groups;
+  }, {
+    top: [],
+    topLeft: [],
+    topRight: [],
+    bottom: [],
+    bottomLeft: [],
+    bottomRight: []
+  });
+}
+function clearTimer(key) {
+  const timer = globalTimers.get(key);
+  if (timer) {
+    clearTimeout(timer);
+    globalTimers.delete(key);
+  }
+}
+function emitGlobal() {
+  for (const listener of listeners) {
+    listener(globalNotices, globalConfig);
+  }
+  renderGlobalHolder();
+}
+function ensureGlobalRoot() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (globalRoot && globalContainer?.isConnected) {
+    return;
+  }
+  const container = globalConfig.getContainer?.() ?? document.body;
+  globalContainer = document.createElement("div");
+  globalContainer.className = notificationRootClass;
+  container.appendChild(globalContainer);
+  globalRoot = createRoot(globalContainer);
+}
+function renderGlobalHolder() {
+  if (globalNotices.length === 0 && globalRoot && globalContainer) {
+    globalRoot.render(null);
+    return;
+  }
+  ensureGlobalRoot();
+  globalRoot?.render(/* @__PURE__ */ jsx(NotificationHolder, {
+    notices: globalNotices,
+    config: globalConfig,
+    onClose: (key) => globalApi.close(key)
+  }));
+}
+function closeGlobal(key) {
+  const notice = globalNotices.find((item) => item.key === key);
+  clearTimer(key);
+  globalNotices = globalNotices.filter((item) => item.key !== key);
+  notice?.onClose?.();
+  emitGlobal();
+}
+function destroyGlobal(key) {
+  if (key !== undefined) {
+    closeGlobal(key);
+    return;
+  }
+  for (const notice of globalNotices) {
+    clearTimer(notice.key);
+    notice.onClose?.();
+  }
+  globalNotices = [];
+  emitGlobal();
+}
+function openGlobal(config) {
+  const key = getKey(config.key);
+  const notice = {
+    ...config,
+    key,
+    placement: getPlacement(config, globalConfig),
+    type: config.type ?? "info"
+  };
+  clearTimer(key);
+  globalNotices = applyMaxCount([...globalNotices.filter((item) => item.key !== key), notice], globalConfig.maxCount);
+  const duration = getDuration(config, globalConfig);
+  if (duration && duration > 0) {
+    globalTimers.set(key, setTimeout(() => closeGlobal(key), duration * 1000));
+  }
+  emitGlobal();
+}
+function withType(type, config) {
+  openGlobal({ ...config, type });
+}
+var globalApi = {
+  open: openGlobal,
+  success: (config) => withType("success", config),
+  info: (config) => withType("info", config),
+  warning: (config) => withType("warning", config),
+  error: (config) => withType("error", config),
+  close: closeGlobal,
+  destroy: destroyGlobal,
+  config: (config) => {
+    globalConfig = { ...globalConfig, ...config };
+    emitGlobal();
+  },
+  useNotification
+};
+function NotificationHolder({
+  notices,
+  config,
+  onClose
+}) {
+  const groups = groupByPlacement(notices);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: Object.entries(groups).map(([placement, group]) => {
+      if (group.length === 0) {
+        return null;
+      }
+      const offsetStyle = placement.startsWith("bottom") && config.bottom !== undefined ? { bottom: config.bottom } : config.top !== undefined ? { top: config.top } : undefined;
+      return /* @__PURE__ */ jsx("div", {
+        className: getNotificationHolderClasses({
+          placement
+        }),
+        style: offsetStyle,
+        children: group.map((notice) => /* @__PURE__ */ jsx(NotificationNotice, {
+          notice,
+          fallbackCloseIcon: config.closeIcon,
+          onClose
+        }, notice.key))
+      }, placement);
+    })
+  });
+}
+function NotificationNotice({
+  notice,
+  fallbackCloseIcon,
+  onClose
+}) {
+  const closeIcon = notice.closeIcon ?? fallbackCloseIcon ?? "x";
+  const icon = notice.icon ?? defaultIcons[notice.type];
+  const clickableProps = notice.onClick ? {
+    tabIndex: 0,
+    onClick: notice.onClick,
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        notice.onClick?.();
+      }
+    }
+  } : undefined;
+  return /* @__PURE__ */ jsxs("div", {
+    role: notice.role ?? "alert",
+    className: getNotificationNoticeClasses({
+      type: notice.type,
+      className: notice.className
+    }),
+    style: notice.style,
+    ...clickableProps,
+    children: [
+      icon ? /* @__PURE__ */ jsx("span", {
+        className: notificationIconClass,
+        children: icon
+      }) : null,
+      /* @__PURE__ */ jsxs("span", {
+        className: notificationContentClass,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: notificationMessageClass,
+            children: notice.message
+          }),
+          notice.description ? /* @__PURE__ */ jsx("span", {
+            className: notificationDescriptionClass,
+            children: notice.description
+          }) : null,
+          notice.btn ? /* @__PURE__ */ jsx("span", {
+            className: notificationActionsClass,
+            children: notice.btn
+          }) : null
+        ]
+      }),
+      closeIcon === null ? null : /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: notificationCloseClass,
+        "aria-label": "Close notification",
+        onClick: (event) => {
+          event.stopPropagation();
+          onClose(notice.key);
+        },
+        children: closeIcon
+      })
+    ]
+  });
+}
+function createScopedApi({
+  holderConfig,
+  setNotices,
+  timerMap
+}) {
+  function clearScopedTimer(key) {
+    const timer = timerMap.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      timerMap.delete(key);
+    }
+  }
+  function close(key) {
+    clearScopedTimer(key);
+    setNotices((current) => {
+      const notice = current.find((item) => item.key === key);
+      notice?.onClose?.();
+      return current.filter((item) => item.key !== key);
+    });
+  }
+  function open(config) {
+    const key = getKey(config.key);
+    const notice = {
+      ...config,
+      key,
+      placement: getPlacement(config, holderConfig),
+      type: config.type ?? "info"
+    };
+    clearScopedTimer(key);
+    setNotices((current) => applyMaxCount([...current.filter((item) => item.key !== key), notice], holderConfig.maxCount));
+    const duration = getDuration(config, holderConfig);
+    if (duration && duration > 0) {
+      timerMap.set(key, setTimeout(() => close(key), duration * 1000));
+    }
+  }
+  function typed(type, config) {
+    open({ ...config, type });
+  }
+  return {
+    open,
+    success: (config) => typed("success", config),
+    info: (config) => typed("info", config),
+    warning: (config) => typed("warning", config),
+    error: (config) => typed("error", config),
+    close,
+    destroy: (key) => {
+      if (key !== undefined) {
+        close(key);
+        return;
+      }
+      for (const timerKey of timerMap.keys()) {
+        clearScopedTimer(timerKey);
+      }
+      setNotices((current) => {
+        for (const notice of current) {
+          notice.onClose?.();
+        }
+        return [];
+      });
+    }
+  };
+}
+function useNotification(config = {}) {
+  const holderConfig = useMemo(() => ({
+    ...defaultConfig,
+    bottom: config.bottom,
+    closeIcon: config.closeIcon,
+    duration: config.duration ?? defaultConfig.duration,
+    getContainer: config.getContainer,
+    maxCount: config.maxCount,
+    placement: config.placement ?? defaultConfig.placement,
+    top: config.top
+  }), [
+    config.bottom,
+    config.closeIcon,
+    config.duration,
+    config.getContainer,
+    config.maxCount,
+    config.placement,
+    config.top
+  ]);
+  const [notices, setNotices] = useState([]);
+  const [timerMap] = useState(() => new Map);
+  const close = useCallback((key) => {
+    const timer = timerMap.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      timerMap.delete(key);
+    }
+    setNotices((current) => {
+      const notice = current.find((item) => item.key === key);
+      notice?.onClose?.();
+      return current.filter((item) => item.key !== key);
+    });
+  }, [timerMap]);
+  const api = useMemo(() => createScopedApi({ holderConfig, setNotices, timerMap }), [holderConfig, timerMap]);
+  useEffect(() => {
+    return () => {
+      for (const timer of timerMap.values()) {
+        clearTimeout(timer);
+      }
+      timerMap.clear();
+    };
+  }, [timerMap]);
+  return [
+    api,
+    /* @__PURE__ */ jsx(NotificationHolder, {
+      notices,
+      config: holderConfig,
+      onClose: close
+    }, "notification-holder")
+  ];
+}
+var notification = globalApi;
+export {
+  useNotification,
+  notification
+};

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PaginationProps } from "./Pagination.types";
+export declare const Pagination: React.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/pagination/Pagination.types.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react";
+export type PaginationSize = "sm" | "md" | "lg";
+export type PaginationShowTotal = (total: number, range: [number, number]) => ReactNode;
+export interface PaginationProps extends Omit<ComponentProps<"nav">, "children" | "onChange"> {
+    current?: number;
+    defaultCurrent?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    total?: number;
+    onChange?: (page: number, pageSize: number) => void;
+    disabled?: boolean;
+    simple?: boolean;
+    showSizeChanger?: boolean;
+    showQuickJumper?: boolean;
+    showTotal?: PaginationShowTotal;
+    size?: PaginationSize;
+}

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

@@ -0,0 +1,2 @@
+export { Pagination } from "./Pagination";
+export type { PaginationProps, PaginationShowTotal, PaginationSize, } from "./Pagination.types";