feat: add prop codemod

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(

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>
+```

transforms/add-prop/__testfixtures__/BooleanFalse.input.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asFalse = () => <Button />

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} />

transforms/add-prop/__testfixtures__/Basic.input.js → 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 />

transforms/add-prop/__testfixtures__/BooleanTrue.output.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asTrue = () => <Button hasBorder />

transforms/add-prop/__testfixtures__/Number.input.js

@@ -0,0 +1,4 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asNumber = () => <Button />
+

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} />

transforms/add-prop/__testfixtures__/String.input.js

@@ -0,0 +1,3 @@
+import Button from "carbon-react/lib/components/button";
+
+export const asString = () => <Button />

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" />

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"
+);