@toss/tds-mobile-migration 2.1.0

package/cli.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import './dist/cli.js';

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,43 @@
+import chalk from 'chalk';
+import { Command } from 'commander';
+import { runCodemod as runMobileV2Codemod } from './tds-v2/index.js';
+import { runCodemod as runMobileV2CodemodForAIT } from './v2/index.js';
+const program = new Command();
+const TDS_V2_BREAKING_CHANGE_COMPONENTS = [
+    'textbutton-typography-to-size',
+    'badge-props-rename',
+    'top-subtitle-props-rename',
+    'badge-size-rename',
+    'boardrow-rightarrow-rename',
+    'bottomcta-component-rename',
+    'button-export-rename',
+    'button-size-rename',
+    'button-props-rename',
+    'iconbutton-label-to-aria-label',
+    'listrow-verticalpadding-rename',
+];
+const AIT_CODEMODS = ['provider'];
+program
+    .command('tds-v2 [destination]')
+    .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '{src,pages}/**/*.{ts,tsx}')
+    .action(async (_, { glob }) => {
+    try {
+        console.log(chalk.green('BC가 담긴 컴포넌트 마이그레이션을 진행해요'));
+        for (const component of TDS_V2_BREAKING_CHANGE_COMPONENTS) {
+            console.log(chalk.green(`BC Migration: ${component} 마이그레이션을 진행해요`));
+            await runMobileV2Codemod(component, { glob, packageName: '@toss/tds-mobile' });
+        }
+        for (const component of AIT_CODEMODS) {
+            console.log(chalk.green(`AIT Migration: ${component} 마이그레이션을 진행해요`));
+            await runMobileV2CodemodForAIT(component, { glob, packageName: '@toss/tds-mobile-ait' });
+        }
+        console.log(chalk.green('--------------------------------\n\n'));
+        console.log(chalk.green('v2 마이그레이션 작업들이 완료되었어요!'));
+    }
+    catch (error) {
+        console.error(error);
+        process.exit(1);
+    }
+});
+program.parse(process.argv);
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAEvE,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,MAAM,iCAAiC,GAAG;IACxC,+BAA+B;IAC/B,oBAAoB;IACpB,2BAA2B;IAC3B,mBAAmB;IACnB,4BAA4B;IAC5B,4BAA4B;IAC5B,sBAAsB;IACtB,oBAAoB;IACpB,qBAAqB;IACrB,gCAAgC;IAChC,gCAAgC;CACjC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,UAAU,CAAC,CAAC;AAElC,OAAO;KACJ,OAAO,CAAC,sBAAsB,CAAC;KAC/B,MAAM,CAAC,kBAAkB,EAAE,kDAAkD,EAAE,2BAA2B,CAAC;KAC3G,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,IAAI,EAAoB,EAAE,EAAE;IAC9C,IAAI,CAAC;QACH,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC,CAAC;QACrD,KAAK,MAAM,SAAS,IAAI,iCAAiC,EAAE,CAAC;YAC1D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,iBAAiB,SAAS,eAAe,CAAC,CAAC,CAAC;YACpE,MAAM,kBAAkB,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,kBAAkB,EAAE,CAAC,CAAC;QACjF,CAAC;QAED,KAAK,MAAM,SAAS,IAAI,YAAY,EAAE,CAAC;YACrC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,kBAAkB,SAAS,eAAe,CAAC,CAAC,CAAC;YACrE,MAAM,wBAAwB,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,sBAAsB,EAAE,CAAC,CAAC;QAC3F,CAAC;QAED,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,sCAAsC,CAAC,CAAC,CAAC;QAEjE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACrD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACrB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;AACH,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC"}

package/dist/tds-v2/codemod/commands/badge-props-rename.cjs

