@mui/x-codemod 8.0.0-alpha.1 → 8.0.0-alpha.3

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
 ```
 
@@ -65,23 +66,29 @@ A combination of all important transformers for migrating v7 to v8.
 It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts).
 To run codemods for a specific package, refer to the respective section.
 
+<!-- #default-branch-switch -->
+
 ```bash
-npx @mui/x-codemod@latest v8.0.0/preset-safe <path|folder>
+npx @mui/x-codemod@next v8.0.0/preset-safe <path|folder>
 ```
 
 The corresponding sub-sections are listed below
 
 - [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v800)
 - [`preset-safe-for-charts`](#preset-safe-for-charts-v800)
+- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v800)
+- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v800)
 
 ### Tree View codemods
 
-#### `preset-safe` for tree view v8.0.0
+#### `preset-safe` for Tree View v8.0.0
 
-The `preset-safe` codemods for tree view.
+The `preset-safe` codemods for Tree View.
+
+<!-- #default-branch-switch -->
 
 ```bash
-npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe <path|folder>
+npx @mui/x-codemod@next v8.0.0/tree-view/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -100,13 +107,13 @@ Renames the Tree View component to Simple Tree View
 -import { TreeView } from '@mui/x-tree-view/TreeView';
 +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 
-   return (
--    <TreeView>
-+    <SimpleTreeView>
-       <TreeItem itemId="1" label="First item" />
--    </TreeView>
-+    </SimpleTreeView>
-   );
+ return (
+-  <TreeView>
++  <SimpleTreeView>
+     <TreeItem itemId="1" label="First item" />
+-  </TreeView>
++  </SimpleTreeView>
+ );
 ```
 
 #### `rename-tree-item-2`
@@ -123,28 +130,31 @@ Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or u
 
 ### Charts codemods
 
-#### `preset-safe` for charts v8.0.0
+#### `preset-safe` for Charts v8.0.0
 
-The `preset-safe` codemods for charts.
+The `preset-safe` codemods for Charts.
+
+<!-- #default-branch-switch -->
 
 ```bash
-npx @mui/x-codemod@latest v8.0.0/charts/preset-safe <path|folder>
+npx @mui/x-codemod@next v8.0.0/charts/preset-safe <path|folder>
 ```
 
 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`
 
 Renames legend props to the corresponding slotProps.
 
 ```diff
-  <LineChart
--   legend={{ hiden: true}}
-+   slotProps={{ legend: { hiden: true} }}
-  />
+ <LineChart
+-  legend={{ hiden: true}}
++  slotProps={{ legend: { hiden: true} }}
+ />
 ```
 
 #### `rename-responsive-chart-container`
@@ -152,14 +162,14 @@ Renames legend props to the corresponding slotProps.
 Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8.
 
 ```diff
-- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
-+ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++import { ChartContainer } from '@mui/x-charts/ChartContainer';
 
-- <ResponsiveChartContainer>
-+ <ChartContainer>
+-<ResponsiveChartContainer>
++<ChartContainer>
    <BarPlot />
-- </ResponsiveChartContainer>
-+ </ChartContainer>
+-</ResponsiveChartContainer>
++</ChartContainer>
 ```
 
 :::warning
@@ -168,12 +178,101 @@ Verify the git diff to remove the duplicate.
 
 ```diff
  import { ChartContainer } from '@mui/x-charts/ChartContainer';
-- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
-+ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++import { ChartContainer } from '@mui/x-charts/ChartContainer';
 ```
 
 :::
 
