From 9faaa8360656eec5234b2785feee539f8bd2cc31 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Fri, 20 Sep 2024 11:20:18 +0200 Subject: [PATCH] feat(tokens): update temp_dev_tbd token to t_temp_dev_tbd --- .../rules/v6/tokensUpdate/tokens-update.md | 2 +- .../v6/tokensUpdate/tokens-update.test.ts | 20 +++++++++---------- .../rules/v6/tokensUpdate/tokens-update.ts | 6 +++--- .../v6/tokensUpdate/tokensUpdateOutput.tsx | 8 ++++---- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md index 42a0b4f8..0389e5e3 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md @@ -3,7 +3,7 @@ We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. - this rule provides an autofix for global non color tokens -- global color tokens will be replaced with a temporary hot pink color token (`temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` class) +- global color tokens will be replaced with a temporary hot pink color token (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` class) - don't forget to replace these tokens later - other non-global (component or chart) tokens need to be replaced manually diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts index 4f169a93..183482d7 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts @@ -9,7 +9,7 @@ const getFixMessage = (oldToken: string, newToken: string) => const getColorFixMessage = (oldToken: string, isReactToken = true) => `${oldToken} is an old color token. This codemod will replace it with a temporary hot pink color token ${ - isReactToken ? "temp_dev_tbd" : "--pf-t--temp--dev--tbd" + isReactToken ? "t_temp_dev_tbd" : "--pf-t--temp--dev--tbd" } to prevent build errors. You should find a suitable replacement token in our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`; ruleTester.run("tokens-warn", rule, { @@ -210,7 +210,7 @@ ruleTester.run("tokens-warn", rule, { ], }, { - // named import - esm + // default import - esm code: `import global_FontWeight_normal from '@patternfly/react-tokens/dist/esm/global_FontWeight_normal'; global_FontWeight_normal;`, output: `import global_font_weight_body_default from "@patternfly/react-tokens/dist/esm/global_font_weight_body_default"; @@ -233,7 +233,7 @@ ruleTester.run("tokens-warn", rule, { ], }, { - // named import - js + // default import - js code: `import global_FontWeight_normal from '@patternfly/react-tokens/dist/js/global_FontWeight_normal'; global_FontWeight_normal;`, output: `import global_font_weight_body_default from "@patternfly/react-tokens/dist/js/global_font_weight_body_default"; @@ -310,7 +310,7 @@ ruleTester.run("tokens-warn", rule, { // FIXES - color tokens { code: `import { global_Color_100 } from "@patternfly/react-tokens";`, - output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens";`, + output: `import { t_temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -321,7 +321,7 @@ ruleTester.run("tokens-warn", rule, { { // with alias code: `import { global_Color_100 as color100 } from "@patternfly/react-tokens";`, - output: `import { temp_dev_tbd as color100 /* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ } from "@patternfly/react-tokens";`, + output: `import { t_temp_dev_tbd as color100 /* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ } from "@patternfly/react-tokens";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -332,7 +332,7 @@ ruleTester.run("tokens-warn", rule, { { // named import - esm code: `import { global_Color_100 } from '@patternfly/react-tokens/dist/esm/global_Color_100';`, - output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + output: `import { t_temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -343,7 +343,7 @@ ruleTester.run("tokens-warn", rule, { { // named import - js code: `import { global_Color_100 } from '@patternfly/react-tokens/dist/js/global_Color_100';`, - output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/js/temp_dev_tbd";`, + output: `import { t_temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/js/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -354,7 +354,7 @@ ruleTester.run("tokens-warn", rule, { { // default import - esm code: `import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';`, - output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -365,7 +365,7 @@ ruleTester.run("tokens-warn", rule, { { // default import - js code: `import global_Color_100 from '@patternfly/react-tokens/dist/js/global_Color_100';`, - output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/js/temp_dev_tbd";`, + output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/js/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -376,7 +376,7 @@ ruleTester.run("tokens-warn", rule, { { // default import with custom name code: `import someColor from '@patternfly/react-tokens/dist/esm/global_Color_100';`, - output: `import someColor/* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + output: `import someColor/* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts index f90c9ee0..094d9864 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts @@ -47,7 +47,7 @@ module.exports = { const getColorFixMessage = (oldToken: string, isReactToken = true) => `${oldToken} is an old color token. This codemod will replace it with a temporary hot pink color token ${ - isReactToken ? "temp_dev_tbd" : "--pf-t--temp--dev--tbd" + isReactToken ? "t_temp_dev_tbd" : "--pf-t--temp--dev--tbd" } to prevent build errors. You should find a suitable replacement token in our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`; const shouldReplaceToken = (token: string) => @@ -121,7 +121,7 @@ module.exports = { fixer, node, token, - "temp_dev_tbd" + "t_temp_dev_tbd" ); if (tokenPathFix) { @@ -132,7 +132,7 @@ module.exports = { fixes.push( fixer.replaceText( node, - `temp_dev_tbd as ${node.local.name} ${comment}` + `t_temp_dev_tbd as ${node.local.name} ${comment}` ) ); } else { diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx index a1c42a91..bb8ae527 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx @@ -29,10 +29,10 @@ c_alert__FontSize; >; // Colors -import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd"; -import { temp_dev_tbd as global_Color_200 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/temp_dev_tbd"; -import { temp_dev_tbd as color300 /* CODEMODS: you should update this color token, original v5 token was global_Color_300 */ } from "@patternfly/react-tokens/dist/esm/temp_dev_tbd"; -import { temp_dev_tbd as global_BorderColor_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens"; +import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd"; +import { t_temp_dev_tbd as global_Color_200 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd"; +import { t_temp_dev_tbd as color300 /* CODEMODS: you should update this color token, original v5 token was global_Color_300 */ } from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd"; +import { t_temp_dev_tbd as global_BorderColor_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens"; global_Color_100; global_Color_200;