From 3f4b1ef4cccefdb882f20eb47fff8de5c6e58427 Mon Sep 17 00:00:00 2001
From: Daniel Dipper <daniel.dipper@sage.com>
Date: Tue, 19 Jan 2021 15:57:46 +0000
Subject: [PATCH] feat: add prop codemod

---
 bin/cli.js                                    | 12 +--
 transforms/add-button-margin-prop/README.md   | 23 -----
 .../ExportDefaultDeclaration.input.js         |  4 -
 .../ExportDefaultDeclaration.output.js        |  4 -
 .../ExportNamedDeclaration.input.js           |  4 -
 .../ExportNamedDeclaration.output.js          |  4 -
 .../SiblingCombinator.input.js                |  6 --
 .../SiblingCombinator.output.js               |  6 --
 .../__tests__/add-button-margin-prop.js       |  4 -
 .../add-button-margin-prop.js                 | 84 -------------------
 transforms/add-prop/README.md                 | 58 +++++++++++--
 .../__testfixtures__/BooleanFalse.input.js    |  3 +
 .../__testfixtures__/BooleanFalse.output.js   |  3 +
 .../{Basic.input.js => BooleanTrue.input.js}  |  2 +-
 .../__testfixtures__/BooleanTrue.output.js    |  3 +
 .../add-prop/__testfixtures__/Bug.input.js    |  2 -
 .../add-prop/__testfixtures__/Bug.output.js   |  2 -
 ...output.js => NoTransformRequired.input.js} |  0
 .../NoTransformRequired.output.js             |  0
 .../add-prop/__testfixtures__/Number.input.js |  4 +
 .../__testfixtures__/Number.output.js         |  3 +
 .../add-prop/__testfixtures__/String.input.js |  3 +
 .../__testfixtures__/String.output.js         |  3 +
 transforms/add-prop/__tests__/add-prop.js     | 70 ++++++++++++++--
 transforms/builder/addAttribute.js            | 32 +++++--
 25 files changed, 172 insertions(+), 167 deletions(-)
 delete mode 100644 transforms/add-button-margin-prop/README.md
 delete mode 100644 transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.input.js
 delete mode 100644 transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.output.js
 delete mode 100644 transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.input.js
 delete mode 100644 transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.output.js
 delete mode 100644 transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.input.js
 delete mode 100644 transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.output.js
 delete mode 100644 transforms/add-button-margin-prop/__tests__/add-button-margin-prop.js
 delete mode 100644 transforms/add-button-margin-prop/add-button-margin-prop.js
 create mode 100644 transforms/add-prop/__testfixtures__/BooleanFalse.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/BooleanFalse.output.js
 rename transforms/add-prop/__testfixtures__/{Basic.input.js => BooleanTrue.input.js} (59%)
 create mode 100644 transforms/add-prop/__testfixtures__/BooleanTrue.output.js
 delete mode 100644 transforms/add-prop/__testfixtures__/Bug.input.js
 delete mode 100644 transforms/add-prop/__testfixtures__/Bug.output.js
 rename transforms/add-prop/__testfixtures__/{Basic.output.js => NoTransformRequired.input.js} (100%)
 create mode 100644 transforms/add-prop/__testfixtures__/NoTransformRequired.output.js
 create mode 100644 transforms/add-prop/__testfixtures__/Number.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/Number.output.js
 create mode 100644 transforms/add-prop/__testfixtures__/String.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/String.output.js

