@mui/x-codemod 8.0.0-alpha.10 → 8.0.0-alpha.12

package/README.md

@@ -242,6 +242,73 @@ Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle`
  />
 ```
 
+#### `remove-on-axis-click-handler`
+
+Remove the `<ChartsOnAxisClickHandler />` and move the associated `onAxisClick` prop to its parent.
+
+> [!WARNING]
+> This codemode does not work if component got renamed or if the handler is not a direct child of the container.
+
+```diff
++ <ChartContainer onAxisClick={() => {}}>
+- <ChartContainer>
+-   <ChartsOnAxisClickHandler onAxisClick={() => {}} />
+ </ChartContainer>
+```
+
+#### `rename-unstable-use-series`
+
+Remove `unstable_` prefix from `useSeries` and `use*Series` hooks, 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';
+  import {
+-   unstable_useHeatmapSeries,
++   useHeatmapSeries,
+  } from '@mui/x-charts-pro/hooks';
+```
+
+#### `rename-sparkline-colors-to-color`
+
+Renames the `colors` prop of a `SparkLineChart` to `color` and accesses its first element.
+
+```diff
+ <SparkLineChart
+-  colors={['red']}
++  color={'red'}
+ />
+```
+
+If `colors` is a function, it will be wrapped in another function that returns its first element.
+
+```diff
+ <SparkLineChart
+-  colors={fn}
++  color={typeof fn === 'function' ? mode => fn(mode)[0] : fn[0]}
+ />
+```
+
+If there are cases that the codemod cannot handle, you should see a comment with a `mui-x-codemod` prefix in the code.
+
+```diff
+ <SparkLineChart
+-  colors={(mode) => (mode === 'light' ? ['black'] : ['white'])}
++  /* mui-x-codemod: We renamed the `colors` prop to `color`, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. */
++  color={(mode) => (mode === 'light' ? ['black'] : ['white'])}
+ />
+```
+
 ### Data Grid codemods
 
 #### `preset-safe` for Data Grid v8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "8.0.0-alpha.10",
+  "version": "8.0.0-alpha.12",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,17 +25,17 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.26.7",
-    "@babel/runtime": "^7.26.7",
-    "@babel/traverse": "^7.26.7",
+    "@babel/core": "^7.26.9",
+    "@babel/runtime": "^7.26.9",
+    "@babel/traverse": "^7.26.9",
     "jscodeshift": "17.1.2",
     "yargs": "^17.7.2",
-    "@mui/x-internals": "8.0.0-alpha.10"
+    "@mui/x-internals": "8.0.0-alpha.12"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",
     "dayjs": "^1.11.13",
-    "moment-timezone": "^0.5.46",
+    "moment-timezone": "^0.5.47",
     "rimraf": "^6.0.1"
   },
   "sideEffects": false,

package/v8.0.0/charts/preset-safe/index.js

@@ -12,6 +12,8 @@ var _replaceLegendDirectionValues = _interopRequireDefault(require("../replace-l
 var _replaceLegendPositionValues = _interopRequireDefault(require("../replace-legend-position-values"));
 var _removeExperimentalMarkRendering = _interopRequireDefault(require("../remove-experimental-mark-rendering"));
 var _renameLegendPositionType = _interopRequireDefault(require("../rename-legend-position-type"));
+var _removeOnAxisClickHandler = _interopRequireDefault(require("../remove-on-axis-click-handler"));
+var _renameUnstableUseSeries = _interopRequireDefault(require("../rename-unstable-use-series"));
 function transformer(file, api, options) {
   file.source = (0, _renameLegendToSlotsLegend.default)(file, api, options);
   file.source = (0, _renameResponsiveChartContainer.default)(file, api, options);
@@ -20,5 +22,7 @@ function transformer(file, api, options) {
   file.source = (0, _replaceLegendPositionValues.default)(file, api, options);
   file.source = (0, _removeExperimentalMarkRendering.default)(file, api, options);
   file.source = (0, _renameLegendPositionType.default)(file, api, options);
+  file.source = (0, _removeOnAxisClickHandler.default)(file, api, options);
+  file.source = (0, _renameUnstableUseSeries.default)(file, api, options);
   return file.source;
 }

package/v8.0.0/charts/remove-on-axis-click-handler/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions;
+  const root = j(file.source);
+
+  // Move the handler to the container
+  root.findJSXElements().filter(path => Boolean(path.node.openingElement) && path.node.openingElement.name.type === 'JSXIdentifier' && path.node.openingElement.name.name.includes('ChartContainer')).forEach(path => {
+    // We find the <ChartsOnAxisClickHandler /> node
+    const clickHandler = path.node.children?.find(child => {
+      if (child.type !== 'JSXElement') {
+        return false;
+      }
+      if (child.openingElement.name.type !== 'JSXIdentifier') {
+        return false;
+      }
+      return child.openingElement.name.name === 'ChartsOnAxisClickHandler';
+    });
+    if (!clickHandler) {
+      return;
+    }
+    const clickCallback = clickHandler.openingElement.attributes?.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'onAxisClick');
+    if (!clickCallback) {
+      return;
+    }
+
+    // Move the callback to the container
+    path.node.openingElement.attributes?.push(clickCallback);
+
+    // Remove the children
+    path.node.children = path.node.children?.filter(child => {
+      if (child.type !== 'JSXElement') {
+        return true;
+      }
+      if (child.openingElement.name.type !== 'JSXIdentifier') {
+        return true;
+      }
+      return child.openingElement.name.name !== 'ChartsOnAxisClickHandler';
+    });
+  });
+
+  // Remove nested import
+  root.find(j.ImportDeclaration, {
+    source: {
+      value: '@mui/x-charts/ChartsOnAxisClickHandler'
+    }
+  }).remove();
+
+  // Remove global import
+  root.find(j.ImportDeclaration).forEach(path => {
+    if (typeof path.node.source.value !== 'string') {
+      return;
+    }
+    if (!path.node.source.value.includes('@mui/x-charts')) {
+      return;
+    }
+    path.node.specifiers = path.node.specifiers?.filter(specifier => {
+      if (specifier.type !== 'ImportSpecifier') {
+        return true;
+      }
+      return specifier.imported.name !== 'ChartsOnAxisClickHandler';
+    });
+  });
+  return root.toSource(printOptions);
+}

package/v8.0.0/charts/rename-sparkline-colors-to-color/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions;
+  const root = j(file.source);
+  const componentNames = ['SparkLineChart'];
+  const props = {
+    colors: 'color'
+  };
+  const colorAttributes = root.find(j.JSXElement).filter(path => {
+    return componentNames.includes(path.value.openingElement.name.name);
+  }).find(j.JSXAttribute).filter(attribute => Object.keys(props).includes(attribute.node.name.name));
+  return colorAttributes.forEach(attribute => {
+    const colorsAttributeExpression = attribute.node.value?.type === 'JSXExpressionContainer' ? attribute.node.value.expression : null;
+    let colorAttributeExpression;
+    if (colorsAttributeExpression?.type === 'ArrayExpression') {
+      colorAttributeExpression = colorsAttributeExpression.elements[0];
+    } else if (colorsAttributeExpression?.type === 'Identifier') {
+      colorAttributeExpression = j.conditionalExpression(j.binaryExpression('===', j.unaryExpression('typeof', colorsAttributeExpression), j.literal('function')), j.arrowFunctionExpression([j.identifier('mode')], j.chainExpression(j.optionalMemberExpression(j.callExpression(colorsAttributeExpression, [j.identifier('mode')]), j.literal(0)))), colorsAttributeExpression);
+    } else {
+      // Don't know how to handle this case
+    }
+
+    // Only transform the value if we know how to handle it, otherwise rename the prop and add a comment
+    if (colorAttributeExpression) {
+      j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(props[attribute.node.name.name]), j.jsxExpressionContainer(colorAttributeExpression)));
+    } else {
+      j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(props[attribute.node.name.name]), attribute.node.value)).insertBefore(j.commentBlock(" mui-x-codemod: We renamed the `colors` prop to `color`, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. "));
+    }
+  }).toSource(printOptions);
+}

package/v8.0.0/charts/rename-unstable-use-series/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameImports = require("../../../util/renameImports");
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+    wrapColumn: 40
+  };
+  (0, _renameImports.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',
+        unstable_useHeatmapSeries: 'useHeatmapSeries'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}