https://github.com/codemodsquad/material-ui-codemorphs
Smart codemod scripts for day-to-day work with Material UI
https://github.com/codemodsquad/material-ui-codemorphs
codemods jscodeshift material-ui refactoring
Last synced: 3 months ago
JSON representation
Smart codemod scripts for day-to-day work with Material UI
- Host: GitHub
- URL: https://github.com/codemodsquad/material-ui-codemorphs
- Owner: codemodsquad
- License: mit
- Created: 2020-01-16T06:54:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:15:00.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T09:40:42.255Z (over 1 year ago)
- Topics: codemods, jscodeshift, material-ui, refactoring
- Language: TypeScript
- Homepage:
- Size: 1.15 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# material-ui-codemorphs
[](https://circleci.com/gh/codemodsquad/material-ui-codemorphs)
[](https://codecov.io/gh/codemodsquad/material-ui-codemorphs)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/material-ui-codemorphs)
Smart codemod scripts for day-to-day work with Material UI
# Table of Contents
- [`useStyles`](#usestyles)
- [Special options](#special-options)
- [Flow Example](#flow-example)
- [TypeScript example](#typescript-example)
- [`withStyles`](#withstyles)
- [Special options](#special-options-1)
- [Flow example](#flow-example)
- [TypeScript example](#typescript-example-1)
- [`setupSystem`](#setupsystem)
- [Example](#example)
# `useStyles`
A `jscodeshift` transform that adds a `makeStyles` declaration and `useStyles`
hook to a function component.
Supports Flow, TypeScript, and plain JS. It's freakin great.
## Special options
### `selectionStart` (_optional_)
The start of the selection (e.g. in a text editor) within the source code.
This is used to determine which component(s) to add styles to. Without this
option, styles will be added to all components in the file. If `selectionEnd`
is not given, styles will only be added to the component that contains `selectionStart`.
### `selectionEnd` (_optional_)
The end of the selection (e.g. in a text editor) within the source code.
This is used to determine which component(s) to add styles to.
### `themeImport` (_optional_)
Overrides the `import` statement added by `useStyles` for importing the `Theme` type definition.
You can also configure this by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"themeImport": "import { type Theme } from './src/universal/theme'"
}
}
```
### `makeStylesImport` (_optional_)
Overrides the `import` statement added by `useStyles` for importing `makeStyles`.
You can also configure this by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"makeStylesImport": "import { makeStyles } from '@material-ui/core'"
}
}
```
## Flow Example
### Before
```js
// @flow
import * as React from 'react'
const Test = props => (
// position
{props.text}
)
```
### Transform
```
jscodeshift path/to/material-ui-codemorphs/useStyles.js src/Test.js \
--parser=babylon \
--selectionStart=95
```
### After
```js
// @flow
import * as React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { type Theme } from '../../src/universal/theme'
const useStyles = makeStyles((theme: Theme) => ({}))
const Test = props => {
const classes = useStyles(props)
return
{props.text}
}
```
## TypeScript example
### Before
```ts
import * as React from 'react'
const Test = ({ text }) => (
// position
{text}
)
```
### Transform
```
jscodeshift path/to/material-ui-codemorphs/useStyles.js src/Test.tsx \
--parser=tsx \
--selectionStart=95
```
### After
```ts
import * as React from 'react'
import { makeStyles, Theme } from '@material-ui/core/styles'
const useStyles = makeStyles((theme: Theme) => ({}))
const Test = ({ text }) => {
const classes = useStyles()
return
{text}
}
```
# `withStyles`
A `jscodeshift` transform that wraps a component with `withStyles`,
adds the `const styles = (theme: Theme) => ({ })` declaration,
and adds a `classes` type annotation and prop destructuring if possible.
Supports Flow, TypeScript, and plain JS. It's freakin great.
## Special options
### `selectionStart` (_optional_)
The start of the selection (e.g. in a text editor) within the source code.
This is used to determine which component(s) to add styles to. Without this
option, styles will be added to all components in the file. If `selectionEnd`
is not given, styles will only be added to the component that contains `selectionStart`.
### `selectionEnd` (_optional_)
The end of the selection (e.g. in a text editor) within the source code.
This is used to determine which component(s) to add styles to.
### `themeImport` (_optional_)
Overrides the `import` statement added by `withStyles` for importing the `Theme` type definition.
You can also configure this by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"themeImport": "import { type Theme } from './src/universal/theme'"
}
}
```
### `withStylesImport` (_optional_)
Overrides the `import` statement added by `useStyles` for importing `withStyles`.
You can also configure this by adding the following to your `package.json`:
```json
{
"material-ui-codemorphs": {
"withStylesImport": "import { withStyles } from '@material-ui/core'"
}
}
```
## Flow example
### Before
```js
// @flow
type Props = {
+text: string,
}
export const Test = ({ text }: Props): React.Node => (
// position
{text}
)
```
### Transform
```
jscodeshift path/to/material-ui-codemorphs/withStyles.js src/Test.js \
--parser=babylon \
--selectionStart=95 \
--themeImport='import {type Theme} from "./src/universal/theme"'
```
### After
```js
// @flow
import { withStyles } from '@material-ui/core/styles'
import { type Theme } from '../theme'
type Classes = $Call<((any) => T) => { [$Keys]: string }, Styles>
const styles = (theme: Theme) => ({})
type Props = {
+text: string,
+classes: Classes,
}
const TestWithStyles = ({ text, classes }: Props): React.Node => (
{text}
)
const Test = withStyles(styles)(TestWithStyles)
export { Test }
```
## TypeScript example
### Before
```tsx
import * as React from 'react'
interface Props {
text: string
}
export const Test = ({ text }: Props): React.ReactNode => (
// position
{text}
)
```
### Transform
```
jscodeshift path/to/material-ui-codemorphs/withStyles.js src/Test.tsx \
--parser=tsx \
--selectionStart=95
```
### After
```tsx
import * as React from 'react'
import { withStyles, Theme, WithStyles } from '@material-ui/core/styles'
interface Props extends WithStyles {
text: string
}
const styles = (theme: Theme) => ({})
const TestWithStyles = ({ text, classes }: Props): React.ReactNode => (
{text}
)
const Test = withStyles(styles)(TestWithStyles)
export { Test }
```
# `setupSystem`
A `jscodeshift` transform that creates or updates the declaration for `Box` and corresponding imports
based upon the JSX attributes you use on it.
## Example
### Before
```js
import * as React from 'react'
const Foo = () => (
)
const Bar = () =>
```
### Transform
```
jscodeshift -t path/to/material-ui-codemorphs/setupSystem.js test.js
```
### After
```js
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 = () =>
```