@@ -0,0 +1,81 @@
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const transform = (fileInfo, { jscodeshift: j }, options) => {
+  const root = j(fileInfo.source);
+  
+  // package name을 options에서 가져와요 (기본값: @tds/mobile)
+  const packageName = options['package-name'] || '@tds/mobile';
+
+  // packageName에서 import된 컴포넌트들을 추적하는 Set
+  const tdsImportedComponents = new Set();
+
+  // packageName import 구문들을 찾아서 컴포넌트 이름들을 수집해요
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+    })
+    .forEach(path => {
+      path.value.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          tdsImportedComponents.add(specifier.local.name);
+        }
+      });
+    });
+
+  // Badge 관련 컴포넌트가 packageName에서 import되지 않았다면 변환하지 않아요
+  if (!tdsImportedComponents.has('Badge') && !tdsImportedComponents.has('Paragraph') && !tdsImportedComponents.has('Top')) {
+    return fileInfo.source;
+  }
+
+  // prop 이름 매핑 규칙
+  const propNameMap = {
+    type: 'color',
+    style: 'variant',
+    htmlStyle: 'style',
+  };
+
+  // JSX 컴포넌트의 prop 이름 변경 공통 함수
+  function transformPropNames(openingElement) {
+    const attributes = openingElement.attributes;
+
+    // 모든 속성을 순회하면서 매핑된 prop 이름 변경
+    attributes.forEach(attr => {
+      if (attr.type === 'JSXAttribute' && propNameMap[attr.name.name]) {
+        attr.name.name = propNameMap[attr.name.name];
+      }
+    });
+  }
+
+  // 모든 JSX 요소를 순회해요
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const elementName = openingElement.name;
+
+    // Badge 직접 사용 - packageName에서 import된 경우에만
+    if (elementName.name === 'Badge' && tdsImportedComponents.has('Badge')) {
+      transformPropNames(openingElement);
+    }
+    // 컴파운드 컴포넌트들
+    else if (elementName.type === 'JSXMemberExpression') {
+      const objectName = elementName.object.name;
+      const propertyName = elementName.property.name;
+
+      // Paragraph.Badge - Paragraph가 packageName에서 import된 경우에만
+      if (objectName === 'Paragraph' && propertyName === 'Badge' && tdsImportedComponents.has('Paragraph')) {
+        transformPropNames(openingElement);
+      }
+      // Top.SubtitleBadges - Top이 packageName에서 import된 경우에만
+      else if (objectName === 'Top' && propertyName === 'SubtitleBadges' && tdsImportedComponents.has('Top')) {
+        transformPropNames(openingElement);
+      }
+    }
+  });
+
+  return root.toSource({ quote: 'double' });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;

package/dist/tds-v2/codemod/commands/badge-size-rename.cjs

@@ -0,0 +1,89 @@
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const transform = (fileInfo, { jscodeshift: j }, options) => {
+  const root = j(fileInfo.source);
+  
+  // package name을 options에서 가져와요 (기본값: @tds/mobile)
+  const packageName = options['package-name'] || '@tds/mobile';
+
+  // packageName에서 import된 컴포넌트들을 추적하는 Set
+  const tdsImportedComponents = new Set();
+
+  // packageName import 구문들을 찾아서 컴포넌트 이름들을 수집해요
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+    })
+    .forEach(path => {
+      path.value.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          tdsImportedComponents.add(specifier.local.name);
+        }
+      });
+    });
+
+  // Badge 관련 컴포넌트가 packageName에서 import되지 않았다면 변환하지 않아요
+  if (!tdsImportedComponents.has('Badge') && !tdsImportedComponents.has('Paragraph') && !tdsImportedComponents.has('Top')) {
+    return fileInfo.source;
+  }
+
+  // size 값 매핑 규칙
+  const sizeValueMap = {
+    tiny: 'xsmall',
+  };
+
+  // JSX 컴포넌트의 size prop 값 변경 공통 함수
+  function transformSizeValues(openingElement) {
+    const attributes = openingElement.attributes;
+
+    // size 속성 찾아서 값 변경
+    attributes.forEach(attr => {
+      if (attr.type === 'JSXAttribute' && attr.name.name === 'size') {
+        let sizeValue = null;
+
+        // 속성 값 추출해요 - StringLiteral과 Literal 둘 다 처리
+        if (attr.value && (attr.value.type === 'Literal' || attr.value.type === 'StringLiteral')) {
+          sizeValue = attr.value.value;
+        }
+
+        // 매핑된 값이 있으면 변경해요
+        if (sizeValue && sizeValueMap[sizeValue]) {
+          attr.value.value = sizeValueMap[sizeValue];
+        }
+      }
+    });
+  }
+
+  // 모든 JSX 요소를 순회해요
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const elementName = openingElement.name;
+
+    // Badge 직접 사용 - packageName에서 import된 경우에만
+    if (elementName.name === 'Badge' && tdsImportedComponents.has('Badge')) {
+      transformSizeValues(openingElement);
+    }
+    // 컴파운드 컴포넌트들
+    else if (elementName.type === 'JSXMemberExpression') {
+      const objectName = elementName.object.name;
+      const propertyName = elementName.property.name;
+
+      // Paragraph.Badge - Paragraph가 packageName에서 import된 경우에만
+      if (objectName === 'Paragraph' && propertyName === 'Badge' && tdsImportedComponents.has('Paragraph')) {
+        transformSizeValues(openingElement);
+      }
+      // Top.SubtitleBadges - Top이 packageName에서 import된 경우에만
+      else if (objectName === 'Top' && propertyName === 'SubtitleBadges' && tdsImportedComponents.has('Top')) {
+        transformSizeValues(openingElement);
+      }
+    }
+  });
+
+  return root.toSource({ quote: 'double' });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;

package/dist/tds-v2/codemod/commands/boardrow-rightarrow-rename.cjs

