48:I[660678,["/_next/static/chunks/1sk8r55q_mng9.js","/_next/static/chunks/1xli048pq-ek6.js","/_next/static/chunks/3db6alzlb_jtc.js","/_next/static/chunks/09a6ip-vyx6yp.js","/_next/static/chunks/2e4udl7tfg2xd.js","/_next/static/chunks/0ipw6pdbca2nn.js","/_next/static/chunks/3zl1wipltkkjk.js","/_next/static/chunks/3vehc-g2atkra.js","/_next/static/chunks/40fmu66fmb8tm.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/0nsogqyo9f92a.js","/_next/static/chunks/3dp-pq73xzz-a.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/3xgislderjp8_.js","/_next/static/chunks/1umhym11g537p.js","/_next/static/chunks/3bhq66ea_v7by.js","/_next/static/chunks/44c_5nh0vyeb5.js","/_next/static/chunks/1jiredr0b6jr_.js","/_next/static/chunks/2nw5jdup18fxv.js","/_next/static/chunks/2ghxk472-g0i6.js","/_next/static/chunks/1ra7jqz5hyzln.js","/_next/static/chunks/42kj-we3o-c3u.js","/_next/static/chunks/2vvl77bxv5nze.js","/_next/static/chunks/3ecujcyfkbx4l.js","/_next/static/chunks/2l8l4_a9-xhts.js","/_next/static/chunks/34y7-26s89h2f.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/23i2b1iqbto_4.js","/_next/static/chunks/0a0b6s3o7q6fp.js","/_next/static/chunks/3ud55t5lsf-yw.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/2rzv45ystgqbh.js","/_next/static/chunks/1j29bqcxcpyur.js"],"HydrationBoundary"] 47:Tad2,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"codemod","url":"https://app.codemod.com","logo":"https://avatars.githubusercontent.com/u/78830094?v=4"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"@codemod/mui-gridlist-to-grid-migration","item":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration#webpage","url":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration","name":"mui-gridlist-to-grid-migration - Codemod Registry","description":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition.","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration#sourcecode","name":"@codemod/mui-gridlist-to-grid-migration","description":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition.","url":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration","publisher":{"@id":"https://app.codemod.com#org"},"image":"https://avatars.githubusercontent.com/u/78830094?v=4","isAccessibleForFree":true,"license":"MIT","version":"0.1.0","keywords":["transformation","migration","mui","material-ui","gridlist","grid"],"datePublished":"2026-05-07 11:08:55.037034+00","dateModified":"2026-05-07 11:08:55.037034+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration#app","name":"mui-gridlist-to-grid-migration codemod","description":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition.","url":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"0.1.0","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}49:T913,# @codemod/mui-gridlist-to-grid-migration Replace deprecated `GridList`/`GridListTile` usage with modern Material UI `Grid` composition, including import rewrites and prop mapping, to improve maintainability and alignment with current MUI best practices. ## Usage ```bash # Run from the registry npx codemod@latest run @codemod/mui-gridlist-to-grid-migration # Or run locally npx codemod@latest run -w workflow.yaml ``` ## What It Rewrites - `GridList` becomes `Grid` with the `container` prop. - `GridListTile` becomes `Grid` with the `item` prop. - `cols` is mapped to `xs` using a 12-column grid calculation. - Numeric `spacing` values are converted from pixel gaps to MUI Grid spacing units by dividing by `8` and rounding. - Expression-based `spacing` values are rewritten to `Math.round(expr / 8)` so Grid still receives scale units instead of pixel values. - Legacy `GridList`, `GridListTile`, and `GridListTileBar` imports are removed, and a `Grid` import is added when needed. - The migration always targets `@mui/material/Grid`; it does not expose mode flags for alternate import targets or helper emission. ## Supported Inputs - Default imports such as `@material-ui/core/GridList` and `@material-ui/core/GridListTile` - Named imports such as `import { GridList, GridListTile } from '@material-ui/core'` - Aliased named imports such as `GridList as LegacyGridList` - JavaScript, JSX, TypeScript, and TSX files - Nested `GridList` blocks, which are transformed independently with their own `cols` mapping ## Preserved Behavior - Non-layout props such as `className`, `style`, `id`, `key`, `data-*`, and event handlers are preserved. - Existing `Grid` imports are reused instead of duplicated. - Locally shadowed `GridList` identifiers are not transformed. ## Manual Follow-Up - `rows` has no direct `Grid` equivalent. The codemod leaves a TODO comment on migrated tiles that used it. - `GridListTileBar` is replaced with a TODO comment for manual migration to `ImageListItemBar` or an app-specific overlay. - `cellHeight` is not recreated automatically. Files using that prop are left unchanged for manual review. ## Development ```bash # Test the fixtures pnpm test # Check types pnpm check-types # Validate the workflow npx codemod@latest workflow validate -w workflow.yaml ``` ## License MIT 19:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$47"}}],["$","$L48",null,{"state":{"mutations":[],"queries":[{"state":{"data":{"json":{"id":"792b6040-7868-4b00-9e64-8b7768b9351d","name":"mui-gridlist-to-grid-migration","displayName":"@codemod/mui-gridlist-to-grid-migration","description":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition.","scope":"codemod","visibility":"public","downloadCount":0,"executionCount":0,"createdAt":"2026-05-07 11:08:55.037034+00","updatedAt":"2026-05-07 11:08:55.037034+00","latestVersion":"0.1.0","keywords":["transformation","migration","mui","material-ui","gridlist","grid"],"starCount":0,"author":"Codemod Arc","homepage":null,"repository":null,"license":"MIT","access":"public","documentation":null,"bugsUrl":null,"readme":"$49","organization":{"id":"a23e5412-b7c7-435e-ad5a-292e3fe3e6cf","name":"codemod","slug":"codemod","avatarUrl":"https://avatars.githubusercontent.com/u/78830094?v=4"},"owner":{"id":"60be2aab-7f92-4158-b1ba-ee62555b75f0","username":"mohebifar","name":"Mohamad Mohebifar","avatarUrl":"https://avatars.githubusercontent.com/u/6104558?v=4"},"isLegacy":false,"versions":[{"version":{"id":"d4a084dc-4cf9-412d-84f1-b5cef4a6b9f4","packageId":"792b6040-7868-4b00-9e64-8b7768b9351d","version":"0.1.0","description":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition.","manifest":{"name":"@codemod/mui-gridlist-to-grid-migration","author":"Codemod Arc","license":"MIT","targets":{"versions":{},"languages":["javascript","typescript"],"frameworks":[]},"version":"0.1.0","keywords":["transformation","migration","mui","material-ui","gridlist","grid"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition.","dependencies":[],"schema_version":"1.0"},"checksum":"472288beedd1517841f1bac42d623a2f2527a8e798428298dd93ef005ade58fe","size":8200,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/codemod/mui-gridlist-to-grid-migration/0.1.0/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":["typescript"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Migrate Material UI GridList components to Grid","type":"js-ast-grep","language":"typescript","semanticAnalysis":"file"}]}]},"validated":false,"validationErrors":null,"publishedBy":"60be2aab-7f92-4158-b1ba-ee62555b75f0","deprecated":false,"deprecationMessage":null,"downloadCount":0,"cachedTestCases":{"input":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\nimport GridListTileBar from '@material-ui/core/GridListTileBar';\n\nexport const Gallery = ({ img }: { img: string }) => (\n \n \n

