@wishket/design-system 2.2.1 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/README.md +58 -0
  2. package/dist/Components/Base/Layouts/Box/Box.d.ts +5 -5
  3. package/dist/Components/Base/Layouts/Box/Box.js +3 -2
  4. package/dist/Components/Base/Typography/Typography.d.ts +6 -1
  5. package/dist/Components/Base/Typography/Typography.js +4 -3
  6. package/dist/Components/Base/Typography/Typography.types.d.ts +4 -5
  7. package/dist/Components/DataDisplays/ImageLabel/ImageLabel.js +1 -1
  8. package/dist/Components/Feedbacks/Tooltip/Tooltip.js +3 -3
  9. package/dist/Components/Inputs/CheckboxCard/CheckboxCard.parts.js +1 -1
  10. package/dist/Components/Inputs/IconButtonDropdown/IconButtonDropdown.js +1 -1
  11. package/dist/Components/Inputs/RadioCard/RadioCard.parts.js +1 -1
  12. package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +2 -2
  13. package/dist/Components/Navigations/GNBList/GNBList.d.ts +1 -1
  14. package/dist/Components/Navigations/GNBList/GNBList.parts.d.ts +3 -2
  15. package/dist/Components/Navigations/GNBList/GNBList.parts.js +10 -10
  16. package/dist/Components/Navigations/GNBList/GNBList.types.d.ts +8 -3
  17. package/dist/Components/Navigations/Menu/Menu.types.d.ts +53 -0
  18. package/dist/Components/Navigations/Menu/MenuBase.d.ts +21 -0
  19. package/dist/Components/Navigations/Menu/MenuBase.js +3 -0
  20. package/dist/Components/Navigations/Menu/MenuButton.d.ts +40 -0
  21. package/dist/Components/Navigations/Menu/MenuButton.js +39 -0
  22. package/dist/Components/Navigations/Menu/MenuLink.d.ts +43 -0
  23. package/dist/Components/Navigations/Menu/MenuLink.js +42 -0
  24. package/dist/Components/Navigations/Menu/index.d.ts +3 -1
  25. package/dist/Components/Navigations/TextLink/TextLink.d.ts +13 -35
  26. package/dist/Components/Navigations/TextLink/TextLink.js +11 -34
  27. package/dist/Components/Utils/BackDrop/BackDrop.js +1 -1
  28. package/dist/Components/Utils/BottomModalContainer/BottomModalContainer.js +2 -2
  29. package/dist/Components/Utils/FullModalContainer/FullModalContainer.js +1 -1
  30. package/dist/Components/Utils/Modal/Modal.js +2 -2
  31. package/dist/Components/Utils/ModalContainer/ModalContainer.js +2 -2
  32. package/dist/Components/Wrappers/WithBadge/WithBadge.js +1 -1
  33. package/dist/Components/Wrappers/WithSnackBar/WithSnackBar.js +1 -1
  34. package/dist/cjs/Components/Base/Layouts/Box/Box.js +3 -2
  35. package/dist/cjs/Components/Base/Typography/Typography.js +4 -3
  36. package/dist/cjs/Components/DataDisplays/ImageLabel/ImageLabel.js +1 -1
  37. package/dist/cjs/Components/Feedbacks/Tooltip/Tooltip.js +3 -3
  38. package/dist/cjs/Components/Inputs/CheckboxCard/CheckboxCard.parts.js +1 -1
  39. package/dist/cjs/Components/Inputs/IconButtonDropdown/IconButtonDropdown.js +1 -1
  40. package/dist/cjs/Components/Inputs/RadioCard/RadioCard.parts.js +1 -1
  41. package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +2 -2
  42. package/dist/cjs/Components/Navigations/GNBList/GNBList.parts.js +11 -11
  43. package/dist/cjs/Components/Navigations/Menu/MenuBase.js +3 -0
  44. package/dist/cjs/Components/Navigations/Menu/MenuButton.js +39 -0
  45. package/dist/cjs/Components/Navigations/Menu/MenuLink.js +42 -0
  46. package/dist/cjs/Components/Navigations/TextLink/TextLink.js +11 -34
  47. package/dist/cjs/Components/Utils/BackDrop/BackDrop.js +1 -1
  48. package/dist/cjs/Components/Utils/BottomModalContainer/BottomModalContainer.js +3 -3
  49. package/dist/cjs/Components/Utils/FullModalContainer/FullModalContainer.js +1 -1
  50. package/dist/cjs/Components/Utils/Modal/Modal.js +2 -2
  51. package/dist/cjs/Components/Utils/ModalContainer/ModalContainer.js +2 -2
  52. package/dist/cjs/Components/Wrappers/WithBadge/WithBadge.js +1 -1
  53. package/dist/cjs/Components/Wrappers/WithSnackBar/WithSnackBar.js +1 -1
  54. package/dist/cjs/index.js +1 -1
  55. package/dist/index.js +1 -1
  56. package/package.json +7 -5
  57. package/scripts/codemods/README.md +178 -0
  58. package/scripts/codemods/__tests__/__fixtures__/add-as-link/already-has-as.input.tsx +6 -0
  59. package/scripts/codemods/__tests__/__fixtures__/add-as-link/already-has-as.output.tsx +6 -0
  60. package/scripts/codemods/__tests__/__fixtures__/add-as-link/basic.input.tsx +9 -0
  61. package/scripts/codemods/__tests__/__fixtures__/add-as-link/basic.output.tsx +10 -0
  62. package/scripts/codemods/__tests__/__fixtures__/add-as-link/existing-next-link-import.input.tsx +9 -0
  63. package/scripts/codemods/__tests__/__fixtures__/add-as-link/existing-next-link-import.output.tsx +9 -0
  64. package/scripts/codemods/__tests__/__fixtures__/add-as-link/menu-button-fallback.input.tsx +5 -0
  65. package/scripts/codemods/__tests__/__fixtures__/add-as-link/menu-button-fallback.output.tsx +5 -0
  66. package/scripts/codemods/__tests__/__fixtures__/add-as-link/unrelated-import.input.tsx +3 -0
  67. package/scripts/codemods/__tests__/__fixtures__/add-as-link/unrelated-import.output.tsx +3 -0
  68. package/scripts/codemods/__tests__/__fixtures__/menu-split/basic.input.tsx +8 -0
  69. package/scripts/codemods/__tests__/__fixtures__/menu-split/basic.output.tsx +8 -0
  70. package/scripts/codemods/__tests__/__fixtures__/menu-split/conflict.input.tsx +5 -0
  71. package/scripts/codemods/__tests__/__fixtures__/menu-split/conflict.output.tsx +6 -0
  72. package/scripts/codemods/__tests__/__fixtures__/menu-split/href-only.input.tsx +3 -0
  73. package/scripts/codemods/__tests__/__fixtures__/menu-split/href-only.output.tsx +3 -0
  74. package/scripts/codemods/__tests__/__fixtures__/menu-split/onclick-only.input.tsx +3 -0
  75. package/scripts/codemods/__tests__/__fixtures__/menu-split/onclick-only.output.tsx +3 -0
  76. package/scripts/codemods/__tests__/__fixtures__/menu-split/spread-props.input.tsx +3 -0
  77. package/scripts/codemods/__tests__/__fixtures__/menu-split/spread-props.output.tsx +4 -0
  78. package/scripts/codemods/__tests__/run-fixtures.cjs +100 -0
  79. package/scripts/codemods/add-as-link.ts +110 -0
  80. package/scripts/codemods/menu-split.ts +252 -0
  81. package/dist/Components/Navigations/Menu/Menu.d.ts +0 -81
  82. package/dist/Components/Navigations/Menu/Menu.js +0 -62
  83. package/dist/cjs/Components/Navigations/Menu/Menu.js +0 -2
@@ -1,61 +1,38 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("next/link"),r=require("tailwind-merge"),n=require("../../Base/TextWithIcons/TextWithIcons.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function o(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("../../Base/TextWithIcons/TextWithIcons.js");function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function c(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}
2
2
  /**
3
3
  * 텍스트 기반의 링크 컴포넌트입니다.
4
4
  *
5
5
  * @description
6
- * TextButton과 동일한 스타일을 가지지만 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
7
- * Next.js의 Link 컴포넌트를 기반으로 하여 클라이언트 사이드 라우팅을 지원합니다.
6
+ * TextButton과 동일한 스타일을 가지지만 기본적으로 `<a>` 태그 기반으로 페이지 네비게이션을 담당합니다.
7
+ * `as` prop으로 Next.js의 `Link`나 React Router의 `Link` 임의의 컴포넌트를 주입할 수 있습니다.
8
8
  *
9
9
  * @component
10
10
  * @param {Object} props - TextLink 컴포넌트의 props
11
11
  * @param {string} props.href - 링크 대상 URL (필수)
12
12
  * @param {string} props.text - 표시할 텍스트 (필수)
13
+ * @param {ElementType} [props.as='a'] - 렌더링할 요소/컴포넌트
13
14
  * @param {SystemIconName} [props.leadingIcon] - 텍스트 앞에 표시할 아이콘
14
15
  * @param {SystemIconName} [props.trailingIcon] - 텍스트 뒤에 표시할 아이콘
15
16
  * @param {boolean} [props.isTextSmall=false] - 작은 텍스트 크기 사용 여부
16
17
  * @param {boolean} [props.isGray=false] - 텍스트 색상을 회색으로 사용 여부
17
18
  * @param {boolean} [props.isUnderline=false] - 텍스트에 밑줄 스타일 적용 여부
18
- * @param {ComponentProps<typeof Link>} props - Next.js Link 컴포넌트의 모든 props 지원
19
19
  *
20
20
  * @example
21
- * // 기본 사용법
21
+ * // 기본 사용법 (일반 <a>)
22
22
  * <TextLink href="/about" text="소개 페이지로 이동" />
23
23
  *
24
24
  * @example
25
- * // 아이콘과 함께 사용
26
- * <TextLink
27
- * href="/detail"
28
- * text="자세히 보기"
29
- * trailingIcon="medium_arrow_right"
30
- * />
25
+ * // Next.js Link와 함께 사용
26
+ * import Link from 'next/link';
27
+ * <TextLink as={Link} href="/about" text="소개" />
31
28
  *
32
29
  * @example
33
- * // 외부 링크로 사용
30
+ * // 외부 링크
34
31
  * <TextLink
35
32
  * href="https://example.com"
36
33
  * text="외부 사이트 방문"
37
34
  * target="_blank"
38
35
  * rel="noopener noreferrer"
39
36
  * />
40
- *
41
- * @example
42
- * // 작은 텍스트 크기로 사용
43
- * <TextLink
44
- * href="/help"
45
- * text="도움말"
46
- * isTextSmall
47
- * leadingIcon="small_help"
48
- * />
49
- *
50
- * @example
51
- * // 프로그래매틱 네비게이션과 함께
52
- * <TextLink
53
- * href="/dashboard"
54
- * text="대시보드"
55
- * onClick={(e) => {
56
- * // 추가 로직 실행 가능
57
- * console.log('대시보드로 이동');
58
- * }}
59
- * />
60
- */(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}exports.TextLink=l=>{var{href:s,text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O=!1,isGray:b=!1,isUnderline:y=!1,className:p}=l,g=o(l,["href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline","className"]);/*#__PURE__*/
61
- return e.jsx(t,c(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({href:s,className:r.twMerge("flex min-h-6 w-fit items-center justify-center",O?"gap-x-0.5":"gap-x-1",p)},g),{children:/*#__PURE__*/e.jsx(n.TextWithIcons,{text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O,isUnderline:y,isGray:b})}))};
37
+ */(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}exports.TextLink=o=>{var{as:l="a",href:s,text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O=!1,isGray:b=!1,isUnderline:y=!1,className:p}=o,g=c(o,["as","href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline","className"]);/*#__PURE__*/
38
+ return e.jsx(l,i(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(t){n(e,t,r[t])}))}return e}({href:s,className:t.twMerge("flex min-h-6 w-fit items-center justify-center",O?"gap-x-0.5":"gap-x-1",p)},g),{children:/*#__PURE__*/e.jsx(r.TextWithIcons,{text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O,isUnderline:y,isGray:b})}))};
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("@wishket/yogokit"),t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.BackDrop=({isBlack:a,preventScroll:i,onClick:l})=>(s.usePreventScroll(i),/*#__PURE__*/e.jsx(t.Box,{"data-testid":"design-system--backdrop",onClick:l,className:r.twMerge("fixed top-0 left-0 z-30 h-dvh w-dvw",a?"bg-black/50":"bg-transparent")}));
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=require("@wishket/yogokit");require("react");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.BackDrop=({isBlack:a,preventScroll:i,onClick:l})=>(t.usePreventScroll(i),/*#__PURE__*/e.jsx(s.Box,{"data-testid":"design-system--backdrop",onClick:l,className:r.twMerge("fixed top-0 left-0 z-30 h-dvh w-dvw",a?"bg-black/50":"bg-transparent")}));
@@ -1,3 +1,3 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var r=require("./useBottomModalContainer.js");exports.BottomModalContainer=({children:o,onClose:a,isFixedHeight:n=!0,className:i})=>{const{containerRef:l,currentTranslate:d}=r.useBottomModalContainer({onClose:a});/*#__PURE__*/
2
- return e.jsxs(s.Box,{ref:l,style:{transform:`translateY(${d}px)`},className:t.twJoin("bg-w-white z-30 w-full rounded-t-3xl",n?"h-[60dvh]":"h-fit",i),"data-testid":"design-system--bottom-modal-container",children:[
3
- /*#__PURE__*/e.jsx(s.Box,{className:"flex items-center justify-center pt-2 pb-5","data-testid":"design-system--bottom-modal-container-header",id:"bottom-modal-header",children:/*#__PURE__*/e.jsx(s.Box,{className:"bg-w-gray-200 h-1 w-8 rounded-full"})}),o]})};
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("react");var r=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("./useBottomModalContainer.js");exports.BottomModalContainer=({children:a,onClose:o,isFixedHeight:i=!0,className:n})=>{const{containerRef:l,currentTranslate:d}=s.useBottomModalContainer({onClose:o});/*#__PURE__*/
2
+ return e.jsxs(r.Box,{ref:l,style:{transform:`translateY(${d}px)`},className:t.twJoin("bg-w-white z-30 w-full rounded-t-3xl",i?"h-[60dvh]":"h-fit",n),"data-testid":"design-system--bottom-modal-container",children:[
3
+ /*#__PURE__*/e.jsx(r.Box,{className:"flex items-center justify-center pt-2 pb-5","data-testid":"design-system--bottom-modal-container-header",id:"bottom-modal-header",children:/*#__PURE__*/e.jsx(r.Box,{className:"bg-w-gray-200 h-1 w-8 rounded-full"})}),a]})};
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.FullModalContainer=({children:a,className:l})=>/*#__PURE__*/e.jsx(s.Box,{"data-testid":"design-system--full-modal-container",className:r.twMerge("bg-w-white h-dvh w-dvw overflow-auto",l),children:a});
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("react");var a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.FullModalContainer=({children:s,className:l})=>/*#__PURE__*/e.jsx(a.Box,{"data-testid":"design-system--full-modal-container",className:r.twMerge("bg-w-white h-dvh w-dvw overflow-auto",l),children:s});
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),o=require("tailwind-merge"),l=require("../BackDropLiftContainer/BackDropLiftContainer.js"),r=require("../BottomModalContainer/BottomModalContainer.js"),a=require("../FullModalContainer/FullModalContainer.js"),t=require("../ModalContainer/ModalContainer.js"),i=require("../Portal/Portal.js"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.Modal=({isOpen:n,rootId:d,variant:u="default",size:c="md",overflow:B="auto",isBackgroundBlack:C=!0,isFixedHeight:m,isPreventScroll:x=!0,className:j,onClose:f,needCleanup:M=!0,children:h})=>{const p="bottom"===u,q="full"===u,g="default"===u,F=M&&!d;/*#__PURE__*/
2
- return e.jsx(i.Portal,{rootId:d,needCleanup:F,children:/*#__PURE__*/e.jsxs(l.BackDropLiftContainer,{isOpen:n,onClose:f,testId:"design-system--modal",isBackgroundBlack:C,isPreventScroll:x,isBottomSheet:p,isFullSize:"full"===c,children:[g&&/*#__PURE__*/e.jsx(s.Box,{"data-testid":"design-system--modal-container--box",className:o.twMerge("full"===c&&"w-full px-5",j),children:/*#__PURE__*/e.jsx(t.ModalContainer,{size:c,overflow:B,children:h})}),q&&/*#__PURE__*/e.jsx(a.FullModalContainer,{className:j,children:h}),p&&f&&/*#__PURE__*/e.jsx(r.BottomModalContainer,{onClose:f,isFixedHeight:m,className:j,children:h})]})})};
1
+ "use strict";var e=require("react/jsx-runtime"),o=require("tailwind-merge"),r=require("../BackDropLiftContainer/BackDropLiftContainer.js"),l=require("../BottomModalContainer/BottomModalContainer.js"),a=require("../FullModalContainer/FullModalContainer.js"),t=require("../ModalContainer/ModalContainer.js"),i=require("../Portal/Portal.js");require("react");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.Modal=({isOpen:n,rootId:d,variant:u="default",size:c="md",overflow:B="auto",isBackgroundBlack:C=!0,isFixedHeight:m,isPreventScroll:x=!0,className:j,onClose:f,needCleanup:M=!0,children:h})=>{const q="bottom"===u,p="full"===u,g="default"===u,F=M&&!d;/*#__PURE__*/
2
+ return e.jsx(i.Portal,{rootId:d,needCleanup:F,children:/*#__PURE__*/e.jsxs(r.BackDropLiftContainer,{isOpen:n,onClose:f,testId:"design-system--modal",isBackgroundBlack:C,isPreventScroll:x,isBottomSheet:q,isFullSize:"full"===c,children:[g&&/*#__PURE__*/e.jsx(s.Box,{"data-testid":"design-system--modal-container--box",className:o.twMerge("full"===c&&"w-full px-5",j),children:/*#__PURE__*/e.jsx(t.ModalContainer,{size:c,overflow:B,children:h})}),p&&/*#__PURE__*/e.jsx(a.FullModalContainer,{className:j,children:h}),q&&f&&/*#__PURE__*/e.jsx(l.BottomModalContainer,{onClose:f,isFixedHeight:m,className:j,children:h})]})})};
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),l=require("tailwind-merge"),o=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.ModalContainer=({size:r="md",overflow:s="auto",children:i})=>/*#__PURE__*/e.jsx(o.Box,{"data-testid":"design-system--modal-container",className:l.twJoin("bg-w-white shadow-modal h-fit max-w-[calc(100vw-40px)] rounded-3xl",// 아직 정해지지 않은 내부 레이아웃
2
- "flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]",full:"w-full"}[r],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[s]),children:i});
1
+ "use strict";var e=require("react/jsx-runtime"),l=require("tailwind-merge");require("react");var r=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.ModalContainer=({size:o="md",overflow:i="auto",children:s})=>/*#__PURE__*/e.jsx(r.Box,{"data-testid":"design-system--modal-container",className:l.twJoin("bg-w-white shadow-modal h-fit max-w-[calc(100vw-40px)] rounded-3xl",// 아직 정해지지 않은 내부 레이아웃
2
+ "flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]",full:"w-full"}[o],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[i]),children:s});
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),a=require("tailwind-merge"),r=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js");var t=require("../../DataDisplays/CountBadge/CountBadge.js");require("react"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var s=require("../../DataDisplays/NewBadge/NewBadge.js");require("../../DataDisplays/Accordion/Accordion.js");exports.WithBadge=({text:i,children:o,className:l,variant:n="primary",showZero:u=!1})=>/*#__PURE__*/e.jsxs(r.Box,{className:a.twMerge("relative w-fit",l),"data-testid":"with-badge",children:[o,"new"===n?/*#__PURE__*/e.jsx(s.NewBadge,{className:"absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 transform"}):/*#__PURE__*/e.jsx(t.CountBadge,{text:i,variant:n,showZero:u,className:"absolute top-px right-px translate-x-1/2 -translate-y-1/2 transform"})]});
1
+ "use strict";var e=require("react/jsx-runtime"),a=require("tailwind-merge");require("react");var r=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js");var t=require("../../DataDisplays/CountBadge/CountBadge.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var s=require("../../DataDisplays/NewBadge/NewBadge.js");require("../../DataDisplays/Accordion/Accordion.js");exports.WithBadge=({text:i,children:o,className:l,variant:n="primary",showZero:u=!1})=>/*#__PURE__*/e.jsxs(r.Box,{className:a.twMerge("relative w-fit",l),"data-testid":"with-badge",children:[o,"new"===n?/*#__PURE__*/e.jsx(s.NewBadge,{className:"absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 transform"}):/*#__PURE__*/e.jsx(t.CountBadge,{text:i,variant:n,showZero:u,className:"absolute top-px right-px translate-x-1/2 -translate-y-1/2 transform"})]});
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),a=require("tailwind-merge"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("react"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js");var r=require("../../Feedbacks/SnackBar/SnackBar.js");require("../../Inputs/Button/Button.js"),require("@wishket/yogokit"),require("react-dom"),require("../../Feedbacks/Tooltip/Tooltip.js"),require("../../Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js");exports.WithSnackBar=({children:t,isOpen:i,message:o,type:l,onClose:n})=>/*#__PURE__*/e.jsxs(s.Box,{"data-testid":"design-system-with-message-bar",children:[
1
+ "use strict";var e=require("react/jsx-runtime"),a=require("tailwind-merge");require("react");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js");var r=require("../../Feedbacks/SnackBar/SnackBar.js");require("../../Inputs/Button/Button.js"),require("@wishket/yogokit"),require("react-dom"),require("../../Feedbacks/Tooltip/Tooltip.js"),require("../../Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js");exports.WithSnackBar=({children:t,isOpen:i,message:o,type:l,onClose:n})=>/*#__PURE__*/e.jsxs(s.Box,{"data-testid":"design-system-with-message-bar",children:[
2
2
  /*#__PURE__*/e.jsx(s.Box,{className:"w-full overflow-y-hidden",children:/*#__PURE__*/e.jsx(s.Box,{className:a.twJoin("w-full transform overflow-y-hidden transition-all duration-300 ease-linear",i?"max-h-full translate-y-0":"max-h-0 -translate-y-full"),"data-testid":"design-system-with-message-bar--container",children:/*#__PURE__*/e.jsx(s.Box,{className:"pt-8",children:/*#__PURE__*/e.jsx(r.SnackBar,{message:o,type:l,onClose:n})})})}),t]});
