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.1",
     "@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__/dialog.test.ts.snap

@@ -127,7 +127,7 @@ exports[`Replaces type="fullscreen" with FullscreenDialog component 1`] = `
   <Button>Test</Button>
   <FullscreenDialog isKeyboardDismissDisabled>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>
 </DialogTrigger>"
@@ -147,12 +147,12 @@ exports[`Replaces type="fullscreen" with FullscreenDialog component in DialogCon
 <DialogContainer>
   {showDialog1 && <FullscreenDialog isKeyboardDismissDisabled>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>}
   {showDialog2 && <FullscreenDialog isKeyboardDismissDisabled>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>}
 </DialogContainer>"
@@ -165,7 +165,7 @@ exports[`Replaces type="fullscreenTakeover" with FullscreenDialog component 1`]
   <Button>Test</Button>
   <FullscreenDialog variant="fullscreenTakeover">
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </FullscreenDialog>
 </DialogTrigger>"
@@ -195,7 +195,7 @@ exports[`Replaces type="popover" with Popover component 1`] = `
   <Button>Test</Button>
   <Popover hideArrow>
     <Heading>Test</Heading>
-    <Divider />
+
     <Content>Content</Content>
   </Popover>
 </DialogTrigger>"

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

@@ -1,10 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`does not leave a comment on dynamic s2 imports 1`] = `"const LazyButton = React.lazy(() => import('@react-spectrum/s2'))"`;
+
 exports[`leaves a comment on dynamic imports 1`] = `
 "const LazyButton = React.lazy(() => // TODO(S2-upgrade): check this dynamic import
 import('@react-spectrum/button'))"
 `;
 
+exports[`should handle empty files safely 1`] = `""`;
+
 exports[`should keep import aliases 1`] = `
 "import { Button as RSPButton } from "@react-spectrum/s2";
 

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

@@ -10,6 +10,28 @@ exports[`Should not update components that are not provided to --components opti
 </div>"
 `;
 
+exports[`Should only update ComboBox related shared components provided to --components option 1`] = `
+"import { ComboBoxSection, ComboBoxItem, ComboBox } from "@react-spectrum/s2";
+import { Menu, MenuTrigger, Button, Section, Item } from '@adobe/react-spectrum';
+
+<>
+  <ComboBox>
+    <ComboBoxSection><Header>Animals</Header>
+      <ComboBoxItem id="dog">Dog</ComboBoxItem>
+      <ComboBoxItem id="cat">Cat</ComboBoxItem>
+    </ComboBoxSection>
+  </ComboBox>
+  <MenuTrigger>
+    <Button>Open</Button>
+    <Menu>
+      <Section title="Actions">
+        <Item key="cut">Cut</Item>
+      </Section>
+    </Menu>
+  </MenuTrigger>
+</>"
+`;
+
 exports[`Should only update components provided to --components option 1`] = `
 "import { TextArea } from '@adobe/react-spectrum';
 
@@ -22,6 +44,92 @@ import { Button } from "@react-spectrum/s2";
 </div>"
 `;
 
+exports[`Should update ActionGroup related components provided to --components option 1`] = `
+"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
+
+<ActionButtonGroup>
+  <ActionButton key="add" onPress={() => onAction("add")}>Add</ActionButton>
+  <ActionButton key="delete" onPress={() => onAction("delete")}>Delete</ActionButton>
+  <ActionButton key="edit" onPress={() => onAction("edit")}>Edit</ActionButton>
+</ActionButtonGroup>"
+`;
+
+exports[`Should update DialogTrigger related components provided to --components option 1`] = `
+"import { Button, Heading, Content } from '@adobe/react-spectrum';
+
+import { DialogTrigger, Dialog } from "@react-spectrum/s2";
+
+<DialogTrigger>
+  <Button>Test</Button>
+  <Dialog>
+    <Heading>Test</Heading>
+
+    <Content>Content</Content>
+  </Dialog>
+</DialogTrigger>"
+`;
+
+exports[`Should update Menu related components provided to --components option 1`] = `
+"import {
+  UnavailableMenuItemTrigger,
+  ContextualHelpPopover,
+  MenuItem,
+  MenuSection,
+  Menu,
+  MenuTrigger,
+  SubmenuTrigger,
+} from "@react-spectrum/s2";
+
+import { Breadcrumbs, Item, Button, Heading, Content } from '@adobe/react-spectrum';
+
+<>
+  <MenuTrigger>
+    <Button>Edit</Button>
+    <Menu>
+      <MenuItem id="undo">Undo</MenuItem>
+      <SubmenuTrigger>
+        <MenuItem id="share">Share</MenuItem>
+        <Menu>
+          <MenuItem id="sms">SMS</MenuItem>
+        </Menu>
+      </SubmenuTrigger>
+      <MenuSection><Header>Help</Header>
+        <UnavailableMenuItemTrigger isUnavailable>
+          <MenuItem id="cut">Cut</MenuItem>
+          <ContextualHelpPopover>
+            <Heading>Cut</Heading>
+            <Content>Please select text for Cut to be enabled.</Content>
+          </ContextualHelpPopover>
+        </UnavailableMenuItemTrigger>
+      </MenuSection>
+    </Menu>
+  </MenuTrigger>
+  <Breadcrumbs>
+    <Item key="home">Home</Item>
+  </Breadcrumbs>
+</>"
+`;
+
+exports[`Should update Tabs related components provided to --components option 1`] = `
+"import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2";
+
+<Tabs aria-label="History of Ancient Rome"><TabList>
+    <Tab id="FoR">Founding of Rome</Tab>
+    <Tab id="MaR">Monarchy and Republic</Tab>
+  </TabList><TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel><TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel></Tabs>"
+`;
+
+exports[`Should update TooltipTrigger related components provided to --components option 1`] = `
+"import { ActionButton } from '@adobe/react-spectrum';
+
+import { TooltipTrigger, Tooltip } from "@react-spectrum/s2";
+
+<TooltipTrigger placement="bottom">
+  <ActionButton aria-label="Edit Name"><Edit /></ActionButton>
+  <Tooltip>Change Name</Tooltip>
+</TooltipTrigger>"
+`;
+
 exports[`Should update multiple components provided to --components option 1`] = `
 "import { Button, TextArea } from "@react-spectrum/s2";
 
@@ -31,3 +139,24 @@ exports[`Should update multiple components provided to --components option 1`] =
   <TextArea />
 </div>"
 `;
+
+exports[`Should update related TableView components provided to --components option 1`] = `
+"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
+
+<TableView>
+  <TableHeader>
+    <Column id="test" isRowHeader={true}>Test</Column>
+    <Column id="blah">Blah</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>Test1</Cell>
+      <Cell>One</Cell>
+    </Row>
+    <Row>
+      <Cell>Test2</Cell>
+      <Cell>One</Cell>
+    </Row>
+  </TableBody>
+</TableView>"
+`;