@duskmoon-dev/components 0.1.2

package/dist/components/transfer/index.js

@@ -0,0 +1,456 @@
+"use client";
+
+// src/components/transfer/Transfer.tsx
+import {
+  forwardRef,
+  useMemo,
+  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/transfer.ts
+var transferBaseClass = "transfer";
+var transferDisabledClass = "transfer-disabled";
+var transferListClass = "transfer-list";
+var transferListHeaderClass = "transfer-list-header";
+var transferListBodyClass = "transfer-list-body";
+var transferListItemClass = "transfer-list-item";
+var transferListItemSelectedClass = "transfer-list-item-selected";
+var transferListItemDisabledClass = "transfer-list-item-disabled";
+var transferListItemContentClass = "transfer-list-item-content";
+var transferListItemDescriptionClass = "transfer-list-item-description";
+var transferListEmptyClass = "transfer-list-empty";
+var transferSearchClass = "transfer-search";
+var transferOperationClass = "transfer-operation";
+var transferOperationButtonClass = "transfer-operation-button";
+var transferPaginationClass = "transfer-pagination";
+var transferPaginationButtonClass = "transfer-pagination-button";
+function getTransferClasses({
+  disabled,
+  oneWay,
+  className
+}) {
+  return cn(transferBaseClass, disabled && transferDisabledClass, oneWay && "transfer-one-way", className);
+}
+function getTransferListClasses({
+  direction,
+  className
+}) {
+  return cn(transferListClass, `transfer-list-${direction}`, className);
+}
+function getTransferListItemClasses({
+  selected,
+  disabled,
+  className
+}) {
+  return cn(transferListItemClass, selected && transferListItemSelectedClass, disabled && transferListItemDisabledClass, className);
+}
+
+// src/components/transfer/Transfer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultLocale = {
+  itemUnit: "item",
+  itemsUnit: "items",
+  notFoundContent: "No data",
+  searchPlaceholder: "Search"
+};
+function uniqueKeys(keys) {
+  return Array.from(new Set(keys));
+}
+function getItemKey(item, rowKey) {
+  return rowKey ? rowKey(item) : item.key;
+}
+function normalizeItems(dataSource, rowKey) {
+  return dataSource.map((item) => ({
+    ...item,
+    key: getItemKey(item, rowKey)
+  }));
+}
+function isRenderObject(value) {
+  return typeof value === "object" && value !== null && "label" in value && "value" in value;
+}
+function renderTransferItem(item, render) {
+  const rendered = render?.(item) ?? item.title ?? item.key;
+  if (isRenderObject(rendered)) {
+    return {
+      label: rendered.label,
+      value: rendered.value
+    };
+  }
+  return {
+    label: rendered,
+    value: typeof rendered === "string" ? rendered : String(item.title ?? item.description ?? item.key)
+  };
+}
+function defaultFilter(inputValue, item, direction, render, filterOption) {
+  if (!inputValue) {
+    return true;
+  }
+  if (filterOption) {
+    return filterOption(inputValue, item, direction);
+  }
+  const rendered = renderTransferItem(item, render);
+  const haystack = [
+    rendered.value,
+    typeof item.title === "string" ? item.title : "",
+    typeof item.description === "string" ? item.description : "",
+    item.key
+  ].join(" ").toLowerCase();
+  return haystack.includes(inputValue.toLowerCase());
+}
+function getPageSize(pagination) {
+  if (!pagination) {
+    return 0;
+  }
+  if (pagination === true) {
+    return 10;
+  }
+  return Math.max(1, Math.floor(pagination.pageSize ?? 10));
+}
+function getListStyle(listStyle, direction) {
+  return typeof listStyle === "function" ? listStyle({ direction }) : listStyle;
+}
+function getMovableSelectedKeys(items, selectedKeys) {
+  const movableKeySet = new Set(items.filter((item) => !item.disabled).map((item) => item.key));
+  return selectedKeys.filter((key) => movableKeySet.has(key));
+}
+function splitSelectedKeys(keys, targetKeySet) {
+  return keys.reduce((groups, key) => {
+    if (targetKeySet.has(key)) {
+      groups.target.push(key);
+    } else {
+      groups.source.push(key);
+    }
+    return groups;
+  }, { source: [], target: [] });
+}
+var TransferSearch = forwardRef(({ className, placeholder = defaultLocale.searchPlaceholder, onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", {
+  ...props,
+  ref,
+  type: "search",
+  placeholder,
+  className: [transferSearchClass, className].filter(Boolean).join(" "),
+  onChange: (event) => {
+    onChange?.(event.currentTarget.value);
+  }
+}));
+TransferSearch.displayName = "Transfer.Search";
+var TransferOperation = forwardRef(({
+  disabled,
+  oneWay,
+  operations = [">", "<"],
+  moveToRightDisabled,
+  moveToLeftDisabled,
+  onMoveToRight,
+  onMoveToLeft,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxs("div", {
+  ...props,
+  ref,
+  className: [transferOperationClass, className].filter(Boolean).join(" "),
+  children: [
+    /* @__PURE__ */ jsx("button", {
+      type: "button",
+      className: transferOperationButtonClass,
+      disabled: disabled || moveToRightDisabled,
+      "aria-label": "Move selected items to target",
+      onClick: onMoveToRight,
+      children: operations[0] ?? ">"
+    }),
+    oneWay ? null : /* @__PURE__ */ jsx("button", {
+      type: "button",
+      className: transferOperationButtonClass,
+      disabled: disabled || moveToLeftDisabled,
+      "aria-label": "Move selected items to source",
+      onClick: onMoveToLeft,
+      children: operations[1] ?? "<"
+    })
+  ]
+}));
+TransferOperation.displayName = "Transfer.Operation";
+function TransferListRoot({
+  direction,
+  title,
+  items,
+  selectedKeys = [],
+  disabled,
+  showSearch,
+  searchValue,
+  searchPlaceholder = defaultLocale.searchPlaceholder,
+  notFoundContent = defaultLocale.notFoundContent,
+  render,
+  filterOption,
+  pagination,
+  listStyle,
+  onSearch,
+  onItemSelect,
+  className,
+  ...props
+}, ref) {
+  const [internalSearchValue, setInternalSearchValue] = useState("");
+  const [page, setPage] = useState(1);
+  const mergedSearchValue = searchValue ?? internalSearchValue;
+  const selectedKeySet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const filteredItems = useMemo(() => items.filter((item) => defaultFilter(mergedSearchValue, item, direction, render, filterOption)), [direction, filterOption, items, mergedSearchValue, render]);
+  const pageSize = getPageSize(pagination);
+  const pageCount = pageSize ? Math.max(1, Math.ceil(filteredItems.length / pageSize)) : 1;
+  const currentPage = Math.min(page, pageCount);
+  const visibleItems = pageSize ? filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize) : filteredItems;
+  function handleSearch(value) {
+    setInternalSearchValue(value);
+    setPage(1);
+    onSearch?.(direction, value);
+  }
+  function toggleItem(item) {
+    if (disabled || item.disabled) {
+      return;
+    }
+    onItemSelect?.(item.key, !selectedKeySet.has(item.key));
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getTransferListClasses({ direction, className }),
+    style: getListStyle(listStyle, direction),
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: transferListHeaderClass,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            children: title
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            children: [
+              selectedKeys.length,
+              " / ",
+              items.length
+            ]
+          })
+        ]
+      }),
+      showSearch ? /* @__PURE__ */ jsx(TransferSearch, {
+        value: mergedSearchValue,
+        disabled,
+        placeholder: searchPlaceholder,
+        "aria-label": `Search ${direction} list`,
+        onChange: handleSearch
+      }) : null,
+      /* @__PURE__ */ jsx("div", {
+        className: transferListBodyClass,
+        role: "listbox",
+        children: visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+          className: transferListEmptyClass,
+          children: notFoundContent
+        }) : visibleItems.map((item) => {
+          const rendered = renderTransferItem(item, render);
+          const selected = selectedKeySet.has(item.key);
+          return /* @__PURE__ */ jsxs("label", {
+            className: getTransferListItemClasses({
+              selected,
+              disabled: disabled || item.disabled
+            }),
+            children: [
+              /* @__PURE__ */ jsx("input", {
+                type: "checkbox",
+                "aria-label": rendered.value,
+                checked: selected,
+                disabled: disabled || item.disabled,
+                onChange: () => toggleItem(item)
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: transferListItemContentClass,
+                children: [
+                  rendered.label,
+                  item.description ? /* @__PURE__ */ jsx("span", {
+                    className: transferListItemDescriptionClass,
+                    children: item.description
+                  }) : null
+                ]
+              })
+            ]
+          }, item.key);
+        })
+      }),
+      pageSize && pageCount > 1 ? /* @__PURE__ */ jsxs("div", {
+        className: transferPaginationClass,
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: transferPaginationButtonClass,
+            disabled: disabled || currentPage <= 1,
+            onClick: () => setPage((value) => Math.max(1, value - 1)),
+            children: "Prev"
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            children: [
+              currentPage,
+              " / ",
+              pageCount
+            ]
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: transferPaginationButtonClass,
+            disabled: disabled || currentPage >= pageCount,
+            onClick: () => setPage((value) => Math.min(pageCount, value + 1)),
+            children: "Next"
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+var TransferList = forwardRef(TransferListRoot);
+var TransferListComponent = TransferList;
+function TransferRoot({
+  dataSource = [],
+  targetKeys,
+  defaultTargetKeys = [],
+  selectedKeys,
+  defaultSelectedKeys = [],
+  render,
+  showSearch,
+  filterOption,
+  pagination,
+  oneWay,
+  operations,
+  titles = ["Source", "Target"],
+  disabled,
+  listStyle,
+  rowKey,
+  locale,
+  onChange,
+  onSelectChange,
+  onSearch,
+  className,
+  ...props
+}, ref) {
+  const mergedLocale = { ...defaultLocale, ...locale };
+  const [internalTargetKeys, setInternalTargetKeys] = useState(defaultTargetKeys);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
+  const mergedTargetKeys = targetKeys ?? internalTargetKeys;
+  const mergedSelectedKeys = selectedKeys ?? internalSelectedKeys;
+  const normalizedItems = useMemo(() => normalizeItems(dataSource, rowKey), [dataSource, rowKey]);
+  const targetKeySet = useMemo(() => new Set(mergedTargetKeys), [mergedTargetKeys]);
+  const sourceItems = normalizedItems.filter((item) => !targetKeySet.has(item.key));
+  const targetItems = normalizedItems.filter((item) => targetKeySet.has(item.key));
+  const selectedGroups = splitSelectedKeys(mergedSelectedKeys, targetKeySet);
+  const movableSourceKeys = getMovableSelectedKeys(sourceItems, selectedGroups.source);
+  const movableTargetKeys = getMovableSelectedKeys(targetItems, selectedGroups.target);
+  function updateSelectedKeys(nextSelectedKeys) {
+    const nextGroups = splitSelectedKeys(nextSelectedKeys, targetKeySet);
+    if (selectedKeys === undefined) {
+      setInternalSelectedKeys(nextSelectedKeys);
+    }
+    onSelectChange?.(nextGroups.source, nextGroups.target);
+  }
+  function handleItemSelect(key, selected) {
+    const nextSelectedKeys = selected ? uniqueKeys([...mergedSelectedKeys, key]) : mergedSelectedKeys.filter((selectedKey) => selectedKey !== key);
+    updateSelectedKeys(nextSelectedKeys);
+  }
+  function move(direction) {
+    if (direction === "left" && oneWay) {
+      return;
+    }
+    const moveKeys = direction === "right" ? movableSourceKeys : movableTargetKeys;
+    if (moveKeys.length === 0) {
+      return;
+    }
+    const nextTargetKeys = direction === "right" ? uniqueKeys([...mergedTargetKeys, ...moveKeys]) : mergedTargetKeys.filter((key) => !moveKeys.includes(key));
+    const nextSelectedKeys = mergedSelectedKeys.filter((key) => !moveKeys.includes(key));
+    if (targetKeys === undefined) {
+      setInternalTargetKeys(nextTargetKeys);
+    }
+    if (selectedKeys === undefined) {
+      setInternalSelectedKeys(nextSelectedKeys);
+    }
+    onChange?.(nextTargetKeys, direction, moveKeys);
+    const nextTargetKeySet = new Set(nextTargetKeys);
+    const nextGroups = splitSelectedKeys(nextSelectedKeys, nextTargetKeySet);
+    onSelectChange?.(nextGroups.source, nextGroups.target);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getTransferClasses({ disabled, oneWay, className }),
+    children: [
+      /* @__PURE__ */ jsx(TransferListComponent, {
+        direction: "left",
+        title: titles[0],
+        items: sourceItems,
+        selectedKeys: selectedGroups.source,
+        disabled,
+        showSearch,
+        searchPlaceholder: mergedLocale.searchPlaceholder,
+        notFoundContent: mergedLocale.notFoundContent,
+        render,
+        filterOption,
+        pagination,
+        listStyle,
+        onSearch,
+        onItemSelect: handleItemSelect
+      }),
+      /* @__PURE__ */ jsx(TransferOperation, {
+        disabled,
+        oneWay,
+        operations,
+        moveToRightDisabled: movableSourceKeys.length === 0,
+        moveToLeftDisabled: movableTargetKeys.length === 0,
+        onMoveToRight: () => move("right"),
+        onMoveToLeft: () => move("left")
+      }),
+      /* @__PURE__ */ jsx(TransferListComponent, {
+        direction: "right",
+        title: titles[1],
+        items: targetItems,
+        selectedKeys: selectedGroups.target,
+        disabled: disabled || oneWay,
+        showSearch,
+        searchPlaceholder: mergedLocale.searchPlaceholder,
+        notFoundContent: mergedLocale.notFoundContent,
+        render,
+        filterOption,
+        pagination,
+        listStyle,
+        onSearch,
+        onItemSelect: handleItemSelect
+      })
+    ]
+  });
+}
+var TransferRootWithRef = forwardRef(TransferRoot);
+TransferListComponent.displayName = "Transfer.List";
+var Transfer = Object.assign(TransferRootWithRef, {
+  Search: TransferSearch,
+  Operation: TransferOperation,
+  List: TransferListComponent
+});
+Transfer.displayName = "Transfer";
+export {
+  Transfer
+};

package/dist/components/tree/Tree.d.ts

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

package/dist/components/tree/Tree.types.d.ts

@@ -0,0 +1,92 @@
+import type { ComponentProps, ChangeEvent, DragEvent, ForwardRefExoticComponent, KeyboardEvent, MouseEvent, ReactElement, ReactNode, RefAttributes } from "react";
+export type TreeKey = string | number;
+export interface TreeDataNode {
+    key: TreeKey;
+    title?: ReactNode;
+    children?: TreeDataNode[];
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    checkable?: boolean;
+    selectable?: boolean;
+    icon?: ReactNode;
+    isLeaf?: boolean;
+    className?: string;
+    [name: string]: unknown;
+}
+export interface EventDataNode<T extends TreeDataNode = TreeDataNode> extends TreeDataNode {
+    key: TreeKey;
+    pos: string;
+    data: T;
+}
+export interface TreeEventInfo<T extends TreeDataNode = TreeDataNode> {
+    node: EventDataNode<T>;
+    nativeEvent: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement> | ChangeEvent<HTMLElement> | DragEvent<HTMLElement>;
+}
+export interface TreeExpandInfo<T extends TreeDataNode = TreeDataNode> extends TreeEventInfo<T> {
+    expanded: boolean;
+}
+export interface TreeSelectInfo<T extends TreeDataNode = TreeDataNode> extends TreeEventInfo<T> {
+    selected: boolean;
+    selectedNodes: T[];
+}
+export interface TreeCheckInfo<T extends TreeDataNode = TreeDataNode> extends TreeEventInfo<T> {
+    checked: boolean;
+    checkedNodes: T[];
+}
+export interface TreeDragInfo<T extends TreeDataNode = TreeDataNode> extends TreeEventInfo<T> {
+    event: React.DragEvent<HTMLElement>;
+}
+export interface TreeDropInfo<T extends TreeDataNode = TreeDataNode> extends TreeDragInfo<T> {
+    dragNode?: EventDataNode<T>;
+    dragNodesKeys: TreeKey[];
+    dropPosition: number;
+    dropToGap: boolean;
+}
+export interface TreeNodeProps extends Omit<ComponentProps<"div">, "title" | "onSelect"> {
+    title?: ReactNode;
+    eventKey?: TreeKey;
+    children?: ReactNode;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    icon?: ReactNode;
+    isLeaf?: boolean;
+}
+export interface TreeProps<T extends TreeDataNode = TreeDataNode> extends Omit<ComponentProps<"div">, "onChange" | "onSelect" | "onDragStart" | "onDragEnter" | "onDragOver" | "onDragLeave" | "onDragEnd" | "onDrop"> {
+    treeData?: T[];
+    expandedKeys?: TreeKey[];
+    defaultExpandedKeys?: TreeKey[];
+    selectedKeys?: TreeKey[];
+    defaultSelectedKeys?: TreeKey[];
+    checkedKeys?: TreeKey[];
+    defaultCheckedKeys?: TreeKey[];
+    checkable?: boolean;
+    selectable?: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    showLine?: boolean;
+    showIcon?: boolean;
+    draggable?: boolean;
+    blockNode?: boolean;
+    defaultExpandAll?: boolean;
+    loadData?: (node: EventDataNode<T>) => Promise<unknown> | unknown;
+    titleRender?: (node: T) => ReactNode;
+    onExpand?: (expandedKeys: TreeKey[], info: TreeExpandInfo<T>) => void;
+    onSelect?: (selectedKeys: TreeKey[], info: TreeSelectInfo<T>) => void;
+    onCheck?: (checkedKeys: TreeKey[], info: TreeCheckInfo<T>) => void;
+    onDragStart?: (info: TreeDragInfo<T>) => void;
+    onDragEnter?: (info: TreeDragInfo<T>) => void;
+    onDragOver?: (info: TreeDragInfo<T>) => void;
+    onDragLeave?: (info: TreeDragInfo<T>) => void;
+    onDragEnd?: (info: TreeDragInfo<T>) => void;
+    onDrop?: (info: TreeDropInfo<T>) => void;
+}
+export type DirectoryTreeProps<T extends TreeDataNode = TreeDataNode> = TreeProps<T>;
+export type TreeNodeComponent = ForwardRefExoticComponent<TreeNodeProps & RefAttributes<HTMLDivElement>>;
+export type DirectoryTreeComponent = <T extends TreeDataNode = TreeDataNode>(props: DirectoryTreeProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export type TreeComponent = (<T extends TreeDataNode = TreeDataNode>(props: TreeProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null) & {
+    TreeNode: TreeNodeComponent;
+    DirectoryTree: DirectoryTreeComponent;
+    displayName?: string;
+};

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

@@ -0,0 +1,2 @@
+export { Tree } from "./Tree";
+export type { DirectoryTreeComponent, DirectoryTreeProps, EventDataNode, TreeCheckInfo, TreeComponent, TreeDataNode, TreeDragInfo, TreeDropInfo, TreeEventInfo, TreeExpandInfo, TreeKey, TreeNodeComponent, TreeNodeProps, TreeProps, TreeSelectInfo, } from "./Tree.types";