am92-ds-codemod

Automated codemods for migrating projects that use @am92/react-design-system through MUI v6 and v7 breaking changes.

Why

MUI v6 and v7 introduced several breaking API changes — system props moved to sx, grid props restructured, picker slot renames, and more. Applying these changes manually across a large codebase is error-prone and time-consuming. @am92/ds-codemod bundles all the necessary transformations into a single CLI tool tailored for @am92/react-design-system consumers.

Prerequisites

New projects can directly install @am92/react-design-system v3 (beta 3 or stable v3).

Existing projects should follow this upgrade order:

1. First upgrade to the latest v2 of @am92/react-design-system.
2. Then upgrade to v3 (beta 3 or stable v3). MUI v7 support is part of version 3.

Installation

Install as a dev dependency in your project:

npm i @am92/ds-codemod --save-dev

Usage

Run a specific codemod

npx @am92/ds-codemod <codemod> <path>

• codemod — name of the codemod (see list below)
• path — file or folder to transform (e.g. src)

Run all codemods at once

npx all-codemods src

Available Codemods

deprecations/all

Runs all deprecation codemods in one shot — migrates deprecated APIs to their updated equivalents.

Does not include theme deprecations (rarely needed; see MUI docs to migrate manually).

Reference: https://mui.com/material-ui/migration/migrating-from-deprecated-apis/

v6.0.0/system-props

Moves system props (display, flexDirection, gap, p, color, etc.) into the sx prop for DsBox, DsTypography, DsLink, DsGrid, and DsStack.

Known caveat: When an existing sx prop is a callback (e.g. theme => ({...})), the codemod merges it into an sx array. Since @am92/react-design-system does not handle sx as an array, flatten the array manually into a single object or callback after running.

// After codemod (array — needs manual fix)
<DsStack
 sx={[
   { flexDirection: 'row', gap: 4 },
   theme => ({ [theme.breakpoints.up('md')]: { p: 4 } })
 ]}
/>


// Fixed (merge into single callback)
<DsStack
 sx={theme => ({
   flexDirection: 'row',
   gap: 4,
   [theme.breakpoints.up('md')]: { p: 4 }
 })}
/>

Reference: https://mui.com/material-ui/migration/upgrade-to-v6/

v6.0.0/list-item-button-prop

Migrates the ListItem component API changes introduced in MUI v6.

Reference: https://mui.com/material-ui/migration/upgrade-to-v6/#listitem

v7.0.0/input-label-size-normal-medium

Standardises the size prop on InputLabel as changed in MUI v7.

Reference: https://mui.com/material-ui/migration/upgrade-to-v7/#inputlabel-size-prop-standardized

v7.0.0/grid-props

Migrates DsGrid props to the Grid v2 API (e.g. item, xs, md → size={{ xs, md }}).

This codemod does not cover all Grid v2 breaking changes. Verify your layouts after running.

Reference: https://mui.com/material-ui/migration/upgrade-to-grid-v2/

v7.0.0/pickers/preset-safe

Renames picker component slots and slot types for MUI X v7.

Does not cover all DatePicker breaking changes. Review internal API usage manually.

References:

• https://mui.com/x/migration/migration-pickers-v6/
• https://mui.com/x/migration/migration-pickers-v7/

v8.0.0/charts/preset-safe

Migrates MUI X Charts components to the v8 API.

Reference: https://mui.com/x/migration/migration-charts-v7/

After Running Codemods

• Formatting changes — safe to fix after all codemods have run (run Prettier/ESLint at the end).
• JS syntax errors (e.g. unterminated strings) — must be fixed before running subsequent codemods.
• sx arrays — manually flatten any sx={[...]} arrays introduced by system-props codemod (see caveat above).

Project-specific Notes

Parcel + DsDatePicker: If your project uses Parcel and includes the DsDatePicker component, upgrade Parcel to >= 2.14.2. Earlier versions have a known issue with duplicate exports that causes build failures. See what's new in Parcel 2.14 for details on other improvements in this release.

Full Migration References

| Topic | Link | |---|---| | Deprecated APIs | https://mui.com/material-ui/migration/migrating-from-deprecated-apis/ | | Upgrade to v6 | https://mui.com/material-ui/migration/upgrade-to-v6/ | | Upgrade to v7 | https://mui.com/material-ui/migration/upgrade-to-v7/ | | Grid v2 | https://mui.com/material-ui/migration/upgrade-to-grid-v2/ | | Pickers v6 → v7 | https://mui.com/x/migration/migration-pickers-v6/ | | Pickers v7 | https://mui.com/x/migration/migration-pickers-v7/ | | Charts v7 → v8 | https://mui.com/x/migration/migration-charts-v7/ |