Add consolidate-usePortal-into-renderMode code mod

tools/codemods/src/codemods/consolidate-usePortal-into-renderMode/tests/consolidate-popover-usePortal-renderMode.input.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+const Popover = (props: any) => {
+  const { usePortal = true } = props;
+
+  if (usePortal) {
+    return <p>Portaling children: {props.children}</p>;
+  }
+
+  return <p>Normally rendering children: {props.children}</p>;
+};
+
+const Child = (props: any) => {
+  return <p>Testing {props.children}</p>;
+};
+
+export const App = () => {
+  const spreadProps = {
+    adjustOnMutation: false,
+    align: 'bottom',
+    justify: 'start',
+    spacing: 4,
+  } as const;
+
+  const WrappedPopover = () => {
+    return <Popover usePortal={false} {...spreadProps} />;
+  };
+
+  const DefaultWrappedPopover = () => {
+    return <Popover {...spreadProps} />;
+  };
+
+  return (
+    <>
+      <Popover />
+      <Popover renderMode="inline" usePortal={false} />
+      <Popover renderMode="portal" usePortal={true} />
+      <Popover usePortal={true}>
+        <Child usePortal={false} />
+      </Popover>
+      <Popover usePortal={false} />
+      <Popover usePortal={true} {...spreadProps} />
+      <WrappedPopover />
+      <DefaultWrappedPopover />
+    </>
+  );
+};

tools/codemods/src/codemods/consolidate-usePortal-into-renderMode/tests/consolidate-popover-usePortal-renderMode.output.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+const Popover = (props: any) => {
+  const { usePortal = true } = props;
+
+  if (usePortal) {
+    return <p>Portaling children: {props.children}</p>;
+  }
+
+  return <p>Normally rendering children: {props.children}</p>;
+};
+
+const Child = (props: any) => {
+  return <p>Testing {props.children}</p>;
+};
+
+export const App = () => {
+  const spreadProps = {
+    adjustOnMutation: false,
+    align: 'bottom',
+    justify: 'start',
+    spacing: 4,
+  } as const;
+
+  const WrappedPopover = () => {
+    return (
+      /* Please update manually */
+      <Popover usePortal={false} {...spreadProps} />
+    );
+  };
+
+  const DefaultWrappedPopover = () => {
+    return (
+      /* Please update manually */
+      <Popover {...spreadProps} />
+    );
+  };
+
+  return (
+    <>
+      <Popover renderMode="portal" />
+      <Popover renderMode="inline" />
+      <Popover renderMode="portal" />
+      <Popover renderMode="portal">
+        <Child usePortal={false} />
+      </Popover>
+      <Popover renderMode="inline" />
+      {/* Please update manually */}
+      <Popover usePortal={true} {...spreadProps} />
+      <WrappedPopover />
+      <DefaultWrappedPopover />
+    </>
+  );
+};

tools/codemods/src/codemods/consolidate-usePortal-into-renderMode/tests/transform.spec.ts

@@ -0,0 +1,6 @@
+import { transformTest } from '../../../utils/tests/transformTest';
+
+transformTest(__dirname, {
+  fixture: 'consolidate-popover-usePortal-renderMode',
+  transform: 'consolidate-popover-usePortal-renderMode',
+});

tools/codemods/src/codemods/consolidate-usePortal-into-renderMode/transform.ts

@@ -0,0 +1,64 @@
+import type { API, FileInfo } from 'jscodeshift';
+
+import {
+  consolidateJSXAttributes,
+  ConsolidateJSXAttributesOptions,
+} from '../../utils/transformations';
+import { addJSXAttributes } from '../../utils/transformations/addJSXAttributes';
+
+type TransformerOptions = ConsolidateJSXAttributesOptions & {
+  componentName: string;
+};
+
+/**
+ * Example transformer function to consolidate props
+ *
+ * @param file the file to transform
+ * @param jscodeshiftOptions an object containing at least a reference to the jscodeshift library
+ * @param options an object containing options to pass to the transform function
+ * @returns Either the modified file or the original file
+ */
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: TransformerOptions,
+) {
+  const source = j(file.source);
+
+  const {
+    propToRemove = 'usePortal',
+    propToUpdate = 'renderMode',
+    propMapping = {
+      undefined: 'portal',
+      false: 'inline',
+      true: 'portal',
+    },
+    propToRemoveType = 'boolean',
+    componentName = 'Popover',
+  } = options;
+
+  // Check if the element is on the page
+  const elements = source.findJSXElements(componentName);
+
+  // If there are no elements then return the original file
+  if (elements.length === 0) return file.source;
+
+  elements.forEach(element => {
+    addJSXAttributes({
+      j,
+      element,
+      propName: propToRemove,
+      propValue: true,
+    });
+    consolidateJSXAttributes({
+      j,
+      element,
+      propToRemove,
+      propToUpdate,
+      propMapping,
+      propToRemoveType,
+    });
+  });
+
+  return source.toSource();
+}