diff --git a/packages/codemods/src/transforms/v4/web-react/README.md b/packages/codemods/src/transforms/v4/web-react/README.md new file mode 100644 index 0000000000..7d17ae14b3 --- /dev/null +++ b/packages/codemods/src/transforms/v4/web-react/README.md @@ -0,0 +1,24 @@ +# Web-React v4 Codemods + +This is a collection of codemods for updating Web-React v4 components. + +You can find instructions on how to run these codemods in the main package [README](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/README.md). + +## Included Scripts + +### `v4/web-react/collapse-isDisposable-prop` — UncontrolledCollapse `hideOnCollapse` to `isDisposable` prop change + +This codemod updates the `UncontrolledCollapse` component by replacing the `hideOnCollapse` prop with a new `isDisposable` prop. + +#### Usage + +```sh +npx @lmc-eu/spirit-codemods -p -t v4/web-react/collapse-isDisposable-prop +``` + +#### Example + +```diff +- ++ +``` diff --git a/packages/codemods/src/transforms/v4/web-react/__testfixtures__/collapse-isDisposable-prop.input.tsx b/packages/codemods/src/transforms/v4/web-react/__testfixtures__/collapse-isDisposable-prop.input.tsx new file mode 100644 index 0000000000..12b405deed --- /dev/null +++ b/packages/codemods/src/transforms/v4/web-react/__testfixtures__/collapse-isDisposable-prop.input.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { UncontrolledCollapse } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + collapse + + collapse + + +); diff --git a/packages/codemods/src/transforms/v4/web-react/__testfixtures__/collapse-isDisposable-prop.output.tsx b/packages/codemods/src/transforms/v4/web-react/__testfixtures__/collapse-isDisposable-prop.output.tsx new file mode 100644 index 0000000000..6582fbb6db --- /dev/null +++ b/packages/codemods/src/transforms/v4/web-react/__testfixtures__/collapse-isDisposable-prop.output.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { UncontrolledCollapse } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + collapse + + collapse + + +); diff --git a/packages/codemods/src/transforms/v4/web-react/__tests__/collapse-isDisposable-prop.test.ts b/packages/codemods/src/transforms/v4/web-react/__tests__/collapse-isDisposable-prop.test.ts new file mode 100644 index 0000000000..46d501be15 --- /dev/null +++ b/packages/codemods/src/transforms/v4/web-react/__tests__/collapse-isDisposable-prop.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'collapse-isDisposable-prop'); diff --git a/packages/codemods/src/transforms/v4/web-react/collapse-isDisposable-prop.ts b/packages/codemods/src/transforms/v4/web-react/collapse-isDisposable-prop.ts new file mode 100644 index 0000000000..43542f0525 --- /dev/null +++ b/packages/codemods/src/transforms/v4/web-react/collapse-isDisposable-prop.ts @@ -0,0 +1,51 @@ +import { API, FileInfo } from 'jscodeshift'; +import { removeParentheses } from '../../../helpers'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + // Find import statements for the specific module and Button 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 componentSpecifier = importStatements.find(j.ImportSpecifier, { + imported: { + type: 'Identifier', + name: 'UncontrolledCollapse', + }, + }); + + // Check if UncontrolledCollapse specifier is present + if (componentSpecifier.length > 0) { + // Find UncontrolledCollapse components in the module + const components = root.find(j.JSXOpeningElement, { + name: { + type: 'JSXIdentifier', + name: 'UncontrolledCollapse', + }, + }); + + // Rename 'hideOnCollapse' attribute to 'isDisposable' in UncontrolledCollapse components + components + .find(j.JSXAttribute, { + name: { + type: 'JSXIdentifier', + name: 'hideOnCollapse', + }, + }) + .forEach((attributePath) => { + attributePath.node.name.name = 'isDisposable'; + }); + } + } + + return removeParentheses(root.toSource()); +}; + +export default transform; diff --git a/packages/codemods/tsconfig.json b/packages/codemods/tsconfig.json index 81aa57037d..ec39a12277 100644 --- a/packages/codemods/tsconfig.json +++ b/packages/codemods/tsconfig.json @@ -28,6 +28,6 @@ "module": "es2020", "target": "es2020" }, - "include": ["./", "./.eslintrc.js"], + "include": ["./*", "./.eslintrc.js"], "exclude": ["./node_modules", "**/__testfixtures__/**"] }