diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tabs-tabitem-tabpane-props.input.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tabs-tabitem-tabpane-props.input.tsx new file mode 100644 index 0000000000..fcafc9fa32 --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tabs-tabitem-tabpane-props.input.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { TabItem, TabPane } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tabs-tabitem-tabpane-props.output.tsx b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tabs-tabitem-tabpane-props.output.tsx new file mode 100644 index 0000000000..63dff51076 --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/__testfixtures__/tabs-tabitem-tabpane-props.output.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures. +import { TabItem, TabPane } from '@lmc-eu/spirit-web-react'; + +export const MyComponent = () => ( + <> + + + +); diff --git a/packages/codemods/src/transforms/v2/web-react/__tests__/tabs-tabitem-tabpane-props.test.ts b/packages/codemods/src/transforms/v2/web-react/__tests__/tabs-tabitem-tabpane-props.test.ts new file mode 100644 index 0000000000..a36eba14d8 --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/__tests__/tabs-tabitem-tabpane-props.test.ts @@ -0,0 +1,3 @@ +import { testTransform } from '../../../../../tests/testUtils'; + +testTransform(__dirname, 'tabs-tabitem-tabpane-props'); diff --git a/packages/codemods/src/transforms/v2/web-react/tabs-tabitem-tabpane-props.ts b/packages/codemods/src/transforms/v2/web-react/tabs-tabitem-tabpane-props.ts new file mode 100644 index 0000000000..e911a539b1 --- /dev/null +++ b/packages/codemods/src/transforms/v2/web-react/tabs-tabitem-tabpane-props.ts @@ -0,0 +1,26 @@ +import { API, FileInfo } from 'jscodeshift'; + +const transform = (fileInfo: FileInfo, api: API) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + + // Find JSX elements and update `forTab` to `forTabPane` + root + .find(j.JSXOpeningElement, { name: { type: 'JSXIdentifier', name: 'TabItem' } }) + .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'forTab' } }) + .forEach((path) => { + j(path).replaceWith(j.jsxAttribute(j.jsxIdentifier('forTabPane'), path.node.value)); + }); + + // Find JSX elements and update `tabId` to `id` + root + .find(j.JSXOpeningElement, { name: { type: 'JSXIdentifier', name: 'TabPane' } }) + .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'tabId' } }) + .forEach((path) => { + j(path).replaceWith(j.jsxAttribute(j.jsxIdentifier('id'), path.node.value)); + }); + + return root.toSource({ quote: 'single' }); +}; + +export default transform;