package/dist/cjs/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("./Components/DataDisplays/Avatar/Avatar.js"),o=require("./Components/DataDisplays/CountBadge/CountBadge.js"),t=require("./Components/DataDisplays/ImageLabel/ImageLabel.js"),s=require("./Components/DataDisplays/Label/Label.js"),r=require("./Components/DataDisplays/NewBadge/NewBadge.js"),n=require("./Components/DataDisplays/ProductIcon/ProductIcon.js"),i=require("./Components/DataDisplays/ServiceLogo/ServiceLogo.js"),a=require("./Components/DataDisplays/SkillLabel/SkillLabel.js"),p=require("./Components/DataDisplays/SystemIcon/SystemIcon.js"),u=require("./Components/DataDisplays/SystemIcon/SystemIcon.constants.js"),l=require("./Components/DataDisplays/Divider/Divider.js"),C=require("./Components/DataDisplays/ProgressIndicator/ProgressIndicator.js"),m=require("./Components/DataDisplays/Li/Li.js"),x=require("./Components/DataDisplays/Accordion/Accordion.js"),d=require("./Components/Feedbacks/MessageBox/MessageBox.js"),c=require("./Components/Feedbacks/SnackBar/SnackBar.js"),I=require("./Components/Feedbacks/SnackBar/SnackBar.types.js"),B=require("./Components/Feedbacks/MessageBar/MessageBar.js"),j=require("./Components/Feedbacks/Dialog/Dialog.js"),q=require("./Components/Feedbacks/DialogBox/DialogBox.js"),L=require("./Components/Feedbacks/LoadingIndicator/LoadingIndicator.js"),g=require("./Components/Feedbacks/Tooltip/Tooltip.js"),T=require("./Components/Feedbacks/Tooltip/RichTooltip/RichTooltip.js"),D=require("./Components/Feedbacks/Tooltip/PlainTooltip/PlainTooltip.js"),S=require("./Components/Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js"),b=require("./Components/Inputs/Autocomplete/Autocomplete.js"),h=require("./Components/Inputs/Button/Button.js"),k=require("./Components/Inputs/Calendar/Calendar.js"),y=require("./Components/Inputs/Checkbox/Checkbox.js"),F=require("./Components/Inputs/CheckboxCard/CheckboxCard.js"),M=require("./Components/Inputs/CheckboxList/CheckboxList.js"),w=require("./Components/Inputs/CheckboxListItem/CheckboxListItem.js"),R=require("./Components/Inputs/ChoiceChip/ChoiceChip.js"),N=require("./Components/Inputs/IconButton/IconButton.js"),P=require("./Components/Inputs/InputChip/InputChip.js"),A=require("./Components/Inputs/RangeSlider/RangeSlider.js"),v=require("./Components/Inputs/Radio/Radio.js"),G=require("./Components/Inputs/RadioCard/RadioCard.js"),f=require("./Components/Inputs/RadioList/RadioList.js"),U=require("./Components/Inputs/RadioGroup/RadioGroup.js"),W=require("./Components/Inputs/RadioListItem/RadioListItem.js"),O=require("./Components/Inputs/SearchField/SearchField.js"),z=require("./Components/Inputs/SegmentedControl/SegmentedControl.js"),E=require("./Components/Inputs/Switch/Switch.js"),H=require("./Components/Inputs/Textarea/Textarea.js"),J=require("./Components/Inputs/TextButton/TextButton.js"),K=require("./Components/Inputs/TextField/TextField.js"),Q=require("./Components/Inputs/List/List.js"),V=require("./Components/Inputs/TextFieldDropdown/TextFieldDropdown.js"),X=require("./Components/Inputs/CommentArea/CommentArea.js"),Y=require("./Components/Inputs/IconButtonDropdown/IconButtonDropdown.js"),Z=require("./Components/Inputs/MultiColumnList/MultiColumnList.js"),$=require("./Components/Inputs/FilterChip/FilterChip.js"),_=require("./Components/Inputs/TextButtonDropdown/TextButtonDropdown.js"),ee=require("./Components/Inputs/AutoCompleteList/AutoCompleteList.js"),oe=require("./Components/Inputs/FilterList/FilterList.js"),te=require("./Components/Inputs/Input/Input.js"),se=require("./Components/Inputs/Input/PasswordInput.js"),re=require("./Components/Inputs/Input/LabelInput.js"),ne=require("./Components/Inputs/Input/InputTypeSelector.js"),ie=require("./Components/Inputs/SupportTextContainer/SupportTextContainer.js"),ae=require("./Components/Inputs/TextFieldContainer/TextFieldContainer.js"),pe=require("./Components/Inputs/FileUploader/FileUploader.js"),ue=require("./Components/Base/Typography/Typography.js"),le=require("./Components/Base/Layouts/Box/Box.js"),Ce=require("./Components/Base/Layouts/GridLayout/GridLayout.js"),me=require("./Components/Base/Layouts/Column/Column.js"),xe=require("./Components/Base/Layouts/FullBleed/FullBleed.js"),de=require("./Components/Navigations/Drawer/Drawer.js"),ce=require("./Components/Navigations/GNBList/GNBList.js"),Ie=require("./Components/Navigations/Pagination/Pagination.parts.js"),Be=require("./Components/Navigations/Pagination/Pagination.js"),je=require("./Components/Navigations/TableOfContents/TableOfContents.js"),qe=require("./Components/Navigations/TextTab/TextTab.js"),Le=require("./Components/Navigations/BoxTab/BoxTab.js"),ge=require("./Components/Navigations/Menu/Menu.js"),Te=require("./Components/Navigations/TextLink/TextLink.js"),De=require("./Components/Utils/BackDrop/BackDrop.js"),Se=require("./Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js"),be=require("./Components/Utils/BottomModalContainer/BottomModalContainer.js"),he=require("./Components/Utils/FullModalContainer/FullModalContainer.js"),ke=require("./Components/Utils/Modal/Modal.js"),ye=require("./Components/Utils/ModalContainer/ModalContainer.js"),Fe=require("./Components/Utils/Portal/Portal.js"),Me=require("./Components/Wrappers/WithBadge/WithBadge.js"),we=require("./Components/Wrappers/WithSnackBar/WithSnackBar.js");exports.Avatar=e.Avatar,exports.CountBadge=o.CountBadge,exports.ImageLabel=t.ImageLabel,exports.Label=s.Label,exports.NewBadge=r.NewBadge,exports.ProductIcon=n.ProductIcon,exports.ServiceLogo=i.ServiceLogo,exports.SkillLabel=a.SkillLabel,exports.SystemIcon=p.SystemIcon,exports.LargeSystemIconNames=u.LargeSystemIconNames,exports.MediumSystemIconNames=u.MediumSystemIconNames,exports.SmallSystemIconNames=u.SmallSystemIconNames,exports.SocialSystemIconNames=u.SocialSystemIconNames,exports.SystemIconNames=u.SystemIconNames,exports.Divider=l.Divider,exports.ProgressIndicator=C.ProgressIndicator,exports.Li=m.default,exports.Accordion=x.Accordion,exports.MessageBox=d.MessageBox,exports.SnackBar=c.SnackBar,exports.messageType=I.messageType,exports.MessageBar=B.MessageBar,exports.Dialog=j.Dialog,exports.DialogBox=q.DialogBox,exports.LoadingIndicator=L.LoadingIndicator,exports.Tooltip=g.Tooltip,exports.RichTooltip=T.RichTooltip,exports.PlainTooltip=D.PlainTooltip,exports.GlobalLoadingIndicator=S.GlobalLoadingIndicator,exports.Autocomplete=b.Autocomplete,exports.Button=h.Button,exports.Calendar=k.Calendar,exports.Checkbox=y.Checkbox,exports.CheckboxCard=F.CheckboxCard,exports.CheckboxList=M.CheckboxList,exports.CheckboxListItem=w.CheckboxListItem,exports.ChoiceChip=R.ChoiceChip,exports.IconButton=N.IconButton,exports.InputChip=P.InputChip,exports.RangeSlider=A.RangeSlider,exports.Radio=v.Radio,exports.RadioCard=G.RadioCard,exports.RadioList=f.RadioList,exports.RadioGroup=U.RadioGroup,exports.RadioListItem=W.RadioListItem,exports.SearchField=O.SearchField,exports.SegmentedControl=z.SegmentedControl,exports.Switch=E.Switch,exports.Textarea=H.Textarea,exports.TextButton=J.TextButton,exports.TextField=K.TextField,exports.List=Q.List,exports.TextFieldDropdown=V.TextFieldDropdown,exports.CommentArea=X.CommentArea,exports.IconButtonDropdown=Y.IconButtonDropdown,exports.MultiColumnList=Z.MultiColumnList,exports.FilterChip=$.FilterChip,exports.TextButtonDropdown=_.TextButtonDropdown,exports.AutoCompleteList=ee.AutoCompleteList,exports.FilterList=oe.FilterList,exports.Input=te.Input,exports.PasswordInput=se.PasswordInput,exports.LabelInput=re.LabelInput,exports.InputTypeSelector=ne.InputTypeSelector,exports.SupportTextContainer=ie.SupportTextContainer,exports.TextFieldContainer=ae.TextFieldContainer,exports.FileUploader=pe.FileUploader,exports.Typography=ue.Typography,exports.Box=le.Box,exports.GridLayout=Ce.GridLayout,exports.Column=me.Column,exports.FullBleed=xe.FullBleed,exports.Drawer=de.Drawer,exports.GNBList=ce.GNBList,exports.LeftArrow=Ie.LeftArrow,exports.PaginationNumber=Ie.PaginationNumber,exports.RightArrow=Ie.RightArrow,exports.Pagination=Be.Pagination,exports.TableOfContents=je.TableOfContents,exports.TextTab=qe.TextTab,exports.BoxTab=Le.BoxTab,exports.Menu=ge.Menu,exports.TextLink=Te.TextLink,exports.BackDrop=De.BackDrop,exports.BackDropLiftContainer=Se.BackDropLiftContainer,exports.BottomModalContainer=be.BottomModalContainer,exports.FullModalContainer=he.FullModalContainer,exports.Modal=ke.Modal,exports.ModalContainer=ye.ModalContainer,exports.Portal=Fe.Portal,exports.WithBadge=Me.WithBadge,exports.WithSnackBar=we.WithSnackBar;
1
+ "use strict";var e=require("./Components/DataDisplays/Avatar/Avatar.js"),o=require("./Components/DataDisplays/CountBadge/CountBadge.js"),t=require("./Components/DataDisplays/ImageLabel/ImageLabel.js"),s=require("./Components/DataDisplays/Label/Label.js"),n=require("./Components/DataDisplays/NewBadge/NewBadge.js"),r=require("./Components/DataDisplays/ProductIcon/ProductIcon.js"),i=require("./Components/DataDisplays/ServiceLogo/ServiceLogo.js"),a=require("./Components/DataDisplays/SkillLabel/SkillLabel.js"),p=require("./Components/DataDisplays/SystemIcon/SystemIcon.js"),u=require("./Components/DataDisplays/SystemIcon/SystemIcon.constants.js"),l=require("./Components/DataDisplays/Divider/Divider.js"),C=require("./Components/DataDisplays/ProgressIndicator/ProgressIndicator.js"),m=require("./Components/DataDisplays/Li/Li.js"),x=require("./Components/DataDisplays/Accordion/Accordion.js"),d=require("./Components/Feedbacks/MessageBox/MessageBox.js"),c=require("./Components/Feedbacks/SnackBar/SnackBar.js"),I=require("./Components/Feedbacks/SnackBar/SnackBar.types.js"),B=require("./Components/Feedbacks/MessageBar/MessageBar.js"),L=require("./Components/Feedbacks/Dialog/Dialog.js"),j=require("./Components/Feedbacks/DialogBox/DialogBox.js"),q=require("./Components/Feedbacks/LoadingIndicator/LoadingIndicator.js"),g=require("./Components/Feedbacks/Tooltip/Tooltip.js"),T=require("./Components/Feedbacks/Tooltip/RichTooltip/RichTooltip.js"),D=require("./Components/Feedbacks/Tooltip/PlainTooltip/PlainTooltip.js"),S=require("./Components/Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js"),b=require("./Components/Inputs/Autocomplete/Autocomplete.js"),h=require("./Components/Inputs/Button/Button.js"),k=require("./Components/Inputs/Calendar/Calendar.js"),y=require("./Components/Inputs/Checkbox/Checkbox.js"),F=require("./Components/Inputs/CheckboxCard/CheckboxCard.js"),M=require("./Components/Inputs/CheckboxList/CheckboxList.js"),w=require("./Components/Inputs/CheckboxListItem/CheckboxListItem.js"),N=require("./Components/Inputs/ChoiceChip/ChoiceChip.js"),R=require("./Components/Inputs/IconButton/IconButton.js"),P=require("./Components/Inputs/InputChip/InputChip.js"),A=require("./Components/Inputs/RangeSlider/RangeSlider.js"),v=require("./Components/Inputs/Radio/Radio.js"),G=require("./Components/Inputs/RadioCard/RadioCard.js"),f=require("./Components/Inputs/RadioList/RadioList.js"),U=require("./Components/Inputs/RadioGroup/RadioGroup.js"),W=require("./Components/Inputs/RadioListItem/RadioListItem.js"),O=require("./Components/Inputs/SearchField/SearchField.js"),z=require("./Components/Inputs/SegmentedControl/SegmentedControl.js"),E=require("./Components/Inputs/Switch/Switch.js"),H=require("./Components/Inputs/Textarea/Textarea.js"),J=require("./Components/Inputs/TextButton/TextButton.js"),K=require("./Components/Inputs/TextField/TextField.js"),Q=require("./Components/Inputs/List/List.js"),V=require("./Components/Inputs/TextFieldDropdown/TextFieldDropdown.js"),X=require("./Components/Inputs/CommentArea/CommentArea.js"),Y=require("./Components/Inputs/IconButtonDropdown/IconButtonDropdown.js"),Z=require("./Components/Inputs/MultiColumnList/MultiColumnList.js"),$=require("./Components/Inputs/FilterChip/FilterChip.js"),_=require("./Components/Inputs/TextButtonDropdown/TextButtonDropdown.js"),ee=require("./Components/Inputs/AutoCompleteList/AutoCompleteList.js"),oe=require("./Components/Inputs/FilterList/FilterList.js"),te=require("./Components/Inputs/Input/Input.js"),se=require("./Components/Inputs/Input/PasswordInput.js"),ne=require("./Components/Inputs/Input/LabelInput.js"),re=require("./Components/Inputs/Input/InputTypeSelector.js"),ie=require("./Components/Inputs/SupportTextContainer/SupportTextContainer.js"),ae=require("./Components/Inputs/TextFieldContainer/TextFieldContainer.js"),pe=require("./Components/Inputs/FileUploader/FileUploader.js"),ue=require("./Components/Base/Typography/Typography.js"),le=require("./Components/Base/Layouts/Box/Box.js"),Ce=require("./Components/Base/Layouts/GridLayout/GridLayout.js"),me=require("./Components/Base/Layouts/Column/Column.js"),xe=require("./Components/Base/Layouts/FullBleed/FullBleed.js"),de=require("./Components/Navigations/Drawer/Drawer.js"),ce=require("./Components/Navigations/GNBList/GNBList.js"),Ie=require("./Components/Navigations/Pagination/Pagination.parts.js"),Be=require("./Components/Navigations/Pagination/Pagination.js"),Le=require("./Components/Navigations/TableOfContents/TableOfContents.js"),je=require("./Components/Navigations/TextTab/TextTab.js"),qe=require("./Components/Navigations/BoxTab/BoxTab.js"),ge=require("./Components/Navigations/Menu/MenuLink.js"),Te=require("./Components/Navigations/Menu/MenuButton.js"),De=require("./Components/Navigations/TextLink/TextLink.js"),Se=require("./Components/Utils/BackDrop/BackDrop.js"),be=require("./Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js"),he=require("./Components/Utils/BottomModalContainer/BottomModalContainer.js"),ke=require("./Components/Utils/FullModalContainer/FullModalContainer.js"),ye=require("./Components/Utils/Modal/Modal.js"),Fe=require("./Components/Utils/ModalContainer/ModalContainer.js"),Me=require("./Components/Utils/Portal/Portal.js"),we=require("./Components/Wrappers/WithBadge/WithBadge.js"),Ne=require("./Components/Wrappers/WithSnackBar/WithSnackBar.js");exports.Avatar=e.Avatar,exports.CountBadge=o.CountBadge,exports.ImageLabel=t.ImageLabel,exports.Label=s.Label,exports.NewBadge=n.NewBadge,exports.ProductIcon=r.ProductIcon,exports.ServiceLogo=i.ServiceLogo,exports.SkillLabel=a.SkillLabel,exports.SystemIcon=p.SystemIcon,exports.LargeSystemIconNames=u.LargeSystemIconNames,exports.MediumSystemIconNames=u.MediumSystemIconNames,exports.SmallSystemIconNames=u.SmallSystemIconNames,exports.SocialSystemIconNames=u.SocialSystemIconNames,exports.SystemIconNames=u.SystemIconNames,exports.Divider=l.Divider,exports.ProgressIndicator=C.ProgressIndicator,exports.Li=m.default,exports.Accordion=x.Accordion,exports.MessageBox=d.MessageBox,exports.SnackBar=c.SnackBar,exports.messageType=I.messageType,exports.MessageBar=B.MessageBar,exports.Dialog=L.Dialog,exports.DialogBox=j.DialogBox,exports.LoadingIndicator=q.LoadingIndicator,exports.Tooltip=g.Tooltip,exports.RichTooltip=T.RichTooltip,exports.PlainTooltip=D.PlainTooltip,exports.GlobalLoadingIndicator=S.GlobalLoadingIndicator,exports.Autocomplete=b.Autocomplete,exports.Button=h.Button,exports.Calendar=k.Calendar,exports.Checkbox=y.Checkbox,exports.CheckboxCard=F.CheckboxCard,exports.CheckboxList=M.CheckboxList,exports.CheckboxListItem=w.CheckboxListItem,exports.ChoiceChip=N.ChoiceChip,exports.IconButton=R.IconButton,exports.InputChip=P.InputChip,exports.RangeSlider=A.RangeSlider,exports.Radio=v.Radio,exports.RadioCard=G.RadioCard,exports.RadioList=f.RadioList,exports.RadioGroup=U.RadioGroup,exports.RadioListItem=W.RadioListItem,exports.SearchField=O.SearchField,exports.SegmentedControl=z.SegmentedControl,exports.Switch=E.Switch,exports.Textarea=H.Textarea,exports.TextButton=J.TextButton,exports.TextField=K.TextField,exports.List=Q.List,exports.TextFieldDropdown=V.TextFieldDropdown,exports.CommentArea=X.CommentArea,exports.IconButtonDropdown=Y.IconButtonDropdown,exports.MultiColumnList=Z.MultiColumnList,exports.FilterChip=$.FilterChip,exports.TextButtonDropdown=_.TextButtonDropdown,exports.AutoCompleteList=ee.AutoCompleteList,exports.FilterList=oe.FilterList,exports.Input=te.Input,exports.PasswordInput=se.PasswordInput,exports.LabelInput=ne.LabelInput,exports.InputTypeSelector=re.InputTypeSelector,exports.SupportTextContainer=ie.SupportTextContainer,exports.TextFieldContainer=ae.TextFieldContainer,exports.FileUploader=pe.FileUploader,exports.Typography=ue.Typography,exports.Box=le.Box,exports.GridLayout=Ce.GridLayout,exports.Column=me.Column,exports.FullBleed=xe.FullBleed,exports.Drawer=de.Drawer,exports.GNBList=ce.GNBList,exports.LeftArrow=Ie.LeftArrow,exports.PaginationNumber=Ie.PaginationNumber,exports.RightArrow=Ie.RightArrow,exports.Pagination=Be.Pagination,exports.TableOfContents=Le.TableOfContents,exports.TextTab=je.TextTab,exports.BoxTab=qe.BoxTab,exports.MenuLink=ge.MenuLink,exports.MenuButton=Te.MenuButton,exports.TextLink=De.TextLink,exports.BackDrop=Se.BackDrop,exports.BackDropLiftContainer=be.BackDropLiftContainer,exports.BottomModalContainer=he.BottomModalContainer,exports.FullModalContainer=ke.FullModalContainer,exports.Modal=ye.Modal,exports.ModalContainer=Fe.ModalContainer,exports.Portal=Me.Portal,exports.WithBadge=we.WithBadge,exports.WithSnackBar=Ne.WithSnackBar;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{Avatar}from"./Components/DataDisplays/Avatar/Avatar.js";export{CountBadge}from"./Components/DataDisplays/CountBadge/CountBadge.js";export{ImageLabel}from"./Components/DataDisplays/ImageLabel/ImageLabel.js";export{Label}from"./Components/DataDisplays/Label/Label.js";export{NewBadge}from"./Components/DataDisplays/NewBadge/NewBadge.js";export{ProductIcon}from"./Components/DataDisplays/ProductIcon/ProductIcon.js";export{ServiceLogo}from"./Components/DataDisplays/ServiceLogo/ServiceLogo.js";export{SkillLabel}from"./Components/DataDisplays/SkillLabel/SkillLabel.js";export{SystemIcon}from"./Components/DataDisplays/SystemIcon/SystemIcon.js";export{LargeSystemIconNames,MediumSystemIconNames,SmallSystemIconNames,SocialSystemIconNames,SystemIconNames}from"./Components/DataDisplays/SystemIcon/SystemIcon.constants.js";export{Divider}from"./Components/DataDisplays/Divider/Divider.js";export{ProgressIndicator}from"./Components/DataDisplays/ProgressIndicator/ProgressIndicator.js";export{default as Li}from"./Components/DataDisplays/Li/Li.js";export{Accordion}from"./Components/DataDisplays/Accordion/Accordion.js";export{MessageBox}from"./Components/Feedbacks/MessageBox/MessageBox.js";export{SnackBar}from"./Components/Feedbacks/SnackBar/SnackBar.js";export{messageType}from"./Components/Feedbacks/SnackBar/SnackBar.types.js";export{MessageBar}from"./Components/Feedbacks/MessageBar/MessageBar.js";export{Dialog}from"./Components/Feedbacks/Dialog/Dialog.js";export{DialogBox}from"./Components/Feedbacks/DialogBox/DialogBox.js";export{LoadingIndicator}from"./Components/Feedbacks/LoadingIndicator/LoadingIndicator.js";export{Tooltip}from"./Components/Feedbacks/Tooltip/Tooltip.js";export{RichTooltip}from"./Components/Feedbacks/Tooltip/RichTooltip/RichTooltip.js";export{PlainTooltip}from"./Components/Feedbacks/Tooltip/PlainTooltip/PlainTooltip.js";export{GlobalLoadingIndicator}from"./Components/Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js";export{Autocomplete}from"./Components/Inputs/Autocomplete/Autocomplete.js";export{Button}from"./Components/Inputs/Button/Button.js";export{Calendar}from"./Components/Inputs/Calendar/Calendar.js";export{Checkbox}from"./Components/Inputs/Checkbox/Checkbox.js";export{CheckboxCard}from"./Components/Inputs/CheckboxCard/CheckboxCard.js";export{CheckboxList}from"./Components/Inputs/CheckboxList/CheckboxList.js";export{CheckboxListItem}from"./Components/Inputs/CheckboxListItem/CheckboxListItem.js";export{ChoiceChip}from"./Components/Inputs/ChoiceChip/ChoiceChip.js";export{IconButton}from"./Components/Inputs/IconButton/IconButton.js";export{InputChip}from"./Components/Inputs/InputChip/InputChip.js";export{RangeSlider}from"./Components/Inputs/RangeSlider/RangeSlider.js";export{Radio}from"./Components/Inputs/Radio/Radio.js";export{RadioCard}from"./Components/Inputs/RadioCard/RadioCard.js";export{RadioList}from"./Components/Inputs/RadioList/RadioList.js";export{RadioGroup}from"./Components/Inputs/RadioGroup/RadioGroup.js";export{RadioListItem}from"./Components/Inputs/RadioListItem/RadioListItem.js";export{SearchField}from"./Components/Inputs/SearchField/SearchField.js";export{SegmentedControl}from"./Components/Inputs/SegmentedControl/SegmentedControl.js";export{Switch}from"./Components/Inputs/Switch/Switch.js";export{Textarea}from"./Components/Inputs/Textarea/Textarea.js";export{TextButton}from"./Components/Inputs/TextButton/TextButton.js";export{TextField}from"./Components/Inputs/TextField/TextField.js";export{List}from"./Components/Inputs/List/List.js";export{TextFieldDropdown}from"./Components/Inputs/TextFieldDropdown/TextFieldDropdown.js";export{CommentArea}from"./Components/Inputs/CommentArea/CommentArea.js";export{IconButtonDropdown}from"./Components/Inputs/IconButtonDropdown/IconButtonDropdown.js";export{MultiColumnList}from"./Components/Inputs/MultiColumnList/MultiColumnList.js";export{FilterChip}from"./Components/Inputs/FilterChip/FilterChip.js";export{TextButtonDropdown}from"./Components/Inputs/TextButtonDropdown/TextButtonDropdown.js";export{AutoCompleteList}from"./Components/Inputs/AutoCompleteList/AutoCompleteList.js";export{FilterList}from"./Components/Inputs/FilterList/FilterList.js";export{Input}from"./Components/Inputs/Input/Input.js";export{PasswordInput}from"./Components/Inputs/Input/PasswordInput.js";export{LabelInput}from"./Components/Inputs/Input/LabelInput.js";export{InputTypeSelector}from"./Components/Inputs/Input/InputTypeSelector.js";export{SupportTextContainer}from"./Components/Inputs/SupportTextContainer/SupportTextContainer.js";export{TextFieldContainer}from"./Components/Inputs/TextFieldContainer/TextFieldContainer.js";export{FileUploader}from"./Components/Inputs/FileUploader/FileUploader.js";export{Typography}from"./Components/Base/Typography/Typography.js";export{Box}from"./Components/Base/Layouts/Box/Box.js";export{GridLayout}from"./Components/Base/Layouts/GridLayout/GridLayout.js";export{Column}from"./Components/Base/Layouts/Column/Column.js";export{FullBleed}from"./Components/Base/Layouts/FullBleed/FullBleed.js";export{Drawer}from"./Components/Navigations/Drawer/Drawer.js";export{GNBList}from"./Components/Navigations/GNBList/GNBList.js";export{LeftArrow,PaginationNumber,RightArrow}from"./Components/Navigations/Pagination/Pagination.parts.js";export{Pagination}from"./Components/Navigations/Pagination/Pagination.js";export{TableOfContents}from"./Components/Navigations/TableOfContents/TableOfContents.js";export{TextTab}from"./Components/Navigations/TextTab/TextTab.js";export{BoxTab}from"./Components/Navigations/BoxTab/BoxTab.js";export{Menu}from"./Components/Navigations/Menu/Menu.js";export{TextLink}from"./Components/Navigations/TextLink/TextLink.js";export{BackDrop}from"./Components/Utils/BackDrop/BackDrop.js";export{BackDropLiftContainer}from"./Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js";export{BottomModalContainer}from"./Components/Utils/BottomModalContainer/BottomModalContainer.js";export{FullModalContainer}from"./Components/Utils/FullModalContainer/FullModalContainer.js";export{Modal}from"./Components/Utils/Modal/Modal.js";export{ModalContainer}from"./Components/Utils/ModalContainer/ModalContainer.js";export{Portal}from"./Components/Utils/Portal/Portal.js";export{WithBadge}from"./Components/Wrappers/WithBadge/WithBadge.js";export{WithSnackBar}from"./Components/Wrappers/WithSnackBar/WithSnackBar.js";
1
+ export{Avatar}from"./Components/DataDisplays/Avatar/Avatar.js";export{CountBadge}from"./Components/DataDisplays/CountBadge/CountBadge.js";export{ImageLabel}from"./Components/DataDisplays/ImageLabel/ImageLabel.js";export{Label}from"./Components/DataDisplays/Label/Label.js";export{NewBadge}from"./Components/DataDisplays/NewBadge/NewBadge.js";export{ProductIcon}from"./Components/DataDisplays/ProductIcon/ProductIcon.js";export{ServiceLogo}from"./Components/DataDisplays/ServiceLogo/ServiceLogo.js";export{SkillLabel}from"./Components/DataDisplays/SkillLabel/SkillLabel.js";export{SystemIcon}from"./Components/DataDisplays/SystemIcon/SystemIcon.js";export{LargeSystemIconNames,MediumSystemIconNames,SmallSystemIconNames,SocialSystemIconNames,SystemIconNames}from"./Components/DataDisplays/SystemIcon/SystemIcon.constants.js";export{Divider}from"./Components/DataDisplays/Divider/Divider.js";export{ProgressIndicator}from"./Components/DataDisplays/ProgressIndicator/ProgressIndicator.js";export{default as Li}from"./Components/DataDisplays/Li/Li.js";export{Accordion}from"./Components/DataDisplays/Accordion/Accordion.js";export{MessageBox}from"./Components/Feedbacks/MessageBox/MessageBox.js";export{SnackBar}from"./Components/Feedbacks/SnackBar/SnackBar.js";export{messageType}from"./Components/Feedbacks/SnackBar/SnackBar.types.js";export{MessageBar}from"./Components/Feedbacks/MessageBar/MessageBar.js";export{Dialog}from"./Components/Feedbacks/Dialog/Dialog.js";export{DialogBox}from"./Components/Feedbacks/DialogBox/DialogBox.js";export{LoadingIndicator}from"./Components/Feedbacks/LoadingIndicator/LoadingIndicator.js";export{Tooltip}from"./Components/Feedbacks/Tooltip/Tooltip.js";export{RichTooltip}from"./Components/Feedbacks/Tooltip/RichTooltip/RichTooltip.js";export{PlainTooltip}from"./Components/Feedbacks/Tooltip/PlainTooltip/PlainTooltip.js";export{GlobalLoadingIndicator}from"./Components/Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js";export{Autocomplete}from"./Components/Inputs/Autocomplete/Autocomplete.js";export{Button}from"./Components/Inputs/Button/Button.js";export{Calendar}from"./Components/Inputs/Calendar/Calendar.js";export{Checkbox}from"./Components/Inputs/Checkbox/Checkbox.js";export{CheckboxCard}from"./Components/Inputs/CheckboxCard/CheckboxCard.js";export{CheckboxList}from"./Components/Inputs/CheckboxList/CheckboxList.js";export{CheckboxListItem}from"./Components/Inputs/CheckboxListItem/CheckboxListItem.js";export{ChoiceChip}from"./Components/Inputs/ChoiceChip/ChoiceChip.js";export{IconButton}from"./Components/Inputs/IconButton/IconButton.js";export{InputChip}from"./Components/Inputs/InputChip/InputChip.js";export{RangeSlider}from"./Components/Inputs/RangeSlider/RangeSlider.js";export{Radio}from"./Components/Inputs/Radio/Radio.js";export{RadioCard}from"./Components/Inputs/RadioCard/RadioCard.js";export{RadioList}from"./Components/Inputs/RadioList/RadioList.js";export{RadioGroup}from"./Components/Inputs/RadioGroup/RadioGroup.js";export{RadioListItem}from"./Components/Inputs/RadioListItem/RadioListItem.js";export{SearchField}from"./Components/Inputs/SearchField/SearchField.js";export{SegmentedControl}from"./Components/Inputs/SegmentedControl/SegmentedControl.js";export{Switch}from"./Components/Inputs/Switch/Switch.js";export{Textarea}from"./Components/Inputs/Textarea/Textarea.js";export{TextButton}from"./Components/Inputs/TextButton/TextButton.js";export{TextField}from"./Components/Inputs/TextField/TextField.js";export{List}from"./Components/Inputs/List/List.js";export{TextFieldDropdown}from"./Components/Inputs/TextFieldDropdown/TextFieldDropdown.js";export{CommentArea}from"./Components/Inputs/CommentArea/CommentArea.js";export{IconButtonDropdown}from"./Components/Inputs/IconButtonDropdown/IconButtonDropdown.js";export{MultiColumnList}from"./Components/Inputs/MultiColumnList/MultiColumnList.js";export{FilterChip}from"./Components/Inputs/FilterChip/FilterChip.js";export{TextButtonDropdown}from"./Components/Inputs/TextButtonDropdown/TextButtonDropdown.js";export{AutoCompleteList}from"./Components/Inputs/AutoCompleteList/AutoCompleteList.js";export{FilterList}from"./Components/Inputs/FilterList/FilterList.js";export{Input}from"./Components/Inputs/Input/Input.js";export{PasswordInput}from"./Components/Inputs/Input/PasswordInput.js";export{LabelInput}from"./Components/Inputs/Input/LabelInput.js";export{InputTypeSelector}from"./Components/Inputs/Input/InputTypeSelector.js";export{SupportTextContainer}from"./Components/Inputs/SupportTextContainer/SupportTextContainer.js";export{TextFieldContainer}from"./Components/Inputs/TextFieldContainer/TextFieldContainer.js";export{FileUploader}from"./Components/Inputs/FileUploader/FileUploader.js";export{Typography}from"./Components/Base/Typography/Typography.js";export{Box}from"./Components/Base/Layouts/Box/Box.js";export{GridLayout}from"./Components/Base/Layouts/GridLayout/GridLayout.js";export{Column}from"./Components/Base/Layouts/Column/Column.js";export{FullBleed}from"./Components/Base/Layouts/FullBleed/FullBleed.js";export{Drawer}from"./Components/Navigations/Drawer/Drawer.js";export{GNBList}from"./Components/Navigations/GNBList/GNBList.js";export{LeftArrow,PaginationNumber,RightArrow}from"./Components/Navigations/Pagination/Pagination.parts.js";export{Pagination}from"./Components/Navigations/Pagination/Pagination.js";export{TableOfContents}from"./Components/Navigations/TableOfContents/TableOfContents.js";export{TextTab}from"./Components/Navigations/TextTab/TextTab.js";export{BoxTab}from"./Components/Navigations/BoxTab/BoxTab.js";export{MenuLink}from"./Components/Navigations/Menu/MenuLink.js";export{MenuButton}from"./Components/Navigations/Menu/MenuButton.js";export{TextLink}from"./Components/Navigations/TextLink/TextLink.js";export{BackDrop}from"./Components/Utils/BackDrop/BackDrop.js";export{BackDropLiftContainer}from"./Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js";export{BottomModalContainer}from"./Components/Utils/BottomModalContainer/BottomModalContainer.js";export{FullModalContainer}from"./Components/Utils/FullModalContainer/FullModalContainer.js";export{Modal}from"./Components/Utils/Modal/Modal.js";export{ModalContainer}from"./Components/Utils/ModalContainer/ModalContainer.js";export{Portal}from"./Components/Utils/Portal/Portal.js";export{WithBadge}from"./Components/Wrappers/WithBadge/WithBadge.js";export{WithSnackBar}from"./Components/Wrappers/WithSnackBar/WithSnackBar.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wishket/design-system",
3
- "version": "2.2.1",
3
+ "version": "3.0.1",
4
4
  "type": "module",
