@mui/x-codemod 8.0.0-alpha.0 → 8.0.0-alpha.2

package/README.md

@@ -39,9 +39,10 @@ Examples:
 To pass more options directly to jscodeshift, use `--jscodeshift=...`. For example:
 
 ```bash
-// single option
+# single option
 npx @mui/x-codemod@next --jscodeshift=--run-in-band
-// multiple options
+
+# multiple options
 npx @mui/x-codemod@next --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
 ```
 
@@ -135,6 +136,7 @@ The list includes these transformers
 
 - [`rename-legend-to-slots-legend`](#rename-legend-to-slots-legend)
 - [`rename-responsive-chart-container`](#rename-responsive-chart-container)
+- [`rename-label-and-tick-font-size`](#rename-label-and-tick-font-size)
 
 #### `rename-legend-to-slots-legend`
 
@@ -174,6 +176,23 @@ Verify the git diff to remove the duplicate.
 
 :::
 
+#### `rename-label-and-tick-font-size`
+
+Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle` prop.
+
+```diff
+  <ChartsXAxis
+-   labelFontSize={18}
++   labelStyle={{
++     fontSize: 18
++   }}
+-   tickFontSize={20}
++   tickStyle={{
++     fontSize: 20
++   }}
+  />
+```
+
 ## v7.0.0
 
 ### 🚀 `preset-safe` for v7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,7 +30,7 @@
     "@babel/traverse": "^7.25.9",
     "jscodeshift": "17.1.1",
     "yargs": "^17.7.2",
-    "@mui/x-internals": "8.0.0-alpha.0"
+    "@mui/x-internals": "8.0.0-alpha.2"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",

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

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = transformer;
 var _renameLegendToSlotsLegend = _interopRequireDefault(require("../rename-legend-to-slots-legend"));
 var _renameResponsiveChartContainer = _interopRequireDefault(require("../rename-responsive-chart-container"));
+var _renameLabelAndTickFontSize = _interopRequireDefault(require("../rename-label-and-tick-font-size"));
 function transformer(file, api, options) {
   file.source = (0, _renameLegendToSlotsLegend.default)(file, api, options);
   file.source = (0, _renameResponsiveChartContainer.default)(file, api, options);
+  file.source = (0, _renameLabelAndTickFontSize.default)(file, api, options);
   return file.source;
 }

package/v8.0.0/charts/rename-label-and-tick-font-size/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+/**
+ * @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);
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    return typeof node.source.value === 'string' && node.source.value.startsWith('@mui/x-charts');
+  }).forEach(path => {
+    path.node.specifiers?.forEach(node => {
+      root.findJSXElements(node.local?.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        ['label', 'tick'].forEach(attributeName => {
+          const attributeValue = elementPath.node.openingElement.attributes?.find(elementNode => elementNode.type === 'JSXAttribute' && elementNode.name.name === `${attributeName}FontSize`);
+          if (!attributeValue) {
+            return;
+          }
+          const attributeStyle = elementPath.node.openingElement.attributes?.find(elementNode => elementNode.type === 'JSXAttribute' && elementNode.name.name === `${attributeName}Style`);
+
+          // @ts-ignore receives an object.
+          const styleValue = attributeStyle?.value.expression.properties.find(prop => prop.key.name === 'fontSize');
+          if (attributeStyle === null) {
+            // We create a new "style" object
+            elementPath.node.openingElement.attributes?.push(j.jsxAttribute(j.jsxIdentifier(`${attributeName}Style`), j.jsxExpressionContainer(j.objectExpression([j.objectProperty(j.identifier('fontSize'),
+            // @ts-ignore receives an object.
+            attributeValue.value.expression)]))));
+          } else {
+            (0, _addComponentsSlots.transformNestedProp)(elementPath, `${attributeName}Style`, 'fontSize',
+            // @ts-ignore receives an object.
+            styleValue?.value ?? attributeValue.value.expression, j);
+          }
+        });
+
+        // Remove the legend prop
+        j(elementPath).find(j.JSXAttribute).filter(a => a.value.name.name === 'labelFontSize' || a.value.name.name === 'tickFontSize').forEach(pathToRemove => {
+          j(pathToRemove).remove();
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameAndMoveFieldValueType = _interopRequireDefault(require("../rename-and-move-field-value-type"));
+function transformer(file, api, options) {
+  file.source = (0, _renameAndMoveFieldValueType.default)(file, api, options);
+  return file.source;
+}

package/v8.0.0/pickers/rename-and-move-field-value-type/index.js

@@ -0,0 +1,27 @@
+"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
+  };
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-date-pickers', '@mui/x-date-pickers-pro'],
+    imports: [{
+      oldEndpoint: 'models',
+      importsMapping: {
+        FieldValueType: 'PickerValueType'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}