eslint-plugin-primer-react 8.6.1 → 9.0.0-rc.e1d461c

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

@@ -1,206 +0,0 @@
-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')
-
-// Components for which we allow all styled system props
-const alwaysExcludedComponents = new Set([
-  'BaseStyles', // BaseStyles will be deprecated eventually
-])
-
-// Excluded by default, but optionally included:
-const utilityComponents = new Set(['Box', 'Text'])
-
-// Components for which we allow a set of prop names
-const excludedComponentProps = new Map([
-  ['ActionMenu.Overlay', new Set(['width', 'height', 'maxHeight', 'position', 'top', 'right', 'bottom', 'left'])],
-  ['ActionMenu.Button', new Set(['alignContent'])],
-  ['Autocomplete.Overlay', new Set(['width', 'height', 'maxHeight', 'position', 'top', 'right', 'bottom', 'left'])],
-  ['AnchoredOverlay', new Set(['width', 'height'])],
-  ['Avatar', new Set(['size'])],
-  ['AvatarToken', new Set(['size'])],
-  ['Blankslate', new Set(['border'])],
-  ['Breadcrumbs', new Set(['overflow'])],
-  ['Button', new Set(['alignContent'])],
-  ['CircleOcticon', new Set(['size'])],
-  ['ConfirmationDialog', new Set(['width', 'height'])],
-  ['Dialog', new Set(['width', 'height', 'position'])],
-  ['IssueLabelToken', new Set(['size'])],
-  ['Overlay', new Set(['width', 'height', 'maxHeight', 'position', 'top', 'right', 'bottom', 'left'])],
-  ['ProgressBar', new Set(['bg'])],
-  ['Spinner', new Set(['size'])],
-  ['SplitPageLayout.Header', new Set(['padding'])],
-  ['SplitPageLayout.Footer', new Set(['padding'])],
-  ['SplitPageLayout.Pane', new Set(['padding', 'position', 'width'])],
-  ['SplitPageLayout.Content', new Set(['padding', 'width'])],
-  ['SplitPageLayout.Sidebar', new Set(['padding', 'position', 'width'])],
-  ['StyledOcticon', new Set(['size'])],
-  ['Octicon', new Set(['size', 'color'])],
-  ['PointerBox', new Set(['bg'])],
-  ['TextInput', new Set(['size'])],
-  ['TextInputWithTokens', new Set(['size', 'maxHeight'])],
-  ['Token', new Set(['size'])],
-  ['PageLayout', new Set(['padding'])],
-  ['PageLayout.Header', new Set(['padding'])],
-  ['PageLayout.Footer', new Set(['padding'])],
-  ['PageLayout.Pane', new Set(['padding', 'position', 'width'])],
-  ['PageLayout.Content', new Set(['padding', 'width'])],
-  ['ProgressBar', new Set(['bg'])],
-  ['ProgressBar.Item', new Set(['bg'])],
-  ['PointerBox', new Set(['bg'])],
-  ['Truncate', new Set(['maxWidth'])],
-  ['Stack', new Set(['padding', 'gap'])],
-  ['SkeletonBox', new Set(['width', 'height'])],
-])
-
-const alwaysExcludedProps = new Set(['variant', 'size'])
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    fixable: 'code',
-    schema: [
-      {
-        properties: {
-          skipImportCheck: {type: 'boolean'},
-          includeUtilityComponents: {type: 'boolean'},
-          ignoreNames: {type: 'array'},
-        },
-      },
-    ],
-    messages: {
-      noSystemProps: 'Styled-system props are deprecated ({{ componentName }} called with props: {{ propNames }})',
-    },
-  },
-  create(context) {
-    // If `skipImportCheck` is true, this rule will check for deprecated styled system props
-    // used in any components (not just ones that are imported from `@primer/react`).
-    const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
-    const includeUtilityComponents = context.options[0] ? context.options[0].includeUtilityComponents : false
-    const ignoreNames = context.options[0] ? context.options[0].ignoreNames || [] : []
-
-    const excludedComponents = new Set([
-      ...alwaysExcludedComponents,
-      ...(includeUtilityComponents ? [] : utilityComponents),
-    ])
-
-    const sourceCode = context.sourceCode ?? context.getSourceCode()
-
-    return {
-      JSXOpeningElement(jsxNode) {
-        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, sourceCode.getScope(jsxNode))) return
-        }
-
-        const componentName = getJSXOpeningElementName(jsxNode)
-        if (ignoreNames.length && ignoreNames.includes(componentName)) return
-
-        if (excludedComponents.has(componentName)) return
-
-        // Create an object mapping from prop name to the AST node for that attribute
-        const propsByNameObject = jsxNode.attributes.reduce((object, attribute) => {
-          // We don't do anything about spreads for now — only named attributes
-          if (attribute.type === 'JSXAttribute') {
-            object[attribute.name.name] = attribute
-          }
-
-          return object
-        }, {})
-
-        // Create an array of system prop attribute nodes
-        let systemProps = Object.values(pick(propsByNameObject))
-
-        const excludedProps = excludedComponentProps.has(componentName)
-          ? new Set([...alwaysExcludedProps, ...excludedComponentProps.get(componentName)])
-          : alwaysExcludedProps
-
-        // Filter out our exceptional props
-        systemProps = systemProps.filter(prop => {
-          return !excludedProps.has(prop.name.name)
-        })
-
-        if (systemProps.length !== 0) {
-          context.report({
-            node: jsxNode,
-            messageId: 'noSystemProps',
-            data: {
-              componentName,
-              propNames: systemProps.map(a => a.name.name).join(', '),
-            },
-            fix(fixer) {
-              const existingSxProp = jsxNode.attributes.find(
-                attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'sx',
-              )
-              const systemPropstylesMap = stylesMapFromPropNodes(systemProps, context)
-              if (existingSxProp && existingSxProp.value.expression.type !== 'ObjectExpression') {
-                return
-              }
-
-              const stylesToAdd = existingSxProp
-                ? excludeSxEntriesFromStyleMap(systemPropstylesMap, existingSxProp)
-                : systemPropstylesMap
-
-              return [
-                // Remove the bad props
-                ...systemProps.map(node => fixer.remove(node)),
-                ...(stylesToAdd.size > 0
-                  ? [
-                      existingSxProp
-                        ? // Update an existing sx prop
-                          fixer.insertTextAfter(
-                            last(existingSxProp.value.expression.properties),
-                            `, ${objectEntriesStringFromStylesMap(stylesToAdd)}`,
-                          )
-                        : // Insert new sx prop
-                          fixer.insertTextAfter(last(jsxNode.attributes), sxPropTextFromStylesMap(systemPropstylesMap)),
-                    ]
-                  : []),
-              ]
-            },
-          })
-        }
-      },
-    }
-  },
-}
-
-const sxPropTextFromStylesMap = styles => {
-  return ` sx={{${objectEntriesStringFromStylesMap(styles)}}}`
-}
-
-const objectEntriesStringFromStylesMap = styles => {
-  return [...styles].map(([name, value]) => `${name}: ${value}`).join(', ')
-}
-
-// Given an array of styled prop attributes, return a mapping from attribute to expression
-const stylesMapFromPropNodes = (systemProps, context) => {
-  return new Map(
-    systemProps.map(a => [
-      a.name.name,
-      a.value === null ? 'true' : a.value.raw || context.getSourceCode().getText(a.value.expression),
-    ]),
-  )
-}
-
-// Given a style map and an existing sx prop, return a style map containing
-// only the entries that aren't already overridden by an sx object entry
-const excludeSxEntriesFromStyleMap = (stylesMap, sxProp) => {
-  if (
-    !sxProp.value ||
-    sxProp.value.type !== 'JSXExpressionContainer' ||
-    sxProp.value.expression.type !== 'ObjectExpression'
-  ) {
-    return stylesMap
-  }
-  return new Map(
-    [...stylesMap].filter(([key]) => {
-      return !some(sxProp.value.expression.properties, p => p.type === 'Property' && p.key.name === key)
-    }),
-  )
-}

