@availity/mui-codemod 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0-alpha.0 (2025-02-24)
+
+
+### Features
+
+* **mui-codemod:** add MUI v6 codemods for element users ([3be1a1b](https://github.com/Availity/element/commit/3be1a1ba2dab07968d26361bf4965b96fae682b5))

package/README.md

@@ -0,0 +1,27 @@
+# @availity/mui-codemod
+
+> Availity MUI v1 Codemods to be used when migrating from @availity/element v0 to v1.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-codemod.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-codemod)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-codemod.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-codemod)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-codemod?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-codemod/package.json)
+
+## Documentation
+
+This package extends the MUI v6 Codemods: [MUI Codemod Docs](https://mui.com/material-ui/migration/upgrade-to-v6/)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Usage
+
+### Migrate Grid props
+
+`npx @availity/mui-codemod@latest v1.0.0/grid-v2-props <path/to/folder>`
+
+### Migrate sx props
+
+`npx @availity/mui-codemod@latest v1.0.0/sx-props <path/to/folder>`
+
+### Migrate system props
+
+`npx @availity/mui-codemod@latest v1.0.0/system-props <path/to/folder>`

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'codemod',
+  coverageDirectory: '../../coverage/codemod',
+};

package/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@availity/mui-codemod",
+  "version": "0.1.0-alpha.0",
+  "description": "Availity MUI v1 Codemods - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-codemod-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/codemod"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "bin": "./src/codemod.js",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/codemod.js --format esm,cjs --dts",
+    "dev": "tsup src/codemod.js --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.6",
+    "typescript": "^5.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@types/jscodeshift": "^0.12.0",
+    "jscodeshift": "^17.1.2",
+    "postcss-cli": "^11.0.0",
+    "yargs": "^17.7.2"
+  }
+}

package/project.json

@@ -0,0 +1,26 @@
+{
+  "name": "mui-codemod",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/codemod/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/codemod"],
+      "options": {
+        "jestConfig": "packages/codemod/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
+      }
+    }
+  }
+}

package/src/codemod.js

