From 67ab25d0bf3a26dd2233b3504bb509c4901df506 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 25 May 2023 11:33:32 -0400 Subject: [PATCH 1/2] feat(InputGroup): updated api --- ...tGroupItem.js => inputGroup-update-api.js} | 43 ++++++++++++++----- ...tGroupItem.js => inputGroup-update-api.js} | 24 +++++------ packages/pf-codemods/README.md | 11 +++-- test/test.tsx | 3 +- 4 files changed, 53 insertions(+), 28 deletions(-) rename packages/eslint-plugin-pf-codemods/lib/rules/v5/{inputGroup-add-inputGroupItem.js => inputGroup-update-api.js} (57%) rename packages/eslint-plugin-pf-codemods/test/rules/v5/{inputGroup-add-inputGroupItem.js => inputGroup-update-api.js} (79%) diff --git a/packages/eslint-plugin-pf-codemods/lib/rules/v5/inputGroup-add-inputGroupItem.js b/packages/eslint-plugin-pf-codemods/lib/rules/v5/inputGroup-update-api.js similarity index 57% rename from packages/eslint-plugin-pf-codemods/lib/rules/v5/inputGroup-add-inputGroupItem.js rename to packages/eslint-plugin-pf-codemods/lib/rules/v5/inputGroup-update-api.js index 3da614655..8ab0becf4 100644 --- a/packages/eslint-plugin-pf-codemods/lib/rules/v5/inputGroup-add-inputGroupItem.js +++ b/packages/eslint-plugin-pf-codemods/lib/rules/v5/inputGroup-update-api.js @@ -1,13 +1,21 @@ const { getFromPackage } = require("../../helpers"); // https://github.com/patternfly/patternfly-react/pull/9074 +// https://github.com/patternfly/patternfly-react/pull/9176 module.exports = { meta: { fixable: "code" }, create: function (context) { - const inputGroupImport = getFromPackage( - context, - "@patternfly/react-core" - ).imports.find((specifier) => specifier.imported?.name == "InputGroup"); + const { imports } = getFromPackage(context, "@patternfly/react-core"); + + const inputGroupImport = imports.find( + (specifier) => specifier.imported?.name == "InputGroup" + ); + const inputGroupItemImport = imports.find( + (specifier) => specifier.imported?.name == "InputGroupItem" + ); + const inputGroupTextImport = imports.find( + (specifier) => specifier.imported?.name == "InputGroupText" + ); return !inputGroupImport ? {} @@ -19,7 +27,7 @@ module.exports = { ); if ( getMatchingSpecifier(inputGroupImport.imported?.name) && - !getMatchingSpecifier("InputGroupItem") + !inputGroupItemImport ) { context.report({ node, @@ -38,11 +46,14 @@ module.exports = { if (parentName !== inputGroupImport.local?.name) { return; } + const inputGroupTextName = inputGroupTextImport?.local?.name; node.children?.forEach((child) => { const childName = child.openingElement?.name?.name; if ( - childName === "InputGroupItem" || + ["InputGroupItem", inputGroupItemImport?.local?.name].includes( + childName + ) || ["JSXText", "Literal"].includes(child.type) ) { return; @@ -56,19 +67,29 @@ module.exports = { ) ) { inputGroupItemProps = " isFill"; - } else if (childName === "InputGroupText") { + } else if (childName === inputGroupTextName) { inputGroupItemProps = " isBox"; } context.report({ node, - message: `Each child passed to ${parentName} must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to ${parentName} must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.${ + childName === inputGroupTextName + ? ' Additionally, InputGroupText is no longer exported and is instead rendered within InputGroupItem when the "isBox" prop is passed.' + : "" + }`, fix(fixer) { + const sourceCode = context.getSourceCode(); + const newChild = + childName === inputGroupTextName + ? child.children + ?.map((textChild) => sourceCode.getText(textChild)) + .join("") + : sourceCode.getText(child); + return fixer.replaceText( child, - `${context - .getSourceCode() - .getText(child)}` + `${newChild}` ); }, }); diff --git a/packages/eslint-plugin-pf-codemods/test/rules/v5/inputGroup-add-inputGroupItem.js b/packages/eslint-plugin-pf-codemods/test/rules/v5/inputGroup-update-api.js similarity index 79% rename from packages/eslint-plugin-pf-codemods/test/rules/v5/inputGroup-add-inputGroupItem.js rename to packages/eslint-plugin-pf-codemods/test/rules/v5/inputGroup-update-api.js index 172d324e7..46932871a 100644 --- a/packages/eslint-plugin-pf-codemods/test/rules/v5/inputGroup-add-inputGroupItem.js +++ b/packages/eslint-plugin-pf-codemods/test/rules/v5/inputGroup-update-api.js @@ -1,7 +1,7 @@ const ruleTester = require("../../ruletester"); -const rule = require("../../../lib/rules/v5/inputGroup-add-inputGroupItem"); +const rule = require("../../../lib/rules/v5/inputGroup-update-api"); -ruleTester.run("inputGroup-add-inputGroupItem", rule, { +ruleTester.run("inputGroup-update-api", rule, { valid: [ { code: `import { InputGroup, InputGroupItem } from '@patternfly/react-core'; `, @@ -22,7 +22,7 @@ ruleTester.run("inputGroup-add-inputGroupItem", rule, { type: "ImportDeclaration", }, { - message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.`, type: "JSXElement", }, ], @@ -37,7 +37,7 @@ ruleTester.run("inputGroup-add-inputGroupItem", rule, { type: "ImportDeclaration", }, { - message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.`, type: "JSXElement", }, ], @@ -51,7 +51,7 @@ ruleTester.run("inputGroup-add-inputGroupItem", rule, { type: "ImportDeclaration", }, { - message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.`, type: "JSXElement", }, ], @@ -65,7 +65,7 @@ ruleTester.run("inputGroup-add-inputGroupItem", rule, { type: "ImportDeclaration", }, { - message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.`, type: "JSXElement", }, ], @@ -79,22 +79,22 @@ ruleTester.run("inputGroup-add-inputGroupItem", rule, { type: "ImportDeclaration", }, { - message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.`, type: "JSXElement", }, ], }, // Child that is InputGroupText { - code: `import { InputGroup, InputGroupText } from '@patternfly/react-core'; `, - output: `import { InputGroup, InputGroupText, InputGroupItem } from '@patternfly/react-core'; `, + code: `import { InputGroup, InputGroupText } from '@patternfly/react-core'; Some text`, + output: `import { InputGroup, InputGroupText, InputGroupItem } from '@patternfly/react-core'; Some text`, errors: [ { message: `add missing import InputGroupItem from @patternfly/react-core`, type: "ImportDeclaration", }, { - message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted. Additionally, InputGroupText is no longer exported and is instead rendered within InputGroupItem when the "isBox" prop is passed.`, type: "JSXElement", }, ], @@ -109,7 +109,7 @@ ruleTester.run("inputGroup-add-inputGroupItem", rule, { type: "ImportDeclaration", }, { - message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to InputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.`, type: "JSXElement", }, ], @@ -124,7 +124,7 @@ ruleTester.run("inputGroup-add-inputGroupItem", rule, { type: "ImportDeclaration", }, { - message: `Each child passed to PFInputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may also need the "isFill", "isPlain", and/or "isBox" props passed in.`, + message: `Each child passed to PFInputGroup must now be wrapped within an InputGroupItem. The InputGroupItem may need the "isFill", "isPlain", and/or "isBox" props adjusted.`, type: "JSXElement", }, ], diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index 5d4de7d52..36ce1ae49 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -1465,9 +1465,12 @@ Out: We've updated the default value of the `aria-label` attribute for Nav with a `horizontal-subnav` variant to "local" (previously the default value was "Global"). -### inputGroup-add-inputGroupItem [(#9074)](https://github.com/patternfly/patternfly-react/pull/9074) +### inputGroup-update-api [(#9074)](https://github.com/patternfly/patternfly-react/pull/9074) and [(#9176)](https://github.com/patternfly/patternfly-react/pull/9176) -We've added the InputGroupItem component, which must wrap each child passed to an InputGroup. Additionally, the InputGroupItem component may need to have the `isFill`, `isBox`, and/or `isPlain` props passed in. +We've made the following updates to the InputGroup API: + +- Added the InputGroupItem component, which must wrap each child passed to an InputGroup. The InputGroupItem component may need to have the `isFill`, `isBox`, and/or `isPlain` props adjusted to retain styling. +- No longer exporting InputGroupText as it is now rendered within InputGroupItem when the `isBox` prop is passed to it. #### Examples @@ -1479,7 +1482,7 @@ In: