diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/grid-breakpoint-props.input.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/grid-breakpoint-props.input.tsx new file mode 100644 index 0000000000..5f657293c5 --- /dev/null +++ b/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 + + Grid + Grid + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/grid-breakpoint-props.output.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/grid-breakpoint-props.output.tsx new file mode 100644 index 0000000000..c0f0a4a971 --- /dev/null +++ b/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 + + Grid + Grid + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__tests__/grid-breakpoint-props.test.ts b/packages/codemods/src/transforms/v2/web-react/__tests__/grid-breakpoint-props.test.ts new file mode 100644 index 0000000000..536737a35e --- /dev/null +++ b/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'); diff --git a/packages/codemods/src/transforms/v2/web-react/grid-breakpoint-props.ts b/packages/codemods/src/transforms/v2/web-react/grid-breakpoint-props.ts new file mode 100644 index 0000000000..a7e3db49fc --- /dev/null +++ b/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; diff --git a/packages/web-react/DEPRECATIONS-v2.md b/packages/web-react/DEPRECATIONS-v2.md index b69fb2a532..efe7b76703 100644 --- a/packages/web-react/DEPRECATIONS-v2.md +++ b/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 -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. - `` → `` - `` → ``