@mui/codemod 6.0.0-alpha.1 → 6.0.0-alpha.4

package/node/v6.0.0/styled/test-cases/NestedSpread.expected.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const Component = styled('div')(({
+  theme
+}) => {
+  var _palette;
+  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  return {
+    // Explicitly set the default value to solve a bug on IE11.
+    overflow: 'visible',
+    color: (theme.vars || theme).palette.action.active,
+    transition: theme.transitions.create('background-color', {
+      duration: theme.transitions.duration.shortest
+    }),
+    variants: [{
+      props: ({
+        ownerState
+      }) => !ownerState.disableRipple,
+      style: {
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    }, {
+      props: {
+        edge: 'start',
+        size: 'small'
+      },
+      style: {
+        marginLeft: -3
+      }
+    }, {
+      props: ({
+        edge,
+        ownerState
+      }) => edge === 'start' && ownerState.size !== 'small',
+      style: {
+        marginLeft: -12
+      }
+    }, {
+      props: {
+        edge: 'end',
+        size: 'small'
+      },
+      style: {
+        marginRight: -3
+      }
+    }, {
+      props: ({
+        edge,
+        ownerState
+      }) => edge === 'end' && ownerState.size !== 'small',
+      style: {
+        marginRight: -12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.color !== 'inherit' && ownerState.color !== 'default',
+      style: {
+        color: palette == null ? void 0 : palette.main
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.color !== 'inherit' && ownerState.color !== 'default' && !ownerState.disableRipple,
+      style: {
+        '&:hover': (0, _extends2.default)({}, palette && {
+          backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+        }, {
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        })
+      }
+    }]
+  };
+});

package/node/v6.0.0/styled/test-cases/ObjectMap.actual.js

@@ -0,0 +1,36 @@
+"use strict";
+
+const IconRoot = styled('span')(({
+  theme,
+  ownerState
+}) => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // To remove at some point.
+  overflow: 'hidden',
+  display: 'inline-block',
+  // allow overflow hidden to take action
+  textAlign: 'center',
+  // support non-square icon
+  flexShrink: 0,
+  fontSize: {
+    inherit: 'inherit',
+    small: theme.typography.pxToRem(20),
+    medium: theme.typography.pxToRem(24),
+    large: theme.typography.pxToRem(36)
+  }[ownerState.fontSize],
+  // TODO v5 deprecate, v6 remove for sx
+  color: {
+    primary: (theme.vars || theme).palette.primary.main,
+    secondary: (theme.vars || theme).palette.secondary.main,
+    info: (theme.vars || theme).palette.info.main,
+    success: (theme.vars || theme).palette.success.main,
+    warning: (theme.vars || theme).palette.warning.main,
+    action: (theme.vars || theme).palette.action.active,
+    error: (theme.vars || theme).palette.error.main,
+    disabled: (theme.vars || theme).palette.action.disabled,
+    inherit: undefined
+  }[ownerState.color]
+}));

package/node/v6.0.0/styled/test-cases/ObjectMap.expected.js

@@ -0,0 +1,109 @@
+"use strict";
+
+const IconRoot = styled('span')(({
+  theme
+}) => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // To remove at some point.
+  overflow: 'hidden',
+  // allow overflow hidden to take action
+  display: 'inline-block',
+  // support non-square icon
+  textAlign: 'center',
+  flexShrink: 0,
+  variants: [{
+    props: {
+      fontSize: "inherit"
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: "small"
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(20)
+    }
+  }, {
+    props: {
+      fontSize: "medium"
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(24)
+    }
+  }, {
+    props: {
+      fontSize: "large"
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(36)
+    }
+  }, {
+    props: {
+      color: "primary"
+    },
+    style: {
+      color: (theme.vars || theme).palette.primary.main
+    }
+  }, {
+    props: {
+      color: "secondary"
+    },
+    style: {
+      color: (theme.vars || theme).palette.secondary.main
+    }
+  }, {
+    props: {
+      color: "info"
+    },
+    style: {
+      color: (theme.vars || theme).palette.info.main
+    }
+  }, {
+    props: {
+      color: "success"
+    },
+    style: {
+      color: (theme.vars || theme).palette.success.main
+    }
+  }, {
+    props: {
+      color: "warning"
+    },
+    style: {
+      color: (theme.vars || theme).palette.warning.main
+    }
+  }, {
+    props: {
+      color: "action"
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.active
+    }
+  }, {
+    props: {
+      color: "error"
+    },
+    style: {
+      color: (theme.vars || theme).palette.error.main
+    }
+  }, {
+    props: {
+      color: "disabled"
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      color: "inherit"
+    },
+    style: {
+      color: undefined
+    }
+  }]
+}));