diff --git a/bin/cli.js b/bin/cli.js
index bb982d7..43dc38f 100644
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -106,11 +106,6 @@ function Cli() {
     .description("Wrap children of DialogFullScreen in AppWrapper")
     .action((target, command) => runTransform(target, command, program));
 
-  program
-    .command("add-button-margin-prop <target>")
-    .description("adds margin to button when there is more than one")
-    .action((target, command) => runTransform(target, command, program));
-
   program
     .command("message-remove-classic-theme <target>")
     .description("Remove classic theme props from the message component")
@@ -128,6 +123,13 @@ function Cli() {
     )
     .action((target, command) => runTransform(target, command, program));
 
+  program
+    .command("add-prop <target> <component> <prop> <value>")
+    .description("adds a new prop and value to the specified component")
+    .action((target, component, prop, value, command) =>
+      runTransform(target, command, program, { component, prop, value })
+    );
+
   program
     .command("rename-prop <target> <component> <old> <replacement>")
     .description(
diff --git a/transforms/add-button-margin-prop/README.md b/transforms/add-button-margin-prop/README.md
deleted file mode 100644
index 311e393..0000000
--- a/transforms/add-button-margin-prop/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# add-button-margin-prop
-
-This codemod will find where there are two or more buttons and add the prop `ml` to the buttons that are siblings. This will appear as `ml={2}`. 
-
-```diff
-- <Button />
-+ <Button ml={2} />
-```
-
-## Usage
-
-`npx carbon-codemod add-button-margin-prop <target>`
-
-### Example
-
-`npx carbon-codemod add-button-margin-prop <target>`
-
-```js
-```
-```diff
-- <Button />
-+ <Button ml={2} />
-```
\ No newline at end of file
diff --git a/transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.input.js b/transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.input.js
deleted file mode 100644
index 02cfa84..0000000
--- a/transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.input.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Button from "carbon-react/lib/components/button";
-
-export default () => <div><Button /><Button /></div>;
-export const MyApp = () => <div><Button /></div>;
\ No newline at end of file
diff --git a/transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.output.js b/transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.output.js
deleted file mode 100644
index 41e1d40..0000000
--- a/transforms/add-button-margin-prop/__testfixtures__/ExportDefaultDeclaration.output.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Button from "carbon-react/lib/components/button";
-
-export default () => <div><Button /><Button ml="2" /></div>;
-export const MyApp = () => <div><Button /></div>;
\ No newline at end of file
diff --git a/transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.input.js b/transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.input.js
deleted file mode 100644
index 8a1f1e3..0000000
--- a/transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.input.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Button from "carbon-react/lib/components/button";
-
-export default () => <div><Button /><Button /></div>;
-export const MyApp = () => <div><Button /><Button /></div>
\ No newline at end of file
diff --git a/transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.output.js b/transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.output.js
deleted file mode 100644
index ac4a683..0000000
--- a/transforms/add-button-margin-prop/__testfixtures__/ExportNamedDeclaration.output.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Button from "carbon-react/lib/components/button";
-
-export default () => <div><Button /><Button ml="2" /></div>;
-export const MyApp = () => <div><Button /><Button ml="2" /></div>
\ No newline at end of file
diff --git a/transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.input.js b/transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.input.js
deleted file mode 100644
index 80c5a54..0000000
--- a/transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.input.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const SiblingCombinator = () => (<>
-  <Button>One</Button>
-  <span>a</span>
-  <Button>Two</Button>
-  <span><Button>Three</Button></span>
-  </>);
\ No newline at end of file
diff --git a/transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.output.js b/transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.output.js
deleted file mode 100644
index 5c4956b..0000000
--- a/transforms/add-button-margin-prop/__testfixtures__/SiblingCombinator.output.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const SiblingCombinator = () => (<>
-  <Button>One</Button>
-  <span>a</span>
-  <Button ml="2">Two</Button>
-  <span><Button>Three</Button></span>
-  </>);
\ No newline at end of file
diff --git a/transforms/add-button-margin-prop/__tests__/add-button-margin-prop.js b/transforms/add-button-margin-prop/__tests__/add-button-margin-prop.js
deleted file mode 100644
index 961da6c..0000000
--- a/transforms/add-button-margin-prop/__tests__/add-button-margin-prop.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import defineTest from "../../../defineTest";
-
-// defineTest(__dirname, "add-button-margin-prop", null, "ExportDefaultDeclaration");
-defineTest(__dirname, "add-button-margin-prop", null, "ExportNamedDeclaration");
diff --git a/transforms/add-button-margin-prop/add-button-margin-prop.js b/transforms/add-button-margin-prop/add-button-margin-prop.js
deleted file mode 100644
index 7b18381..0000000
--- a/transforms/add-button-margin-prop/add-button-margin-prop.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * Convert all Buttons after the first button from <Button /> to <Button ml={2} />
- */
-import registerMethods from "../registerMethods";
-
-const transformer = (fileInfo, api, options) => {
-  const j = api.jscodeshift;
-  registerMethods(j);
-
-  const addMarginToButton = (buttonJSXElement) => {
-    // If the element already has a ml prop, we don't want to modify it
-    if (
-      j(buttonJSXElement.value.openingElement.attributes)
-        .find(j.JSXIdentifier, { name: "ml" })
-        .size()
-    ) {
-      return false;
-    }
-
-    buttonJSXElement.value.openingElement.attributes.push(
-      j.jsxAttribute(j.jsxIdentifier("ml"), j.literal("2"))
-    );
-    return true;
-  };
-
-  /**
-   * Transform an ExportDefaultDeclaration
-   *
-   * e.g. export default () => <><Button>...</>
-   * @param {*} root
-   */
-  const transformExportDefaultDeclaration = (root) => {
-    const exportDefaultDeclarations = root.find(j.ExportDefaultDeclaration);
-
-    if (!exportDefaultDeclarations.size()) {
-      return false;
-    }
-
-    const buttons = exportDefaultDeclarations.findJSXElementsByImport(
-      "carbon-react/lib/components/button"
-    );
-
-    if (!buttons) {
-      return false;
-    }
-
-    let didUpdate = false;
-    buttons.forEach((button, i) => {
-      if (i > 0) {
-        let result = addMarginToButton(button);
-        didUpdate = didUpdate || result;
-      }
-    });
-
-    return didUpdate;
-  };
-
-  const transformExportNamedDeclaration = (root) => {};
-
-  const root = j(fileInfo.source);
-
-  // Button import path
-  const buttons = root.findJSXElementsByImport(
-    "carbon-react/lib/components/button"
-  );
-
-  // If button is not imported, skip this file
-  if (buttons.size() === 0) {
-    console.log("no import found");
-    return;
-  }
-
-  let didUpdateFile = false;
-  didUpdateFile = [
-    transformExportDefaultDeclaration(root),
-    transformExportNamedDeclaration(root),
-  ].some(Boolean);
-
-  if (didUpdateFile) {
-    return root.toSource();
-  }
-};
-
-module.exports = transformer;
diff --git a/transforms/add-prop/README.md b/transforms/add-prop/README.md
index 799fbaa..79433fd 100644
--- a/transforms/add-prop/README.md
+++ b/transforms/add-prop/README.md
@@ -1,16 +1,58 @@
-# add-attribute
+# add-prop
 
-In order to accomodate the `styled-system` spacing api being added to Carbon components, the `padding` prop on `Tile` has been replaced with `p`. 
+This universal codemod provides possibility to add any prop to any component.
 
-Currently `padding` accepts the values `XS`, `S`, `M`, `L` and `XL` which map to paddings of `8px` up to `40px`. This codemod will replace these with the `styled-system` equivalent. I.e. for `padding="XS"` this will be `p={1}`, both of which map to `8px`.
+```diff
+- <Component />
++ <Component newProp="info" />
+
+```
+## Usage
+
+`npx carbon-codemod add-prop <target> <component-import-path> <prop> <value>`
+
+### Examples
+
+### String
+`npx carbon-codemod add-prop src carbon-react/lib/components/button ml "16px"`
+
+```js
+import Button from "carbon-react/lib/components/button";
+```
+```diff
+- <Button>Button</Button>
++ <Button ml="16px">Button</Button>
+```
+
+### Number
+`npx carbon-codemod add-prop src carbon-react/lib/components/button ml 2`
 
+```js
+import Button from "carbon-react/lib/components/button";
+```
 ```diff
-- <Tile padding="XS">Content</Tile>
-+ <Tile p={1}>Content</Tile>
+- <Button>Button</Button>
++ <Button ml={2}>Button</Button>
 ```
 
-If there is a pattern that you use that is not transformed, please file a feature request.
+### Boolean - True
+`npx carbon-codemod add-prop src carbon-react/lib/components/button hasBorder true`
 
-## Usage 
+```js
+import Button from "carbon-react/lib/components/button";
+```
+```diff
+- <Button>Button</Button>
++ <Button hasBorder>Button</Button>
+```
+
+### Boolean - False
+`npx carbon-codemod add-prop src carbon-react/lib/components/button hasBorder true`
 
-`npx carbon-codemod tile-update-padding-prop <target>`
+```js
+import Button from "carbon-react/lib/components/button";
+```
+```diff
+- <Button>Button</Button>
++ <Button hasBorder={false}>Button</Button>
+```
\ No newline at end of file
diff --git a/transforms/add-prop/__testfixtures__/BooleanFalse.input.js b/transforms/add-prop/__testfixtures__/BooleanFalse.input.js
new file mode 100644
index 0000000..45b4254
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/BooleanFalse.input.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asFalse = () => <Button />
diff --git a/transforms/add-prop/__testfixtures__/BooleanFalse.output.js b/transforms/add-prop/__testfixtures__/BooleanFalse.output.js
new file mode 100644
index 0000000..fca5768
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/BooleanFalse.output.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asFalse = () => <Button hasBorder={false} />
diff --git a/transforms/add-prop/__testfixtures__/Basic.input.js b/transforms/add-prop/__testfixtures__/BooleanTrue.input.js
similarity index 59%
rename from transforms/add-prop/__testfixtures__/Basic.input.js
rename to transforms/add-prop/__testfixtures__/BooleanTrue.input.js
index 3df6090..1853e0f 100644
--- a/transforms/add-prop/__testfixtures__/Basic.input.js
+++ b/transforms/add-prop/__testfixtures__/BooleanTrue.input.js
@@ -1,3 +1,3 @@
 import Button from "carbon-react/lib/components/button";
 
-export const App = () => <Button />
+export const asTrue = () => <Button />
diff --git a/transforms/add-prop/__testfixtures__/BooleanTrue.output.js b/transforms/add-prop/__testfixtures__/BooleanTrue.output.js
new file mode 100644
index 0000000..1da6e3a
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/BooleanTrue.output.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asTrue = () => <Button hasBorder />
diff --git a/transforms/add-prop/__testfixtures__/Bug.input.js b/transforms/add-prop/__testfixtures__/Bug.input.js
deleted file mode 100644
index 1b812ca..0000000
--- a/transforms/add-prop/__testfixtures__/Bug.input.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Tile from "carbon-react/lib/components/tile";
-export default ({ padding, ...props }) => <Tile padding={padding} {...props}>Example</Tile>;
diff --git a/transforms/add-prop/__testfixtures__/Bug.output.js b/transforms/add-prop/__testfixtures__/Bug.output.js
deleted file mode 100644
index 3258723..0000000
--- a/transforms/add-prop/__testfixtures__/Bug.output.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Tile from "carbon-react/lib/components/tile";
-export default ({ padding, ...props }) => <Tile p={padding} {...props}>Example</Tile>;
diff --git a/transforms/add-prop/__testfixtures__/Basic.output.js b/transforms/add-prop/__testfixtures__/NoTransformRequired.input.js
similarity index 100%
rename from transforms/add-prop/__testfixtures__/Basic.output.js
rename to transforms/add-prop/__testfixtures__/NoTransformRequired.input.js
diff --git a/transforms/add-prop/__testfixtures__/NoTransformRequired.output.js b/transforms/add-prop/__testfixtures__/NoTransformRequired.output.js
new file mode 100644
index 0000000..e69de29
diff --git a/transforms/add-prop/__testfixtures__/Number.input.js b/transforms/add-prop/__testfixtures__/Number.input.js
new file mode 100644
index 0000000..f4b0e31
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/Number.input.js
@@ -0,0 +1,4 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asNumber = () => <Button />
+
diff --git a/transforms/add-prop/__testfixtures__/Number.output.js b/transforms/add-prop/__testfixtures__/Number.output.js
new file mode 100644
index 0000000..7951775
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/Number.output.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asNumber = () => <Button ml={2} />
diff --git a/transforms/add-prop/__testfixtures__/String.input.js b/transforms/add-prop/__testfixtures__/String.input.js
new file mode 100644
index 0000000..c406fa6
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/String.input.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asString = () => <Button />
\ No newline at end of file
diff --git a/transforms/add-prop/__testfixtures__/String.output.js b/transforms/add-prop/__testfixtures__/String.output.js
new file mode 100644
index 0000000..4551299
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/String.output.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asString = () => <Button ml="16px" />
diff --git a/transforms/add-prop/__tests__/add-prop.js b/transforms/add-prop/__tests__/add-prop.js
index 15461bb..b3cc856 100644
--- a/transforms/add-prop/__tests__/add-prop.js
+++ b/transforms/add-prop/__tests__/add-prop.js
@@ -1,7 +1,67 @@
 import defineTest from "../../../defineTest";
 
-defineTest(__dirname, "add-prop", {
-  component: "carbon-react/lib/components/button",
-  prop: "ml",
-  value: "2",
-}, "Basic");
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "ml",
+    value: 2,
+  },
+  "Number"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "ml",
+    value: "16px",
+  },
+  "String"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "hasBorder",
+    value: true,
+  },
+  "BooleanTrue"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "hasBorder",
+    value: false,
+  },
+  "BooleanFalse"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/component",
+    prop: "newProp",
+    value: "value",
+  },
+  "NoImport"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "ml",
+    value: "2",
+  },
+  "NoTransformRequired"
+);
diff --git a/transforms/builder/addAttribute.js b/transforms/builder/addAttribute.js
index aed7791..3702f57 100644
--- a/transforms/builder/addAttribute.js
+++ b/transforms/builder/addAttribute.js
@@ -16,16 +16,38 @@ const addAttribute = (path, attribute, value) => (
   }
 
   let didUpdate = false;
-  components.forEach((component, i) => {
+  components.forEach((component) => {
     if (
       !j(component.value.openingElement.attributes)
         .find(j.JSXIdentifier, { name: attribute })
         .size()
     ) {
-      component.value.openingElement.attributes.push(
-        j.jsxAttribute(j.jsxIdentifier(attribute), j.literal(value))
-      );
-      didUpdate = true;
+      if (typeof value === "string") {
+        component.value.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier(attribute), j.literal(value))
+        );
+        didUpdate = true;
+      }
+
+      if (
+        (typeof value !== "string" && typeof value !== "boolean") ||
+        (typeof value === "boolean" && value === false)
+      ) {
+        component.value.openingElement.attributes.push(
+          j.jsxAttribute(
+            j.jsxIdentifier(attribute),
+            j.jsxExpressionContainer(j.literal(value))
+          )
+        );
+        didUpdate = true;
+      }
+
+      if (typeof value === "boolean" && value === true) {
+        component.value.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier(attribute))
+        );
+        didUpdate = true;
+      }
     }
   });