@mui/codemod 6.0.0-alpha.8 → 6.0.0-alpha.9

package/node/v6.0.0/sx-prop/test-cases/sx-dynamic.expected.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    mb: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 2,
+    backgroundColor: theme.palette.grey[900],
+    borderBottom: `1px solid ${'grey.800'}`,
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.grey[100],
+      borderBottom: `1px solid ${'grey.200'}`
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  sx: [theme => ({
+    p: 2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4
+  }), tier.title === 'Professional' && (theme => ({
+    border: 'none',
+    boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
+    background: 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))',
+    ...theme.applyStyles("light", {
+      boxShadow: `0 8px 12px hsla(210, 98%, 42%, 0.2)`
+    })
+  }))]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  component: Button,
+  onClick: () => handleItemClick(index),
+  sx: [theme => ({
+    p: 3,
+    height: 'fit-content',
+    width: '100%',
+    background: 'none',
+    '&:hover': {
+      background: 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
+      borderColor: 'primary.dark',
+      boxShadow: '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
+      ...theme.applyStyles("light", {
+        background: 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)',
+        borderColor: 'primary.light',
+        boxShadow: '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
+      })
+    }
+  }), selectedItemIndex === index && (theme => ({
+    backgroundColor: 'action.selected',
+    borderColor: 'primary.dark',
+    ...theme.applyStyles("light", {
+      borderColor: 'primary.light'
+    })
+  }))]
+}, index);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CreditCardRoundedIcon, {
+  fontSize: "small",
+  sx: [theme => ({
+    color: 'grey.600',
+    ...theme.applyStyles("light", {
+      color: 'grey.400'
+    })
+  }), paymentType === 'creditCard' && {
+    color: 'primary.main'
+  }]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+  edge: "start",
+  color: "inherit",
+  "aria-label": "open drawer",
+  onClick: toggleDrawer,
+  sx: [{
+    marginRight: '36px'
+  }, open && {
+    display: 'none'
+  }],
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuIcon, {})
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  sx: [selectedItemIndex === index && (theme => ({
+    backgroundColor: 'action.selected',
+    borderColor: 'primary.dark',
+    ...theme.applyStyles("light", {
+      borderColor: 'primary.light'
+    })
+  })), theme => ({
+    color: 'grey.600',
+    ...theme.applyStyles("light", {
+      color: 'grey.400'
+    })
+  }), paymentType === 'creditCard' && {
+    color: 'primary.main'
+  }, {
+    marginRight: '36px'
+  }, open && {
+    display: 'none'
+  }]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-dynamic2.actual.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Accordion, {
+  expanded: expanded,
+  onChange: handleExpansion,
+  slotProps: {
+    transition: {
+      timeout: 400
+    }
+  },
+  sx: {
+    '& .MuiAccordion-region': {
+      height: expanded ? 'auto' : 0
+    },
+    '& .MuiAccordionDetails-root': {
+      display: expanded ? 'block' : 'none'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    display: 'flex',
+    flexDirection: {
+      xs: 'column-reverse',
+      sm: 'row'
+    },
+    justifyContent: activeStep !== 0 ? 'space-between' : 'flex-end',
+    alignItems: 'end',
+    flexGrow: 1,
+    gap: 1,
+    pb: {
+      xs: 12,
+      sm: 0
+    },
+    mt: {
+      xs: 2,
+      sm: 0
+    },
+    mb: '60px'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    display: 'flex',
+    alignItems: 'baseline',
+    color: tier.title === 'Professional' ? 'grey.50' : undefined
+  }
+});

