{"id":23174590,"url":"https://github.com/vscodeshift/material-ui-codemorphs","last_synced_at":"2025-07-12T23:37:29.593Z","repository":{"id":40783782,"uuid":"234654991","full_name":"vscodeshift/material-ui-codemorphs","owner":"vscodeshift","description":"sweet codemod commands for everyday work with Material UI","archived":false,"fork":false,"pushed_at":"2023-01-07T04:29:43.000Z","size":4495,"stargazers_count":10,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-06T12:17:14.402Z","etag":null,"topics":["codemods","jscodeshift","material-ui","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":null,"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/vscodeshift.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-17T23:38:06.000Z","updated_at":"2021-03-26T06:44:22.000Z","dependencies_parsed_at":"2023-02-06T11:46:20.737Z","dependency_job_id":null,"html_url":"https://github.com/vscodeshift/material-ui-codemorphs","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-codemorphs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-codemorphs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-codemorphs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-codemorphs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vscodeshift","download_url":"https://codeload.github.com/vscodeshift/material-ui-codemorphs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230223272,"owners_count":18192732,"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","vscode","vscode-extension"],"created_at":"2024-12-18T05:30:18.326Z","updated_at":"2024-12-18T05:30:37.590Z","avatar_url":"https://github.com/vscodeshift.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @vscodeshift/material-ui-codemorphs\n\n[![CircleCI](https://circleci.com/gh/vscodeshift/material-ui-codemorphs.svg?style=svg)](https://circleci.com/gh/vscodeshift/material-ui-codemorphs)\n[![Coverage Status](https://codecov.io/gh/vscodeshift/material-ui-codemorphs/branch/master/graph/badge.svg)](https://codecov.io/gh/vscodeshift/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[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.material-ui-codemorphs)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs)\n\nsweet codemod commands for everyday work with Material UI ✨\n\n# Commands\n\n## Add useStyles hook\n\nPosition the cursor inside a funcitonal component before running this command.\n\nWraps the functional component in `withStyles`,\nadds a `const styles = (theme: Theme) =\u003e ({ })` declaration,\nand adds a `classes` type annotation and prop destructuring if possible.\n\nSupports Flow, TypeScript, and plain JS!\n\n### Configuration\n\nYou can override where the `Theme` type is imported from 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\nYou can override where `makeStyles` is imported from 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### Example\n\n```tsx\nimport * as React from 'react'\n\ninterface Props {\n  text: string\n}\n\nexport const Test = ({ text }: Props): React.ReactNode =\u003e \u003cdiv\u003e{text}\u003c/div\u003e\n```\n\n![addStyles command](addStyles.png)\n\n```diff\nimport * as React from 'react'\n\n+ import { makeStyles, Theme } from '@material-ui/core/styles'\n\ninterface Props {\n  text: string\n}\n\n+ const useStyles = makeStyles((theme: Theme) =\u003e ({}))\n\n- export const Test = ({ text }: Props): React.ReactNode =\u003e (\n-   \u003cdiv\u003e{text}\u003c/div\u003e\n- )\n+ export const Test = ({ text }: Props): React.ReactNode =\u003e {\n+   const classes = useStyles()\n+   return \u003cdiv\u003e{text}\u003c/div\u003e\n+ }\n```\n\n## Wrap in withStyles\n\nPosition the cursor inside a component before running this command.\n\nWraps the component in `withStyles`,\nadds a `const styles = (theme: Theme) =\u003e ({ })` declaration,\nand adds a `classes` type annotation and prop destructuring if possible.\n\nSupports Flow, TypeScript, and plain JS!\n\n### Configuration\n\nYou can override where the `Theme` type is imported from 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\nYou can override where `withStyles` is imported from 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### Example\n\n```tsx\nimport * as React from 'react'\n\ninterface Props {\n  text: string\n}\n\nconst Test = ({ text }: Props): React.ReactNode =\u003e {\n  return \u003cdiv\u003e{text}\u003c/div\u003e\n}\n```\n\n![withStyles command](withStyles.png)\n\n```diff\nimport * as React from 'react'\n\n+ import { withStyles, Theme, WithStyles } from '@material-ui/core/styles'\n\n- interface Props {\n+ interface Props extends WithStyles\u003ctypeof styles\u003e {\n  text: string\n}\n\n+ const styles = (theme: Theme) =\u003e ({})\n\n- const Test = ({ text }: Props): React.ReactNode =\u003e {\n+ const TestWithStyles = ({ text, classes }: Props): React.ReactNode =\u003e {\n  \u003cdiv\u003e{text}\u003c/div\u003e\n}\n\n+ const Test = withStyles(styles)(TestWithStyles)\n```\n\n## Box (Set up @material-ui/system)\n\nCreates/updates the declaration for `Box` based upon which props you pass to\n`\u003cBox\u003e` elements in your code.\n\n### Example\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![box command](box.png)\n\n```diff\nimport * as React from 'react'\n+ import { styled } from '@material-ui/styles'\n+ import {\n+   spacing,\n+   typography,\n+   shadows,\n+   breakpoints,\n+   compose,\n+ } from '@material-ui/system'\n+ const 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%2Fvscodeshift%2Fmaterial-ui-codemorphs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvscodeshift%2Fmaterial-ui-codemorphs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvscodeshift%2Fmaterial-ui-codemorphs/lists"}