@ncds/ui-admin 1.8.2 → 1.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -66,14 +66,19 @@
   },
   "private": false,
   "dependencies": {
-    "@ncds/ui-admin-icon": "0.1.6",
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
+    "@ncds/ui-admin-icon": "0.1.9",
     "classnames": "2.5.1",
+    "dompurify": "3.4.1",
     "flatpickr": "4.6.13",
-    "lodash": "4.17.23",
-    "lodash-es": "4.17.23",
+    "lodash": "4.18.1",
+    "lodash-es": "4.18.1",
     "moment": "2.30.1",
     "react-flatpickr": "4.0.11",
-    "swiper": "11.2.10"
+    "swiper": "12.1.3"
   },
   "devDependencies": {
     "@babel/cli": "7.28.6",
@@ -95,7 +100,7 @@
     "css-loader": "6.11.0",
     "css-minimizer-webpack-plugin": "7.0.4",
     "dotenv-webpack": "8.1.1",
-    "esbuild-loader": "3.2.0",
+    "esbuild-loader": "4.4.3",
     "eslint": "7.32.0",
     "eslint-config-react-app": "7.0.1",
     "file-loader": "6.2.0",
@@ -105,7 +110,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.72.0",
-    "react-scripts": "5.0.1",
     "sass": "1.98.0",
     "sass-loader": "13.3.3",
     "style-loader": "3.3.4",
@@ -116,6 +120,6 @@
     "vitest": "^4.1.4",
     "webpack": "5.105.4",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.2"
+    "webpack-dev-server": "5.2.3"
   }
 }

package/dist/cjs/src/components/dropdown/Dropdown.js

@@ -1,164 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dropdown = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _react = require("react");
-const Dropdown = _ref => {
-  let {
-    trigger,
-    align = 'left',
-    header,
-    groups,
-    className,
-    opened = false,
-    closeOnClickItem = true,
-    closeOnClickOutside = true
-  } = _ref;
-  const [isOpen, setIsOpen] = (0, _react.useState)(opened);
-  const dropdownRef = (0, _react.useRef)(null);
-  const toggleDropdown = () => {
-    setIsOpen(!isOpen);
-  };
-  const handleClickOutside = event => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  };
-  const handleClickItem = item => {
-    if (!item.disabled && item.onClick) {
-      item.onClick();
-      if (closeOnClickItem) {
-        setIsOpen(false);
-      }
-    }
-  };
-  (0, _react.useEffect)(() => {
-    if (closeOnClickOutside) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [closeOnClickOutside]);
-  const renderTrigger = () => {
-    switch (trigger.type) {
-      case 'custom':
-        return (0, _jsxRuntime.jsx)("button", {
-          className: "ncua-dropdown__trigger",
-          onClick: toggleDropdown,
-          children: trigger.children
-        });
-      case 'icon':
-        {
-          const TriggerIcon = trigger.icon ?? _uiAdminIcon.DotsVertical;
-          return (0, _jsxRuntime.jsx)("button", {
-            className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
-            onClick: toggleDropdown,
-            children: (0, _jsxRuntime.jsx)(TriggerIcon, {})
-          });
-        }
-      case 'avatar':
-        return (0, _jsxRuntime.jsx)("button", {
-          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
-          onClick: toggleDropdown,
-          children: (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-dropdown__avatar",
-            children: (0, _jsxRuntime.jsx)("img", {
-              src: trigger.avatar,
-              alt: "avatar"
-            })
-          })
-        });
-      case 'button':
-        return (0, _jsxRuntime.jsx)("button", {
-          className: "ncua-dropdown__trigger ncua-dropdown__trigger--button",
-          onClick: toggleDropdown,
-          children: trigger.text
-        });
-      default:
-        return null;
-    }
-  };
-  const renderHeader = () => {
-    if (!header) return null;
-    if (header.type === 'avatar' && header.avatar) {
-      return (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-dropdown__header",
-        children: (0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-dropdown__header-avatar-group",
-          children: [(0, _jsxRuntime.jsx)("div", {
-            className: "ncua-dropdown__avatar",
-            children: (0, _jsxRuntime.jsx)("img", {
-              src: header.avatar,
-              alt: "avatar"
-            })
-          }), (0, _jsxRuntime.jsxs)("div", {
-            className: "ncua-dropdown__header-text",
-            children: [header.title && (0, _jsxRuntime.jsx)("div", {
-              className: "ncua-dropdown__header-title",
-              children: header.title
-            }), header.subtitle && (0, _jsxRuntime.jsx)("div", {
-              className: "ncua-dropdown__header-subtitle",
-              children: header.subtitle
-            })]
-          })]
-        })
-      });
-    }
-    if (header.type === 'text' && header.title) {
-      return (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-dropdown__header",
-        children: (0, _jsxRuntime.jsx)("div", {
-          className: "ncua-dropdown__header-title",
-          children: header.title
-        })
-      });
-    }
-    return null;
-  };
-  const renderItem = item => {
-    const ItemIcon = item.icon;
-    const itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : '', item.className].filter(Boolean).join(' ');
-    return (0, _jsxRuntime.jsxs)("div", {
-      className: itemClasses,
-      children: [(0, _jsxRuntime.jsx)("button", {
-        className: "ncua-dropdown__item-clickable-layer",
-        onClick: () => handleClickItem(item)
-      }), (0, _jsxRuntime.jsxs)("div", {
-        className: "ncua-dropdown__item-content",
-        children: [(0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-dropdown__item-text-group",
-          children: [ItemIcon && (0, _jsxRuntime.jsx)(ItemIcon, {
-            className: "ncua-dropdown__item-icon"
-          }), (0, _jsxRuntime.jsx)("span", {
-            className: "ncua-dropdown__item-text",
-            children: item.text
-          })]
-        }), item.shortcut && (0, _jsxRuntime.jsx)("span", {
-          className: "ncua-dropdown__item-shortcut",
-          children: item.shortcut
-        })]
-      })]
-    }, item.id);
-  };
-  const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: dropdownClasses,
-    ref: dropdownRef,
-    children: [renderTrigger(), isOpen && (0, _jsxRuntime.jsxs)("div", {
-      className: "ncua-dropdown__menu",
-      children: [renderHeader(), (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-dropdown__menu-items",
-        children: groups.map(group => (0, _jsxRuntime.jsx)("div", {
-          className: "ncua-dropdown__group",
-          children: group.items.map(renderItem)
-        }, group.items[0]?.id))
-      })]
-    })]
-  });
-};
-exports.Dropdown = Dropdown;