package/node/v6.0.0/sx-prop/test-cases/sx-dynamic2.expected.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Accordion, {
+  expanded: expanded,
+  onChange: handleExpansion,
+  slotProps: {
+    transition: {
+      timeout: 400
+    }
+  },
+  sx: [expanded ? {
+    '& .MuiAccordion-region': {
+      height: 'auto'
+    }
+  } : {
+    '& .MuiAccordion-region': {
+      height: 0
+    }
+  }, expanded ? {
+    '& .MuiAccordionDetails-root': {
+      display: 'block'
+    }
+  } : {
+    '& .MuiAccordionDetails-root': {
+      display: 'none'
+    }
+  }]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: [{
+    display: 'flex',
+    flexDirection: {
+      xs: 'column-reverse',
+      sm: 'row'
+    },
+    alignItems: 'end',
+    flexGrow: 1,
+    gap: 1,
+    pb: {
+      xs: 12,
+      sm: 0
+    },
+    mt: {
+      xs: 2,
+      sm: 0
+    },
+    mb: '60px'
+  }, activeStep !== 0 ? {
+    justifyContent: 'space-between'
+  } : {
+    justifyContent: 'flex-end'
+  }]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: [{
+    display: 'flex',
+    alignItems: 'baseline'
+  }, tier.title === 'Professional' ? {
+    color: 'grey.50'
+  } : {
+    color: null
+  }]
+});

package/node/v6.0.0/system-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _removeSystemProps.default;
+  }
+});
+var _removeSystemProps = _interopRequireDefault(require("./removeSystemProps"));

