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

package/src/transforms/helpers/iconUtils.ts

@@ -0,0 +1,87 @@
+import type { JSCodeshift, JSXElement, JSXExpressionContainer } from 'jscodeshift';
+
+/**
+ * Process children of a JSX element to detect icon components and add iconStart or iconEnd attributes accordingly.
+ * This is specific to icon handling but can be reused in codemods dealing with icon children.
+ */
+const processIconChildren = (
+  j: JSCodeshift,
+  children: (JSXElement | JSXExpressionContainer | unknown)[] | undefined,
+  iconImports: Set<string>,
+  openingElement: JSXElement['openingElement'],
+) => {
+  if (!children || !openingElement.attributes) return;
+
+  const unwrapJsxElement = (node: unknown): JSXElement | unknown => {
+    if (
+      typeof node === 'object' &&
+      node !== null &&
+      'type' in node &&
+      node.type === 'JSXExpressionContainer' &&
+      j.JSXElement.check((node as JSXExpressionContainer).expression)
+    ) {
+      return (node as JSXExpressionContainer).expression;
+    }
+    return node;
+  };
+
+  const totalChildren = children.length;
+
+  // Find index of icon child
+  const iconChildIndex = children.findIndex((child) => {
+    const unwrapped = unwrapJsxElement(child);
+    return (
+      j.JSXElement.check(unwrapped) &&
+      unwrapped.openingElement.name.type === 'JSXIdentifier' &&
+      iconImports.has(unwrapped.openingElement.name.name)
+    );
+  });
+
+  if (iconChildIndex === -1) return;
+
+  const iconChild = unwrapJsxElement(children[iconChildIndex]) as JSXElement;
+
+  if (!iconChild || iconChild.openingElement.name.type !== 'JSXIdentifier') return;
+
+  const iconName = iconChild.openingElement.name.name;
+
+  // Determine if icon is closer to start or end
+  const distanceToStart = iconChildIndex;
+  const distanceToEnd = totalChildren - 1 - iconChildIndex;
+  const iconPropName = distanceToStart <= distanceToEnd ? 'addonStart' : 'addonEnd';
+
+  // Build: { type: 'icon', value: <IconName /> }
+  const iconObject = j.objectExpression([
+    j.property('init', j.identifier('type'), j.literal('icon')),
+    j.property('init', j.identifier('value'), iconChild),
+  ]);
+  const iconProp = j.jsxAttribute(
+    j.jsxIdentifier(iconPropName),
+    j.jsxExpressionContainer(iconObject),
+  );
+
+  openingElement.attributes.push(iconProp);
+
+  // Remove the icon child
+  children.splice(iconChildIndex, 1);
+
+  // Helper to check if a child is whitespace-only JSXText
+  const isWhitespaceJsxText = (node: unknown): boolean => {
+    return (
+      typeof node === 'object' &&
+      node !== null &&
+      (node as { type?: unknown }).type === 'JSXText' &&
+      typeof (node as { value?: string }).value === 'string' &&
+      (node as { value?: string }).value!.trim() === ''
+    );
+  };
+
+  // Remove adjacent whitespace-only JSXText node if any
+  if (iconChildIndex - 1 >= 0 && isWhitespaceJsxText(children[iconChildIndex - 1])) {
+    children.splice(iconChildIndex - 1, 1);
+  } else if (isWhitespaceJsxText(children[iconChildIndex])) {
+    children.splice(iconChildIndex, 1);
+  }
+};
+
+export default processIconChildren;

package/src/transforms/helpers/index.ts

@@ -0,0 +1,5 @@
+export { default as createTestTransform } from './createTestTransform';
+export { default as hasImport } from './hasImport';
+export { default as processIconChildren } from './iconUtils';
+export * from './jsxElementUtils';
+export * from './jsxReportingUtils';

package/src/transforms/helpers/jsxElementUtils.ts

