@wise/wds-codemods 0.0.1-experimental-6c2101b

package/src/transforms/button/__tests__/button.test.tsx

@@ -0,0 +1,175 @@
+import fs from 'node:fs/promises';
+
+import createTestTransform, {
+  createTestTransformWithoutPackage,
+} from '../../helpers/createTestTransform';
+import transformer from '../button';
+
+jest.mock(
+  '../../../utils',
+  (): Record<string, unknown> => ({
+    ...jest.requireActual('../../../utils'),
+    reportManualReview: jest.fn(),
+  }),
+);
+
+describe('button codemod', () => {
+  const transform = createTestTransform(transformer, [
+    { name: '@transferwise/components', version: '>=46.5.0' },
+  ]);
+
+  it('renames ActionButton to Button and adds v2 and size', () => {
+    const input = `
+    import { ActionButton } from '@transferwise/components';
+    export default function Test() {
+      return <ActionButton>Click</ActionButton>;
+    }
+            `;
+    const output = transform({ source: input });
+    expect(output).toContain('<Button v2 size="sm">Click</Button>');
+    expect(output).not.toContain('ActionButton');
+  });
+
+  it('adds v2 to Button if missing', () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return <Button htmlType="button">Click</Button>;
+      }
+    `;
+    const output = transform({ source: input });
+    expect(output).toContain('v2');
+  });
+
+  it('removes legacy props and adds new ones', () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return (
+          <Button priority="primary" size="xs" type="accent" htmlType="submit" sentiment="positive">Test</Button>
+        );
+      }
+    `;
+    const output = transform({ source: input });
+    expect(output).toContain('size="sm"');
+    expect(output).toContain('priority="primary"');
+    expect(output).toContain('type="submit"');
+    expect(output).not.toContain(
+      'priority="primary" size="xs" type="accent" htmlType="submit" sentiment="positive"',
+    );
+  });
+
+  it('converts enum props to string values', () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return (
+          <Button priority={Priority.SECONDARY} type={ControlType.NEGATIVE}>Secondary Negative</Button>
+        );
+      }
+    `;
+    const output = transform({ source: input });
+    expect(output).toContain('priority="secondary"');
+    expect(output).toContain('sentiment="negative"');
+  });
+
+  it('handles htmlType="submit" and legacy type/priority enums', () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return (
+          <Button htmlType="submit" type={ControlType.ACCENT} priority={Priority.PRIMARY} disabled>
+            Button Disabled
+          </Button>
+        );
+      }
+    `;
+    const output = transform({ source: input });
+    expect(output).toContain('type="submit"');
+    expect(output).toContain('priority="primary"');
+    expect(output).toContain('disabled');
+    expect(output).not.toContain('htmlType');
+  });
+
+  it('removes legacy props and keeps style and other non-legacy props', () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return (
+          <Button type={ControlType.NEGATIVE} style={{ color: 'red' }} priority={Priority.PRIMARY}>
+            Primary Negative
+          </Button>
+        );
+      }
+    `;
+    const output = transform({ source: input });
+    expect(output).toContain('sentiment="negative"');
+    expect(output).toContain('priority="primary"');
+    expect(output).toContain("style={{ color: 'red' }}");
+    expect(output).not.toContain('ControlType');
+    expect(output).not.toContain('Priority');
+  });
+
+  it('adds v2 to Button if missing and keeps block/as/href', () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return (
+          <Button as="a" href="/account" block>
+            Go to account
+          </Button>
+        );
+      }
+    `;
+    const output = transform({ source: input });
+    expect(output).toContain('v2');
+    expect(output).not.toContain('as="a"');
+    expect(output).toContain('href="/account"');
+    expect(output).toContain('block');
+  });
+
+  it('removes as="a" and adds href="#" if missing', () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return (
+          <Button as="a">Link</Button>
+        );
+      }
+    `;
+    const output = transform({ source: input });
+    expect(output).not.toContain('as="a"');
+    expect(output).toContain('href="#"');
+  });
+
+  it('reports ambiguous size prop (identifier)', async () => {
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return <Button size={dynamicSize}>Test</Button>;
+      }
+    `;
+    transform({ source: input });
+    const report = await fs.readFile('codemod-report.txt', 'utf8');
+    expect(report).toContain(
+      'Manual review required: prop "size" on <Button> has unsupported value "dynamicSize".',
+    );
+  });
+
+  it('skips transformation when package is not found', () => {
+    const noPackageTransform = createTestTransformWithoutPackage(
+      transformer,
+      '@transferwise/components',
+      '>=46.5.0',
+    );
+
+    const input = `
+      import { Button } from '@transferwise/components';
+      export default function Test() {
+        return <Button htmlType="button">Click</Button>;
+      }
+    `;
+    const output = noPackageTransform({ source: input });
+    expect(output.trim()).toBe(input.trim());
+  });
+});

