fix(eslint): Add import/no-extraneous-dependencies and fix bad imports

Author: hasparus

.eslintrc.js

@@ -20,8 +20,23 @@ module.exports = {
     ],
     '@typescript-eslint/no-redeclare': 'off',
 
+    // Ensure peerDependencies and dependencies are properly configured
+    'import/no-extraneous-dependencies': 'error',
+
     // TypeScript checks this
     'no-undef': 'off',
     'no-lone-blocks': 'off',
   },
+  overrides: [
+    {
+      files: [
+        'packages/**/test/**/*.{ts,tsx,js,jsx}',
+        'packages/e2e/**/*.{ts,tsx}',
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+        'react/jsx-pascal-case': 'off',
+      },
+    },
+  ],
 }

package.json

@@ -7,6 +7,7 @@
     "dev:docs": "yarn workspace docs start",
     "clean": "lerna run clean && rimraf packages/*/{dist,rts2_cache*}",
     "format": "prettier --write \"**/*.{ts,js,json}\" \"**/*.md\"  \"**/*.mdx\"",
+    "lint": "eslint --ext .ts,.tsx,.js \"packages/**/*.{ts,tsx,js}\"",
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "typecheck:tests": "tsc --noEmit -P ./tsconfig.test.json",

packages/color-modes/src/index.tsx

@@ -21,7 +21,7 @@ import {
   NestedScale,
   css,
 } from '@theme-ui/css'
-import { Global, Interpolation } from '@emotion/react'
+import { Global } from '@emotion/react'
 
 import {
   toCustomProperties,

packages/css/test/errors-and-inference.ts

@@ -35,7 +35,7 @@ describe('Theme', () => {
       })
     `).toFail(
       new RegExp(
-        `Error snippet\.tsx \\(\\d+,\\d+\\): Type '{ color: "blue"; whiteSpace: "banana"; }'` +
+        `Error snippet\\.tsx \\(\\d+,\\d+\\): Type '{ color: "blue"; whiteSpace: "banana"; }'` +
           ` is not assignable to type '[\\s\\S]+'.\\n\\s+` +
           `Types of property 'whiteSpace' are incompatible.\\n\\s+` +
           `Type '"banana"' is not assignable to type [\\s\\S]+`

packages/css/test/index.ts

@@ -1,4 +1,4 @@
-import { css, NestedScale, NestedScaleDict, Theme, ThemeUIExtendedCSSProperties } from '../src'
+import { css, NestedScaleDict, Theme } from '../src'
 
 const theme: Theme = {
   colors: {
@@ -735,17 +735,21 @@ test('omits empty values', () => {
 })
 
 test('borderTopWidth accepts number', () => {
-  expect(css({
-    borderTopWidth: 7,
-  })(theme)).toEqual({
+  expect(
+    css({
+      borderTopWidth: 7,
+    })(theme)
+  ).toEqual({
     borderTopWidth: 7,
   })
 
-  expect(css({
-    borderTopWidth: 1,
-  })({
-    borderWidths: ['10px', '20px']
-  })).toEqual({
+  expect(
+    css({
+      borderTopWidth: 1,
+    })({
+      borderWidths: ['10px', '20px'],
+    })
+  ).toEqual({
     borderTopWidth: '20px',
   })
 })

packages/gatsby-plugin-theme-ui/package.json

@@ -6,7 +6,8 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0",
-    "theme-ui": "^0.11"
+    "theme-ui": "^0.11",
+    "react": "^16 || ^17"
   },
   "keywords": [
     "gatsby",

packages/parse-props/package.json

@@ -22,7 +22,7 @@
   },
   "peerDependencies": {
     "react": "^16 || ^17",
-    "@emotion/styled": "^11"
+    "@emotion/react": "^11"
   },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }

packages/theme-ui/package.json

@@ -20,7 +20,8 @@
     "@theme-ui/theme-provider": "0.12.0"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "react-dom": "^16 || ^17"
   },
   "keywords": [
     "theme-ui",

packages/theme-ui/test/color-modes.tsx

@@ -107,7 +107,7 @@ test('useColorMode updates color mode state', () => {
     mode = colorMode
     return (
       <button
-        onClick={(e) => {
+        onClick={(_e) => {
           setMode('dark')
         }}
         children="test"
@@ -134,9 +134,7 @@ test('color mode is passed through theme context', () => {
         sx={{
           color: 'text',
         }}
-        onClick={(e) => {
-          setMode('dark')
-        }}
+        onClick={() => setMode('dark')}
         children="test"
       />
     )