From 1706a21b46e739075a01c689447badb39e538df8 Mon Sep 17 00:00:00 2001
From: Daniel Dipper <daniel.dipper@sage.com>
Date: Tue, 22 Dec 2020 14:32:31 +0000
Subject: [PATCH] feat: add prop codemod

---
 bin/cli.js                                    |  7 ++
 transforms/add-prop/README.md                 | 46 ++++++++++
 .../__testfixtures__/BooleanFalse.input.js    |  3 +
 .../__testfixtures__/BooleanFalse.output.js   |  3 +
 .../__testfixtures__/BooleanTrue.input.js     |  3 +
 .../__testfixtures__/BooleanTrue.output.js    |  3 +
 .../__testfixtures__/NoImport.input.js        |  3 +
 .../__testfixtures__/NoImport.output.js       |  0
 .../NoTransformRequired.input.js              |  3 +
 .../NoTransformRequired.output.js             |  0
 .../add-prop/__testfixtures__/Node.input.js   |  4 +
 .../add-prop/__testfixtures__/Node.output.js  |  0
 .../add-prop/__testfixtures__/Number.input.js |  4 +
 .../__testfixtures__/Number.output.js         |  3 +
 .../add-prop/__testfixtures__/Object.input.js |  3 +
 .../__testfixtures__/Object.output.js         |  0
 .../add-prop/__testfixtures__/String.input.js |  3 +
 .../__testfixtures__/String.output.js         |  3 +
 transforms/add-prop/__tests__/add-prop.js     | 89 +++++++++++++++++++
 transforms/add-prop/add-prop.js               | 27 ++++++
 transforms/builder/addAttribute.js            | 57 ++++++++++++
 transforms/builder/index.js                   |  2 +
 22 files changed, 266 insertions(+)
 create mode 100644 transforms/add-prop/README.md
 create mode 100644 transforms/add-prop/__testfixtures__/BooleanFalse.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/BooleanFalse.output.js
 create mode 100644 transforms/add-prop/__testfixtures__/BooleanTrue.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/BooleanTrue.output.js
 create mode 100644 transforms/add-prop/__testfixtures__/NoImport.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/NoImport.output.js
 create mode 100644 transforms/add-prop/__testfixtures__/NoTransformRequired.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/NoTransformRequired.output.js
 create mode 100644 transforms/add-prop/__testfixtures__/Node.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/Node.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__/Object.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/Object.output.js
 create mode 100644 transforms/add-prop/__testfixtures__/String.input.js
 create mode 100644 transforms/add-prop/__testfixtures__/String.output.js
 create mode 100644 transforms/add-prop/__tests__/add-prop.js
 create mode 100644 transforms/add-prop/add-prop.js
 create mode 100644 transforms/builder/addAttribute.js

