@backyard-ui/codemod v1.1.0

Backyard Codemods

Backyard Codemods is a collection of codemod scripts written with JSCodeshift. It will help you migrate breaking changes & deprecations.

Usage

npx @backyard-ui/codemod migrate

Transformers

import-names

Find all import declarations @leroy-merlin-br/* and update with @backyard-ui/*

Note Make sure to run this codemod before all

Example:

import { Button } from '@leroy-merlin-br/react';

Becomes

import { Button } from '@backyard-ui/core';

button-size

Update the size prop with the new values xs, sm, and etc.

Example:

<Button size="kilo">Backyard</Button>

Becomes

<Button size="xs">Backyard</Button>

container-size

Update the Container with the new size prop.

<Container />

Becomes

<Container size="6xl" />

motion-heading

Update the Heading with new props, sizes, and colors.

<Button color="b100">Backyard</Button>
<Button size="kilo">Backyard</Button>

Becomes

<Button color="blue-100">Backyard</Button>
<Button size="lg">Backyard</Button>

motion-text

Update the Text with new props, size, colors, weight, and transform.

<Text color="b100">Backyard</Text>
<Text size="kilo">Backyard</Text>
<Text isBold>Backyard</Text>
<Text isCasing>Backyard</Text>

Becomes

<Text color="blue-100">Backyard</Text>
<Text size="md">Backyard</Text>
<Text weight="semibold">Backyard</Text>
<Text transform="uppercase">Backyard</Text>

motion-icon

Update the Icon with new props, appearance, and size.

<Icon color="critical">
  <BeakerIcon />
</Icon>
<Icon size="kilo">
  <BeakerIcon />
</Icon>

Becomes

<Icon appearance="critical">
  <BeakerIcon />
</Icon>
<Icon size="xs">
  <BeakerIcon />
</Icon>

spinner

Update the size prop with the new values xs, sm, and etc.

<Spinner size="kilo" />

Becomes

<Spinner size="xs" />

stack-motion

Replace the deprecated Inline with the Stack.

<Inline />

Becomes

<Stack />

Note If a Stack been presents their become to <Stack direction="column" />