From a909559cf616bc48f2f73065985df40fd0449e93 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Tue, 30 Jan 2024 11:16:53 +0100
Subject: [PATCH] Feat(web-react, web-twig): Introduce Codemods

- Codemode examples for web-react and web-twig
- Test example for web-react codemod
- #DS-958
---
 .../transformAttributeExample.input.tsx       |  6 ++
 .../transformAttributeExample.output.tsx      |  6 ++
 .../transformAttributeExample.test.js         |  7 ++
 packages/web-react/transforms/src/Button.tsx  | 10 +++
 packages/web-react/transforms/src/Tooltip.tsx | 10 +++
 .../transforms/src/TooltipModern.tsx          | 10 +++
 .../transforms/transformAttributeExample.ts   | 59 ++++++++++++++
 .../transformComponentNameExample.ts          | 70 ++++++++++++++++
 .../transforms/transformValueExample.ts       | 67 +++++++++++++++
 .../web-twig/transforms/replace-codemod.ts    | 81 +++++++++++++++++++
 packages/web-twig/transforms/src/Button.twig  |  2 +
 packages/web-twig/transforms/src/Tooltip.twig |  3 +
 .../transforms/src/TooltipModern.twig         |  1 +
 .../web-twig/transforms/src/notWorking.twig   | 75 +++++++++++++++++
 .../transformAttributeTwigExample.ts          | 35 ++++++++
 .../transformComponentNameTwigExample.ts      | 43 ++++++++++
 .../transforms/transformValueTwigExample.ts   | 46 +++++++++++
 17 files changed, 531 insertions(+)
 create mode 100644 packages/web-react/transforms/__testfixtures__/transformAttributeExample.input.tsx
 create mode 100644 packages/web-react/transforms/__testfixtures__/transformAttributeExample.output.tsx
 create mode 100644 packages/web-react/transforms/__tests__/transformAttributeExample.test.js
 create mode 100644 packages/web-react/transforms/src/Button.tsx
 create mode 100644 packages/web-react/transforms/src/Tooltip.tsx
 create mode 100644 packages/web-react/transforms/src/TooltipModern.tsx
 create mode 100644 packages/web-react/transforms/transformAttributeExample.ts
 create mode 100644 packages/web-react/transforms/transformComponentNameExample.ts
 create mode 100644 packages/web-react/transforms/transformValueExample.ts
 create mode 100644 packages/web-twig/transforms/replace-codemod.ts
 create mode 100644 packages/web-twig/transforms/src/Button.twig
 create mode 100644 packages/web-twig/transforms/src/Tooltip.twig
 create mode 100644 packages/web-twig/transforms/src/TooltipModern.twig
 create mode 100644 packages/web-twig/transforms/src/notWorking.twig
 create mode 100644 packages/web-twig/transforms/transformAttributeTwigExample.ts
 create mode 100644 packages/web-twig/transforms/transformComponentNameTwigExample.ts
 create mode 100644 packages/web-twig/transforms/transformValueTwigExample.ts