@@ -0,0 +1,67 @@
+import type {
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  JSXIdentifier,
+  JSXMemberExpression,
+  JSXNamespacedName,
+  JSXSpreadAttribute,
+} from 'jscodeshift';
+
+/**
+ * Rename a JSX element name if it is a JSXIdentifier.
+ */
+export const setNameIfJSXIdentifier = (
+  elementName: JSXIdentifier | JSXNamespacedName | JSXMemberExpression | undefined,
+  newName: string,
+): JSXIdentifier | JSXNamespacedName | JSXMemberExpression | undefined => {
+  if (elementName && elementName.type === 'JSXIdentifier') {
+    return { ...elementName, name: newName };
+  }
+  return elementName;
+};
+
+/**
+ * Check if a list of attributes contains a specific attribute by name.
+ */
+export const hasAttribute = (
+  attributes: (JSXAttribute | JSXSpreadAttribute)[] | undefined,
+  attributeName: string,
+): boolean => {
+  return (
+    Array.isArray(attributes) &&
+    attributes.some(
+      (attr): attr is JSXAttribute =>
+        attr.type === 'JSXAttribute' &&
+        attr.name.type === 'JSXIdentifier' &&
+        attr.name.name === attributeName,
+    )
+  );
+};
+
+/**
+ * Check if a JSX element's openingElement has a specific attribute.
+ */
+export const hasAttributeOnElement = (
+  element: JSXElement['openingElement'],
+  attributeName: string,
+): boolean => {
+  return hasAttribute(element.attributes, attributeName);
+};
+
+/**
+ * Add specified attributes to a JSX element's openingElement if they are not already present.
+ */
+export const addAttributesIfMissing = (
+  j: JSCodeshift,
+  openingElement: JSXElement['openingElement'],
+  attributesToAdd: { attribute: JSXAttribute; name: string }[],
+) => {
+  if (!Array.isArray(openingElement.attributes)) return;
+  const attrs = openingElement.attributes;
+  attributesToAdd.forEach(({ attribute, name }) => {
+    if (!hasAttributeOnElement(openingElement, name)) {
+      attrs.push(attribute);
+    }
+  });
+};

package/src/transforms/helpers/jsxReportingUtils.ts

