Eslint all files with prettier

.eslintrc.json

@@ -1,6 +1,26 @@
 {
   "parser": "@typescript-eslint/parser",
-  "extends": ["plugin:react/recommended", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    ".cache",
+    "coverage/**/*",
+    "docs/public/**/*",
+    "dist/**/*",
+    "lib/**/*",
+    "lib-*/**/*",
+    "types/**/*"
+  ],
   "globals": {
     "__DEV__": "readonly"
   },
@@ -38,7 +58,12 @@
     // rules which apply only to TS
     {
       "files": ["**/*.ts", "**/*.tsx"],
-      "extends": ["plugin:@typescript-eslint/recommended"]
+      "extends": ["plugin:@typescript-eslint/recommended"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/explicit-module-boundary-types": 0,
+        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
+      }
     }
   ]
 }

codemods/lib/modifyProps.js

@@ -1,13 +1,15 @@
 module.exports = (ast, j, moduleName, propsMap) => {
   const importsByName = {}
 
-  ast.find(j.ImportDeclaration, decl => decl.source.value === moduleName).forEach(decl => {
-    j(decl)
-      .find(j.ImportSpecifier)
-      .forEach(spec => {
-        importsByName[spec.node.imported.name] = spec.node.local.name
-      })
-  })
+  ast
+    .find(j.ImportDeclaration, decl => decl.source.value === moduleName)
+    .forEach(decl => {
+      j(decl)
+        .find(j.ImportSpecifier)
+        .forEach(spec => {
+          importsByName[spec.node.imported.name] = spec.node.local.name
+        })
+    })
 
   ast
     .find(j.JSXElement, {

codemods/lib/replaceImportSource.js

@@ -1,7 +1,7 @@
 module.exports = function replaceImportSource(ast, j, from, to) {
-  ast.find(j.ImportDeclaration, decl => decl.source.value === from).forEach(decl => {
-    j(decl)
-      .find(j.Literal, {value: from})
-      .replaceWith(j.literal(to))
-  })
+  ast
+    .find(j.ImportDeclaration, decl => decl.source.value === from)
+    .forEach(decl => {
+      j(decl).find(j.Literal, {value: from}).replaceWith(j.literal(to))
+    })
 }

docs/gatsby-config.js

@@ -13,15 +13,15 @@ module.exports = {
       options: {
         repoRootPath: '..',
         defaultBranch: 'main'
-      },
+      }
     },
     {
       resolve: `gatsby-plugin-alias-imports`,
       options: {
         alias: {
           '@primer/components': path.resolve(__dirname, '../src'),
           'styled-components': path.resolve(__dirname, '..', 'node_modules', 'styled-components'),
-          'react': path.resolve(__dirname, 'node_modules', 'react'),
+          react: path.resolve(__dirname, 'node_modules', 'react')
         }
       }
     }

docs/gatsby-node.js

@@ -12,11 +12,11 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
       // The new configuration is based off the original...
       ...loaders.js(),
       test: /\.jsx?$/,
-      exclude: (modulePath) => /node_modules/.test(modulePath),
+      exclude: modulePath => /node_modules/.test(modulePath),
       // ...except that we want to run Primer React through webpack as well.
       // By default, Gatsby won't use the define plugin we added above on Primer React.
-      include: (modulePath) => /@primer\/components/.test(modulePath),
-    },
+      include: modulePath => /@primer\/components/.test(modulePath)
+    }
   ]
   actions.replaceWebpackConfig(config)
 }

index.d.ts

