@toptal/picasso-codemod v6.0.0
@toptal/picasso-codemod
Codemod scripts for Picasso
This repository contains a collection of codemod scripts based for use with JSCodeshift that help update Picasso APIs.
Usage:
npx @toptal/picasso-codemod <codemod> [<files>] [options]
@toptal/picasso-codemod can detect what type of repository you use and select files automatically for you.
For monorepo
it looks through following paths:
*libs/*/src/**/*.tsx
*hosts/*/src/**/*.tsx
*apps/*/src/**/*.tsx
*namespaces/*/libs/*/src/**/*.tsx
*namespaces/*/apps/*/src/**/*.tsx
and for SPA
it checks:
src/**/*.tsx
If your repository follows a different structure, you can specify
path to your files as a second parameter (files
) shown in the usage
command.
Limitations
Codemods do not guarantee the code format preservation. Therefore be sure to run prettier
and eslint
on your repo after applying a codemod. Take a look here to learn more about the issue.
Included Scripts
v40.0.0
Replaces spacing property values of Container
and Dropdown
components with BASE-aligned property values according to the https://github.com/toptal/picasso/blob/master/docs/decisions/18-spacings.md. Property values that do not have BASE counterpart or are complex expressions have to be updated manually (non-BASE values have to be replaced with BASE ones after consulting with Design Team), codemod outputs the list of such cases for convenience. Run linter or prettier to align updated code with project code style
npx @toptal/picasso-codemod v40.0.0@latest
v36.0.0
Replaces all imports of RichTextEditor related components to @toptal/picasso-rich-text-editor
and updates package.json with a new version of @toptal/picasso
, @toptal/picasso-rich-text-editor
and @toptal/picasso-forms
npx @toptal/picasso-codemod v36.0.0 --run-in-band
v52.2.0
Replaces compound Form
with FormNonCompound
and adjusts all the compound components to be directly imported from picasso-forms
.
non-compound-forms
-<Form>
- <Form.Input/>
- <Form.CheckboxGroup>
- <Form.Checkbox/>
- </Form.CheckboxGroup>
-</Form>
+<FormNonCompound>
+ <Input/>
+ <CheckboxGroup>
+ <Checkbox/>
+ </CheckboxGroup>
+</FormNonCompound>
npx @toptal/picasso-codemod v52.2.0/non-compound-forms src/**/*.tsx
v24.0.0
Replaces imports and components from Sidebar
to Page.Sidebar
page-sidebar
-<Sidebar>
- <Sidebar.Logo>Foo</Sidebar.Logo>
- <Sidebar.Menu>
- <Sidebar.Item></Sidebar.Item>
- </Sidebar.Menu>
-</Sidebar>
+<Page.Sidebar>
+ <Page.Sidebar.Logo>Foo</Page.Sidebar.Logo>
+ <Page.Sidebar.Menu>
+ <Page.Sidebar.Item></Page.Sidebar.Item>
+ </Page.Sidebar.Menu>
+</Page.Sidebar>
npx @toptal/picasso-codemod v24.0.0/page-sidebar
v20.0.0
remove-tooltip-variant
Removes tooltip variant
-<Tooltip open variant='dark' />
+<Tooltip open />
-<Tooltip open variant='light' />
+<Tooltip open />
npx @toptal/picasso-codemod v20.0.0/remove-tooltip-variant
replace-error
Replaces error
prop with status
prop for input components that supports error
prop: Input
, NumberInput
, Autocomplete
, PasswordInput
, DatePicker
, TimePicker
, Select
and TagSelector
-<Input error={true} />
+<Input status='error' />
-<Input error={error} />
+<Input status={error ? 'error' : 'default'} />
-<Input error={hasError || isValid} />
+<Input status={hasError || isValid ? 'error' : 'default'} />
npx @toptal/picasso-codemod v20.0.0/replace-error
overlay-badge
Rename the removed OverlayBadge
to Badge
, Badge
now has functionality from
both components. We also add an prop size
as medium
in previous
OverlayBadge
s if size
is missing, this is because the default for Badge
is
actually large
-import { OverlayBadge } from '@toptal/picasso'
+import { Badge } from '@toptal/picasso'
const foo = () => (
- <OverlayBadge>
- <Avatar />
- </OverlayBadge>
+ <Badge size="medium">
+ <Avatar />
+ </Badge>
)
v19.0.0
rename-rating-stars
Transforms old Rating
and Form.Ratings
to their new names, Rating.Stars
and Form.Rating.Stars
-<Rating />
+<Rating.Stars />
-<Form.Rating />
+<Form.Rating.Stars />
npx @toptal/picasso-codemod v19.0.0/rename-rating-stars
v18.0.0
picasso-lab
Merges picasso-lab
imports into picasso
and replaces picasso-lab
reference with picasso
.
Note: Some edge cases are not covered.
If imports cannot be resolved, user will be shown with the warning - which files cannot be updated and needs manual inspection.
Here's how the diff should look like:
-import { Component1, Component2 } from '@toptal/picasso-lab'
+import { Component1, Component2 } from '@toptal/picasso'
-import * as NamespaceImport from '@toptal/picasso-lab'
+import * as NamespaceImport from '@toptal/picasso'
-import { Component1 } from '@toptal/picasso'
-import { Component2 } from '@toptal/picasso-lab'
+import { Component1, Component2 } from '@toptal/picasso'
-import { Component1 } from '@toptal/picasso'
-// unresolved import
-import { Component2 } from '@toptal/picasso-lab'
+import { Component1 } from '@toptal/picasso'
+// unresolved import
+import { Component2 } from '@toptal/picasso'
npx @toptal/picasso-codemod v18.0.0/picasso-lab
v17.0.0
typography-sizes
Transforms Typography
, TypographyOverflow
and Amount
size prop from 'small' | 'xsmall'
to 'xsmall' | 'xxsmall'
.
This change only applies to variant body
(which is default)
Remember to run this codemod only once in your structure!
Because in first run:
small --> xsmall
but in second run:
xsmall --> xxsmall
If you need to run it again, revert/checkout previous changes
Here's how the diff should look like:
-<Typography size='small'>Text</Typography>
+<Typography size='xsmall'>Text</Typography>
-<Typography size='xsmall'>Text</Typography>
+<Typography size='xxsmall'>Text</Typography>
-<Typography size={condition ? 'small' : 'xsmall'}>Text</Typography>
+<Typography size={condition ? 'xsmall' : 'xxsmall'}>Text</Typography>
-<TypographyOverflow size='small'>Text</TypographyOverflow>
+<TypographyOverflow size='xsmall'>Text</TypographyOverflow>
-<TypographyOverflow size='xsmall'>Text</TypographyOverflow>
+<TypographyOverflow size='xxsmall'>Text</TypographyOverflow>
-<TypographyOverflow size={condition ? 'small' : 'xsmall'}>Text</TypographyOverflow>
+<TypographyOverflow size={condition ? 'xsmall' : 'xxsmall'}>Text</TypographyOverflow>
-<Amount size='small'>Text</Amount>
+<Amount size='xsmall'>Text</Amount>
-<Amount size='xsmall'>Text</Amount>
+<Amount size='xxsmall'>Text</Amount>
-<Amount size={condition ? 'small' : 'xsmall'}>Text</Amount>
+<Amount size={condition ? 'xsmall' : 'xxsmall'}>Text</Amount>
npx @toptal/picasso-codemod v17.0.0/typography-sizes
In case you use wrapper components for Typography
codemod by default checks only Typography
, TypographyOverflow
and Amount
components.
If you want to include other components, you need to:
- create a json file and put your components in it:
{
"includeComponents": ["Foo", "Bar"]
}
- run command with
--parser-config
param:
npx @toptal/picasso-codemod v17.0.0/typography-sizes --parser-config=path/to/your/config.json
container-borders
Removes bordered
prop from Container
components with all colored variants.
Here's how the diff should look like:
-<Container variant='red' bordered>text</Container>
+<Container variant='red'>text</Container>
-<Container variant='green' bordered>text</Container>
+<Container variant='green'>text</Container>
-<Container variant='yellow' bordered>text</Container>
+<Container variant='yellow'>text</Container>
-<Container variant='blue' bordered>text</Container>
+<Container variant='blue'>text</Container>
-<Container variant='grey' bordered>text</Container>
+<Container variant='grey'>text</Container>
npx @toptal/picasso-codemod v17.0.0/container-borders
v16.0.0
revert-colors
Transforms props with ColorType
for the Tag.Rectangular
, Tag
and Indicator
from 'dark' | 'positive' | 'light' | 'negative' | 'warning' | 'primary'
to 'red' | 'yellow' | 'dark-grey' | 'light-grey' | 'green' | 'blue'
.
The diff should look like this:
-<Tag variant='negative'>Label</Tag>
-<Tag variant='warning'>Label</Tag>
-<Tag variant='primary'>Label</Tag>
-<Tag variant='positive'>Label</Tag>
-<Tag variant='light'>Label</Tag>
+<Tag variant='red'>Label</Tag>
+<Tag variant='yellow'>Label</Tag>
+<Tag variant='blue'>Label</Tag>
+<Tag variant='green'>Label</Tag>
+<Tag variant='light-grey'>Label</Tag>
-<Tag.Rectangular variant='negative'>Label</Tag.Rectangular>
-<Tag.Rectangular variant='warning'>Label</Tag.Rectangular>
-<Tag.Rectangular variant='dark'>Label</Tag.Rectangular>
-<Tag.Rectangular variant='positive'>Label</Tag.Rectangular>
-<Tag.Rectangular variant='light'>Label</Tag.Rectangular>
+<Tag.Rectangular variant='red'>Label</Tag.Rectangular>
+<Tag.Rectangular variant='yellow'>Label</Tag.Rectangular>
+<Tag.Rectangular variant='dark-grey'>Label</Tag.Rectangular>
+<Tag.Rectangular variant='green'>Label</Tag.Rectangular>
+<Tag.Rectangular variant='light-grey'>Label</Tag.Rectangular>
-<Indicator color='negative' />
-<Indicator color='warning' />
-<Indicator color='primary' />
-<Indicator color='positive' />
-<Indicator color='light' />
+<Indicator color='red' />
+<Indicator color='yellow' />
+<Indicator color='blue' />
+<Indicator color='green' />
+<Indicator color='light-grey' />
npx @toptal/picasso-codemod v16.0.0/revert-colors
v5.0.0
prompt-modal-variants
Updates the PromptModal variant prop from red | green | blue
to positive | negative
.
The diff should look like this:
-<PromptModal title="Title" message="message" onSubmit={handleSubmit} open={isOpen} variant='red' />
-<PromptModal title="Title" message="message" onSubmit={handleSubmit} open={isOpen} variant='blue' />
-<PromptModal title="Title" message="message" onSubmit={handleSubmit} open={isOpen} variant='green' />
+<PromptModal title="Title" message="message" onSubmit={handleSubmit} open={isOpen} variant='negative' />
+<PromptModal title="Title" message="message" onSubmit={handleSubmit} open={isOpen} variant='positive' />
+<PromptModal title="Title" message="message" onSubmit={handleSubmit} open={isOpen} variant='positive' />
npx @toptal/picasso-codemod v5.0.0/prompt-modal-variants
label-tag
Renames occurrences of Label
to Tag
.
- import { Label } from '@toptal/picasso'
+ import { Tag } from '@toptal/picasso'
const Example = () => (
- <Label.Group>
+ <Tag.Group>
- <Label>Angular JS</Label>
+ <Tag>Angular JS</Tag>
- <Label>React JS</Label>
+ <Tag>React JS</Tag>
- <Label onDelete={handleDelete}>Ember JS</Label>
+ <Tag onDelete={handleDelete}>Ember JS</Tag>
- <Label>Vue JS</Label>
+ <Tag>Vue JS</Tag>
- </Label.Group>
+ </Tag.Group>
)
npx @toptal/picasso-codemod v5.0.0/label-tag
accordion-borders
Updates the Accordion prop bordered?: boolean
to borders: 'all' | 'none'
.
The diff should look like this:
-<Accordion content='Accordion content' bordered>Summary</Accordion>
-<Accordion content='Accordion content' bordered={true}>Summary</Accordion>
-<Accordion content='Accordion content' bordered={false}>Summary</Accordion>
-<Accordion content='Accordion content'>Summary</Accordion>
+<Accordion content='Accordion content' borders='all'>Summary</Accordion>
+<Accordion content='Accordion content' borders='all'>Summary</Accordion>
+<Accordion content='Accordion content' borders='none'>Summary</Accordion>
+<Accordion content='Accordion content'>Summary</Accordion>
npx @toptal/picasso-codemod v5.0.0/accordion-borders
subheader-pagehead
Renames occurrences of Subheader
to PageHead
.
- import { Subheader } from '@toptal/picasso'
+ import { PageHead } from '@toptal/picasso'
const Example = () => (
- <Subheader>
+ <PageHead>
- <Subheader.Main>
+ <PageHead.Main>
- <Subheader.Title>Title</Subheader.Title>
+ <PageHead.Title>Title</PageHead.Title>
- </Subheader.Main>
+ </PageHead.Main>
- </Subheader>
+ </PageHead>
)
npx @toptal/picasso-codemod v5.0.0/subheader-pagehead
header-topbar
Renames occurrences of Page.Header
to Page.TopBar
.
import { Page } from '@toptal/picasso'
const Example = () => (
- <Page.Header>
+ <Page.TopBar>
Content
- </Page.Header>
+ </Page.TopBar>
<details>
<summary>Command</summary>
```bash
npx @toptal/picasso-codemod v5.0.0/header-topbar
button-variants
Renames variants of button to new values, replaced circular button with Button.Circular
.
const Example = () => (
- <Button variant='primary-blue'>Primary Red</Button>
+ <Button variant='primary'>Primary Red</Button>
)
npx @toptal/picasso-codemod v5.0.0/button-variants
28 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
8 months ago
10 months ago
7 months ago
8 months ago
10 months ago
6 months ago
8 months ago
8 months ago
10 months ago
10 months ago
8 months ago
11 months ago
8 months ago
7 months ago
10 months ago
8 months ago
10 months ago
10 months ago
7 months ago
10 months ago
7 months ago
8 months ago
8 months ago
7 months ago
6 months ago
6 months ago
8 months ago
10 months ago
11 months ago
11 months ago
7 months ago
7 months ago
6 months ago
7 months ago
8 months ago
8 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago