feat(codemod): improvements to s1-to-s2 codemod (agent mode, E2E tests, more)

eslint.config.mjs

@@ -60,7 +60,8 @@ export default [{
         "packages/dev/storybook-builder-parcel/*",
         "packages/dev/storybook-react-parcel/*",
         "packages/dev/s2-docs/pages/**",
-        "packages/dev/mcp/*/dist"
+        "packages/dev/mcp/*/dist",
+        "packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/**"
     ],
 }, ...compat.extends("eslint:recommended"), {
     plugins: {
@@ -533,4 +534,4 @@ export default [{
             ...globals.browser
         }
     }
-}];
+}];

packages/dev/codemods/package.json

@@ -21,6 +21,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@adobe/react-spectrum": "^3.46.2",
     "@babel/parser": "^7.24.5",
     "@babel/traverse": "^7.24.5",
     "@babel/types": "^7.24.5",

packages/dev/codemods/src/index.ts

@@ -35,7 +35,14 @@ export interface S1ToS2CodemodOptions extends JSCodeshiftOptions {
    * An optional subset of components to have the s1-to-s2 codemod apply to.
    * Provide a comma-separated list of component names.
    */
-  components?: string
+  components?: string,
+  /**
+   * Whether to run the codemod in agent mode, which skips interactive prompts
+   * and package installation. This matches the shipped CLI behavior.
+   *
+   * @default false
+   */
+  agent?: boolean
 }
 
 export interface UseMonopackagesCodemodOptions extends JSCodeshiftOptions {
@@ -67,6 +74,9 @@ const options = {
   },
   'components': {
     type: 'string'
+  },
+  'agent': {
+    type: 'boolean'
   }
 };
 
@@ -80,22 +90,24 @@ if (positionals.length < 1) {
   process.exit(1);
 }
 
-const codemodName = positionals[0];
-const codemodFunction = codemods[codemodName];
+async function main() {
+  const codemodName = positionals[0];
+  const codemodFunction = codemods[codemodName];
 
-if (!codemodFunction) {
-  console.error(`Unknown codemod: ${codemodName}, available codemods: ${Object.keys(codemods).join(', ')}`);
-  process.exit(1);
-}
+  if (!codemodFunction) {
+    console.error(`Unknown codemod: ${codemodName}, available codemods: ${Object.keys(codemods).join(', ')}`);
+    process.exit(1);
+  }
 
-try {  
-  codemodFunction({
+  await Promise.resolve(codemodFunction({
     parser: 'tsx',
     ignorePattern: '**/node_modules/**',
     path: '.',
     ...values
-  });
-} catch (error) {
+  }));
+}
+
+main().catch((error) => {
   console.error(`Error running codemod: ${error}`);
   process.exit(1);
-}
+});

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/input/package.fixture.json