@@ -1,8 +1,7 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
 declare module '@primer/components' {
   type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
   import * as StyledSystem from 'styled-system'
-  import {SystemStyleObject} from '@styled-system/css'
-  import * as StyledComponents from 'styled-components'
   import {ReactComponentLike} from 'prop-types'
   import * as History from 'history'
 

package.json

@@ -12,7 +12,8 @@
     "dist:transpile:cjs": "rm -rf lib && cross-env BABEL_MODULE=commonjs babel src --out-dir lib --extensions '.js,.ts,.jsx,.tsx'",
     "dist:transpile:esm": "rm -rf lib-esm && babel src --out-dir lib-esm --extensions '.js,.ts,.jsx,.tsx'",
     "dist:types": "rm -rf types && tsc",
-    "lint": "eslint src docs/components",
+    "lint": "eslint '**/*.{js,ts,tsx}'",
+    "lint:fix": "eslint '**/*.{js,ts,tsx}' --fix",
     "test": "jest -- src",
     "update-snapshots": "jest -u -- src",
     "watch": "jest --watch --no-coverage",
@@ -61,7 +62,7 @@
   "devDependencies": {
     "@babel/cli": "7.8.4",
     "@babel/core": "7.9.0",
-    "@babel/eslint-parser": "7.12.1",
+    "@babel/eslint-parser": "7.13.14",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
     "@babel/plugin-proposal-optional-chaining": "7.12.16",
     "@babel/plugin-transform-modules-commonjs": "7.12.1",
@@ -86,8 +87,8 @@
     "@types/jest-axe": "3.5.1",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
-    "@typescript-eslint/eslint-plugin": "4.14.1",
-    "@typescript-eslint/parser": "4.14.1",
+    "@typescript-eslint/eslint-plugin": "4.20.0",
+    "@typescript-eslint/parser": "4.20.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.3.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.2.2",
@@ -101,20 +102,21 @@
     "concurrently": "5.3.0",
     "cross-env": "7.0.2",
     "enzyme": "3.10.0",
-    "eslint": "6.5.1",
-    "eslint-plugin-github": "4.1.1",
-    "eslint-plugin-jest": "22.20.0",
-    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint": "7.23.0",
+    "eslint-plugin-github": "4.1.2",
+    "eslint-plugin-jest": "24.3.2",
+    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react": "7.22.0",
-    "eslint-plugin-react-hooks": "3.0.0",
+    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-react-hooks": "4.2.0",
     "jest": "26.6.3",
     "jest-axe": "4.1.0",
     "jest-styled-components": "6.3.3",
     "jscodeshift": "0.6.4",
     "lodash.isempty": "4.4.0",
     "lodash.isobject": "3.0.2",
     "playroom": "0.15.1",
+    "prettier": "2.2.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-test-renderer": "16.10.2",

src/Button/index.ts

@@ -14,4 +14,3 @@ export {default as ButtonTableList} from './ButtonTableList'
 export type {ButtonTableListProps} from './ButtonTableList'
 export {default as ButtonClose} from './ButtonClose'
 export type {ButtonCloseProps} from './ButtonClose'
-

src/Link.tsx

@@ -12,18 +12,6 @@ type StyledLinkProps = {
   SxProp &
   SystemTypographyProps
 
-const buttonStyles = `
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  appearance: none;
-`
-
 const hoverColor = system({
   hoverColor: {
     property: 'color',

src/Pagination/Pagination.tsx

@@ -108,7 +108,7 @@ const Page = styled.a`
 `
 
 type UsePaginationPagesParameters = {
-  theme?: object // set to theme type once /src/theme.js is converted
+  theme?: Record<string, unknown> // set to theme type once /src/theme.js is converted
   pageCount: number
   currentPage: number
   onPageChange: (e: React.MouseEvent, n: number) => void
@@ -156,7 +156,7 @@ const PaginationContainer = styled.nav`
 `
 
 export type PaginationProps = {
-  theme?: object
+  theme?: Record<string, unknown>
   pageCount: number
   currentPage: number
   onPageChange?: (e: React.MouseEvent, n: number) => void
@@ -200,6 +200,7 @@ function defaultHrefBuilder(pageNum: number) {
   return `#${pageNum}`
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
 
 Pagination.defaultProps = {

src/Portal/index.ts

@@ -1,5 +1,5 @@
-import {Portal, PortalProps, registerPortalRoot} from "./Portal"
+import {Portal, PortalProps, registerPortalRoot} from './Portal'
 
 export default Portal
 export {registerPortalRoot}
-export type {PortalProps}
+export type {PortalProps}

src/SelectMenu/SelectMenu.tsx

@@ -45,7 +45,7 @@ type SelectMenuInternalProps = {
 
 // 'as' is spread out because we don't want users to be able to change the tag.
 const SelectMenu = React.forwardRef<HTMLElement, SelectMenuInternalProps>(
-  ({children, initialTab = '', as, ...rest}, forwardedRef) => {
+  ({children, initialTab = '', as: _ignoredAs, ...rest}, forwardedRef) => {
     const backupRef = useRef<HTMLElement>(null)
     const ref = forwardedRef ?? backupRef
     const [selectedTab, setSelectedTab] = useState(initialTab)
@@ -98,17 +98,17 @@ const SelectMenu = React.forwardRef<HTMLElement, SelectMenuInternalProps>(
 SelectMenu.displayName = 'SelectMenu'
 
 export type SelectMenuProps = ComponentProps<typeof SelectMenu>
-export type { SelectMenuDividerProps } from './SelectMenuDivider'
-export type { SelectMenuFilterProps } from './SelectMenuFilter'
-export type { SelectMenuFooterProps } from './SelectMenuFooter'
-export type { SelectMenuHeaderProps } from './SelectMenuHeader'
-export type { SelectMenuItemProps } from './SelectMenuItem'
-export type { SelectMenuListProps } from './SelectMenuList'
-export type { SelectMenuLoadingAnimationProps } from './SelectMenuLoadingAnimation'
-export type { SelectMenuModalProps } from './SelectMenuModal'
-export type { SelectMenuTabProps } from './SelectMenuTab'
-export type { SelectMenuTabPanelProps } from './SelectMenuTabPanel'
-export type { SelectMenuTabsProps } from './SelectMenuTabs'
+export type {SelectMenuDividerProps} from './SelectMenuDivider'
+export type {SelectMenuFilterProps} from './SelectMenuFilter'
+export type {SelectMenuFooterProps} from './SelectMenuFooter'
+export type {SelectMenuHeaderProps} from './SelectMenuHeader'
+export type {SelectMenuItemProps} from './SelectMenuItem'
+export type {SelectMenuListProps} from './SelectMenuList'
+export type {SelectMenuLoadingAnimationProps} from './SelectMenuLoadingAnimation'
+export type {SelectMenuModalProps} from './SelectMenuModal'
+export type {SelectMenuTabProps} from './SelectMenuTab'
+export type {SelectMenuTabPanelProps} from './SelectMenuTabPanel'
+export type {SelectMenuTabsProps} from './SelectMenuTabs'
 export default Object.assign(SelectMenu, {
   MenuContext: MenuContext,
   List: SelectMenuList,

src/TabNav.tsx

@@ -24,7 +24,7 @@ const TabNavBody = styled.nav`
 
 export type TabNavProps = ComponentProps<typeof TabNavBase>
 
-function TabNav({children, "aria-label": ariaLabel, ...rest}: TabNavProps) {
+function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   return (
     <TabNavBase {...rest}>
       <TabNavBody aria-label={ariaLabel}>{children}</TabNavBody>

src/TextInput.tsx

@@ -94,7 +94,6 @@ const Wrapper = styled.span<StyledWrapperProps>`
       background-color: ${get('colors.input.contrastBg')};
     `}
 
-
   ${props =>
     props.disabled &&
     css`

src/__tests__/Avatar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Avatar} from '..'
 import theme from '../theme'
-import {px, render, percent, behavesAsComponent, checkExports} from '../utils/testing'
+import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'

src/__tests__/Box.tsx

@@ -12,7 +12,7 @@ describe('Box', () => {
   behavesAsComponent({Component: Box, systemPropArray: [COMMON, LAYOUT, FLEX]})
 
   checkExports('Box', {
-    default: Box,
+    default: Box
   })
 
   it('should have no axe violations', async () => {

src/__tests__/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Breadcrumb} from '..'
-import {mount, render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
+import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
 import {COMMON} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'

src/__tests__/BreadcrumbItem.tsx

@@ -8,7 +8,7 @@ import {behavesAsComponent, render} from '../utils/testing'
 expect.extend(toHaveNoViolations)
 
 describe('Breadcrumb.Item', () => {
-  behavesAsComponent({Component: Breadcrumb.Item, systemPropArray:[COMMON]})
+  behavesAsComponent({Component: Breadcrumb.Item, systemPropArray: [COMMON]})
 
   it('renders an <a> by default', () => {
     expect(render(<Breadcrumb.Item />).type).toEqual('a')
@@ -26,7 +26,7 @@ describe('Breadcrumb.Item', () => {
   })
 
   it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
-    const Link = ({theme, ...props}: any) => <div {...props} />
+    const Link = ({theme: _ignoredTheme, ...props}: any) => <div {...props} />
     expect(render(<Breadcrumb.Item as={Link} to="#" />)).toMatchSnapshot()
   })
 })

src/__tests__/Caret.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Caret, {CaretProps} from '../Caret'
 import {render, checkExports} from '../utils/testing'
-import theme from '../theme'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'

src/__tests__/CircleBadge.tsx

@@ -11,14 +11,22 @@ expect.extend(toHaveNoViolations)
 const imgInput = <img alt="" src="primer.jpg" />
 
 describe('CircleBadge', () => {
-  behavesAsComponent({Component: CircleBadge, systemPropArray: [COMMON], toRender: () => <CircleBadge>{imgInput}</CircleBadge>})
+  behavesAsComponent({
+    Component: CircleBadge,
+    systemPropArray: [COMMON],
+    toRender: () => <CircleBadge>{imgInput}</CircleBadge>
+  })
 
   checkExports('CircleBadge', {
     default: CircleBadge
   })
 
   describe('CircleBadge.Icon', () => {
-    behavesAsComponent({Component: CircleBadge.Icon, systemPropArray: [COMMON], toRender: () => <CircleBadge.Icon icon={CheckIcon} />})
+    behavesAsComponent({
+      Component: CircleBadge.Icon,
+      systemPropArray: [COMMON],
+      toRender: () => <CircleBadge.Icon icon={CheckIcon} />
+    })
   })
 
   it('should have no axe violations', async () => {

src/__tests__/Dialog.tsx

@@ -89,7 +89,7 @@ describe('Dialog', () => {
   })
 
   it('should have no axe violations', async () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const spy = jest.spyOn(console, 'warn').mockImplementation()
     const {container} = HTMLRender(comp)
     // eslint-disable-next-line no-console
     spy.mockRestore()

src/__tests__/FilterListItem.tsx

@@ -5,10 +5,8 @@ import {COMMON} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
-import { ReactTestRendererJSON } from 'react-test-renderer'
 expect.extend(toHaveNoViolations)
 
-
 describe('FilterList.Item', () => {
   behavesAsComponent({Component: FilterList.Item, systemPropArray: [COMMON]})
 
@@ -29,6 +27,6 @@ describe('FilterList.Item', () => {
 
   it('respects "count" prop', () => {
     const {getByText} = HTMLRender(<FilterList.Item count={400} />)
-    expect(getByText("400")).toBeTruthy()
+    expect(getByText('400')).toBeTruthy()
   })
 })