Releases

Codemod to RENAME Gestalt components

Example: transforms first code (top) into second code (bottom)

import { Flyout } from 'gestalt'

<Flyout />

import { Popover } from 'gestalt'

<Popover />

To run this codemod, use the following command in your terminal:

yarn codemod renameComponent ~/path/to/your/code
  --componentName=string
  --nextComponentName=string

Arguments:

• --componentName: current component name to be replaced
• --nextComponentName: new component name to replace with

Both componentName & nextComponentName are required.

Example:

yarn codemod renameComponent ~/code/pinboard/webapp
--componentName=Flyout
--nextComponentName=Popover

See codemod code: renameComponent

Codemod to MODIFY (REPLACE or REMOVE) Gestalt component props.

Example (REPLACE): transforms first code (top) into second code (bottom)

import { Box } from 'gestalt'

<Box size="" />

import { Box } from 'gestalt'

<Box renamedSize="" />

Example (REMOVE): transforms first code (top) into second code (bottom)

import { Box } from 'gestalt'

<Box size="" />

import { Box } from 'gestalt'

<Box />

To run this codemod, use the following command in your terminal:

yarn codemod modifyProp ~/path/to/your/code
--component=string
--subcomponent=string
--previousProp=string
--nextProp=string

Arguments:

• --component: component to which modify props
• --subcomponent (optional): component's subcomponent to which modify props
• --previousProp: current prop name to be replaced
• --nextProp (optional): new prop name to replace with

If all options are passed, previousProp is replaced with nextProp (REPLACE)
In the absence of nextProp, the codemod removes previousProp (REMOVE)

Examples (REPLACE):

yarn codemod modifyProp ~/code/pinboard/webapp
--component=Box
--previousProp=size
--nextProp=renamedSize

yarn codemod modifyProp ~/code/pinboard/webapp
--component=Dropdown
--subcomponent=Item
--previousProp=size
--nextProp=renamedSize

Example (REMOVE):

yarn codemod modifyProp ~/code/pinboard/webapp
--component=Box
--previousProp=size

See codemod code: modifyProp

Codemod to MODIFY (REPLACE, ADD, or REMOVE) prop-value combinations in Gestalt component. It supports string, number, and boolean values.

Example (REPLACE): transforms first code (top) into second code (bottom)

import { Box } from 'gestalt'

<Box color="red" />

import { Box } from 'gestalt'

<Box variant="error" />

Example (ADD): transforms first code (top) into second code (bottom)

import { Box } from 'gestalt'

<Box />

import { Box } from 'gestalt'

<Box variant="error"/>

Example (REMOVE): transforms first code (top) into second code (bottom)

import { Box } from 'gestalt'

<Box color="red"   />

import { Box } from 'gestalt'

<Box />

To run this codemod, use the following command in your terminal:

* yarn codemod modifyPropValue ~/path/to/your/code
 * --component=string
 * --subcomponent=string
 * --previousProp=string
 * --nextProp=string
 * --previousValue=string|number|boolean
 * --nextValue=string|number|boolean

Arguments:

• --component: component to which modify props
• --subcomponent (optional): component's subcomponent to which modify props
• --previousProp (optional): current prop name to be replaced
• --nextProp (optional): new prop name to replace with, null if we want to remove prop
• --previousValue (optional): current prop name to be replaced
• --nextValue (optional): new prop name to replace with, null if we want to remove prop

If all options passed, prop+value combination are replaced with new prop+value combination (REPLACE)
In the absence of nextProp, the codemod only replaces the prop value (REPLACE)
In the absence of nextValue, the codemod only replaces the prop name for that prop+value combination (REPLACE)
In the absence of previousProp & previousValue, the codemod adds a new prop with value (ADD)
In the absence of nextProp & nextValue, the codemod removes the prop with that particular value (REMOVE)

Examples (REPLACE):

yarn codemod modifyPropValue ~/code/pinboard/webapp
--component=Box
--previousProp=color
--nextProp=variant
--previousValue=400
--nextValue=error

yarn codemod modifyPropValue ~/code/pinboard/webapp
--component=Box
--previousProp=color
--previousValue=400
--nextValue=error

yarn codemod modifyPropValue ~/code/pinboard/webapp
--component=Box
--previousProp=color
--nextProp=variant
--previousValue=400

Example (ADD):

yarn codemod modifyPropValue ~/code/pinboard/webapp
--component=Box
--nextProp=variant
--nextValue=error

Example (REMOVE):

yarn codemod modifyPropValue ~/code/pinboard/webapp
--component=Box
--previousProp=color
--previousValue=red

See codemod code: modifyPropValue

Codemod to DETECT COMPLEX MANUAL CHANGES of components, props, and prop-value combinations in Gestalt components. The codemod throws error messages upon detection of matching instances. Supports string, number, and boolean values.

Example: throws an error when detects that the arguments matching in code (top) so that engingeers can manually refactor the code.

import { Icon } from 'gestalt'

<Icon icon="warning" />

import { Status } from 'gestalt'

<Status icon="warning" size="sm" />

To run this codemod, use the following command in your terminal:

yarn codemod detectManualReplacement ~/path/to/your/code
--component=string
--subcomponent=string
--prop=string
--value=string|number|boolean

Arguments:

• --component: component to which modify props
• --subcomponent (optional): component's subcomponent to which modify props
• --prop (optional): current prop name to be replaced
• --value (optional): new prop name to replace with, null if we want to remove prop

If all options are passed, previousProp is replaced with nextProp (REPLACE)
In the absence of nextProp, the codemod removes previousProp (REMOVE)

Example:

yarn codemod detectManualReplacement ~/code/pinboard/webapp
--component=Box
--prop=color
value=error

See codemod code: detectManualReplacement