5
5
  "description": "Wishket Design System",
6
6
  "main": "dist/index.js",
@@ -9,7 +9,8 @@
9
9
  "license": "MIT",
10
10
  "files": [
11
11
  "dist",
12
- "dist/cjs"
12
+ "dist/cjs",
13
+ "scripts/codemods"
13
14
  ],
14
15
  "exports": {
15
16
  ".": {
@@ -38,6 +39,7 @@
38
39
  "build:dts": "tsc --project tsconfig.rollup.json --emitDeclarationOnly",
39
40
  "lint": "eslint './**/*.{ts,tsx,js,jsx}' --ignore-path .eslintignore || true",
40
41
  "test": "jest --ci --runInBand --coverage --watchAll=false --passWithNoTests --testMatch=\"**/*.spec.@(ts|tsx)\"",
42
+ "test:codemods": "node scripts/codemods/__tests__/run-fixtures.cjs",
41
43
  "storybook": "storybook dev -p 6006",
42
44
  "build-storybook": "storybook build",
43
45
  "prettier:check": "prettier --cache --check .",
@@ -46,7 +48,6 @@
46
48
  },
47
49
  "dependencies": {
48
50
  "@wishket/yogokit": "^0.2.2",
49
- "next": "16.0.10",
50
51
  "react": "19.2.3",
51
52
  "react-dom": "19.2.3",
52
53
  "sharp": "^0.34.3",
@@ -102,6 +103,7 @@
102
103
  "jest-dom": "^4.0.0",
103
104
  "jest-environment-jsdom": "^29.7.0",
104
105
  "madge": "^8.0.0",
106
+ "next": "16.0.10",
105
107
  "postcss": "^8.5.5",
106
108
  "postcss-loader": "^8.1.1",
107
109
  "prettier": "^3.6.2",
@@ -118,8 +120,8 @@
118
120
  },
119
121
  "peerDependencies": {
120
122
  "@savvywombat/tailwindcss-grid-areas": "^4.0.0",
121
- "react": "^18 || ^19",
122
- "react-dom": "^18 || ^19"
123
+ "react": "^19",
124
+ "react-dom": "^19"
123
125
  },
124
126
  "sideEffects": [
125
127
  "*.css",
@@ -0,0 +1,178 @@
1
+ # Codemods
2
+
3
+ `@wishket/design-system` 메이저 마이그레이션을 컨슈머 앱(`wishket-service`, `yozm-service`, `account-service` 등)에 일괄 적용하기 위한 jscodeshift 스크립트 모음입니다.
4
+
5
+ ## v3.0 — `add-as-link`
6
+
7
+ v3.0은 `TextLink`, `Menu`, `GNBList.Item`이 더 이상 자동으로 `next/link`를 사용하지 않습니다. 컨슈머는 `as={Link}`를 명시적으로 넘겨야 합니다. 이 codemod는 그 변환을 자동화합니다.
8
+
9
+ ### 변환 규칙
10
+
11
+ 1. `@wishket/design-system`을 import한 파일에서만 동작.
12
+ 2. 다음 호출만 대상으로 함: `<TextLink ... />`, `<Menu ... />`, `<GNBList.Item ... />`.
13
+ 3. **`href`가 있는 호출만** 대상 (Menu의 `<button>` 폴백을 보호).
14
+ 4. 이미 `as` prop이 있으면 건너뜀.
15
+ 5. `next/link` 기본 import가 없으면 자동으로 `import Link from 'next/link';`를 파일 상단에 추가.
16
+
17
+ ### 변환 예시
18
+
19
+ ```tsx
20
+ // === Before ===
21
+ import { TextLink, Menu, GNBList } from '@wishket/design-system';
22
+
23
+ <TextLink href="/about" text="About" />
24
+ <Menu name="Settings" href="/settings" />
25
+ <GNBList.Item href="/products">Products</GNBList.Item>
26
+
27
+ // === After ===
28
+ import Link from 'next/link';
29
+ import { TextLink, Menu, GNBList } from '@wishket/design-system';
30
+
31
+ <TextLink as={Link} href="/about" text="About" />
32
+ <Menu as={Link} name="Settings" href="/settings" />
33
+ <GNBList.Item as={Link} href="/products">Products</GNBList.Item>
34
+ ```
35
+
36
+ ### 권장 4단계 실행 절차
37
+
38
+ > 시니어 친화적 운영 절차. 각 단계를 순서대로 실행하고 결과를 확인 후 다음으로 넘어가세요.
39
+
40
+ #### Step 1 — 사전 준비
41
+
42
+ ```bash
43
+ # jscodeshift 설치 (없는 경우)
44
+ yarn add -D jscodeshift @types/jscodeshift
45
+
46
+ # v3 설치/업그레이드
47
+ yarn up @wishket/design-system@3
48
+ ```
49
+
50
+ #### Step 2 — Dry run (미리 보기)
51
+
52
+ ```bash
53
+ npx jscodeshift \
54
+ -t node_modules/@wishket/design-system/scripts/codemods/add-as-link.ts \
55
+ --extensions=tsx,ts \
56
+ --parser=tsx \
57
+ --dry --print \
58
+ src/
59
+ ```
60
+
61
+ `--dry`로 실제 파일 변경 없이 변환될 코드를 콘솔에 표시. 변환 규모와 후보 호출을 확인.
62
+
63
+ #### Step 3 — 실제 적용 + 포맷 + 검증
64
+
65
+ ```bash
66
+ # 1) codemod 적용
67
+ npx jscodeshift \
68
+ -t node_modules/@wishket/design-system/scripts/codemods/add-as-link.ts \
69
+ --extensions=tsx,ts \
70
+ --parser=tsx \
71
+ src/
72
+
73
+ # 2) prettier로 출력 품질 보정 (codemod는 원래 스타일을 100% 보존하지 못함)
74
+ yarn prettier:write src/
75
+
76
+ # 3) 타입 체크
77
+ yarn type-check # 또는: npx tsc -p tsconfig.json --noEmit
78
+
79
+ # 4) 빌드 확인
80
+ yarn build # 또는 next build / vite build 등
81
+ ```
82
+
83
+ #### Step 4 — 수동 처리 후보 grep
84
+
85
+ codemod가 안전하게 변환하지 못하는 케이스를 후처리:
86
+
87
+ ```bash
88
+ # spread props 케이스
89
+ grep -rn -E "TextLink \{\.\.\.|Menu \{\.\.\.|GNBList\.Item \{\.\.\." src/
90
+
91
+ # alias import 케이스 (있다면)
92
+ grep -rn "as DSTextLink\|as DSMenu\|as DSGNBList" src/
93
+
94
+ # UrlObject href 패턴 (v3에서 string으로 좁혀짐)
95
+ grep -rn "href={{" src/
96
+ ```
97
+
98
+ 발견된 케이스는 [`MIGRATION_V2_TO_V3.md`](../../MIGRATION_V2_TO_V3.md) §4의 수동 수정 가이드 참조.
99
+
100
+ > 디자인시스템을 v3로 올린 뒤 `node_modules`에 codemod가 함께 들어옵니다 (`scripts/codemods/`는 `package.json`의 `files` 필드에 포함됨).
101
+
102
+ ### 한계와 주의사항
103
+
104
+ - **Spread props는 변환 못 함.** `<TextLink {...linkProps} />`처럼 props가 spread로 들어오는 호출은 자동 변환에서 제외됩니다. 다음 명령으로 후보를 찾아 수동 처리하세요.
105
+
106
+ ```bash
107
+ grep -rn "TextLink {\\.\\.\\.\\|Menu {\\.\\.\\.\\|GNBList\\.Item {\\.\\.\\." src/
108
+ ```
109
+
110
+ - **alias import 미지원.** `import { TextLink as DSTextLink } from '@wishket/design-system'`처럼 alias를 쓰는 경우는 잡지 못합니다. 사내 컨벤션이 alias를 안 쓰면 무시 가능.
111
+ - **Menu의 button 폴백.** `href`가 없는 `<Menu>` 호출은 의도적으로 변환되지 않습니다. (폴백으로 `<button>`이 렌더되기 때문에 `as`를 붙이면 안 됨.)
112
+ - **codemod는 1차 자동화입니다.** 변환 후 반드시 사람이 diff를 검토하고 CI를 한 번 돌려보세요.
113
+
114
+ ## v3.0 — `menu-split`
115
+
116
+ v3.0에서는 `Menu` 컴포넌트가 `MenuLink`(anchor) / `MenuButton`(button)으로 분리됩니다. 시맨틱 분기를 prop 존재 여부로 추론하던 기존 구조를 제거하고 컴포넌트 단위에서 강제하기 위함입니다.
117
+
118
+ > 이 codemod는 `add-as-link` 이후에 실행하세요. `add-as-link`가 `Menu`에 `as={Link}`를 미리 붙여둔 상태라도 `menu-split`이 안전하게 처리합니다.
119
+
120
+ ### 변환 규칙
121
+
122
+ 1. `@wishket/design-system`에서 `Menu`가 import된 파일만 대상.
123
+ 2. JSX 호출 분석:
124
+ - `href` prop 있음 → `<MenuLink ...>`로 rename + import 정리.
125
+ - `href` 없고 `onClick` 있음 → `<MenuButton ...>`로 rename + import 정리.
126
+ - **둘 다 있음 (모순 케이스)** → 변환하지 않고 위에 `// TODO: codemod could not safely resolve — manually choose MenuLink or MenuButton` 코멘트 삽입.
127
+ - **둘 다 없음** → 변환하지 않고 같은 형식의 TODO 코멘트 삽입.
128
+ - **spread props** (`<Menu {...props} />`) → 변환하지 않고 TODO 코멘트 삽입.
129
+ 3. `Menu` import는 사용된 변형으로 교체. 변환 못 한 호출이 남아있으면 `Menu`도 함께 유지.
130
+ 4. **alias import** (예: `Menu as M`)는 안전하게 변환할 수 없으므로 파일 상단에 TODO 코멘트만 추가합니다.
131
+
132
+ ### 변환 예시
133
+
134
+ ```tsx
135
+ // === Before ===
136
+ import { Menu } from '@wishket/design-system';
137
+
138
+ <Menu name="Projects" href="/projects" />
139
+ <Menu name="Settings" onClick={() => openModal()} />
140
+
141
+ // === After ===
142
+ import { MenuLink, MenuButton } from '@wishket/design-system';
143
+
144
+ <MenuLink name="Projects" href="/projects" />
145
+ <MenuButton name="Settings" onClick={() => openModal()} />
146
+ ```
147
+
148
+ ### 실행 방법
149
+
150
+ ```bash
151
+ # 미리 보기
152
+ npx jscodeshift \
153
+ -t node_modules/@wishket/design-system/scripts/codemods/menu-split.ts \
154
+ --extensions=tsx,ts --parser=tsx \
155
+ --dry --print \
156
+ src/
157
+
158
+ # 실제 적용
159
+ npx jscodeshift \
160
+ -t node_modules/@wishket/design-system/scripts/codemods/menu-split.ts \
161
+ --extensions=tsx,ts --parser=tsx \
162
+ src/
163
+
164
+ # 후처리
165
+ yarn prettier:write src/
166
+ yarn type-check
167
+ ```
168
+
169
+ ### 한계와 주의사항
170
+
171
+ - **alias import 미지원.** `import { Menu as M } from '@wishket/design-system'`는 안전 변환 불가. TODO 코멘트만 추가.
172
+ - **spread props 미지원.** `<Menu {...props} />`는 prop 존재 여부를 정적으로 결정할 수 없어 변환되지 않습니다. 다음 명령으로 후보를 찾으세요.
173
+
174
+ ```bash
175
+ grep -rn "Menu {\\.\\.\\." src/
176
+ ```
177
+
178
+ - **모순 케이스(`href` + `onClick`).** 기존 `Menu`는 `href`가 있으면 anchor로 렌더되며 `onClick`은 무시됐습니다. codemod는 의도를 알 수 없으므로 변환하지 않고 TODO 코멘트를 답니다 — 컨슈머가 `MenuLink`로 옮길지 `MenuButton`으로 옮길지 직접 결정해야 합니다.
@@ -0,0 +1,6 @@
1
+ import Link from 'next/link';
2
+ import { TextLink } from '@wishket/design-system';
3
+
4
+ export const Page = () => (
5
+ <TextLink as={Link} href="/about" text="About" />
6
+ );
@@ -0,0 +1,6 @@
1
+ import Link from 'next/link';
2
+ import { TextLink } from '@wishket/design-system';
3
+
4
+ export const Page = () => (
5
+ <TextLink as={Link} href="/about" text="About" />
6
+ );
@@ -0,0 +1,9 @@
1
+ import { TextLink, Menu, GNBList } from '@wishket/design-system';
2
+
3
+ export const Page = () => (
4
+ <>
5
+ <TextLink href="/about" text="About" />
6
+ <Menu name="Settings" href="/settings" />
7
+ <GNBList.Item href="/products">Products</GNBList.Item>
8
+ </>
9
+ );
@@ -0,0 +1,10 @@
1
+ import Link from 'next/link';
2
+ import { TextLink, Menu, GNBList } from '@wishket/design-system';
3
+
4
+ export const Page = () => (
5
+ <>
6
+ <TextLink as={Link} href="/about" text="About" />
7
+ <Menu as={Link} name="Settings" href="/settings" />
8
+ <GNBList.Item as={Link} href="/products">Products</GNBList.Item>
9
+ </>
10
+ );
@@ -0,0 +1,9 @@
1
+ import Link from 'next/link';
2
+ import { TextLink } from '@wishket/design-system';
3
+
4
+ export const Page = () => (
5
+ <>
6
+ <Link href="/external">External</Link>
7
+ <TextLink href="/about" text="About" />
8
+ </>
9
+ );
@@ -0,0 +1,9 @@
1
+ import Link from 'next/link';
2
+ import { TextLink } from '@wishket/design-system';
3
+
4
+ export const Page = () => (
5
+ <>
6
+ <Link href="/external">External</Link>
7
+ <TextLink as={Link} href="/about" text="About" />
8
+ </>
9
+ );
@@ -0,0 +1,5 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = () => (
4
+ <Menu name="Save" onClick={() => save()} />
5
+ );
@@ -0,0 +1,5 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = () => (
4
+ <Menu name="Save" onClick={() => save()} />
5
+ );
@@ -0,0 +1,3 @@
1
+ import { TextLink } from 'some-other-package';
2
+
3
+ export const Page = () => <TextLink href="/x" />;
@@ -0,0 +1,3 @@
1
+ import { TextLink } from 'some-other-package';
2
+
3
+ export const Page = () => <TextLink href="/x" />;
@@ -0,0 +1,8 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = () => (
4
+ <>
5
+ <Menu name="Projects" href="/projects" />
6
+ <Menu name="Settings" onClick={() => openModal()} />
7
+ </>
8
+ );
@@ -0,0 +1,8 @@
1
+ import { MenuLink, MenuButton } from '@wishket/design-system';
2
+
3
+ export const Page = () => (
4
+ <>
5
+ <MenuLink name="Projects" href="/projects" />
6
+ <MenuButton name="Settings" onClick={() => openModal()} />
7
+ </>
8
+ );
@@ -0,0 +1,5 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = () => (
4
+ <Menu name="Bad" href="/x" onClick={() => save()} />
5
+ );
@@ -0,0 +1,6 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = () => (
4
+ // TODO: codemod could not safely resolve — manually choose MenuLink or MenuButton.
5
+ <Menu name="Bad" href="/x" onClick={() => save()} />
6
+ );
@@ -0,0 +1,3 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = () => <Menu name="Projects" href="/projects" />;
@@ -0,0 +1,3 @@
1
+ import { MenuLink } from '@wishket/design-system';
2
+
3
+ export const Page = () => <MenuLink name="Projects" href="/projects" />;
@@ -0,0 +1,3 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = () => <Menu name="Save" onClick={() => save()} />;
@@ -0,0 +1,3 @@
1
+ import { MenuButton } from '@wishket/design-system';
2
+
3
+ export const Page = () => <MenuButton name="Save" onClick={() => save()} />;
@@ -0,0 +1,3 @@
1
+ import { Menu } from '@wishket/design-system';
2
+
3
+ export const Page = (props: MenuProps) => <Menu {...props} />;