feat: Text to Content

packages/eslint-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/text-replace-with-content.md

@@ -0,0 +1,18 @@
+### text-replace-with-content [(#10643)](https://github.com/patternfly/patternfly-react/pull/10643)
+
+We have replaced Text, TextContent, TextList and TextListItem with one Content component. Running this fix will change all of those components names to Content and add a "component" prop where necessary.
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```
+

packages/eslint-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/text-replace-with-content.test.ts

@@ -0,0 +1,121 @@
+const ruleTester = require('../../ruletester');
+import * as rule from './text-replace-with-content';
+
+const errorMessage = `We have replaced Text, TextContent, TextList and TextListItem with one Content component. Running this fix will change all of those components names to Content and add a \`component\` prop where necessary.`;
+const importDeclarationError = {
+  message: errorMessage,
+  type: 'ImportDeclaration',
+};
+const jsxElementError = {
+  message: errorMessage,
+  type: 'JSXElement',
+};
+
+ruleTester.run('text-replace-with-content', rule, {
+  valid: [
+    {
+      code: `<Text />`,
+    },
+    {
+      code: `import { Text } from 'somewhere'; <Text />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { Text } from '@patternfly/react-core'; <Text>Abc</Text>`,
+      output: `import { Content } from '@patternfly/react-core'; <Content component="p">Abc</Content>`,
+      errors: [importDeclarationError, jsxElementError],
+    },
+    {
+      code: `import { Text } from '@patternfly/react-core'; <Text component="h3">Abc</Text>`,
+      output: `import { Content } from '@patternfly/react-core'; <Content component="h3">Abc</Content>`,
+      errors: [importDeclarationError, jsxElementError],
+    },
+    // {
+    //   code: `import { Text, TextContent } from '@patternfly/react-core';
+    //   <TextContent>
+    //     <Text component="h3">Abc</Text>
+    //   </TextContent>`,
+    //   output: `import { Content, TextContent } from '@patternfly/react-core';
+    //   <Content>
+    //     <Content component="h3">Abc</Content>
+    //   </Content>`,
+    //   errors: [importDeclarationError, jsxElementError, jsxElementError],
+    // },
+    {
+      code: `import { TextContent } from '@patternfly/react-core'; <TextContent isVisited></TextContent>`,
+      output: `import { Content } from '@patternfly/react-core'; <Content isVisitedLink></Content>`,
+      errors: [importDeclarationError, jsxElementError],
+    },
+    // {
+    //   code: `import { TextList, TextListItem } from '@patternfly/react-core';
+    //   <TextList>
+    //     <TextListItem>A</TextListItem>
+    //     <TextListItem>B</TextListItem>
+    //     <TextListItem>C</TextListItem>
+    //   </TextList>`,
+    //   output: `import { Content, TextListItem } from '@patternfly/react-core';
+    //   <Content component="ul">
+    //     <Content component="li">A</Content>
+    //     <Content component="li">B</Content>
+    //     <Content component="li">C</Content>
+    //   </Content>`,
+    //   errors: [
+    //     importDeclarationError,
+    //     jsxElementError,
+    //     jsxElementError,
+    //     jsxElementError,
+    //     jsxElementError,
+    //   ],
+    // },
+    // {
+    //   code: `import { TextList, TextListItem } from '@patternfly/react-core';
+    //   <TextList component="dl">
+    //     <TextListItem component="dt">A</TextListItem>
+    //     <TextListItem component="dd">letter A</TextListItem>
+    //     <TextListItem component="dt">B</TextListItem>
+    //     <TextListItem component="dd">letter B</TextListItem>
+    //   </TextList>`,
+    //   output: `import { Content, TextListItem } from '@patternfly/react-core';
+    //   <Content component="dl">
+    //     <Content component="dt">A</Content>
+    //     <Content component="dd">letter A</Content>
+    //     <Content component="dt">B</Content>
+    //     <Content component="dd">letter B</Content>
+    //   </Content>`,
+    //   errors: [
+    //     importDeclarationError,
+    //     jsxElementError,
+    //     jsxElementError,
+    //     jsxElementError,
+    //     jsxElementError,
+    //     jsxElementError,
+    //   ],
+    // },
+    {
+      code: `import { TextList } from '@patternfly/react-core'; <TextList isPlain></TextList>`,
+      output: `import { Content } from '@patternfly/react-core'; <Content component="ul" isPlainList></Content>`,
+      errors: [importDeclarationError, jsxElementError],
+    },
+    // with alias
+    {
+      code: `import { Text as PFText } from '@patternfly/react-core'; <PFText>Abc</PFText>`,
+      output: `import { Content } from '@patternfly/react-core'; <Content component="p">Abc</Content>`,
+      errors: [importDeclarationError, jsxElementError],
+    },
+  ],
+});
+
+/*
+
+<Text component="h3"> -> <Content component="h3">
+<Text> -> <Content component="p">
+<TextContent> -> <Content>
+<TextContent isVisited> -> <Content isVisitedLink>
+<TextList> -> <Content component="ul">
+<TextList isPlain> -> <Content component="ul" isPlainList>
+<TextList component="ol"> -> <Content component="ol">
+<TextListItem> -> <Content component="li">
+<TextListItem component="dt"> -> <Content component="dt">
+
+*/

packages/eslint-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/text-replace-with-content.ts

