From 715344022dd133e4ac2839acf4d2c58eacdd829b Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 16 Feb 2024 15:08:53 -0500 Subject: [PATCH 1/3] feat(Accordion): updates props --- .../accordionContent-remove-isHidden-prop.md | 18 +++++++++++++ ...ordionContent-remove-isHidden-prop.test.ts | 25 +++++++++++++++++++ .../accordionContent-remove-isHidden-prop.ts | 15 +++++++++++ ...ccordionContentRemoveIsHiddenPropInput.tsx | 5 ++++ ...cordionContentRemoveIsHiddenPropOutput.tsx | 5 ++++ 5 files changed, 68 insertions(+) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropInput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropOutput.tsx diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md new file mode 100644 index 000000000..9c6de22f7 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md @@ -0,0 +1,18 @@ +### accordionContent-remove-isHidden-prop [(#9876)](https://github.com/patternfly/patternfly-react/pull/9876) + +The \`isHidden\` prop has been removed from AccordionContent, as its visibility will now be set based on the \`isExpanded\` prop on AccordionItem. + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` + diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.test.ts new file mode 100644 index 000000000..6a3b44bb7 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.test.ts @@ -0,0 +1,25 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./accordionContent-remove-isHidden-prop"; + +ruleTester.run("accordionContent-remove-isHidden-prop", rule, { + valid: [ + { + code: ``, + }, + { + code: `import { AccordionContent } from '@patternfly/react-core'; `, + }, + ], + invalid: [ + { + code: `import { AccordionContent } from '@patternfly/react-core'; `, + output: `import { AccordionContent } from '@patternfly/react-core'; `, + errors: [ + { + message: `The \`isHidden\` prop has been removed from AccordionContent, as its visibility will now be set automatically based on the \`isExpanded\` prop on AccordionItem.`, + type: "JSXOpeningElement", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.ts new file mode 100644 index 000000000..cfcf9653c --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.ts @@ -0,0 +1,15 @@ +import { renameProps } from "../../helpers"; + +// https://github.com/patternfly/patternfly-react/pull/9876 +module.exports = { + meta: { fixable: "code" }, + create: renameProps({ + AccordionContent: { + isHidden: { + newName: "", + message: + "The `isHidden` prop has been removed from AccordionContent, as its visibility will now be set automatically based on the `isExpanded` prop on AccordionItem.", + }, + }, + }), +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropInput.tsx new file mode 100644 index 000000000..a18eef215 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropInput.tsx @@ -0,0 +1,5 @@ +import { AccordionContent } from "@patternfly/react-core"; + +export const AccordionContentRemoveIsHiddenPropInput = () => ( + +); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropOutput.tsx new file mode 100644 index 000000000..3ef69148e --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContentRemoveIsHiddenPropOutput.tsx @@ -0,0 +1,5 @@ +import { AccordionContent } from "@patternfly/react-core"; + +export const AccordionContentRemoveIsHiddenPropInput = () => ( + +); From b44c64665ee44a5a850e9fe6f618c00d71d8079b Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 16 Feb 2024 15:15:23 -0500 Subject: [PATCH 2/3] Added rule for AccordionItem markup change --- .../src/ruleCustomization.ts | 1 + .../accordionItem-warn-update-markup.md | 3 ++ .../accordionItem-warn-update-markup.test.ts | 22 +++++++++++ .../accordionItem-warn-update-markup.ts | 38 +++++++++++++++++++ .../accordionItemWarnUpdateMarkupInput.tsx | 3 ++ .../accordionItemWarnUpdateMarkupOutput.tsx | 3 ++ 6 files changed, 70 insertions(+) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupInput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupOutput.tsx diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts index bdeee66e9..467525ebe 100644 --- a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts +++ b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts @@ -4,6 +4,7 @@ export const betaRuleNames: string[] = []; // if you want a rule to have a severity that defaults to warning rather than error, add the rule name to the below array export const warningRules = [ "aboutModalBoxHero-remove-subcomponent", + "accordionItem-warn-update-markup", "applicationLauncher-warn-input", "card-deprecate-props", "card-warn-component", diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.md new file mode 100644 index 000000000..0b5bc6bed --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.md @@ -0,0 +1,3 @@ +### accordionItem-warn-update-markup [(#9876)](https://github.com/patternfly/patternfly-react/pull/9876) + +The markup for AccordionItem has been updated, and it now renders a `div` element as a wrapper. diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.test.ts new file mode 100644 index 000000000..c03a17337 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.test.ts @@ -0,0 +1,22 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./accordionItem-warn-update-markup"; + +ruleTester.run("accordionItem-warn-update-markup", rule, { + valid: [ + { + code: ``, + }, + ], + invalid: [ + { + code: `import { AccordionItem } from '@patternfly/react-core'; `, + output: `import { AccordionItem } from '@patternfly/react-core'; `, + errors: [ + { + message: `The markup for AccordionItem has been updated, and it now renders a \`div\` element as a wrapper.`, + type: "JSXOpeningElement", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.ts new file mode 100644 index 000000000..bc772860b --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItem-warn-update-markup.ts @@ -0,0 +1,38 @@ +import { getFromPackage } from "../../helpers"; + +// https://github.com/patternfly/patternfly-react/pull/9876 +module.exports = { + meta: {}, + create: function (context: { + report: (arg0: { + node: any; + message: string; + fix?(fixer: any): any; + }) => void; + }) { + const { imports } = getFromPackage(context, "@patternfly/react-core"); + + const componentImports = imports.filter( + (specifier: { imported: { name: string } }) => + specifier.imported.name === "AccordionItem" + ); + + return !componentImports.length + ? {} + : { + JSXOpeningElement(node: { name: { name: any }; attributes: any[] }) { + if ( + componentImports + .map((imp: { local: { name: any } }) => imp.local.name) + .includes(node.name.name) + ) { + context.report({ + node, + message: + "The markup for AccordionItem has been updated, and it now renders a `div` element as a wrapper.", + }); + } + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupInput.tsx new file mode 100644 index 000000000..c3ae773ae --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupInput.tsx @@ -0,0 +1,3 @@ +import { AccordionItem } from "@patternfly/react-core"; + +export const AccordionItemWarnUpdateMarkupInput = () => ; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupOutput.tsx new file mode 100644 index 000000000..c3ae773ae --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionItemWarnUpdateMarkup/accordionItemWarnUpdateMarkupOutput.tsx @@ -0,0 +1,3 @@ +import { AccordionItem } from "@patternfly/react-core"; + +export const AccordionItemWarnUpdateMarkupInput = () => ; From 1a8b3d99ab761157f0044909ce23be27213d7c5b Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 16 Feb 2024 15:50:24 -0500 Subject: [PATCH 3/3] Added rule for moving isExpanded prop to AccordionItem --- .../accordionContent-remove-isHidden-prop.md | 3 +- .../accordionToggle-move-isExpanded-prop.md | 17 +++++ ...cordionToggle-move-isExpanded-prop.test.ts | 46 +++++++++++++ .../accordionToggle-move-isExpanded-prop.ts | 67 +++++++++++++++++++ ...accordionToggleMoveIsExpandedPropInput.tsx | 7 ++ ...ccordionToggleMoveIsExpandedPropOutput.tsx | 7 ++ 6 files changed, 145 insertions(+), 2 deletions(-) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropInput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropOutput.tsx diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md index 9c6de22f7..ee04bac24 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionContentRemoveIsHiddenProp/accordionContent-remove-isHidden-prop.md @@ -1,6 +1,6 @@ ### accordionContent-remove-isHidden-prop [(#9876)](https://github.com/patternfly/patternfly-react/pull/9876) -The \`isHidden\` prop has been removed from AccordionContent, as its visibility will now be set based on the \`isExpanded\` prop on AccordionItem. +The `isHidden` prop has been removed from AccordionContent, as its visibility will now be set automatically based on the `isExpanded` prop on AccordionItem. #### Examples @@ -15,4 +15,3 @@ Out: ```jsx %outputExample% ``` - diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.md new file mode 100644 index 000000000..d34d4aa73 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.md @@ -0,0 +1,17 @@ +### accordionToggle-move-isExpanded-prop [(#9876)](https://github.com/patternfly/patternfly-react/pull/9876) + +The `isExpanded` prop for AccordionToggle has been moved to AccordionItem. + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.test.ts new file mode 100644 index 000000000..56ed29525 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.test.ts @@ -0,0 +1,46 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./accordionToggle-move-isExpanded-prop"; + +ruleTester.run("accordionToggle-move-isExpanded-prop", rule, { + valid: [ + { + code: ``, + }, + { + code: `import { AccordionToggle } from '@patternfly/react-core'; `, + }, + ], + invalid: [ + { + code: `import { AccordionItem, AccordionToggle } from '@patternfly/react-core'; `, + output: `import { AccordionItem, AccordionToggle } from '@patternfly/react-core'; `, + errors: [ + { + message: `The \`isExpanded\` prop for AccordionToggle has been moved to AccordionItem.`, + type: "JSXOpeningElement", + }, + ], + }, + { + code: `import { AccordionItem, AccordionToggle } from '@patternfly/react-core'; `, + output: `import { AccordionItem, AccordionToggle } from '@patternfly/react-core'; `, + errors: [ + { + message: `The \`isExpanded\` prop for AccordionToggle has been moved to AccordionItem.`, + type: "JSXOpeningElement", + }, + ], + }, + { + // Test that the prop is moved correctly when AccordionItem already has a prop + code: `import { AccordionItem, AccordionToggle } from '@patternfly/react-core'; `, + output: `import { AccordionItem, AccordionToggle } from '@patternfly/react-core'; `, + errors: [ + { + message: `The \`isExpanded\` prop for AccordionToggle has been moved to AccordionItem.`, + type: "JSXOpeningElement", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.ts new file mode 100644 index 000000000..beaf61242 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggle-move-isExpanded-prop.ts @@ -0,0 +1,67 @@ +import { getFromPackage, findAncestor } from "../../helpers"; + +// https://github.com/patternfly/patternfly-react/pull/9876 +module.exports = { + meta: { fixable: "code" }, + create: function (context: { + getSourceCode: () => { + getText(node: any): string; + }; + report: (arg0: { + node: any; + message: string; + fix(fixer: any): any; + }) => void; + }) { + const { imports } = getFromPackage(context, "@patternfly/react-core"); + + const componentImports = imports.filter( + (specifier: { imported: { name: string } }) => + specifier.imported.name === "AccordionToggle" + ); + + return !componentImports.length + ? {} + : { + JSXOpeningElement(node: { name: { name: any }; attributes: any[] }) { + if ( + componentImports + .map((imp: { local: { name: any } }) => imp.local.name) + .includes(node.name.name) + ) { + const attribute = node.attributes.find( + (attr: { name: { name: string } }) => + attr.name?.name === "isExpanded" + ); + if (attribute) { + context.report({ + node, + message: + "The `isExpanded` prop for AccordionToggle has been moved to AccordionItem.", + fix(fixer: { + replaceText: (arg0: any, arg1: string) => any; + insertTextAfter: (arg0: string, arg1: string) => any; + }) { + const accordionItemAncestor = findAncestor( + node, + (current) => + current?.openingElement?.name?.name === "AccordionItem" + ); + const attributeValue = context + .getSourceCode() + .getText(attribute); + return [ + fixer.replaceText(attribute, ""), + fixer.insertTextAfter( + accordionItemAncestor.openingElement.name, + ` ${attributeValue}` + ), + ]; + }, + }); + } + } + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropInput.tsx new file mode 100644 index 000000000..a621b8844 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropInput.tsx @@ -0,0 +1,7 @@ +import { AccordionItem, AccordionToggle } from "@patternfly/react-core"; + +export const AccordionToggleMoveIsExpandedPropInput = () => ( + + + +); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropOutput.tsx new file mode 100644 index 000000000..841f0b298 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/accordionToggleMoveIsExpandedProp/accordionToggleMoveIsExpandedPropOutput.tsx @@ -0,0 +1,7 @@ +import { AccordionItem, AccordionToggle } from "@patternfly/react-core"; + +export const AccordionToggleMoveIsExpandedPropInput = () => ( + + + +);