@@ -0,0 +1,89 @@
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const transform = (fileInfo, { jscodeshift: j }, options) => {
+  const root = j(fileInfo.source);
+  
+  // package name을 options에서 가져와요 (기본값: @tds/mobile)
+  const packageName = options['package-name'] || '@tds/mobile';
+
+  // packageName에서 import된 컴포넌트들을 추적하는 Set
+  const tdsImportedComponents = new Set();
+
+  // packageName import 구문들을 찾아서 컴포넌트 이름들을 수집해요
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+    })
+    .forEach(path => {
+      path.value.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          tdsImportedComponents.add(specifier.local.name);
+        }
+      });
+    });
+
+  // BoardRow 컴포넌트가 packageName에서 import되지 않았다면 변환하지 않아요
+  if (!tdsImportedComponents.has('BoardRow')) {
+    return fileInfo.source;
+  }
+
+  // 1. JSX 컴포넌트 이름 변경: BoardRow.RightArrow → BoardRow.ArrowIcon
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const closingElement = path.value.closingElement;
+
+    // JSXMemberExpression 체크 (BoardRow.RightArrow)
+    if (openingElement.name.type === 'JSXMemberExpression') {
+      const objectName = openingElement.name.object.name;
+      const propertyName = openingElement.name.property.name;
+
+      // BoardRow.RightArrow - BoardRow가 packageName에서 import된 경우에만
+      if (objectName === 'BoardRow' && propertyName === 'RightArrow' && tdsImportedComponents.has('BoardRow')) {
+        // opening element 변경
+        openingElement.name.property.name = 'ArrowIcon';
+
+        // closing element도 변경 (있는 경우)
+        if (closingElement && closingElement.name.type === 'JSXMemberExpression') {
+          closingElement.name.property.name = 'ArrowIcon';
+        }
+      }
+    }
+  });
+
+  // 2. TypeScript 타입 이름 변경: BoardRowRightArrowProps → BoardRowArrowIconProps
+  root.find(j.Identifier, { name: 'BoardRowRightArrowProps' }).forEach(path => {
+    path.node.name = 'BoardRowArrowIconProps';
+  });
+
+  // 3. TSTypeReference에서도 변경 (타입 참조에서)
+  root.find(j.TSTypeReference).forEach(path => {
+    if (path.node.typeName && path.node.typeName.name === 'BoardRowRightArrowProps') {
+      path.node.typeName.name = 'BoardRowArrowIconProps';
+    }
+  });
+
+  // 4. Import/Export에서도 변경
+  root.find(j.ImportSpecifier).forEach(path => {
+    if (path.node.imported.name === 'BoardRowRightArrowProps') {
+      path.node.imported.name = 'BoardRowArrowIconProps';
+      // local name도 같이 변경 (as로 rename 안한 경우)
+      if (path.node.local.name === 'BoardRowRightArrowProps') {
+        path.node.local.name = 'BoardRowArrowIconProps';
+      }
+    }
+  });
+
+  root.find(j.ExportSpecifier).forEach(path => {
+    if (path.node.exported.name === 'BoardRowRightArrowProps') {
+      path.node.exported.name = 'BoardRowArrowIconProps';
+    }
+  });
+
+  return root.toSource({ quote: 'double' });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;

package/dist/tds-v2/codemod/commands/bottomcta-component-rename.cjs

@@ -0,0 +1,70 @@
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const transform = (fileInfo, { jscodeshift: j }, options) => {
+  const root = j(fileInfo.source);
+  
+  // package name을 options에서 가져와요 (기본값: @tds/mobile)
+  const packageName = options['package-name'] || '@tds/mobile';
+
+  // packageName에서 import된 컴포넌트들을 추적하는 Set
+  const tdsImportedComponents = new Set();
+
+  // packageName import 구문들을 찾아서 컴포넌트 이름들을 수집해요
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+    })
+    .forEach(path => {
+      path.value.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          tdsImportedComponents.add(specifier.local.name);
+        }
+      });
+    });
+
+  // BottomCTA 또는 FixedBottomCTA 컴포넌트가 packageName에서 import되지 않았다면 변환하지 않아요
+  if (!tdsImportedComponents.has('BottomCTA') && !tdsImportedComponents.has('FixedBottomCTA')) {
+    return fileInfo.source;
+  }
+
+  // 컴포넌트 이름 매핑 규칙
+  const componentNameMap = {
+    TypeA: 'Single',
+    TypeB: 'Double',
+  };
+
+  // 모든 JSX 요소를 순회해요
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const closingElement = path.value.closingElement;
+
+    // 컴파운드 컴포넌트인지 확인해요 (BottomCTA.TypeA, BottomCTA.TypeB, FixedBottomCTA.TypeA, FixedBottomCTA.TypeB)
+    if (openingElement.name && openingElement.name.type === 'JSXMemberExpression') {
+      const objectName = openingElement.name.object.name;
+      const propertyName = openingElement.name.property.name;
+
+      // BottomCTA 또는 FixedBottomCTA 컴포넌트의 TypeA, TypeB인 경우에만 처리해요 - packageName에서 import된 경우에만
+      if (
+        (objectName === 'BottomCTA' || objectName === 'FixedBottomCTA') &&
+        componentNameMap[propertyName] &&
+        tdsImportedComponents.has(objectName)
+      ) {
+        // opening element 이름 변경해요
+        openingElement.name.property.name = componentNameMap[propertyName];
+
+        // closing element도 있으면 변경해요
+        if (closingElement && closingElement.name && closingElement.name.type === 'JSXMemberExpression') {
+          closingElement.name.property.name = componentNameMap[propertyName];
+        }
+      }
+    }
+  });
+
+  return root.toSource({ quote: 'single' });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;

