fix: add codemod for Alert & Skeleton

razorpay · Jan 11, 2024 · 1d8f321 · 1d8f321
1 parent 9074955
commit 1d8f321
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 19 deletions.
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts
@@ -7,7 +7,7 @@ it('should update token values contextually', async () => {
     `
     const App = () => (
         <>
-          <Amount value={1234} color="positive" />
+          <Amount value={1234} intent="positive" />
 
           <Amount size="body-small" value={123456.789} />
 

diff --git a/...ade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts b/...ade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts
@@ -7,17 +7,22 @@ it('should migrate contrast prop to emphasis', async () => {
     `
     const App = () => (
         <>
-        <Badge contrast="low">Hello</Badge> 
-        <Badge contrast="high">Hello</Badge> 
+          <Badge contrast="low">Hello</Badge> 
+          <Badge contrast="high">Hello</Badge> 
 
-        <Text> Lorem Ipsum <Badge contrast="high">Hello</Badge> </Text>
+          <Text> Lorem Ipsum <Badge contrast="high">Hello</Badge> </Text>
 
-        <Counter contrast="low">Hello</Counter> 
-        <Counter contrast="high">Hello</Counter>
+          <Counter contrast="low">Hello</Counter> 
+          <Counter contrast="high">Hello</Counter>
 
-        <IconButton icon={CloseIcon} contrast="low" onClick={() => console.log('Clicked')} />
-        <IconButton icon={CloseIcon} contrast="high" onClick={() => console.log('Clicked')} />
-        
+          <IconButton icon={CloseIcon} contrast="low" onClick={() => console.log('Clicked')} />
+          <IconButton icon={CloseIcon} contrast="high" onClick={() => console.log('Clicked')} />
+          
+          <Alert description="Hello World" contrast="low" />
+          <Alert description="Hello World" contrast="high" />
+
+          <Skeleton height="50px" width="100%" contrast="low" />
+          <Skeleton height="50px" width="100%" contrast="high" />
         </>
       );
     `,
@@ -27,17 +32,22 @@ it('should migrate contrast prop to emphasis', async () => {
   expect(result).toMatchInlineSnapshot(`
     "const App = () => (
             <>
-            <Badge emphasis="subtle">Hello</Badge> 
-            <Badge emphasis="intense">Hello</Badge> 
+              <Badge emphasis="subtle">Hello</Badge> 
+              <Badge emphasis="intense">Hello</Badge> 
+
+              <Text> Lorem Ipsum <Badge emphasis="intense">Hello</Badge> </Text>
 
-            <Text> Lorem Ipsum <Badge emphasis="intense">Hello</Badge> </Text>
+              <Counter emphasis="subtle">Hello</Counter> 
+              <Counter emphasis="intense">Hello</Counter>
 
-            <Counter emphasis="subtle">Hello</Counter> 
-            <Counter emphasis="intense">Hello</Counter>
+              <IconButton icon={CloseIcon} emphasis="intense" onClick={() => console.log('Clicked')} />
+              <IconButton icon={CloseIcon} emphasis="subtle" onClick={() => console.log('Clicked')} />
+              
+              <Alert description="Hello World" emphasis="subtle" />
+              <Alert description="Hello World" emphasis="intense" />
 
-            <IconButton icon={CloseIcon} emphasis="intense" onClick={() => console.log('Clicked')} />
-            <IconButton icon={CloseIcon} emphasis="subtle" onClick={() => console.log('Clicked')} />
-            
+              <Skeleton height="50px" width="100%" />
+              <Skeleton height="50px" width="100%" />
             </>
           );"
   `);

diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts
@@ -33,19 +33,23 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
     );
   }
 
-  // Bade/Counter/IconButton Components: Change `contrast` prop to `emphasis`
+  // Bade/Counter/IconButton/Alert Components: Change `contrast` prop to `emphasis`
   try {
     root
       .find(j.JSXElement)
       .filter((path) =>
-        ['Badge', 'Counter', 'IconButton'].includes(path.value.openingElement.name.name),
+        ['Badge', 'Counter', 'IconButton', 'Alert'].includes(path.value.openingElement.name.name),
       )
       .find(j.JSXAttribute)
       .filter((path) => path.node.name.name === 'contrast')
       .replaceWith((path) => {
         path.node.name.name = 'emphasis';
 
         const contrastToEmphasisMap = {
+          alert: {
+            low: 'subtle',
+            high: 'intense',
+          },
           badge: {
             low: 'subtle',
             high: 'intense',
@@ -74,6 +78,23 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
     );
   }
 
+  // Remove 'contrast' prop from the Skeleton Component
+  try {
+    root
+      .find(j.JSXElement)
+      .filter((path) => path.value.openingElement.name.name === 'Skeleton')
+      .find(j.JSXAttribute)
+      .filter((path) => path.node.name.name === 'contrast')
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the "contrast" prop from Skeleton.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
   // Remove deprecated 'intent'/'variant' props in favor of color
   try {
     root