@mui/codemod 9.0.0-alpha.1 → 9.0.0-beta.0

package/v9.0.0/system-props/removeSystemProps.js

@@ -0,0 +1,243 @@
+"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', 'Grid2', 'DialogContentText', 'TimelineContent', 'TimelineOppositeContent'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function removeSystemProps(file, api, options) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const deprecatedElements = [];
+  const typographyColorMatcher = {
+    matcher: (key, val) => key !== 'color' || val.value === 'inherit' || val.value?.includes('.') || val.value === 'divider' || val.value?.startsWith('#') || val.value?.match(/\(.*\)/)
+  };
+  const customReplacement = {
+    Typography: typographyColorMatcher,
+    // These components extend Typography
+    DialogContentText: typographyColorMatcher,
+    TimelineContent: typographyColorMatcher,
+    TimelineOppositeContent: typographyColorMatcher,
+    Link: {
+      // Same as Typography but keep color="inherit" as a Link component prop (controls underline behavior)
+      matcher: (key, val) => key !== 'color' || val.value?.includes('.') || val.value === 'divider' || val.value?.startsWith('#') || val.value?.match(/\(.*\)/)
+    }
+  };
+  const elementReplacement = {};
+  root.find(j.ImportDeclaration, decl => decl.source.value.includes('@mui')).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportSpecifier') {
+        const name = spec.imported.name;
+        if (components.includes(name)) {
+          deprecatedElements.push(spec.local.name);
+          if (customReplacement[name]) {
+            elementReplacement[spec.local.name] = customReplacement[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 => {
+    const sx = j.objectExpression([]);
+    const elementName = el.value?.openingElement?.name?.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[0]?.value?.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 => {
+      if (attr.type === 'JSXSpreadAttribute' || !attr.value || !systemProps.includes(attr?.name?.name)) {
+        return;
+      }
+      const key = attr?.name?.name;
+      const literal = 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 => attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr?.name?.name));
+      let finalSx;
+      if (!existingSxValue) {
+        finalSx = sx;
+      } else if (existingSxValue?.type === 'ObjectExpression') {
+        sx.properties.push(...existingSxValue.properties);
+        finalSx = sx;
+      } else if (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/v9.0.0/system-props/test-cases/system-props.actual.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _material = require("@mui/material");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _Link2 = _interopRequireDefault(require("@mui/material/Link"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _TimelineContent = _interopRequireDefault(require("@mui/lab/TimelineContent"));
+var _TimelineOppositeContent = _interopRequireDefault(require("@mui/lab/TimelineOppositeContent"));
+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`
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
+  container: true,
+  flexDirection: `column`
+});
+const sx = {
+  display: 'flex'
+};
+const ml = 2;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  color: "#fff",
+  mb: 5
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  color: "hsl(200 30% 30%)",
+  mb: 5
+});
+/*#__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)(_Link2.default, {
+      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
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  color: "inherit",
+  href: "https://mui.com/",
+  children: "Sitemark"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  color: "text.secondary",
+  variant: "body2",
+  href: "#",
+  children: "Features"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  color: "primary",
+  href: "#",
+  children: "Primary Link"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+  color: "text.secondary",
+  children: "Some content"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+  color: "inherit",
+  mt: 2,
+  children: "Inherited"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+  color: "primary",
+  children: "Primary"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimelineOppositeContent.default, {
+  color: "text.secondary",
+  children: "09:30 am"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimelineContent.default, {
+  color: "inherit",
+  children: "Eat"
+});
+
+// Dynamic color values (expression, not string literal)
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  color: dynamicColor,
+  mb: 2,
+  children: "Dynamic"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  color: linkColor,
+  href: "#",
+  children: "Dynamic Link"
+});

package/v9.0.0/system-props/test-cases/system-props.expected.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _material = require("@mui/material");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _Link2 = _interopRequireDefault(require("@mui/material/Link"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _TimelineContent = _interopRequireDefault(require("@mui/lab/TimelineContent"));
+var _TimelineOppositeContent = _interopRequireDefault(require("@mui/lab/TimelineOppositeContent"));
+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`
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
+  container: true,
+  sx: {
+    flexDirection: `column`
+  }
+});
+const sx = {
+  display: 'flex'
+};
+const ml = 2;
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    color: "#fff",
+    mb: 5
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    color: "hsl(200 30% 30%)",
+    mb: 5
+  }
+});
+/*#__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",
+  sx: [{
+    color: "inherit",
+    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)(_Link2.default, {
+      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]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  color: "inherit",
+  href: "https://mui.com/",
+  children: "Sitemark"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  variant: "body2",
+  href: "#",
+  sx: {
+    color: "text.secondary"
+  },
+  children: "Features"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  color: "primary",
+  href: "#",
+  children: "Primary Link"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+  sx: {
+    color: "text.secondary"
+  },
+  children: "Some content"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+  sx: {
+    color: "inherit",
+    mt: 2
+  },
+  children: "Inherited"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+  color: "primary",
+  children: "Primary"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimelineOppositeContent.default, {
+  sx: {
+    color: "text.secondary"
+  },
+  children: "09:30 am"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimelineContent.default, {
+  sx: {
+    color: "inherit"
+  },
+  children: "Eat"
+});
+
+// Dynamic color values (expression, not string literal)
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  color: dynamicColor,
+  sx: {
+    mb: 2
+  },
+  children: "Dynamic"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
+  color: linkColor,
+  href: "#",
+  children: "Dynamic Link"
+});