Skip to content

Commit

Permalink
[codemod] Support sx conditional inside spread element (mui#42894)
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored Jul 12, 2024
1 parent 3364f07 commit 00c0b5f
Show file tree
Hide file tree
Showing 6 changed files with 446 additions and 9 deletions.
49 changes: 40 additions & 9 deletions packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.js
Original file line number Diff line number Diff line change
Expand Up @@ -339,15 +339,46 @@ export default function sxV6(file, api, options) {
}
}
if (data.node.argument.type === 'ConditionalExpression') {
recurseObjectExpression({
...data,
node: data.node.argument,
parentNode: data.node,
});
if (data.deleteSelf) {
data.deleteSelf();
} else {
removeProperty(data.parentNode, data.node);
const isSxSpread =
(data.node.argument.consequent.type === 'Identifier' &&
data.node.argument.consequent.name === 'sx') ||
(data.node.argument.alternate.type === 'Identifier' &&
data.node.argument.alternate.name === 'sx');

if (!isSxSpread) {
recurseObjectExpression({
...data,
node: data.node.argument,
parentNode: data.node,
});
wrapSxInArray(data.node.argument);
if (data.deleteSelf) {
data.deleteSelf();
} else {
removeProperty(data.parentNode, data.node);
}
}
}
if (data.node.argument.type === 'CallExpression') {
if (
getObjectKey(data.node.argument.callee)?.name === 'theme' &&
data.node.argument.callee.property?.name?.startsWith('apply')
) {
const objIndex = data.node.argument.arguments.findIndex(
(arg) => arg.type === 'ObjectExpression',
);
recurseObjectExpression({
...data,
node: data.node.argument.arguments[objIndex],
buildStyle: (styleExpression) => {
const newArguments = [...data.node.argument.arguments];
newArguments[objIndex] = styleExpression;
return j.arrowFunctionExpression([j.identifier('theme')], {
...data.node.argument,
arguments: newArguments,
});
},
});
}
}
}
Expand Down
48 changes: 48 additions & 0 deletions packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,5 +129,53 @@ describe('@mui/codemod', () => {
expect(actual).to.equal(expected, 'The transformed version should be correct');
});
});

