Rename prefer-box-lonely-ref

docs/src/Eslint Plugin.doc.js

@@ -32,23 +32,24 @@ card(
       `}
     />
     <MainSection.Subsection
-      title="gestalt/prefer-box"
+      title="gestalt/prefer-box-inline-style"
       description={`
         Prevent using \`<div>\` inline styling for attributes that are already implemented in Box.
 
         [Learn more about Box](/Box).
       `}
     />
     <MainSection.Subsection
-      title="gestalt/prefer-box-lonely-ref"
-      description={`
-        Prevent \`<div>\` tags used to only contain a \`ref\` attribute.
+      title="gestalt/prefer-box-no-classname"
+      description={`Prevent <div> tags that don't contain a className attribute. Instead, Use Gestalt Box.
 
-        Instead, use \`ref\` props supported in Box or other elements such as Button or TextField.
+        [Read more about Box](/Box).
 
-        With AUTOFIX!
+        It also prevents \`<div>\` tags used to only contain a \`ref\` attribute. \`ref\` is supported in Box and other elements such as Button or TextField.
 
         [Read more about the ref prop in Box](/Box#Using-as-a-ref).
+
+        With AUTOFIX!
       `}
     />
     <MainSection.Subsection

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-lonely-ref/invalid/gestalt-import-with-renamed-box-input.js → packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-lonely-ref/gestalt-import-with-renamed-box-input.js

@@ -3,10 +3,10 @@ import { Box as RenamedBox } from 'gestalt';
 export default function TestElement() {
   const ref = useRef(null);
   return (
-    <Box>
+    <RenamedBox>
       <div ref={ref}>
-        <Box />
+        <RenamedBox />
       </div>
-    </Box>
+    </RenamedBox>
   );
 }

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-lonely-ref/invalid/gestalt-import-with-renamed-box-output.js → packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-lonely-ref/gestalt-import-with-renamed-box-output.js

@@ -3,10 +3,10 @@ import { Box as RenamedBox } from 'gestalt';
 export default function TestElement() {
   const ref = useRef(null);
   return (
-    <Box>
-      <Box ref={ref}>
-        <Box />
-      </Box>
-    </Box>
+    <RenamedBox>
+      <RenamedBox ref={ref}>
+        <RenamedBox />
+      </RenamedBox>
+    </RenamedBox>
   );
 }

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-lonely-ref/invalid/no-gestalt-import-input.js → packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-lonely-ref/no-gestalt-import-input.js

@@ -3,7 +3,7 @@ export default function TestElement() {
   const ref = useRef(null);
   return (
     <div ref={ref}>
-      <div />
+      <button />
     </div>
   );
 }

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-lonely-ref/invalid/no-gestalt-import-output.js → packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-lonely-ref/no-gestalt-import-output.js

@@ -4,7 +4,7 @@ export default function TestElement() {
   const ref = useRef(null);
   return (
     <Box ref={ref}>
-      <div />
+      <button />
     </Box>
   );
 }

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-with-box-inline-style-input.js

