From cea677f2229d56cc7c5c539c829b06dbd9f702a5 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Mon, 30 Sep 2024 12:24:11 -0400 Subject: [PATCH 1/2] feat(charts): import charts from @patternfly/react-charts/victory --- .../chartsImportMoved/chartsImport-moved.md | 19 ++++ .../chartsImport-moved.test.ts | 92 +++++++++++++++++++ .../chartsImportMoved/chartsImport-moved.ts | 62 +++++++++++++ .../chartsImportMovedInput.tsx | 1 + .../chartsImportMovedOutput.tsx | 3 + packages/pf-codemods/README.md | 20 ++++ 6 files changed, 197 insertions(+) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedInput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedOutput.tsx diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.md new file mode 100644 index 00000000..cd90d988 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.md @@ -0,0 +1,19 @@ +### chartsImport-moved [(#11091)](https://github.com/patternfly/patternfly-react/pull/11091) + +In order to support multiple chart libraries, Victory based charts have moved. This rule will update import paths to our victory directory. + +Additionally, Victory has become a peer dependency. + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts new file mode 100644 index 00000000..7b53a67b --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts @@ -0,0 +1,92 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./chartsImport-moved"; +import { + ValidTests, + InvalidTests, + createValidTest, + createInvalidTest, +} from "../../helpers/testHelpers"; + +const specifiersToMove = [ + 'Chart', + 'ChartArea', + 'ChartAxis', + 'ChartBar', + 'ChartBoxPlot', + 'ChartBullet', + 'ChartBulletComparativeErrorMeasure', + 'ChartBulletComparativeMeasure', + 'ChartBulletComparativeWarningMeasure', + 'ChartBulletPrimaryDotMeasure', + 'ChartBulletPrimarySegmentedMeasure', + 'ChartBulletQualitativeRange', + 'ChartContainer', + 'ChartCursorContainer', + 'ChartCursorTooltip', + 'ChartCursorFlyout', + 'ChartDonut', + 'ChartDonutThreshold', + 'ChartDonutUtilization', + 'ChartGroup', + 'ChartLabel', + 'ChartLegend', + 'ChartLegendTooltip', + 'ChartLegendTooltipContent', + 'ChartLegendTooltipLabel', + 'ChartLine', + 'ChartPie', + 'ChartPoint', + 'ChartScatter', + 'ChartStack', + 'ChartTheme', + 'ChartThemeColor', + 'ChartThreshold', + 'ChartTooltip', + 'ChartVoronoiContainer', + 'createContainer', + 'getInteractiveLegendEvents', + 'getInteractiveLegendItemStyles', + 'getCustomTheme', + 'getTheme', + 'getThemeColors' +]; + +const validTests: ValidTests = []; +const invalidTests: InvalidTests = []; + +specifiersToMove.forEach((specifier) => { + validTests.push(createValidTest(`<${specifier} />`)); + validTests.push( + createValidTest( + `import { ${specifier} } from '@patternfly/react-charts/victory';` + ) + ); + + const errorMessage = `${specifier} has been moved. This rule will update import paths.`; + invalidTests.push( + createInvalidTest( + `import { ${specifier} } from '@patternfly/react-charts';`, + `import {\n\t${specifier}\n} from '@patternfly/react-charts/victory';`, + [{ message: errorMessage, type: "ImportDeclaration" }] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${specifier} as CustomSpecifier } from '@patternfly/react-charts';`, + `import {\n\t${specifier} as CustomSpecifier\n} from '@patternfly/react-charts/victory';`, + [{ message: errorMessage, type: "ImportDeclaration" }] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${specifier} } from '@patternfly/react-charts/dist/esm/components/index.js';`, + `import {\n\t${specifier}\n} from '@patternfly/react-charts/dist/esm/victory/components/index.js';`, + [{ message: errorMessage, type: "ImportDeclaration" }] + ) + ); +}); + +ruleTester.run("chartImport-moved", rule, { + valid: validTests, + invalid: invalidTests, +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.ts new file mode 100644 index 00000000..b0fa43d5 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.ts @@ -0,0 +1,62 @@ +import { moveSpecifiers } from "../../helpers"; + +// https://github.com/patternfly/patternfly-react/pull/11091 + +const specifiersToMove = [ +'Chart', +'ChartArea', +'ChartAxis', +'ChartBar', +'ChartBoxPlot', +'ChartBullet', +'ChartBulletComparativeErrorMeasure', +'ChartBulletComparativeMeasure', +'ChartBulletComparativeWarningMeasure', +'ChartBulletPrimaryDotMeasure', +'ChartBulletPrimarySegmentedMeasure', +'ChartBulletQualitativeRange', +'ChartContainer', +'ChartCursorContainer', +'ChartCursorTooltip', +'ChartCursorFlyout', +'ChartDonut', +'ChartDonutThreshold', +'ChartDonutUtilization', +'ChartGroup', +'ChartLabel', +'ChartLegend', +'ChartLegendTooltip', +'ChartLegendTooltipContent', +'ChartLegendTooltipLabel', +'ChartLine', +'ChartPie', +'ChartPoint', +'ChartScatter', +'ChartStack', +'ChartTheme', +'ChartThemeColor', +'ChartThreshold', +'ChartTooltip', +'ChartVoronoiContainer', +'createContainer', +'getInteractiveLegendEvents', +'getInteractiveLegendItemStyles', +'getCustomTheme', +'getTheme', +'getThemeColors' +]; + +const fromPackage = "@patternfly/react-charts"; +const toPackage = "@patternfly/react-charts/victory"; +const messageAfterImportNameChange = + "been moved. This rule will update import paths."; + +module.exports = { + meta: { fixable: "code" }, + create: moveSpecifiers( + specifiersToMove, + fromPackage, + toPackage, + messageAfterImportNameChange + ), +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedInput.tsx new file mode 100644 index 00000000..8a176f5b --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedInput.tsx @@ -0,0 +1 @@ +import { Chart } from "@patternfly/react-charts"; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedOutput.tsx new file mode 100644 index 00000000..f04de5fc --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImportMovedOutput.tsx @@ -0,0 +1,3 @@ +import { + Chart +} from '@patternfly/react-charts/victory'; diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index 8564b8bb..777d0403 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -368,6 +368,26 @@ export const CardUpdatedClickableMarkupInput = () => { }; ``` +### chartsImport-moved [(#11091)](https://github.com/patternfly/patternfly-react/pull/11091) + +In order to support multiple chart libraries, Victory based charts have moved. This rule will update import paths to our victory directory. + +Additionally, Victory has become a peer dependency. + +#### Examples + +In: + +```jsx +import { Chart } from "@patternfly/react-charts"; +``` + +Out: + +```jsx +import { Chart } from '@patternfly/react-charts/victory'; +``` + ### checkbox-radio-replace-isLabelBeforeButton [(#10016)](https://github.com/patternfly/patternfly-react/pull/10016) The `isLabelBeforeButton` prop in Checkbox and Radio has been replaced with `labelPosition="start"` From 4aa289bc745af0f96512da17d984b2eb61005534 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Thu, 3 Oct 2024 13:47:19 -0400 Subject: [PATCH 2/2] chore(charts): added test for js --- .../rules/v6/chartsImportMoved/chartsImport-moved.test.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts index 7b53a67b..c20019fe 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/chartsImportMoved/chartsImport-moved.test.ts @@ -84,6 +84,13 @@ specifiersToMove.forEach((specifier) => { [{ message: errorMessage, type: "ImportDeclaration" }] ) ); + invalidTests.push( + createInvalidTest( + `import { ${specifier} } from '@patternfly/react-charts/dist/js/components/index.js';`, + `import {\n\t${specifier}\n} from '@patternfly/react-charts/dist/js/victory/components/index.js';`, + [{ message: errorMessage, type: "ImportDeclaration" }] + ) + ); }); ruleTester.run("chartImport-moved", rule, {