eslint-plugin-primer-react 4.1.1 → 4.1.2-rc.62fedad

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "4.1.1",
+  "version": "4.1.2-rc.62fedad",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/rules/__tests__/no-system-props.test.js

@@ -22,6 +22,7 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from '@primer/react'; <Button variant="large" />`,
     `import {Button} from '@primer/react'; <Button size="large" />`,
     `import {ActionMenu} from '@primer/react'; <ActionMenu.Overlay width="large" />`,
+    {code: `<img width="200px" />`, options: [{skipImportCheck: true}]},
   ],
   invalid: [
     {

package/src/rules/no-system-props.js

@@ -1,4 +1,5 @@
 const {isPrimerComponent} = require('../utils/is-primer-component')
+const {isHTMLElement} = require('../utils/is-html-element')
 const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 const {pick} = require('@styled-system/props')
 const {some, last} = require('lodash')
@@ -42,6 +43,7 @@ const excludedComponentProps = new Map([
   ['PageLayout.Content', new Set(['padding', 'width'])],
   ['ProgressBar', new Set(['bg'])],
   ['PointerBox', new Set(['bg'])],
+  ['Truncate', new Set(['maxWidth'])],
 ])
 
 const alwaysExcludedProps = new Set(['variant', 'size'])
@@ -80,7 +82,14 @@ module.exports = {
 
     return {
       JSXOpeningElement(jsxNode) {
-        if (!skipImportCheck && !isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+        if (skipImportCheck) {
+          // if we skip checking if component is imported from primer,
+          // we need to atleast skip html elements
+          if (isHTMLElement(jsxNode)) return
+        } else {
+          // skip if component is not imported from primer/react
+          if (!isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) return
+        }
 
         const componentName = getJSXOpeningElementName(jsxNode)
 

package/src/utils/is-html-element.js

@@ -0,0 +1,11 @@
+function isHTMLElement(jsxNode) {
+  if (jsxNode.name.type === 'JSXIdentifier') {
+    // this is a very silly proxy, but it works
+    // React components are capitalised, html elements are not
+    const firstLetter = jsxNode.name.name
+    if (firstLetter === firstLetter.toLowerCase()) return true
+  }
+
+  return false
+}
+exports.isHTMLElement = isHTMLElement