[codemod] Add accordion props deprecation

.eslintignore

@@ -11,6 +11,7 @@
 /examples/material-ui-nextjs/src
 /packages/mui-codemod/lib
 /packages/mui-codemod/src/*/*.test/*
+/packages/mui-codemod/src/**/test-cases/*
 /packages/mui-icons-material/fixtures
 /packages/mui-icons-material/legacy
 /packages/mui-icons-material/lib

packages/mui-codemod/README.md

@@ -60,9 +60,40 @@ npx @mui/codemod@latest <transform> <path> --jscodeshift="--printOptions='{\"quo
 
 ## Included scripts
 
+- [Deprecation](#deprecations)
+- [v5](#v500)
+- [v4](#v400)
+- [v1](#v100)
+- [v0.15](#v0150)
+
+### Deprecations
+
+```bash
+npx @mui/codemod@latest deprecations/all <path>
+```
+
+#### `all`
+
+A combination of all deprecations.
+
+#### `accordion-props`
+
+```diff
+ <Accordion
+-    TransitionComponent={CustomTransition}
+-    TransitionProps={{ unmountOnExit: true }}
++    slots={{ transition: CustomTransition }}
++    slotProps={{ transition: { unmountOnExit: true } }}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/accordion-props <path>
+```
+
 ### v5.0.0
 
-### `base-use-named-exports`
+#### `base-use-named-exports`
 
 Base UI default exports were changed to named ones. Previously we had a mix of default and named ones.
 This was changed to improve consistency and avoid problems some bundlers have with default exports.
@@ -81,7 +112,7 @@ This codemod updates the import and re-export statements.
 npx @mui/codemod@latest v5.0.0/base-use-named-exports <path>
 ```
 
-### `base-remove-unstyled-suffix`
+#### `base-remove-unstyled-suffix`
 
 The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.
 

packages/mui-codemod/codemod.js

@@ -10,27 +10,39 @@ const jscodeshiftDirectory = path.dirname(require.resolve('jscodeshift'));
 const jscodeshiftExecutable = path.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift);
 
 async function runTransform(transform, files, flags, codemodFlags) {
-  const transformerSrcPath = path.resolve(__dirname, './src', `${transform}.js`);
-  const transformerBuildPath = path.resolve(__dirname, './node', `${transform}.js`);
+  const paths = [
+    path.resolve(__dirname, './src', `${transform}/index.js`),
+    path.resolve(__dirname, './src', `${transform}.js`),
+    path.resolve(__dirname, './node', `${transform}/index.js`),
+    path.resolve(__dirname, './node', `${transform}.js`),
+  ];
+
   let transformerPath;
-  try {
-    await fs.stat(transformerSrcPath);
-    transformerPath = transformerSrcPath;
-  } catch (srcPathError) {
+  let error;
+  // eslint-disable-next-line no-restricted-syntax
+  for (const item of paths) {
     try {
-      await fs.stat(transformerBuildPath);
-      transformerPath = transformerBuildPath;
-    } catch (buildPathError) {
-      if (buildPathError.code === 'ENOENT') {
-        throw new Error(
-          `Transform '${transform}' not found. Check out ${path.resolve(
-            __dirname,
-            './README.md for a list of available codemods.',
-          )}`,
-        );
-      }
-      throw buildPathError;
+      // eslint-disable-next-line no-await-in-loop
+      await fs.stat(item);
+      error = undefined;
+      transformerPath = item;
+      break;
+    } catch (srcPathError) {
+      error = srcPathError;
+      continue;
+    }
+  }
+
+  if (error) {
+    if (error?.code === 'ENOENT') {
+      throw new Error(
+        `Transform '${transform}' not found. Check out ${path.resolve(
+          __dirname,
+          './README.md for a list of available codemods.',
+        )}`,
+      );
     }
+    throw error;
   }
 
   const args = [

packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js

@@ -0,0 +1,112 @@
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  root.find(j.JSXAttribute, { name: { name: 'TransitionComponent' } }).forEach((path) => {
+    const slotsNode = /** @type import('jscodeshift').JSXOpeningElement */ (
+      path.parent.node
+    ).attributes.find((attr) => attr.name?.name === 'slots');
+
+    if (slotsNode) {
+      const expContainer = /** @type import('jscodeshift').JSXExpressionContainer */ (
+        slotsNode.value
+      );
+      if (expContainer.expression.type === 'ObjectExpression') {
+        // case `slots={{ ... }}`
+        expContainer.expression.properties.push(
+          j.objectProperty(j.identifier('transition'), path.node.value.expression),
+        );
+      } else if (expContainer.expression.type === 'Identifier') {
+        // case `slots={outerSlots}
+        expContainer.expression = j.objectExpression([
+          j.spreadElement(j.identifier(expContainer.expression.name)),
+          j.objectProperty(j.identifier('transition'), path.node.value.expression),
+        ]);
+      }
+    } else {
+      path.insertAfter(
+        j.jsxAttribute(
+          j.jsxIdentifier('slots'),
+          j.jsxExpressionContainer(
+            j.objectExpression([
+              j.objectProperty(j.identifier('transition'), path.node.value.expression),
+            ]),
+          ),
+        ),
+      );
+    }
+
+    // remove `TransitionComponent` prop
+    path.replace();
+  });
+
+  root.find(j.JSXAttribute, { name: { name: 'TransitionProps' } }).forEach((path) => {
+    const slotPropsNode = /** @type import('jscodeshift').JSXOpeningElement */ (
+      path.parent.node
+    ).attributes.find((attr) => attr.name?.name === 'slotProps');
+
+    if (slotPropsNode) {
+      // insert to `slotProps` prop
+      const expContainer = /** @type import('jscodeshift').JSXExpressionContainer */ (
+        slotPropsNode.value
+      );
+      if (expContainer.expression.type === 'ObjectExpression') {
+        // case `slotProps={{ ... }}`
+        expContainer.expression.properties.push(
+          j.objectProperty(j.identifier('transition'), path.node.value.expression),
+        );
+      } else if (expContainer.expression.type === 'Identifier') {
+        // case `slotProps={outerSlotProps}
+        expContainer.expression = j.objectExpression([
+          j.spreadElement(j.identifier(expContainer.expression.name)),
+          j.objectProperty(j.identifier('transition'), path.node.value.expression),
+        ]);
+      }
+    } else {
+      path.insertAfter(
+        j.jsxAttribute(
+          j.jsxIdentifier('slotProps'),
+          j.jsxExpressionContainer(
+            j.objectExpression([
+              j.objectProperty(j.identifier('transition'), path.node.value.expression),
+            ]),
+          ),
+        ),
+      );
+    }
+
+    // remove `TransitionProps` prop
+    path.replace();
+  });
+
+  root.find(j.Property, { key: { name: 'TransitionComponent' } }).forEach((path) => {
+    if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAccordion') {
+      path.replace(
+        j.property(
+          'init',
+          j.identifier('slots'),
+          j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]),
+        ),
+      );
+    }
+  });
+
+  root.find(j.Property, { key: { name: 'TransitionProps' } }).forEach((path) => {
+    if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAccordion') {
+      path.replace(
+        j.property(
+          'init',
+          j.identifier('slotProps'),
+          j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]),
+        ),
+      );
+    }
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js