package/src/rules/no-unnecessary-components.js

@@ -1,160 +0,0 @@
-// @ts-check
-
-const {ESLintUtils} = require('@typescript-eslint/utils')
-const {IndexKind} = require('typescript')
-const {pick: pickStyledSystemProps} = require('@styled-system/props')
-const {isPrimerComponent} = require('../utils/is-primer-component')
-
-/** @typedef {import('@typescript-eslint/types').TSESTree.JSXAttribute} JSXAttribute */
-
-const components = {
-  Box: {
-    replacement: 'div',
-    messageId: 'unecessaryBox',
-    message: 'Prefer plain HTML elements over `Box` when not using `sx` for styling.',
-    allowedProps: new Set(['sx']), // + styled-system props
-  },
-  Text: {
-    replacement: 'span',
-    messageId: 'unecessarySpan',
-    message: 'Prefer plain HTML elements over `Text` when not using `sx` for styling.',
-    allowedProps: new Set(['sx', 'size', 'weight']), // + styled-system props
-  },
-}
-
-const elementNameRegex = /^[a-z]\w*$/
-const componentNameRegex = /^[A-Z][\w._]*$/
-
-/** @param {string} propName */
-const isStyledSystemProp = propName => propName in pickStyledSystemProps({[propName]: propName})
-
-const rule = ESLintUtils.RuleCreator.withoutDocs({
-  meta: {
-    docs: {
-      description:
-        '`Box` and `Text` should only be used to provide access to the `sx` styling system and have a performance cost. If `sx` props are not being used, prefer `div` and `span` instead.',
-    },
-    messages: {
-      [components.Box.messageId]: components.Box.message,
-      [components.Text.messageId]: components.Text.message,
-    },
-    type: 'problem',
-    schema: [
-      {
-        type: 'object',
-        properties: {
-          skipImportCheck: {
-            type: 'boolean',
-          },
-        },
-        additionalProperties: false,
-      },
-    ],
-    fixable: 'code',
-  },
-  defaultOptions: [{skipImportCheck: false}],
-  create(context) {
-    return {
-      JSXElement({openingElement, closingElement}) {
-        const {name, attributes} = openingElement
-
-        // Ensure this is one of the components we are looking for. Note this doesn't account for import aliases; this
-        // is intentional to avoid having to do the scope tree traversal for every component of every name, which would
-        // be needlessly expensive. We just ignore aliased imports.
-        if (name.type !== 'JSXIdentifier' || !(name.name in components)) return
-        const componentConfig = components[/** @type {keyof typeof components} */ (name.name)]
-
-        // Only continue if the variable declaration is an import from @primer/react. Otherwise it could, for example,
-        // be an import from @primer/brand, which would be valid without sx.
-        const skipImportCheck = context.options[0]?.skipImportCheck
-        const isPrimer = skipImportCheck || isPrimerComponent(name, context.sourceCode.getScope(openingElement))
-        if (!isPrimer) return
-
-        /** @param {string} name */
-        const isAllowedProp = name => componentConfig.allowedProps.has(name) || isStyledSystemProp(name)
-
-        // 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 allowed property
-          if (attribute.type === 'JSXSpreadAttribute') {
-            const services = ESLintUtils.getParserServices(context)
-            const typeChecker = services.program.getTypeChecker()
-
-            const spreadType = services.getTypeAtLocation(attribute.argument)
-
-            // Check if the spread type has a string index signature - this could hide an allowed property
-            if (typeChecker.getIndexTypeOfType(spreadType, IndexKind.String) !== undefined) return
-
-            const spreadPropNames = typeChecker.getPropertiesOfType(spreadType).map(prop => prop.getName())
-
-            // If an allowed prop gets spread in, this is a valid use of the component
-            if (spreadPropNames.some(isAllowedProp)) return
-
-            // If there is an `as` inside the spread object, we can't autofix reliably
-            if (spreadPropNames.includes('as')) asProp = null
-
-            continue
-          }
-
-          // Has an allowed prop, so should keep using this component
-          if (attribute.name.type === 'JSXIdentifier' && isAllowedProp(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
-        }
-
-        // Determine a replacement component name accounting for the `as` prop if present
-        /** @type {string | null} */
-        let replacement = componentConfig.replacement
-        if (asProp === null) {
-          // {...{as: 'something-unusable'}}
-          replacement = null
-        } else if (asProp?.type === 'JSXAttribute') {
-          // as={ComponentReference}
-          if (asProp.value?.type === 'JSXExpressionContainer' && asProp.value.expression.type === 'Identifier') {
-            // can't just use expression.name here because we want the whole expression if it's A.B
-            const expressionStr = context.sourceCode.getText(asProp.value.expression)
-            replacement = componentNameRegex.test(expressionStr) ? expressionStr : null
-          }
-          // as={'tagName'} (surprisingly common, we really should enable `react/jsx-curly-brace-presence`)
-          else if (
-            asProp.value?.type === 'JSXExpressionContainer' &&
-            asProp.value.expression.type === 'Literal' &&
-            typeof asProp.value.expression.value === 'string' &&
-            elementNameRegex.test(asProp.value.expression.value)
-          ) {
-            replacement = asProp.value.expression.value
-          }
-          // as="tagName"
-          else if (
-            asProp.value?.type === 'Literal' &&
-            typeof asProp.value.value === 'string' &&
-            elementNameRegex.test(asProp.value.value)
-          ) {
-            replacement = asProp.value.value
-          }
-          // too complex to autofix
-          else {
-            replacement = null
-          }
-        }
-
-        context.report({
-          node: name,
-          messageId: componentConfig.messageId,
-          fix: replacement
-            ? function* (fixer) {
-                yield fixer.replaceText(name, replacement)
-                if (closingElement) yield fixer.replaceText(closingElement.name, replacement)
-                if (asProp) yield fixer.remove(asProp)
-              }
-            : undefined,
-        })
-      },
-    }
-  },
-})
-
-module.exports = {...rule, components}