diff --git a/packages/web-react/transforms/__testfixtures__/transformAttributeExample.input.tsx b/packages/web-react/transforms/__testfixtures__/transformAttributeExample.input.tsx
new file mode 100644
index 0000000000..e9c6a5a9a4
--- /dev/null
+++ b/packages/web-react/transforms/__testfixtures__/transformAttributeExample.input.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Button } from '../../src/components/Button';
+
+export const MyComponent = () => {
+  return <Button buttonLabel="Click me" />;
+};
diff --git a/packages/web-react/transforms/__testfixtures__/transformAttributeExample.output.tsx b/packages/web-react/transforms/__testfixtures__/transformAttributeExample.output.tsx
new file mode 100644
index 0000000000..df3c3426e5
--- /dev/null
+++ b/packages/web-react/transforms/__testfixtures__/transformAttributeExample.output.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Button } from '../../src/components/Button';
+
+export const MyComponent = () => {
+  return <Button buttonText="Click me" />;
+};
diff --git a/packages/web-react/transforms/__tests__/transformAttributeExample.test.js b/packages/web-react/transforms/__tests__/transformAttributeExample.test.js
new file mode 100644
index 0000000000..b2751a4e75
--- /dev/null
+++ b/packages/web-react/transforms/__tests__/transformAttributeExample.test.js
@@ -0,0 +1,7 @@
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'transformAttributeExample', null, 'transformAttributeExample', {
+  parser: 'tsx',
+  fixture: 'input',
+  snapshot: true,
+});
diff --git a/packages/web-react/transforms/src/Button.tsx b/packages/web-react/transforms/src/Button.tsx
new file mode 100644
index 0000000000..44dfc51195
--- /dev/null
+++ b/packages/web-react/transforms/src/Button.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button } from '../../src/components/Button';
+
+const testButton = () => {
+  // should be transformed from buttonLabel to buttonText
+  // original: <Button id="test" buttonLabel="test" />
+  return <Button id="test" buttonLabel="test" />;
+};
+
+export default testButton;
diff --git a/packages/web-react/transforms/src/Tooltip.tsx b/packages/web-react/transforms/src/Tooltip.tsx
new file mode 100644
index 0000000000..1ca9a3a5ce
--- /dev/null
+++ b/packages/web-react/transforms/src/Tooltip.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tooltip } from '../../src/components/Tooltip';
+
+const testTooltip = () => {
+  // placement should be transformed from top-left to top-start etc.
+  // original: <Tooltip placement="top-left">tooltip</Tooltip>
+  return <Tooltip placement="top-left">tooltip</Tooltip>;
+};
+
+export default testTooltip;
diff --git a/packages/web-react/transforms/src/TooltipModern.tsx b/packages/web-react/transforms/src/TooltipModern.tsx
new file mode 100644
index 0000000000..ce53514b88
--- /dev/null
+++ b/packages/web-react/transforms/src/TooltipModern.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tooltip } from '../../src/components/Tooltip';
+
+const testTooltip = () => {
+  // placement should be transformed from top-left to top-start etc.
+  // original: <Tooltip>tooltip</Tooltip>;
+  return <Tooltip>tooltip</Tooltip>;
+};
+
+export default testTooltip;
diff --git a/packages/web-react/transforms/transformAttributeExample.ts b/packages/web-react/transforms/transformAttributeExample.ts
new file mode 100644
index 0000000000..fbaec013dd
--- /dev/null
+++ b/packages/web-react/transforms/transformAttributeExample.ts
@@ -0,0 +1,59 @@
+// Install jscodeshift if you haven't already
+// npm install -g jscodeshift
+
+// Run with:
+// jscodeshift --transform ./transforms/transformAttributeExample.ts --extensions tsx ./transforms/src
+
+// Result:
+// Will rename 'text' attribute to 'label' in all Button components imported from '@lmc-eu/spirit-web-react'
+
+const transform = (fileInfo, 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: '@lmc-eu/spirit-web-react',
+      value: '../../src/components/Button', // local import (testing file)
+    },
+  });
+
+  // Check if the module is imported
+  if (importStatements.length > 0) {
+    const buttonSpecifier = importStatements.find(j.ImportSpecifier, {
+      imported: {
+        type: 'Identifier',
+        name: 'Button',
+      },
+    });
+
+    // Check if Button specifier is present
+    if (buttonSpecifier.length > 0) {
+      // Find Button components in the module
+      const buttonComponents = root.find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Button',
+        },
+      });
+
+      // Rename 'buttonLabel' attribute to 'buttonText'
+      buttonComponents
+        .find(j.JSXAttribute, {
+          name: {
+            type: 'JSXIdentifier',
+            name: 'buttonLabel',
+          },
+        })
+        .forEach((attributePath) => {
+          // Change attribute name to 'buttonText'
+          attributePath.node.name.name = 'buttonText';
+        });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;
diff --git a/packages/web-react/transforms/transformComponentNameExample.ts b/packages/web-react/transforms/transformComponentNameExample.ts
new file mode 100644
index 0000000000..e5d59d8fc7
--- /dev/null
+++ b/packages/web-react/transforms/transformComponentNameExample.ts
@@ -0,0 +1,70 @@
+// Install jscodeshift if you haven't already
+// npm install -g jscodeshift
+
+// Run with:
+// jscodeshift --transform ./transforms/transformComponentNameExample.ts --extensions tsx ./transforms/src
+
+// Result:
+// Will change import from Tooltip to TooltipModern in all files where @lmc-eu/spirit-web-react
+
+const transform = (fileInfo, api) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find import statements for the specific module
+  const importStatements = root.find(j.ImportDeclaration, {
+    source: {
+      // value: '@lmc-eu/spirit-web-react',
+      value: '../../src/components/Tooltip', // local import (testing file)
+    },
+  });
+
+  // Check if the module is imported
+  if (importStatements.length > 0) {
+    // Update import statement
+    importStatements.forEach((importPath) => {
+      const importSpecifiers = importPath.value.specifiers;
+
+      // Find the Tooltip import specifier
+      const tooltipSpecifier = importSpecifiers.find((specifier) => specifier.imported.name === 'Tooltip');
+
+      if (tooltipSpecifier) {
+        // Rename import specifier to 'TooltipModern'
+        tooltipSpecifier.local.name = 'TooltipModern';
+
+        // Update the source value of the import statement
+        importPath.value.source.value = '../../src/components/TooltipModern';
+      }
+    });
+
+    // Find opening tags for Tooltip components
+    root
+      .find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Tooltip',
+        },
+      })
+      .forEach((tooltipPath) => {
+        // Change component name to 'TooltipModern'
+        tooltipPath.node.name.name = 'TooltipModern';
+      });
+
+    // Find closing tags for Tooltip components
+    root
+      .find(j.JSXClosingElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Tooltip',
+        },
+      })
+      .forEach((closingTagPath) => {
+        // Change closing tag name to 'TooltipModern'
+        closingTagPath.node.name.name = 'TooltipModern';
+      });
+  }
+
+  return root.toSource();
+};
+
+export default transform;
diff --git a/packages/web-react/transforms/transformValueExample.ts b/packages/web-react/transforms/transformValueExample.ts
new file mode 100644
index 0000000000..b1f4327518
--- /dev/null
+++ b/packages/web-react/transforms/transformValueExample.ts
@@ -0,0 +1,67 @@
+// Install jscodeshift if you haven't already
+// npm install -g jscodeshift
+
+// Run with:
+// jscodeshift --transform ./transforms/transformValueExample.ts --extensions tsx ./transforms/src
+
+// Result:
+// Will replace *-left to *-start etc. Tooltip components imported from '@lmc-eu/spirit-web-react'
+
+const transform = (fileInfo, api) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find import statements for the specific module
+  const importStatements = root.find(j.ImportDeclaration, {
+    source: {
+      // value: '@lmc-eu/spirit-web-react',
+      value: '../../src/components/Tooltip', // local import (testing file)
+    },
+  });
+
+  // Check if the module is imported
+  if (importStatements.length > 0) {
+    const tooltipSpecifier = importStatements.find(j.ImportSpecifier, {
+      imported: {
+        type: 'Identifier',
+        name: 'Tooltip',
+      },
+    });
+
+    // Check if Tooltip specifier is present
+    if (tooltipSpecifier.length > 0) {
+      // Find Tooltip components in the module
+      const tooltipComponents = root.find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Tooltip',
+        },
+      });
+
+      tooltipComponents
+        .find(j.JSXAttribute, {
+          name: {
+            type: 'JSXIdentifier',
+            name: 'placement',
+          },
+          value: {
+            type: 'Literal',
+            value: (val) =>
+              val.includes('-left') || val.includes('-right') || val.includes('-top') || val.includes('-bottom'),
+          },
+        })
+        .forEach((attributePath) => {
+          // Update attribute value
+          attributePath.node.value.value = attributePath.node.value.value
+            .replace('-left', '-start')
+            .replace('-right', '-end')
+            .replace('-top', '-start')
+            .replace('-bottom', '-end');
+        });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;
diff --git a/packages/web-twig/transforms/replace-codemod.ts b/packages/web-twig/transforms/replace-codemod.ts
new file mode 100644
index 0000000000..e73d450f56
--- /dev/null
+++ b/packages/web-twig/transforms/replace-codemod.ts
@@ -0,0 +1,81 @@
+// Run with:
+// node replace-codemod.ts ./src placement
+
+// Result:
+// Will replace all strings 'top-left' with 'top-start' in all files in the specified directory (./src)
+
+const fs = require('fs');
+const path = require('path');
+
+// Read command-line arguments
+const args = process.argv.slice(2);
+
+// Specify the directory where your project files are located
+const projectDirectory = args[0];
+
+if (!projectDirectory) {
+  console.error('Please specify the project directory');
+  process.exit(1);
+}
+
+const codemodName = args[1];
+
+// Define your regex pattern and replacement
+switch (codemodName) {
+  case 'placement':
+    var pattern = /top-left/g;
+    var replacement = 'top-start';
+    break;
+  case 'buttonText':
+    var pattern = /buttonLabel/g;
+    var replacement = 'buttonText';
+    break;
+  case 'tooltipModern':
+    var pattern = /<Tooltip\s*(.*?)\s*>([\s\S]*?)<\/Tooltip>/g;
+    var replacement = '<TooltipModern $1>$2</TooltipModern>';
+    break;
+  default:
+    console.error('Invalid codemod name');
+    process.exit(1);
+}
+
+// Variables to track the number of changed files
+let filesChanged = 0;
+
+// Function to perform regex find and replace in a file
+function replaceInFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const newContent = content.replaceAll(pattern, replacement);
+
+  // Check if the content has changed
+  if (content !== newContent) {
+    fs.writeFileSync(filePath, newContent);
+    filesChanged++;
+  }
+}
+
+// Function to recursively process files in a directory
+function processFiles(directoryPath) {
+  fs.readdirSync(directoryPath).forEach((file) => {
+    const filePath = path.join(directoryPath, file);
+
+    if (fs.statSync(filePath).isDirectory()) {
+      // If it's a directory, recursively process its files
+      processFiles(filePath);
+    } else {
+      // If it's a file, perform regex find and replace
+      replaceInFile(filePath);
+    }
+  });
+}
+
+// Start processing files in the project directory
+processFiles(projectDirectory);
+
+// Log summary
+console.log(
+  `
+  \x1b[32mReplacement complete.\x1b[0m 
+  ${filesChanged} files were changed.
+`,
+);
diff --git a/packages/web-twig/transforms/src/Button.twig b/packages/web-twig/transforms/src/Button.twig
new file mode 100644
index 0000000000..dab991beb7
--- /dev/null
+++ b/packages/web-twig/transforms/src/Button.twig
@@ -0,0 +1,2 @@
+<Button color="primary" buttonLabel="test">Loading button</Button>
+
diff --git a/packages/web-twig/transforms/src/Tooltip.twig b/packages/web-twig/transforms/src/Tooltip.twig
new file mode 100644
index 0000000000..3870d1b510
--- /dev/null
+++ b/packages/web-twig/transforms/src/Tooltip.twig
@@ -0,0 +1,3 @@
+<TooltipModern placement="top-left">
+  <Button>button</Button>
+</TooltipModern>
diff --git a/packages/web-twig/transforms/src/TooltipModern.twig b/packages/web-twig/transforms/src/TooltipModern.twig
new file mode 100644
index 0000000000..474f90daa4
--- /dev/null
+++ b/packages/web-twig/transforms/src/TooltipModern.twig
@@ -0,0 +1 @@
+<TooltipModern >tooltip</TooltipModern>
\ No newline at end of file
diff --git a/packages/web-twig/transforms/src/notWorking.twig b/packages/web-twig/transforms/src/notWorking.twig
new file mode 100644
index 0000000000..864d40f470
--- /dev/null
+++ b/packages/web-twig/transforms/src/notWorking.twig
@@ -0,0 +1,75 @@
+{% block header %}
+    {% set isHeaderInverted = false %}
+    {% set hasHeaderBottomDivider = true %}
+    {% set headerParent = parent() %}
+    <Cover illustration="balloon" illustrationVisibleBreakpoint="desktop">
+        {{- headerParent | raw -}}
+        <Container variant="cygnus">
+            <CoverTitle variant="companies">
+                <Heading
+                    elementType="h1"
+                    size="medium"
+                    UNSAFE_className="mb-800"
+                >
+                    {{ 'COVER_TITLE' | trans }}
+                </Heading>
+                <DefaultCoverLoginButtons />
+
+                <Divider UNSAFE_className="mb-600" />
+
+                <Grid cols="1" tablet="3">
+                    <div>
+                        <Text
+                            size="xlarge"
+                            emphasis="bold"
+                            UNSAFE_className="mb-300"
+                        >
+                            {{ 'COVER_SUBTITLE_FIRST_TOP' | trans }}
+                        </Text>
+                        <Text>{{ 'COVER_SUBTITLE_FIRST_BOTTOM' | trans }}</Text>
+                    </div>
+                    <div>
+                        <Text
+                            size="xlarge"
+                            emphasis="bold"
+                            UNSAFE_className="mb-300"
+                        >
+                            {{ 'COVER_SUBTITLE_SECOND_TOP' | trans }}
+                        </Text>
+                        <Text>{{ 'COVER_SUBTITLE_SECOND_BOTTOM' | trans }}</Text>
+                    </div>
+                    <div>
+                        <Text
+                            size="xlarge"
+                            emphasis="bold"
+                            UNSAFE_className="mb-300"
+                        >
+                            {{ 'COVER_SUBTITLE_THIRD_TOP' | trans }}
+                        </Text>
+                        <TooltipModern placement="top-left">tooltip</TooltipModern>
+                        <Text>{{ 'COVER_SUBTITLE_THIRD_BOTTOM' | trans }}</Text>
+                    </div>
+                </Grid>
+            </CoverTitle>
+        </Container>
+    </Cover>
+{% endblock %}
+
+{% block body %}
+    {% spaceless %}
+        <Container
+            variant="cygnus"
+            UNSAFE_className="pt-700 mb-900 pt-tablet-800 mb-tablet-1000 mb-desktop-1100 text-center"
+        >
+            <DefaultTabs activeTab="{{ activePart }}" />
+        </Container>
+
+        {% block content %}{% endblock %}
+
+        <Container variant="cygnus" UNSAFE_className="mb-1000">
+            <DefaultPriceListBlock />
+            <DefaultStartToday />
+            <DefaultQuestionsContact />
+        </Container>
+    {% endspaceless %}
+{% endblock %}
\ No newline at end of file
diff --git a/packages/web-twig/transforms/transformAttributeTwigExample.ts b/packages/web-twig/transforms/transformAttributeTwigExample.ts
new file mode 100644
index 0000000000..c8bcd902a6
--- /dev/null
+++ b/packages/web-twig/transforms/transformAttributeTwigExample.ts
@@ -0,0 +1,35 @@
+// Run with:
+// jscodeshift --transform ./transforms/transformAttributeTwigExample.ts --extensions twig ./transforms/src
+
+// Result:
+// Will rename 'text' attribute to 'label' in all Button components
+
+const transform = (fileInfo, api) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find Button components in the module
+  const buttonComponents = root.find(j.JSXOpeningElement, {
+    name: {
+      type: 'JSXIdentifier',
+      name: 'Button',
+    },
+  });
+
+  // Rename 'buttonLabel' attribute to 'buttonText'
+  buttonComponents
+    .find(j.JSXAttribute, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'buttonLabel',
+      },
+    })
+    .forEach((attributePath) => {
+      // Change attribute name to 'buttonText'
+      attributePath.node.name.name = 'buttonText';
+    });
+
+  return root.toSource();
+};
+
+export default transform;
diff --git a/packages/web-twig/transforms/transformComponentNameTwigExample.ts b/packages/web-twig/transforms/transformComponentNameTwigExample.ts
new file mode 100644
index 0000000000..e0da70562b
--- /dev/null
+++ b/packages/web-twig/transforms/transformComponentNameTwigExample.ts
@@ -0,0 +1,43 @@
+// Install jscodeshift if you haven't already
+// npm install -g jscodeshift
+
+// Run with:
+// jscodeshift --transform ./transforms/transformComponentNameTwigExample.ts --extensions twig ./transforms/src
+
+// Result:
+// Will change import from Tooltip to TooltipModern in all files where @lmc-eu/spirit-web-react
+
+const transform = (fileInfo, api) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find opening tags for Tooltip components
+  root
+    .find(j.JSXOpeningElement, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'Tooltip',
+      },
+    })
+    .forEach((tooltipPath) => {
+      // Change component name to 'TooltipModern'
+      tooltipPath.node.name.name = 'TooltipModern';
+    });
+
+  // Find closing tags for Tooltip components
+  root
+    .find(j.JSXClosingElement, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'Tooltip',
+      },
+    })
+    .forEach((closingTagPath) => {
+      // Change closing tag name to 'TooltipModern'
+      closingTagPath.node.name.name = 'TooltipModern';
+    });
+
+  return root.toSource();
+};
+
+export default transform;
diff --git a/packages/web-twig/transforms/transformValueTwigExample.ts b/packages/web-twig/transforms/transformValueTwigExample.ts
new file mode 100644
index 0000000000..2332df963a
--- /dev/null
+++ b/packages/web-twig/transforms/transformValueTwigExample.ts
@@ -0,0 +1,46 @@
+// Install jscodeshift if you haven't already
+// npm install -g jscodeshift
+
+// Run with:
+// jscodeshift --transform ./transforms/transformValueTwigExample.ts --extensions twig ./transforms/src
+
+// Result:
+// Will replace *-left to *-start etc. Tooltip components imported from '@lmc-eu/spirit-web-react'
+
+const transform = (fileInfo, api) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find Tooltip components in the module
+  const tooltipComponents = root.find(j.JSXOpeningElement, {
+    name: {
+      type: 'JSXIdentifier',
+      name: 'Tooltip',
+    },
+  });
+
+  tooltipComponents
+    .find(j.JSXAttribute, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'placement',
+      },
+      value: {
+        type: 'Literal',
+        value: (val) =>
+          val.includes('-left') || val.includes('-right') || val.includes('-top') || val.includes('-bottom'),
+      },
+    })
+    .forEach((attributePath) => {
+      // Update attribute value
+      attributePath.node.value.value = attributePath.node.value.value
+        .replace('-left', '-start')
+        .replace('-right', '-end')
+        .replace('-top', '-start')
+        .replace('-bottom', '-end');
+    });
+
+  return root.toSource();
+};
+
+export default transform;