@wipco/sdui 0.2.0 → 0.3.0

package/dist/chunk-ZNITJ4KK.js

@@ -0,0 +1,433 @@
+import { IconButton, Badge } from './chunk-ZUCI34QY.js';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var NODE_W = 176;
+var NODE_H = 64;
+var SIBLING_GAP = 24;
+var LEVEL_GAP = 48;
+var CANVAS_PADDING = 48;
+var MIN_ZOOM = 0.35;
+var MAX_ZOOM = 1.8;
+var ZOOM_STEP = 1.2;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function buildBlock(node) {
+  const childBlocks = (node.children ?? []).map(buildBlock);
+  const childAreaWidth = childBlocks.reduce(
+    (total, block, index) => total + block.width + (index > 0 ? SIBLING_GAP : 0),
+    0
+  );
+  const width = Math.max(NODE_W, childAreaWidth);
+  const nodeX = (width - NODE_W) / 2;
+  const nodes = [{ node, x: nodeX, y: 0 }];
+  const connectors = [];
+  let height = NODE_H;
+  if (childBlocks.length > 0) {
+    const childY = NODE_H + LEVEL_GAP;
+    let cursorX = (width - childAreaWidth) / 2;
+    let maxChildHeight = 0;
+    for (const block of childBlocks) {
+      nodes.push(
+        ...block.nodes.map((item) => ({
+          ...item,
+          x: item.x + cursorX,
+          y: item.y + childY
+        }))
+      );
+      connectors.push(
+        ...block.connectors.map((item) => ({
+          fromX: item.fromX + cursorX,
+          fromY: item.fromY + childY,
+          toX: item.toX + cursorX,
+          toY: item.toY + childY
+        }))
+      );
+      connectors.push({
+        fromX: width / 2,
+        fromY: NODE_H,
+        toX: block.topAnchor.x + cursorX,
+        toY: block.topAnchor.y + childY
+      });
+      maxChildHeight = Math.max(maxChildHeight, block.height);
+      cursorX += block.width + SIBLING_GAP;
+    }
+    height = childY + maxChildHeight;
+  }
+  return {
+    width,
+    height,
+    nodes,
+    connectors,
+    topAnchor: { x: width / 2, y: 0 }
+  };
+}
+function buildLayout(root) {
+  const block = buildBlock(root);
+  return {
+    width: block.width + CANVAS_PADDING * 2,
+    height: block.height + CANVAS_PADDING * 2,
+    nodes: block.nodes.map((item) => ({
+      ...item,
+      x: item.x + CANVAS_PADDING,
+      y: item.y + CANVAS_PADDING
+    })),
+    connectors: block.connectors.map((item) => ({
+      fromX: item.fromX + CANVAS_PADDING,
+      fromY: item.fromY + CANVAS_PADDING,
+      toX: item.toX + CANVAS_PADDING,
+      toY: item.toY + CANVAS_PADDING
+    }))
+  };
+}
+function connectorPath(connector) {
+  const midY = connector.fromY + (connector.toY - connector.fromY) / 2;
+  return `M ${connector.fromX} ${connector.fromY} V ${midY} H ${connector.toX} V ${connector.toY}`;
+}
+var nodeCardStyle = (selected) => ({
+  position: "absolute",
+  width: NODE_W,
+  height: NODE_H,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  gap: 2,
+  padding: "0 var(--wp-space-3)",
+  textAlign: "left",
+  background: "var(--wp-surface-card)",
+  border: "1px solid",
+  borderColor: selected ? "var(--wp-border-brand)" : "var(--wp-border-subtle)",
+  borderRadius: "var(--wp-radius-md)",
+  boxShadow: selected ? "var(--wp-ring-selected)" : "var(--wp-shadow-xs)",
+  cursor: "pointer",
+  transition: "box-shadow var(--wp-duration-fast), border-color var(--wp-duration-fast)"
+});
+function OrgChart({
+  root,
+  onNodeClick,
+  selectedId,
+  height = 520
+}) {
+  const viewportRef = useRef(null);
+  const dragRef = useRef(null);
+  const [view, setView] = useState({ scale: 1, x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [internalSelected, setInternalSelected] = useState(
+    void 0
+  );
+  const effectiveSelected = selectedId ?? internalSelected;
+  const layout = useMemo(() => buildLayout(root), [root]);
+  const centerView = useCallback(
+    (scale = 1) => {
+      const rect = viewportRef.current?.getBoundingClientRect();
+      const viewportWidth = rect?.width ?? 0;
+      setView({
+        scale,
+        x: Math.max(0, (viewportWidth - layout.width * scale) / 2),
+        y: 0
+      });
+    },
+    [layout.width]
+  );
+  useEffect(() => {
+    centerView(1);
+  }, [centerView]);
+  useEffect(() => {
+    const handleChange = () => {
+      setIsFullscreen(document.fullscreenElement === viewportRef.current);
+    };
+    document.addEventListener("fullscreenchange", handleChange);
+    return () => document.removeEventListener("fullscreenchange", handleChange);
+  }, []);
+  const zoomAt = useCallback(
+    (nextScale, focal) => {
+      setView((current) => {
+        const scale = clamp(nextScale, MIN_ZOOM, MAX_ZOOM);
+        return {
+          scale,
+          x: focal.x - (focal.x - current.x) / current.scale * scale,
+          y: focal.y - (focal.y - current.y) / current.scale * scale
+        };
+      });
+    },
+    []
+  );
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const handleWheel = (event) => {
+      event.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const focal = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      };
+      setView((current) => {
+        const scale = clamp(
+          current.scale * (event.deltaY > 0 ? 0.9 : 1.1),
+          MIN_ZOOM,
+          MAX_ZOOM
+        );
+        return {
+          scale,
+          x: focal.x - (focal.x - current.x) / current.scale * scale,
+          y: focal.y - (focal.y - current.y) / current.scale * scale
+        };
+      });
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, []);
+  const viewportCenter = useCallback(() => {
+    const rect = viewportRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return { x: rect.width / 2, y: rect.height / 2 };
+  }, []);
+  const handlePointerDown = (event) => {
+    if (event.target.closest("[data-orgchart-stop]")) return;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: view.x,
+      originY: view.y
+    };
+    setDragging(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const handlePointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    setView((current) => ({
+      ...current,
+      x: drag.originX + event.clientX - drag.startX,
+      y: drag.originY + event.clientY - drag.startY
+    }));
+  };
+  const handlePointerUp = (event) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const toggleFullscreen = async () => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    try {
+      if (document.fullscreenElement === viewport) {
+        await document.exitFullscreen();
+      } else {
+        await viewport.requestFullscreen();
+      }
+    } catch {
+    }
+  };
+  const handleNodeClick = (node) => {
+    if (selectedId === void 0) setInternalSelected(node.id);
+    onNodeClick?.(node);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: viewportRef,
+      role: "application",
+      "aria-label": "\uC870\uC9C1\uB3C4 \uCE94\uBC84\uC2A4",
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      style: {
+        position: "relative",
+        height: isFullscreen ? "100vh" : height,
+        overflow: "hidden",
+        background: "var(--wp-surface-sunken)",
+        border: "1px solid var(--wp-border-subtle)",
+        borderRadius: "var(--wp-radius-md)",
+        cursor: dragging ? "grabbing" : "grab",
+        touchAction: "none",
+        overscrollBehavior: "contain",
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-orgchart-stop": true,
+            style: {
+              position: "absolute",
+              top: "var(--wp-space-3)",
+              right: "var(--wp-space-3)",
+              zIndex: 2,
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--wp-space-1)",
+              padding: "var(--wp-space-1)",
+              background: "var(--wp-surface-card)",
+              border: "1px solid var(--wp-border-subtle)",
+              borderRadius: "var(--wp-radius-md)",
+              boxShadow: "var(--wp-shadow-sm)",
+              cursor: "default"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: "zoom-out",
+                  label: "\uCD95\uC18C",
+                  size: "sm",
+                  onClick: () => zoomAt(view.scale / ZOOM_STEP, viewportCenter()),
+                  disabled: view.scale <= MIN_ZOOM
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "wp-caption",
+                  style: {
+                    minWidth: 40,
+                    textAlign: "center",
+                    fontVariantNumeric: "tabular-nums",
+                    color: "var(--wp-text-muted)"
+                  },
+                  children: [
+                    Math.round(view.scale * 100),
+                    "%"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: "zoom-in",
+                  label: "\uD655\uB300",
+                  size: "sm",
+                  onClick: () => zoomAt(view.scale * ZOOM_STEP, viewportCenter()),
+                  disabled: view.scale >= MAX_ZOOM
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: "rotate-ccw",
+                  label: "\uBCF4\uAE30 \uCD08\uAE30\uD654",
+                  size: "sm",
+                  onClick: () => centerView(1)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: isFullscreen ? "minimize" : "maximize",
+                  label: isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uD574\uC81C" : "\uC804\uCCB4\uD654\uBA74",
+                  size: "sm",
+                  onClick: () => void toggleFullscreen()
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: layout.width,
+              height: layout.height,
+              transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+              transformOrigin: "0 0"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: layout.width,
+                  height: layout.height,
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    pointerEvents: "none"
+                  },
+                  children: layout.connectors.map((connector, index) => /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: connectorPath(connector),
+                      fill: "none",
+                      stroke: "var(--wp-border-strong)",
+                      strokeWidth: 1.5
+                    },
+                    index
+                  ))
+                }
+              ),
+              layout.nodes.map(({ node, x, y }) => {
+                const selected = node.id === effectiveSelected;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-orgchart-stop": true,
+                    onClick: () => handleNodeClick(node),
+                    "aria-pressed": selected,
+                    style: { ...nodeCardStyle(selected), left: x, top: y },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "var(--wp-space-2)",
+                            minWidth: 0
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "wp-body-sm",
+                                style: {
+                                  fontWeight: 600,
+                                  color: "var(--wp-text-strong)",
+                                  whiteSpace: "nowrap",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis"
+                                },
+                                children: node.label
+                              }
+                            ),
+                            node.badge && /* @__PURE__ */ jsx(Badge, { tone: selected ? "brand" : "neutral", children: node.badge })
+                          ]
+                        }
+                      ),
+                      node.sub && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "wp-caption",
+                          style: {
+                            color: "var(--wp-text-muted)",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis"
+                          },
+                          children: node.sub
+                        }
+                      )
+                    ]
+                  },
+                  node.id
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { OrgChart };