@@ -0,0 +1,7 @@
+{
+  "name": "s1-to-s2-cli-fixture",
+  "private": true,
+  "devDependencies": {
+    "parcel": "^2.12.0"
+  }
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/input/src/App.tsx

@@ -0,0 +1,10 @@
+import {Button} from '@adobe/react-spectrum';
+import React from 'react';
+
+export function App() {
+  return (
+    <Button variant="cta">
+      Save
+    </Button>
+  );
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/input/src/Form.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import {TextArea} from '@adobe/react-spectrum';
+
+export function Form() {
+  return <TextArea isQuiet />;
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/input/yarn.lock

@@ -0,0 +1 @@
+# yarn lockfile v1

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/output/package.fixture.json

@@ -0,0 +1,7 @@
+{
+  "name": "s1-to-s2-cli-fixture",
+  "private": true,
+  "devDependencies": {
+    "parcel": "^2.12.0"
+  }
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/output/src/App.tsx

@@ -0,0 +1,6 @@
+import { Button } from "@react-spectrum/s2";
+import React from 'react';
+
+export function App() {
+  return (<Button variant="accent">Save</Button>);
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/output/src/Form.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from "@react-spectrum/s2";
+
+export function Form() {
+  return <TextArea />;
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/full-project/output/yarn.lock

@@ -0,0 +1 @@
+# yarn lockfile v1

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/subset-project/input/package.fixture.json

@@ -0,0 +1,7 @@
+{
+  "name": "s1-to-s2-cli-subset-fixture",
+  "private": true,
+  "devDependencies": {
+    "parcel": "^2.12.0"
+  }
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/subset-project/input/src/Form.tsx

@@ -0,0 +1,11 @@
+import {Button, TextArea} from '@adobe/react-spectrum';
+import React from 'react';
+
+export function Form() {
+  return (
+    <>
+      <Button variant="cta">Save</Button>
+      <TextArea isQuiet />
+    </>
+  );
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/subset-project/input/yarn.lock

@@ -0,0 +1 @@
+# yarn lockfile v1

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/subset-project/output/package.fixture.json

@@ -0,0 +1,7 @@
+{
+  "name": "s1-to-s2-cli-subset-fixture",
+  "private": true,
+  "devDependencies": {
+    "parcel": "^2.12.0"
+  }
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/subset-project/output/src/Form.tsx

@@ -0,0 +1,10 @@
+import { TextArea } from '@adobe/react-spectrum';
+import { Button } from "@react-spectrum/s2";
+import React from 'react';
+
+export function Form() {
+  return (<>
+    <Button variant="accent">Save</Button>
+    <TextArea isQuiet />
+  </>);
+}

packages/dev/codemods/src/s1-to-s2/__testfixtures__/cli/subset-project/output/yarn.lock

@@ -0,0 +1 @@
+# yarn lockfile v1

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap

@@ -205,7 +205,7 @@ let props = {validationState: 'invalid'};
 `;
 
 exports[`handles sections 1`] = `
-"import { ComboBoxSection, ComboBoxItem, ComboBox } from "@react-spectrum/s2";
+"import { ComboBoxSection, Header, ComboBoxItem, ComboBox } from "@react-spectrum/s2";
 <ComboBox>
   <ComboBoxSection><Header>Section title</Header>
     <ComboBoxItem>Item one</ComboBoxItem>

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/dialog.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Comments out if type might be "tray" 1`] = `
-"import { DialogTrigger, ActionButton, Dialog, Heading, Divider, Content, Text } from "@react-spectrum/s2";
+"import { DialogTrigger, ActionButton, Dialog } from "@react-spectrum/s2";
 
 // TODO(S2-upgrade): type="tray" has not been implemented yet.
 <DialogTrigger>
@@ -13,7 +13,7 @@ exports[`Comments out if type might be "tray" 1`] = `
 `;
 
 exports[`Comments out mobileType 1`] = `
-"import { DialogTrigger, ActionButton, Dialog, Heading, Divider, Content, Text } from "@react-spectrum/s2";
+"import { DialogTrigger, ActionButton, Dialog } from "@react-spectrum/s2";
 
 <>
   // TODO(S2-upgrade): mobileType has not been implemented yet.
@@ -34,7 +34,7 @@ exports[`Comments out mobileType 1`] = `
 `;
 
 exports[`Comments out type="tray" 1`] = `
-"import { DialogTrigger, ActionButton, Dialog, Heading, Divider, Content, Text } from "@react-spectrum/s2";
+"import { DialogTrigger, ActionButton, Dialog } from "@react-spectrum/s2";
 
 // TODO(S2-upgrade): type="tray" has not been implemented yet.
 <DialogTrigger>
@@ -46,7 +46,7 @@ exports[`Comments out type="tray" 1`] = `
 `;
 
 exports[`Moves close function from DialogTrigger to Dialog 1`] = `
-"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { DialogTrigger, Button, Dialog, Heading, Content } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>
@@ -63,7 +63,7 @@ exports[`Moves close function from DialogTrigger to Dialog 1`] = `
 `;
 
 exports[`Moves isDismissable 1`] = `
-"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { DialogTrigger, Button, Dialog, Heading, Content } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>
@@ -76,7 +76,7 @@ exports[`Moves isDismissable 1`] = `
 `;
 
 exports[`Moves isDismissable from DialogContainer 1`] = `
-"import { DialogContainer, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { DialogContainer, Dialog, Heading, Content } from "@react-spectrum/s2";
 
 <DialogContainer>
   {showDialog1 && <Dialog isDismissible>
@@ -93,7 +93,7 @@ exports[`Moves isDismissable from DialogContainer 1`] = `
 `;
 
 exports[`Removes divider 1`] = `
-"import { Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { Dialog, Heading, Content } from "@react-spectrum/s2";
 
 <Dialog>
   <Heading>Test</Heading>
@@ -103,7 +103,7 @@ exports[`Removes divider 1`] = `
 `;
 
 exports[`Removes onDismiss and leaves a comment 1`] = `
-"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { DialogTrigger, Button, Dialog, Heading, Content } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>
@@ -121,58 +121,50 @@ exports[`Removes onDismiss and leaves a comment 1`] = `
 `;
 
 exports[`Replaces type="fullscreen" with FullscreenDialog component 1`] = `
-"import { FullscreenDialog, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { FullscreenDialog, DialogTrigger, Button, Heading, Content } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>
   <FullscreenDialog isKeyboardDismissDisabled>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>
 </DialogTrigger>"
 `;
 
 exports[`Replaces type="fullscreen" with FullscreenDialog component in DialogContainer 1`] = `
-"import {
-  FullscreenDialog,
-  DialogContainer,
-  Button,
-  Dialog,
-  Heading,
-  Content,
-  Divider,
-} from "@react-spectrum/s2";
+"import { FullscreenDialog, DialogContainer, Heading, Content } from "@react-spectrum/s2";
 
 <DialogContainer>
   {showDialog1 && <FullscreenDialog isKeyboardDismissDisabled>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>}
   {showDialog2 && <FullscreenDialog isKeyboardDismissDisabled>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>}
 </DialogContainer>"
 `;
 
 exports[`Replaces type="fullscreenTakeover" with FullscreenDialog component 1`] = `
-"import { FullscreenDialog, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { FullscreenDialog, DialogTrigger, Button, Heading, Content } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>
   <FullscreenDialog variant="fullscreenTakeover">
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>
 </DialogTrigger>"
 `;
 
 exports[`Replaces type="fullscreenTakeover" with FullscreenDialog component and close function 1`] = `
-"import { FullscreenDialog, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { FullscreenDialog, DialogTrigger, Button, Heading, Content } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>
@@ -189,20 +181,20 @@ exports[`Replaces type="fullscreenTakeover" with FullscreenDialog component and
 `;
 
 exports[`Replaces type="popover" with Popover component 1`] = `
-"import { Popover, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { Popover, DialogTrigger, Button, Heading, Content } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>
   <Popover hideArrow>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </Popover>
 </DialogTrigger>"
 `;
 
 exports[`bails when it cannot move the close function 1`] = `
-"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
+"import { DialogTrigger, Button } from "@react-spectrum/s2";
 
 <DialogTrigger>
   <Button>Test</Button>

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/dropzone.test.ts.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Does nothing 1`] = `
+exports[`Rewrites illustration import to S2 1`] = `
 "import { DropZone, IllustratedMessage, Heading } from "@react-spectrum/s2";
-import Upload from '@spectrum-icons/illustrations/Upload';
+import Upload from "@react-spectrum/s2/illustrations/linear/Upload";
 
 <div>
   <DropZone>

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/form.test.ts.snap

@@ -35,8 +35,7 @@ let props = {isQuiet: true};
 `;
 
 exports[`removes validationState and validationBehavior 1`] = `
-"import { TextArea } from "@react-spectrum/s2";
-let validationState = 'invalid';
+"let validationState = 'invalid';
 let validationBehavior = 'native';
 let props = {validationState: 'invalid', validationBehavior: 'native'};
 <div>