package/dist/esm/src/components/dropdown/Dropdown.js

@@ -1,157 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DotsVertical } from '@ncds/ui-admin-icon';
-import { useEffect, useRef, useState } from 'react';
-export const Dropdown = _ref => {
-  let {
-    trigger,
-    align = 'left',
-    header,
-    groups,
-    className,
-    opened = false,
-    closeOnClickItem = true,
-    closeOnClickOutside = true
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(opened);
-  const dropdownRef = useRef(null);
-  const toggleDropdown = () => {
-    setIsOpen(!isOpen);
-  };
-  const handleClickOutside = event => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  };
-  const handleClickItem = item => {
-    if (!item.disabled && item.onClick) {
-      item.onClick();
-      if (closeOnClickItem) {
-        setIsOpen(false);
-      }
-    }
-  };
-  useEffect(() => {
-    if (closeOnClickOutside) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [closeOnClickOutside]);
-  const renderTrigger = () => {
-    switch (trigger.type) {
-      case 'custom':
-        return _jsx("button", {
-          className: "ncua-dropdown__trigger",
-          onClick: toggleDropdown,
-          children: trigger.children
-        });
-      case 'icon':
-        {
-          const TriggerIcon = trigger.icon ?? DotsVertical;
-          return _jsx("button", {
-            className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
-            onClick: toggleDropdown,
-            children: _jsx(TriggerIcon, {})
-          });
-        }
-      case 'avatar':
-        return _jsx("button", {
-          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
-          onClick: toggleDropdown,
-          children: _jsx("div", {
-            className: "ncua-dropdown__avatar",
-            children: _jsx("img", {
-              src: trigger.avatar,
-              alt: "avatar"
-            })
-          })
-        });
-      case 'button':
-        return _jsx("button", {
-          className: "ncua-dropdown__trigger ncua-dropdown__trigger--button",
-          onClick: toggleDropdown,
-          children: trigger.text
-        });
-      default:
-        return null;
-    }
-  };
-  const renderHeader = () => {
-    if (!header) return null;
-    if (header.type === 'avatar' && header.avatar) {
-      return _jsx("div", {
-        className: "ncua-dropdown__header",
-        children: _jsxs("div", {
-          className: "ncua-dropdown__header-avatar-group",
-          children: [_jsx("div", {
-            className: "ncua-dropdown__avatar",
-            children: _jsx("img", {
-              src: header.avatar,
-              alt: "avatar"
-            })
-          }), _jsxs("div", {
-            className: "ncua-dropdown__header-text",
-            children: [header.title && _jsx("div", {
-              className: "ncua-dropdown__header-title",
-              children: header.title
-            }), header.subtitle && _jsx("div", {
-              className: "ncua-dropdown__header-subtitle",
-              children: header.subtitle
-            })]
-          })]
-        })
-      });
-    }
-    if (header.type === 'text' && header.title) {
-      return _jsx("div", {
-        className: "ncua-dropdown__header",
-        children: _jsx("div", {
-          className: "ncua-dropdown__header-title",
-          children: header.title
-        })
-      });
-    }
-    return null;
-  };
-  const renderItem = item => {
-    const ItemIcon = item.icon;
-    const itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : '', item.className].filter(Boolean).join(' ');
-    return _jsxs("div", {
-      className: itemClasses,
-      children: [_jsx("button", {
-        className: "ncua-dropdown__item-clickable-layer",
-        onClick: () => handleClickItem(item)
-      }), _jsxs("div", {
-        className: "ncua-dropdown__item-content",
-        children: [_jsxs("div", {
-          className: "ncua-dropdown__item-text-group",
-          children: [ItemIcon && _jsx(ItemIcon, {
-            className: "ncua-dropdown__item-icon"
-          }), _jsx("span", {
-            className: "ncua-dropdown__item-text",
-            children: item.text
-          })]
-        }), item.shortcut && _jsx("span", {
-          className: "ncua-dropdown__item-shortcut",
-          children: item.shortcut
-        })]
-      })]
-    }, item.id);
-  };
-  const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
-  return _jsxs("div", {
-    className: dropdownClasses,
-    ref: dropdownRef,
-    children: [renderTrigger(), isOpen && _jsxs("div", {
-      className: "ncua-dropdown__menu",
-      children: [renderHeader(), _jsx("div", {
-        className: "ncua-dropdown__menu-items",
-        children: groups.map(group => _jsx("div", {
-          className: "ncua-dropdown__group",
-          children: group.items.map(renderItem)
-        }, group.items[0]?.id))
-      })]
-    })]
-  });
-};

