@mui/codemod 6.0.0-alpha.0 → 6.0.0-alpha.3

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.0",
+  "version": "6.0.0-alpha.3",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,18 +24,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/runtime": "^7.23.9",
-    "@babel/traverse": "^7.23.9",
-    "jscodeshift": "^0.13.1",
+    "@babel/core": "^7.24.4",
+    "@babel/runtime": "^7.24.4",
+    "@babel/traverse": "^7.24.1",
+    "jscodeshift": "^0.15.2",
     "jscodeshift-add-imports": "^1.0.10",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-cli": "^8.3.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.12",
-    "@types/jscodeshift": "0.11.5",
+    "@types/chai": "^4.3.14",
+    "@types/jscodeshift": "0.11.11",
     "chai": "^4.4.1"
   },
   "sideEffects": false,