Feat(codemods): Set isExpandedOnMobile prop of ModalDialog if not alr…

…eady set #DS-1146

packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isexpandedonmobile-prop.input.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ModalDialog } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <ModalDialog />
+    <ModalDialog isExpandedOnMobile />
+    <ModalDialog isExpandedOnMobile={true} />
+  </>
+);

packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isexpandedonmobile-prop.output.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ModalDialog } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <ModalDialog isExpandedOnMobile={false} />
+    <ModalDialog />
+    <ModalDialog />
+  </>
+);

packages/codemods/src/transforms/v2/web-react/__tests__/fileuploader-prop-names.test.ts

@@ -6,3 +6,9 @@ defineTest(__dirname, 'fileuploader-prop-names', null, 'fileuploader-prop-names'
   fixture: 'input',
   snapshot: true,
 });
+
+defineTest(__dirname, 'modal-isexpandedonmobile-prop', null, 'modal-isexpandedonmobile-prop', {
+  parser: 'tsx',
+  fixture: 'input',
+  snapshot: true,
+});

packages/codemods/src/transforms/v2/web-react/__tests__/v2-web-react.test.ts

@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/extensions
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'fileuploader-prop-names', null, 'fileuploader-prop-names', {
+  parser: 'tsx',
+  fixture: 'input',
+  snapshot: true,
+});
+
+defineTest(__dirname, 'modal-isexpandedonmobile-prop', null, 'modal-isexpandedonmobile-prop', {
+  parser: 'tsx',
+  fixture: 'input',
+  snapshot: true,
+});

packages/codemods/src/transforms/v2/web-react/modal-isexpandedonmobile-prop.ts

@@ -0,0 +1,73 @@
+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 ModalDialog 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 modalDialogSpecifier = importStatements.find(j.ImportSpecifier, {
+      imported: {
+        type: 'Identifier',
+        name: 'ModalDialog',
+      },
+    });
+
+    // Check if ModalDialog specifier is present
+    if (modalDialogSpecifier.length > 0) {
+      // Find ModalDialog components in the module
+      const modalDialogComponents = root.find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'ModalDialog',
+        },
+      });
+
+      modalDialogComponents.forEach((path) => {
+        if (path.node && path.node.attributes) {
+          // Check if the component already has the isExpandedOnMobile attribute
+          const hasIsExpandedOnMobileAttribute = path.node.attributes.some(
+            (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'isExpandedOnMobile',
+          );
+
+          // If not, add isExpandedOnMobile={false} attribute
+          if (!hasIsExpandedOnMobileAttribute) {
+            path.node.attributes.push(
+              j.jsxAttribute(j.jsxIdentifier('isExpandedOnMobile'), j.jsxExpressionContainer(j.booleanLiteral(false))),
+            );
+          }
+
+          // Remove isExpandedOnMobile attribute if is set to true or without a value
+          path.node.attributes = path.node.attributes.filter((attr) => {
+            if (attr.type === 'JSXAttribute' && attr.name.name === 'isExpandedOnMobile') {
+              if (attr.value === null) {
+                return false;
+              }
+              if (
+                attr.value &&
+                attr.value.type === 'JSXExpressionContainer' &&
+                attr.value.expression.type === 'BooleanLiteral' &&
+                attr.value.expression.value
+              ) {
+                return false;
+              }
+            }
+
+            return true;
+          });
+        }
+      });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;