@@ -0,0 +1,127 @@
+import { Rule } from 'eslint';
+import {
+  ImportDeclaration,
+  ImportSpecifier,
+  JSXElement,
+  JSXIdentifier,
+} from 'estree-jsx';
+import { getAttribute, getFromPackage, pfPackageMatches } from '../../helpers';
+
+// https://github.com/patternfly/patternfly-react/pull/10643
+module.exports = {
+  meta: { fixable: 'code' },
+  create: function (context: Rule.RuleContext) {
+    const { imports } = getFromPackage(context, '@patternfly/react-core');
+
+    const textComponents = ['Text', 'TextContent', 'TextList', 'TextListItem'];
+
+    const componentImports = imports.filter((specifier) =>
+      textComponents.includes(specifier.imported.name)
+    );
+
+    const errorMessage =
+      'We have replaced Text, TextContent, TextList and TextListItem with one Content component. Running this fix will change all of those components names to Content and add a `component` prop where necessary.';
+
+    return !componentImports.length
+      ? {}
+      : {
+          ImportDeclaration(node: ImportDeclaration) {
+            if (pfPackageMatches('@patternfly/react-core', node.source.value)) {
+              const specifierToReplace = node.specifiers.find(
+                (specifier) =>
+                  specifier.type === 'ImportSpecifier' &&
+                  textComponents.includes(specifier.imported.name)
+              ) as ImportSpecifier;
+
+              if (!specifierToReplace) {
+                return;
+              }
+
+              context.report({
+                node,
+                message: errorMessage,
+                fix(fixer) {
+                  return fixer.replaceText(specifierToReplace, 'Content');
+                },
+              });
+            }
+          },
+          JSXElement(node: JSXElement) {
+            const openingElement = node.openingElement;
+            const closingElement = node.closingElement;
+
+            if (openingElement.name.type === 'JSXIdentifier') {
+              const componentImport = componentImports.find(
+                (imp) =>
+                  imp.local.name === (openingElement.name as JSXIdentifier).name
+              );
+
+              if (!componentImport) {
+                return;
+              }
+
+              const componentName = componentImport.imported.name as
+                | 'Text'
+                | 'TextContent'
+                | 'TextList'
+                | 'TextListItem';
+
+              const componentAttribute = getAttribute(node, 'component');
+
+              context.report({
+                node,
+                message: errorMessage,
+                fix(fixer) {
+                  const fixes = [];
+
+                  if (!componentAttribute && componentName !== 'TextContent') {
+                    const componentMap = {
+                      Text: 'p',
+                      TextList: 'ul',
+                      TextListItem: 'li',
+                    };
+
+                    fixes.push(
+                      fixer.insertTextAfter(
+                        openingElement.name,
+                        ` component="${componentMap[componentName]}"`
+                      )
+                    );
+                  }
+
+                  if (componentName === 'TextContent') {
+                    const isVisitedAttribute = getAttribute(node, 'isVisited');
+                    if (isVisitedAttribute) {
+                      fixes.push(
+                        fixer.replaceText(
+                          isVisitedAttribute.name,
+                          'isVisitedLink'
+                        )
+                      );
+                    }
+                  }
+
+                  if (componentName === 'TextList') {
+                    const isPlainAttribute = getAttribute(node, 'isPlain');
+                    if (isPlainAttribute) {
+                      fixes.push(
+                        fixer.replaceText(isPlainAttribute.name, 'isPlainList')
+                      );
+                    }
+                  }
+
+                  fixes.push(fixer.replaceText(openingElement.name, 'Content'));
+                  if (closingElement) {
+                    fixes.push(
+                      fixer.replaceText(closingElement.name, 'Content')
+                    );
+                  }
+
+                  return fixes;
+                },
+              });
+            }
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/textReplaceWithContentInput.tsx

@@ -0,0 +1,25 @@
+import {
+  Text,
+  TextContent,
+  TextList,
+  TextListItem,
+} from "@patternfly/react-core";
+
+export const TextReplaceWithContentInput = () => (
+  <>
+    <Text component="h3">Abc</Text>
+    <Text>Abc</Text>
+    <TextContent>Abc</TextContent>
+    <TextContent isVisited>Abc</TextContent>
+    <TextList>Abc</TextList>
+    <TextList isPlain>Abc</TextList>
+    <TextList component="ol">Abc</TextList>
+    <TextListItem>Abc</TextListItem>
+    <TextListItem component="dt">Abc</TextListItem>
+    <TextList>
+      <TextListItem>A</TextListItem>
+      <TextListItem>B</TextListItem>
+      <TextListItem>C</TextListItem>
+    </TextList>
+  </>
+);

packages/eslint-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/textReplaceWithContentOutput.tsx

@@ -0,0 +1,25 @@
+import {
+  Content,
+  Content,
+  Content,
+  Content,
+} from "@patternfly/react-core";
+
+export const TextReplaceWithContentInput = () => (
+  <>
+    <Content component="h3">Abc</Content>
+    <Content component="p">Abc</Content>
+    <Content>Abc</Content>
+    <Content isVisitedLink>Abc</Content>
+    <Content component="ul">Abc</Content>
+    <Content component="ul" isPlainList>Abc</Content>
+    <Content component="ol">Abc</Content>
+    <Content component="li">Abc</Content>
+    <Content component="dt">Abc</Content>
+    <Content component="ul">
+      <Content component="li">A</Content>
+      <Content component="li">B</Content>
+      <Content component="li">C</Content>
+    </Content>
+  </>
+);