@wise/wds-codemods 0.0.1-experimental-731cdc7 → 0.0.1-experimental-cbae00f

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

@@ -0,0 +1,153 @@
+import fs from 'node:fs/promises';
+
+import createTestTransform 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);
+  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('<Button v2 type="button">Click</Button>');
+  });
+
+  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".',
+    );
+  });
+});

package/src/transforms/button/button.ts

@@ -0,0 +1,418 @@
+import type { API, FileInfo, JSCodeshift, JSXIdentifier, Options } from 'jscodeshift';
+
+import reportManualReview from '../../utils/reportManualReview';
+import hasImport from '../helpers/hasImport';
+import processIconChildren from '../helpers/iconUtils';
+import {
+  addAttributesIfMissing,
+  hasAttributeOnElement,
+  setNameIfJSXIdentifier,
+} from '../helpers/jsxElementUtils';
+import { createReporter } from '../helpers/jsxReportingUtils';
+
+export const parser = 'tsx';
+
+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',
+  ];
+  return type && legacyButtonTypes.includes(type) ? type : null;
+};
+
+const convertEnumValue = (value?: string): string | undefined => {
+  if (!value) return value;
+  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',
+  };
+  return enumMapping[strippedValue] || strippedValue;
+};
+
+/**
+ * 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) => {
+  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'];
+
+      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') {
+                legacyProps[name] = convertEnumValue(String(j(attr.value.expression).toSource()));
+              }
+            } else {
+              legacyProps[name] = undefined;
+            }
+          }
+        }
+      });
+
+      if (openingElement.attributes) {
+        openingElement.attributes = openingElement.attributes.filter(
+          (attr) =>
+            !(
+              attr.type === 'JSXAttribute' &&
+              attr.name &&
+              legacyPropNames.includes((attr.name as JSXIdentifier).name)
+            ),
+        );
+      }
+
+      if ('size' in legacyProps) {
+        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)
+        ) {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('size'), j.literal(resolved)),
+          );
+        } else if (typeof rawValue === 'string') {
+          reporter.reportUnsupportedValue(path, 'size', rawValue);
+        } else if (rawValue !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'size');
+        }
+      }
+
+      if ('priority' in legacyProps) {
+        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)
+        ) {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('priority'), j.literal(mapped)),
+          );
+        } else if (typeof rawValue === 'string') {
+          reporter.reportUnsupportedValue(path, 'priority', rawValue);
+        } else if (rawValue !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'priority');
+        }
+      }
+
+      if ('type' in legacyProps || 'htmlType' in legacyProps) {
+        const rawType = legacyProps.type;
+        const rawHtmlType = legacyProps.htmlType;
+
+        const resolvedType =
+          typeof rawType === 'string'
+            ? rawType
+            : rawType && typeof rawType === 'object'
+              ? convertEnumValue(j(rawType).toSource())
+              : undefined;
+
+        const resolved = resolveType(resolvedType, rawHtmlType);
+
+        const supportedTypes = [
+          'accent',
+          'negative',
+          'positive',
+          'primary',
+          'pay',
+          'secondary',
+          'danger',
+          'link',
+          'submit',
+          'button',
+          'reset',
+        ];
+
+        if (typeof resolved === 'string' && supportedTypes.includes(resolved)) {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('type'), j.literal(resolved)),
+          );
+
+          if (resolved === 'negative') {
+            openingElement.attributes?.push(
+              j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')),
+            );
+          }
+        } else if (typeof rawType === 'string' || typeof rawHtmlType === 'string') {
+          reporter.reportUnsupportedValue(path, 'type', rawType ?? rawHtmlType ?? '');
+        } else if (rawType !== undefined || rawHtmlType !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'type');
+        }
+      }
+
+      if ('sentiment' in legacyProps) {
+        const rawValue = legacyProps.sentiment;
+        if (rawValue === 'negative') {
+          openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('sentiment'), j.literal('negative')),
+          );
+        } else if (typeof rawValue === 'string') {
+          reporter.reportUnsupportedValue(path, 'sentiment', rawValue);
+        } else if (rawValue !== undefined) {
+          reporter.reportAmbiguousExpression(path, 'sentiment');
+        }
+      }
+
+      let asIndex = -1;
+      let asValue: string | null = null;
+      let hrefExists = false;
+      let asAmbiguous = false;
+      let hrefAmbiguous = false;
+
+      openingElement.attributes?.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) {
+          openingElement.attributes = openingElement.attributes?.filter(
+            (_, idx) => idx !== asIndex,
+          );
+        }
+        if (!hrefExists) {
+          openingElement.attributes = [
+            ...(openingElement.attributes ?? []),
+            j.jsxAttribute(j.jsxIdentifier('href'), j.literal('#')),
+          ];
+        }
+      }
+
+      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,
+    );
+  });
+});

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

@@ -0,0 +1,52 @@
+import jscodeshift from 'jscodeshift';
+
+import hasImport from '../hasImport';
+
+describe('hasImport', () => {
+  function getRoot(source: string) {
+    return jscodeshift(source);
+  }
+
+  it('returns true if the named import exists from the given module', () => {
+    const source = `import { Button, Card } from '@transferwise/components';`;
+    const root = getRoot(source);
+    expect(hasImport(root, '@transferwise/components', 'Button', jscodeshift).exists).toBe(true);
+    expect(hasImport(root, '@transferwise/components', 'Card', jscodeshift).exists).toBe(true);
+  });
+
+  it('returns false if the named import does not exist from the given module', () => {
+    const source = `import { Button } from '@transferwise/components';`;
+    const root = getRoot(source);
+    expect(hasImport(root, '@transferwise/components', 'Card', jscodeshift).exists).toBe(false);
+  });
+
+  it('returns false if the import is from a different module', () => {
+    const source = `import { Button } from 'other-lib';`;
+    const root = getRoot(source);
+    expect(hasImport(root, '@transferwise/components', 'Button', jscodeshift).exists).toBe(false);
+  });
+
+  it('returns false if there are no imports at all', () => {
+    const source = `const a = 1;`;
+    const root = getRoot(source);
+    expect(hasImport(root, '@transferwise/components', 'Button', jscodeshift).exists).toBe(false);
+  });
+
+  it('returns true for default imports', () => {
+    const source = `import Button from '@transferwise/components';`;
+    const root = getRoot(source);
+    expect(hasImport(root, '@transferwise/components', 'Button', jscodeshift).exists).toBe(true);
+  });
+
+  it('returns true for aliased imports', () => {
+    const source = `import { Button as TWButton } from '@transferwise/components';`;
+    const root = getRoot(source);
+    expect(hasImport(root, '@transferwise/components', 'Button', jscodeshift).exists).toBe(true);
+  });
+
+  it('returns false for namespace imports', () => {
+    const source = `import * as TW from '@transferwise/components';`;
+    const root = getRoot(source);
+    expect(hasImport(root, '@transferwise/components', 'Button', jscodeshift).exists).toBe(false);
+  });
+});