@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+
+const childProcess = require('child_process');
+const { promises: fs } = require('fs');
+const path = require('path');
+const yargs = require('yargs');
+const jscodeshiftPackage = require('jscodeshift/package.json');
+const postcssCliPackage = require('postcss-cli/package.json');
+
+const jscodeshiftDirectory = path.dirname(require.resolve('jscodeshift'));
+const jscodeshiftExecutable = path.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift);
+
+const postcssCliDirectory = path.dirname(require.resolve('postcss-cli'));
+const postcssExecutable = path.join(postcssCliDirectory, postcssCliPackage.bin.postcss);
+
+async function runJscodeshiftTransform(transform, files, flags, codemodFlags) {
+  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;
+  let error;
+  for (const item of paths) {
+    try {
+      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 = [
+    jscodeshiftExecutable,
+    '--transform',
+    transformerPath,
+    ...codemodFlags,
+    '--extensions',
+    'js,ts,jsx,tsx,json',
+    '--parser',
+    flags.parser || 'tsx',
+    '--ignore-pattern',
+    '**/node_modules/**',
+    '--ignore-pattern',
+    '**/*.css'
+  ];
+
+  if (flags.dry) {
+    args.push('--dry');
+  }
+  if (flags.print) {
+    args.push('--print');
+  }
+  if (flags.jscodeshift) {
+    args.push(flags.jscodeshift);
+  }
+
+  args.push(...files);
+
+  console.log(`Executing command: jscodeshift ${args.join(' ')}`);
+  const jscodeshiftProcess = childProcess.spawnSync('node', args, { stdio: 'inherit' });
+
+  if (jscodeshiftProcess.error) {
+    throw jscodeshiftProcess.error;
+  }
+}
+
+const parseCssFilePaths = async (files) => {
+  const cssFiles = await Promise.all(files.map(async (filePath) => {
+    const stat = await fs.stat(filePath);
+    if (stat.isDirectory()) {
+      return `${filePath}/**/*.css`;
+    }
+    if (filePath.endsWith('.css')) {
+      return filePath;
+    }
+
+    return null;
+  }),);
+
+  return cssFiles.filter(Boolean);
+}
+
+async function runPostcssTransform(transform, files) {
+  const paths = [
+    path.resolve(__dirname, './src', `${transform}/postcss.config.js`),
+    path.resolve(__dirname, './node', `${transform}/postcss.config.js`),
+  ];
+
+  let configPath;
+  let error;
+  for (const item of paths) {
+    try {
+      await fs.stat(item);
+      error = undefined;
+      configPath = item;
+      break;
+    } catch (srcPathError) {
+      error = srcPathError;
+      continue;
+    }
+  }
+
+  if (error) {
+    if (error?.code !== 'ENOENT') {
+      throw error;
+    }
+  } else {
+    const cssPaths = await parseCssFilePaths(files);
+
+    if (cssPaths.length > 0) {
+      const args = [
+        postcssExecutable,
+        ...cssPaths,
+        '--config',
+        configPath,
+        '--replace',
+        '--verbose',
+      ];
+
+      console.log(`Executing command: postcss ${args.join(' ')}`);
+      const postCssProcess = childProcess.spawnSync('node', args, { stdio: 'inherit' });
+
+      if (postCssProcess.error) {
+        throw postCssProcess.error;
+      }
+    }
+  }
+}
+
+function run(argv) {
+  const { codemod, paths, ...flags } = argv;
+  const files = paths.map((filePath) => path.resolve(filePath));
+
+  runJscodeshiftTransform(codemod, files, flags, argv._);
+  runPostcssTransform(codemod, files);
+}
+
+yargs.command({
+  command: '$0 <codemod> <paths...>',
+  describe: 'Applies a `@mui/codemod` to the specified paths',
+  builder: (command) => {
+    return command
+      .positional('codemod', {
+        description: 'The name of the codemod',
+        type: 'string'
+      })
+      .positional('paths', {
+        array: true,
+        description: 'Paths forwarded to `jscodeshift`',
+        type: 'string',
+      })
+      .option('dry', {
+        description: 'dry run (no changes are made to files)',
+        default: false,
+        type: 'boolean'
+      })
+      .option('parser', {
+        description: 'which parser for jscodeshift to use',
+        default: 'tsx',
+        type: 'string'
+      })
+      .option('print', {
+        description: 'print transformed files to stdout, useful for development',
+        default: false,
+        type: 'boolean'
+      })
+      .option('jscodeshift', {
+        description: '(Advanced) Pass options directly to jscodeshift',
+        default: false,
+        type: 'string'
+      });
+  },
+  handler: run,
+})
+  .scriptName('npx @availity/mui-codemod')
+  .example('$0 v4.0.0/theme-spacing-api src')
+  .example('$0 v5.0.0/component-rename-prop src -- --component=Grid --from=prop --to=newProp')
+  .help()
+  .parse();

package/src/lib/v1.0.0/grid-v2-props/grid-v2-props.js

@@ -0,0 +1,217 @@
+const possibleDefaultImports = ['@availity/element', '@availity/mui-layout'];
+const possibleNamedImports = {
+  '@availity/element': 'Grid',
+  '@availity/mui-layout': 'Grid',
+};
+
+const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function gridV2Props(file, api, options) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const breakpoints = options.muiBreakpoints?.split(',') || defaultBreakpoints;
+  const printOptions = options.printOptions;
+
+  const gridLocalNames = [];
+
+  root
+    .find(j.ImportDeclaration, (decl) => possibleDefaultImports.includes(decl.source.value))
+    .forEach((decl) => {
+      decl.node.specifiers.forEach((spec) => {
+        if (spec.type === 'ImportDefaultSpecifier') {
+          gridLocalNames.push(spec.local.name);
+        }
+      });
+    });
+
+  root
+    .find(j.ImportDeclaration, (decl) =>
+      Object.keys(possibleNamedImports).includes(decl.source.value),
+    )
+    .forEach((decl) => {
+      decl.node.specifiers.forEach((spec) => {
+        if (spec.type === 'ImportSpecifier') {
+          if (possibleNamedImports[decl.node.source.value] === spec.imported.name) {
+            gridLocalNames.push(spec.local.name);
+          }
+        }
+      });
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: (name) => gridLocalNames.includes(name),
+        },
+      },
+    })
+    .forEach((el) => {
+      const size = j.objectExpression([]);
+
+      const spreadProps = [];
+      const attributesToPrune = [];
+
+      el.node.openingElement.attributes.forEach((attr) => {
+        if (attr.type === 'JSXSpreadAttribute') {
+          spreadProps.push(attr);
+        }
+      });
+
+      const breakpointNodes = j(el)
+        .find(j.JSXAttribute)
+        .filter(
+          (path) =>
+            path.parent.parent.node === el.node && breakpoints.includes(path.node.name.name),
+        );
+
+      breakpointNodes.nodes().forEach((node) => {
+        const breakpoint = node.name.name;
+        const nodeValue = node.value;
+        let value;
+
+        if (nodeValue === null) {
+          value = j.stringLiteral('grow');
+        } else if (nodeValue.type === 'JSXExpressionContainer') {
+          if (nodeValue.expression.value === true) {
+            value = j.stringLiteral('grow');
+          } else {
+            value = nodeValue.expression;
+          }
+        } else {
+          value = nodeValue;
+        }
+
+        size.properties.push(j.property('init', j.identifier(breakpoint), value));
+      });
+
+      spreadProps.forEach((spreadProp) => {
+        const spreadPropArgument = spreadProp.argument;
+        if (spreadPropArgument.type === 'ObjectExpression') {
+          const propertiesToPrune = [];
+          spreadPropArgument.properties.forEach((property) => {
+            if (breakpoints.includes(property.key.name)) {
+              size.properties.push(j.property('init', property.key, property.value));
+              propertiesToPrune.push(property.key.name);
+            }
+          });
+          spreadPropArgument.properties = spreadPropArgument.properties.filter(
+            (prop) => !propertiesToPrune.includes(prop.key.name),
+          );
+          if (spreadPropArgument.properties.length === 0) {
+            attributesToPrune.push(spreadProp);
+          }
+        }
+      });
+
+      if (size.properties.length) {
+        let sizePropValue = size;
+        if (size.properties.length === 1 && size.properties[0].key.name === 'xs') {
+          sizePropValue = size.properties[0].value;
+        }
+        if (sizePropValue.type !== 'StringLiteral') {
+          sizePropValue = j.jsxExpressionContainer(sizePropValue);
+        }
+
+        el.node.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier('size'), sizePropValue),
+        );
+      }
+
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(
+        (attr) => !breakpoints.includes(attr?.name?.name),
+      );
+
+      const offset = j.objectExpression([]);
+
+      const offsetNodes = j(el)
+        .find(j.JSXAttribute)
+        .filter(
+          (path) =>
+            path.parent.parent.node === el.node &&
+            path.node.name.name.endsWith('Offset') &&
+            breakpoints.includes(path.node.name.name.replace('Offset', '')),
+        );
+
+      offsetNodes.nodes().forEach((node) => {
+        const breakpoint = node.name.name.replace('Offset', '');
+        const value =
+          node.value.type === 'JSXExpressionContainer' ? node.value.expression : node.value;
+
+        offset.properties.push(j.property('init', j.identifier(breakpoint), value));
+      });
+
+      spreadProps.forEach((spreadProp) => {
+        const spreadPropArgument = spreadProp.argument;
+        if (spreadPropArgument.type === 'ObjectExpression') {
+          const propertiesToPrune = [];
+          spreadPropArgument.properties.forEach((property) => {
+            const breakpoint = property.key.name.replace('Offset', '');
+            if (property.key.name.endsWith('Offset') && breakpoints.includes(breakpoint)) {
+              offset.properties.push(j.property('init', j.identifier(breakpoint), property.value));
+              propertiesToPrune.push(property.key.name);
+            }
+          });
+          spreadPropArgument.properties = spreadPropArgument.properties.filter(
+            (prop) => !propertiesToPrune.includes(prop.key.name),
+          );
+          if (spreadPropArgument.properties.length === 0) {
+            attributesToPrune.push(spreadProp);
+          }
+        }
+      });
+
+      if (offset.properties.length) {
+        let offsetPropValue = offset;
+
+        if (offset.properties.length === 1 && offset.properties[0].key.name === 'xs') {
+          offsetPropValue = offset.properties[0].value;
+        }
+
+        if (offsetPropValue.type !== 'StringLiteral') {
+          offsetPropValue = j.jsxExpressionContainer(offsetPropValue);
+        }
+
+        el.node.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier('offset'), offsetPropValue),
+        );
+      }
+
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(
+        (attr) => !breakpoints.includes(attr?.name?.name.replace('Offset', '')),
+      );
+
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(
+        (attr) => !attributesToPrune.includes(attr),
+      );
+
+      const itemProp = el.node.openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'item',
+      );
+
+      if (itemProp) {
+        el.node.openingElement.attributes = el.node.openingElement.attributes.filter(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name !== 'item',
+        );
+      }
+
+      const zeroMinWidthProp = el.node.openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'zeroMinWidth',
+      );
+
+      if (zeroMinWidthProp) {
+        el.node.openingElement.attributes = el.node.openingElement.attributes.filter(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name !== 'zeroMinWidth',
+        );
+      }
+    });
+
+  return root.toSource(printOptions);
+}

