feat(tokens): provide autofix for all global tokens (#763)

* feat(tokens): provide autofix for global non-color tokens * refactor(getDefaultDeclarationString helper): rename to getImportPath * feat(tokens): handle color tokens autofix * test(tokens): add tests * refactor(tokens) * refactor(tokens): rename rule * feat(tokens): update temp_dev_tbd token to t_temp_dev_tbd * docs: update description Co-authored-by: Eric Olkowski <[email protected]> --------- Co-authored-by: Eric Olkowski <[email protected]>
patternfly · Sep 24, 2024 · f5d32ce · f5d32ce
1 parent 4d7fecc
commit f5d32ce
Show file tree

Hide file tree

Showing 22 changed files with 1,332 additions and 262 deletions.
diff --git a/packages/eslint-plugin-pf-codemods/src/index.ts b/packages/eslint-plugin-pf-codemods/src/index.ts
@@ -1,3 +1,4 @@
-export * from './configs';
-export * from './ruleCuration';
-export * from './ruleCustomization'
+export * from "./configs";
+export * from "./ruleCuration";
+export * from "./ruleCustomization";
+export * from "./tokenLists";
diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts
@@ -49,7 +49,6 @@ export const warningRules = [
   "tabs-update-markup",
   "tabs-warn-children-type-changed",
   "Th-Td-warn-update-markup",
-  "tokens-warn",
   "toolbarLabelGroupContent-updated-markup",
   "tooltip-warn-triggerRef-may-be-required",
   "treeView-warn-selectable-styling-modifier-removed",

diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getComponentImportName.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getComponentImportName.ts
@@ -1,6 +1,6 @@
 import { ImportSpecifier } from "estree-jsx";
 import { ImportDefaultSpecifierWithParent } from "./interfaces";
-import { getDefaultDeclarationString } from "./getDefaultDeclarationString";
+import { getImportPath } from "./getImportPath";
 
 /** Gets the name of an import based on the specifier and an array of names that should be looked for in default import paths */
 export function getComponentImportName(
@@ -12,6 +12,6 @@ export function getComponentImportName(
   }
 
   return potentialNames.find((name) =>
-    getDefaultDeclarationString(importSpecifier)?.includes(name)
+    getImportPath(importSpecifier)?.includes(name)
   );
 }
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getDefaultDeclarationString.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getDefaultDeclarationString.ts
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getImportPath.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getImportPath.ts
@@ -0,0 +1,11 @@
+import {
+  ImportDefaultSpecifierWithParent,
+  ImportSpecifierWithParent,
+} from "./interfaces";
+
+/** Gets the import path string for an import specifier (named or default) */
+export function getImportPath(
+  importSpecifier: ImportDefaultSpecifierWithParent | ImportSpecifierWithParent
+) {
+  return importSpecifier?.parent?.source.value?.toString();
+}
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/index.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/index.ts
@@ -7,10 +7,10 @@ export * from "./getAttributeName";
 export * from "./getChildJSXElementByName";
 export * from "./getCodeModDataTag";
 export * from "./getComponentImportName";
-export * from "./getDefaultDeclarationString";
 export * from "./getEndRange";
 export * from "./getFromPackage";
 export * from "./getImportedName";
+export * from "./getImportPath";
 export * from "./getLocalComponentName";
 export * from "./getNodeForAttributeFixer";
 export * from "./getNodeName";

diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts
@@ -6,7 +6,7 @@ import {
   JSXOpeningElementWithParent,
 } from "./interfaces";
 import {
-  getDefaultDeclarationString,
+  getImportPath,
   getComponentImportName,
   getNodeName,
   hasCodeModDataTag,
@@ -100,7 +100,7 @@ export function renameComponent(
           }
 
           return oldNames.some((name) =>
-            getDefaultDeclarationString(imp)?.includes(name)
+            getImportPath(imp)?.includes(name)
           );
         });
 

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
@@ -0,0 +1,23 @@
+### tokens-update
+
+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 **that must be manually replaced** (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` CSS variable)
+- other non-global (component or chart) tokens need to be replaced manually
+
+To find a suitable replacement token, check our [v6 token documentation](https://staging-v6.patternfly.org/tokens/all-patternfly-tokens).
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```