[CCUBE-1628][MAHI]Update codemod script to cater for size prop mapping

LifeSG · Dec 2, 2024 · 8a10b4d · 8a10b4d
1 parent 297d23c
commit 8a10b4d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 0 deletions.
diff --git a/codemods/migrate-text-list/data.ts b/codemods/migrate-text-list/data.ts
@@ -0,0 +1,16 @@
+export const sizePropMapping = {
+    D1: "header-xxl",
+    D2: "header-xl",
+    D3: "header-md",
+    D4: "header-sm",
+    H1: "header-lg",
+    H2: "header-md",
+    H3: "header-sm",
+    H4: "header-xs",
+    H5: "body-md",
+    H6: "body-sm",
+    DBody: "header-sm",
+    Body: "body-baseline",
+    BodySmall: "body-md",
+    XSmall: "body-xs",
+};
diff --git a/codemods/migrate-text-list/index.ts b/codemods/migrate-text-list/index.ts
@@ -1,4 +1,5 @@
 import { API, FileInfo, JSCodeshift } from "jscodeshift";
+import { sizePropMapping } from "./data";
 
 // ======= Constants ======= //
 
@@ -72,6 +73,29 @@ export default function transformer(file: FileInfo, api: API) {
                 path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
             }
         });
+
+        source
+            .find(j.JSXOpeningElement, {
+                name: { name: JSX_IDENTIFIERS.TEXT_LIST },
+            })
+            .forEach((path) => {
+                const attributes = path.node.attributes;
+
+                attributes?.forEach((attribute) => {
+                    if (
+                        j.JSXAttribute.check(attribute) &&
+                        attribute.name.name === "size" &&
+                        j.StringLiteral.check(attribute.value)
+                    ) {
+                        const sizeValue = attribute.value.value;
+                        if (sizePropMapping[sizeValue]) {
+                            attribute.value = j.literal(
+                                sizePropMapping[sizeValue]
+                            );
+                        }
+                    }
+                });
+            });
     }
 
     return source.toSource();

diff --git a/codemods/run-codemod.ts b/codemods/run-codemod.ts
@@ -14,6 +14,7 @@ enum Codemod {
     MigrateLayout = "migrate-layout",
     MigrateMediaQuery = "migrate-media-query",
     MigrateText = "migrate-text",
+    MigrateTextList = "migrate-text-list",
 }
 
 enum Theme {
@@ -32,6 +33,8 @@ const CodemodDescriptions: { [key in Codemod]: string } = {
     [Codemod.MigrateMediaQuery]:
         "Replace V2 media queries with new Breakpoint tokens",
     [Codemod.MigrateText]: "Replace V2_Text with new Typography components",
+    [Codemod.MigrateTextList]:
+        "Replace V2_TextList with new Textlist components",
 };
 
 const TargetDirectoryPaths = {

diff --git a/tests/codemod/migrate-text-list/test-data.ts b/tests/codemod/migrate-text-list/test-data.ts
@@ -8,6 +8,7 @@ import { V2_TextList } from "@lifesg/react-design-system/v2_text-list";
     <li>Second</li>
     <li>Third</li>
 </V2_TextList.Ul>;
+<V2_TextList size="Body" />;
 
 
 `;
@@ -22,6 +23,7 @@ import { TextList } from "@lifesg/react-design-system/text-list";
     <li>Second</li>
     <li>Third</li>
 </TextList.Ul>;
+<TextList size="body-baseline" />;
 
 
 `;