package/src/lib/v1.0.0/grid-v2-props/grid-v2-props.test.js

@@ -0,0 +1,23 @@
+import { describeJscodeshiftTransform } from "../../../testUtils";
+import transform from './grid-v2-props';
+
+describe('@availity/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'grid-props',
+      dirname: __dirname,
+      testCases: [
+        {
+          actual: '/test-cases/actual.js',
+          expected: '/test-cases/expected.js'
+        },
+        {
+          actual: '/test-cases/custom-breakpoints.actual.js',
+          expected: '/test-cases/custom-breakpoints.expected.js',
+          options: { muiBreakpoints: 'customXs,customSm,customMd'}
+        }
+      ]
+    })
+  });
+});

package/src/lib/v1.0.0/grid-v2-props/test-cases/actual.js

@@ -0,0 +1,36 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+import { Grid as GridA } from '@availity/element';
+import { Grid as GridB } from '@availity/mui-layout';
+
+// Transforms on all the possible imports
+<GridA xs={2} />;
+<GridB xs={2} />;
+
+<GridA item />;
+<GridA item={true} />;
+<GridA item={false} />;
+
+<GridA zeroMinWidth />;
+<GridA zeroMinWidth={true} />;
+<GridA zeroMinWidth={false} />;
+
+// Transforms responsive sizes
+<GridA xs={2} sm={4} md={6} lg={8} xl={10} />;
+
+// Transforms all the possible size values
+<GridA xs sm="auto" md={2} lg={true} xl={false} />;
+
+// Doesn't add jsx object expression for single string values
+<GridA xs="auto" />;
+
+// Transforms offset
+<GridA xsOffset={2} />;
+
+// Transforms responsive offset
+<GridA xsOffset={2} smOffset={4} mdOffset={6} lgOffset={8} xlOffset={10} />;
+
+// Transforms all the possible offset values
+<GridA xsOffset={2} smOffset="auto" />;
+
+// Transforms spread props
+<GridA {...{ xs: 2, sm: 4, xsOffset: 0, smOffset: 2 }} />;

