feat(cli): add Button codemods

[connor-baer]

Purpose

Circuit UI v2 comes with a lot of breaking changes — most small and component-specific, but together they add up to a lot of manual work for the users. We can automate these changes with codemods, small scripts that modify the source code automatically.

Approach and changes

• set up jscodeshift, a library to write, test, and run codemods
• add codemods to migrate the Button and LoadingButton props (see v2.0.0-alpha.15)
• add a CLI to run the codemods through Circuit UI:

yarn circuit-ui migrate

Automatically transforms your source code to Circuit UI's latest APIs

Options:
  --help           Show help                                           [boolean]
  --version        Show version number                                 [boolean]
  --transform, -t  The transform to be applied to the source code
                            [string] [required] [choices: "button-variant-enum"]
  --language, -l   The programming language of the files to be transformed
                       [string] [required] [choices: "TypeScript", "JavaScript"]
  --path, -p       A path to the folder that contains the files to be
                   transformed                           [string] [default: "."]

The output looks something like this:

Processing 393 files... 
Spawning 7 workers...
Sending 50 files to free worker...
[...]
Sending 43 files to free worker...
All done. 
Results: 
0 errors
392 unmodified
0 skipped
1 ok
Time elapsed: 4.348seconds 

I chose to only allow one codemod at a time to force the users to apply the transforms incrementally and review the changes before continuing.

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[codecov]

Codecov Report

Merging #596 into alpha will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##            alpha     #596   +/-   ##
=======================================
  Coverage   94.22%   94.22%           
=======================================
  Files         137      137           
  Lines        2183     2183           
  Branches      622      622           
=======================================
  Hits         2057     2057           
  Misses        103      103           
  Partials       23       23           

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup-oss/circuit-ui/e8i88yqol
✅ Preview: https://circuit-ui-git-feature-codemod-button.sumup-oss.now.sh

[fernandofleury]

@connor-baer by looking into it, it doesn't cover dynamic props, right? Not that I think we have to, but just checking it. (Something like <Button {...props} />)

[connor-baer]

@fernandofleury Yes, dynamic props are not covered. The codemods are meant to help with the bulk of the work, but cannot cover every edge case.

[fernandofleury]

In which PR do we cover documentation?

I made some minor comments

[connor-baer]

@fernandofleury Documentation is covered in #599.

[github-actions]

🎉 This PR is included in version 2.0.0-alpha.22 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.0.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