crs-codemod

Chakra React Select Codemods

A collection (only one for now) of Codemod transformations to help you upgrade your codebase when a Chakra React Select feature is deprecated.

Codemods are transformations that run on your codebase programmatically. This allows for a large amount of changes to be applied without having to manually go through every file.

These codemods are based on the codemods offered by Next.js, and are written using jscodeshift.

Usage

In your terminal, navigate (cd) into your project's folder, then run:

npx crs-codemod <transform> <path>

Replacing <transform> and <path> with appropriate values.

• transform - name of transform
• path - files or directory to transform
• --dry Do a dry-run, no code will be edited
• --print Prints the changed output for comparison

Codemod Options

Version 5 (v5)

npx crs-codemod v5 .
# or
npx crs-codemod v5 ./src

NOTE: This codemod currently has a side effect where it removes any TypeScript generics you pass into your Select components. This appears to be a shortcoming of jscodeshift, as it appears not to recognize generics used in JSX. While in most cases you shouldn't need generics in order for your component to be typed properly, there are some edge cases where they are necessary. If you have a need for them, you should either add them back in after the codemod is run, or manually make the following transformations.

This codemod runs on all versions of the Select component (Select, AsyncSelect, AsyncCreatableSelect, CreatableSelect), and performs the following modifications to your every instance of them:

• Removes the useBasicStyles prop.
  • These styles are now the defaults, so this prop was removed in v5.0.0.
• Renames the prop selectedOptionColor to selectedOptionColorScheme.
  • This prop was renamed in v4.6.0 to reduce confusion about what values can be passed to it. It has been fully removed in v5.0.0.
• Renames the prop colorScheme to tagColorScheme.
  • This prop's name was changed as it didn't represent specifically what it was for originally.
• Removes the hasStickyGroupHeaders prop
  • This prop was deprecated in v4.6.0 as well due to it not working properly with keyboard navigation, and being outside the scope of the intentions for this project. It has also been fully removed in v5.0.0.

This codemod will only work for props that are added directly to a Select instance. If you have a shared props object, you will have to make these changes manually.