feat: add codemod

[sashuk]

FX-4260

Description

This pull request adds a codemod that replaces BASE-aligned spacing property values with new spacing constants.

jscodeshift has the following problem when running this codemod:

• empty line is inserted before the import that is added via insertAfter(), more in insertAfter adds empty line before facebook/jscodeshift#185
• the semicolon is inserted after the import that is added via insertAfter(), more in Allow pretty-printer configuration via .eslintrc files benjamn/recast#226

However, both issues are solved by running lint or prettier after the codemod run (this recommendation was added to the changeset)

How to test

• Run tests – check out this branch locally and run yarn run jest packages/picasso-codemod/src/v38.1.0/__tests__
• Run actual codemod in Staff Portal – check out https://github.com/toptal/staff-portal/pull/10942 branch locally, drop last commit, and run npx @toptal/picasso-codemod v38.1.0

Screenshots

Typical change from https://github.com/toptal/staff-portal/pull/10942/files

---

Running in Staff Portal (https://github.com/toptal/staff-portal/pull/10942)

Development checks

• Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• [N/A] Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• [N/A] Annotate all props in component with documentation
• [N/A] Create examples for component
• [N/A] Ensure that deployed demo has expected results and good examples
• [N/A] Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ab5499

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@toptal/picasso-codemod	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dmaklygin]

I tried to run it inside a Picasso and this is an output:

No files selected, nothing to do. 
All done. 
Results: 
0 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 0.002seconds 

I think, we also should cover spec, test and story files, because they are also part of the project.

[sashuk]

@dmaklygin Great suggestion, please let me add it!

[augustobmoura]

@toptal-bot run package:alpha-release

[augustobmoura]

Seems to be working as expected, but we have a bullet on AC for marking the old props as deprecated.

Make number and SpacingEnums as deprecated

Maybe we should move this AC to https://toptal-core.atlassian.net/browse/FX-4315?

[sashuk]

@dmaklygin Just checked it in picasso, I think the issue was that you need to use the following command (otherwise picasso-codemod looks for monorepo)

npx @toptal/picasso-codemod v38.1.0 packages/picasso/src/**/*.ts*

The output is the following

All done. 
Results: 
1 errors
2011 unmodified
0 skipped
0 ok
Time elapsed: 3.879seconds 

And 1 error stands for custom case that needs to be addressed manually

Manual update required for Container.bottom in packages/picasso/src/Pagination/story/Ellipsis.example.tsx:79
 ERR packages/picasso/src/PageTopBarMenu/PageTopBarMenu.tsx Transformation error (Unable to find @toptal/picasso or Container declaration to insert new spacing import)
Error: Unable to find @toptal/picasso or Container declaration to insert new spacing import
    at insertSpacingImport (/Users/aleksandr/toptal/tmp/picasso/packages/picasso-codemod/src/v38.1.0/utils/insert-spacing-import.ts:28:11)
    at transform (/Users/aleksandr/toptal/tmp/picasso/packages/picasso-codemod/src/v38.1.0/spacing-values.ts:108:24)
Manual update required for Container.bottom in packages/picasso/src/Pagination/story/Variants.example.tsx:8

Then yarn start is run and Picasso Storybook launches

---

However, one bug was caught and addressed, thanks for checking on picasso!

[sashuk]

@augustobmoura

Maybe we should move this AC to https://toptal-core.atlassian.net/browse/FX-4315?

It looks like it belongs to this ticket, I'll address it in a separate pull request, thanks!

[sashuk]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@48.0.1-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.94+6ab549912
yarn add @toptal/picasso@37.7.1-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.12+6ab549912
yarn add @toptal/picasso-charts@51.0.1-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.94+6ab549912
yarn add @toptal/picasso-codemod@5.5.3-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.105+6ab549912
yarn add @toptal/picasso-forms@60.1.1-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.12+6ab549912
yarn add @toptal/picasso-pictograms@1.1.2-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.180+6ab549912
yarn add @toptal/picasso-provider@3.1.4-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.30+6ab549912
yarn add @toptal/picasso-rich-text-editor@5.0.4-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.6+6ab549912
yarn add @toptal/picasso-shared@12.0.1-alpha-fx-4260-create-codemod-for-replacing-spacings-6ab549912.225+6ab549912

[sashuk]

Latest package Staff Portal run result ✅

[sashuk]

@toptal-anvil ping reviewers