@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/esm/src/components/overlays/dropdown/__tests__/utils.test.js

@@ -0,0 +1,223 @@
+import { describe, expect, it } from 'vitest';
+import { applyDraftToItems, arrayMoveById, hasDraftChanged, initDraftState } from '../utils';
+describe('arrayMoveById', () => {
+  it('fromId를 toId 위치로 이동시킨다', () => {
+    const order = ['a', 'b', 'c', 'd'];
+    expect(arrayMoveById(order, 'a', 'c')).toEqual(['b', 'c', 'a', 'd']);
+  });
+  it('같은 id로 이동 시 원본을 그대로 반환한다', () => {
+    const order = ['a', 'b', 'c'];
+    expect(arrayMoveById(order, 'b', 'b')).toEqual(['a', 'b', 'c']);
+  });
+  it('존재하지 않는 id가 있으면 원본을 그대로 반환한다', () => {
+    const order = ['a', 'b', 'c'];
+    expect(arrayMoveById(order, 'a', 'z')).toEqual(['a', 'b', 'c']);
+    expect(arrayMoveById(order, 'z', 'a')).toEqual(['a', 'b', 'c']);
+  });
+  it('원본 배열을 변형하지 않는다 (immutable)', () => {
+    const order = ['a', 'b', 'c'];
+    arrayMoveById(order, 'a', 'c');
+    expect(order).toEqual(['a', 'b', 'c']);
+  });
+});
+describe('initDraftState', () => {
+  it('groups의 모든 item id를 순서대로 order에 담는다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }, {
+        id: 'b',
+        text: 'B'
+      }]
+    }, {
+      items: [{
+        id: 'c',
+        text: 'C'
+      }]
+    }];
+    expect(initDraftState(groups).order).toEqual(['a', 'b', 'c']);
+  });
+  it('item.visible이 정의되지 않았으면 visibility는 true', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }]
+    }];
+    expect(initDraftState(groups).visibility).toEqual({
+      a: true
+    });
+  });
+  it('item.visible이 false면 visibility는 false', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: false
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: true
+      }]
+    }];
+    expect(initDraftState(groups).visibility).toEqual({
+      a: false,
+      b: true
+    });
+  });
+});
+describe('applyDraftToItems', () => {
+  it('draft.order 순서로 items를 재배열한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }, {
+        id: 'b',
+        text: 'B'
+      }, {
+        id: 'c',
+        text: 'C'
+      }]
+    }];
+    const draft = {
+      order: ['c', 'a', 'b'],
+      visibility: {
+        a: true,
+        b: true,
+        c: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result.map(i => i.id)).toEqual(['c', 'a', 'b']);
+  });
+  it('draft.visibility 값을 각 item.visible에 반영한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: true
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: true
+      }]
+    }];
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: false,
+        b: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result[0].visible).toBe(false);
+    expect(result[1].visible).toBe(true);
+  });
+  it('item의 다른 필드 (id, text, icon 등)는 그대로 보존한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'Alpha',
+        shortcut: 'Cmd+A'
+      }]
+    }];
+    const draft = {
+      order: ['a'],
+      visibility: {
+        a: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result[0]).toEqual({
+      id: 'a',
+      text: 'Alpha',
+      shortcut: 'Cmd+A'
+    });
+  });
+  it('item.visible이 원래 undefined였으면 결과도 visible 필드 없이 보존한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }]
+    }];
+    const draft = {
+      order: ['a'],
+      visibility: {
+        a: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result[0].visible).toBeUndefined();
+  });
+});
+describe('hasDraftChanged', () => {
+  it('original과 동일하면 false', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: true
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: false
+      }]
+    }];
+    const original = initDraftState(groups);
+    expect(hasDraftChanged(original, original)).toBe(false);
+  });
+  it('order가 다르면 true', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    const draft = {
+      order: ['b', 'a'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    expect(hasDraftChanged(original, draft)).toBe(true);
+  });
+  it('visibility가 다르면 true', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: false,
+        b: true
+      }
+    };
+    expect(hasDraftChanged(original, draft)).toBe(true);
+  });
+  it('order·visibility 둘 다 같으면 false', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: false
+      }
+    };
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: false
+      }
+    };
+    expect(hasDraftChanged(original, draft)).toBe(false);
+  });
+});

package/dist/esm/src/components/overlays/dropdown/utils.js