package/src/lib/v1.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js

@@ -0,0 +1,9 @@
+import { Grid } from '@availity/mui-layout';
+
+<>
+// Transforms custom breakpoints
+<Grid customXs={2} customSm={4} customMd={6} />
+
+// Transforms custom breakpoints offset
+<Grid customXsOffset={2} customSmOffset={4} customMdOffset={6} />
+</>

package/src/lib/v1.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js

@@ -0,0 +1,19 @@
+import { Grid } from '@availity/mui-layout';
+
+<>
+// Transforms custom breakpoints
+<Grid
+  size={{
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }} />
+
+// Transforms custom breakpoints offset
+<Grid
+  offset={{
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }} />
+</>

package/src/lib/v1.0.0/grid-v2-props/test-cases/expected.js

@@ -0,0 +1,69 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+import { Grid as GridA } from '@availity/element';
+import { Grid as GridB } from '@availity/mui-layout';
+
+// Transforms on all the possible imports
+<GridA size={2} />;
+<GridB size={2} />;
+
+<GridA />;
+<GridA />;
+<GridA />;
+
+<GridA />;
+<GridA />;
+<GridA />;
+
+// Transforms responsive sizes
+<GridA
+  size={{
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }} />;
+
+// Transforms all the possible size values
+<GridA
+  size={{
+    xs: "grow",
+    sm: "auto",
+    md: 2,
+    lg: "grow",
+    xl: false
+  }} />;
+
+// Doesn't add jsx object expression for single string values
+<GridA size="auto" />;
+
+// Transforms offset
+<GridA offset={2} />;
+
+// Transforms responsive offset
+<GridA
+  offset={{
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }} />;
+
+// Transforms all the possible offset values
+<GridA
+  offset={{
+    xs: 2,
+    sm: "auto"
+  }} />;
+
+// Transforms spread props
+<GridA
+  size={{
+    xs: 2,
+    sm: 4
+  }}
+  offset={{
+    xs: 0,
+    sm: 2
+  }} />;