package/node/v6.0.0/system-props/removeSystemProps.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = removeSystemProps;
+// from `packages/mui-system/src/styleFunctionSx/defaultSxConfig.js`
+const defaultSxConfig = {
+  // borders
+  border: {},
+  borderTop: {},
+  borderRight: {},
+  borderBottom: {},
+  borderLeft: {},
+  borderColor: {},
+  borderTopColor: {},
+  borderRightColor: {},
+  borderBottomColor: {},
+  borderLeftColor: {},
+  outline: {},
+  outlineColor: {},
+  borderRadius: {},
+  color: {},
+  bgcolor: {},
+  backgroundColor: {},
+  p: {},
+  pt: {},
+  pr: {},
+  pb: {},
+  pl: {},
+  px: {},
+  py: {},
+  padding: {},
+  paddingTop: {},
+  paddingRight: {},
+  paddingBottom: {},
+  paddingLeft: {},
+  paddingX: {},
+  paddingY: {},
+  paddingInline: {},
+  paddingInlineStart: {},
+  paddingInlineEnd: {},
+  paddingBlock: {},
+  paddingBlockStart: {},
+  paddingBlockEnd: {},
+  m: {},
+  mt: {},
+  mr: {},
+  mb: {},
+  ml: {},
+  mx: {},
+  my: {},
+  margin: {},
+  marginTop: {},
+  marginRight: {},
+  marginBottom: {},
+  marginLeft: {},
+  marginX: {},
+  marginY: {},
+  marginInline: {},
+  marginInlineStart: {},
+  marginInlineEnd: {},
+  marginBlock: {},
+  marginBlockStart: {},
+  marginBlockEnd: {},
+  // display
+  displayPrint: {},
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+  // grid
+  gap: {},
+  rowGap: {},
+  columnGap: {},
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+  // positions
+  position: {},
+  zIndex: {},
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+  // shadows
+  boxShadow: {},
+  // sizing
+  width: {},
+  maxWidth: {},
+  minWidth: {},
+  height: {},
+  maxHeight: {},
+  minHeight: {},
+  boxSizing: {},
+  // typography
+  font: {},
+  fontFamily: {},
+  fontSize: {},
+  fontStyle: {},
+  fontWeight: {},
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {}
+};
+const systemProps = Object.keys(defaultSxConfig);
+const components = ['Box', 'Stack', 'Typography', 'Link', 'Grid'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function removeSystemProps(file, api, options) {
+  var _file$path, _file$path2;
+  if ((_file$path = file.path) != null && _file$path.endsWith('.json') || (_file$path2 = file.path) != null && _file$path2.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const deprecatedElements = [];
+  const customReplacement = {
+    Typography: {
+      matcher: (key, val) => {
+        var _val$value;
+        return key !== 'color' || ((_val$value = val.value) == null ? void 0 : _val$value.includes('.')) && val.value !== 'inherit' || val.value === 'divider';
+      }
+    },
+    Link: {
+      matcher: key => key !== 'color'
+    }
+  };
+  const elementReplacement = {};
+  root.find(j.ImportDeclaration, decl => decl.source.value.includes('@mui')).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportSpecifier') {
+        if (components.includes(spec.imported.name)) {
+          deprecatedElements.push(spec.local.name);
+        }
+      }
+      if (spec.type === 'ImportDefaultSpecifier') {
+        const name = decl.node.source.value.split('/').pop();
+        if (components.includes(name)) {
+          deprecatedElements.push(spec.local.name);
+          if (customReplacement[name]) {
+            elementReplacement[spec.local.name] = customReplacement[name];
+          }
+        }
+      }
+    });
+  });
+  root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: name => {
+          return deprecatedElements.includes(name);
+        }
+      }
+    }
+  }).forEach(el => {
+    var _el$value, _sxNodesArray$;
+    const sx = j.objectExpression([]);
+    const elementName = (_el$value = el.value) == null || (_el$value = _el$value.openingElement) == null || (_el$value = _el$value.name) == null ? void 0 : _el$value.name;
+    const sxNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name === 'sx');
+    const sxNodesArray = sxNodes.nodes() || [];
+    const existingSxValue = (_sxNodesArray$ = sxNodesArray[0]) == null || (_sxNodesArray$ = _sxNodesArray$.value) == null ? void 0 : _sxNodesArray$.expression;
+    let spreadElement = null;
+    el.node.openingElement.attributes.forEach(attr => {
+      if (attr.type === 'JSXSpreadAttribute') {
+        spreadElement = attr;
+      }
+    });
+    const attrToPrune = ['sx'];
+    el.node.openingElement.attributes.forEach(attr => {
+      var _attr$name, _attr$name2;
+      if (attr.type === 'JSXSpreadAttribute' || !attr.value || !systemProps.includes(attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name)) {
+        return;
+      }
+      const key = attr == null || (_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name;
+      const literal = attr == null ? void 0 : attr.value;
+      const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal;
+      const shouldPrune = !elementReplacement[elementName] || elementReplacement[elementName].matcher(key, val);
+      if (key && val) {
+        if (shouldPrune) {
+          sx.properties.push(j.property('init', j.identifier(key), val));
+          attrToPrune.push(key);
+        }
+      }
+    });
+    if (sx.properties.length) {
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
+        var _attr$name3;
+        return attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr == null || (_attr$name3 = attr.name) == null ? void 0 : _attr$name3.name);
+      });
+      let finalSx;
+      if (!existingSxValue) {
+        finalSx = sx;
+      } else if ((existingSxValue == null ? void 0 : existingSxValue.type) === 'ObjectExpression') {
+        sx.properties.push(...existingSxValue.properties);
+        finalSx = sx;
+      } else if ((existingSxValue == null ? void 0 : existingSxValue.type) === 'ArrayExpression') {
+        existingSxValue.elements = [sx, ...existingSxValue.elements];
+        finalSx = existingSxValue;
+      } else {
+        finalSx = j.arrayExpression([sx, existingSxValue.type === 'Identifier' ? j.spreadElement(j.conditionalExpression(j.callExpression(j.memberExpression(j.identifier('Array'), j.identifier('isArray')), [existingSxValue]), existingSxValue, j.arrayExpression([existingSxValue]))) : existingSxValue]);
+      }
+      if (spreadElement && spreadElement.argument.type === 'Identifier') {
+        if (finalSx.type === 'ObjectExpression') {
+          const propSx = j.memberExpression(spreadElement.argument, j.identifier('sx'));
+          finalSx = j.arrayExpression([finalSx, j.spreadElement(j.conditionalExpression(j.callExpression(j.memberExpression(j.identifier('Array'), j.identifier('isArray')), [propSx]), propSx, j.arrayExpression([propSx])))]);
+        } else if (finalSx.type === 'ArrayExpression') {
+          finalSx.elements.push(j.memberExpression(spreadElement.argument, j.identifier('sx')));
+        }
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('sx'), j.jsxExpressionContainer(finalSx)));
+    }
+  });
+  return root.toSource(printOptions);
+}

