feat: add replace string icon props

Author: segunadebayo

Diff for: .prettierignore

@@ -1 +1 @@
-__testfixtures__
+# __testfixtures__

Diff for: transforms/__testfixtures__/replace-string-icon-props/basic.input.tsx

@@ -0,0 +1,10 @@
+import { Button, IconButton, Box } from "@chakra-ui/core";
+
+function Example(props) {
+  return (
+    <Box>
+      <Button leftIcon="phone">Click me</Button>
+      <IconButton icon="email" />
+    </Box>
+  );
+}

Diff for: transforms/__testfixtures__/replace-string-icon-props/basic.output.tsx

@@ -0,0 +1,12 @@
+import { Button, IconButton, Box } from "@chakra-ui/core";
+
+import { EmailIcon, PhoneIcon } from "@chakra-ui/icons";
+
+function Example(props) {
+  return (
+    <Box>
+      <Button leftIcon={<PhoneIcon />}>Click me</Button>
+      <IconButton icon={<EmailIcon />} />
+    </Box>
+  );
+}

Diff for: transforms/replace-string-icon-props.ts

@@ -10,34 +10,58 @@
  */
 
 import { JSCodeshift, Transform } from "jscodeshift";
-import { findJSXElementsByModuleName } from "utils/jsx";
-import { prepare } from "utils/shared";
-
-const hasProps = (j: JSCodeshift, props: string[]) => {
-  const keys = props.reduce((acc, val) => {
-    acc[val] = () => true;
-    return acc;
-  }, {});
-  return j.filters.JSXElement.hasAttributes(keys);
+import { createJSXElement, findJSXElementsByModuleName } from "utils/jsx";
+import { insertOrCreateSubmoduleImport } from "utils/module";
+import { capitalize, prepare } from "utils/shared";
+
+const hasJSXAttribute = (j: JSCodeshift, prop: string) => {
+  return j.filters.JSXElement.hasAttributes({ [prop]: () => true });
 };
 
+const iconsPkgName = "@chakra-ui/icons";
+
 /**
  * IconButton: Check for `icon` prop
  * Button: Check for `leftIcon` and `rightIcon` prop
  */
 
 const transformer: Transform = (file, api) => {
   const config = prepare(file, api);
-  const { done, j } = config;
+  const { done, j, root } = config;
 
   findJSXElementsByModuleName({
     config,
     moduleName: "@chakra-ui/core",
-    selector: "Button",
+    selector: "Button|IconButton",
   })
-    .filter(hasProps(j, ["leftIcon", "rightIcon"]))
-    .forEach((node) => {
-      console.log(node.value);
+    .filter((node) => {
+      return (
+        hasJSXAttribute(j, "leftIcon")(node) ||
+        hasJSXAttribute(j, "rightIcon")(node) ||
+        hasJSXAttribute(j, "icon")(node)
+      );
+    })
+    .find(j.JSXAttribute, (n) =>
+      ["leftIcon", "rightIcon", "icon"].includes(n.name.name),
+    )
+    .replaceWith((node) => {
+      const attrValue =
+        j.StringLiteral.check(node.value.value) && node.value.value.value;
+      const attrName =
+        j.JSXIdentifier.check(node.value.name) && node.value.name.name;
+
+      const v1IconName = `${capitalize(attrValue)}Icon`;
+      const newJSXAttribute = j.jsxAttribute(
+        j.jsxIdentifier(attrName),
+        j.jsxExpressionContainer(createJSXElement(j, v1IconName)),
+      );
+
+      insertOrCreateSubmoduleImport(j, root, {
+        importedName: v1IconName,
+        moduleName: iconsPkgName,
+      });
+
+      return newJSXAttribute;
     });
 
   return done();

Diff for: transforms/v0-icon-to-v1-icon.ts

@@ -4,11 +4,7 @@ import {
   insertOrCreateSubmoduleImport,
   removeModuleImport,
 } from "utils/module";
-import { prepare } from "utils/shared";
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
+import { capitalize, prepare } from "utils/shared";
 
 const iconsPkgName = "@chakra-ui/icons";
 

Diff for: utils/shared.ts

@@ -18,3 +18,7 @@ export function prepare(file: FileInfo, api: API) {
 
   return { root, j, done };
 }
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}