@ncds/ui-admin 0.0.2

package/dist/ui-admin/constant/color.d.ts

@@ -0,0 +1,34 @@
+export declare const COLOR: {
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    blue500: string;
+    blue600: string;
+    red500: string;
+    red600: string;
+    orange500: string;
+    orange600: string;
+    green500: string;
+    green600: string;
+    pink100: string;
+    pink600: string;
+    yellow600: string;
+    violet600: string;
+    white: string;
+    currentColor: string;
+    black: string;
+    'secondary-gray-blue-50': string;
+    'secondary-gray-blue-100': string;
+    'secondary-gray-blue-200': string;
+    'secondary-gray-blue-300': string;
+    'secondary-gray-blue-400': string;
+    'secondary-gray-blue-450': string;
+    'secondary-gray-blue-500': string;
+    'secondary-gray-blue-600': string;
+    'secondary-gray-blue-700': string;
+};
+export type ColorKeyType = keyof typeof COLOR;
+//# sourceMappingURL=color.d.ts.map

package/dist/ui-admin/constant/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../constant/color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/dist/ui-admin/constant/color.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLOR = void 0;
+var COLOR = exports.COLOR = {
+  gray200: '#D0D5DD',
+  gray300: '#98A2B3',
+  gray400: '#667085',
+  gray500: '#344054',
+  gray600: '#475467',
+  gray700: '#0C111D',
+  blue500: '#1570EF',
+  blue600: '#1849a9',
+  red500: '#ec1d31',
+  red600: '#dc0a2b',
+  orange500: '#e4501e',
+  orange600: '#b93815',
+  green500: '#099250',
+  green600: '#087443',
+  pink100: '#fce7f6',
+  pink600: '#c11574',
+  yellow600: '#c27004',
+  violet600: '#5720b7',
+  white: '#fff',
+  currentColor: 'currentColor',
+  black: '',
+  'secondary-gray-blue-50': '#f8f9fc',
+  'secondary-gray-blue-100': '#eaecf5',
+  'secondary-gray-blue-200': '#d5d9eb',
+  'secondary-gray-blue-300': '#b3b8db',
+  'secondary-gray-blue-400': '#717bbc',
+  'secondary-gray-blue-450': '#4e5ba6',
+  'secondary-gray-blue-500': '#3e4784',
+  'secondary-gray-blue-600': '#363f72',
+  'secondary-gray-blue-700': '#293056'
+};

package/dist/ui-admin/constant/size.d.ts

@@ -0,0 +1,2 @@
+export type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+//# sourceMappingURL=size.d.ts.map

package/dist/ui-admin/constant/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../constant/size.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC"}

package/dist/ui-admin/constant/size.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/ui-admin/index.d.ts

@@ -0,0 +1,14 @@
+export * from './src/components/button';
+export * from './src/components/checkbox';
+export * from './src/components/input';
+export * from './src/components/pagination';
+export * from './src/components/radio';
+export * from './src/components/select';
+export * from './src/components/shared/hintText';
+export * from './src/components/shared/label';
+export * from './src/components/shared';
+export * from './src/components/spinner';
+export * from './src/components/svg';
+export * from './src/components/tooltip';
+export * from './src/components';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui-admin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC"}

package/dist/ui-admin/index.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _button = require("./src/components/button");
+Object.keys(_button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _button[key];
+    }
+  });
+});
+var _checkbox = require("./src/components/checkbox");
+Object.keys(_checkbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _checkbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkbox[key];
+    }
+  });
+});
+var _input = require("./src/components/input");
+Object.keys(_input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _input[key];
+    }
+  });
+});
+var _pagination = require("./src/components/pagination");
+Object.keys(_pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pagination[key];
+    }
+  });
+});
+var _radio = require("./src/components/radio");
+Object.keys(_radio).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _radio[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _radio[key];
+    }
+  });
+});
+var _select = require("./src/components/select");
+Object.keys(_select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _select[key];
+    }
+  });
+});
+var _hintText = require("./src/components/shared/hintText");
+Object.keys(_hintText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hintText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hintText[key];
+    }
+  });
+});
+var _label = require("./src/components/shared/label");
+Object.keys(_label).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _label[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _label[key];
+    }
+  });
+});
+var _shared = require("./src/components/shared");
+Object.keys(_shared).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shared[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _shared[key];
+    }
+  });
+});
+var _spinner = require("./src/components/spinner");
+Object.keys(_spinner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _spinner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _spinner[key];
+    }
+  });
+});
+var _svg = require("./src/components/svg");
+Object.keys(_svg).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _svg[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _svg[key];
+    }
+  });
+});
+var _tooltip = require("./src/components/tooltip");
+Object.keys(_tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tooltip[key];
+    }
+  });
+});
+var _components = require("./src/components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _components[key];
+    }
+  });
+});

