@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:

{
  "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:

{
  "material-ui-codemorphs": {
    "makeStylesImport": "import { makeStyles } from '@material-ui/core'"
  }
}

Example

import * as React from 'react'

interface Props {
  text: string
}

export const Test = ({ text }: Props): React.ReactNode => <div>{text}</div>

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 => (
-   <div>{text}</div>
- )
+ export const Test = ({ text }: Props): React.ReactNode => {
+   const classes = useStyles()
+   return <div>{text}</div>
+ }

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:

{
  "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:

{
  "material-ui-codemorphs": {
    "withStylesImport": "import { withStyles } from '@material-ui/core'"
  }
}

Example

import * as React from 'react'

interface Props {
  text: string
}

const Test = ({ text }: Props): React.ReactNode => {
  return <div>{text}</div>
}

import * as React from 'react'

+ import { withStyles, Theme, WithStyles } from '@material-ui/core/styles'

- interface Props {
+ interface Props extends WithStyles<typeof styles> {
  text: string
}

+ const styles = (theme: Theme) => ({})

- const Test = ({ text }: Props): React.ReactNode => {
+ const TestWithStyles = ({ text, classes }: Props): React.ReactNode => {
  <div>{text}</div>
}

+ const Test = withStyles(styles)(TestWithStyles)

Box (Set up @material-ui/system)

Creates/updates the declaration for Box based upon which props you pass to <Box> elements in your code.

Example

import * as React from 'react'
const Foo = () => (
  <Box
    sm={{ marginLeft: 2, fontSize: 12 }}
    md={{ marginLeft: 3, fontSize: 16 }}
  />
)
const Bar = () => <Box boxShadow={1} />

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 = () => (
  <Box
    sm={{ marginLeft: 2, fontSize: 12 }}
    md={{ marginLeft: 3, fontSize: 16 }}
  />
)
const Bar = () => <Box boxShadow={1} />

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No vsce personal access token specified. (set env "VSCE_TOKEN")

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the semantic-release-vsce plugin to add more helpful information.

Good luck with your project ✨

Your semantic-release bot 📦🚀

vscodeshift / material-ui-codemorphs Goto Github PK

material-ui-codemorphs's Introduction

@vscodeshift/material-ui-codemorphs

Commands

Add useStyles hook

Configuration

Example

Wrap in withStyles

Configuration

Example

Box (Set up @material-ui/system)

Example

material-ui-codemorphs's People

Contributors

Stargazers

Watchers

Forkers

material-ui-codemorphs's Issues

🚨 The automated release from the master branch failed. 🚨

No vsce personal access token specified. (set env "VSCE_TOKEN")

Recommend Projects

Recommend Topics

Recommend Org

🚨 The automated release from the `master` branch failed. 🚨