fix(deps): update dependency jscodeshift to v17 (#17264)

* fix(deps): update dependency jscodeshift to v17

* fix(upgrade): add parens to expected output of codemods, update docs

* chore: update readme.md

* chore: yarn dedupe

* chore: yarn dedupe

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: kennylam <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>

.prettierignore

@@ -58,6 +58,7 @@ packages/**/examples/**
 
 # Upgrade
 packages/upgrade/cli.js
+packages/upgrade/**/*.output.js
 
 # Accessibility Verification Testing
 **/.avt/**

packages/upgrade/README.md

@@ -67,6 +67,12 @@ the
 Each is tested against a series of test fixtures to ensure transforms are
 predictable and consistently provide the intended output.
 
+#### Output formatting
+
+The output of a codemod may not match your codebase's formatting style. It is
+recommended to always run the result of a codemod through an autoformatter like
+[Prettier](https://prettier.io/).
+
 ## 🙌 Contributing
 
 If you have ideas on how we could make your migration experience easier, please

packages/upgrade/package.json

@@ -59,6 +59,6 @@
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.5.0",
-    "jscodeshift": "^0.13.1"
+    "jscodeshift": "^17.0.0"
   }
 }

packages/upgrade/transforms/__testfixtures__/icons-react-size-prop-rename.output.js

@@ -10,23 +10,23 @@ import { Search } from 'test';
 
 function RendersIconDirectly() {
   return (
-    <div>
+    (<div>
       <Add size={32} />
       <Bee size={24} />
       <Caret size={20} />
       <DownArrow />
-    </div>
+    </div>)
   );
 }
 
 function RendersIconWithProps(props) {
   return (
-    <div>
+    (<div>
       <Add size={32} aria-label="test" {...props} />
       <Bee size={24} aria-label="test" {...props} />
       <Caret size={20} aria-label="test" {...props} />
       <DownArrow aria-label="test" {...props} />
-    </div>
+    </div>)
   );
 }
 
@@ -36,9 +36,9 @@ function AliasedIcon() {
 
 function ExistingScope() {
   return (
-    <div>
+    (<div>
       <Search />
       <SearchIcon size={24} />
-    </div>
+    </div>)
   );
 }

packages/upgrade/transforms/__testfixtures__/icons-react-size-prop-with-prop.input.js

@@ -2,14 +2,11 @@ import { Add16, Bee24, Chevron24 as chevron } from '@carbon/icons-react';
 
 const mapped = {
   default: Add16,
-  // prettier-ignore
   size: Bee24,
-  // prettier-ignore
   lowercase: chevron,
 };
 
 function RenderIconProp() {
-  // prettier-ignore
   return (
     <div>
       <DefaultSize renderIcon={Add16} />

packages/upgrade/transforms/__testfixtures__/icons-react-size-prop-with-prop.output.js

@@ -2,21 +2,18 @@ import { Add, Bee, Chevron as chevron } from '@carbon/icons-react';
 
 const mapped = {
   default: Add,
-  // prettier-ignore
   size: props => <Bee size={24} {...props} />,
-  // prettier-ignore
   lowercase: props => React.createElement(chevron, {
     size: 24,
     ...props
   }),
 };
 
 function RenderIconProp() {
-  // prettier-ignore
   return (
-    <div>
+    (<div>
       <DefaultSize renderIcon={Add} />
       <Size renderIcon={props => <Bee size={24} {...props} />} />
-    </div>
+    </div>)
   );
 }

packages/upgrade/transforms/__testfixtures__/size-prop-update.output.js

@@ -1,23 +1,23 @@
 function Accordion() {
   return (
-    <div>
+    (<div>
       <Accordion className="test" size="lg" />
       <Accordion className="test" size="lg">
         <AccordionItem>Test</AccordionItem>
       </Accordion>
-    </div>
+    </div>)
   );
 }
 
 function Button() {
   return (
-    <div>
+    (<div>
       <Button className="test" size="sm" />
       <Button className="test" size="md"></Button>
       <Button className="test" size="lg"></Button>
       <Button className="test" size="xl"></Button>
       <Button className="test" size="2xl"></Button>
-    </div>
+    </div>)
   );
 }
 
@@ -27,11 +27,11 @@ function ComboBox() {
 
 function ContentSwitcher() {
   return (
-    <ContentSwitcher className="test" size="lg">
+    (<ContentSwitcher className="test" size="lg">
       <Switch name="one" text="First section" />
       <Switch name="two" text="Second section" />
       <Switch name="three" text="Third section" />
-    </ContentSwitcher>
+    </ContentSwitcher>)
   );
 }
 
@@ -41,31 +41,31 @@ function Dropdown() {
 
 function DataTable() {
   return (
-    <div>
+    (<div>
       <Table className="test" size="xs"></Table>
       <Table className="test" size="sm"></Table>
       <Table className="test" size="xl"></Table>
       <DataTable className="test" size="xs"></DataTable>
       <DataTable className="test" size="sm"></DataTable>
       <DataTable className="test" size="xl"></DataTable>
-    </div>
+    </div>)
   );
 }
 
 function DatePicker() {
   return (
-    <DatePicker datePickerType="single">
+    (<DatePicker datePickerType="single">
       <DatePickerInput
         size="lg"
         id="datepicker"
         labelText="Datepicker Test"></DatePickerInput>
-    </DatePicker>
+    </DatePicker>)
   );
 }
 
 function FileUploader() {
   return (
-    <div>
+    (<div>
       <FileUploader size="sm"></FileUploader>
       <FileUploader size="md"></FileUploader>
       <FileUploader size="lg"></FileUploader>
@@ -78,7 +78,7 @@ function FileUploader() {
       <FileUploaderDropContainer size="sm"></FileUploaderDropContainer>
       <FileUploaderDropContainer size="md"></FileUploaderDropContainer>
       <FileUploaderDropContainer size="lg"></FileUploaderDropContainer>
-    </div>
+    </div>)
   );
 }
 
@@ -88,7 +88,7 @@ function Link() {
 
 function MultiSelect() {
   return (
-    <div>
+    (<div>
       <MultiSelect
         size="lg"
         items={items}
@@ -99,7 +99,7 @@ function MultiSelect() {
         items={items}
         itemToString={(item) => (item ? item.text : '')}
       />
-    </div>
+    </div>)
   );
 }
 
@@ -113,28 +113,28 @@ function OverflowMenu() {
 
 function Search() {
   return (
-    <div>
+    (<div>
       <Search className="test" size="md" />
       <Search className="test" size="lg" />
-    </div>
+    </div>)
   );
 }
 
 function Select() {
   return (
-    <div>
+    (<div>
       <Select className="test" size="md" />
       <Select className="test" size="lg" />
-    </div>
+    </div>)
   );
 }
 
 function TextInput() {
   return (
-    <div>
+    (<div>
       <TextInput size="md" id="textinput1" labelText="lg -> md"></TextInput>
       <TextInput size="lg" id="textinput1" labelText="xl -> lg"></TextInput>
-    </div>
+    </div>)
   );
 }
 

packages/upgrade/transforms/__testfixtures__/small-to-size-prop.output.js

@@ -4,8 +4,7 @@ function Test1() {
 
 function Test2() {
   return (
-    <Button className="test" size="sm">
-      Test
-    </Button>
+    (<Button className="test" size="sm">Test
+          </Button>)
   );
 }