From 1b8c9fbcba5f98f33e4cef75c2d595803c4b2f1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Thu, 3 Oct 2024 11:29:46 +0200
Subject: [PATCH] Feat(codemods): Button and ButtonLink have isSymmetrical prop
 instead of isSquare #DS-1484

---
 .../src/transforms/v3/web-react/README.md     | 30 +++++++++++
 .../button-prop-name.input.tsx                | 24 +++++++++
 .../button-prop-name.output.tsx               | 24 +++++++++
 .../buttonLink-prop-name.input.tsx            | 24 +++++++++
 .../buttonLink-prop-name.output.tsx           | 24 +++++++++
 .../__tests__/button-prop-name.test.ts        |  3 ++
 .../__tests__/buttonLink-prop-name.test.ts    |  3 ++
 .../v3/web-react/button-prop-name.ts          | 50 +++++++++++++++++++
 .../v3/web-react/buttonLink-prop-name.ts      | 50 +++++++++++++++++++
 9 files changed, 232 insertions(+)
 create mode 100644 packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.input.tsx
 create mode 100644 packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.output.tsx
 create mode 100644 packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.input.tsx
 create mode 100644 packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.output.tsx
 create mode 100644 packages/codemods/src/transforms/v3/web-react/__tests__/button-prop-name.test.ts
 create mode 100644 packages/codemods/src/transforms/v3/web-react/__tests__/buttonLink-prop-name.test.ts
 create mode 100644 packages/codemods/src/transforms/v3/web-react/button-prop-name.ts
 create mode 100644 packages/codemods/src/transforms/v3/web-react/buttonLink-prop-name.ts

