From cd1dbcf50fce406c4598158206a6336e2b953b88 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 24 May 2023 09:42:27 -0400 Subject: [PATCH 1/2] feat(Select,Dropdown): renamed itemId prop --- .../rules/v5/selectDropdown-rename-itemId.js | 44 +++++++ .../rules/v5/selectDropdown-rename-itemId.js | 112 ++++++++++++++++++ packages/pf-codemods/README.md | 20 ++++ test/test.tsx | 4 +- 4 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 packages/eslint-plugin-pf-codemods/lib/rules/v5/selectDropdown-rename-itemId.js create mode 100644 packages/eslint-plugin-pf-codemods/test/rules/v5/selectDropdown-rename-itemId.js diff --git a/packages/eslint-plugin-pf-codemods/lib/rules/v5/selectDropdown-rename-itemId.js b/packages/eslint-plugin-pf-codemods/lib/rules/v5/selectDropdown-rename-itemId.js new file mode 100644 index 000000000..9b64bb8b2 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/lib/rules/v5/selectDropdown-rename-itemId.js @@ -0,0 +1,44 @@ +const { getFromPackage, renamePropsOnNode } = require("../../helpers"); +const renames = { + SelectOption: { + itemId: { + newName: "value", + message: (node) => + `itemId prop for ${node?.name?.name} has been renamed to value`, + }, + }, + DropdownItem: { + itemId: { + newName: "value", + message: (node) => + `itemId prop for ${node?.name?.name} has been renamed to value`, + }, + }, +}; + +// https://github.com/patternfly/patternfly-react/pull/9175 +module.exports = { + meta: { fixable: "code" }, + create: function (context) { + const { imports: coreImports } = getFromPackage( + context, + "@patternfly/react-core" + ); + const { imports: nextImports } = getFromPackage( + context, + "@patternfly/react-core/next" + ); + + const selectAndDropdownImports = [...coreImports, ...nextImports].filter( + (imp) => ["SelectOption", "DropdownItem"].includes(imp.imported?.name) + ); + + return !selectAndDropdownImports.length + ? {} + : { + JSXOpeningElement(node) { + renamePropsOnNode(context, selectAndDropdownImports, node, renames); + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/test/rules/v5/selectDropdown-rename-itemId.js b/packages/eslint-plugin-pf-codemods/test/rules/v5/selectDropdown-rename-itemId.js new file mode 100644 index 000000000..8ac20ba45 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/test/rules/v5/selectDropdown-rename-itemId.js @@ -0,0 +1,112 @@ +const ruleTester = require("../../ruletester"); +const rule = require("../../../lib/rules/v5/selectDropdown-rename-itemId"); + +ruleTester.run("selectDropdown-rename-itemId", rule, { + valid: [ + { + code: `import { SelectOption } from '@patternfly/react-core'; `, + }, + { + code: `import { SelectOption } from '@patternfly/react-core'; `, + }, + { + code: `import { DropdownItem } from '@patternfly/react-core'; `, + }, + { + code: `import { DropdownItem } from '@patternfly/react-core'; `, + }, + { + // No @patternfly/react-core import + code: ``, + }, + { + // No @patternfly/react-core import + code: ``, + }, + ], + invalid: [ + { + code: `import { SelectOption } from '@patternfly/react-core'; `, + output: `import { SelectOption } from '@patternfly/react-core'; `, + errors: [ + { + message: `itemId prop for SelectOption has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + { + code: `import { DropdownItem } from '@patternfly/react-core'; `, + output: `import { DropdownItem } from '@patternfly/react-core'; `, + errors: [ + { + message: `itemId prop for DropdownItem has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + // React next import + { + code: `import { SelectOption } from '@patternfly/react-core/next'; `, + output: `import { SelectOption } from '@patternfly/react-core/next'; `, + errors: [ + { + message: `itemId prop for SelectOption has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + { + code: `import { DropdownItem } from '@patternfly/react-core/next'; `, + output: `import { DropdownItem } from '@patternfly/react-core/next'; `, + errors: [ + { + message: `itemId prop for DropdownItem has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + // Import from dist + { + code: `import { SelectOption } from '@patternfly/react-core/dist/esm/components/Select/index.js'; `, + output: `import { SelectOption } from '@patternfly/react-core/dist/esm/components/Select/index.js'; `, + errors: [ + { + message: `itemId prop for SelectOption has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + { + code: `import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/index.js'; `, + output: `import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/index.js'; `, + errors: [ + { + message: `itemId prop for DropdownItem has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + // Aliased import + { + code: `import { SelectOption as PFSO } from '@patternfly/react-core'; `, + output: `import { SelectOption as PFSO } from '@patternfly/react-core'; `, + errors: [ + { + message: `itemId prop for PFSO has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + { + code: `import { DropdownItem as PFDI } from '@patternfly/react-core'; `, + output: `import { DropdownItem as PFDI } from '@patternfly/react-core'; `, + errors: [ + { + message: `itemId prop for PFDI has been renamed to value`, + type: "JSXOpeningElement", + }, + ], + }, + ], +}); diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index ef20d3ad6..09e162031 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -2409,6 +2409,26 @@ import { ; ``` +### selectDropdown-rename-itemId [(#9175)](https://github.com/patternfly/patternfly-react/pull/9175) + +The `itemId` prop for our new implementation of SelectOption and DropdownItem has been renamed to `value`. + +#### Examples + +In: + +```jsx + + +``` + +Out: + +```jsx + + +``` + ### simpleList-remove-isCurrent [(#8132)](https://github.com/patternfly/patternfly-react/pull/8132) We've removed the deprecated the `isCurrent` prop. This rule wil replace it with `isActive`. diff --git a/test/test.tsx b/test/test.tsx index d681540e9..1cec1fbe0 100644 --- a/test/test.tsx +++ b/test/test.tsx @@ -111,6 +111,7 @@ import { SelectOption, WizardBody as WizardBodyNext, WizardFooter, + DropdownItem as NextDropdownItem, } from "@patternfly/react-core/next"; import { Table, @@ -251,6 +252,7 @@ const alertVariantOption = AlertVariant.default;