Add new size and weight allowed props for Text component

Author: iansan5653

src/rules/__tests__/no-unnecessary-components.test.js

@@ -65,6 +65,16 @@ ruleTester.run('unnecessary-components', rule, {
         filename,
       },
     ]),
+    {
+      name: `Text with weight prop`,
+      code: `${prcImport}${jsx(`<Text weight='medium'>Hello World</Text>`)}`,
+      filename,
+    },
+    {
+      name: `Text with size prop`,
+      code: `${prcImport}${jsx(`<Text size='small'>Hello World</Text>`)}`,
+      filename,
+    },
   ],
   invalid: Object.entries(components).flatMap(([component, {messageId, replacement}]) => [
     {

src/rules/no-unnecessary-components.js

@@ -12,11 +12,13 @@ const components = {
     replacement: 'div',
     messageId: 'unecessaryBox',
     message: 'Prefer plain HTML elements over `Box` when not using `sx` for styling.',
+    allowedProps: ['sx'], // + styled-system props
   },
   Text: {
     replacement: 'span',
     messageId: 'unecessarySpan',
     message: 'Prefer plain HTML elements over `Text` when not using `sx` for styling.',
+    allowedProps: ['sx', 'size', 'weight'], // + styled-system props
   },
 }
 
@@ -68,19 +70,20 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
         const isPrimer = skipImportCheck || isPrimerComponent(name, context.sourceCode.getScope(openingElement))
         if (!isPrimer) return
 
-        // Validate the attributes and ensure an `sx` prop is present or spreaded in
+        // Validate the attributes and ensure an allowed prop is present or spreaded in
         /** @type {typeof attributes[number] | undefined | null} */
         let asProp = undefined
         for (const attribute of attributes) {
-          // If there is a spread type, check if the type of the spreaded value has an `sx` property
+          // If there is a spread type, check if the type of the spreaded value has an allowed property
           if (attribute.type === 'JSXSpreadAttribute') {
             const services = ESLintUtils.getParserServices(context)
             const typeChecker = services.program.getTypeChecker()
 
             const spreadType = services.getTypeAtLocation(attribute.argument)
-            if (typeChecker.getPropertyOfType(spreadType, 'sx') !== undefined) return
+            for (const allowedProp of componentConfig.allowedProps)
+              if (typeChecker.getPropertyOfType(spreadType, allowedProp) !== undefined) return
 
-            // Check if the spread type has a string index signature - this could hide an `sx` property
+            // Check if the spread type has a string index signature - this could hide an allowed property
             if (typeChecker.getIndexTypeOfType(spreadType, IndexKind.String) !== undefined) return
 
             // If there is an `as` inside the spread object, we can't autofix reliably
@@ -89,12 +92,13 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
             continue
           }
 
-          // Has sx prop, so should keep using this component
-          if (
-            attribute.name.type === 'JSXIdentifier' &&
-            (attribute.name.name === 'sx' || isStyledSystemProp(attribute.name.name))
-          )
-            return
+          // Has an allowed prop, so should keep using this component
+          for (const allowedProp of componentConfig.allowedProps)
+            if (
+              attribute.name.type === 'JSXIdentifier' &&
+              (attribute.name.name === allowedProp || isStyledSystemProp(attribute.name.name))
+            )
+              return
 
           // If there is an `as` prop we will need to account for that when autofixing
           if (attribute.name.type === 'JSXIdentifier' && attribute.name.name === 'as') asProp = attribute