@toss/tds-mobile-migration 2.1.0

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

@@ -0,0 +1,205 @@
+/**
+ * @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);
+        }
+      });
+    });
+
+  // Button 관련 컴포넌트 이름들을 관리하는 Set
+  const buttonComponentNames = new Set(['Button', 'ResultButton', 'CTAButton', 'FixedBottomCTA', 'BottomCTA']);
+
+  // Button 관련 컴포넌트가 packageName에서 하나도 import되지 않았다면 변환하지 않아요
+  const hasAnyButtonComponent = Array.from(buttonComponentNames).some(componentName =>
+    tdsImportedComponents.has(componentName)
+  );
+
+  if (!hasAnyButtonComponent) {
+    return fileInfo.source;
+  }
+
+  // styled-components로 확장된 Button 기반 컴포넌트들을 찾아서 Set에 추가
+  findStyledButtonComponents(j, root, buttonComponentNames);
+
+  // prop 이름 매핑 규칙
+  const propNameMap = {
+    type: 'color',
+    htmlType: 'type',
+    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];
+      }
+    });
+  }
+
+  // 컴포넌트 이름이 Button 관련 컴포넌트인지 확인하는 함수
+  function isButtonComponent(elementName) {
+    if (elementName.type === 'JSXIdentifier') {
+      const hasButtonName = buttonComponentNames.has(elementName.name);
+      const hasTdsImport = tdsImportedComponents.has(elementName.name);
+
+      // 기본 Button 컴포넌트들은 import 체크 필요
+      const baseButtonComponents = ['Button', 'ResultButton', 'CTAButton', 'FixedBottomCTA', 'BottomCTA'];
+      const isBaseComponent = baseButtonComponents.includes(elementName.name);
+
+      // 기본 컴포넌트는 import 체크 필요, styled 컴포넌트는 Set에만 있으면 됨
+      return hasButtonName && (isBaseComponent ? hasTdsImport : true);
+    }
+    return false;
+  }
+
+  // as prop으로 Button 컴포넌트를 사용하는지 확인하는 함수
+  function hasButtonAsProps(openingElement) {
+    return openingElement.attributes.some(
+      attr =>
+        attr.type === 'JSXAttribute' &&
+        attr.name.name === 'as' &&
+        attr.value.expression &&
+        attr.value.expression.type === 'Identifier' &&
+        buttonComponentNames.has(attr.value.expression.name) &&
+        tdsImportedComponents.has(attr.value.expression.name)
+    );
+  }
+
+  // 컴파운드 컴포넌트가 Button 관련인지 확인하는 함수
+  function isButtonCompoundComponent(objectName, propertyName) {
+    // 해당 객체가 @tds/mobile에서 import되지 않았으면 변환하지 않아요
+    if (!tdsImportedComponents.has(objectName)) {
+      return false;
+    }
+
+    // FixedBottomCTA.Double
+    if (objectName === 'FixedBottomCTA' && propertyName === 'Double') {
+      return true;
+    }
+    // BottomCTA.Single, BottomCTA.Double
+    if (objectName === 'BottomCTA' && (propertyName === 'Single' || propertyName === 'Double')) {
+      return true;
+    }
+    // BottomSheet.CTA, BottomSheet.DoubleCTA
+    if (objectName === 'BottomSheet' && (propertyName === 'CTA' || propertyName === 'DoubleCTA')) {
+      return true;
+    }
+    // ConfirmDialog.ConfirmButton, ConfirmDialog.CancelButton
+    if (objectName === 'ConfirmDialog' && (propertyName === 'ConfirmButton' || propertyName === 'CancelButton')) {
+      return true;
+    }
+    // Top.LowerButton, Top.RightButton, Top.LowerCTAButton - Button 기반
+    if (
+      objectName === 'Top' &&
+      (propertyName === 'LowerButton' || propertyName === 'RightButton' || propertyName === 'LowerCTAButton')
+    ) {
+      return true;
+    }
+
+    // 제외해야 할 컴포넌트들 (Button을 확장하지 않는 컴포넌트들)
+    const excludedComponents = [
+      'AccessoryButton', // PageNavbar.AccessoryButton, NavigationContext.AccessoryButton
+      'IconButton', // 일반적으로 Icon 기반 버튼
+      'TextButton', // TextButton은 별도 컴포넌트 (Button 확장 아님)
+      'LinkButton', // Link 기반 버튼들
+      'FloatingButton', // Floating 액션 버튼들
+      'TitleTextButton', // TextButton을 감싸고 있는 컴포넌트
+      'SubtitleTextButton', // TextButton을 감싸고 있는 컴포넌트
+    ];
+
+    if (excludedComponents.includes(propertyName)) {
+      return false;
+    }
+
+    return false;
+  }
+
+  // 모든 JSX 요소를 순회해요
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const elementName = openingElement.name;
+
+    // Button 관련 컴포넌트 직접 사용 (styled 컴포넌트 포함)
+    if (isButtonComponent(elementName)) {
+      transformPropNames(openingElement);
+    }
+    // as prop으로 Button 컴포넌트를 사용하는 경우
+    else if (hasButtonAsProps(openingElement)) {
+      transformPropNames(openingElement);
+    }
+    // 컴파운드 컴포넌트들
+    else if (elementName.type === 'JSXMemberExpression') {
+      const objectName = elementName.object.name;
+      const propertyName = elementName.property.name;
+
+      if (isButtonCompoundComponent(objectName, propertyName)) {
+        transformPropNames(openingElement);
+      }
+    }
+  });
+
+  return root.toSource({ quote: 'double' });
+};
+
+/**
+ * styled-components로 확장된 Button 기반 컴포넌트들을 찾는 함수
+ */
+const findStyledButtonComponents = (j, root, buttonComponentNames) => {
+  root.find(j.VariableDeclarator).forEach(path => {
+    const init = path.node.init;
+    if (!init) return;
+
+    // styled(Button)`` 패턴
+    if (
+      init.type === 'TaggedTemplateExpression' &&
+      init.tag.type === 'CallExpression' &&
+      init.tag.callee.name === 'styled' &&
+      init.tag.arguments[0] &&
+      buttonComponentNames.has(init.tag.arguments[0].name)
+    ) {
+      if (path.node.id && path.node.id.name) {
+        buttonComponentNames.add(path.node.id.name);
+      }
+    }
+
+    // styled(Button)({ ... }) 패턴
+    if (
+      init.type === 'CallExpression' &&
+      init.callee.type === 'CallExpression' &&
+      init.callee.callee.name === 'styled' &&
+      init.callee.arguments[0] &&
+      buttonComponentNames.has(init.callee.arguments[0].name)
+    ) {
+      if (path.node.id && path.node.id.name) {
+        buttonComponentNames.add(path.node.id.name);
+      }
+    }
+  });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;

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

@@ -0,0 +1,209 @@
+/**
+ * @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);
+        }
+      });
+    });
+
+  // Button 관련 컴포넌트 이름들을 관리하는 Set
+  const buttonComponentNames = new Set(['Button', 'ResultButton', 'CTAButton', 'FixedBottomCTA', 'BottomCTA']);
+
+  // Button 관련 컴포넌트가 packageName에서 하나도 import되지 않았다면 변환하지 않아요
+  const hasAnyButtonComponent = Array.from(buttonComponentNames).some(componentName =>
+    tdsImportedComponents.has(componentName)
+  );
+
+  if (!hasAnyButtonComponent) {
+    return fileInfo.source;
+  }
+
+  // styled-components로 확장된 Button 기반 컴포넌트들을 찾아서 Set에 추가
+  findStyledButtonComponents(j, root, buttonComponentNames);
+
+  // size 값 매핑 규칙
+  const sizeValueMap = {
+    tiny: 'small',
+    big: 'xlarge',
+  };
+
+  // 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];
+        }
+      }
+    });
+  }
+
+  // 컴포넌트 이름이 Button 관련 컴포넌트인지 확인하는 함수
+  function isButtonComponent(elementName) {
+    if (elementName.type === 'JSXIdentifier') {
+      return buttonComponentNames.has(elementName.name) && tdsImportedComponents.has(elementName.name);
+    }
+    return false;
+  }
+
+  // as prop으로 Button 컴포넌트를 사용하는지 확인하는 함수
+  function hasButtonAsProps(openingElement) {
+    return openingElement.attributes.some(
+      attr =>
+        attr.type === 'JSXAttribute' &&
+        attr.name.name === 'as' &&
+        attr.value.expression &&
+        attr.value.expression.type === 'Identifier' &&
+        buttonComponentNames.has(attr.value.expression.name) &&
+        tdsImportedComponents.has(attr.value.expression.name)
+    );
+  }
+
+  // 컴파운드 컴포넌트가 Button 관련인지 확인하는 함수
+  function isButtonCompoundComponent(objectName, propertyName) {
+    // 해당 객체가 @tds/mobile에서 import되지 않았으면 변환하지 않아요
+    if (!tdsImportedComponents.has(objectName)) {
+      return false;
+    }
+
+    // FixedBottomCTA.Double
+    if (objectName === 'FixedBottomCTA' && propertyName === 'Double') {
+      return true;
+    }
+    // BottomCTA.Single, BottomCTA.Double
+    if (objectName === 'BottomCTA' && (propertyName === 'Single' || propertyName === 'Double')) {
+      return true;
+    }
+    // BottomSheet.CTA, BottomSheet.DoubleCTA
+    if (objectName === 'BottomSheet' && (propertyName === 'CTA' || propertyName === 'DoubleCTA')) {
+      return true;
+    }
+    // ConfirmDialog.ConfirmButton, ConfirmDialog.CancelButton
+    if (objectName === 'ConfirmDialog' && (propertyName === 'ConfirmButton' || propertyName === 'CancelButton')) {
+      return true;
+    }
+    // Top.LowerButton, Top.RightButton, Top.LowerCTAButton - Button 기반
+    if (
+      objectName === 'Top' &&
+      (propertyName === 'LowerButton' || propertyName === 'RightButton' || propertyName === 'LowerCTAButton')
+    ) {
+      return true;
+    }
+    // AlertDialog.AlertButton - TextButton 기반이지만 같은 props 사용
+    if (objectName === 'AlertDialog' && propertyName === 'AlertButton') {
+      return true;
+    }
+
+    // 제외해야 할 컴포넌트들 (Button을 확장하지 않는 컴포넌트들)
+    const excludedComponents = [
+      'AccessoryButton', // PageNavbar.AccessoryButton, NavigationContext.AccessoryButton
+      'IconButton', // 일반적으로 Icon 기반 버튼
+      'TextButton', // TextButton은 별도 컴포넌트 (Button 확장 아님)
+      'LinkButton', // Link 기반 버튼들
+      'FloatingButton', // Floating 액션 버튼들
+      'TitleTextButton', // TextButton을 감싸고 있는 컴포넌트
+      'SubtitleTextButton', // TextButton을 감싸고 있는 컴포넌트
+    ];
+
+    if (excludedComponents.includes(propertyName)) {
+      return false;
+    }
+
+    return false;
+  }
+
+  // 모든 JSX 요소를 순회해요
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const elementName = openingElement.name;
+
+    // Button 관련 컴포넌트 직접 사용 (styled 컴포넌트 포함)
+    if (isButtonComponent(elementName)) {
+      transformSizeValues(openingElement);
+    }
+    // as prop으로 Button 컴포넌트를 사용하는 경우
+    else if (hasButtonAsProps(openingElement)) {
+      transformSizeValues(openingElement);
+    }
+    // 컴파운드 컴포넌트들
+    else if (elementName.type === 'JSXMemberExpression') {
+      const objectName = elementName.object.name;
+      const propertyName = elementName.property.name;
+
+      if (isButtonCompoundComponent(objectName, propertyName)) {
+        transformSizeValues(openingElement);
+      }
+    }
+  });
+
+  return root.toSource({ quote: 'double' });
+};
+
+/**
+ * styled-components로 확장된 Button 기반 컴포넌트들을 찾는 함수
+ */
+const findStyledButtonComponents = (j, root, buttonComponentNames) => {
+  root.find(j.VariableDeclarator).forEach(path => {
+    const init = path.node.init;
+    if (!init) return;
+
+    // styled(Button)`` 패턴
+    if (
+      init.type === 'TaggedTemplateExpression' &&
+      init.tag.type === 'CallExpression' &&
+      init.tag.callee.name === 'styled' &&
+      init.tag.arguments[0] &&
+      buttonComponentNames.has(init.tag.arguments[0].name)
+    ) {
+      if (path.node.id && path.node.id.name) {
+        buttonComponentNames.add(path.node.id.name);
+      }
+    }
+
+    // styled(Button)({ ... }) 패턴
+    if (
+      init.type === 'CallExpression' &&
+      init.callee.type === 'CallExpression' &&
+      init.callee.callee.name === 'styled' &&
+      init.callee.arguments[0] &&
+      buttonComponentNames.has(init.callee.arguments[0].name)
+    ) {
+      if (path.node.id && path.node.id.name) {
+        buttonComponentNames.add(path.node.id.name);
+      }
+    }
+  });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;

package/dist/tds-v2/codemod/commands/iconbutton-label-to-aria-label.cjs

@@ -0,0 +1,84 @@
+/**
+ * @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);
+        }
+      });
+    });
+
+  // IconButton 관련 컴포넌트가 packageName에서 import되지 않았다면 변환하지 않아요
+  if (!tdsImportedComponents.has('IconButton') && !tdsImportedComponents.has('ListRow')) {
+    return fileInfo.source;
+  }
+
+  // JSX 컴포넌트의 label prop을 aria-label로 변경하고 없으면 추가하는 함수
+  function transformLabelToAriaLabel(openingElement) {
+    const attributes = openingElement.attributes;
+    let hasLabel = false;
+    let hasAriaLabel = false;
+
+    // 기존 label과 aria-label 속성 확인해요
+    attributes.forEach(attr => {
+      if (attr.type === 'JSXAttribute') {
+        if (attr.name.name === 'label') {
+          hasLabel = true;
+          // label을 aria-label로 변경해요
+          attr.name.name = 'aria-label';
+        } else if (attr.name.name === 'aria-label') {
+          hasAriaLabel = true;
+        }
+      }
+    });
+
+    // label도 aria-label도 없으면 빈 string으로 aria-label 추가해요
+    if (!hasLabel && !hasAriaLabel) {
+      const ariaLabelAttr = j.jsxAttribute(j.jsxIdentifier('aria-label'), j.literal(''));
+      attributes.push(ariaLabelAttr);
+    }
+  }
+
+  // 모든 JSX 요소를 순회해요
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const elementName = openingElement.name;
+
+    // IconButton 직접 사용 - packageName에서 import된 경우에만
+    if (elementName.name === 'IconButton' && tdsImportedComponents.has('IconButton')) {
+      transformLabelToAriaLabel(openingElement);
+    }
+    // 컴파운드 컴포넌트들
+    else if (elementName.type === 'JSXMemberExpression') {
+      const objectName = elementName.object.name;
+      const propertyName = elementName.property.name;
+
+      // ListRow.IconButton - ListRow가 packageName에서 import된 경우에만
+      if (objectName === 'ListRow' && propertyName === 'IconButton' && tdsImportedComponents.has('ListRow')) {
+        transformLabelToAriaLabel(openingElement);
+      }
+    }
+  });
+
+  return root.toSource({ quote: 'double' });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;

package/dist/tds-v2/codemod/commands/listrow-verticalpadding-rename.cjs

@@ -0,0 +1,101 @@
+/**
+ * @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);
+        }
+      });
+    });
+
+  // ListRow 컴포넌트가 packageName에서 import되지 않았다면 변환하지 않아요
+  if (!tdsImportedComponents.has('ListRow')) {
+    return fileInfo.source;
+  }
+
+  // verticalPadding 값 매핑 규칙
+  const verticalPaddingValueMap = {
+    extraSmall: 'small',
+    'extraSmall-8': 'small',
+    small: 'medium',
+    'small-16': 'medium',
+    medium: 'large',
+    'medium-24': 'large',
+    large: 'xlarge',
+    'large-32': 'xlarge',
+  };
+
+  // JSX 컴포넌트의 verticalPadding prop 값 변경 공통 함수
+  function transformVerticalPaddingValues(openingElement) {
+    const attributes = openingElement.attributes;
+
+    // verticalPadding 속성 찾아서 값 변경해요
+    attributes.forEach(attr => {
+      if (attr.type === 'JSXAttribute' && attr.name.name === 'verticalPadding') {
+        let paddingValue = null;
+
+        // 속성 값 추출해요 - StringLiteral, Literal, JSXExpressionContainer 모두 처리해요
+        if (attr.value) {
+          if (attr.value.type === 'Literal' || attr.value.type === 'StringLiteral') {
+            paddingValue = attr.value.value;
+          } else if (attr.value.type === 'JSXExpressionContainer' && attr.value.expression.type === 'StringLiteral') {
+            paddingValue = attr.value.expression.value;
+          }
+        }
+
+        // 매핑된 값이 있으면 변경해요
+        if (paddingValue && verticalPaddingValueMap[paddingValue]) {
+          // JSXExpressionContainer인 경우와 아닌 경우를 구분해서 처리해요
+          if (attr.value.type === 'JSXExpressionContainer') {
+            attr.value.expression.value = verticalPaddingValueMap[paddingValue];
+          } else {
+            attr.value.value = verticalPaddingValueMap[paddingValue];
+          }
+        }
+      }
+    });
+  }
+
+  // 모든 JSX 요소를 순회해요
+  root.find(j.JSXElement).forEach(path => {
+    const openingElement = path.value.openingElement;
+    const elementName = openingElement.name;
+
+    // ListRow 직접 사용 - packageName에서 import된 경우에만
+    if (elementName.name === 'ListRow' && tdsImportedComponents.has('ListRow')) {
+      transformVerticalPaddingValues(openingElement);
+    }
+    // 컴파운드 컴포넌트들
+    else if (elementName.type === 'JSXMemberExpression') {
+      const objectName = elementName.object.name;
+      const propertyName = elementName.property.name;
+
+      // ListRow의 모든 서브 컴포넌트들 - ListRow가 packageName에서 import된 경우에만
+      if (objectName === 'ListRow' && tdsImportedComponents.has('ListRow')) {
+        transformVerticalPaddingValues(openingElement);
+      }
+    }
+  });
+
+  return root.toSource({ quote: 'double' });
+};
+
+const parser = 'tsx';
+
+module.exports = transform;
+module.exports.parser = parser;