search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
98 stars 138 forks source link

Create a sandbox application to use a codemod to understand the experience #6155

Closed elycheea closed 1 month ago

elycheea commented 2 months ago

Codemods to test should include 

### Tasks
- [x] Create new app (can use [ibm-products-vite-template](https://github.com/matthewgallo/ibm-products-vite-template) to set up quickly)
- [x] Include icons (e.g. `Add`) from @carbon/icons-react
- [x] Include some components that need size changes (see [list](https://github.com/carbon-design-system/carbon/blob/main/packages/upgrade/transforms/size-prop-update.js#L52))
- [x] Include `<Button small>`
- [x] Include a component with unsorted props
- [x] Run codemods on a separate branch
elycheea commented 2 months ago

Next refinement, we can review the list of current codemods and document some of the codemods that could be helpful to test. For example, updating props versus updating imports (which could be useful for deprecation + replace scenarios).

makafsal commented 1 month ago

@elycheea I've tested all the Codemod Transforms mentioned above, as well as the sort-prop-types transformer.

  1. npx @carbon/upgrade migrate update-carbon-icons-react-import-to-carbon-react --write

https://github.com/user-attachments/assets/867b5c2c-3d41-4ebf-9db7-ff4d05a86c3e

  1. npx @carbon/upgrade migrate size-prop-update --write

https://github.com/user-attachments/assets/bff0a516-0edb-4a32-a072-9f446df61888

  1. npx @carbon/upgrade migrate small-to-size-prop --write

https://github.com/user-attachments/assets/2c3022ce-ba68-418f-a189-8dc611620f79

The small-to-size-prop transformer not taking the <ButtonSkelton /> component.

  1. npx jscodeshift -t node_modules/@carbon/upgrade/transforms/sort-prop-types.js src/UnsortedPropExample/UnsortedPropExample.jsx

https://github.com/user-attachments/assets/abf63036-5756-43af-9a78-9afdd8b41c38

For the above giving an interface to use transforms like npx @carbon/upgrade migrate <transformName> might be more helpful than executing with the jscodeshift. For eg: npx @carbon/upgrade transform <transformName>

In addition, implementing a few Codemods like those below would improve our workflow:

  1. Refactor inline styles
  2. JS to TS transform
  3. Remove unused codes (if we've in our repo, do you think our codebase contains unused codes?)
matthewgallo commented 1 month ago

Great work @makafsal, looks like the work for this is complete 🎉