@@ -0,0 +1,73 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './accordion-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('accordion-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          {
+            source: read('./test-cases/actual.js'),
+            path: require.resolve('./test-cases/actual.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          {
+            source: read('./test-cases/expected.js'),
+            path: require.resolve('./test-cases/expected.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] accordion-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          {
+            source: read('./test-cases/theme.actual.js'),
+            path: require.resolve('./test-cases/theme.actual.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          {
+            source: read('./test-cases/theme.expected.js'),
+            path: require.resolve('./test-cases/theme.expected.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/accordion-props/index.js

@@ -0,0 +1 @@
+export { default } from './accordion-props';

packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js

@@ -0,0 +1,14 @@
+<Accordion TransitionComponent={CustomTransition} TransitionProps={{ unmountOnExit: true }} />;
+<Accordion TransitionComponent={CustomTransition} TransitionProps={transitionVars} />;
+<Accordion
+  slots={{ root: 'div' }}
+  slotProps={{ root: { className: 'foo' } }}
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;
+<Accordion
+  slots={outerSlots}
+  slotProps={outerSlotProps}
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js

@@ -0,0 +1,28 @@
+<Accordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: { unmountOnExit: true }
+}} />;
+<Accordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: transitionVars
+}} />;
+<Accordion
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+    transition: { unmountOnExit: true }
+  }} />;
+<Accordion
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+    transition: { unmountOnExit: true }
+  }} />;

packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js

@@ -0,0 +1,8 @@
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: { unmountOnExit: true },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js

@@ -0,0 +1,12 @@
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: { unmountOnExit: true }
+      },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -0,0 +1,11 @@
+import transformAccordionProps from '../accordion-props/accordion-props';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function deprecationsAll(file, api, options) {
+  file.source = transformAccordionProps(file, api, options);
+
+  return file.source;
+}