package/dist/tds-v2/codemod/commands/button-export-rename.cjs

@@ -0,0 +1,120 @@
+/**
+ * @type {import('jscodeshift').Transform}
+ */
+const transform = (fileInfo, { jscodeshift: j }, options) => {
+  const root = j(fileInfo.source);
+  
+  // package name을 options에서 가져와요 (기본값: @tds/mobile)
+  const packageName = options['package-name'] || '@tds/mobile';
+
+  // packageName에서 import하는 export들을 추적하는 Set
+  const tdsImportedExports = new Set();
+
+  // export 이름 매핑 규칙
+  const exportNameMap = {
+    TDSButtonStyle: 'TDSButtonVariant',
+    TDSButtonType: 'TDSButtonColor',
+  };
+
+  const identifiersToRename = new Map();
+  let hasChanges = false;
+
+  // packageName에서 import하는 구문들을 찾아서 처리해요
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+    })
+    .forEach(path => {
+      path.value.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          // named import 처리 (import { TDSButtonStyle, TDSButtonType } from packageName)
+          if (specifier.imported && specifier.imported.name) {
+            const importedName = specifier.imported.name;
+            const localName = specifier.local.name;
+
+            // export 이름을 Set에 추가해요
+            tdsImportedExports.add(importedName);
+
+            if (exportNameMap[importedName]) {
+              // import 시 이름 변경해요
+              specifier.imported.name = exportNameMap[importedName];
+
+              // alias가 없는 경우에만 local name도 변경하고 rename 대상에 추가해요
+              if (localName === importedName) {
+                specifier.local.name = exportNameMap[importedName];
+                // alias가 없는 경우에만 rename 대상으로 추가해요
+                identifiersToRename.set(localName, exportNameMap[importedName]);
+              }
+
+              hasChanges = true;
+            }
+          }
+        }
+      });
+    });
+
+  // type import도 처리해요 (import type { TDSButtonStyle } from packageName)
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+      importKind: 'type',
+    })
+    .forEach(path => {
+      path.value.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier' && specifier.imported && specifier.imported.name) {
+          const importedName = specifier.imported.name;
+          const localName = specifier.local.name;
+
+          // export 이름을 Set에 추가해요
+          tdsImportedExports.add(importedName);
+
+          if (exportNameMap[importedName]) {
+            specifier.imported.name = exportNameMap[importedName];
+
+            // alias가 없는 경우에만 local name도 변경하고 rename 대상에 추가해요
+            if (localName === importedName) {
+              specifier.local.name = exportNameMap[importedName];
+              // alias가 없는 경우에만 rename 대상으로 추가해요
+              identifiersToRename.set(localName, exportNameMap[importedName]);
+            }
+
+            hasChanges = true;
+          }
+        }
+      });
+    });
+
+  // Button 관련 export가 packageName에서 import되지 않았다면 변환하지 않아요
+  if (!tdsImportedExports.has('TDSButtonStyle') && !tdsImportedExports.has('TDSButtonType')) {
+    return fileInfo.source;
+  }
+
+  // import 외의 일반 코드에서 Button 관련 식별자 이름 변경 적용해요
+  identifiersToRename.forEach((newName, oldName) => {
+    root
+      .find(j.Identifier, { name: oldName })
+      .filter(path => {
+        // 이미 import 구문에서 처리된 경우 건너뛰어요
+        if (path.parent.value.type === 'ImportSpecifier') return false;
+        // 멤버 접근의 프로퍼티인 경우 건너뛰어요 (예: obj.TDSButtonStyle)
+        if (
+          path.parent.value.type === 'MemberExpression' &&
+          path.parent.value.property === path.node &&
+          !path.parent.value.computed
+        ) {
+          return false;
+        }
+        return true;
+      })
+      .forEach(path => {
+        path.node.name = newName;
+      });
+  });
+
+  return hasChanges ? root.toSource({ quote: 'double' }) : fileInfo.source;
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;