@@ -0,0 +1,86 @@
+/**
+ * 배열에서 fromId 위치의 요소를 toId 위치로 이동.
+ * id 중 하나라도 없으면 원본 그대로 반환. immutable.
+ */
+export function arrayMoveById(order, fromId, toId) {
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+    return order;
+  }
+  const next = [...order];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+/**
+ * fromId 요소를 toId 기준 edge('top'=직전, 'bottom'=직후)에 삽입.
+ * indicator 위치와 정확히 일치하는 reorder를 위해 사용.
+ */
+export function arrayReorderByEdge(order, fromId, toId, edge) {
+  if (fromId === toId) return order;
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1) return order;
+  const next = [...order];
+  next.splice(fromIndex, 1);
+  // 목표 인덱스 재계산 (제거로 인해 toIndex가 한 칸 당겨질 수 있음)
+  const adjustedToIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
+  const insertIndex = edge === 'bottom' ? adjustedToIndex + 1 : adjustedToIndex;
+  next.splice(insertIndex, 0, fromId);
+  return next;
+}
+/**
+ * groups를 받아 초기 draft state를 만든다.
+ * - order: 모든 그룹·아이템의 id를 순서대로 평탄화
+ * - visibility: item.visible (undefined면 true)
+ */
+export function initDraftState(groups) {
+  const order = [];
+  const visibility = {};
+  for (const group of groups) {
+    for (const item of group.items) {
+      order.push(item.id);
+      visibility[item.id] = item.visible ?? true;
+    }
+  }
+  return {
+    order,
+    visibility
+  };
+}
+/**
+ * 모든 그룹의 items를 평탄화하고, draft.order 순서로 재배열.
+ * 각 item의 visible은 원래 visible이 정의되어 있던 경우에만 draft.visibility 값으로 갱신.
+ * 그 외 필드는 props 원본 그대로 보존.
+ */
+export function applyDraftToItems(groups, draft) {
+  const itemsById = new Map();
+  for (const group of groups) {
+    for (const item of group.items) {
+      itemsById.set(item.id, item);
+    }
+  }
+  return draft.order.map(id => itemsById.get(id)).filter(item => item !== undefined).map(item => {
+    if (item.visible === undefined) return item;
+    return {
+      ...item,
+      visible: draft.visibility[item.id]
+    };
+  });
+}
+/**
+ * draft가 original과 비교해 변경되었는지 판단.
+ * order 배열 또는 visibility 객체 중 하나라도 다르면 true.
+ */
+export function hasDraftChanged(original, draft) {
+  if (original.order.length !== draft.order.length) return true;
+  for (let i = 0; i < original.order.length; i++) {
+    if (original.order[i] !== draft.order[i]) return true;
+  }
+  const keys = new Set([...Object.keys(original.visibility), ...Object.keys(draft.visibility)]);
+  for (const key of keys) {
+    if (original.visibility[key] !== draft.visibility[key]) return true;
+  }
+  return false;
+}

