@mui/codemod 7.2.0 → 7.3.2

package/v7.0.0/theme-color-functions/test-cases/expected.js

@@ -0,0 +1,20 @@
+"use strict";
+
+const Value = styled('div')(({
+  theme
+}) => ({
+  width: '100%',
+  height: '100%',
+  lineHeight: '100%',
+  paddingRight: 8,
+  fontVariantNumeric: 'tabular-nums',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  '&.good': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.success.main, 0.3)
+  },
+  '&.bad': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.error.main, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/lighten-basic.actual.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.main, 0.2),
+  color: (0, _colorManipulator.lighten)(theme.palette.text.primary, 0.5),
+  border: `1px solid ${(0, _colorManipulator.lighten)(theme.palette.divider, 0.1)}`,
+  '&:hover': {
+    backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.dark, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/lighten-basic.expected.js

@@ -0,0 +1,12 @@
+"use strict";
+
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.lighten(theme.palette.primary.main, 0.2),
+  color: theme.lighten(theme.palette.text.primary, 0.5),
+  border: `1px solid ${theme.lighten(theme.palette.divider, 0.1)}`,
+  '&:hover': {
+    backgroundColor: theme.lighten(theme.palette.primary.dark, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mixed-functions.actual.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const ComplexComponent = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.1),
+  border: `2px solid ${(0, _colorManipulator.lighten)(theme.palette.primary.main, 0.5)}`,
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.2)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.2),
+    borderColor: (0, _colorManipulator.darken)(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: (0, _colorManipulator.darken)(theme.palette.primary.dark, 0.1),
+    color: (0, _colorManipulator.lighten)(theme.palette.primary.contrastText, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mixed-functions.expected.js

@@ -0,0 +1,16 @@
+"use strict";
+
+const ComplexComponent = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.1),
+  border: `2px solid ${theme.lighten(theme.palette.primary.main, 0.5)}`,
+  '&:hover': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.2),
+    borderColor: theme.darken(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.dark, 0.1),
+    color: theme.lighten(theme.palette.primary.contrastText, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mixed-imports.actual.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _styles = require("@mui/material/styles");
+const Component = exports.Component = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: (0, _styles.lighten)(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: (0, _styles.darken)(theme.palette.primary.main, 0.2)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mixed-imports.expected.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+var _styles = require("@mui/material/styles");
+const Component = exports.Component = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: theme.lighten(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.main, 0.2)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mui-material-styles.actual.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+var _styles = require("@mui/material/styles");
+const Component = exports.Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.5)` : (0, _styles.alpha)(theme.palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: (0, _styles.lighten)(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: (0, _styles.darken)(theme.palette.primary.main, 0.2)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mui-material-styles.expected.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+const Component = exports.Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: theme.lighten(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.main, 0.2)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/no-import.actual.js

@@ -0,0 +1,11 @@
+"use strict";
+
+// This file should not be transformed because it doesn't import from @mui/system/colorManipulator
+
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: alpha(theme.palette.primary.main, 0.1),
+  color: lighten(theme.palette.text.primary, 0.5),
+  border: `1px solid ${darken(theme.palette.divider, 0.2)}`
+}));

package/v7.0.0/theme-color-functions/test-cases/no-import.expected.js

@@ -0,0 +1,11 @@
+"use strict";
+
+// This file should not be transformed because it doesn't import from @mui/system/colorManipulator
+
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: alpha(theme.palette.primary.main, 0.1),
+  color: lighten(theme.palette.text.primary, 0.5),
+  border: `1px solid ${darken(theme.palette.divider, 0.2)}`
+}));

package/v7.0.0/theme-color-functions/test-cases/opacity-calc.actual.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItemContent = void 0;
+var _colorManipulator = require("@mui/system/colorManipulator");
+const TreeItemContent = exports.TreeItemContent = styled('div', {
+  name: 'MuiTreeItem',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
+}) < {
+  status: UseTreeItemStatus
+} > (({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
+  borderRadius: theme.shape.borderRadius,
+  width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'transparent',
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  '&[data-disabled]': {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
+    backgroundColor: 'transparent'
+  },
+  '&[data-focused]': {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  '&[data-selected]': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      }
+    }
+  },
+  '&[data-selected][data-focused]': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/opacity-calc.expected.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItemContent = void 0;
+const TreeItemContent = exports.TreeItemContent = styled('div', {
+  name: 'MuiTreeItem',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
+}) < {
+  status: UseTreeItemStatus
+} > (({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
+  borderRadius: theme.shape.borderRadius,
+  width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'transparent',
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  '&[data-disabled]': {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
+    backgroundColor: 'transparent'
+  },
+  '&[data-focused]': {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  '&[data-selected]': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
+    '&:hover': {
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
+      }
+    }
+  },
+  '&[data-selected][data-focused]': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/opacity-var.actual.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DigitalClockItem = void 0;
+var _colorManipulator = require("@mui/system/colorManipulator");
+const DigitalClockItem = exports.DigitalClockItem = styled(MenuItem, {
+  name: 'MuiDigitalClock',
+  slot: 'Item',
+  shouldForwardProp: prop => prop !== 'itemValue' && prop !== 'formattedValue',
+  overridesResolver: (props, styles) => styles.item
+})(({
+  theme
+}) => ({
+  padding: '8px 16px',
+  margin: '2px 4px',
+  '&:first-of-type': {
+    marginTop: 4
+  },
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+  },
+  '&.Mui-selected': {
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    color: (theme.vars || theme).palette.primary.contrastText,
+    '&:focus-visible, &:hover': {
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    }
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity)
+  }
+}));
+function transform(t) {
+  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _colorManipulator.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
+}

package/v7.0.0/theme-color-functions/test-cases/opacity-var.expected.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DigitalClockItem = void 0;
+const DigitalClockItem = exports.DigitalClockItem = styled(MenuItem, {
+  name: 'MuiDigitalClock',
+  slot: 'Item',
+  shouldForwardProp: prop => prop !== 'itemValue' && prop !== 'formattedValue',
+  overridesResolver: (props, styles) => styles.item
+})(({
+  theme
+}) => ({
+  padding: '8px 16px',
+  margin: '2px 4px',
+  '&:first-of-type': {
+    marginTop: 4
+  },
+  '&:hover': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.hoverOpacity)
+  },
+  '&.Mui-selected': {
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    color: (theme.vars || theme).palette.primary.contrastText,
+    '&:focus-visible, &:hover': {
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    }
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.focusOpacity)
+  }
+}));
+function transform(t) {
+  const backgroundBackdrop = t.alpha((t.vars || t).palette.background.default, (t.vars || t).palette.action.disabledOpacity);
+}

package/v7.0.0/theme-color-functions/theme-color-functions.js

@@ -0,0 +1,142 @@
+"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) {
+  if (file.path?.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  // Check if the file imports alpha, lighten, or darken from @mui/system/colorManipulator or @mui/material/styles
+  let hasAlphaImport = false;
+  let hasLightenImport = false;
+  let hasDarkenImport = false;
+  const importSources = ['@mui/system/colorManipulator', '@mui/material/styles', '@mui/material'];
+  importSources.forEach(source => {
+    root.find(j.ImportDeclaration, {
+      source: {
+        value: source
+      }
+    }).forEach(path => {
+      path.node.specifiers.forEach(spec => {
+        if (spec.type === 'ImportSpecifier') {
+          if (spec.imported.name === 'alpha') {
+            hasAlphaImport = true;
+          }
+          if (spec.imported.name === 'lighten') {
+            hasLightenImport = true;
+          }
+          if (spec.imported.name === 'darken') {
+            hasDarkenImport = true;
+          }
+        }
+      });
+    });
+  });
+
+  // Skip transformation if none of the functions are imported
+  if (!hasAlphaImport && !hasLightenImport && !hasDarkenImport) {
+    return file.source;
+  }
+  function replaceThemeWithVars(node, objectName) {
+    if (node.type === 'MemberExpression') {
+      let deepnode = node;
+      while (deepnode.object && deepnode.object.type === 'MemberExpression') {
+        deepnode = deepnode.object;
+      }
+      deepnode.object = j.logicalExpression('||', j.memberExpression(j.identifier(objectName), j.identifier('vars')), j.identifier(objectName));
+    }
+    if (node.type === 'BinaryExpression') {
+      return j.templateLiteral([j.templateElement({
+        raw: '',
+        cooked: ''
+      }, false), j.templateElement({
+        raw: ' + ',
+        cooked: ' + '
+      }, false), j.templateElement({
+        raw: '',
+        cooked: ''
+      }, true)], [replaceThemeWithVars(node.left, objectName), replaceThemeWithVars(node.right, objectName)]);
+    }
+    return node;
+  }
+
+  // Transform alpha function
+  if (hasAlphaImport) {
+    root.find(j.ConditionalExpression).forEach(path => {
+      if (path.node.test.type === 'MemberExpression') {
+        if (path.node.test.property.name === 'vars') {
+          if (path.node.alternate.type === 'CallExpression' && path.node.alternate.callee.name === 'alpha' && path.node.consequent.type === 'TemplateLiteral') {
+            path.replace(j.callExpression(j.memberExpression(j.identifier(path.node.test.object.name), j.identifier('alpha')), [replaceThemeWithVars(path.node.alternate.arguments[0], path.node.test.object.name), replaceThemeWithVars(path.node.alternate.arguments[1], path.node.test.object.name)]));
+          }
+        }
+      }
+    });
+    root.find(j.CallExpression, {
+      callee: {
+        name: 'alpha'
+      }
+    }).forEach(path => {
+      path.replace(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('alpha')), path.node.arguments));
+    });
+  }
+
+  // Transform lighten function
+  if (hasLightenImport) {
+    root.find(j.CallExpression, {
+      callee: {
+        name: 'lighten'
+      }
+    }).forEach(path => {
+      path.replace(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('lighten')), path.node.arguments));
+    });
+  }
+
+  // Transform darken function
+  if (hasDarkenImport) {
+    root.find(j.CallExpression, {
+      callee: {
+        name: 'darken'
+      }
+    }).forEach(path => {
+      path.replace(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('darken')), path.node.arguments));
+    });
+  }
+
+  // Remove transformed functions from import statements
+  importSources.forEach(source => {
+    root.find(j.ImportDeclaration, {
+      source: {
+        value: source
+      }
+    }).forEach(path => {
+      const specifiers = path.node.specifiers.filter(spec => {
+        if (spec.type === 'ImportSpecifier') {
+          const name = spec.imported.name;
+          // Remove if it was transformed
+          if (name === 'alpha' && hasAlphaImport || name === 'lighten' && hasLightenImport || name === 'darken' && hasDarkenImport) {
+            return false;
+          }
+        }
+        return true;
+      });
+      if (specifiers.length === 0) {
+        // Remove the import entirely if no specifiers left
+        j(path).remove();
+      } else {
+        // Update the import with remaining specifiers
+        path.node.specifiers = specifiers;
+      }
+    });
+  });
+  return root.toSource(printOptions);
+}