describe('conditional sx-v6', () => {
it('transforms props as needed', () => {
const actual = transform(
{ source: read('./test-cases/sx-condition.actual.js') },
{ jscodeshift },
{},
);

const expected = read('./test-cases/sx-condition.expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});

it('should be idempotent', () => {
const actual = transform(
{ source: read('./test-cases/sx-condition.expected.js') },
{ jscodeshift },
{},
);

const expected = read('./test-cases/sx-condition.expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});
});

describe('applyStyles sx-v6', () => {
it('transforms props as needed', () => {
const actual = transform(
{ source: read('./test-cases/sx-applyStyles.actual.js') },
{ jscodeshift },
{},
);

const expected = read('./test-cases/sx-applyStyles.expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});

it('should be idempotent', () => {
const actual = transform(
{ source: read('./test-cases/sx-applyStyles.expected.js') },
{ jscodeshift },
{},
);

const expected = read('./test-cases/sx-applyStyles.expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<ButtonBase
component="span"
ref={ref}
{...props}
disabled={Boolean(disabled)}
onClick={(event) => {
if (ref.current) {
ref.current.scrollIntoView({ block: 'nearest' });
}
if (props.onClick) {
props.onClick(event);
}
}}
onFocusVisible={(event) => {
if (ref.current) {
ref.current.scrollIntoView({ block: 'nearest' });
}
if (props.onFocusVisible) {
props.onFocusVisible(event);
}
}}
sx={[
(theme) => ({
justifyContent: 'flex-start',
textAlign: 'left',
alignItems: 'center',
borderRadius: 1,
height: '100%',
border: '1px solid transparent',
transitionProperty: 'all',
transitionDuration: '150ms',
// color: 'primary.300',
overflow: 'auto',
...((!disableBorder || selected) && {
borderColor: 'grey.100',
}),
...(selected && {
bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
borderColor: 'primary.300',
boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(
theme.palette.primary[100],
0.5,
)}`,
// color: 'primary.500',
}),
...(!selected && {
'&:hover, &:focus': {
bgcolor: 'primary.50',
borderColor: 'primary.100',
'@media (hover: none)': {
bgcolor: 'transparent',
},
},
}),
...theme.applyDarkStyles({
color: 'primary.800',
...((!disableBorder || selected) && {
borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
}),
...(!selected && {
'&:hover, &:focus': {
bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
'@media (hover: none)': {
bgcolor: 'transparent',
},
},
}),
...(selected && {
bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
borderColor: 'primary.700',
// color: 'primary.300',
boxShadow: `0px 1px 4px ${
(theme.vars || theme).palette.primary[900]
}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`,
}),
}),
...theme.applyStyles('light', {
color: 'primary.500',
...((!disableBorder || selected) && {
borderColor: `${alpha(theme.palette.primary[300], 0.3)}`,
}),
}),
'&.Mui-disabled': {
opacity: 0.4,
},
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
/>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<ButtonBase
component="span"
ref={ref}
{...props}
disabled={Boolean(disabled)}
onClick={(event) => {
if (ref.current) {
ref.current.scrollIntoView({ block: 'nearest' });
}
if (props.onClick) {
props.onClick(event);
}
}}
onFocusVisible={(event) => {
if (ref.current) {
ref.current.scrollIntoView({ block: 'nearest' });
}
if (props.onFocusVisible) {
props.onFocusVisible(event);
}
}}
sx={[(theme) => ({
justifyContent: 'flex-start',
textAlign: 'left',
alignItems: 'center',
borderRadius: 1,
height: '100%',
border: '1px solid transparent',
transitionProperty: 'all',
transitionDuration: '150ms',
// color: 'primary.300',
overflow: 'auto',
...theme.applyDarkStyles({
color: 'primary.800'
}),
...theme.applyStyles('light', {
color: 'primary.500'
}),
'&.Mui-disabled': {
opacity: 0.4,
}
}), (!disableBorder || selected) && {
borderColor: 'grey.100',
}, selected && (theme => ({
bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
borderColor: 'primary.300',
// color: 'primary.500',
boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(
theme.palette.primary[100],
0.5,
)}`
})), !selected && {
'&:hover, &:focus': {
bgcolor: 'primary.50',
borderColor: 'primary.100',
'@media (hover: none)': {
bgcolor: 'transparent',
},
},
}, (!disableBorder || selected) && (theme => theme.applyDarkStyles({
borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
})), !selected && (theme => theme.applyDarkStyles({
'&:hover, &:focus': {
bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
'@media (hover: none)': {
bgcolor: 'transparent',
},
},
})), selected && (theme => theme.applyDarkStyles({
bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
borderColor: 'primary.700',
// color: 'primary.300',
boxShadow: `0px 1px 4px ${
(theme.vars || theme).palette.primary[900]
}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`,
})), (!disableBorder || selected) && (theme => theme.applyStyles('light', {
borderColor: `${alpha(theme.palette.primary[300], 0.3)}`,
})), ...(Array.isArray(sx) ? sx : [sx])]}
/>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<Card
{...otherProps}
ref={ref}
key={it.wcId}
data-p={it.performance / 100}
variant="outlined"
sx={{
gap: '0.25rem',
textDecoration: 'none',
borderRadius: 0.75,
background:
'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
transition: 'all 200ms ease-in-out',
...(horizontal
? {
display: 'flex',
flexDirection: 'row',
pr: 1,
}
: {
display: 'flex',
flexDirection: 'column',
pb: 0.5,
}),

cursor: 'pointer',
'&:hover': {
borderColor: '#99CCFF',
boxShadow: '0px 4px 16px #DAE2ED',
transition: 'all 200ms ease-in-out !important',
},
}}
onClick={(ev) => {
ev.preventDefault();
navigate(href);
}}
>
<Box
component={Link}
to={href}
sx={{
position: 'relative',
aspectRatio: '100/55',
...(horizontal
? {
maxWidth: '50vw',
height: {
sm: '150px',
md: '170px',
lg: '210px',
xl: '250px',
},
}
: {
width: '100%',
}),
}}
>
<ResponsiveImage
sizes={imageSizes}
loading={imageLoading}
src={it.images[0]?.src}
alt={it.name}
style={{
aspectRatio: '100/55',
...(horizontal
? {
width: 'auto',
height: '100%',
}
: {
width: '100%',
height: 'auto',
}),
}}
/>
<NoSsr>
{productOffer && productOffer.ui?.itemCard && (
<PromoBanner
style={{
...defaultPromoCodeStyles,
...productOffer.style,
...productOffer.ui?.itemCard?.style,
}}
>
{productOffer.offerText}
</PromoBanner>
)}
</NoSsr>
</Box>
<Stack
direction="column"
sx={{
flex: 1,
...(horizontal ? { py: 1.5, px: 1.5 } : { px: 1, pb: 0.5 }),
}}
></Stack>
</Card>;
Loading

0 comments on commit 00c0b5f

Please sign in to comment.