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

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);
+  });
+});

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

@@ -0,0 +1,207 @@
+import jscodeshift, {
+  type JSXAttribute,
+  type JSXElement,
+  type JSXExpressionContainer,
+  type JSXOpeningElement,
+} from 'jscodeshift';
+
+import { processIconChildren } from '..';
+
+describe('processIconChildren', () => {
+  const j = jscodeshift;
+
+  function getRoot(source: string) {
+    return j(source);
+  }
+
+  function findOpeningElement(root: ReturnType<typeof jscodeshift>) {
+    return (root.find(j.JSXOpeningElement).at(0).get() as { node: JSXOpeningElement }).node;
+  }
+
+  it('adds addonStart attribute when icon is first child', () => {
+    const source = `
+      <Button>
+        <IconA />
+        <OtherComponent />
+      </Button>
+    `;
+    const root = getRoot(source);
+    const openingElement = findOpeningElement(root);
+    const iconImports = new Set(['IconA']);
+    const children = root
+      .find(j.JSXElement)
+      .nodes()
+      .filter(
+        (node) =>
+          node.openingElement.name.type === 'JSXIdentifier' &&
+          node.openingElement.name.name !== 'Button',
+      );
+
+    const childrenArray: (JSXElement | JSXExpressionContainer | unknown)[] = children;
+
+    processIconChildren(j, childrenArray, iconImports, openingElement);
+
+    expect(openingElement.attributes).toHaveLength(1);
+    expect((openingElement.attributes![0] as JSXAttribute).name.name).toBe('addonStart');
+    const attrValue = (openingElement.attributes![0] as JSXAttribute).value;
+    // Check that there is an attribute named 'addonStart' and it contains 'IconA' somewhere in its value stringified
+    const addonStartAttr = openingElement.attributes!.find(
+      (attr) => (attr as JSXAttribute).name.name === 'addonStart',
+    ) as JSXAttribute | undefined;
+    expect(addonStartAttr).toBeDefined();
+    const attrValueStr = addonStartAttr && JSON.stringify(addonStartAttr.value);
+    expect(attrValueStr).toContain('IconA');
+    expect(childrenArray).toHaveLength(1);
+    const childOpeningElement = (childrenArray[0] as JSXElement).openingElement;
+    expect(
+      childOpeningElement.name.type === 'JSXIdentifier' ? childOpeningElement.name.name : undefined,
+    ).toBe('OtherComponent');
+  });
+
+  it('adds addonEnd attribute when icon is last child', () => {
+    const source = `
+      <Button>
+        <OtherComponent />
+        <IconB />
+      </Button>
+    `;
+    const root = getRoot(source);
+    const openingElement = findOpeningElement(root);
+    const iconImports = new Set(['IconB']);
+    const children = root
+      .find(j.JSXElement)
+      .nodes()
+      .filter(
+        (node) =>
+          node.openingElement.name.type === 'JSXIdentifier' &&
+          node.openingElement.name.name !== 'Button',
+      );
+
+    const childrenArray: (JSXElement | JSXExpressionContainer | unknown)[] = children;
+
+    processIconChildren(j, childrenArray, iconImports, openingElement);
+
+    expect(openingElement.attributes).toHaveLength(1);
+    expect((openingElement.attributes![0] as JSXAttribute).name.name).toBe('addonEnd');
+    const attrValueB = (openingElement.attributes![0] as JSXAttribute).value;
+    const addonEndAttr = openingElement.attributes!.find(
+      (attr) => (attr as JSXAttribute).name.name === 'addonEnd',
+    ) as JSXAttribute | undefined;
+    expect(addonEndAttr).toBeDefined();
+    const attrValueStrB = addonEndAttr && JSON.stringify(addonEndAttr.value);
+    expect(attrValueStrB).toContain('IconB');
+    expect(childrenArray).toHaveLength(1);
+    const childName = (childrenArray[0] as JSXElement).openingElement.name;
+    expect(childName.type === 'JSXIdentifier' ? childName.name : undefined).toBe('OtherComponent');
+  });
+
+  it('unwraps JSXExpressionContainer and processes icon child', () => {
+    const source = `
+      <Button>
+        {<IconC />}
+        <OtherComponent />
+      </Button>
+    `;
+    const root = getRoot(source);
+    const openingElement = findOpeningElement(root);
+    const iconImports = new Set(['IconC']);
+    const children = root
+      .find(j.JSXElement)
+      .nodes()
+      .filter(
+        (node) =>
+          node.openingElement.name.type === 'JSXIdentifier' &&
+          node.openingElement.name.name !== 'Button',
+      );
+
+    const wrappedIconChild: JSXExpressionContainer = {
+      type: 'JSXExpressionContainer',
+      expression: children[0],
+    };
+    const childrenArray: (JSXElement | JSXExpressionContainer | unknown)[] = [
+      wrappedIconChild,
+      children[1],
+    ];
+
+    processIconChildren(j, childrenArray, iconImports, openingElement);
+
+    expect(openingElement.attributes).toHaveLength(1);
+    expect((openingElement.attributes![0] as JSXAttribute).name.name).toBe('addonStart');
+    const attrValue = (openingElement.attributes![0] as JSXAttribute).value;
+    const addonStartAttrC = openingElement.attributes!.find(
+      (attr) => (attr as JSXAttribute).name.name === 'addonStart',
+    ) as JSXAttribute | undefined;
+    expect(addonStartAttrC).toBeDefined();
+    const attrValueStrC = addonStartAttrC && JSON.stringify(addonStartAttrC.value);
+    expect(attrValueStrC).toContain('IconC');
+    expect(childrenArray).toHaveLength(1);
+    const childName = (childrenArray[0] as JSXElement).openingElement.name;
+    expect(childName.type === 'JSXIdentifier' ? childName.name : undefined).toBe('OtherComponent');
+  });
+
+  it('does nothing if no icon child found', () => {
+    const source = `
+      <Button>
+        <Component1 />
+        <Component2 />
+      </Button>
+    `;
+    const root = getRoot(source);
+    const openingElement = findOpeningElement(root);
+    const iconImports = new Set(['IconX']);
+    const children = root
+      .find(j.JSXElement)
+      .nodes()
+      .filter(
+        (node) =>
+          node.openingElement.name.type === 'JSXIdentifier' &&
+          node.openingElement.name.name !== 'Button',
+      );
+
+    const childrenArray: (JSXElement | JSXExpressionContainer | unknown)[] = children;
+
+    processIconChildren(j, childrenArray, iconImports, openingElement);
+
+    expect(openingElement.attributes).toHaveLength(0);
+    expect(childrenArray).toHaveLength(2);
+  });
+
+  it('does nothing if children is undefined', () => {
+    const source = `<Button />`;
+    const root = getRoot(source);
+    const openingElement = findOpeningElement(root);
+    const iconImports = new Set(['IconY']);
+
+    processIconChildren(j, undefined, iconImports, openingElement);
+
+    expect(openingElement.attributes).toHaveLength(0);
+  });
+
+  it('does nothing if openingElement.attributes is undefined', () => {
+    const source = `
+      <Button>
+        <IconZ />
+      </Button>
+    `;
+    const root = getRoot(source);
+    const iconImports = new Set(['IconZ']);
+    const children = root
+      .find(j.JSXElement)
+      .nodes()
+      .filter(
+        (node) =>
+          node.openingElement.name.type === 'JSXIdentifier' &&
+          node.openingElement.name.name !== 'Button',
+      );
+
+    const originalOpeningElement = findOpeningElement(root);
+    const openingElement = { ...originalOpeningElement, attributes: undefined };
+
+    const childrenArray: (JSXElement | JSXExpressionContainer | unknown)[] = children;
+
+    processIconChildren(j, childrenArray, iconImports, openingElement);
+
+    expect(openingElement.attributes).toBeUndefined();
+    expect(childrenArray).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,130 @@
+import jscodeshift, { type JSXAttribute, type JSXElement, JSXIdentifier } from 'jscodeshift';
+
+import {
+  addAttributesIfMissing,
+  hasAttribute,
+  hasAttributeOnElement,
+  setNameIfJSXIdentifier,
+} from '../jsxElementUtils';
+
+describe('jsxElementUtils', () => {
+  function getRoot(source: string) {
+    return jscodeshift(source);
+  }
+
+  describe('setNameIfJSXIdentifier', () => {
+    it('renames JSXIdentifier element name', () => {
+      const source = `<OldName />`;
+      const root = getRoot(source);
+      const element = (root.findJSXElements('OldName').at(0).get() as { node: JSXElement }).node;
+      const result = setNameIfJSXIdentifier(element.openingElement.name, 'NewName');
+      expect(result).toMatchObject({ type: 'JSXIdentifier', name: 'NewName' });
+    });
+
+    it('returns the same element if not JSXIdentifier', () => {
+      const source = `<A.B />`;
+      const root = getRoot(source);
+      // Find the first JSXElement (which will be <A.B />)
+      const found = root.find(jscodeshift.JSXElement);
+      if (found.length === 0) {
+        throw new Error('No JSX elements found for A.B');
+      }
+      const element = (found.at(0).get() as { node: JSXElement }).node;
+      const result = setNameIfJSXIdentifier(element.openingElement.name, 'NewName');
+      expect(result).toEqual(element.openingElement.name);
+    });
+
+    it('returns undefined if elementName is undefined', () => {
+      const result = setNameIfJSXIdentifier(undefined, 'NewName');
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('hasAttribute', () => {
+    it('returns true if attribute with given name exists', () => {
+      const source = `<div foo bar />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      expect(hasAttribute(element.openingElement.attributes, 'foo')).toBe(true);
+      expect(hasAttribute(element.openingElement.attributes, 'bar')).toBe(true);
+    });
+
+    it('returns false if attribute with given name does not exist', () => {
+      const source = `<div foo />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      expect(hasAttribute(element.openingElement.attributes, 'baz')).toBe(false);
+    });
+
+    it('ignores JSXSpreadAttribute and returns false if no matching JSXAttribute', () => {
+      const source = `<div {...props} />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      expect(hasAttribute(element.openingElement.attributes, 'foo')).toBe(false);
+    });
+
+    it('returns false if attributes is undefined or not array', () => {
+      expect(hasAttribute(undefined, 'foo')).toBe(false);
+      expect(hasAttribute(null as never, 'foo')).toBe(false);
+      expect(hasAttribute([], 'foo')).toBe(false);
+    });
+  });
+
+  describe('hasAttributeOnElement', () => {
+    it('returns true if openingElement has attribute', () => {
+      const source = `<div foo />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      expect(hasAttributeOnElement(element.openingElement, 'foo')).toBe(true);
+    });
+
+    it('returns false if openingElement does not have attribute', () => {
+      const source = `<div bar />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      expect(hasAttributeOnElement(element.openingElement, 'foo')).toBe(false);
+    });
+  });
+
+  describe('addAttributesIfMissing', () => {
+    it('adds attributes if missing', () => {
+      const source = `<div foo />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      const j = jscodeshift;
+      const newAttr = j.jsxAttribute(j.jsxIdentifier('bar'));
+      addAttributesIfMissing(j, element.openingElement, [{ attribute: newAttr, name: 'bar' }]);
+      expect(hasAttributeOnElement(element.openingElement, 'bar')).toBe(true);
+    });
+
+    it('does not add attribute if already present', () => {
+      const source = `<div foo />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      const j = jscodeshift;
+      const existingAttr = element.openingElement.attributes?.find(
+        (attr) =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'foo',
+      ) as JSXAttribute;
+      addAttributesIfMissing(j, element.openingElement, [{ attribute: existingAttr, name: 'foo' }]);
+      // attributes length should remain 1
+      expect(
+        element.openingElement.attributes?.filter((attr) => attr.type === 'JSXAttribute').length,
+      ).toBe(1);
+    });
+
+    it('does nothing if openingElement.attributes is not an array', () => {
+      const source = `<div />`;
+      const root = getRoot(source);
+      const element = root.findJSXElements('div').nodes()[0];
+      const j = jscodeshift;
+      element.openingElement.attributes = null as never;
+      const newAttr = j.jsxAttribute(j.jsxIdentifier('bar'));
+      expect(() =>
+        addAttributesIfMissing(j, element.openingElement, [{ attribute: newAttr, name: 'bar' }]),
+      ).not.toThrow();
+    });
+  });
+});

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

@@ -0,0 +1,265 @@
+import type { JSCodeshift, JSXAttribute, JSXElement } from 'jscodeshift';
+
+import { CodemodReporter, createReporter } from '../jsxReportingUtils';
+
+describe('CodemodReporter', () => {
+  let issues: string[];
+  let reporter: CodemodReporter;
+  let mockJ: JSCodeshift;
+
+  beforeEach(() => {
+    issues = [];
+
+    // Create a proper JSCodeshift mock
+    mockJ = Object.assign(
+      jest.fn(() => ({
+        find: jest.fn(),
+        toSource: jest.fn(() => 'mockedSource'),
+      })),
+      {
+        toSource: jest.fn(() => 'mockedSource'),
+        types: {},
+        match: jest.fn(),
+        template: jest.fn(),
+        registerMethods: jest.fn(),
+      },
+    ) as unknown as JSCodeshift;
+
+    reporter = createReporter(mockJ, issues);
+  });
+
+  // Helper function to create properly typed mock elements
+  const createMockElement = (componentName: string, line = 42): JSXElement =>
+    ({
+      type: 'JSXElement',
+      openingElement: {
+        type: 'JSXOpeningElement',
+        name: { type: 'JSXIdentifier', name: componentName },
+        attributes: [],
+        selfClosing: false,
+      },
+      closingElement: null,
+      children: [],
+      loc: { start: { line, column: 0 }, end: { line, column: 0 } },
+    }) as unknown as JSXElement;
+
+  describe('createReporter', () => {
+    it('should create a reporter instance', () => {
+      expect(reporter).toBeInstanceOf(CodemodReporter);
+    });
+  });
+
+  describe('reportElement', () => {
+    it('should report element issues', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportElement(mockElement, 'has some issue');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe('Manual review required: <Button> at line 42 has some issue.');
+    });
+  });
+
+  describe('reportProp', () => {
+    it('should report prop issues', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportProp(mockElement, 'size', 'has invalid value');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "size" on <Button> at line 42 has invalid value.',
+      );
+    });
+  });
+
+  describe('reportAttribute', () => {
+    it('should report attribute issues with default reason', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      const mockAttr = {
+        type: 'JSXAttribute',
+        name: { type: 'JSXIdentifier', name: 'size' },
+        value: {
+          type: 'JSXExpressionContainer',
+          expression: { type: 'Identifier', name: 'someVar' },
+        },
+        loc: { start: { line: 42, column: 0 }, end: { line: 42, column: 0 } },
+      } as unknown as JSXAttribute;
+
+      reporter.reportAttribute(mockAttr, mockElement);
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toContain('prop "size" on <Button> at line 42');
+    });
+
+    it('should report attribute issues with custom reason', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      const mockAttr = {
+        type: 'JSXAttribute',
+        name: { type: 'JSXIdentifier', name: 'size' },
+        value: { type: 'StringLiteral', value: 'large' },
+        loc: { start: { line: 42, column: 0 }, end: { line: 42, column: 0 } },
+      } as unknown as JSXAttribute;
+
+      reporter.reportAttribute(mockAttr, mockElement, 'custom reason');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "size" on <Button> at line 42 custom reason.',
+      );
+    });
+  });
+
+  describe('reportSpreadProps', () => {
+    it('should report spread props issue', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportSpreadProps(mockElement);
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: <Button> at line 42 contains spread props that need manual review.',
+      );
+    });
+  });
+
+  describe('reportPropWithChildren', () => {
+    it('should report prop with children issue', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportPropWithChildren(mockElement, 'text');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "text" on <Button> at line 42 conflicts with children - both "text" prop and children are present.',
+      );
+    });
+  });
+
+  describe('reportUnsupportedValue', () => {
+    it('should report unsupported value issue', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportUnsupportedValue(mockElement, 'size', 'huge');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "size" on <Button> at line 42 has unsupported value "huge".',
+      );
+    });
+  });
+
+  describe('reportAmbiguousExpression', () => {
+    it('should report ambiguous expression issue', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportAmbiguousExpression(mockElement, 'size');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "size" on <Button> at line 42 contains a complex expression that needs manual review.',
+      );
+    });
+  });
+
+  describe('reportAmbiguousChildren', () => {
+    it('should report ambiguous children issue', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportAmbiguousChildren(mockElement, 'icon');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: <Button> at line 42 contains ambiguous icon that needs manual review.',
+      );
+    });
+  });
+
+  describe('reportDeprecatedProp', () => {
+    it('should report deprecated prop without alternative', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportDeprecatedProp(mockElement, 'flat');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "flat" on <Button> at line 42 is deprecated.',
+      );
+    });
+
+    it('should report deprecated prop with alternative', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportDeprecatedProp(mockElement, 'flat', 'variant="text"');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "flat" on <Button> at line 42 is deprecated Use variant="text" instead.',
+      );
+    });
+  });
+
+  describe('reportMissingRequiredProp', () => {
+    it('should report missing required prop', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportMissingRequiredProp(mockElement, 'children');
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: prop "children" on <Button> at line 42 is required but missing.',
+      );
+    });
+  });
+
+  describe('reportConflictingProps', () => {
+    it('should report conflicting props', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportConflictingProps(mockElement, ['size', 'fullWidth']);
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toBe(
+        'Manual review required: <Button> at line 42 has conflicting props: "size", "fullWidth" cannot be used together.',
+      );
+    });
+  });
+
+  describe('reportAttributeIssues', () => {
+    it('should not report anything with no attributes', () => {
+      const mockElement = createMockElement('Button', 42);
+
+      reporter.reportAttributeIssues(mockElement);
+      expect(issues).toHaveLength(0);
+    });
+
+    it('should report spread props', () => {
+      const mockElement = {
+        ...createMockElement('Button', 42),
+        openingElement: {
+          ...createMockElement('Button', 42).openingElement,
+          attributes: [
+            { type: 'JSXSpreadAttribute', argument: { type: 'Identifier', name: 'props' } },
+          ],
+        },
+      } as unknown as JSXElement;
+
+      reporter.reportAttributeIssues(mockElement);
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toContain('spread props');
+    });
+
+    it('should report expression container attributes', () => {
+      const mockElement = {
+        ...createMockElement('Button', 42),
+        openingElement: {
+          ...createMockElement('Button', 42).openingElement,
+          attributes: [
+            {
+              type: 'JSXAttribute',
+              name: { type: 'JSXIdentifier', name: 'size' },
+              value: {
+                type: 'JSXExpressionContainer',
+                expression: { type: 'Identifier', name: 'someVar' },
+              },
+              loc: { start: { line: 42, column: 0 }, end: { line: 42, column: 0 } },
+            },
+          ],
+        },
+      } as unknown as JSXElement;
+
+      reporter.reportAttributeIssues(mockElement);
+      expect(issues).toHaveLength(1);
+      expect(issues[0]).toContain('prop "size" on <Button> at line 42');
+    });
+  });
+});