diff --git a/docs/migrating.storybook.mdx b/docs/migrating.storybook.mdx index 3c267c3d2..f14aee04b 100644 --- a/docs/migrating.storybook.mdx +++ b/docs/migrating.storybook.mdx @@ -4,20 +4,7 @@ import { Meta } from '@storybook/blocks'; # Migrating -Migrating from one major version to the next with ease. - -## From v1 to v2 - -A codemod exists to upgrade your components for this version. - -```bash -npx jscodeshift -t node_modules/@freenow/wave/codemods/v2.ts path/to/src -``` - -### Button and TextButton - -The `block` property used to act as a shortcut to give the button components a width of 100%. In the future, use the `width` property -directly. It uses the styled-system variable, which is a lot more flexible than just the boolean flag. +Migrate to the next Wave major version with ease. ## Codemods @@ -28,3 +15,26 @@ previous major versions first. Beware that codemods are not 100% fool-proof and If you're working in a typescript environment, you need to add `--parser=tsx` to the command in each codemod command to allow jscodeshift to parse your typescript/jsx files. + +## From v1 to v2 + +Two codemods exist to upgrade your components for version 2. In order to apply the transformations in your project you simply need to run the +command for your desired codemod pointing to your project's source path. + +### Button and TextButton block property + +The `block` property used to act as a shortcut to give the button components a width of 100%. In the future, use the `width` property +directly. It uses the styled-system variable, which is a lot more flexible than just the boolean flag. + +```bash +npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/block-to-width-100.js path/to/src +``` + +### Colors to CSS variables + +Our theme colors structure has changed significantly in this major. In order to use Wave colors in your project you should now use the CSS variables +that our theme brings. + +```bash +npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/colors-to-css-vars.js path/to/src +```