package/src/lib/v1.0.0/system-props/removeSystemProps.js

@@ -0,0 +1,300 @@
+// from `packages/mui-system/src/styleFunctionSx/defaultSxConfig.js`
+const defaultSxConfig = {
+  // borders
+  border: {},
+  borderTop: {},
+  borderRight: {},
+  borderBottom: {},
+  borderLeft: {},
+  borderColor: {},
+  borderTopColor: {},
+  borderRightColor: {},
+  borderBottomColor: {},
+  borderLeftColor: {},
+  outline: {},
+  outlineColor: {},
+  borderRadius: {},
+  color: {},
+  bgcolor: {},
+  backgroundColor: {},
+  p: {},
+  pt: {},
+  pr: {},
+  pb: {},
+  pl: {},
+  px: {},
+  py: {},
+  padding: {},
+  paddingTop: {},
+  paddingRight: {},
+  paddingBottom: {},
+  paddingLeft: {},
+  paddingX: {},
+  paddingY: {},
+  paddingInline: {},
+  paddingInlineStart: {},
+  paddingInlineEnd: {},
+  paddingBlock: {},
+  paddingBlockStart: {},
+  paddingBlockEnd: {},
+
+  m: {},
+  mt: {},
+  mr: {},
+  mb: {},
+  ml: {},
+  mx: {},
+  my: {},
+  margin: {},
+  marginTop: {},
+  marginRight: {},
+  marginBottom: {},
+  marginLeft: {},
+  marginX: {},
+  marginY: {},
+  marginInline: {},
+  marginInlineStart: {},
+  marginInlineEnd: {},
+  marginBlock: {},
+  marginBlockStart: {},
+  marginBlockEnd: {},
+
+  // display
+  displayPrint: {},
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+
+  // grid
+  gap: {},
+  rowGap: {},
+  columnGap: {},
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+
+  // positions
+  position: {},
+  zIndex: {},
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+
+  // shadows
+  boxShadow: {},
+
+  // sizing
+  width: {},
+  maxWidth: {},
+  minWidth: {},
+  height: {},
+  maxHeight: {},
+  minHeight: {},
+  boxSizing: {},
+
+  // typography
+  font: {},
+  fontFamily: {},
+  fontSize: {},
+  fontStyle: {},
+  fontWeight: {},
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {},
+};
+const systemProps = Object.keys(defaultSxConfig);
+const components = ['Box', 'Stack', 'Typography', 'Link', 'Grid'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function removeSystemProps(file, api, options) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  const deprecatedElements = [];
+  const customReplacement = {
+    Typography: {
+      matcher: (key, val) =>
+        key !== 'color' ||
+        (val.value?.includes('.') && val.value !== 'inherit') ||
+        val.value === 'divider' ||
+        val.value.startsWith('#') ||
+        val.value.match(/\(.*\)/),
+    },
+    Link: {
+      matcher: (key) => key !== 'color',
+    },
+  };
+  const elementReplacement = {};
+
+  root
+    .find(j.ImportDeclaration, (decl) => {
+      const { source: {value} } = decl;
+      return value.includes('@availity/element') || value.includes('@availity/mui')
+    })
+    .forEach((decl) => {
+      decl.node.specifiers.forEach((spec) => {
+        if (spec.type === 'ImportSpecifier') {
+          const name = spec.imported.name;
+          if (components.includes(name)) {
+            deprecatedElements.push(spec.local.name);
+            if (customReplacement[name]) {
+              elementReplacement[spec.local.name] = customReplacement[name];
+            }
+          }
+        }
+        if (spec.type === 'ImportDefaultSpecifier') {
+          const name = decl.node.source.value.split('/').pop();
+          if (components.includes(name)) {
+            deprecatedElements.push(spec.local.name);
+            if (customReplacement[name]) {
+              elementReplacement[spec.local.name] = customReplacement[name];
+            }
+          }
+        }
+      });
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: (name) => {
+            return deprecatedElements.includes(name);
+          },
+        },
+      },
+    })
+    .forEach((el) => {
+      const sx = j.objectExpression([]);
+      const elementName = el.value?.openingElement?.name?.name;
+
+      const sxNodes = j(el)
+        .find(j.JSXAttribute)
+        .filter((path) => path.parent.parent.node === el.node && path.node.name.name === 'sx');
+
+      const sxNodesArray = sxNodes.nodes() || [];
+      const existingSxValue = sxNodesArray[0]?.value?.expression;
+
+      let spreadElement = null;
+      el.node.openingElement.attributes.forEach((attr) => {
+        if (attr.type === 'JSXSpreadAttribute') {
+          spreadElement = attr;
+        }
+      });
+
+      const attrToPrune = ['sx'];
+      el.node.openingElement.attributes.forEach((attr) => {
+        if (
+          attr.type === 'JSXSpreadAttribute' ||
+          !attr.value ||
+          !systemProps.includes(attr?.name?.name)
+        ) {
+          return;
+        }
+        const key = attr?.name?.name;
+        const literal = attr?.value;
+        const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal;
+        const shouldPrune =
+          !elementReplacement[elementName] || elementReplacement[elementName].matcher(key, val);
+        if (key && val) {
+          if (shouldPrune) {
+            sx.properties.push(j.property('init', j.identifier(key), val));
+            attrToPrune.push(key);
+          }
+        }
+      });
+
+      if (sx.properties.length) {
+        el.node.openingElement.attributes = el.node.openingElement.attributes.filter(
+          (attr) => attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr?.name?.name),
+        );
+
+        let finalSx;
+        if (!existingSxValue) {
+          finalSx = sx;
+        } else if (existingSxValue?.type === 'ObjectExpression') {
+          sx.properties.push(...existingSxValue.properties);
+          finalSx = sx;
+        } else if (existingSxValue?.type === 'ArrayExpression') {
+          existingSxValue.elements = [sx, ...existingSxValue.elements];
+          finalSx = existingSxValue;
+        } else {
+          finalSx = j.arrayExpression([
+            sx,
+            existingSxValue.type === 'Identifier'
+              ? j.spreadElement(
+                  j.conditionalExpression(
+                    j.callExpression(
+                      j.memberExpression(j.identifier('Array'), j.identifier('isArray')),
+                      [existingSxValue],
+                    ),
+                    existingSxValue,
+                    j.arrayExpression([existingSxValue]),
+                  ),
+                )
+              : existingSxValue,
+          ]);
+        }
+
+        if (spreadElement && spreadElement.argument.type === 'Identifier') {
+          if (finalSx.type === 'ObjectExpression') {
+            const propSx = j.memberExpression(spreadElement.argument, j.identifier('sx'));
+            finalSx = j.arrayExpression([
+              finalSx,
+              j.spreadElement(
+                j.conditionalExpression(
+                  j.callExpression(
+                    j.memberExpression(j.identifier('Array'), j.identifier('isArray')),
+                    [propSx],
+                  ),
+                  propSx,
+                  j.arrayExpression([propSx]),
+                ),
+              ),
+            ]);
+          } else if (finalSx.type === 'ArrayExpression') {
+            finalSx.elements.push(j.memberExpression(spreadElement.argument, j.identifier('sx')));
+          }
+        }
+
+        el.node.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier('sx'), j.jsxExpressionContainer(finalSx)),
+        );
+      }
+    });
+
+  return root.toSource(printOptions);
+}