package/node/v6.0.0/styled/test-cases/ThemePaletteMode.actual.js

@@ -0,0 +1,62 @@
+"use strict";
+
+const Test = styled('div')(({
+  theme
+}) => ({
+  color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.main,
+  background: `linear-gradient(45deg, ${theme.palette.mode === 'dark' ? theme.palette.primary[400] : theme.palette.primary[600]} 30%, ${theme.palette.mode === 'dark' ? theme.palette.primary[200] : theme.palette.primary[500]} 90%})`
+}));
+const StyledPopper = styled(Popper)(({
+  theme
+}) => ({
+  border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
+  boxShadow: `0 8px 24px ${theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'}`,
+  borderRadius: 6,
+  width: 300,
+  zIndex: theme.zIndex.modal,
+  fontSize: 13,
+  color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128'
+}));
+const AntSwitch = styled(Switch)(({
+  theme
+}) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)'
+    }
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff'
+      }
+    }
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(['width'], {
+      duration: 200
+    })
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
+    boxSizing: 'border-box'
+  }
+}));

package/node/v6.0.0/styled/test-cases/ThemePaletteMode.expected.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const Test = styled('div')(({
+  theme
+}) => (0, _extends2.default)({
+  color: theme.palette.primary.main,
+  background: `linear-gradient(45deg, ${theme.palette.primary[600]} 30%, ${theme.palette.primary[500]} 90%})`
+}, theme.applyStyles("dark", {
+  color: theme.palette.primary.light,
+  background: `linear-gradient(45deg, ${theme.palette.primary[400]} 30%, ${theme.palette.primary[200]} 90%})`
+})));
+const StyledPopper = styled(Popper)(({
+  theme
+}) => (0, _extends2.default)({
+  border: `1px solid ${'#30363d'}`,
+  boxShadow: `0 8px 24px ${'rgb(1, 4, 9)'}`,
+  borderRadius: 6,
+  width: 300,
+  zIndex: theme.zIndex.modal,
+  fontSize: 13,
+  color: '#c9d1d9',
+  backgroundColor: '#1c2128'
+}, theme.applyStyles("light", {
+  border: `1px solid ${'#e1e4e8'}`,
+  boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`,
+  color: '#24292e',
+  backgroundColor: '#fff'
+})));
+const AntSwitch = styled(Switch)(({
+  theme
+}) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)'
+    }
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': (0, _extends2.default)({
+        opacity: 1,
+        backgroundColor: '#1890ff'
+      }, theme.applyStyles("dark", {
+        backgroundColor: '#177ddc'
+      }))
+    }
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(['width'], {
+      duration: 200
+    })
+  },
+  '& .MuiSwitch-track': (0, _extends2.default)({
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: 'rgba(0,0,0,.25)',
+    boxSizing: 'border-box'
+  }, theme.applyStyles("dark", {
+    backgroundColor: 'rgba(255,255,255,.35)'
+  }))
+}));

package/node/v6.0.0/styled/test-cases/VariantAndModeStyled.actual.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const Component = styled.div(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({}, theme.typography.caption, ownerState.size === 'small' && {
+  marginTop: (theme.vars || theme).spacing(1),
+  color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.main
+}));

package/node/v6.0.0/styled/test-cases/VariantAndModeStyled.expected.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const Component = styled.div(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.caption, {
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: (0, _extends2.default)({
+      marginTop: (theme.vars || theme).spacing(1),
+      color: theme.palette.primary.main
+    }, theme.applyStyles("dark", {
+      color: theme.palette.primary.light
+    }))
+  }]
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.4",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -27,7 +27,7 @@
     "@babel/core": "^7.24.4",
     "@babel/runtime": "^7.24.4",
     "@babel/traverse": "^7.24.1",
-    "jscodeshift": "^0.13.1",
+    "jscodeshift": "^0.15.2",
     "jscodeshift-add-imports": "^1.0.10",
     "postcss": "^8.4.38",
     "postcss-cli": "^8.3.1",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.3.14",
-    "@types/jscodeshift": "0.11.5",
+    "@types/jscodeshift": "0.11.11",
     "chai": "^4.4.1"
   },
   "sideEffects": false,