build: use external eslint, prettier configs

.eslintrc.cjs

@@ -1,98 +1,3 @@
 module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
-    'prettier',
-    'plugin:storybook/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-    'eslint-plugin-react-hooks',
-    'i18next',
-    'unused-imports',
-    'simple-import-sort',
-    'eslint-plugin-import',
-  ],
-  root: true,
-  rules: {
-    curly: 'error',
-    'i18next/no-literal-string': 'warn',
-    'react/jsx-no-bind': ['error', { allowBind: true }],
-    'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
-    'react-hooks/exhaustive-deps': 'error',
-    'no-var': 'error',
-    'brace-style': 'error',
-    'prefer-template': 'error',
-    'import/no-duplicates': 'error',
-    radix: 'error',
-    'space-before-blocks': 'error',
-    'import/prefer-default-export': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    'unused-imports/no-unused-imports': 'error',
-    'unused-imports/no-unused-vars': [
-      'warn',
-      {
-        vars: 'all',
-        varsIgnorePattern: '^_',
-        args: 'after-used',
-        argsIgnorePattern: '^_',
-      },
-    ],
-    '@typescript-eslint/ban-ts-comment': 'warn',
-    '@typescript-eslint/no-explicit-any': 'warn',
-    '@typescript-eslint/no-empty-interface': [
-      'error',
-      {
-        allowSingleExtends: true,
-      },
-    ],
-    '@typescript-eslint/consistent-type-imports': [
-      'error',
-      {
-        prefer: 'type-imports',
-        fixStyle: 'separate-type-imports',
-        disallowTypeAnnotations: true,
-      },
-    ],
-    '@typescript-eslint/no-import-type-side-effects': 'error',
-    'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error',
-    'no-restricted-syntax': [
-      'error',
-      {
-        message: 'React\'s `memo` strips types from generic components. Use `typedMemo` instead.',
-        selector: 'CallExpression[callee.name="memo"]',
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: ['*.stories.tsx'],
-      rules: {
-        'i18next/no-literal-string': 'off',
-      },
-    },
-  ],
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
+  extends: ['@invoke-ai/eslint-config-react'],
 };

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

.prettierrc.cjs

@@ -1,8 +1,3 @@
 module.exports = {
-  trailingComma: 'es5',
-  printWidth: 120,
-  tabWidth: 2,
-  semi: true,
-  singleQuote: true,
-  endOfLine: 'auto',
+  ...require('@invoke-ai/prettier-config-react'),
 };

lib/util/typed-memo.ts

@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import type React from 'react';
 import { memo } from 'react';
 
 /**
  * A typed version of React.memo, useful for components that take generics.
  */
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const typedMemo: <T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
   component: T,
   propsAreEqual?: (prevProps: React.ComponentProps<T>, nextProps: React.ComponentProps<T>) => boolean

package.json

@@ -67,6 +67,8 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.16",
+    "@invoke-ai/eslint-config-react": "^0.0.4",
+    "@invoke-ai/prettier-config-react": "^0.0.3",
     "@nanostores/react": "^0.7.1",
     "@storybook/addon-essentials": "^7.6.9",
     "@storybook/addon-interactions": "^7.6.9",
@@ -80,20 +82,9 @@
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-react": "^4.2.1",
     "chakra-react-select": "^4.7.6",
     "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-i18next": "^6.0.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-unused-imports": "^3.0.0",
     "framer-motion": "^10.18.0",
     "glob": "^10.3.10",
     "lodash-es": "^4.17.21",