+#### `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
++  }}
+ />
+```
+
+### Data Grid codemods
+
+#### `preset-safe` for Data Grid v8.0.0
+
+The `preset-safe` codemods for Data Grid.
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`remove-stabilized-v8-experimentalFeatures`](#remove-stabilized-v8-experimentalFeatures)
+
+#### `remove-stabilized-v8-experimentalFeatures`
+
+Remove feature flags for stabilized `experimentalFeatures`.
+
+```diff
+ <DataGridPremium
+-  experimentalFeatures={{
+-    ariaV8: true,
+-  }}
+ />
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
+```
+
+### Pickers codemods
+
+#### `preset-safe` for Pickers v8.0.0
+
+The `preset-safe` codemods for Pickers.
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/pickers/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`rename-and-move-field-value-type`](#rename-and-move-field-value-type)
+
+#### `rename-and-move-field-value-type`
+
+Renames `FieldValueType` to `PickerValueType`.
+
+```diff
+-import { FieldValueType } from '@mui/x-date-pickers';
++import { PickerValueType } from '@mui/x-date-pickers';
+
+ interface MyComponentProps {
+-  valueType: FieldValueType;
++  valueType: PickerValueType;
+   foo: string;
+   bar: number;
+ }
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/pickers/rename-and-move-field-value-type <path>
+```
+
 ## v7.0.0
 
 ### 🚀 `preset-safe` for v7.0.0
@@ -195,9 +294,9 @@ The corresponding sub-sections are listed below
 
 ### Pickers codemods
 
-#### `preset-safe` for pickers v7.0.0
+#### `preset-safe` for Pickers v7.0.0
 
-The `preset-safe` codemods for pickers.
+The `preset-safe` codemods for Pickers.
 
 ```bash
 npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe <path|folder>
@@ -374,13 +473,13 @@ Renames the Tree View component to Simple Tree View
 -import { TreeView } from '@mui/x-tree-view/TreeView';
 +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 
-   return (
--    <TreeView>
-+    <SimpleTreeView>
-       <TreeItem itemId="1" label="First item" />
--    </TreeView>
-+    </SimpleTreeView>
-   );
+ return (
+-  <TreeView>
++  <SimpleTreeView>
+     <TreeItem itemId="1" label="First item" />
+-  </TreeView>
++  </SimpleTreeView>
+ );
 ```
 
 #### `rename-use-tree-item`
@@ -496,9 +595,9 @@ The corresponding sub-sections are listed below
 
 ### Pickers codemods
 
-#### `preset-safe` for pickers v6.0.0
+#### `preset-safe` for Pickers v6.0.0
 
-The `preset-safe` codemods for pickers.
+The `preset-safe` codemods for Pickers.
 
 ```bash
 npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe <path|folder>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.3",
   "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.1"
+    "@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/data-grid/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 _removeStabilizedExperimentalFeatures = _interopRequireDefault(require("../remove-stabilized-experimentalFeatures"));
+function transformer(file, api, options) {
+  file.source = (0, _removeStabilizedExperimentalFeatures.default)(file, api, options);
+  return file.source;
+}

package/v8.0.0/data-grid/remove-stabilized-experimentalFeatures/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _removeObjectProperty = _interopRequireDefault(require("../../../util/removeObjectProperty"));
+const componentsNames = ['DataGridPremium'];
+const propName = 'experimentalFeatures';
+const propKeys = ['ariaV8'];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  propKeys.forEach(propKey => {
+    (0, _removeObjectProperty.default)({
+      root,
+      j,
+      propName,
+      componentsNames,
+      propKey
+    });
+  });
+  return root.toSource(printOptions);
+}

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

@@ -6,9 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = transformer;
 var _presetSafe = _interopRequireDefault(require("../tree-view/preset-safe"));
-var _presetSafe2 = _interopRequireDefault(require("../charts/preset-safe"));
+var _presetSafe2 = _interopRequireDefault(require("../pickers/preset-safe"));
+var _presetSafe3 = _interopRequireDefault(require("../charts/preset-safe"));
+var _presetSafe4 = _interopRequireDefault(require("../data-grid/preset-safe"));
 function transformer(file, api, options) {
   file.source = (0, _presetSafe.default)(file, api, options);
   file.source = (0, _presetSafe2.default)(file, api, options);
+  file.source = (0, _presetSafe3.default)(file, api, options);
+  file.source = (0, _presetSafe4.default)(file, api, options);
   return file.source;
 }