package/dist/ui-admin/src/components/button/Button.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, ReactNode } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Size } from '../../../constant/size';
+import { IconName } from '@ncds/ui-admin-icon';
+export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'link' | 'destructive';
+type IconSlotType = {
+    type: 'icon';
+    icon: IconName;
+    color?: keyof typeof COLOR;
+};
+type CustomSlotType = {
+    type: 'custom';
+    children: ReactNode;
+};
+type SideSlotType = IconSlotType | CustomSlotType;
+export type ButtonSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
+    label: string;
+    className?: string;
+    hierarchy?: ButtonTheme;
+    disabled?: boolean;
+    leadingIcon?: SideSlotType;
+    trailingIcon?: SideSlotType;
+    onlyIcon?: boolean;
+    size?: ButtonSize;
+    children?: ReactNode;
+};
+type ButtonElementProps = CommonButtonProps<Exclude<keyof HTMLElementTagNameMap, 'a'>> & {
+    as?: Exclude<keyof HTMLElementTagNameMap, 'a'>;
+    href?: never;
+};
+type AnchorElementProps = CommonButtonProps<'a'> & {
+    as: 'a';
+    href: string;
+    target?: HTMLAnchorElement['target'];
+    underline?: boolean;
+};
+export type ButtonProps = ButtonElementProps | AnchorElementProps;
+export declare const svgSize: Record<ButtonSize, number>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/ui-admin/src/components/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAkD,MAAM,OAAO,CAAC;AAClG,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,gBAAgB,GAChB,eAAe,GACf,UAAU,GACV,MAAM,GACN,aAAa,CAAC;AAElB,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;CAC5B,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,KAAK,YAAY,GAAG,YAAY,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAElE,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,qBAAqB,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAC/F,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,MAAM,qBAAqB,EAAE,GAAG,CAAC,CAAC,GAAG;IACvF,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,qBAAqB,EAAE,GAAG,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,GAAG,CAAC,GAAG;IACjD,EAAE,EAAE,GAAG,CAAC;IACR,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAElE,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK9C,CAAC;AAEF,eAAO,MAAM,MAAM,2GAuFjB,CAAC"}

package/dist/ui-admin/src/components/button/Button.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.svgSize = exports.Button = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _color = require("../../../constant/color");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var svgSize = exports.svgSize = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  // NOTE: 엘리먼트 종류에 따라 props의 타입이 달라지므로 분리
+  var _a = props.as,
+    as = _a === void 0 ? 'button' : _a,
+    _b = props.size,
+    size = _b === void 0 ? 'md' : _b,
+    children = props.children,
+    onlyIcon = props.onlyIcon,
+    disabled = props.disabled,
+    className = props.className,
+    _c = props.hierarchy,
+    hierarchy = _c === void 0 ? 'secondary-gray' : _c,
+    label = props.label,
+    leadingIcon = props.leadingIcon,
+    trailingIcon = props.trailingIcon,
+    restProps = __rest(props, ["as", "size", "children", "onlyIcon", "disabled", "className", "hierarchy", "label", "leadingIcon", "trailingIcon"]);
+  var _d = (0, _react.useState)(null),
+    queryParams = _d[0],
+    setQueryParams = _d[1];
+  // Type guard to check if props is an AnchorElementProps
+  var isAnchorProps = function (p) {
+    return p.as === 'a';
+  };
+  var handleClickLink = function (e) {
+    var isRemote = (queryParams === null || queryParams === void 0 ? void 0 : queryParams.get('isRemote')) === 'true';
+    if (isAnchorProps(props) && isRemote) {
+      e.preventDefault();
+      // INFO: 1. 사이트 리모트 페이지(디센/개센): 빌더에서 설정한 타겟(self or blank)에 따라 페이지 호출
+      // 2. 어드민 리모트 페이지: 빌더에서 설정한 타겟에 관계 없이 모두 blank
+      var isBlank = props.target === '_blank';
+      if (!isRemote && !isBlank && window.top) {
+        window.top.location.href = props.href;
+        return;
+      }
+      window.open(props.href);
+    }
+  };
+  var sideSlotRender = function (slot) {
+    if (slot.type === 'icon') {
+      return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        name: slot.icon,
+        height: svgSize[size],
+        width: svgSize[size],
+        color: slot.color ? _color.COLOR[slot.color] : undefined
+      });
+    }
+    return slot.children;
+  };
+  (0, _react.useEffect)(function () {
+    var _a;
+    setQueryParams(new URLSearchParams(((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.search) || ''));
+  }, []);
+  return /*#__PURE__*/(0, _react.createElement)(as, __assign(__assign({
+    className: (0, _classnames.default)('ncua-btn', "ncua-btn--".concat(size), {
+      'only-icon': onlyIcon,
+      'is-disable': disabled,
+      'has-underline': isAnchorProps(props) ? props.underline : false
+    }, className, hierarchy && "ncua-btn--".concat(hierarchy)),
+    onClick: isAnchorProps(props) ? handleClickLink : undefined,
+    disabled: disabled
+  }, restProps), {
+    ref: ref
+  }), (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-btn__label"
+    }, {
+      children: label
+    })), children, trailingIcon && sideSlotRender(trailingIcon)]
+  }));
+});