package/dist/temp/src/components/dropdown/Dropdown.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DotsVertical } from '@ncds/ui-admin-icon';
-import { useEffect, useRef, useState } from 'react';
-export const Dropdown = ({ trigger, align = 'left', header, groups, className, opened = false, closeOnClickItem = true, closeOnClickOutside = true, }) => {
-    const [isOpen, setIsOpen] = useState(opened);
-    const dropdownRef = useRef(null);
-    const toggleDropdown = () => {
-        setIsOpen(!isOpen);
-    };
-    const handleClickOutside = (event) => {
-        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-            setIsOpen(false);
-        }
-    };
-    const handleClickItem = (item) => {
-        if (!item.disabled && item.onClick) {
-            item.onClick();
-            if (closeOnClickItem) {
-                setIsOpen(false);
-            }
-        }
-    };
-    useEffect(() => {
-        if (closeOnClickOutside) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }
-    }, [closeOnClickOutside]);
-    const renderTrigger = () => {
-        switch (trigger.type) {
-            case 'custom':
-                return (_jsx("button", { className: "ncua-dropdown__trigger", onClick: toggleDropdown, children: trigger.children }));
-            case 'icon': {
-                const TriggerIcon = trigger.icon ?? DotsVertical;
-                return (_jsx("button", { className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon", onClick: toggleDropdown, children: _jsx(TriggerIcon, {}) }));
-            }
-            case 'avatar':
-                return (_jsx("button", { className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar", onClick: toggleDropdown, children: _jsx("div", { className: "ncua-dropdown__avatar", children: _jsx("img", { src: trigger.avatar, alt: "avatar" }) }) }));
-            case 'button':
-                return (_jsx("button", { className: "ncua-dropdown__trigger ncua-dropdown__trigger--button", onClick: toggleDropdown, children: trigger.text }));
-            default:
-                return null;
-        }
-    };
-    const renderHeader = () => {
-        if (!header)
-            return null;
-        if (header.type === 'avatar' && header.avatar) {
-            return (_jsx("div", { className: "ncua-dropdown__header", children: _jsxs("div", { className: "ncua-dropdown__header-avatar-group", children: [_jsx("div", { className: "ncua-dropdown__avatar", children: _jsx("img", { src: header.avatar, alt: "avatar" }) }), _jsxs("div", { className: "ncua-dropdown__header-text", children: [header.title && _jsx("div", { className: "ncua-dropdown__header-title", children: header.title }), header.subtitle && _jsx("div", { className: "ncua-dropdown__header-subtitle", children: header.subtitle })] })] }) }));
-        }
-        if (header.type === 'text' && header.title) {
-            return (_jsx("div", { className: "ncua-dropdown__header", children: _jsx("div", { className: "ncua-dropdown__header-title", children: header.title }) }));
-        }
-        return null;
-    };
-    const renderItem = (item) => {
-        const ItemIcon = item.icon;
-        const itemClasses = [
-            'ncua-dropdown__item',
-            item.disabled ? 'is-disabled' : '',
-            item.type === 'danger' ? 'is-danger' : '',
-            item.className,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return (_jsxs("div", { className: itemClasses, children: [_jsx("button", { className: "ncua-dropdown__item-clickable-layer", onClick: () => handleClickItem(item) }), _jsxs("div", { className: "ncua-dropdown__item-content", children: [_jsxs("div", { className: "ncua-dropdown__item-text-group", children: [ItemIcon && _jsx(ItemIcon, { className: "ncua-dropdown__item-icon" }), _jsx("span", { className: "ncua-dropdown__item-text", children: item.text })] }), item.shortcut && _jsx("span", { className: "ncua-dropdown__item-shortcut", children: item.shortcut })] })] }, item.id));
-    };
-    const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : '']
-        .filter(Boolean)
-        .join(' ');
-    return (_jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [renderTrigger(), isOpen && (_jsxs("div", { className: "ncua-dropdown__menu", children: [renderHeader(), _jsx("div", { className: "ncua-dropdown__menu-items", children: groups.map((group) => (_jsx("div", { className: "ncua-dropdown__group", children: group.items.map(renderItem) }, group.items[0]?.id))) })] }))] }));
-};