diff --git a/packages/codemods/src/transforms/v3/web-react/README.md b/packages/codemods/src/transforms/v3/web-react/README.md
index 252c3ac014..176ef529e1 100644
--- a/packages/codemods/src/transforms/v3/web-react/README.md
+++ b/packages/codemods/src/transforms/v3/web-react/README.md
@@ -22,3 +22,33 @@ npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/link-underlined-prop
 - <Link isUnderlined … />
 + <Link underlined="always" … />
 ```
+
+### `v3/web-react/button-prop-name` — Button `isSquare` to `isSymmetrical` prop change
+
+This codemod updates the `Button` component by replacing the `isSquare` prop with a `isSymmetrical` prop.
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/button-prop-name
+```
+
+#### Example
+
+```diff
+- <Button isSquare … />
++ <Button isSymmetrical … />
+```
+
+### `v3/web-react/buttonLink-prop-name` — ButtonLink `isSquare` to `isSymmetrical` prop change
+
+This codemod updates the `ButtonLink` component by replacing the `isSquare` prop with a `isSymmetrical` prop.
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/buttonLink-prop-name
+```
+
+#### Example
+
+```diff
+- <ButtonLink isSquare … />
++ <ButtonLink isSymmetrical … />
+```
diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.input.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.input.tsx
new file mode 100644
index 0000000000..d8cf61912e
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.input.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { Button } from '@lmc-eu/spirit-web-react/src';
+
+export const MyComponent = () => (
+  <>
+    <Button color="primary" isSquare>
+      Click me
+    </Button>
+    <Button color="primary" elementType="div" isSquare>
+      Click me
+    </Button>
+    <Button color="primary" isDisabled isSquare>
+      Click me
+    </Button>
+    <Button color="primary">Click me</Button>
+    <Button color="primary" isDisabled isSquare={false}>
+      Click me
+    </Button>
+    <Button color="primary" isDisabled isSquare={true}>
+      Click me
+    </Button>
+  </>
+);
diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.output.tsx
new file mode 100644
index 0000000000..813ffd35c9
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/button-prop-name.output.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { Button } from '@lmc-eu/spirit-web-react/src';
+
+export const MyComponent = () => (
+  <>
+    <Button color="primary" isSymmetrical>
+      Click me
+    </Button>
+    <Button color="primary" elementType="div" isSymmetrical>
+      Click me
+    </Button>
+    <Button color="primary" isDisabled isSymmetrical>
+      Click me
+    </Button>
+    <Button color="primary">Click me</Button>
+    <Button color="primary" isDisabled isSymmetrical={false}>
+      Click me
+    </Button>
+    <Button color="primary" isDisabled isSymmetrical={true}>
+      Click me
+    </Button>
+  </>
+);
diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.input.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.input.tsx
new file mode 100644
index 0000000000..fd0ef9c6af
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.input.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ButtonLink } from '@lmc-eu/spirit-web-react/src';
+
+export const MyComponent = () => (
+  <>
+    <ButtonLink href="" color="primary" isSquare>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary" elementType="div" isSquare>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary" isDisabled isSquare>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary">Click me</ButtonLink>
+    <ButtonLink color="primary" isDisabled isSquare={false}>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary" isDisabled isSquare={true}>
+      Click me
+    </ButtonLink>
+  </>
+);
diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.output.tsx
new file mode 100644
index 0000000000..7dc4ce4851
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/buttonLink-prop-name.output.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ButtonLink } from '@lmc-eu/spirit-web-react/src';
+
+export const MyComponent = () => (
+  <>
+    <ButtonLink href="" color="primary" isSymmetrical>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary" elementType="div" isSymmetrical>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary" isDisabled isSymmetrical>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary">Click me</ButtonLink>
+    <ButtonLink color="primary" isDisabled isSymmetrical={false}>
+      Click me
+    </ButtonLink>
+    <ButtonLink color="primary" isDisabled isSymmetrical={true}>
+      Click me
+    </ButtonLink>
+  </>
+);
diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/button-prop-name.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/button-prop-name.test.ts
new file mode 100644
index 0000000000..87d009b3b8
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/__tests__/button-prop-name.test.ts
@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'button-prop-name');
diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/buttonLink-prop-name.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/buttonLink-prop-name.test.ts
new file mode 100644
index 0000000000..ffae4772d4
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/__tests__/buttonLink-prop-name.test.ts
@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'buttonLink-prop-name');
diff --git a/packages/codemods/src/transforms/v3/web-react/button-prop-name.ts b/packages/codemods/src/transforms/v3/web-react/button-prop-name.ts
new file mode 100644
index 0000000000..8cc5de70f0
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/button-prop-name.ts
@@ -0,0 +1,50 @@
+import { API, FileInfo } from 'jscodeshift';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find import statements for the specific module and Button specifier
+  const importStatements = root.find(j.ImportDeclaration, {
+    source: {
+      value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value),
+    },
+  });
+
+  // Check if the module is imported
+  if (importStatements.length > 0) {
+    const componentSpecifier = importStatements.find(j.ImportSpecifier, {
+      imported: {
+        type: 'Identifier',
+        name: 'Button',
+      },
+    });
+
+    // Check if Button specifier is present
+    if (componentSpecifier.length > 0) {
+      // Find Button components in the module
+      const components = root.find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Button',
+        },
+      });
+
+      // Rename 'isSquare' attribute to 'isSymmetrical'
+      components
+        .find(j.JSXAttribute, {
+          name: {
+            type: 'JSXIdentifier',
+            name: 'isSquare',
+          },
+        })
+        .forEach((attributePath) => {
+          attributePath.node.name.name = 'isSymmetrical';
+        });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;
diff --git a/packages/codemods/src/transforms/v3/web-react/buttonLink-prop-name.ts b/packages/codemods/src/transforms/v3/web-react/buttonLink-prop-name.ts
new file mode 100644
index 0000000000..0f5da0116c
--- /dev/null
+++ b/packages/codemods/src/transforms/v3/web-react/buttonLink-prop-name.ts
@@ -0,0 +1,50 @@
+import { API, FileInfo } from 'jscodeshift';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find import statements for the specific module and ButtonLink specifier
+  const importStatements = root.find(j.ImportDeclaration, {
+    source: {
+      value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value),
+    },
+  });
+
+  // Check if the module is imported
+  if (importStatements.length > 0) {
+    const componentSpecifier = importStatements.find(j.ImportSpecifier, {
+      imported: {
+        type: 'Identifier',
+        name: 'ButtonLink',
+      },
+    });
+
+    // Check if ButtonLink specifier is present
+    if (componentSpecifier.length > 0) {
+      // Find ButtonLink components in the module
+      const components = root.find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'ButtonLink',
+        },
+      });
+
+      // Rename 'isSquare' attribute to 'isSymmetrical'
+      components
+        .find(j.JSXAttribute, {
+          name: {
+            type: 'JSXIdentifier',
+            name: 'isSquare',
+          },
+        })
+        .forEach((attributePath) => {
+          attributePath.node.name.name = 'isSymmetrical';
+        });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;