diff --git a/bin/cli.js b/bin/cli.js
index b6c9752..43dc38f 100644
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -123,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-prop/README.md b/transforms/add-prop/README.md
new file mode 100644
index 0000000..a324b95
--- /dev/null
+++ b/transforms/add-prop/README.md
@@ -0,0 +1,46 @@
+# add-prop
+
+This universal codemod provides possibility to add any prop to any component.
+
+```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"`
+
+```diff
+- <Button>Button</Button>
++ <Button ml="16px">Button</Button>
+```
+
+### Number
+`npx carbon-codemod add-prop src carbon-react/lib/components/button ml 2`
+
+```diff
+- <Button>Button</Button>
++ <Button ml={2}>Button</Button>
+```
+
+### Boolean - True
+`npx carbon-codemod add-prop src carbon-react/lib/components/button hasBorder true`
+
+```diff
+- <Button>Button</Button>
++ <Button hasBorder>Button</Button>
+```
+
+### Boolean - False
+`npx carbon-codemod add-prop src carbon-react/lib/components/button hasBorder false`
+
+```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__/BooleanTrue.input.js b/transforms/add-prop/__testfixtures__/BooleanTrue.input.js
new file mode 100644
index 0000000..1853e0f
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/BooleanTrue.input.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/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__/NoImport.input.js b/transforms/add-prop/__testfixtures__/NoImport.input.js
new file mode 100644
index 0000000..127d4ae
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/NoImport.input.js
@@ -0,0 +1,3 @@
+// Wrong Import
+import Tile from "carbon-react/lib/components/NotTile";
+export default () => <Tile />;
diff --git a/transforms/add-prop/__testfixtures__/NoImport.output.js b/transforms/add-prop/__testfixtures__/NoImport.output.js
new file mode 100644
index 0000000..e69de29
diff --git a/transforms/add-prop/__testfixtures__/NoTransformRequired.input.js b/transforms/add-prop/__testfixtures__/NoTransformRequired.input.js
new file mode 100644
index 0000000..ea9b12a
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/NoTransformRequired.input.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const App = () => <Button ml="2" />
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__/Node.input.js b/transforms/add-prop/__testfixtures__/Node.input.js
new file mode 100644
index 0000000..88a76bc
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/Node.input.js
@@ -0,0 +1,4 @@
+import Button from "carbon-react/lib/components/button";
+import Link from "carbon-react/lib/components/link";
+
+export const asNode = () => <Button hasLink={<Link />} />
\ No newline at end of file
diff --git a/transforms/add-prop/__testfixtures__/Node.output.js b/transforms/add-prop/__testfixtures__/Node.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__/Object.input.js b/transforms/add-prop/__testfixtures__/Object.input.js
new file mode 100644
index 0000000..f1c89f0
--- /dev/null
+++ b/transforms/add-prop/__testfixtures__/Object.input.js
@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asObject = () => <Button info={{prop: 1, prop: 2, prop:3}} />
\ No newline at end of file
diff --git a/transforms/add-prop/__testfixtures__/Object.output.js b/transforms/add-prop/__testfixtures__/Object.output.js
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..3407f31
--- /dev/null
+++ b/transforms/add-prop/__tests__/add-prop.js
@@ -0,0 +1,89 @@
+import defineTest from "../../../defineTest";
+
+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"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "hasLink",
+    value: "test foo bar",
+  },
+  "Node"
+);
+
+defineTest(
+  __dirname,
+  "add-prop",
+  {
+    component: "carbon-react/lib/components/button",
+    prop: "info",
+    value: "test foo bar",
+  },
+  "Object"
+);
diff --git a/transforms/add-prop/add-prop.js b/transforms/add-prop/add-prop.js
new file mode 100644
index 0000000..ca74478
--- /dev/null
+++ b/transforms/add-prop/add-prop.js
@@ -0,0 +1,27 @@
+/*
+ * Add a prop to a component <Component /> to <Component prop=value/>
+ */
+import { addAttribute } from "../builder";
+import registerMethods from "../registerMethods";
+
+const transformer = (fileInfo, api, options) => {
+  const j = api.jscodeshift;
+  registerMethods(j);
+  const root = j(fileInfo.source);
+
+  const { component, prop, value } = options;
+
+  const result = addAttribute(component, prop, value)(
+    fileInfo,
+    api,
+    options,
+    j,
+    root
+  );
+
+  if (result) {
+    return root.toSource();
+  }
+};
+
+module.exports = transformer;
diff --git a/transforms/builder/addAttribute.js b/transforms/builder/addAttribute.js
new file mode 100644
index 0000000..b4dab64
--- /dev/null
+++ b/transforms/builder/addAttribute.js
@@ -0,0 +1,57 @@
+const addAttribute = (path, attribute, value) => (
+  fileInfo,
+  api,
+  options,
+  j,
+  root
+) => {
+  const components = root.findJSXElementsByImport(path);
+
+  // If the component is not imported, skip this file
+  if (components.size() === 0) {
+    return;
+  }
+  if (!components) {
+    return false;
+  }
+
+  let didUpdate = false;
+  components.forEach((component) => {
+    if (
+      !j(component.value.openingElement.attributes)
+        .find(j.JSXIdentifier, { name: attribute })
+        .size()
+    ) {
+      if (typeof value === "string") {
+        component.value.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier(attribute), j.literal(value))
+        );
+        didUpdate = true;
+      }
+
+      if (
+        typeof value === "number" ||
+        (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;
+      }
+    }
+  });
+
+  return didUpdate;
+};
+
+export default addAttribute;
diff --git a/transforms/builder/index.js b/transforms/builder/index.js
index a060fcb..d468bf4 100644
--- a/transforms/builder/index.js
+++ b/transforms/builder/index.js
@@ -1,11 +1,13 @@
 import run from "./run";
 import renameAttribute from "./renameAttribute";
 import removeAttribute from "./removeAttribute";
+import addAttribute from "./addAttribute";
 import replaceAttributeValue from "./replaceAttributeValue";
 
 module.exports = {
   run,
   renameAttribute,
   removeAttribute,
+  addAttribute,
   replaceAttributeValue,
 };