Feat(codemods): Add codemods for Modal deprecations #DS-1184 #DS-1201…

… #DS-1181

packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-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 isDockedOnMobile />
+    <ModalDialog isDockedOnMobile={false} />
+  </>
+);

packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-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 isDockedOnMobile />
+    <ModalDialog isDockedOnMobile />
+    <ModalDialog isDockedOnMobile={false} />
+  </>
+);

packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-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 isScrollable />
+    <ModalDialog isScrollable={false} />
+  </>
+);

packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-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 isScrollable />
+    <ModalDialog isScrollable />
+    <ModalDialog isScrollable={false} />
+  </>
+);

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

@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'modal-isdockedonmobile-prop');

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

@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'modal-isscrollable-prop');

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

@@ -0,0 +1,52 @@
+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 isDockedOnMobile attribute
+          const hasIsDockedOnMobileAttribute = path.node.attributes.some(
+            (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'isDockedOnMobile',
+          );
+
+          // If not, add isDockedOnMobile attribute
+          if (!hasIsDockedOnMobileAttribute) {
+            path.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('isDockedOnMobile'), null));
+          }
+        }
+      });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;

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

@@ -0,0 +1,52 @@
+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 isScrollable attribute
+          const hasIsScrollableAttribute = path.node.attributes.some(
+            (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'isScrollable',
+          );
+
+          // If not, add isScrollable attribute
+          if (!hasIsScrollableAttribute) {
+            path.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('isScrollable'), null));
+          }
+        }
+      });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;

packages/web-react/DEPRECATIONS-v2.md

@@ -192,7 +192,33 @@ non-scrollable by default. It will be possible to re-enable the inside scrolling
 
 #### Migration Guide
 
-Add `isScrollable` prop to the `ModalDialog` component.
+Use codemod to automatically update your codebase.
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v2/web-react/modal-iscrollable-prop
+```
+
+See [Codemods documentation][readme-codemods] for more details.
+
+Or manually add `isScrollable` prop to the `ModalDialog` component.
+
+### ModalDialog `isExpandedOnMobile` Prop
+
+The `isExpandedOnMobile` prop will be set to `true` by default in the next major release and the ModalDialog will be
+expanded on mobile by default. It will be possible to re-collapse the inside by setting the `isExpandedOnMobile` prop
+to `false` value.
+
+#### Migration Guide
+
+Use codemod to automatically update your codebase.
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v2/web-react/modal-isexpandedonmobile-prop
+```
+
+See [Codemods documentation][readme-codemods] for more details.
+
+Or manually add `isExpandedOnMobile={false}` prop to the `ModalDialog` component to keep the current behavior.
 
 ### ModalDialog Uniform Appearance
 
@@ -201,7 +227,15 @@ remain accessible via the `isDockedOnMobile` property.
 
 #### Migration Guide
 
-Add `isDockedOnMobile` prop to the `ModalDialog` component.
+Use codemod to automatically update your codebase.
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v2/web-react/modal-isdockeonmobile-prop
+```
+
+See [Codemods documentation][readme-codemods] for more details.
+
+Or manually add `isDockedOnMobile` prop to the `ModalDialog` component.
 
 ### Alert `danger` Icon