feat(tokens): warn about old react-tokens usage

packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts

@@ -45,6 +45,7 @@ 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",

packages/eslint-plugin-pf-codemods/src/rules/helpers/getFromPackage.ts

@@ -5,7 +5,6 @@ import {
   Statement,
   Directive,
   ExportNamedDeclaration,
-  ImportDefaultSpecifier,
   ImportSpecifier,
   ExportSpecifier,
 } from "estree-jsx";
@@ -92,7 +91,7 @@ export function getDefaultImportsFromPackage(
   context: Rule.RuleContext,
   packageName: string,
   componentName: string = ""
-): ImportDefaultSpecifier[] {
+): ImportDefaultSpecifierWithParent[] {
   const astBody = context.getSourceCode().ast.body;
 
   const importDeclarations = astBody.filter(
@@ -111,7 +110,7 @@ export function getDefaultImportsFromPackage(
           imp.source.value?.toString().includes(componentName)) &&
         imp.specifiers[0]?.type === "ImportDefaultSpecifier"
     )
-    .map((imp) => imp.specifiers[0]) as ImportDefaultSpecifier[];
+    .map((imp) => imp.specifiers[0]) as ImportDefaultSpecifierWithParent[];
 }
 
 export function getAllImportsFromPackage(
@@ -127,5 +126,5 @@ export function getAllImportsFromPackage(
     componentNames.includes(imp.imported.name)
   );
 
-  return [filteredImports, defaultImports as ImportDefaultSpecifierWithParent[]].flat();
+  return [filteredImports, defaultImports].flat();
 }

packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts

@@ -16,7 +16,7 @@ export function pfPackageMatches(
       parts[1] +
       "(/dist/(esm|js|dynamic))?" +
       (parts[2] ? "/" + parts[2] : "") +
-      (parts[1] === "react-component-groups"
+      (["react-component-groups", "react-tokens"].includes(parts[1])
         ? `(/.*)?$`
         : `(/(components|helpers${
             parts[1] === "react-icons" ? "|icons" : ""

packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.md

@@ -0,0 +1,17 @@
+### tokens-warn
+
+We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. 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%
+```

packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts

@@ -0,0 +1,96 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./tokens-warn";
+
+const getWarnMessage = (tokenName: string) =>
+  `${tokenName} is an old CSS token. About half of our tokens have been replaced with newer ones. To find a suitable replacement token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`;
+
+ruleTester.run("tokens-warn", rule, {
+  valid: [
+    // token existing in V6
+    {
+      code: `import c_about_modal_box from '@patternfly/react-tokens/dist/esm/c_about_modal_box';`,
+    },
+    // token existing in V6
+    {
+      code: `import { c_about_modal_box } from '@patternfly/react-tokens';`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { global_info_color_100 } from '@patternfly/react-tokens';`,
+      output: `import { global_info_color_100 } from '@patternfly/react-tokens';`,
+      errors: [
+        {
+          message: getWarnMessage("global_info_color_100"),
+          type: "ImportSpecifier",
+        },
+      ],
+    },
+    // with alias
+    {
+      code: `import { global_info_color_100 as infoColor } from '@patternfly/react-tokens';`,
+      output: `import { global_info_color_100 as infoColor } from '@patternfly/react-tokens';`,
+      errors: [
+        {
+          message: getWarnMessage("global_info_color_100"),
+          type: "ImportSpecifier",
+        },
+      ],
+    },
+    {
+      // named import - esm
+      code: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
+      output: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
+      errors: [
+        {
+          message: getWarnMessage("global_info_color_100"),
+          type: "ImportSpecifier",
+        },
+      ],
+    },
+    {
+      // named import - js
+      code: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
+      output: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
+      errors: [
+        {
+          message: getWarnMessage("global_info_color_100"),
+          type: "ImportSpecifier",
+        },
+      ],
+    },
+    {
+      // default import - esm
+      code: `import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
+      output: `import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
+      errors: [
+        {
+          message: getWarnMessage("global_info_color_100"),
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      // default import - js
+      code: `import global_info_color_100 from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
+      output: `import global_info_color_100 from '@patternfly/react-tokens/dist/js/global_info_color_100';`,
+      errors: [
+        {
+          message: getWarnMessage("global_info_color_100"),
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      // default import with custom name
+      code: `import someToken from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
+      output: `import someToken from '@patternfly/react-tokens/dist/esm/global_info_color_100';`,
+      errors: [
+        {
+          message: getWarnMessage("global_info_color_100"),
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+  ],
+});