diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.input.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.input.tsx new file mode 100644 index 0000000000..b27e24d85d --- /dev/null +++ b/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 = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.output.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isdockedonmobile-prop.output.tsx new file mode 100644 index 0000000000..dc6f07ccf7 --- /dev/null +++ b/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 = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.input.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.input.tsx new file mode 100644 index 0000000000..6ab2b38fc7 --- /dev/null +++ b/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 = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.output.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/modal-isscrollable-prop.output.tsx new file mode 100644 index 0000000000..2dc37cc4ad --- /dev/null +++ b/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 = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isdockedonmobile-prop.test.ts b/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isdockedonmobile-prop.test.ts new file mode 100644 index 0000000000..c08a261aaa --- /dev/null +++ b/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'); diff --git a/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isscrollable-prop.test.ts b/packages/codemods/src/transforms/v2/web-react/__tests__/modal-isscrollable-prop.test.ts new file mode 100644 index 0000000000..174b89d259 --- /dev/null +++ b/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'); diff --git a/packages/codemods/src/transforms/v2/web-react/modal-isdockedonmobile-prop.ts b/packages/codemods/src/transforms/v2/web-react/modal-isdockedonmobile-prop.ts new file mode 100644 index 0000000000..9dd3760c9b --- /dev/null +++ b/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; diff --git a/packages/codemods/src/transforms/v2/web-react/modal-isscrollable-prop.ts b/packages/codemods/src/transforms/v2/web-react/modal-isscrollable-prop.ts new file mode 100644 index 0000000000..06fe2f602d --- /dev/null +++ b/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; diff --git a/packages/web-react/DEPRECATIONS-v2.md b/packages/web-react/DEPRECATIONS-v2.md index efe7b76703..b8f5f74da8 100644 --- a/packages/web-react/DEPRECATIONS-v2.md +++ b/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 -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 -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 -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