diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts index 5ff02007..821807f9 100644 --- a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts +++ b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts @@ -52,6 +52,7 @@ export const warningRules = [ "toolbarLabelGroupContent-updated-markup", "tooltip-warn-triggerRef-may-be-required", "treeView-warn-selectable-styling-modifier-removed", + "user-feedback-warn-changes", "wizard-warn-button-order", "wizardFooter-warn-update-markup", "wizardNavItem-warn-update-markup", diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts index f6889abd..884f5f7a 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts @@ -17,7 +17,7 @@ export function pfPackageMatches( parts[1] + "(/dist/(esm|js|dynamic))?" + (parts[2] ? "/" + parts[2] : "") + - (["react-component-groups", "react-tokens"].includes(parts[1]) + (["react-component-groups", "react-tokens", "react-user-feedback"].includes(parts[1]) ? `(/.*)?$` : `(/(components|helpers${ parts[1] === "react-icons" ? "|icons" : "" diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.md new file mode 100644 index 00000000..2f031ced --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.md @@ -0,0 +1,3 @@ +### user-feedback-warn-changes [(#76)](https://github.com/patternfly/react-user-feedback/pull/76) + +The internal scss stylesheet that `FeedbackModal` and its internal components were referencing has been refactored into a css stylesheet. The new `Feedback.css` file will have to be imported to maintain styling on `FeedbackModal`, and may be located in the dist (`@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css`) or in the `src`. diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts new file mode 100644 index 00000000..c3d56fad --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts @@ -0,0 +1,45 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./user-feedback-warn-changes"; + +ruleTester.run("user-feedback-warn-changes", rule, { + valid: [ + { + code: ``, + }, + { + code: `import { FeedbackModal } from '@patternfly/some-other-package';`, + } + ], + invalid: [ + { + code: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, + output: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, + errors: [ + { + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + type: "ImportDeclaration", + }, + ], + }, + { + code: `import { FeedbackModal as MyModal } from '@patternfly/react-user-feedback';`, + output: `import { FeedbackModal as MyModal } from '@patternfly/react-user-feedback';`, + errors: [ + { + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + type: "ImportDeclaration", + }, + ], + }, + { + code: `import myDefaultModal from '@patternfly/react-user-feedback/dist/esm/Feedback/FeedbackModal';`, + output: `import myDefaultModal from '@patternfly/react-user-feedback/dist/esm/Feedback/FeedbackModal';`, + errors: [ + { + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + type: "ImportDeclaration", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts new file mode 100644 index 00000000..6e0d1d34 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts @@ -0,0 +1,30 @@ +import { getAllImportsFromPackage, getComponentImportName } from "../../helpers"; +import { Rule } from "eslint"; +import { ImportDeclaration } from "estree-jsx"; + +// https://github.com/patternfly/react-user-feedback/pull/76 +module.exports = { + meta: {}, + create: function (context: Rule.RuleContext) { + const imports = getAllImportsFromPackage(context, "@patternfly/react-user-feedback", ["FeedbackModal"]); + + return !imports.length + ? {} + : { + ImportDeclaration(node: ImportDeclaration) { + if ( + node.specifiers.find( + (specifier) => + (specifier.type === "ImportSpecifier" || specifier.type === "ImportDefaultSpecifier") + && getComponentImportName(specifier, ["FeedbackModal"]) === "FeedbackModal" + ) + ) { + context.report({ + node, + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + }); + } + }, + }; + }, +};