@@ -0,0 +1,224 @@
+import type { ASTPath, JSCodeshift, JSXAttribute, JSXElement, Node } from 'jscodeshift';
+
+export interface ReporterOptions {
+  jscodeshift: JSCodeshift;
+  issues: string[];
+}
+
+/**
+ * CodemodReporter is a utility class for reporting issues found during codemod transformations.
+ * It provides methods to report issues related to JSX elements, props, and attributes.
+ *
+ * @example
+ * ```typescript
+ * const issues: string[] = [];
+ * const reporter = createReporter(j, issues);
+ *
+ * // Report a deprecated prop
+ * reporter.reportDeprecatedProp(buttonElement, 'flat', 'variant="text"');
+ *
+ * // Report complex expression that needs review
+ * reporter.reportAmbiguousExpression(element, 'size');
+ *
+ * // Auto-detect common issues
+ * reporter.reportAttributeIssues(element);
+ * ```
+ */
+export class CodemodReporter {
+  private readonly j: JSCodeshift;
+  private readonly issues: string[];
+
+  constructor(options: ReporterOptions) {
+    this.j = options.jscodeshift;
+    this.issues = options.issues;
+  }
+
+  /**
+   * Reports an issue with a JSX element
+   */
+  reportElement(element: JSXElement | ASTPath<JSXElement>, reason: string): void {
+    const node = this.getNode(element);
+    const componentName = this.getComponentName(node);
+    const line = this.getLineNumber(node);
+
+    this.addIssue(`Manual review required: <${componentName}> at line ${line} ${reason}.`);
+  }
+
+  /**
+   * Reports an issue with a specific prop
+   */
+  reportProp(element: JSXElement | ASTPath<JSXElement>, propName: string, reason: string): void {
+    const node = this.getNode(element);
+    const componentName = this.getComponentName(node);
+    const line = this.getLineNumber(node);
+
+    this.addIssue(
+      `Manual review required: prop "${propName}" on <${componentName}> at line ${line} ${reason}.`,
+    );
+  }
+
+  /**
+   * Reports an issue with a JSX attribute directly
+   */
+  reportAttribute(
+    attr: JSXAttribute,
+    element: JSXElement | ASTPath<JSXElement>,
+    reason?: string,
+  ): void {
+    const node = this.getNode(element);
+    const componentName = this.getComponentName(node);
+    const propName = this.getAttributeName(attr);
+    const line = this.getLineNumber(attr) || this.getLineNumber(node);
+
+    const defaultReason = this.getAttributeReason(attr);
+    const finalReason = reason || defaultReason;
+
+    this.addIssue(
+      `Manual review required: prop "${propName}" on <${componentName}> at line ${line} ${finalReason}.`,
+    );
+  }
+
+  /**
+   * Reports spread props on an element
+   */
+  reportSpreadProps(element: JSXElement | ASTPath<JSXElement>): void {
+    this.reportElement(element, 'contains spread props that need manual review');
+  }
+
+  /**
+   * Reports conflicting prop and children
+   */
+  reportPropWithChildren(element: JSXElement | ASTPath<JSXElement>, propName: string): void {
+    this.reportProp(
+      element,
+      propName,
+      `conflicts with children - both "${propName}" prop and children are present`,
+    );
+  }
+
+  /**
+   * Reports unsupported prop value
+   */
+  reportUnsupportedValue(
+    element: JSXElement | ASTPath<JSXElement>,
+    propName: string,
+    value: string,
+  ): void {
+    this.reportProp(element, propName, `has unsupported value "${value}"`);
+  }
+
+  /**
+   * Reports ambiguous expression in prop
+   */
+  reportAmbiguousExpression(element: JSXElement | ASTPath<JSXElement>, propName: string): void {
+    this.reportProp(element, propName, 'contains a complex expression that needs manual review');
+  }
+
+  /**
+   * Reports ambiguous children (like dynamic icons)
+   */
+  reportAmbiguousChildren(element: JSXElement | ASTPath<JSXElement>, childType = 'content'): void {
+    this.reportElement(element, `contains ambiguous ${childType} that needs manual review`);
+  }
+
+  /**
+   * Reports deprecated prop usage
+   */
+  reportDeprecatedProp(
+    element: JSXElement | ASTPath<JSXElement>,
+    propName: string,
+    alternative?: string,
+  ): void {
+    const suggestion = alternative ? ` Use ${alternative} instead` : '';
+    this.reportProp(element, propName, `is deprecated${suggestion}`);
+  }
+
+  /**
+   * Reports missing required prop
+   */
+  reportMissingRequiredProp(element: JSXElement | ASTPath<JSXElement>, propName: string): void {
+    this.reportProp(element, propName, 'is required but missing');
+  }
+
+  /**
+   * Reports conflicting props
+   */
+  reportConflictingProps(element: JSXElement | ASTPath<JSXElement>, propNames: string[]): void {
+    const propList = propNames.map((name) => `"${name}"`).join(', ');
+    this.reportElement(element, `has conflicting props: ${propList} cannot be used together`);
+  }
+
+  /**
+   * Auto-detects and reports common attribute issues
+   */
+  reportAttributeIssues(element: JSXElement | ASTPath<JSXElement>): void {
+    const node = this.getNode(element);
+    const { attributes } = node.openingElement;
+
+    if (!attributes) return;
+
+    // Check for spread props
+    if (attributes.some((attr) => attr.type === 'JSXSpreadAttribute')) {
+      this.reportSpreadProps(element);
+    }
+
+    // Check for complex expressions in attributes
+    attributes.forEach((attr) => {
+      if (attr.type === 'JSXAttribute' && attr.value?.type === 'JSXExpressionContainer') {
+        this.reportAttribute(attr, element);
+      }
+    });
+  }
+
+  // Private helper methods
+  private getNode(element: JSXElement | ASTPath<JSXElement>): JSXElement {
+    return 'node' in element ? element.node : element;
+  }
+
+  private getComponentName(node: JSXElement): string {
+    const { name } = node.openingElement;
+    if (name.type === 'JSXIdentifier') {
+      return name.name;
+    }
+    // Handle JSXMemberExpression, JSXNamespacedName, etc.
+    return this.j(name).toSource();
+  }
+
+  private getLineNumber(node: JSXElement | JSXAttribute | Node): string {
+    return node.loc?.start.line?.toString() || 'unknown';
+  }
+
+  private getAttributeName(attr: JSXAttribute): string {
+    if (attr.name.type === 'JSXIdentifier') {
+      return attr.name.name;
+    }
+    return this.j(attr.name).toSource();
+  }
+
+  private getAttributeReason(attr: JSXAttribute): string {
+    if (!attr.value) return 'has no value';
+
+    if (attr.value.type === 'JSXExpressionContainer') {
+      const expr = attr.value.expression;
+      const expressionType = expr.type.replace('Expression', '').toLowerCase();
+
+      // Show actual value for simple cases
+      if (expr.type === 'Identifier' || expr.type === 'MemberExpression') {
+        const valueText = this.j(expr).toSource();
+        return `contains a ${expressionType} (${valueText})`;
+      }
+
+      return `contains a complex ${expressionType} expression`;
+    }
+
+    return 'needs manual review';
+  }
+
+  private addIssue(message: string): void {
+    this.issues.push(message);
+  }
+}
+
+export const createReporter = (j: JSCodeshift, issues: string[]): CodemodReporter => {
+  return new CodemodReporter({ jscodeshift: j, issues });
+};