package/src/lib/v1.0.0/system-props/removeSystemProps.test.js

@@ -0,0 +1,34 @@
+import path from 'path';
+import { jscodeshift } from '../../../testUtils';
+import transform from './removeSystemProps';
+import {readFile} from '../../../utils';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('v6.0.0 - removeSystemProps', () => {
+    it('transforms props as needed', () => {
+      const actual = transform(
+        { source: read('./test-cases/system-props.actual.js') },
+        { jscodeshift },
+        {},
+      );
+
+      const expected = read('./test-cases/system-props.expected.js');
+      expect(actual).toBe(expected);
+    });
+
+    it('should be idempotent', () => {
+      const actual = transform(
+        { source: read('./test-cases/system-props.expected.js') },
+        { jscodeshift },
+        {},
+      );
+
+      const expected = read('./test-cases/system-props.expected.js');
+      expect(actual).toBe(expected);
+    });
+  });
+});

package/src/lib/v1.0.0/system-props/test-cases/system-props.actual.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-undef */
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Box as Boxxx, Grid as Griddd } from '@availity/element';
+import { Typography } from '@availity/mui-typography';
+import { Typography as Typographyyy } from '@availity/mui-typography';
+import { Stack as Stackkk } from '@availity/mui-layout';
+
+<Boxxx typography="body1" />;
+<Boxxx color="palette.main" sx={{ display: 'block' }} />;
+
+<Griddd container flexDirection={`column`} />;
+
+const sx = { display: 'flex' };
+const ml = 2;
+<Typography color="#fff" mb={5} />;
+<Typography color="hsl(200 30% 30%)" mb={5} />;
+<Typographyyy variant="body1" color="primary.main" ml={ml} sx={sx} />;
+<Typographyyy variant="body1" color="divider" ml={ml} sx={sx} />;
+<Typographyyy variant="body1" color="inherit" ml={ml} sx={sx} />;
+<Typographyyy
+  fontSize="xl4"
+  lineHeight={1}
+  startDecorator={
+    <Typographyyy fontSize="lg" textColor="text.secondary">
+      $
+    </Typographyyy>
+  }
+  sx={{ alignItems: 'flex-start' }}
+>
+  25
+</Typographyyy>;
+function Copyright(props) {
+  return (
+    <Typographyyy variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typographyyy>
+  );
+}
+
+<Stackkk flex="1" sx={[...(Array.isArray(sx) ? sx : [sx])]} />;
+
+<Boxxx typography="body1" sx={foo.bar ? { opacity: 0 } : sx} />;

