@carbon/upgrade 10.17.0-rc.0 → 10.17.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "10.17.0-rc.0",
+  "version": "10.17.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -14,7 +14,8 @@
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
   "files": [
     "bin",
-    "cli.js"
+    "cli.js",
+    "transforms"
   ],
   "keywords": [
     "carbon",
@@ -30,14 +31,13 @@
     "access": "public"
   },
   "scripts": {
-    "build": "esbuild src/cli.js --bundle --platform=node --outfile=cli.js --target=node14",
+    "build": "esbuild src/cli.js --bundle --platform=node --outfile=cli.js --target=node14 --external:jscodeshift",
     "clean": "rimraf cli.js",
     "watch": "yarn build --watch"
   },
   "devDependencies": {
     "chalk": "^4.1.1",
     "change-case": "^4.1.2",
-    "cross-spawn": "^7.0.3",
     "esbuild": "^0.14.10",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.7",
@@ -45,7 +45,6 @@
     "inquirer": "^8.1.0",
     "is-git-clean": "^1.1.0",
     "jest-diff": "^27.4.6",
-    "jscodeshift": "^0.13.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "memfs": "^3.4.0",
@@ -55,5 +54,8 @@
     "semver": "^7.3.5",
     "yargs": "^17.0.1"
   },
-  "gitHead": "885c987334058efa5ba30582d615c04de2e631a4"
+  "dependencies": {
+    "jscodeshift": "^0.13.1"
+  },
+  "gitHead": "e76c42ab78cbee043db643597b7b5d79bd387c9b"
 }

package/transforms/ARCHITECTURE.md

@@ -0,0 +1,47 @@
+# transforms
+
+> A folder of codemod transforms to be ran independently or via the
+> @carbon/upgrade cli
+
+## Usage
+
+The transforms contained within this folder are primarily intended to be used
+within @carbon/upgrade cli commands.
+
+You can run a specific transform for a path in the project by running:
+
+```bash
+yarn jscodeshift -t transforms/<name>.js 'path/to/file'
+```
+
+If you want to preview changes that are being made, you should enable the `dry`
+and `print` options:
+
+```bash
+yarn jscodeshift -d -p -t transforms/<name>.js 'path/to/file'
+```
+
+## Writing transforms
+
+Transforms are written in the `transforms` directory with their tests and
+fixtures written in the `__tests__` and `__testfixtures__` directories,
+accordingly.
+
+As an example, to add a transform called `sort-prop-types` oone would create the
+following files:
+
+```
+- codemods
+  - transforms
+    - __testfixtures__
+      - sort-prop-types.input.js
+      - sort-prop-types.output.js
+    - __tests__
+      - sort-prop-types-test.js
+    - sort-prop-types.js
+```
+
+In this structure, the test file will determine which test fixtures get run.
+Test fixtures are written with a `*.input.js` and `*.output.js` convention.
+Files that end with `*.input.js` are given to your transform and the test runner
+will assert that the output matches what is available in `*.output.js`.

package/transforms/__testfixtures__/icons-react-size-prop-object-key.input.js

@@ -0,0 +1,16 @@
+import { Add16, Add32 } from '@carbon/icons-react';
+
+const icons = {
+  Add16,
+  // prettier-ignore
+  Add32,
+};
+
+const options = {
+  Add16: 'Add16',
+  Add32: 'Add32',
+};
+
+function TestComponent() {
+  return <div>{icons[options['Add16']]}</div>;
+}

package/transforms/__testfixtures__/icons-react-size-prop-object-key.output.js

@@ -0,0 +1,16 @@
+import { Add } from '@carbon/icons-react/next';
+
+const icons = {
+  Add16: Add,
+  // prettier-ignore
+  Add32: props => <Add size={32} {...props} />,
+};
+
+const options = {
+  Add16: 'Add16',
+  Add32: 'Add32',
+};
+
+function TestComponent() {
+  return <div>{icons[options['Add16']]}</div>;
+}

package/transforms/__testfixtures__/icons-react-size-prop-rename.input.js