\n \n \n \n);\n","output":"import Grid from '@mui/material/Grid';\n\nexport const Gallery = ({ img }: { img: string }) => (\n \n {/* TODO(mui-codemod): GridListTile rows has no direct Grid equivalent; verify the resulting height manually. */}\n

\n {/* TODO(mui-codemod): GridListTileBar was deprecated; replace it with ImageListItemBar or an app-specific overlay. */}\n \n \n);\n","isValid":true,"examples":[{"name":"edge-rows-and-tilebar","path":"tests/edge-rows-and-tilebar","input":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\nimport GridListTileBar from '@material-ui/core/GridListTileBar';\n\nexport const Gallery = ({ img }: { img: string }) => (\n \n \n

\n {/* TODO(mui-codemod): GridListTileBar was deprecated; replace it with ImageListItemBar or an app-specific overlay. */}\n \n \n);\n","filename":"input.tsx"},{"name":"negative-cellheight-skipped","path":"tests/negative-cellheight-skipped","input":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\n\nexport const Gallery = ({ img }: { img: string }) => (\n \n \n

\n \n \n);\n","output":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\n\nexport const Gallery = ({ img }: { img: string }) => (\n \n \n

\n \n \n);\n","filename":"input.tsx"},{"name":"negative-grid-alias-collision","path":"tests/negative-grid-alias-collision","input":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\n\nconst Grid = ({ children }: { children: React.ReactNode }) =>

{children}

;\n\nexport const Gallery = () => (\n \n \n

\n \n \n);\n","output":"import Grid2 from '@mui/material/Grid';\n\nconst Grid = ({ children }: { children: React.ReactNode }) =>

{children}

;\n\nexport const Gallery = () => (\n \n

\n \n);\n","filename":"input.tsx"},{"name":"negative-nested-tilebar-retained","path":"tests/negative-nested-tilebar-retained","input":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\nimport GridListTileBar from '@material-ui/core/GridListTileBar';\n\nexport const Gallery = () => (\n \n \n <>\n \n \n \n \n);\n","output":"import Grid from '@mui/material/Grid';\nimport GridListTileBar from '@material-ui/core/GridListTileBar';\n\nexport const Gallery = () => (\n \n \n <>\n \n \n \n \n);\n","filename":"input.tsx"},{"name":"negative-partial-named-import-retention","path":"tests/negative-partial-named-import-retention","input":"import { GridList, GridListTile } from '@material-ui/core';\n\nexport const Mixed = ({ a, b }: { a: string; b: string }) => (\n <>\n \n \n

\n \n \n \n \n

\n \n \n \n);\n","output":"import Grid from '@mui/material/Grid';\nimport { GridList, GridListTile } from '@material-ui/core';\n\nexport const Mixed = ({ a, b }: { a: string; b: string }) => (\n <>\n \n \n

\n \n \n \n \n

\n \n \n \n);\n","filename":"input.tsx"},{"name":"negative-quoted-spacing-nonnumeric","path":"tests/negative-quoted-spacing-nonnumeric","input":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\n\nexport const Gallery = () => (\n \n \n