@@ -0,0 +1,10 @@
+import { Box } from 'gestalt';
+export default function TestElement() {
+  return (
+    <Box>
+      <div role="button" style={{ marginTop: 200 }}>
+        <Box />
+      </div>
+    </Box>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-with-box-inline-style-output.js

@@ -0,0 +1,10 @@
+import { Box } from 'gestalt';
+export default function TestElement() {
+  return (
+    <Box>
+      <Box role="button" dangerouslySetInlineStyle={{ __style: { marginTop: 200 } }}>
+        <Box />
+      </Box>
+    </Box>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-with-box-input.js

@@ -0,0 +1,10 @@
+import { Box } from 'gestalt';
+export default function TestElement() {
+  return (
+    <Box>
+      <div role="button">
+        <Box />
+      </div>
+    </Box>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-with-box-output.js

@@ -0,0 +1,10 @@
+import { Box } from 'gestalt';
+export default function TestElement() {
+  return (
+    <Box>
+      <Box role="button">
+        <Box />
+      </Box>
+    </Box>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-with-renamed-box-input.js

@@ -0,0 +1,10 @@
+import { Box as RenamedBox } from 'gestalt';
+export default function TestElement() {
+  return (
+    <RenamedBox>
+      <div role="button">
+        <RenamedBox />
+      </div>
+    </RenamedBox>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-with-renamed-box-output.js

@@ -0,0 +1,10 @@
+import { Box as RenamedBox } from 'gestalt';
+export default function TestElement() {
+  return (
+    <RenamedBox>
+      <RenamedBox role="button">
+        <RenamedBox />
+      </RenamedBox>
+    </RenamedBox>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-without-box-input.js

@@ -0,0 +1,8 @@
+import { Text, Flex } from 'gestalt';
+export default function TestElement() {
+  return (
+    <div role="button">
+      <Text>Test</Text>
+    </div>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/gestalt-import-without-box-output.js

@@ -0,0 +1,8 @@
+import { Box, Flex, Text } from 'gestalt';
+export default function TestElement() {
+  return (
+    <Box role="button">
+      <Text>Test</Text>
+    </Box>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/no-gestalt-import-input.js

@@ -0,0 +1,7 @@
+export default function TestElement() {
+  return (
+    <div role="button">
+      <button />
+    </div>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/no-gestalt-import-output.js

@@ -0,0 +1,8 @@
+import { Box } from 'gestalt';
+export default function TestElement() {
+  return (
+    <Box role="button">
+      <button />
+    </Box>
+  );
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/no-gestalt-import-selfclosed-input.js

@@ -0,0 +1,3 @@
+export default function TestElement() {
+  return <div role="button" />;
+}

packages/eslint-plugin-gestalt/src/__fixtures__/prefer-box-no-classname/invalid-no-classname/no-gestalt-import-selfclosed-output.js

@@ -0,0 +1,4 @@
+import { Box } from 'gestalt';
+export default function TestElement() {
+  return <Box role="button" />;
+}

packages/eslint-plugin-gestalt/src/eslintASTFixers.js

@@ -56,7 +56,9 @@ type RenameTagFixerType = ({|
   context: GenericNode,
   elementNode: GenericNode,
   fixer: GenericNode,
+  gestaltImportNode: GenericNode,
   newComponentName: string,
+  replaceRegexCallback?: ({| input: string |}) => string,
   tagName: string,
 |}) => $ReadOnlyArray<GenericNode>;
 
@@ -70,21 +72,31 @@ export const renameTagFixer: RenameTagFixerType = ({
   context,
   elementNode,
   fixer,
+  gestaltImportNode,
   newComponentName,
+  replaceRegexCallback = ({ input }) => input,
   tagName,
 }) => {
   return [elementNode.openingElement, elementNode.closingElement]
     .map((node) => {
       // $FlowFixMe[incompatible-type] Flow is not detecting the method filter(Boolean)
       if (!node) return false;
+      const namedImportsComponents =
+        getNamedImportsComponents({
+          importNode: gestaltImportNode,
+        }) ?? [];
 
-      return fixer.replaceText(
-        node,
-        getTextNodeFromSourceCode({ context, elementNode: node }).replace(
+      const componentNameMatch = namedImportsComponents.find(
+        (item) => item[0] === newComponentName,
+      );
+
+      const replacedText = replaceRegexCallback({
+        input: getTextNodeFromSourceCode({ context, elementNode: node }).replace(
           tagName,
-          newComponentName,
+          (componentNameMatch && componentNameMatch[1]) ?? newComponentName,
         ),
-      );
+      });
+      return fixer.replaceText(node, replacedText);
     })
     .filter(Boolean);
 };

packages/eslint-plugin-gestalt/src/eslintASTHelpers.js

@@ -253,3 +253,17 @@ export const hasLonelyAttribute: HasLonelyAttributeType = ({ elementNode, tagNam
   isTag({ elementNode, tagName }) &&
   elementNode?.attributes?.length === 1 &&
   elementNode.attributes[0]?.name?.name === attribute;
+
+type HasAttributeType = ({|
+  elementNode: GenericNode,
+  tagName: string,
+  attribute: string,
+|}) => boolean;
+
+/** This function checks is a given tag (tagName) in a node (elementNode) contains a given attribute (attribute), and returns true if so.
+Example 1:
+\<div role="button" \/\> if attribute="role" returns true
+*/
+export const hasAttribute: HasAttributeType = ({ elementNode, tagName, attribute }) =>
+  isTag({ elementNode, tagName }) &&
+  elementNode?.attributes.some((nodeAttribute) => nodeAttribute?.name?.name === attribute);

packages/eslint-plugin-gestalt/src/index.js

@@ -8,7 +8,7 @@ import noMediumFormfields from './no-medium-formfields.js';
 import noRoleLinkComponents from './no-role-link-components.js';
 import noSpreadProps from './no-spread-props.js';
 import preferBoxInlineStyle from './prefer-box-inline-style.js';
-import preferBoxLonelyRef from './prefer-box-lonely-ref.js';
+import preferBoxNoClassname from './prefer-box-no-classname.js';
 import preferBoxAsTag from './prefer-box-as-tag.js';
 
 module.exports = {
@@ -22,7 +22,7 @@ module.exports = {
     'no-role-link-components': noRoleLinkComponents,
     'no-spread-props': noSpreadProps,
     'prefer-box-inline-style': preferBoxInlineStyle,
-    'prefer-box-lonely-ref': preferBoxLonelyRef,
+    'prefer-box-no-classname': preferBoxNoClassname,
     'prefer-box-as-tag': preferBoxAsTag,
   },
 };