package/dist/chunk-ZQR3ULVH.js

@@ -0,0 +1,193 @@
+import { TreeView } from './chunk-SEBPBUZR.js';
+import { Field, Dialog, Icon, Button, Input } from './chunk-ZUCI34QY.js';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var PICKER_CSS = `
+.erp-treepicker__none{transition:background var(--wp-duration-fast) var(--wp-ease-out);}
+.erp-treepicker__none:hover{background:var(--wp-surface-hover);}
+.erp-treepicker__none:focus-visible{outline:none;box-shadow:var(--wp-ring-focus);}
+.erp-treepicker__none[aria-current='true'],
+.erp-treepicker__none[aria-current='true']:hover{background:var(--wp-surface-selected);}
+`;
+function findNode(nodes, id) {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    if (node.children) {
+      const found = findNode(node.children, id);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
+function TreePicker({
+  nodes,
+  value,
+  valueLabel,
+  onChange,
+  label,
+  placeholder = "\uC120\uD0DD \uC548 \uD568",
+  excludeIds,
+  allowEmpty = true,
+  disabled = false
+}) {
+  const [open, setOpen] = useState(false);
+  const [pendingId, setPendingId] = useState(null);
+  const [innerValue, setInnerValue] = useState(null);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : innerValue;
+  const currentNode = current != null ? findNode(nodes, current) : void 0;
+  const displayLabel = current == null ? "" : currentNode?.label ?? valueLabel ?? current;
+  const openDialog = () => {
+    if (disabled) return;
+    setPendingId(current ?? null);
+    setOpen(true);
+  };
+  const closeDialog = () => setOpen(false);
+  const commit = () => {
+    const node = pendingId != null ? findNode(nodes, pendingId) : void 0;
+    if (!isControlled) setInnerValue(pendingId);
+    onChange?.(pendingId, node);
+    setOpen(false);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  const commitDisabled = !allowEmpty && pendingId == null;
+  const noneSelected = pendingId == null;
+  const trigger = /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "var(--wp-space-2)", minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        readOnly: true,
+        value: displayLabel,
+        placeholder,
+        icon: "git-branch",
+        disabled,
+        "aria-label": label ?? "\uD56D\uBAA9 \uC120\uD0DD",
+        style: { cursor: disabled ? void 0 : "pointer" },
+        onClick: openDialog,
+        onKeyDown: (event) => {
+          if (!disabled && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            openDialog();
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: openDialog,
+        disabled,
+        title: disabled ? "\uC9C0\uAE08\uC740 \uC120\uD0DD\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" : void 0,
+        style: { flexShrink: 0 },
+        children: "\uC120\uD0DD"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "erp-treepicker", style: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx("style", { children: PICKER_CSS }),
+    label ? /* @__PURE__ */ jsx(Field, { label, children: trigger }) : trigger,
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)" },
+        onClick: (event) => {
+          if (event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
+            closeDialog();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            title: label ?? "\uD56D\uBAA9 \uC120\uD0DD",
+            subtitle: "\uD2B8\uB9AC\uC5D0\uC11C \uD56D\uBAA9\uC744 \uC120\uD0DD\uD55C \uB4A4 [\uC120\uD0DD]\uC744 \uB204\uB974\uC138\uC694.",
+            icon: "git-branch",
+            size: "md",
+            onClose: closeDialog,
+            footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: closeDialog, children: "\uCDE8\uC18C" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  onClick: commit,
+                  disabled: commitDisabled,
+                  title: commitDisabled ? "\uC120\uD0DD\uD560 \uD56D\uBAA9\uC744 \uC9C0\uC815\uD558\uC138\uC694" : void 0,
+                  children: "\uC120\uD0DD"
+                }
+              )
+            ] }),
+            children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--wp-space-2)", minWidth: 0 }, children: [
+              allowEmpty ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "radio",
+                  "aria-checked": noneSelected,
+                  "aria-current": noneSelected ? "true" : void 0,
+                  tabIndex: 0,
+                  className: "erp-treepicker__none",
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "var(--wp-space-2)",
+                    minHeight: "var(--wp-row-h-dense)",
+                    padding: "0 var(--wp-space-2)",
+                    borderRadius: "var(--wp-radius-sm)",
+                    cursor: "pointer",
+                    userSelect: "none"
+                  },
+                  onClick: () => setPendingId(null),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      setPendingId(null);
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: noneSelected ? "circle-dot" : "circle-x",
+                        size: 16,
+                        style: { flexShrink: 0, color: noneSelected ? "var(--wp-text-brand)" : "var(--wp-text-muted)" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "wp-body-sm",
+                        style: { color: noneSelected ? "var(--wp-text-strong)" : "var(--wp-text-muted)" },
+                        children: "(\uC5C6\uC74C)"
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                TreeView,
+                {
+                  nodes,
+                  selectedId: pendingId,
+                  onSelect: (id) => setPendingId(id),
+                  searchable: true,
+                  excludeIds,
+                  maxHeight: "320px"
+                }
+              )
+            ] })
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+
+export { TreePicker };