package/src/utils/__tests__/getOptions.test.ts

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { confirm, input, select as list } from '@inquirer/prompts';
+
+import getOptions from '../getOptions';
+
+jest.mock('@inquirer/prompts', () => ({
+  select: jest.fn(),
+  input: jest.fn(),
+  confirm: jest.fn(),
+}));
+
+describe('getOptions', () => {
+  const transformFiles = ['fileA.js', 'fileB.ts', 'fileC.tsx'];
+
+  beforeEach(() => {
+    process.argv = ['node', 'script.js'];
+    (list as jest.Mock).mockClear();
+    (input as jest.Mock).mockClear();
+    (confirm as jest.Mock).mockClear();
+  });
+
+  it('should return options from command line arguments when provided', async () => {
+    process.argv = ['node', 'script.js', 'fileB.ts', './src', '--dry', '--print'];
+    const options = await getOptions(transformFiles);
+    expect(options).toEqual({
+      transformFile: 'fileB.ts',
+      targetPath: './src',
+      dry: true,
+      print: true,
+      gitignore: true,
+      ignorePattern: undefined,
+    });
+  });
+
+  it('should parse --ignore-pattern argument from CLI', async () => {
+    process.argv = [
+      'node',
+      'script.js',
+      'fileA.js',
+      './src',
+      '--ignore-pattern',
+      'node_modules/**',
+    ];
+    const options = await getOptions(transformFiles);
+    expect(options.ignorePattern).toBe('node_modules/**');
+  });
+
+  it('should parse --gitignore and --no-gitignore arguments from CLI and prioritize --gitignore', async () => {
+    process.argv = ['node', 'script.js', 'fileA.js', './src', '--gitignore', '--no-gitignore'];
+    const options = await getOptions(transformFiles);
+    expect(options.gitignore).toBe(true);
+
+    process.argv = ['node', 'script.js', 'fileA.js', './src', '--no-gitignore'];
+    const optionsNo = await getOptions(transformFiles);
+    expect(optionsNo.gitignore).toBe(false);
+  });
+
+  it('should prompt for ignorePattern and gitignore when no CLI args', async () => {
+    (list as jest.Mock).mockResolvedValue('fileB.ts');
+    (input as jest.Mock).mockResolvedValueOnce('./output').mockResolvedValueOnce('node_modules/**');
+    (confirm as jest.Mock)
+      .mockResolvedValueOnce(true)
+      .mockResolvedValueOnce(false)
+      .mockResolvedValueOnce(true);
+
+    const optionsPromise = getOptions(transformFiles);
+    const options = await optionsPromise;
+
+    expect(input).toHaveBeenCalledWith({
+      message: 'Enter ignore pattern(s) (comma separated) or leave empty:',
+      validate: expect.any(Function),
+    });
+    expect(confirm).toHaveBeenCalledWith({
+      message: 'Respect .gitignore files?',
+      default: true,
+    });
+    expect(options.ignorePattern).toBe('node_modules/**');
+    expect(options.gitignore).toBe(true);
+  });
+
+  it('should throw an error if transform file is invalid via command line', async () => {
+    process.argv = ['node', 'script.js', 'invalid.js', './dist'];
+    await expect(getOptions(transformFiles)).rejects.toThrow('Invalid transform file specified.');
+  });
+
+  it('should throw an error if target path is empty via command line', async () => {
+    process.argv = ['node', 'script.js', 'fileA.js', ''];
+    await expect(getOptions(transformFiles)).rejects.toThrow('Target path cannot be empty.');
+  });
+
+  it('should prompt for transform file, target path, dry mode, and print when no arguments are provided', async () => {
+    (list as jest.Mock).mockResolvedValue('fileB.ts');
+    (input as jest.Mock).mockResolvedValue('./output');
+    (confirm as jest.Mock).mockResolvedValueOnce(true).mockResolvedValueOnce(false);
+
+    const options = await getOptions(transformFiles);
+
+    expect(list).toHaveBeenCalledWith({
+      message: 'Select a codemod transform to run:',
+      choices: transformFiles.map((file) => ({ name: file, value: file })),
+    });
+    expect(input).toHaveBeenCalledWith({
+      message: 'Enter the target directory or file path to run codemod on:',
+      validate: expect.any(Function),
+    });
+    expect(confirm).toHaveBeenCalledWith({
+      message: 'Run in dry mode (no changes written to files)?',
+      default: true,
+    });
+    expect(confirm).toHaveBeenCalledWith({
+      message: 'Print transformed source to console?',
+      default: false,
+    });
+    expect(options).toEqual({
+      transformFile: 'fileB.ts',
+      targetPath: './output',
+      dry: true,
+      print: false,
+      gitignore: undefined,
+      ignorePattern: './output',
+    });
+  });
+
+  it('should handle target path validation error', async () => {
+    (list as jest.Mock).mockResolvedValue('fileA.js');
+    (input as jest.Mock).mockResolvedValueOnce('   ');
+    (confirm as jest.Mock).mockResolvedValue(true);
+
+    await getOptions(transformFiles);
+
+    expect(input).toHaveBeenCalledTimes(2);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const validateFn = (input as jest.Mock).mock.calls[0][0].validate!;
+    expect(validateFn('   ')).toBe('Target path cannot be empty');
+    expect(validateFn('./valid-path')).toBe(true); // Ensure valid input passes validation
+    expect(input).toHaveBeenCalledWith({
+      message: 'Enter the target directory or file path to run codemod on:',
+      validate: expect.any(Function),
+    });
+  });
+
+  it('should allow changing the default dry mode', async () => {
+    (list as jest.Mock).mockResolvedValue('fileC.tsx');
+    (input as jest.Mock).mockResolvedValue('./another-path');
+    (confirm as jest.Mock).mockResolvedValueOnce(false).mockResolvedValueOnce(false);
+
+    const options = await getOptions(transformFiles);
+
+    expect(confirm).toHaveBeenCalledWith({
+      message: 'Run in dry mode (no changes written to files)?',
+      default: true,
+    });
+    expect(options.dry).toBe(false);
+  });
+
+  it('should allow changing the default print mode', async () => {
+    (list as jest.Mock).mockResolvedValue('fileA.js');
+    (input as jest.Mock).mockResolvedValue('./yet-another-path');
+    (confirm as jest.Mock).mockResolvedValueOnce(true).mockResolvedValueOnce(true);
+
+    const options = await getOptions(transformFiles);
+
+    expect(confirm).toHaveBeenCalledWith({
+      message: 'Print transformed source to console?',
+      default: false,
+    });
+    expect(options.print).toBe(true);
+  });
+});