\n \n \n);\n","output":"import Grid from '@mui/material/Grid';\n\nexport const Gallery = () => (\n \n

\n \n);\n","filename":"input.tsx"},{"name":"positive-basic-default-imports","path":"tests/positive-basic-default-imports","input":"import GridList from '@material-ui/core/GridList';\nimport GridListTile from '@material-ui/core/GridListTile';\n\nexport function Gallery({ a, b }: { a: { id: string; src: string }; b: { src: string } }) {\n return (\n \n \n

\n \n \n

\n \n \n );\n}\n","output":"import Grid from '@mui/material/Grid';\n\nexport function Gallery({ a, b }: { a: { id: string; src: string }; b: { src: string } }) {\n return (\n \n \n

\n \n \n

\n \n \n );\n}\n","filename":"input.tsx"},{"name":"positive-expression-spacing","path":"tests/positive-expression-spacing","input":"import { GridList, GridListTile } from '@material-ui/core';\n\nexport const Example = ({ gap }: { gap: number }) => (\n \n \n

\n \n \n);\n","output":"import Grid from '@mui/material/Grid';\n\nexport const Example = ({ gap }: { gap: number }) => (\n \n \n

\n \n \n);\n","filename":"input.tsx"},{"name":"positive-mui-direct-imports","path":"tests/positive-mui-direct-imports","input":"import GridList from '@mui/material/GridList';\nimport GridListTile from '@mui/material/GridListTile';\n\nexport const Gallery = ({ cols, tileCols }: { cols: number; tileCols: number }) => (\n \n \n

\n \n \n);\n","output":"import Grid from '@mui/material/Grid';\n\nexport const Gallery = ({ cols, tileCols }: { cols: number; tileCols: number }) => (\n \n \n

\n \n \n);\n","filename":"input.tsx"},{"name":"positive-named-import-alias","path":"tests/positive-named-import-alias","input":"import { Card, GridList as LegacyGridList, GridListTile } from '@material-ui/core';\n\ntype Item = { id: string; cols?: number };\n\nexport function Gallery({ items, classes, gap }: { items: Item[]; classes: { list: string }; gap: number }) {\n return (\n \n {items.map((it) => (\n \n \n \n ))}\n \n );\n}\n","output":"import Grid from '@mui/material/Grid';\nimport { Card } from '@material-ui/core';\n\ntype Item = { id: string; cols?: number };\n\nexport function Gallery({ items, classes, gap }: { items: Item[]; classes: { list: string }; gap: number }) {\n return (\n \n {items.map((it) => (\n \n ))}\n \n );\n}\n","filename":"input.tsx"}]},"defaultWorkflowName":"default","createdAt":"2026-05-07T11:08:55.037Z","updatedAt":"2026-05-26 08:41:26.659011+00"},"publishedBy":{"id":"60be2aab-7f92-4158-b1ba-ee62555b75f0","username":"mohebifar","name":"Mohamad Mohebifar"},"insightsTemplate":{"packageVersionId":"d4a084dc-4cf9-412d-84f1-b5cef4a6b9f4","status":"ready","generatedAt":"2026-07-21T16:19:24.013Z"},"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["typescript"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Migrate Material UI GridList components to Grid","type":"js-ast-grep","language":"typescript","semanticAnalysis":"file"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]}],"distTags":{"latest":"0.1.0"},"latestPackageBehavior":"workflow-only","cachedTestCases":"$19:1:props:state:queries:0:state:data:json:versions:0:version:cachedTestCases"},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.insightsTemplate.generatedAt":["Date"]},"referentialEqualities":{"cachedTestCases":["versions.0.version.cachedTestCases"]}}},"dataUpdateCount":1,"dataUpdatedAt":1787712947956,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"mui-gridlist-to-grid-migration","scope":"codemod"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"mui-gridlist-to-grid-migration\",\"scope\":\"codemod\"},\"type\":\"query\"}]"}]},"children":"$L4a"}]] 1c:null 20:[["$","title","0",{"children":"codemod/mui-gridlist-to-grid-migration - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition."}],["$","meta","2",{"name":"author","content":"codemod"}],["$","meta","3",{"name":"keywords","content":"mui-gridlist-to-grid-migration, codemod, code transformation, automated refactoring, package, registry, transformation, migration, mui, material-ui, gridlist, grid"}],["$","meta","4",{"name":"creator","content":"codemod"}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration"}],["$","meta","20",{"property":"og:title","content":"codemod/mui-gridlist-to-grid-migration - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition."}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/@codemod/mui-gridlist-to-grid-migration"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/@codemod/mui-gridlist-to-grid-migration"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"mui-gridlist-to-grid-migration package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"codemod/mui-gridlist-to-grid-migration - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Replace deprecated Material UI GridList/GridListTile usage with Grid container/item composition."}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/@codemod/mui-gridlist-to-grid-migration"}]]