[codemod] Add packageName support to the v9 system props codemod

packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.js

@@ -180,9 +180,22 @@ export default function removeSystemProps(file, api, options) {
     },
   };
   const elementReplacement = {};
+  const packageName = options.packageName;
+  const importSources = ['@mui'];
+
+  if (packageName) {
+    importSources.push(packageName);
+  }
 
   root
-    .find(j.ImportDeclaration, (decl) => decl.source.value.includes('@mui'))
+    .find(
+      j.ImportDeclaration,
+      (decl) =>
+        typeof decl.source.value === 'string' &&
+        importSources.some(
+          (source) => decl.source.value === source || decl.source.value.startsWith(`${source}/`),
+        ),
+    )
     .forEach((decl) => {
       decl.node.specifiers.forEach((spec) => {
         if (spec.type === 'ImportSpecifier') {

packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.test.js

@@ -31,5 +31,27 @@ describe('@mui/codemod', () => {
       const expected = read('./test-cases/system-props.expected.js');
       expect(actual).to.equal(expected, 'The transformed version should be correct');
     });
+
+    it('transforms props for custom packageName', () => {
+      const actual = transform(
+        { source: read('./test-cases/system-props-package-name.actual.js') },
+        { jscodeshift },
+        { packageName: '@acme/ui' },
+      );
+
+      const expected = read('./test-cases/system-props-package-name.expected.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('does not transform similarly named packages', () => {
+      const actual = transform(
+        { source: read('./test-cases/system-props-package-name-similar.actual.js') },
+        { jscodeshift },
+        { packageName: '@acme/ui' },
+      );
+
+      const expected = read('./test-cases/system-props-package-name-similar.expected.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
   });
 });

packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props-package-name-similar.actual.js

@@ -0,0 +1,5 @@
+import { Box } from '@acme/ui-icons';
+import Typography from '@acme/ui-icons/Typography';
+
+<Box mt={2} p={1} />;
+<Typography color="text.secondary" fontSize="xl4">Hello</Typography>;

packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props-package-name-similar.expected.js

@@ -0,0 +1,5 @@
+import { Box } from '@acme/ui-icons';
+import Typography from '@acme/ui-icons/Typography';
+
+<Box mt={2} p={1} />;
+<Typography color="text.secondary" fontSize="xl4">Hello</Typography>;

packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props-package-name.actual.js

@@ -0,0 +1,7 @@
+import { Box } from '@acme/ui';
+import { Stack } from '@acme/ui/components';
+import Typography from '@acme/ui/Typography';
+
+<Box mt={2} p={1} />;
+<Stack flex="1" mb={3} />;
+<Typography color="text.secondary" fontSize="xl4">Hello</Typography>;

packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props-package-name.expected.js

@@ -0,0 +1,19 @@
+import { Box } from '@acme/ui';
+import { Stack } from '@acme/ui/components';
+import Typography from '@acme/ui/Typography';
+
+<Box
+  sx={{
+    mt: 2,
+    p: 1
+  }} />;
+<Stack
+  sx={{
+    flex: "1",
+    mb: 3
+  }} />;
+<Typography
+  sx={{
+    color: "text.secondary",
+    fontSize: "xl4"
+  }}>Hello</Typography>;