https://github.com/vscodeshift/material-ui-codemorphs
sweet codemod commands for everyday work with Material UI
https://github.com/vscodeshift/material-ui-codemorphs
codemods jscodeshift material-ui vscode vscode-extension
Last synced: 3 months ago
JSON representation
sweet codemod commands for everyday work with Material UI
- Host: GitHub
- URL: https://github.com/vscodeshift/material-ui-codemorphs
- Owner: vscodeshift
- License: mit
- Created: 2020-01-17T23:38:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:29:43.000Z (over 2 years ago)
- Last Synced: 2023-03-06T12:17:14.402Z (over 2 years ago)
- Topics: codemods, jscodeshift, material-ui, vscode, vscode-extension
- Language: TypeScript
- Size: 4.29 MB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @vscodeshift/material-ui-codemorphs
[](https://circleci.com/gh/vscodeshift/material-ui-codemorphs)
[](https://codecov.io/gh/vscodeshift/material-ui-codemorphs)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs)
sweet codemod commands for everyday work with Material UI ✨
# Commands
## Add useStyles hook
Position the cursor inside a funcitonal component before running this command.
Wraps the functional component in `withStyles`,
adds a `const styles = (theme: Theme) => ({ })` declaration,
and adds a `classes` type annotation and prop destructuring if possible.
Supports Flow, TypeScript, and plain JS!
### Configuration
You can override where the `Theme` type is imported from by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"themeImport": "import { type Theme } from './src/universal/theme'"
}
}
```
You can override where `makeStyles` is imported from by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"makeStylesImport": "import { makeStyles } from '@material-ui/core'"
}
}
```
### Example
```tsx
import * as React from 'react'
interface Props {
text: string
}
export const Test = ({ text }: Props): React.ReactNode =>
{text}
```
```diff
import * as React from 'react'
+ import { makeStyles, Theme } from '@material-ui/core/styles'
interface Props {
text: string
}
+ const useStyles = makeStyles((theme: Theme) => ({}))
- export const Test = ({ text }: Props): React.ReactNode => (
-
{text}
- )
+ export const Test = ({ text }: Props): React.ReactNode => {
+ const classes = useStyles()
+ return {text}
+ }
```
## Wrap in withStyles
Position the cursor inside a component before running this command.
Wraps the component in `withStyles`,
adds a `const styles = (theme: Theme) => ({ })` declaration,
and adds a `classes` type annotation and prop destructuring if possible.
Supports Flow, TypeScript, and plain JS!
### Configuration
You can override where the `Theme` type is imported from by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"themeImport": "import { type Theme } from './src/universal/theme'"
}
}
```
You can override where `withStyles` is imported from by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"withStylesImport": "import { withStyles } from '@material-ui/core'"
}
}
```
### Example
```tsx
import * as React from 'react'
interface Props {
text: string
}
const Test = ({ text }: Props): React.ReactNode => {
return
{text}
}
```
```diff
import * as React from 'react'
+ import { withStyles, Theme, WithStyles } from '@material-ui/core/styles'
- interface Props {
+ interface Props extends WithStyles {
text: string
}
+ const styles = (theme: Theme) => ({})
- const Test = ({ text }: Props): React.ReactNode => {
+ const TestWithStyles = ({ text, classes }: Props): React.ReactNode => {
{text}
}
+ const Test = withStyles(styles)(TestWithStyles)
```
## Box (Set up @material-ui/system)
Creates/updates the declaration for `Box` based upon which props you pass to
`` elements in your code.
### Example
```js
import * as React from 'react'
const Foo = () => (
)
const Bar = () =>
```
```diff
import * as React from 'react'
+ import { styled } from '@material-ui/styles'
+ import {
+ spacing,
+ typography,
+ shadows,
+ breakpoints,
+ compose,
+ } from '@material-ui/system'
+ const Box = styled('div')(breakpoints(compose(shadows, spacing, typography)))
const Foo = () => (
)
const Bar = () =>
```