package/dist/esm/src/components/overlays/modal/Modal.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon';
+const Modal = _ref => {
+  let {
+    isOpen,
+    onClose,
+    children,
+    size = 'md',
+    closeOnBackdropClick = false,
+    closeOnEsc = true,
+    className,
+    zIndex,
+    ...restProps
+  } = _ref;
+  const modalRef = useRef(null);
+  const handleBackdropClick = e => {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (isOpen && closeOnEsc && e.key === 'Escape') {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, closeOnEsc, onClose]);
+  if (!isOpen) return null;
+  const modalContent = _jsx("div", {
+    className: classnames('ncua-modal-backdrop', className),
+    onClick: handleBackdropClick,
+    ref: modalRef,
+    style: zIndex ? {
+      zIndex
+    } : undefined,
+    ...restProps,
+    children: _jsx("div", {
+      className: classnames('ncua-modal', `ncua-modal--${size}`),
+      children: children
+    })
+  });
+  return /*#__PURE__*/ReactDOM.createPortal(modalContent, document.body);
+};
+Modal.Header = _ref2 => {
+  let {
+    children,
+    onClose,
+    featuredIcon,
+    title,
+    subtitle,
+    align = 'left',
+    showDivider = false,
+    hideCloseButton = false
+  } = _ref2;
+  return _jsxs(_Fragment, {
+    children: [_jsxs("header", {
+      className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
+        'ncua-modal__header--close-button': !hideCloseButton
+      }),
+      children: [featuredIcon && _jsx(FeaturedIcon, {
+        icon: featuredIcon.icon,
+        color: featuredIcon.color,
+        theme: featuredIcon.theme,
+        size: "sm"
+      }), _jsxs("div", {
+        className: "ncua-modal__title",
+        children: [_jsx("div", {
+          className: "ncua-modal__title-text",
+          children: title
+        }), subtitle && _jsx("div", {
+          className: "ncua-modal__title-subtitle",
+          children: subtitle
+        })]
+      }), children, !hideCloseButton && _jsx(ButtonCloseX, {
+        className: "ncua-modal__close-button",
+        size: "sm",
+        theme: "light",
+        onClick: onClose
+      })]
+    }), showDivider && _jsx("div", {
+      className: "ncua-modal__header-divider"
+    })]
+  });
+};
+Modal.Content = _ref3 => {
+  let {
+    children,
+    className
+  } = _ref3;
+  return _jsx("div", {
+    className: classnames('ncua-modal__content', className),
+    children: children
+  });
+};
+/**
+ * Modal.Actions - The actions area of the modal
+ *
+ * Examples:
+ *
+ * 1. Vertical layout (buttons stacked):
+ * <Modal.Actions layout="vertical" align="stretch">
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ * </Modal.Actions>
+ *
+ * 2. Horizontal layout (buttons side by side):
+ * <Modal.Actions layout="horizontal" align="stretch">
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ * </Modal.Actions>
+ *
+ * 3. Checkbox layout (checkbox on left, buttons on right):
+ * <Modal.Actions layout="checkbox" align="stretch" checkboxContent={
+ *   <>
+ *     <Checkbox text="Never show again" />
+ *     <a href="#">Settings</a>
+ *   </>
+ * }>
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ * </Modal.Actions>
+ */
+Modal.Actions = _ref4 => {
+  let {
+    children,
+    layout = 'vertical',
+    showDivider = false,
+    align = 'stretch',
+    checkboxContent,
+    className
+  } = _ref4;
+  return _jsxs(_Fragment, {
+    children: [showDivider && _jsx("div", {
+      className: "ncua-modal__actions-divider"
+    }), _jsxs("div", {
+      className: classnames('ncua-modal__actions-wrapper', className, {
+        'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
+      }),
+      children: [layout === 'checkbox' && _jsx("div", {
+        className: "ncua-modal__actions-checkbox",
+        children: _jsx("div", {
+          className: "ncua-modal__actions-checkbox-content",
+          children: checkboxContent
+        })
+      }), _jsx("div", {
+        className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`),
+        children: children
+      })]
+    })]
+  });
+};
+export { Modal };

package/dist/esm/src/components/overlays/notification/FloatingNotification.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { MEDIA_QUERY } from '../../../constant/breakpoint';
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
+import { Button } from '../../action/button';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon/FeaturedIcon';
+const iconMap = {
+  neutral: Pin02,
+  error: AlertTriangle,
+  warning: AlertCircle,
+  success: CheckCircle
+  // info는 floating에서는 지원하지 않음
+};
+const FloatingNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title,
+    supportingText,
+    color = 'neutral',
+    onClose,
+    className,
+    actions,
+    autoClose = 0,
+    ...rest
+  } = _ref;
+  const [shouldRemove, setShouldRemove] = useState(false);
+  const iconColor = color;
+  const featuredIconProps = {
+    icon: iconMap[color] || Pin02,
+    size: 'sm',
+    color: iconColor,
+    theme: 'dark-circle'
+  };
+  const isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
+    onMatched: onClose
+  });
+  // autoClose 타이머 관리
+  const timerRef = useRef(null);
+  useEffect(() => {
+    // autoClose가 0보다 크면 무조건 타이머 설정
+    if (autoClose > 0) {
+      timerRef.current = setTimeout(() => {
+        if (onClose) {
+          onClose();
+        }
+        // DOM에서 바로 제거
+        setShouldRemove(true);
+      }, autoClose);
+    }
+    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [autoClose, onClose]);
+  // DOM에서 완전히 제거
+  if (shouldRemove) {
+    return null;
+  }
+  return _jsxs("div", {
+    ref: ref,
+    className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
+    role: "alert",
+    ...rest,
+    children: [_jsx("div", {
+      className: "ncua-floating-notification__content",
+      children: _jsxs("div", {
+        className: "ncua-floating-notification__container",
+        children: [iconMap[color] && _jsx(FeaturedIcon, {
+          ...featuredIconProps,
+          size: isMobile ? 'md' : 'sm'
+        }), _jsxs("div", {
+          className: "ncua-floating-notification__text-container",
+          children: [_jsx("div", {
+            className: "ncua-floating-notification__title-wrapper",
+            children: _jsx("span", {
+              className: "ncua-floating-notification__title",
+              children: title
+            })
+          }), supportingText && _jsx("span", {
+            className: "ncua-floating-notification__supporting-text",
+            children: supportingText
+          }), actions && _jsx("div", {
+            className: "ncua-floating-notification__actions",
+            children: actions.map(action => _jsx(Button, {
+              size: "xs",
+              hierarchy: action.hierarchy || 'text',
+              label: action.label,
+              onClick: action?.onClick
+            }, `${action.label}-${action.hierarchy}`))
+          })]
+        })]
+      })
+    }), onClose && _jsx(ButtonCloseX, {
+      theme: "light",
+      className: "ncua-floating-notification__close-button",
+      size: isMobile ? 'sm' : 'xs',
+      onClick: onClose
+    })]
+  });
+});
+export { FloatingNotification };

package/dist/esm/src/components/overlays/notification/FullWidthNotification.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { COLOR } from '../../../../constant/color';
+const iconMap = {
+  neutral: MessageChatSquare,
+  error: AlertTriangle,
+  warning: AlertTriangle,
+  success: CheckCircle,
+  info: InfoCircle
+};
+const iconColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600',
+  info: 'violet600'
+};
+const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title,
+    supportingText,
+    color = 'neutral',
+    onClose,
+    className,
+    actions,
+    autoClose = 0,
+    supportTextLink,
+    onHidePermanently,
+    ...rest
+  } = _ref;
+  const [shouldRemove, setShouldRemove] = useState(false);
+  const closeIconSize = {
+    width: 20,
+    height: 20
+  };
+  // autoClose 타이머 관리
+  const timerRef = useRef(null);
+  useEffect(() => {
+    // autoClose가 0보다 크면 무조건 타이머 설정
+    if (autoClose > 0) {
+      timerRef.current = setTimeout(() => {
+        if (onClose) {
+          onClose();
+        }
+        // DOM에서 바로 제거
+        setShouldRemove(true);
+      }, autoClose);
+    }
+    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [autoClose, onClose]);
+  // DOM에서 완전히 제거
+  if (shouldRemove) {
+    return null;
+  }
+  return _jsx("div", {
+    ref: ref,
+    className: classNames('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className),
+    role: "alert",
+    ...rest,
+    children: _jsx("div", {
+      className: "ncua-full-width-notification__container",
+      children: _jsxs("div", {
+        className: "ncua-full-width-notification__content",
+        children: [_jsxs("div", {
+          className: "ncua-full-width-notification__content-wrapper",
+          children: [(() => {
+            const IconComponent = iconMap[color];
+            return _jsx(IconComponent, {
+              width: 16,
+              height: 16,
+              color: COLOR[iconColorMap[color]],
+              className: "ncua-full-width-notification__icon"
+            });
+          })(), _jsxs("div", {
+            className: "ncua-full-width-notification__text-container",
+            children: [_jsx("span", {
+              className: "ncua-full-width-notification__title",
+              children: title
+            }), !supportTextLink && supportingText && _jsx("span", {
+              className: "ncua-full-width-notification__supporting-text",
+              children: supportingText
+            }), supportTextLink && supportingText && _jsx("a", {
+              href: supportTextLink,
+              className: "ncua-full-width-notification__link",
+              children: _jsx("span", {
+                className: "ncua-full-width-notification__supporting-text",
+                children: supportingText
+              })
+            })]
+          })]
+        }), _jsxs("div", {
+          className: "ncua-full-width-notification__actions-container",
+          children: [actions && _jsx("div", {
+            className: "ncua-full-width-notification__actions",
+            children: actions.map(action => _jsx("button", {
+              onClick: action.onClick,
+              className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
+              children: action.label
+            }, `${action.label}-${action.hierarchy}`))
+          }), onHidePermanently && _jsx("button", {
+            type: "button",
+            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
+            onClick: onHidePermanently,
+            children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
+          }), onClose && _jsx("button", {
+            type: "button",
+            className: "ncua-full-width-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
+            children: _jsx(XClose, {
+              ...closeIconSize,
+              color: COLOR[iconColorMap[color]]
+            })
+          })]
+        })]
+      })
+    })
+  });
+});
+export { FullWidthNotification };