@wishket/design-system 2.2.0 → 3.0.0

package/scripts/codemods/menu-split.ts

@@ -0,0 +1,252 @@
+import type {
+  API,
+  ASTPath,
+  Collection,
+  FileInfo,
+  ImportDeclaration,
+  ImportSpecifier,
+  JSCodeshift,
+  JSXAttribute,
+  JSXIdentifier,
+  JSXOpeningElement,
+} from 'jscodeshift';
+
+const DESIGN_SYSTEM_PACKAGE = '@wishket/design-system';
+const SOURCE_NAME = 'Menu';
+const LINK_NAME = 'MenuLink';
+const BUTTON_NAME = 'MenuButton';
+
+/**
+ * v3 — `Menu` 컴포넌트를 `MenuLink` / `MenuButton`으로 분리하는 codemod.
+ *
+ * 변환 규칙:
+ *
+ * 1. `@wishket/design-system`에서 import된 `Menu`만 처리 (alias 미지원).
+ * 2. JSX 호출 분석:
+ *    - `href` prop 있음 → `<MenuLink ...>`로 rename + import 정리
+ *    - `href` 없고 `onClick` 있음 → `<MenuButton ...>`로 rename + import 정리
+ *    - 둘 다 있음 (모순) → 변환 안 함 + TODO 코멘트
+ *    - 둘 다 없음 → 변환 안 함 + TODO 코멘트
+ *    - spread props (`<Menu {...props} />`) → 변환 안 함 + TODO 코멘트
+ * 3. import 정리:
+ *    - `Menu`를 사용된 변형(`MenuLink` / `MenuButton` / 둘 다)으로 교체
+ *    - 모든 호출을 변환하지 못해 `Menu`가 여전히 필요한 경우 `Menu`도 유지
+ */
+export default function transformer(file: FileInfo, api: API): string {
+  const j: JSCodeshift = api.jscodeshift;
+  const root = j(file.source);
+
+  const dsImports: Collection<ImportDeclaration> = root.find(
+    j.ImportDeclaration,
+    {
+      source: { value: DESIGN_SYSTEM_PACKAGE },
+    },
+  );
+  if (dsImports.size() === 0) return file.source;
+
+  // `Menu`가 alias 없이 default-named로 import 되었는지 확인.
+  let hasMenuImport = false;
+  let hasAliasedMenuImport = false;
+
+  dsImports.forEach(path => {
+    const specifiers = path.node.specifiers ?? [];
+    specifiers.forEach(spec => {
+      if (spec.type !== 'ImportSpecifier') return;
+      const importedName = spec.imported.name;
+      if (importedName !== SOURCE_NAME) return;
+      const localName = spec.local?.name ?? importedName;
+      if (localName !== SOURCE_NAME) {
+        hasAliasedMenuImport = true;
+      } else {
+        hasMenuImport = true;
+      }
+    });
+  });
+
+  if (!hasMenuImport && !hasAliasedMenuImport) {
+    return file.source;
+  }
+
+  let didChange = false;
+  let usedMenuLink = false;
+  let usedMenuButton = false;
+  let hasUnconvertedMenu = false;
+
+  if (hasAliasedMenuImport) {
+    // alias가 있는 경우 안전하게 변환하기 어려움 — 파일 상단에 안내 코멘트 추가.
+    addLeadingComment(
+      j,
+      root,
+      ` TODO: codemod could not safely resolve aliased Menu import — manually split into MenuLink / MenuButton.`,
+    );
+    return root.toSource({ quote: 'single' });
+  }
+
+  root
+    .find(j.JSXOpeningElement)
+    .forEach((path: ASTPath<JSXOpeningElement>) => {
+      const name = getJSXName(path.node);
+      if (name !== SOURCE_NAME) return;
+
+      const attrs = path.node.attributes ?? [];
+
+      const hasSpread = attrs.some(attr => attr.type === 'JSXSpreadAttribute');
+      if (hasSpread) {
+        addCommentBefore(
+          j,
+          path,
+          ` TODO: codemod could not safely resolve spread props — manually choose MenuLink or MenuButton.`,
+        );
+        hasUnconvertedMenu = true;
+        return;
+      }
+
+      const hasHref = attrs.some(
+        (attr): attr is JSXAttribute =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'href',
+      );
+      const hasOnClick = attrs.some(
+        (attr): attr is JSXAttribute =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'onClick',
+      );
+
+      if (hasHref && hasOnClick) {
+        addCommentBefore(
+          j,
+          path,
+          ` TODO: codemod could not safely resolve — manually choose MenuLink or MenuButton.`,
+        );
+        hasUnconvertedMenu = true;
+        return;
+      }
+
+      if (!hasHref && !hasOnClick) {
+        addCommentBefore(
+          j,
+          path,
+          ` TODO: codemod could not safely resolve — Menu without href or onClick. Choose MenuLink (add href) or MenuButton (add onClick).`,
+        );
+        hasUnconvertedMenu = true;
+        return;
+      }
+
+      const target = hasHref ? LINK_NAME : BUTTON_NAME;
+      renameJSXElement(j, path, target);
+
+      if (target === LINK_NAME) usedMenuLink = true;
+      else usedMenuButton = true;
+
+      didChange = true;
+    });
+
+  // Import 정리.
+  dsImports.forEach(path => {
+    const specifiers = path.node.specifiers ?? [];
+    const next: ImportSpecifier[] = [];
+    let touched = false;
+
+    specifiers.forEach(spec => {
+      if (spec.type !== 'ImportSpecifier') {
+        next.push(spec as ImportSpecifier);
+        return;
+      }
+      if (spec.imported.name !== SOURCE_NAME) {
+        next.push(spec);
+        return;
+      }
+      // `Menu`를 제거하고 사용된 변형으로 교체.
+      touched = true;
+      if (hasUnconvertedMenu) {
+        // 일부 변환 못한 호출이 남아있어 Menu도 유지가 필요할 수 있음.
+        next.push(spec);
+      }
+      if (usedMenuLink) {
+        next.push(
+          j.importSpecifier(j.identifier(LINK_NAME)) as ImportSpecifier,
+        );
+      }
+      if (usedMenuButton) {
+        next.push(
+          j.importSpecifier(j.identifier(BUTTON_NAME)) as ImportSpecifier,
+        );
+      }
+    });
+
+    if (touched) {
+      // 중복 제거 (같은 이름이 이미 import된 경우 대비).
+      const seen = new Set<string>();
+      path.node.specifiers = next.filter(spec => {
+        if (spec.type !== 'ImportSpecifier') return true;
+        const importedName = spec.imported.name;
+        const localName = spec.local?.name ?? importedName;
+        const key = `${importedName}::${localName}`;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      didChange = true;
+    }
+  });
+
+  if (!didChange) return file.source;
+
+  return root.toSource({ quote: 'single' });
+}
+
+function getJSXName(node: JSXOpeningElement): string | null {
+  const { name } = node;
+  if (name.type === 'JSXIdentifier') return name.name;
+  return null;
+}
+
+function renameJSXElement(
+  j: JSCodeshift,
+  path: ASTPath<JSXOpeningElement>,
+  newName: string,
+) {
+  const opening = path.node;
+  (opening.name as JSXIdentifier).name = newName;
+
+  // self-closing이 아니면 닫는 태그도 함께 갱신.
+  const parent = path.parent.node;
+  if (parent && parent.type === 'JSXElement' && parent.closingElement) {
+    const closingName = parent.closingElement.name;
+    if (closingName.type === 'JSXIdentifier') {
+      (closingName as JSXIdentifier).name = newName;
+    }
+  }
+}
+
+function addCommentBefore(
+  j: JSCodeshift,
+  path: ASTPath<JSXOpeningElement>,
+  message: string,
+) {
+  // JSX element 자체의 부모(보통 JSXElement)를 찾아 그 앞에 코멘트를 삽입.
+  let current: ASTPath | null = path;
+  while (current && current.node && current.node.type !== 'JSXElement') {
+    current = current.parent;
+  }
+  if (!current) return;
+
+  const node = current.node;
+  node.comments = node.comments ?? [];
+  node.comments.push(j.commentLine(message, true, false));
+}
+
+function addLeadingComment(
+  j: JSCodeshift,
+  root: Collection,
+  message: string,
+) {
+  const program = root.get().node.program;
+  const body = program.body;
+  if (!body || body.length === 0) return;
+  const first = body[0];
+  first.comments = first.comments ?? [];
+  first.comments.push(j.commentLine(message, true, false));
+}

package/dist/Components/Navigations/Menu/Menu.d.ts

@@ -1,81 +0,0 @@
-import { ReactNode } from 'react';
-import { MediumSystemIconName, SmallSystemIconName } from '../../DataDisplays/SystemIcon';
-import { IconButtonDropdownItem } from '../../Inputs';
-export interface MenuProps {
-    type?: 'main' | 'sub';
-    variant?: 'white' | 'gray';
-    name: string;
-    badgeCount?: string;
-    isSelected?: boolean;
-    leadingIcon?: MediumSystemIconName;
-    iconButtonName?: SmallSystemIconName;
-    onClick?: () => void;
-    onOptionClick?: () => void;
-    href?: string;
-    children?: ReactNode;
-    items?: IconButtonDropdownItem[];
-    selectedItem?: IconButtonDropdownItem;
-    onItemClick?: (item: IconButtonDropdownItem) => void;
-}
-/**
- * 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
- *
- * @param {Object} props
- * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 ('main', 'sub')
- * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형 ('white', 'gray')
- * @param {string} props.name - 메뉴에 표시될 텍스트
- * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
- * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
- * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘(medium 사이즈)
- * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
- * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
- * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
- * @param {string} [props.href] - 메뉴 링크 주소
- * @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
- * @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
- * @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
- * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 컴포넌트 사용 시 필요 (item: Item) => {}
- *
- * @example
- * // 기본 메뉴
- * <Menu
- *   name="메뉴 항목"
- *   onClick={() => console.log('메뉴 클릭')}
- * />
- *
- * // 아이콘과 뱃지가 있는 서브 메뉴
- * <Menu
- *   type="sub"
- *   name="서브 메뉴"
- *   leadingIcon="home"
- *   badgeCount="5"
- *   onClick={() => console.log('서브 메뉴 클릭')}
- * />
- *
- * // IconButtonDropdown과 함께 사용시
- * <Menu
- *   name="메뉴"
- *   onClick={() => console.log('메뉴 클릭')}
- *   iconButtonName="small_more_options"
- *   items={items}
- *   selectedItem={selectedItem}
- *   onItemClick={onItemClick}
- * />
- *
- * // 드롭다운이 필요하지 않은 옵션 메뉴(ex. 버튼 클릭 시 모달 오픈))
- * <Menu
- *   variant="gray"
- *   name="옵션 메뉴"
- *   isSelected={true}
- *   iconButtonName="small_more_options"
- *   onClick={() => console.log('메뉴 클릭')}
- *   onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
- * />
- * // 링크로 사용해야하는 메뉴
- * <Menu
- *   href="/test"
- *   name="테스트 메뉴"
- * />
- */
-declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onClick, onOptionClick, href, items, selectedItem, onItemClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
-export { Menu };

package/dist/Components/Navigations/Menu/Menu.js

@@ -1,62 +0,0 @@
-import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{twJoin as s,twMerge as i}from"tailwind-merge";import r from"next/link";import"../../DataDisplays/Avatar/Avatar.js";import{CountBadge as n}from"../../DataDisplays/CountBadge/CountBadge.js";import{Typography as a}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as p}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import"@wishket/yogokit";import"../../Inputs/AutoCompleteList/AutoCompleteList.parts.js";import"../../Inputs/Input/Input.js";import"../../Inputs/Input/PasswordInput.js";import"../../Inputs/Input/LabelInput.js";import"../../Inputs/Input/InputTypeSelector.js";import"../../Inputs/Button/Button.js";import"../../Inputs/Calendar/Calendar.utils.js";import"../../Inputs/Checkbox/Checkbox.js";import"../../Inputs/ChoiceChip/ChoiceChip.js";import{IconButton as m}from"../../Inputs/IconButton/IconButton.js";import"../../Inputs/Radio/Radio.js";import"../../Inputs/TextField/TextField.js";import"../../Inputs/CommentArea/CommentArea.js";import{IconButtonDropdown as l}from"../../Inputs/IconButtonDropdown/IconButtonDropdown.js";import"../../Inputs/FilterChip/FilterChip.js";
-/**
- * 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
- *
- * @param {Object} props
- * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 ('main', 'sub')
- * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형 ('white', 'gray')
- * @param {string} props.name - 메뉴에 표시될 텍스트
- * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
- * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
- * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘(medium 사이즈)
- * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
- * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
- * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
- * @param {string} [props.href] - 메뉴 링크 주소
- * @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
- * @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
- * @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
- * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 컴포넌트 사용 시 필요 (item: Item) => {}
- *
- * @example
- * // 기본 메뉴
- * <Menu
- *   name="메뉴 항목"
- *   onClick={() => console.log('메뉴 클릭')}
- * />
- *
- * // 아이콘과 뱃지가 있는 서브 메뉴
- * <Menu
- *   type="sub"
- *   name="서브 메뉴"
- *   leadingIcon="home"
- *   badgeCount="5"
- *   onClick={() => console.log('서브 메뉴 클릭')}
- * />
- *
- * // IconButtonDropdown과 함께 사용시
- * <Menu
- *   name="메뉴"
- *   onClick={() => console.log('메뉴 클릭')}
- *   iconButtonName="small_more_options"
- *   items={items}
- *   selectedItem={selectedItem}
- *   onItemClick={onItemClick}
- * />
- *
- * // 드롭다운이 필요하지 않은 옵션 메뉴(ex. 버튼 클릭 시 모달 오픈))
- * <Menu
- *   variant="gray"
- *   name="옵션 메뉴"
- *   isSelected={true}
- *   iconButtonName="small_more_options"
- *   onClick={() => console.log('메뉴 클릭')}
- *   onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
- * />
- * // 링크로 사용해야하는 메뉴
- * <Menu
- *   href="/test"
- *   name="테스트 메뉴"
- * />
- */const u=({type:u="main",variant:c="white",name:d,isSelected:y=!1,badgeCount:I,leadingIcon:g,iconButtonName:h,onClick:j,onOptionClick:C,href:w,items:x,selectedItem:B,onItemClick:f})=>{const b=!!(h&&x&&f&&B),k=!!h&&!!C,D=(t,e,o)=>{const r="sub"===t?"pl-12":"",n={white:s("hover:bg-w-gray-50",o&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:s("hover:bg-w-gray-100",o&&"bg-w-gray-100  hover:bg-w-gray-100")};return i("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",r,n[e])},v=/*#__PURE__*/t(e,{children:[g&&/*#__PURE__*/o(p,{testId:"design-system-menu-leading-icon",name:g,className:s("white"===c&&y&&"text-primary")}),
-/*#__PURE__*/o(a,{"data-testid":"design-system-menu-name",variant:"body16",className:"w-full select-none",children:d}),I&&/*#__PURE__*/o(n,{variant:((t,e)=>"white"!==t?"white_gray":e?"primary":"gray")(c,y),text:I,className:"relative",showZero:!0}),b&&/*#__PURE__*/o(l,{size:"sm",icon:h,items:x,selectedItem:B,onItemClick:f}),k&&/*#__PURE__*/o(m,{size:"sm",className:"shrink-0",onClick:t=>{t.stopPropagation(),C()},children:/*#__PURE__*/o(p,{name:h})})]});return w?/*#__PURE__*/o(r,{href:w,"data-testid":"design-system-menu",className:D(u,c,y),children:v}):/*#__PURE__*/o("button",{"data-testid":"design-system-menu",className:D(u,c,y),onClick:j,children:v})};export{u as Menu};

package/dist/cjs/Components/Navigations/Menu/Menu.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("next/link");require("../../DataDisplays/Avatar/Avatar.js");var s=require("../../DataDisplays/CountBadge/CountBadge.js"),n=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react");var i=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js"),require("@wishket/yogokit"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LabelInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Button/Button.js"),require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js");var a=require("../../Inputs/IconButton/IconButton.js");require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js");var o=require("../../Inputs/IconButtonDropdown/IconButtonDropdown.js");require("../../Inputs/FilterChip/FilterChip.js");exports.Menu=({type:u="main",variant:p="white",name:l,isSelected:c=!1,badgeCount:m,leadingIcon:d,iconButtonName:y,onClick:I,onOptionClick:g,href:j,items:h,selectedItem:q,onItemClick:x})=>{const C=!!(y&&h&&x&&q),w=!!y&&!!g,B=(e,r,s)=>{const n="sub"===e?"pl-12":"",i={white:t.twJoin("hover:bg-w-gray-50",s&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:t.twJoin("hover:bg-w-gray-100",s&&"bg-w-gray-100  hover:bg-w-gray-100")};return t.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",n,i[r])},v=/*#__PURE__*/e.jsxs(e.Fragment,{children:[d&&/*#__PURE__*/e.jsx(i.SystemIcon,{testId:"design-system-menu-leading-icon",name:d,className:t.twJoin("white"===p&&c&&"text-primary")}),
-/*#__PURE__*/e.jsx(n.Typography,{"data-testid":"design-system-menu-name",variant:"body16",className:"w-full select-none",children:l}),m&&/*#__PURE__*/e.jsx(s.CountBadge,{variant:((e,t)=>"white"!==e?"white_gray":t?"primary":"gray")(p,c),text:m,className:"relative",showZero:!0}),C&&/*#__PURE__*/e.jsx(o.IconButtonDropdown,{size:"sm",icon:y,items:h,selectedItem:q,onItemClick:x}),w&&/*#__PURE__*/e.jsx(a.IconButton,{size:"sm",className:"shrink-0",onClick:e=>{e.stopPropagation(),g()},children:/*#__PURE__*/e.jsx(i.SystemIcon,{name:y})})]});return j?/*#__PURE__*/e.jsx(r,{href:j,"data-testid":"design-system-menu",className:B(u,p,c),children:v}):/*#__PURE__*/e.jsx("button",{"data-testid":"design-system-menu",className:B(u,p,c),onClick:I,children:v})};