From 053be9f3ef5b076057aadc8641426724fed82d7d Mon Sep 17 00:00:00 2001 From: Bernardo Belchior Date: Tue, 4 Feb 2025 17:54:02 +0100 Subject: [PATCH] Stabilize useSeries hooks. Cherry-picked from https://github.com/mui/mui-x/pull/15545 --- .../migration-charts-v7.md | 19 +++ packages/x-codemod/README.md | 19 +++ .../v8.0.0/charts/preset-safe/actual.spec.tsx | 59 ++++---- .../charts/preset-safe/expected.spec.tsx | 134 ++++-------------- .../src/v8.0.0/charts/preset-safe/index.ts | 14 +- .../actual-nested-imports.spec.tsx | 15 ++ .../actual-root-imports.spec.tsx | 16 +++ .../expected-nested-imports.spec.tsx | 15 ++ .../expected-root-imports.spec.tsx | 16 +++ .../rename-unstable-use-series/index.ts | 33 +++++ scripts/x-charts-pro.exports.json | 10 +- scripts/x-charts.exports.json | 10 +- 12 files changed, 199 insertions(+), 161 deletions(-) create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md index b069c22e28b04..cc9dbfd9af103 100644 --- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md +++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md @@ -242,3 +242,22 @@ The `labelFontSize` and `tickFontSize` props have been removed in favor of the s + }} /> ``` + +## Stabilize `useSeries` and `useXxxSeries` hooks ✅ + +The `useSeries` hook family has been stabilized and renamed accordingly. + +```diff + import { +- unstable_useSeries, ++ useSeries, +- unstable_usePieSeries, ++ usePieSeries, +- unstable_useLineSeries, ++ useLineSeries, +- unstable_useBarSeries, ++ useBarSeries, +- unstable_useScatterSeries, ++ useScatterSeries, + } from '@mui/x-charts/hooks'; +``` diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 435c40333c257..3f892ef77a473 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -256,6 +256,25 @@ Remove the `` and move the associated `onAxisClick` ``` +#### `rename-unstable-use-series` + +Renames multiple `useSeries` components from their unstable, as they have now become stable. + +```diff + import { +- unstable_useSeries, ++ useSeries, +- unstable_usePieSeries, ++ usePieSeries, +- unstable_useLineSeries, ++ useLineSeries, +- unstable_useBarSeries, ++ useBarSeries, +- unstable_useScatterSeries, ++ useScatterSeries, + } from '@mui/x-charts/hooks'; +``` + ### Data Grid codemods #### `preset-safe` for Data Grid v8.0.0 diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx index b9f35c741ed74..912385aa368f8 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx @@ -1,40 +1,29 @@ // @ts-nocheck import * as React from 'react'; import { PieChart } from '@mui/x-charts/PieChart'; -import { BarPlot, BarChart } from '@mui/x-charts/BarChart'; -import { LineChart } from '@mui/x-charts/LineChart'; +import { BarPlot } from '@mui/x-charts/BarChart'; import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; -import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { LegendPosition } from '@mui/x-charts/ChartsLegend'; +import { + unstable_useSeries, + unstable_usePieSeries, + unstable_useLineSeries, + unstable_useBarSeries, + unstable_useScatterSeries, +} from '@mui/x-charts/hooks'; -// prettier-ignore -
- - - - - - - - - - - - - - - - - -
; +function App() { + const series = unstable_useSeries(); + const pieSeries = unstable_usePieSeries(); + const lineSeries = unstable_useLineSeries(); + const barSeries = unstable_useBarSeries(); + const scatterSeries = unstable_useScatterSeries(); + + // prettier-ignore +
+ + + + + +
; +} diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx index bda066b382603..84c9fcd75ef54 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx @@ -1,110 +1,36 @@ // @ts-nocheck import * as React from 'react'; import { PieChart } from '@mui/x-charts/PieChart'; -import { BarPlot, BarChart } from '@mui/x-charts/BarChart'; -import { LineChart } from '@mui/x-charts/LineChart'; +import { BarPlot } from '@mui/x-charts/BarChart'; import { ChartContainer } from '@mui/x-charts/ChartContainer'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { Position } from '@mui/x-charts/models'; +import { + useSeries, + usePieSeries, + useLineSeries, + useBarSeries, + useScatterSeries, +} from '@mui/x-charts/hooks'; -// prettier-ignore -
- - - +function App() { + const series = useSeries(); + const pieSeries = usePieSeries(); + const lineSeries = useLineSeries(); + const barSeries = useBarSeries(); + const scatterSeries = useScatterSeries(); - - - - - - - - - - - - - -
; + // prettier-ignore +
+ + + + + +
; +} diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts index 983372b049004..eadd7481a8a7a 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts @@ -1,23 +1,13 @@ import transformLegendToSlots from '../rename-legend-to-slots-legend'; import transformRemoveResponsiveContainer from '../rename-responsive-chart-container'; -import transformRenameLabelAndTickFontSize from '../rename-label-and-tick-font-size'; -import transformReplaceLegendDirectionValues from '../replace-legend-direction-values'; -import transformLegendPositionValues from '../replace-legend-position-values'; -import transformRemoveExperimentalMarkRendering from '../remove-experimental-mark-rendering'; -import transformRenameLegendPositionType from '../rename-legend-position-type'; -import transformReplaceAxisClickHandler from '../remove-on-axis-click-handler'; +import transformRenameUnstableUseSeries from '../rename-unstable-use-series'; import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { file.source = transformLegendToSlots(file, api, options); file.source = transformRemoveResponsiveContainer(file, api, options); - file.source = transformRenameLabelAndTickFontSize(file, api, options); - file.source = transformReplaceLegendDirectionValues(file, api, options); - file.source = transformLegendPositionValues(file, api, options); - file.source = transformRemoveExperimentalMarkRendering(file, api, options); - file.source = transformRenameLegendPositionType(file, api, options); - file.source = transformReplaceAxisClickHandler(file, api, options); + file.source = transformRenameUnstableUseSeries(file, api, options); return file.source; } diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx new file mode 100644 index 0000000000000..9b43d3b4d2efe --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx @@ -0,0 +1,15 @@ +import { + unstable_useSeries, + unstable_usePieSeries, + unstable_useLineSeries, + unstable_useBarSeries, + unstable_useScatterSeries, +} from '@mui/x-charts/hooks'; + +function useThings() { + const series = unstable_useSeries(); + const pieSeries = unstable_usePieSeries(); + const lineSeries = unstable_useLineSeries(); + const barSeries = unstable_useBarSeries(); + const scatterSeries = unstable_useScatterSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx new file mode 100644 index 0000000000000..11ea24058cbfc --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx @@ -0,0 +1,16 @@ +/* eslint-disable no-restricted-imports */ +import { + unstable_useSeries, + unstable_usePieSeries, + unstable_useLineSeries, + unstable_useBarSeries, + unstable_useScatterSeries, +} from '@mui/x-charts'; + +function useThings() { + const series = unstable_useSeries(); + const pieSeries = unstable_usePieSeries(); + const lineSeries = unstable_useLineSeries(); + const barSeries = unstable_useBarSeries(); + const scatterSeries = unstable_useScatterSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx new file mode 100644 index 0000000000000..46eb4d35ad3f7 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx @@ -0,0 +1,15 @@ +import { + useSeries, + usePieSeries, + useLineSeries, + useBarSeries, + useScatterSeries, +} from '@mui/x-charts/hooks'; + +function useThings() { + const series = useSeries(); + const pieSeries = usePieSeries(); + const lineSeries = useLineSeries(); + const barSeries = useBarSeries(); + const scatterSeries = useScatterSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx new file mode 100644 index 0000000000000..98a76c57dbbad --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx @@ -0,0 +1,16 @@ +/* eslint-disable no-restricted-imports */ +import { + useSeries, + usePieSeries, + useLineSeries, + useBarSeries, + useScatterSeries, +} from '@mui/x-charts'; + +function useThings() { + const series = useSeries(); + const pieSeries = usePieSeries(); + const lineSeries = useLineSeries(); + const barSeries = useBarSeries(); + const scatterSeries = useScatterSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts new file mode 100644 index 0000000000000..8367352a504fc --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts @@ -0,0 +1,33 @@ +import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; +import { renameImports } from '../../../util/renameImports'; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + const j = api.jscodeshift; + const root = j(file.source); + + const printOptions = options.printOptions || { + quote: 'single', + trailingComma: true, + wrapColumn: 40, + }; + + renameImports({ + j, + root, + packageNames: ['@mui/x-charts', '@mui/x-charts-pro'], + imports: [ + { + oldEndpoint: 'hooks', + importsMapping: { + unstable_useSeries: 'useSeries', + unstable_usePieSeries: 'usePieSeries', + unstable_useLineSeries: 'useLineSeries', + unstable_useBarSeries: 'useBarSeries', + unstable_useScatterSeries: 'useScatterSeries', + }, + }, + ], + }); + + return root.toSource(printOptions); +} diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index a4b79e39148a9..7cf84d9be26a7 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -307,13 +307,9 @@ { "name": "StackableSeriesType", "kind": "TypeAlias" }, { "name": "StackOffsetType", "kind": "TypeAlias" }, { "name": "StackOrderType", "kind": "TypeAlias" }, - { "name": "unstable_useBarSeries", "kind": "Function" }, - { "name": "unstable_useLineSeries", "kind": "Function" }, - { "name": "unstable_usePieSeries", "kind": "Function" }, - { "name": "unstable_useScatterSeries", "kind": "Function" }, - { "name": "unstable_useSeries", "kind": "Function" }, { "name": "useAxisTooltip", "kind": "Function" }, { "name": "UseAxisTooltipReturnValue", "kind": "Interface" }, + { "name": "useBarSeries", "kind": "Function" }, { "name": "useChartGradientId", "kind": "Function" }, { "name": "useChartGradientIdObjectBound", "kind": "Function" }, { "name": "useChartId", "kind": "Function" }, @@ -324,7 +320,11 @@ { "name": "useItemTooltip", "kind": "Function" }, { "name": "UseItemTooltipReturnValue", "kind": "TypeAlias" }, { "name": "useLegend", "kind": "Function" }, + { "name": "useLineSeries", "kind": "Function" }, { "name": "useMouseTracker", "kind": "Function" }, + { "name": "usePieSeries", "kind": "Function" }, + { "name": "useScatterSeries", "kind": "Function" }, + { "name": "useSeries", "kind": "Function" }, { "name": "useSvgRef", "kind": "Function" }, { "name": "useXAxes", "kind": "Function" }, { "name": "useXAxis", "kind": "Function" }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 458225330811f..5297874f6768e 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -291,13 +291,9 @@ { "name": "StackableSeriesType", "kind": "TypeAlias" }, { "name": "StackOffsetType", "kind": "TypeAlias" }, { "name": "StackOrderType", "kind": "TypeAlias" }, - { "name": "unstable_useBarSeries", "kind": "Function" }, - { "name": "unstable_useLineSeries", "kind": "Function" }, - { "name": "unstable_usePieSeries", "kind": "Function" }, - { "name": "unstable_useScatterSeries", "kind": "Function" }, - { "name": "unstable_useSeries", "kind": "Function" }, { "name": "useAxisTooltip", "kind": "Function" }, { "name": "UseAxisTooltipReturnValue", "kind": "Interface" }, + { "name": "useBarSeries", "kind": "Function" }, { "name": "useChartGradientId", "kind": "Function" }, { "name": "useChartGradientIdObjectBound", "kind": "Function" }, { "name": "useChartId", "kind": "Function" }, @@ -308,7 +304,11 @@ { "name": "useItemTooltip", "kind": "Function" }, { "name": "UseItemTooltipReturnValue", "kind": "TypeAlias" }, { "name": "useLegend", "kind": "Function" }, + { "name": "useLineSeries", "kind": "Function" }, { "name": "useMouseTracker", "kind": "Function" }, + { "name": "usePieSeries", "kind": "Function" }, + { "name": "useScatterSeries", "kind": "Function" }, + { "name": "useSeries", "kind": "Function" }, { "name": "useSvgRef", "kind": "Function" }, { "name": "useXAxes", "kind": "Function" }, { "name": "useXAxis", "kind": "Function" },