From 15df1ac422450f4911de18ebb7ca524e2960d482 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 15 Feb 2024 15:22:32 -0500 Subject: [PATCH] feat(Masthead): Remove backgroundColor prop --- package.json | 2 +- .../src/rules/v6/exampleRule/example-rule.md | 18 ------------ .../rules/v6/exampleRule/example-rule.test.ts | 20 ------------- .../src/rules/v6/exampleRule/example-rule.ts | 29 ------------------- .../rules/v6/exampleRule/exampleRuleInput.tsx | 3 -- .../v6/exampleRule/exampleRuleOutput.tsx | 3 -- .../masthead-remove-background-color.md | 18 ++++++++++++ .../masthead-remove-background-color.test.ts | 21 ++++++++++++++ .../masthead-remove-background-color.ts | 16 ++++++++++ .../mastheadRemoveBackgroundColorInput.tsx | 3 ++ .../mastheadRemoveBackgroundColorOutput.tsx | 3 ++ packages/pf-codemods/README.md | 12 ++++---- 12 files changed, 68 insertions(+), 80 deletions(-) delete mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.md delete mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.test.ts delete mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.ts delete mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleInput.tsx delete mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleOutput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorInput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorOutput.tsx diff --git a/package.json b/package.json index 226b92098..4b0169e2e 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "test:v6": "yarn build && mocha packages/eslint-plugin-pf-codemods/dist/js/rules/v6/*/*.test.js", "test:v4:single": "pf-codemods --v4 --no-cache test/v4test.tsx", "test:v5:single": "pf-codemods --no-cache test/test.tsx", - "test:v6:single": "yarn build && pf-codemods --v6 --no-cache packages/eslint-plugin-pf-codemods/src/rules/v6/*/*.tsx", + "test:v6:single": "yarn build && pf-codemods --v6 --no-cache packages/eslint-plugin-pf-codemods/src/rules/v6/*/*Input.tsx", "test:koku": "pf-codemods --no-cache test/koku-ui", "test:console": "pf-codemods --no-cache test/console/frontend", "test:integreatly": "pf-codemods --no-cache test/tutorial-web-app", diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.md deleted file mode 100644 index fe5987ed3..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.md +++ /dev/null @@ -1,18 +0,0 @@ -### example-rule[(#1234)](https://github.com/patternfly/patternfly-react/pull/1234) - -We've renamed the `ComponentName` component to `NewComponentName`. - -#### Examples - -In: - -```jsx -%inputExample% -``` - -Out: - -```jsx -%outputExample% -``` - diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.test.ts deleted file mode 100644 index 6fb6bb632..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.test.ts +++ /dev/null @@ -1,20 +0,0 @@ -const ruleTester = require('../../ruletester'); -import * as rule from './example-rule'; - -ruleTester.run("example-rule", rule, { - valid: [ - { - code: `` - } - ], - invalid: [ - { - code: `import { ComponentName } from '@patternfly/react-core'; `, - output: `import { ComponentName } from '@patternfly/react-core'; `, - errors: [{ - message: `message`, - type: "JSXOpeningElement", - }] - }, - ] -}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.ts deleted file mode 100644 index a7c74a6c2..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/example-rule.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { getFromPackage } from '../../helpers'; - -// https://github.com/patternfly/patternfly-react/pull/1234 -module.exports = { - meta: { fixable: 'code' }, - create: function(context: { report: (arg0: { node: any; message: string; fix(fixer: any): any; }) => void; }) { - const {imports, exports} = getFromPackage(context, '@patternfly/react-core') - - const componentImports = imports.filter((specifier: { imported: { name: string; }; }) => specifier.imported.name === 'ComponentName'); - const componentExports = exports.filter((specifier: { imported: { name: string; }; }) => specifier.imported.name === 'ComponentName'); - - return !componentImports.length && !componentExports.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 === 'propName'); - if (attribute) { - context.report({ - node, - message: 'message', - fix(fixer: { replaceText: (arg0: any, arg1: string) => any; }) { - return fixer.replaceText(attribute, ''); - } - }); - } - } - } - }; - } -}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleInput.tsx deleted file mode 100644 index 427e4a21d..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleInput.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ComponentName } from "@patternfly/react-core"; - -export const ExampleRule = () => Body; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleOutput.tsx deleted file mode 100644 index 88d2d94b3..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/exampleRule/exampleRuleOutput.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ComponentName } from "@patternfly/react-core"; - -export const ExampleRule = () => Body; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.md new file mode 100644 index 000000000..5777c89cf --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.md @@ -0,0 +1,18 @@ +### masthead-remove-background-color [(#9744)](https://github.com/patternfly/patternfly-react/pull/9744) + +We've removed the `backgroundColor` prop from Masthead as theming is no longer handled React-side. + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` + diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.test.ts new file mode 100644 index 000000000..2f64c080b --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.test.ts @@ -0,0 +1,21 @@ +const ruleTester = require('../../ruletester'); +import * as rule from './masthead-remove-background-color'; + +ruleTester.run("masthead-remove-background-color", rule, { + valid: [ + { + code: `` + } + ], + invalid: [ + { + code: `import { Masthead } from '@patternfly/react-core'; `, + output: `import { Masthead } from '@patternfly/react-core'; `, + errors: [{ + message: `We've removed the \`backgroundColor\` prop from Masthead as theming is no longer handled React-side.`, + type: "JSXOpeningElement", + }] + }, + ] +}); + \ No newline at end of file diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.ts new file mode 100644 index 000000000..134f20117 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/masthead-remove-background-color.ts @@ -0,0 +1,16 @@ +import { renameProps } from '../../helpers'; + +// https://github.com/patternfly/patternfly-react/pull/9744 +module.exports = { + meta: { fixable: 'code' }, + create: renameProps({ + Masthead: { + "backgroundColor": { + newName: "", + message: () => + "We've removed the `backgroundColor` prop from Masthead as theming is no longer handled React-side.", + }, + }, + }), +}; + \ No newline at end of file diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorInput.tsx new file mode 100644 index 000000000..f61c80898 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorInput.tsx @@ -0,0 +1,3 @@ +import { Masthead } from "@patternfly/react-core"; + +export const MastheadRemoveBackgroundColorInput = () => \ No newline at end of file diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorOutput.tsx new file mode 100644 index 000000000..2e4626b71 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/mastheadRemoveBackgroundColor/mastheadRemoveBackgroundColorOutput.tsx @@ -0,0 +1,3 @@ +import { Masthead } from "@patternfly/react-core"; + +export const MastheadRemoveBackgroundColorInput = () => \ No newline at end of file diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index 0ed8539fe..aecb57706 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -46,25 +46,25 @@ These rules are based off the breaking change notes for React. Each rule links t Some rules will add either a comment (`/* data-codemods */`) or data attribute (`data-codemods="true"`) in order to prevent certain other rules from applying an unnecessary fix. -### example-rule[(#1234)](https://github.com/patternfly/patternfly-react/pull/1234) +### masthead-remove-background-color [(#9744)](https://github.com/patternfly/patternfly-react/pull/9744) -We've renamed the `ComponentName` component to `NewComponentName`. +We've removed the `backgroundColor` prop from Masthead as theming is no longer handled React-side. #### Examples In: ```jsx -import { ComponentName } from "@patternfly/react-core"; +import { Masthead } from "@patternfly/react-core"; -export const ExampleRule = () => Body; +export const MastheadRemoveBackgroundColorInput = () => ``` Out: ```jsx -import { ComponentName } from "@patternfly/react-core"; +import { Masthead } from "@patternfly/react-core"; -export const ExampleRule = () => Body; +export const MastheadRemoveBackgroundColorInput = () => ```