package/src/utils/__tests__/handleError.test.ts

@@ -0,0 +1,18 @@
+import handleError from '../handleError';
+
+describe('handleError', () => {
+  beforeEach(() => {
+    jest.spyOn(process, 'exit').mockImplementation(() => {
+      throw new Error('process.exit called');
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should throw an error with the given message', () => {
+    const errorMessage = 'Test error message';
+    expect(() => handleError(errorMessage)).toThrow(new Error('process.exit called'));
+  });
+});

package/src/utils/__tests__/loadTransformModules.test.ts

@@ -0,0 +1,51 @@
+import { promises as fs } from 'fs';
+
+import loadTransformModules from '../loadTransformModules';
+
+jest.mock('fs', () => ({
+  promises: {
+    readdir: jest.fn(),
+  },
+}));
+
+jest.mock('path', () => ({
+  join: jest.fn((...args) => args.join('/')),
+}));
+
+jest.mock(
+  '/mock/transforms/transformA.js',
+  () => ({
+    default: { default: 'transformA' },
+  }),
+  { virtual: true },
+);
+
+jest.mock(
+  '/mock/transforms/transformB.js',
+  () => ({
+    default: { default: 'transformB' },
+  }),
+  { virtual: true },
+);
+
+describe('loadTransformModules - simplified test', () => {
+  it('should return transformModules and transformFiles correctly', async () => {
+    const mockTransformsDir = '/mock/transforms';
+
+    const mockFiles = ['transformA.js', 'transformB.js'];
+    (fs.readdir as jest.Mock).mockResolvedValue(mockFiles);
+
+    const { transformModules, transformFiles } = await loadTransformModules(mockTransformsDir);
+
+    expect(transformModules).toEqual({
+      'transformA.js': {
+        default: 'transformA',
+      },
+      'transformB.js': {
+        default: 'transformB',
+      },
+    });
+
+    expect(transformFiles).toEqual(['transformA', 'transformB']);
+  });
+});

package/src/utils/__tests__/reportManualReview.test.ts

@@ -0,0 +1,42 @@
+import fs from 'node:fs/promises';
+
+import path from 'path';
+
+import reportManualReview from '../reportManualReview';
+
+const REPORT_PATH = path.resolve(process.cwd(), 'codemod-report.txt');
+
+describe('reportManualReview', () => {
+  beforeEach(async () => {
+    try {
+      await fs.access(REPORT_PATH);
+      await fs.unlink(REPORT_PATH);
+    } catch {
+      // File doesn't exist, that's fine
+    }
+    await fs.writeFile(REPORT_PATH, '', 'utf8');
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.access(REPORT_PATH);
+      await fs.unlink(REPORT_PATH);
+    } catch {
+      // File doesn't exist, that's fine
+    }
+  });
+
+  it('writes a manual review entry to the report file', async () => {
+    await reportManualReview('src/file.tsx', 'Manual review required: something at line 10');
+    const content = await fs.readFile(REPORT_PATH, 'utf8');
+    expect(content).toContain('[src/file.tsx:10] Manual review required: something');
+  });
+
+  it('appends multiple manual review entries', async () => {
+    await reportManualReview('src/file1.tsx', 'Manual review required: issue 1');
+    await reportManualReview('src/file2.tsx', 'Manual review required: issue 2');
+    const content = await fs.readFile(REPORT_PATH, 'utf8');
+    expect(content).toContain('[src/file1.tsx] Manual review required: issue 1');
+    expect(content).toContain('[src/file2.tsx] Manual review required: issue 2');
+  });
+});