@@ -0,0 +1,44 @@
+import {
+  Add32,
+  Bee24,
+  Caret20,
+  DownArrow16,
+  Search24,
+  Zone24 as CustomZone,
+} from '@carbon/icons-react';
+import { Search } from 'test';
+
+function RendersIconDirectly() {
+  return (
+    <div>
+      <Add32 />
+      <Bee24 />
+      <Caret20 />
+      <DownArrow16 />
+    </div>
+  );
+}
+
+function RendersIconWithProps(props) {
+  return (
+    <div>
+      <Add32 aria-label="test" {...props} />
+      <Bee24 aria-label="test" {...props} />
+      <Caret20 aria-label="test" {...props} />
+      <DownArrow16 aria-label="test" {...props} />
+    </div>
+  );
+}
+
+function AliasedIcon() {
+  return <CustomZone />;
+}
+
+function ExistingScope() {
+  return (
+    <div>
+      <Search />
+      <Search24 />
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import {
+  Add,
+  Bee,
+  Caret,
+  DownArrow,
+  Search as SearchIcon,
+  Zone as CustomZone,
+} from '@carbon/icons-react/next';
+import { Search } from 'test';
+
+function RendersIconDirectly() {
+  return (
+    <div>
+      <Add size={32} />
+      <Bee size={24} />
+      <Caret size={20} />
+      <DownArrow />
+    </div>
+  );
+}
+
+function RendersIconWithProps(props) {
+  return (
+    <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>
+  );
+}
+
+function AliasedIcon() {
+  return <CustomZone size={24} />;
+}
+
+function ExistingScope() {
+  return (
+    <div>
+      <Search />
+      <SearchIcon size={24} />
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+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} />
+      <Size renderIcon={Bee24} />
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { Add, Bee, Chevron as chevron } from '@carbon/icons-react/next';
+
+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>
+      <DefaultSize renderIcon={Add} />
+      <Size renderIcon={props => <Bee size={24} {...props} />} />
+    </div>
+  );
+}

package/transforms/__testfixtures__/size-prop-update.input.js

@@ -0,0 +1,143 @@
+function Accordion() {
+  return (
+    <div>
+      <Accordion className="test" size="xl" />
+      <Accordion className="test" size="xl">
+        <AccordionItem>Test</AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div>
+      <Button className="test" size="small" />
+      <Button className="test" size="field"></Button>
+      <Button className="test" size="default"></Button>
+      <Button className="test" size="lg"></Button>
+      <Button className="test" size="xl"></Button>
+    </div>
+  );
+}
+
+function ComboBox() {
+  return <ComboBox className="test" size="xl" />;
+}
+
+function ContentSwitcher() {
+  return (
+    <ContentSwitcher className="test" size="xl">
+      <Switch name="one" text="First section" />
+      <Switch name="two" text="Second section" />
+      <Switch name="three" text="Third section" />
+    </ContentSwitcher>
+  );
+}
+
+function Dropdown() {
+  return <Dropdown className="test" size="xl" />;
+}
+
+function DataTable() {
+  return (
+    <div>
+      <Table className="test" size="compact"></Table>
+      <Table className="test" size="short"></Table>
+      <Table className="test" size="tall"></Table>
+      <DataTable className="test" size="compact"></DataTable>
+      <DataTable className="test" size="short"></DataTable>
+      <DataTable className="test" size="tall"></DataTable>
+    </div>
+  );
+}
+
+function DatePicker() {
+  return (
+    <DatePicker datePickerType="single">
+      <DatePickerInput
+        size="xl"
+        id="datepicker"
+        labelText="Datepicker Test"></DatePickerInput>
+    </DatePicker>
+  );
+}
+
+function FileUploader() {
+  return (
+    <div>
+      <FileUploader size="small"></FileUploader>
+      <FileUploader size="field"></FileUploader>
+      <FileUploader size="default"></FileUploader>
+      <FileUploaderItem size="small"></FileUploaderItem>
+      <FileUploaderItem size="field"></FileUploaderItem>
+      <FileUploaderItem size="default"></FileUploaderItem>
+      <FileUploaderButton size="small"></FileUploaderButton>
+      <FileUploaderButton size="field"></FileUploaderButton>
+      <FileUploaderButton size="default"></FileUploaderButton>
+      <FileUploaderDropContainer size="small"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="field"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="default"></FileUploaderDropContainer>
+    </div>
+  );
+}
+
+function Link() {
+  return <Link size="lg" />;
+}
+
+function MultiSelect() {
+  return (
+    <div>
+      <MultiSelect
+        size="xl"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <MultiSelect.Filterable
+        size="xl"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+    </div>
+  );
+}
+
+function NumberInput() {
+  return <NumberInput size="xl" id="numberinput"></NumberInput>;
+}
+
+function OverflowMenu() {
+  return <OverflowMenu size="xl" className="test"></OverflowMenu>;
+}
+
+function Search() {
+  return (
+    <div>
+      <Search className="test" size="lg" />
+      <Search className="test" size="xl" />
+    </div>
+  );
+}
+
+function Select() {
+  return (
+    <div>
+      <Select className="test" size="lg" />
+      <Select className="test" size="xl" />
+    </div>
+  );
+}
+
+function TextInput() {
+  return (
+    <div>
+      <TextInput size="lg" id="textinput1" labelText="lg -> md"></TextInput>
+      <TextInput size="xl" id="textinput1" labelText="xl -> lg"></TextInput>
+    </div>
+  );
+}
+
+function TimePicker() {
+  return <TimePicker size="xl" id="timeinput" />;
+}

package/transforms/__testfixtures__/size-prop-update.output.js

@@ -0,0 +1,143 @@
+function Accordion() {
+  return (
+    <div>
+      <Accordion className="test" size="lg" />
+      <Accordion className="test" size="lg">
+        <AccordionItem>Test</AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <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>
+  );
+}
+
+function ComboBox() {
+  return <ComboBox className="test" size="lg" />;
+}
+
+function ContentSwitcher() {
+  return (
+    <ContentSwitcher className="test" size="lg">
+      <Switch name="one" text="First section" />
+      <Switch name="two" text="Second section" />
+      <Switch name="three" text="Third section" />
+    </ContentSwitcher>
+  );
+}
+
+function Dropdown() {
+  return <Dropdown className="test" size="lg" />;
+}
+
+function DataTable() {
+  return (
+    <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>
+  );
+}
+
+function DatePicker() {
+  return (
+    <DatePicker datePickerType="single">
+      <DatePickerInput
+        size="lg"
+        id="datepicker"
+        labelText="Datepicker Test"></DatePickerInput>
+    </DatePicker>
+  );
+}
+
+function FileUploader() {
+  return (
+    <div>
+      <FileUploader size="sm"></FileUploader>
+      <FileUploader size="md"></FileUploader>
+      <FileUploader size="lg"></FileUploader>
+      <FileUploaderItem size="sm"></FileUploaderItem>
+      <FileUploaderItem size="md"></FileUploaderItem>
+      <FileUploaderItem size="lg"></FileUploaderItem>
+      <FileUploaderButton size="sm"></FileUploaderButton>
+      <FileUploaderButton size="md"></FileUploaderButton>
+      <FileUploaderButton size="lg"></FileUploaderButton>
+      <FileUploaderDropContainer size="sm"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="md"></FileUploaderDropContainer>
+      <FileUploaderDropContainer size="lg"></FileUploaderDropContainer>
+    </div>
+  );
+}
+
+function Link() {
+  return <Link size="lg" />;
+}
+
+function MultiSelect() {
+  return (
+    <div>
+      <MultiSelect
+        size="lg"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <MultiSelect.Filterable
+        size="lg"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+    </div>
+  );
+}
+
+function NumberInput() {
+  return <NumberInput size="lg" id="numberinput"></NumberInput>;
+}
+
+function OverflowMenu() {
+  return <OverflowMenu size="lg" className="test"></OverflowMenu>;
+}
+
+function Search() {
+  return (
+    <div>
+      <Search className="test" size="md" />
+      <Search className="test" size="lg" />
+    </div>
+  );
+}
+
+function Select() {
+  return (
+    <div>
+      <Select className="test" size="md" />
+      <Select className="test" size="lg" />
+    </div>
+  );
+}
+
+function TextInput() {
+  return (
+    <div>
+      <TextInput size="md" id="textinput1" labelText="lg -> md"></TextInput>
+      <TextInput size="lg" id="textinput1" labelText="xl -> lg"></TextInput>
+    </div>
+  );
+}
+
+function TimePicker() {
+  return <TimePicker size="lg" id="timeinput" />;
+}

package/transforms/__testfixtures__/small-to-size-prop.input.js

@@ -0,0 +1,11 @@
+function Test1() {
+  return <Button className="test" small />;
+}
+
+function Test2() {
+  return (
+    <Button className="test" small>
+      Test
+    </Button>
+  );
+}

package/transforms/__testfixtures__/small-to-size-prop.output.js

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

package/transforms/__testfixtures__/sort-prop-types.input.js

@@ -0,0 +1,7 @@
+function MyComponent() {}
+
+MyComponent.propTypes = {
+  a: PropTypes.string,
+  c: PropTypes.string,
+  b: PropTypes.string,
+};

package/transforms/__testfixtures__/sort-prop-types.output.js

@@ -0,0 +1,7 @@
+function MyComponent() {}
+
+MyComponent.propTypes = {
+  a: PropTypes.string,
+  b: PropTypes.string,
+  c: PropTypes.string,
+};

package/transforms/__testfixtures__/sort-prop-types2.input.js

@@ -0,0 +1,7 @@
+class A extends React.Component {
+  static propTypes = {
+    a: PropTypes.string,
+    c: PropTypes.string,
+    b: PropTypes.string,
+  };
+}

package/transforms/__testfixtures__/sort-prop-types2.output.js

@@ -0,0 +1,7 @@
+class A extends React.Component {
+  static propTypes = {
+    a: PropTypes.string,
+    b: PropTypes.string,
+    c: PropTypes.string,
+  };
+}

package/transforms/__testfixtures__/update-carbon-components-react-import-to-scoped.input.js

@@ -0,0 +1,8 @@
+//prettier-ignore
+import { Button } from 'carbon-components-react';
+//prettier-ignore
+import { Tile, Tooltip } from 'carbon-components-react';
+//prettier-ignore
+import CodeSnippet from 'carbon-components-react';
+import Something from 'somewhere-else';
+import { SomethingElse } from 'somewhere-else';

package/transforms/__testfixtures__/update-carbon-components-react-import-to-scoped.output.js

@@ -0,0 +1,8 @@
+//prettier-ignore
+import { Button } from "@carbon/react";
+//prettier-ignore
+import { Tile, Tooltip } from "@carbon/react";
+//prettier-ignore
+import CodeSnippet from "@carbon/react";
+import Something from 'somewhere-else';
+import { SomethingElse } from 'somewhere-else';