package/src/transforms/button/button.ts

@@ -0,0 +1,453 @@
+import type { API, FileInfo, JSCodeshift, JSXIdentifier, Options } from 'jscodeshift';
+
+import reportManualReview from '../../utils/reportManualReview';
+import {
+  addAttributesIfMissing,
+  createReporter,
+  hasAttributeOnElement,
+  hasImport,
+  processIconChildren,
+  setNameIfJSXIdentifier,
+  validatePackageRequirements,
+} from '../helpers';
+
+export const parser = 'tsx';
+export const packageRequirements = [{ name: '@transferwise/components', version: '>=46.5.0' }];
+
+interface LegacyProps {
+  priority?: string;
+  size?: string;
+  type?: string;
+  htmlType?: string;
+  sentiment?: string;
+  [key: string]: unknown;
+}
+
+const priorityMapping: Record<string, Record<string, string>> = {
+  accent: {
+    primary: 'primary',
+    secondary: 'secondary-neutral',
+    tertiary: 'tertiary',
+  },
+  positive: {
+    primary: 'primary',
+    secondary: 'secondary-neutral',
+    tertiary: 'secondary-neutral',
+  },
+  negative: {
+    primary: 'primary',
+    secondary: 'secondary',
+    tertiary: 'secondary',
+  },
+};
+
+const sizeMap: Record<string, string> = {
+  EXTRA_SMALL: 'xs',
+  SMALL: 'sm',
+  MEDIUM: 'md',
+  LARGE: 'lg',
+  EXTRA_LARGE: 'xl',
+  xs: 'sm',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+};
+
+const resolveSize = (size?: string): string | undefined => {
+  if (!size) return size;
+  const match = /^Size\.(EXTRA_SMALL|SMALL|MEDIUM|LARGE|EXTRA_LARGE)$/u.exec(size);
+  if (match) {
+    return sizeMap[match[1]];
+  }
+  return sizeMap[size] || size;
+};
+
+const resolvePriority = (type?: string, priority?: string): string | undefined => {
+  if (type && priority) {
+    return priorityMapping[type]?.[priority] || priority;
+  }
+  return priority;
+};
+
+const resolveType = (type?: string, htmlType?: string): string | null => {
+  if (htmlType) {
+    return htmlType;
+  }
+
+  const legacyButtonTypes = [
+    'accent',
+    'negative',
+    'positive',
+    'primary',
+    'pay',
+    'secondary',
+    'danger',
+    'link',
+    'button',
+    'reset',
+    'submit',
+  ];
+  return type && legacyButtonTypes.includes(type) ? type : null;
+};
+
+const convertEnumValue = (value?: string): { converted: string | undefined; wasEnum: boolean } => {
+  if (!value) return { converted: value, wasEnum: false };
+
+  const strippedValue = value.replace(/^['"]|['"]$/gu, '');
+  const enumMapping: Record<string, string> = {
+    'Priority.SECONDARY': 'secondary',
+    'Priority.PRIMARY': 'primary',
+    'Priority.TERTIARY': 'tertiary',
+    'ControlType.NEGATIVE': 'negative',
+    'ControlType.POSITIVE': 'positive',
+    'ControlType.ACCENT': 'accent',
+    'ControlType.BUTTON': 'button',
+    'ControlType.RESET': 'reset',
+    'HtmlType.SUBMIT': 'submit',
+    'HtmlType.BUTTON': 'button',
+    'HtmlType.RESET': 'reset',
+    'Sentiment.NEGATIVE': 'negative',
+  };
+
+  const wasEnum = strippedValue in enumMapping;
+  const converted = enumMapping[strippedValue] || strippedValue;
+
+  return { converted, wasEnum };
+};
+
+/**
+ * This transform function modifies the Button and ActionButton components from the @transferwise/components library.
+ * It updates the ActionButton component to use the Button component with specific attributes and mappings.
+ * It also processes icon children and removes legacy props.
+ *
+ * @param {FileInfo} file - The file information object.
+ * @param {API} api - The API object for jscodeshift.
+ * @param {Options} options - The options object for jscodeshift.
+ * @returns {string} - The transformed source code.
+ */
+const transformer = (file: FileInfo, api: API, options: Options) => {
+  if (!validatePackageRequirements(options, packageRequirements)) {
+    return file.source;
+  }
+
+  const j: JSCodeshift = api.jscodeshift;
+  const root = j(file.source);
+  const manualReviewIssues: string[] = [];
+
+  // Create reporter instance
+  const reporter = createReporter(j, manualReviewIssues);
+
+  const { exists: hasButtonImport } = hasImport(root, '@transferwise/components', 'Button', j);
+  const { exists: hasActionButtonImport, remove: removeActionButtonImport } = hasImport(
+    root,
+    '@transferwise/components',
+    'ActionButton',
+    j,
+  );
+
+  const iconImports = new Set<string>();
+  root.find(j.ImportDeclaration, { source: { value: '@transferwise/icons' } }).forEach((path) => {
+    path.node.specifiers?.forEach((specifier) => {
+      if (
+        (specifier.type === 'ImportDefaultSpecifier' || specifier.type === 'ImportSpecifier') &&
+        specifier.local
+      ) {
+        const localName = (specifier.local as { name: string }).name;
+        iconImports.add(localName);
+      }
+    });
+  });
+
+  if (hasActionButtonImport) {
+    root.findJSXElements('ActionButton').forEach((path) => {
+      const { openingElement, closingElement } = path.node;
+
+      openingElement.name = setNameIfJSXIdentifier(openingElement.name, 'Button')!;
+      if (closingElement) {
+        closingElement.name = setNameIfJSXIdentifier(closingElement.name, 'Button')!;
+      }
+
+      addAttributesIfMissing(j, openingElement, [
+        { attribute: j.jsxAttribute(j.jsxIdentifier('v2')), name: 'v2' },
+        { attribute: j.jsxAttribute(j.jsxIdentifier('size'), j.literal('sm')), name: 'size' },
+      ]);
+
+      processIconChildren(j, path.node.children, iconImports, openingElement);
+
+      if ((openingElement.attributes ?? []).some((attr) => attr.type === 'JSXSpreadAttribute')) {
+        reporter.reportSpreadProps(path);
+      }
+
+      const legacyPropNames = ['priority', 'text'];
+      const legacyProps: LegacyProps = {};
+
+      openingElement.attributes?.forEach((attr) => {
+        if (attr.type === 'JSXAttribute' && attr.name && attr.name.type === 'JSXIdentifier') {
+          const { name } = attr.name;
+          if (legacyPropNames.includes(name)) {
+            if (attr.value) {
+              if (attr.value.type === 'StringLiteral') {
+                legacyProps[name] = attr.value.value;
+              } else if (attr.value.type === 'JSXExpressionContainer') {
+                reporter.reportAttribute(attr, path);
+              }
+            }
+          }
+        }
+      });
+
+      const hasTextProp = openingElement.attributes?.some(
+        (attr) =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'text',
+      );
+      const hasChildren = path.node.children?.some(
+        (child) =>
+          (child.type === 'JSXText' && child.value.trim() !== '') ||
+          child.type === 'JSXElement' ||
+          child.type === 'JSXExpressionContainer',
+      );
+
+      if (hasTextProp && hasChildren) {
+        reporter.reportPropWithChildren(path, 'text');
+      }
+
+      (path.node.children || []).forEach((child) => {
+        if (child.type === 'JSXExpressionContainer') {
+          const expr = child.expression;
+          if (
+            expr.type === 'ConditionalExpression' ||
+            expr.type === 'CallExpression' ||
+            expr.type === 'Identifier' ||
+            expr.type === 'MemberExpression'
+          ) {
+            reporter.reportAmbiguousChildren(path, 'icon');
+          }
+        }
+      });
+    });
+
+    removeActionButtonImport();
+  }
+
+  if (hasButtonImport) {
+    root.findJSXElements('Button').forEach((path) => {
+      const { openingElement } = path.node;
+
+      if (hasAttributeOnElement(openingElement, 'v2')) return;
+
+      addAttributesIfMissing(j, openingElement, [
+        { attribute: j.jsxAttribute(j.jsxIdentifier('v2')), name: 'v2' },
+      ]);
+
+      processIconChildren(j, path.node.children, iconImports, openingElement);
+
+      const legacyProps: LegacyProps = {};
+      const legacyPropNames = ['priority', 'size', 'type', 'htmlType', 'sentiment'];
+      const keepAttributes: typeof openingElement.attributes = [];
+
+      (openingElement.attributes ?? []).forEach((attr) => {
+        if (
+          attr.type === 'JSXAttribute' &&
+          attr.name &&
+          attr.name.type === 'JSXIdentifier' &&
+          legacyPropNames.includes(attr.name.name)
+        ) {
+          const { name } = attr.name;
+          let migrated = false;
+          let rawStringValue: string | undefined;
+
+          if (attr.value) {
+            if (attr.value.type === 'StringLiteral') {
+              rawStringValue = attr.value.value;
+              legacyProps[name] = attr.value.value;
+            } else if (attr.value.type === 'JSXExpressionContainer') {
+              rawStringValue = String(j(attr.value.expression).toSource());
+              const { converted } = convertEnumValue(rawStringValue);
+              legacyProps[name] = converted;
+            }
+          } else {
+            legacyProps[name] = undefined;
+          }
+
+          // Check if this is an enum value that should be removed
+          const { wasEnum } = convertEnumValue(rawStringValue);
+          if (rawStringValue && wasEnum) {
+            migrated = true; // Remove enum values
+          } else if (name === 'size') {
+            const rawValue = legacyProps.size;
+            const resolved = resolveSize(rawValue);
+            const supportedSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+            if (
+              typeof rawValue === 'string' &&
+              typeof resolved === 'string' &&
+              supportedSizes.includes(resolved)
+            ) {
+              migrated = true;
+            } else if (typeof rawValue === 'string') {
+              reporter.reportUnsupportedValue(path, 'size', rawValue);
+            } else if (rawValue !== undefined) {
+              reporter.reportAmbiguousExpression(path, 'size');
+            }
+          } else if (name === 'priority') {
+            const rawValue = legacyProps.priority;
+            const { converted } = convertEnumValue(rawValue);
+            const mapped = resolvePriority(legacyProps.type, converted);
+            const supportedPriorities = ['primary', 'secondary', 'tertiary', 'secondary-neutral'];
+            if (
+              typeof rawValue === 'string' &&
+              typeof mapped === 'string' &&
+              supportedPriorities.includes(mapped)
+            ) {
+              migrated = true;
+            } else if (typeof rawValue === 'string') {
+              reporter.reportUnsupportedValue(path, 'priority', rawValue);
+            } else if (rawValue !== undefined) {
+              reporter.reportAmbiguousExpression(path, 'priority');
+            }
+          } else if (name === 'type' || name === 'htmlType') {
+            const rawType = legacyProps.type;
+            const rawHtmlType = legacyProps.htmlType;
+            const resolvedType =
+              typeof rawType === 'string'
+                ? rawType
+                : rawType && typeof rawType === 'object'
+                  ? convertEnumValue(j(rawType).toSource()).converted
+                  : undefined;
+            const resolved = resolveType(resolvedType, rawHtmlType);
+            const supportedTypes = ['button', 'reset', 'submit'];
+            if (typeof resolved === 'string' && supportedTypes.includes(resolved)) {
+              migrated = true;
+            } else if (typeof rawType === 'string' || typeof rawHtmlType === 'string') {
+              reporter.reportUnsupportedValue(path, 'type', rawType ?? rawHtmlType ?? '');
+            } else if (rawType !== undefined || rawHtmlType !== undefined) {
+              reporter.reportAmbiguousExpression(path, 'type');
+            }
+          } else if (name === 'sentiment') {
+            const rawValue = legacyProps.sentiment;
+            if (rawValue === 'negative') {
+              migrated = true;
+            } else if (typeof rawValue === 'string') {
+              reporter.reportUnsupportedValue(path, 'sentiment', rawValue);
+            } else if (rawValue !== undefined) {
+              reporter.reportAmbiguousExpression(path, 'sentiment');
+            }
+          }
+
+          if (!migrated) keepAttributes.push(attr);
+        } else {
+          keepAttributes.push(attr);
+        }
+      });
+
+      const newAttributes = [];
+      const rawSize = legacyProps.size;
+      const resolvedSize = resolveSize(rawSize);
+      if (
+        typeof rawSize === 'string' &&
+        typeof resolvedSize === 'string' &&
+        ['xs', 'sm', 'md', 'lg', 'xl'].includes(resolvedSize)
+      ) {
+        newAttributes.push(j.jsxAttribute(j.jsxIdentifier('size'), j.literal(resolvedSize)));
+      }
+
+      const rawPriority = legacyProps.priority;
+      const { converted: convertedPriority } = convertEnumValue(rawPriority);
+      const mappedPriority = resolvePriority(legacyProps.type, convertedPriority);
+      if (
+        typeof rawPriority === 'string' &&
+        typeof mappedPriority === 'string' &&
+        ['primary', 'secondary', 'tertiary', 'secondary-neutral'].includes(mappedPriority)
+      ) {
+        newAttributes.push(j.jsxAttribute(j.jsxIdentifier('priority'), j.literal(mappedPriority)));
+      }
+
+      const rawType = legacyProps.type;
+      const rawHtmlType = legacyProps.htmlType;
+      const resolvedType =
+        typeof rawType === 'string'
+          ? rawType
+          : rawType && typeof rawType === 'object'
+            ? convertEnumValue(j(rawType).toSource()).converted
+            : undefined;
+      const resolved = resolveType(resolvedType, rawHtmlType);
+      const supportedTypes = ['button', 'reset', 'submit', 'negative'];
+      if (typeof resolved === 'string' && supportedTypes.includes(resolved)) {
+        if (resolved !== 'negative') {
+          newAttributes.push(j.jsxAttribute(j.jsxIdentifier('type'), j.literal(resolved)));
+        }
+        if (resolved === 'negative') {
+          newAttributes.push(j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')));
+        }
+      }
+
+      const rawSentiment = legacyProps.sentiment;
+      if (rawSentiment === 'negative') {
+        newAttributes.push(j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')));
+      }
+
+      Array.prototype.push.apply(newAttributes, keepAttributes);
+
+      // as/href logic as before
+      let asIndex = -1;
+      let asValue: string | null = null;
+      let hrefExists = false;
+      let asAmbiguous = false;
+      let hrefAmbiguous = false;
+
+      newAttributes.forEach((attr, index) => {
+        if (attr.type === 'JSXAttribute' && attr.name) {
+          if (attr.name.name === 'as') {
+            if (attr.value) {
+              if (attr.value.type === 'StringLiteral') {
+                asValue = attr.value.value;
+              } else if (attr.value.type === 'JSXExpressionContainer') {
+                asAmbiguous = true;
+                reporter.reportAttribute(attr, path);
+              }
+            }
+            asIndex = index;
+          }
+          if (attr.name.name === 'href') {
+            hrefExists = true;
+            if (attr.value && attr.value.type !== 'StringLiteral') {
+              hrefAmbiguous = true;
+              reporter.reportAttribute(attr, path);
+            }
+          }
+        }
+      });
+
+      if (asValue && asValue !== 'a') {
+        reporter.reportUnsupportedValue(path, 'as', asValue);
+      }
+
+      if (asValue === 'a') {
+        if (asIndex !== -1) {
+          newAttributes.splice(asIndex, 1);
+        }
+        if (!hrefExists) {
+          newAttributes.push(j.jsxAttribute(j.jsxIdentifier('href'), j.literal('#')));
+        }
+      }
+
+      openingElement.attributes = newAttributes;
+
+      if ((openingElement.attributes ?? []).some((attr) => attr.type === 'JSXSpreadAttribute')) {
+        reporter.reportSpreadProps(path);
+      }
+    });
+  }
+
+  if (manualReviewIssues.length > 0) {
+    manualReviewIssues.forEach(async (issue) => {
+      await reportManualReview(file.path, issue);
+    });
+  }
+
+  return root.toSource();
+};
+
+export default transformer;

package/src/transforms/helpers/__tests__/createTestTransform.test.ts

@@ -0,0 +1,27 @@
+import { applyTransform } from 'jscodeshift/src/testUtils';
+
+import createTestTransform from '../createTestTransform';
+
+jest.mock('jscodeshift/src/testUtils', () => ({
+  applyTransform: jest.fn(),
+}));
+
+describe('createTestTransform', () => {
+  it('should call applyTransform with the correct arguments', () => {
+    const mockTransformer = jest.fn();
+    const mockInput = { path: 'test-file.ts', source: 'const a = 1;' };
+    const mockOptions = {};
+    const mockTestOptions = { parser: 'tsx' };
+
+    const transform = createTestTransform(mockTransformer);
+
+    transform(mockInput);
+
+    expect(applyTransform).toHaveBeenCalledWith(
+      mockTransformer,
+      mockOptions,
+      mockInput,
+      mockTestOptions,
+    );
+  });
+});