{"id":21186039,"url":"https://github.com/codemodsquad/material-ui-codemorphs","last_synced_at":"2025-07-10T01:30:58.124Z","repository":{"id":38175117,"uuid":"234255076","full_name":"codemodsquad/material-ui-codemorphs","owner":"codemodsquad","description":"Smart codemod scripts for day-to-day work with Material UI","archived":false,"fork":false,"pushed_at":"2023-01-05T05:15:00.000Z","size":1201,"stargazers_count":3,"open_issues_count":19,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T09:40:42.255Z","etag":null,"topics":["codemods","jscodeshift","material-ui","refactoring"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codemodsquad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-16T06:54:30.000Z","updated_at":"2023-04-02T09:24:42.000Z","dependencies_parsed_at":"2023-02-03T12:16:21.604Z","dependency_job_id":null,"html_url":"https://github.com/codemodsquad/material-ui-codemorphs","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fmaterial-ui-codemorphs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fmaterial-ui-codemorphs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fmaterial-ui-codemorphs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fmaterial-ui-codemorphs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemodsquad","download_url":"https://codeload.github.com/codemodsquad/material-ui-codemorphs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225607500,"owners_count":17495741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemods","jscodeshift","material-ui","refactoring"],"created_at":"2024-11-20T18:20:58.690Z","updated_at":"2024-11-20T18:20:59.252Z","avatar_url":"https://github.com/codemodsquad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# material-ui-codemorphs\n\n[![CircleCI](https://circleci.com/gh/codemodsquad/material-ui-codemorphs.svg?style=svg)](https://circleci.com/gh/codemodsquad/material-ui-codemorphs)\n[![Coverage Status](https://codecov.io/gh/codemodsquad/material-ui-codemorphs/branch/master/graph/badge.svg)](https://codecov.io/gh/codemodsquad/material-ui-codemorphs)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![npm version](https://badge.fury.io/js/material-ui-codemorphs.svg)](https://badge.fury.io/js/material-ui-codemorphs)\n\nSmart codemod scripts for day-to-day work with Material UI\n\n# Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [`useStyles`](#usestyles)\n  - [Special options](#special-options)\n  - [Flow Example](#flow-example)\n  - [TypeScript example](#typescript-example)\n- [`withStyles`](#withstyles)\n  - [Special options](#special-options-1)\n  - [Flow example](#flow-example)\n  - [TypeScript example](#typescript-example-1)\n- [`setupSystem`](#setupsystem)\n  - [Example](#example)\n\n\u003c!-- tocstop --\u003e\n\n# `useStyles`\n\nA `jscodeshift` transform that adds a `makeStyles` declaration and `useStyles`\nhook to a function component.\n\nSupports Flow, TypeScript, and plain JS. It's freakin great.\n\n## Special options\n\n### `selectionStart` (_optional_)\n\nThe start of the selection (e.g. in a text editor) within the source code.\nThis is used to determine which component(s) to add styles to. Without this\noption, styles will be added to all components in the file. If `selectionEnd`\nis not given, styles will only be added to the component that contains `selectionStart`.\n\n### `selectionEnd` (_optional_)\n\nThe end of the selection (e.g. in a text editor) within the source code.\nThis is used to determine which component(s) to add styles to.\n\n### `themeImport` (_optional_)\n\nOverrides the `import` statement added by `useStyles` for importing the `Theme` type definition.\nYou can also configure this by adding the following to your `package.json`:\n\n```json\n{\n  \"material-ui-codemorphs\": {\n    \"themeImport\": \"import { type Theme } from './src/universal/theme'\"\n  }\n}\n```\n\n### `makeStylesImport` (_optional_)\n\nOverrides the `import` statement added by `useStyles` for importing `makeStyles`.\nYou can also configure this by adding the following to your `package.json`:\n\n```json\n{\n  \"material-ui-codemorphs\": {\n    \"makeStylesImport\": \"import { makeStyles } from '@material-ui/core'\"\n  }\n}\n```\n\n## Flow Example\n\n### Before\n\n```js\n// @flow\n\nimport * as React from 'react'\n\nconst Test = props =\u003e (\n  // position\n  \u003cdiv\u003e{props.text}\u003c/div\u003e\n)\n```\n\n### Transform\n\n```\njscodeshift path/to/material-ui-codemorphs/useStyles.js src/Test.js \\\n  --parser=babylon \\\n  --selectionStart=95\n```\n\n### After\n\n```js\n// @flow\n\nimport * as React from 'react'\n\nimport { makeStyles } from '@material-ui/core/styles'\nimport { type Theme } from '../../src/universal/theme'\n\nconst useStyles = makeStyles((theme: Theme) =\u003e ({}))\n\nconst Test = props =\u003e {\n  const classes = useStyles(props)\n  return \u003cdiv\u003e{props.text}\u003c/div\u003e\n}\n```\n\n## TypeScript example\n\n### Before\n\n```ts\nimport * as React from 'react'\n\nconst Test = ({ text }) =\u003e (\n  // position\n  \u003cdiv\u003e{text}\u003c/div\u003e\n)\n```\n\n### Transform\n\n```\njscodeshift path/to/material-ui-codemorphs/useStyles.js src/Test.tsx \\\n  --parser=tsx \\\n  --selectionStart=95\n```\n\n### After\n\n```ts\nimport * as React from 'react'\n\nimport { makeStyles, Theme } from '@material-ui/core/styles'\n\nconst useStyles = makeStyles((theme: Theme) =\u003e ({}))\n\nconst Test = ({ text }) =\u003e {\n  const classes = useStyles()\n  return \u003cdiv\u003e{text}\u003c/div\u003e\n}\n```\n\n# `withStyles`\n\nA `jscodeshift` transform that wraps a component with `withStyles`,\nadds the `const styles = (theme: Theme) =\u003e ({ })` declaration,\nand adds a `classes` type annotation and prop destructuring if possible.\n\nSupports Flow, TypeScript, and plain JS. It's freakin great.\n\n## Special options\n\n### `selectionStart` (_optional_)\n\nThe start of the selection (e.g. in a text editor) within the source code.\nThis is used to determine which component(s) to add styles to. Without this\noption, styles will be added to all components in the file. If `selectionEnd`\nis not given, styles will only be added to the component that contains `selectionStart`.\n\n### `selectionEnd` (_optional_)\n\nThe end of the selection (e.g. in a text editor) within the source code.\nThis is used to determine which component(s) to add styles to.\n\n### `themeImport` (_optional_)\n\nOverrides the `import` statement added by `withStyles` for importing the `Theme` type definition.\nYou can also configure this by adding the following to your `package.json`:\n\n```json\n{\n  \"material-ui-codemorphs\": {\n    \"themeImport\": \"import { type Theme } from './src/universal/theme'\"\n  }\n}\n```\n\n### `withStylesImport` (_optional_)\n\nOverrides the `import` statement added by `useStyles` for importing `withStyles`.\nYou can also configure this by adding the following to your `package.json`:\n\n```json\n{\n  \"material-ui-codemorphs\": {\n    \"withStylesImport\": \"import { withStyles } from '@material-ui/core'\"\n  }\n}\n```\n\n## Flow example\n\n### Before\n\n```js\n// @flow\n\ntype Props = {\n  +text: string,\n}\n\nexport const Test = ({ text }: Props): React.Node =\u003e (\n  // position\n  \u003cdiv\u003e{text}\u003c/div\u003e\n)\n```\n\n### Transform\n\n```\njscodeshift path/to/material-ui-codemorphs/withStyles.js src/Test.js \\\n  --parser=babylon \\\n  --selectionStart=95 \\\n  --themeImport='import {type Theme} from \"./src/universal/theme\"'\n```\n\n### After\n\n```js\n// @flow\nimport { withStyles } from '@material-ui/core/styles'\n\nimport { type Theme } from '../theme'\n\ntype Classes\u003cStyles\u003e = $Call\u003c\u003cT\u003e((any) =\u003e T) =\u003e { [$Keys\u003cT\u003e]: string }, Styles\u003e\n\nconst styles = (theme: Theme) =\u003e ({})\n\ntype Props = {\n  +text: string,\n  +classes: Classes\u003ctypeof styles\u003e,\n}\n\nconst TestWithStyles = ({ text, classes }: Props): React.Node =\u003e (\n  \u003cdiv\u003e{text}\u003c/div\u003e\n)\n\nconst Test = withStyles(styles)(TestWithStyles)\n\nexport { Test }\n```\n\n## TypeScript example\n\n### Before\n\n```tsx\nimport * as React from 'react'\n\ninterface Props {\n  text: string\n}\n\nexport const Test = ({ text }: Props): React.ReactNode =\u003e (\n  // position\n  \u003cdiv\u003e{text}\u003c/div\u003e\n)\n```\n\n### Transform\n\n```\njscodeshift path/to/material-ui-codemorphs/withStyles.js src/Test.tsx \\\n  --parser=tsx \\\n  --selectionStart=95\n```\n\n### After\n\n```tsx\nimport * as React from 'react'\n\nimport { withStyles, Theme, WithStyles } from '@material-ui/core/styles'\n\ninterface Props extends WithStyles\u003ctypeof styles\u003e {\n  text: string\n}\n\nconst styles = (theme: Theme) =\u003e ({})\n\nconst TestWithStyles = ({ text, classes }: Props): React.ReactNode =\u003e (\n  \u003cdiv\u003e{text}\u003c/div\u003e\n)\n\nconst Test = withStyles(styles)(TestWithStyles)\n\nexport { Test }\n```\n\n# `setupSystem`\n\nA `jscodeshift` transform that creates or updates the declaration for `Box` and corresponding imports\nbased upon the JSX attributes you use on it.\n\n## Example\n\n### Before\n\n```js\nimport * as React from 'react'\nconst Foo = () =\u003e (\n  \u003cBox\n    sm={{ marginLeft: 2, fontSize: 12 }}\n    md={{ marginLeft: 3, fontSize: 16 }}\n  /\u003e\n)\nconst Bar = () =\u003e \u003cBox boxShadow={1} /\u003e\n```\n\n### Transform\n\n```\njscodeshift -t path/to/material-ui-codemorphs/setupSystem.js test.js\n```\n\n### After\n\n```js\nimport * as React from 'react'\nimport { styled } from '@material-ui/styles'\nimport {\n  spacing,\n  typography,\n  shadows,\n  breakpoints,\n  compose,\n} from '@material-ui/system'\nconst Box = styled('div')(breakpoints(compose(shadows, spacing, typography)))\nconst Foo = () =\u003e (\n  \u003cBox\n    sm={{ marginLeft: 2, fontSize: 12 }}\n    md={{ marginLeft: 3, fontSize: 16 }}\n  /\u003e\n)\nconst Bar = () =\u003e \u003cBox boxShadow={1} /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemodsquad%2Fmaterial-ui-codemorphs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemodsquad%2Fmaterial-ui-codemorphs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemodsquad%2Fmaterial-ui-codemorphs/lists"}