package/node/v6.0.0/system-props/test-cases/system-props.actual.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _material = require("@mui/material");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _Link;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  typography: "body1"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  color: "palette.main",
+  sx: {
+    display: 'block'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  container: true,
+  flexDirection: `column`
+});
+const sx = {
+  display: 'flex'
+};
+const ml = 2;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "primary.main",
+  ml: ml,
+  sx: sx
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "divider",
+  ml: ml,
+  sx: sx
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "inherit",
+  ml: ml,
+  sx: sx
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  fontSize: "xl4",
+  lineHeight: 1,
+  startDecorator: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    fontSize: "lg",
+    textColor: "text.secondary",
+    children: "$"
+  }),
+  sx: {
+    alignItems: 'flex-start'
+  },
+  children: "25"
+});
+function Copyright(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    variant: "body2",
+    color: "text.secondary",
+    align: "center",
+    ...props,
+    children: ['Copyright © ', _Link || (_Link = /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+      color: "inherit",
+      href: "https://mui.com/",
+      children: "Your Website"
+    })), ' ', new Date().getFullYear(), '.']
+  });
+}
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
+  flex: "1",
+  sx: [...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  typography: "body1",
+  sx: foo.bar ? {
+    opacity: 0
+  } : sx
+});

package/node/v6.0.0/system-props/test-cases/system-props.expected.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _material = require("@mui/material");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _Link;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: {
+    typography: "body1"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: {
+    color: "palette.main",
+    display: 'block'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  container: true,
+  sx: {
+    flexDirection: `column`
+  }
+});
+const sx = {
+  display: 'flex'
+};
+const ml = 2;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  sx: [{
+    color: "primary.main",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  sx: [{
+    color: "divider",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  variant: "body1",
+  color: "inherit",
+  sx: [{
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  startDecorator: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    textColor: "text.secondary",
+    sx: {
+      fontSize: "lg"
+    },
+    children: "$"
+  }),
+  sx: {
+    fontSize: "xl4",
+    lineHeight: 1,
+    alignItems: 'flex-start'
+  },
+  children: "25"
+});
+function Copyright(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    variant: "body2",
+    align: "center",
+    ...props,
+    sx: [{
+      color: "text.secondary"
+    }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])],
+    children: ['Copyright © ', _Link || (_Link = /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+      color: "inherit",
+      href: "https://mui.com/",
+      children: "Your Website"
+    })), ' ', new Date().getFullYear(), '.']
+  });
+}
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
+  sx: [{
+    flex: "1"
+  }, ...(Array.isArray(sx) ? sx : [sx])]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: [{
+    typography: "body1"
+  }, foo.bar ? {
+    opacity: 0
+  } : sx]
+});

package/node/v6.0.0/theme-v6/theme-v6.js

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = styledV6;
+exports.default = themeV6;
 var _getReturnExpression = _interopRequireDefault(require("../../util/getReturnExpression"));
 var _migrateToVariants = _interopRequireDefault(require("../../util/migrateToVariants"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-function styledV6(file, api, options) {
+function themeV6(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-alpha.9",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,9 +24,9 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/runtime": "^7.24.5",
-    "@babel/traverse": "^7.24.5",
+    "@babel/core": "^7.24.6",
+    "@babel/runtime": "^7.24.6",
+    "@babel/traverse": "^7.24.6",
     "jscodeshift": "^0.15.2",
     "jscodeshift-add-imports": "^1.0.10",
     "postcss": "^8.4.38",