@mui/codemod 6.0.0-dev.240424162023-9968b4889d → 6.0.0

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

@@ -0,0 +1,233 @@
+"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'];
+
+/**
+ * @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 customReplacement = {
+    Typography: {
+      matcher: (key, val) => key !== 'color' || 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 => {
+    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/node/v6.0.0/system-props/test-cases/system-props.actual.js

@@ -0,0 +1,83 @@
+"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`
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
+  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,98 @@
+"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`
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
+  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/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 _themeV.default;
+  }
+});
+var _themeV = _interopRequireDefault(require("./theme-v6"));