From ac8e9b8a6f4d582a5562d0fcbfc2e0caa0d62045 Mon Sep 17 00:00:00 2001 From: Nikolai Lopin Date: Thu, 11 Jan 2024 17:26:49 +0100 Subject: [PATCH] Execute all codemodes using one command (#403) * feat: allow to execute all codemods at once Signed-off-by: Nikolai Lopin * style: improve console output Signed-off-by: Nikolai Lopin * Apply suggestions from code review Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> --------- Signed-off-by: Nikolai Lopin Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> --- docs/migrating.storybook.mdx | 28 ++++++++++++++++++++-------- package.json | 3 +++ scripts/run_v2_migration.sh | 22 ++++++++++++++++++++++ 3 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 scripts/run_v2_migration.sh diff --git a/docs/migrating.storybook.mdx b/docs/migrating.storybook.mdx index 7a499b3c4..8aeac6968 100644 --- a/docs/migrating.storybook.mdx +++ b/docs/migrating.storybook.mdx @@ -20,8 +20,20 @@ allow jscodeshift to parse your typescript/jsx files. ## From v1 to v2 -The following 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. +Run all migrations at once: + +```bash +# npm +npx @freenow/wave run_v2_migration src/**/* + +# yarn +yarn exec node_modules/.bin/run_v2_migration src/**/* + +``` + +Below, you'll see individual codemods to upgrade components to version 2. +In order to apply an individual transformation to your project +you need to run the command for your desired codemod pointing to your project's source path. ### Button and TextButton block property @@ -29,7 +41,7 @@ The `block` property used to act as a shortcut to give the button components a w 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 +npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/block-to-width-100.js path/to/src ``` ### Colors to CSS variables @@ -38,7 +50,7 @@ Our theme colors structure has changed significantly in this major. In order to that our theme brings. ```bash -npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/colors-to-css-vars.js path/to/src +npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/colors-to-css-vars.js path/to/src ``` Disclaimer: This codemod transforms usages of `Colors` to our bare colors CSS variables to ensure we don't introduce breaking changes, that being said, @@ -50,7 +62,7 @@ We had some deprecated icons that have been deleted in this major, in case you u This won't change how your icons look in any way since we already exported the deprecated icons as wrappers of valid ones. ```bash -npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/deprecated-icons.js path/to/src +npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/deprecated-icons.js path/to/src ``` ### Inverted property deprecation @@ -61,7 +73,7 @@ the styling of the opposite theme you need to wrap it with the `InvertedColorSch The components that supported the `inverted` prop are: `Input`, `Password`, `Textarea`, `Button`, `Select`, `SelectList`, `PhoneInput`, `Datepicker`, `Tooltip`, `Text`, `Logo` and `Breadcrumbs`. ```bash -npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/inverted-to-wrapper.js path/to/src +npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/inverted-to-wrapper.js path/to/src ``` Disclaimer: This codemod wraps every Wave component that is using the `inverted` property with `InvertedColorScheme`, this could lead to a decline in performance in case the @@ -73,7 +85,7 @@ The `weak` property was the initial way to indicate secondary information in a ` the more semantic `secondary` prop. ```bash -npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/weak-to-secondary.js path/to/src +npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/weak-to-secondary.js path/to/src ``` ### Tooltip placement property @@ -83,7 +95,7 @@ of the engine, but to not introduce breaking changes we kept supporting the prev `react-popper` options. This change only affects the `Tooltip` component `placement` prop. ```bash -npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/tooltip-placement.js path/to/src +npx jscodeshift --parser=tsx --extension=js,jsx,ts,tsx -t node_modules/@freenow/wave/lib/cjs/codemods/tooltip-placement.js path/to/src ``` You can find the mappings in the following table: diff --git a/package.json b/package.json index 583dd9167..959f478e3 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,9 @@ "main": "lib/cjs/index.js", "typings": "lib/types/index.d.ts", "module": "lib/esm/index.js", + "bin": { + "run_v2_migration": "./scripts/run_v2_migration.sh" + }, "sideEffects": false, "scripts": { "clean": "rm -rf lib", diff --git a/scripts/run_v2_migration.sh b/scripts/run_v2_migration.sh new file mode 100644 index 000000000..93e2d6666 --- /dev/null +++ b/scripts/run_v2_migration.sh @@ -0,0 +1,22 @@ +#!/bin/bash +set -e # Exit immediately if any command fails +CODEMODS_FOLDER="node_modules/@freenow/wave/lib/esm/codemods" +if [ ! -d "$CODEMODS_FOLDER" ]; then + echo "The 'codemods' folder does not exist." + exit 1 +fi + +# remove the first argument (the `run_v2_migration`) +shift + +total_files=$(find "$CODEMODS_FOLDER" -type f | wc -l | tr -d '[:space:]') + +current_file=0 +for file in "$CODEMODS_FOLDER"/*; do + if [ -f "$file" ]; then + current_file=$((current_file + 1)) + echo "Executing npx codeshift for $(basename "$file") ($current_file of $total_files)" + npx jscodeshift --extensions=js,jsx,ts,tsx --parser=tsx -t="$file" "$@" + echo + fi +done \ No newline at end of file