Feat(codemods): Add codemod to remove breakpoint props from Grid #DS-…

…1068

packages/codemods/src/transforms/v2/web-react/__testfixtures__/grid-breakpoint-props.input.tsx

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

packages/codemods/src/transforms/v2/web-react/__testfixtures__/grid-breakpoint-props.output.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { Grid } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <Grid
+      cols={{
+        mobile: 1,
+        tablet: 2,
+        desktop: 3
+      }}>
+      Grid
+    </Grid>
+    <Grid cols={{
+      desktop: 3
+    }}>Grid</Grid>
+    <Grid cols={1}>Grid</Grid>
+  </>
+);

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

@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'grid-breakpoint-props');

packages/codemods/src/transforms/v2/web-react/grid-breakpoint-props.ts

@@ -0,0 +1,69 @@
+import { API, FileInfo, JSXExpressionContainer } from 'jscodeshift';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  root
+    .find(j.JSXOpeningElement, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'Grid',
+      },
+    })
+    .forEach((path) => {
+      let colsValue: JSXExpressionContainer['expression'] | null = null;
+      let tabletValue: JSXExpressionContainer['expression'] | null = null;
+      let desktopValue: JSXExpressionContainer['expression'] | null = null;
+
+      if (path.node && path.node.attributes) {
+        // Filtering attributes
+        path.node.attributes = path.node.attributes.filter((attr) => {
+          if (attr.type === 'JSXAttribute' && attr.value?.type === 'JSXExpressionContainer') {
+            const {
+              name,
+              value: { expression },
+            } = attr;
+            if (name.name === 'cols') {
+              colsValue = expression;
+
+              return true; // keep cols
+            }
+            if (name.name === 'tablet') {
+              tabletValue = expression;
+            } else if (name.name === 'desktop') {
+              desktopValue = expression;
+            }
+
+            return name.name !== 'tablet' && name.name !== 'desktop'; // remove tablet and desktop
+          }
+
+          return true;
+        });
+
+        if (tabletValue || desktopValue) {
+          const colsObjectProperties = [];
+          if (colsValue) colsObjectProperties.push(j.objectProperty(j.identifier('mobile'), colsValue));
+          if (tabletValue) colsObjectProperties.push(j.objectProperty(j.identifier('tablet'), tabletValue));
+          if (desktopValue) colsObjectProperties.push(j.objectProperty(j.identifier('desktop'), desktopValue));
+
+          // Ensure colsAttribute exists or create it
+          let colsAttribute = path.node.attributes.find(
+            (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'cols',
+          );
+          if (!colsAttribute) {
+            colsAttribute = j.jsxAttribute(j.jsxIdentifier('cols'), null);
+            path.node.attributes.push(colsAttribute);
+          }
+
+          if (colsAttribute && colsAttribute.type === 'JSXAttribute') {
+            colsAttribute.value = j.jsxExpressionContainer(j.objectExpression(colsObjectProperties));
+          }
+        }
+      }
+    });
+
+  return root.toSource({ quote: 'single' });
+};
+
+export default transform;

packages/web-react/DEPRECATIONS-v2.md

@@ -171,7 +171,15 @@ The `tablet` and `desktop` props will be removed in the next major version.
 
 #### Migration Guide
 
-Replace `tablet` and `desktop` props with the `cols` object prop.
+Use codemod to automatically update your codebase.
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v2/web-react/grid-breakpoint-props
+```
+
+See [Codemods documentation][readme-codemods] for more details.
+
+Or manually replace `tablet` and `desktop` props with the `cols` object prop.
 
 - `<Grid cols="2" tablet="3" … />` → `<Grid cols={{ mobile: 2, tablet: 3 }} … />`
 - `<Grid desktop="3" … />` → `<Grid cols={{ desktop: 3 }} … />`