package/src/lib/v1.0.0/system-props/test-cases/system-props.expected.js

@@ -0,0 +1,93 @@
+/* eslint-disable no-undef */
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Box as Boxxx, Grid as Griddd } from '@availity/element';
+import { Typography } from '@availity/mui-typography';
+import { Typography as Typographyyy } from '@availity/mui-typography';
+import { Stack as Stackkk } from '@availity/mui-layout';
+
+<Boxxx sx={{
+  typography: "body1"
+}} />;
+<Boxxx
+  sx={{
+    color: "palette.main",
+    display: 'block'
+  }} />;
+
+<Griddd container sx={{
+  flexDirection: `column`
+}} />;
+
+const sx = { display: 'flex' };
+const ml = 2;
+<Typography
+  sx={{
+    color: "#fff",
+    mb: 5
+  }} />;
+<Typography
+  sx={{
+    color: "hsl(200 30% 30%)",
+    mb: 5
+  }} />;
+<Typographyyy
+  variant="body1"
+  sx={[{
+    color: "primary.main",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+<Typographyyy
+  variant="body1"
+  sx={[{
+    color: "divider",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+<Typographyyy
+  variant="body1"
+  color="inherit"
+  sx={[{
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+<Typographyyy
+  startDecorator={
+    <Typographyyy textColor="text.secondary" sx={{
+      fontSize: "lg"
+    }}>
+      $
+    </Typographyyy>
+  }
+  sx={{
+    fontSize: "xl4",
+    lineHeight: 1,
+    alignItems: 'flex-start'
+  }}>
+  25
+</Typographyyy>;
+function Copyright(props) {
+  return (
+    (<Typographyyy
+      variant="body2"
+      align="center"
+      {...props}
+      sx={[{
+        color: "text.secondary"
+      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typographyyy>)
+  );
+}
+
+<Stackkk
+  sx={[{
+    flex: "1"
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+
+<Boxxx
+  sx={[{
+    typography: "body1"
+  }, foo.bar ? { opacity: 0 } : sx]} />;

package/src/testUtils/index.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-undef */
+import j from 'jscodeshift';
+import { EOL } from 'os';
+import path from 'path';
+import { readFile } from '../utils';
+
+export const jscodeshift = j.withParser('tsx');
+
+function read(dirname, fileName) {
+  return readFile(path.join(dirname, fileName));
+}
+
+export function describeJscodeshiftTransform({ transformName, transform, testCases, dirname }) {
+  describe(transformName, () => {
+    testCases.forEach((testCase) => {
+      it('transforms as needed', () => {
+        const actual = transform(
+          { source: read(dirname, testCase.actual) },
+          { jscodeshift },
+          {
+            ...testCase.options, printOptions: {
+              ...testCase.options?.printOptions,
+              lineTerminator: EOL
+            }
+          });
+
+        const expected = read(dirname, testCase.expected);
+        expect(actual).toBe(expected);
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read(dirname, testCase.expected) },
+          { jscodeshift },
+          {
+            ...testCase.options,
+            printOptions: {
+              ...testCase.options?.printOptions,
+              lineTerminator: EOL,
+            }
+          }
+        );
+
+        const expected = read(dirname, testCase.expected);
+        expect(actual).toBe(expected);
+      });
+    })
+  })
+}

package/src/utils.js

@@ -0,0 +1,117 @@
+import fs from 'fs';
+import { EOL } from 'os';
+
+export function readFile(filePath) {
+  const fileContents = fs.readFileSync(filePath, 'utf8').toString();
+
+  if (EOL !== '\n') {
+    return fileContents.replace(/\n/g, EOL);
+  }
+
+  return fileContents;
+}
+
+export const getCreateBuildStyle = (j) =>
+  function createBuildStyle(key, upperBuildStyle, applyStylesMode) {
+    if (applyStylesMode) {
+      upperBuildStyle = (styleExpression) =>
+        j.objectExpression([
+          j.spreadElement(
+            j.callExpression(
+              j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')),
+              [j.stringLiteral(applyStylesMode), styleExpression],
+            ),
+          ),
+        ]);
+    }
+    return function buildStyle(styleExpression) {
+      if (key) {
+        if (key.type === 'Identifier' || key.type === 'StringLiteral') {
+          return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
+        }
+        if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
+          return upperBuildStyle(
+            j.objectExpression([
+              {
+                ...j.objectProperty(key, styleExpression),
+                computed: true,
+              },
+            ]),
+          );
+        }
+      }
+      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
+    };
+  };
+
+export const getAppendPaletteModeStyles = (j) => function appendPaletteModeStyles(node, modeStyles) {
+  Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+    node.properties.push(
+      j.spreadElement(
+        j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
+          j.stringLiteral(mode),
+          Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles,
+        ]),
+      ),
+    );
+  });
+};
+
+export const getBuildArrowFunctionAST = (j) => function buildArrowFunctionAST(params, body) {
+  const destructured = [...params].every((param) => typeof param === 'string');
+  return j.arrowFunctionExpression(
+    destructured ? [
+      j.objectPattern(
+        [...params].map((k) => ({
+          ...j.objectProperty(j.identifier(k), j.identifier(k)),
+          shorthand: true,
+        })),
+      ),
+    ]
+      : params,
+    body,
+  );
+};
+
+export function getReturnExpression(node) {
+  let body = node.body;
+  if (body === 'BlockStatement') {
+    body = body.body;
+  }
+
+  if (Array.isArray(body)) {
+    return body.find((statement) => statement.type === 'ReturnStatement')?.argument;
+  }
+  return body;
+}
+
+export function getObjectKey(node) {
+  let tempNode = { ...node };
+  while (tempNode.type === 'UnaryExpression') {
+    tempNode = tempNode.argument;
+  }
+  while (tempNode.type === 'MemberExpression' || tempNode.type === 'OptionMemberExpression') {
+    tempNode = tempNode.object;
+  }
+  return tempNode;
+}
+
+export function removeProperty(parentNode, child) {
+  if (parentNode) {
+    if (parentNode.type === 'ObjectExpression') {
+      parentNode.properties = parentNode.properties.filter(
+        (prop) => prop !== child && prop.value !== child,
+      );
+    }
+  }
+}
+
+export function isThemePaletteMode(node) {
+  return (
+    node?.type === 'MemberExpression' &&
+    node.object.type === 'MemberExpression' &&
+    node.object.object.name === 'theme' &&
+    node.object.property.name === 'palette' &&
+    node.property.name === 'mode'
+  );
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./jsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}