Add external ESLint Config

.babelrc.js

@@ -1,7 +1,5 @@
 module.exports = {
-  presets: [
-    ['@babel/preset-typescript', { jsxPragma: 'h', isJSX: true }]
-  ],
+  presets: [['@babel/preset-typescript', { jsxPragma: 'h', isJSX: true }]],
   plugins: [
     [
       '@babel/plugin-transform-react-jsx',

.eslintrc.js

@@ -1,81 +1,15 @@
-const tsRules = {
-  'typescript/no-unused-vars': 'error',
-  'no-undef': 'off' // ts handles this
-}
-
-const reactRules = {
-  'react/react-in-jsx-scope': 'off',
-  'react/no-unknown-property': ['error', { ignore: ['class', 'for'] }],
-  'no-unused-vars': ['error', { varsIgnorePattern: '^h$' }],
-  'react/display-name': 'off', // annoying
-  'react/require-render-return': 'off', // buggy, doens't work with render props
-  'react/no-deprecated': 'off' // preact !== react
-}
-
-const unicornRules = {
-  'unicorn/prefer-spread': 'off'
-}
-
-const importRules = {
-  'import/first': 'error',
-  'import/no-duplicates': 'error',
-  // 'import/no-namespace': 'error', // needed in node (rollup config). TODO: switch to separate configs for web/node
-  // 'import/order': 'error' // broken for now, copies file contents over and over
-  'import/newline-after-import': 'error',
-  'import/no-named-default': 'error'
-}
-
-const promiseRules = {
-  'promise/no-return-wrap': 'error',
-  'promise/param-names': 'error',
-  'promise/no-nesting': 'error',
-  'promise/no-new-statics': 'error',
-  'promise/no-return-in-finally': 'error',
-  'promise/valid-params': 'error'
-  // 'promise/prefer-await-to-then': 'error'
-}
-
 module.exports = {
-  env: {
-    browser: true,
-    es6: true
-  },
-  parser: 'typescript-eslint-parser',
-  parserOptions: {
-    sourceType: 'module'
-  },
-  settings: {
-    react: {
-      pramga: 'h'
-    },
-    'import/resolver': {
-      node: true,
-      'eslint-import-resolver-typescript': true
-    }
-  },
   extends: [
-    'eslint:recommended',
-    'plugin:jest/recommended',
-    'plugin:react/recommended',
-    'plugin:unicorn/recommended',
-    'plugin:array-func/recommended'
-    // 'plugin:jsx-a11y/recommended'
-  ],
-  plugins: [
-    'react',
-    'jest',
-    'typescript',
-    'unicorn',
-    'import',
-    'promise',
-    'array-func'
-    // 'jsx-a11y'
+    'plugin:caleb/recommended',
+    'plugin:caleb/jest',
+    'plugin:caleb/preact'
   ],
-  rules: Object.assign(
-    reactRules,
-    tsRules,
-    unicornRules,
-    importRules,
-    promiseRules
-  )
+  rules: {
+    'no-negated-condition': 'off',
+    'no-process-exit': 'off',
+    'no-alert': 'off',
+    'handle-callback-err': 'off',
+    'caleb/react/jsx-no-bind': 'off',
+    'caleb/jsx-a11y/media-has-caption': 'off'
+  }
 }

package.json

@@ -22,18 +22,8 @@
     "connect-history-api-fallback": "1.5.0",
     "cross-env": "5.2.0",
     "danger": "3.9.0",
+    "eslint-plugin-caleb": "1.2.1",
     "eslint": "5.5.0",
-    "eslint-formatter-pretty": "1.3.0",
-    "eslint-import-resolver-typescript": "1.0.2",
-    "eslint-plugin-array-func": "3.0.0",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jest": "21.22.0",
-    "eslint-plugin-jsx-a11y": "6.1.1",
-    "eslint-plugin-promise": "4.0.1",
-    "eslint-plugin-react": "7.11.1",
-    "eslint-plugin-security": "1.4.0",
-    "eslint-plugin-typescript": "0.12.0",
-    "eslint-plugin-unicorn": "6.0.1",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
     "koa-connect": "2.0.1",
@@ -45,21 +35,20 @@
     "postcss-media-minmax": "3.0.0",
     "postcss-nesting": "5.0.0",
     "prettier-eslint-cli": "4.7.1",
-    "rollup": "0.65.2",
     "rollup-plugin-babel": "4.0.3",
     "rollup-plugin-copy-assets": "1.0.0",
     "rollup-plugin-node-resolve": "3.4.0",
     "rollup-plugin-postcss": "1.6.2",
     "rollup-plugin-serve": "0.4.2",
     "rollup-plugin-terser": "2.0.2",
+    "rollup": "0.65.2",
     "rucksack-css": "1.0.2",
-    "stylelint": "9.5.0",
     "stylelint-config-prettier": "4.0.0",
     "stylelint-config-rational-order": "0.0.2",
     "stylelint-config-recommended": "2.1.0",
+    "stylelint": "9.5.0",
     "sugarss": "2.0.0",
-    "typescript": "3.0.3",
-    "typescript-eslint-parser": "18.0.0"
+    "typescript": "3.0.3"
   },
   "license": "MIT",
   "prettier": {
@@ -89,23 +78,15 @@
       "\\.css$": "identity-obj-proxy"
     }
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint"
-    }
-  },
   "scripts": {
-    "start": "cross-env NODE_ENV=development rollup -w -c rollup.config.js",
     "build": "cross-env NODE_ENV=production rollup -c rollup.config.js",
-    "type": "tsc --noEmit --pretty",
-    "type:watch": "tsc --noEmit --pretty --watch",
-    "lint:js": "eslint . --ignore-path .gitignore --ext .js,.ts,.tsx --format=pretty --fix",
-    "lint:css": "prettier --write 'src/**.css' && stylelint 'src/**/*.css' --fix",
-    "lint": "yarn lint:js && yarn lint:css",
-    "fix:js": "prettier-eslint --write 'src/**/*.ts' 'src/**/*.tsx'",
-    "fix": "yarn fix:js && yarn lint:css",
+    "check-lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx . && prettier --list-different --ignore-path .gitignore '**/*.{j,t}s{x}'",
+    "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx --fix . && prettier --write --ignore-path .gitignore '**/*.{j,t}s{x,}'",
+    "start": "cross-env NODE_ENV=development rollup -w -c rollup.config.js",
+    "test:watch": "jest --watch",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "type:watch": "tsc --noEmit --pretty --watch",
+    "type": "tsc --noEmit --pretty"
   },
   "browserslist": [
     "last 2 versions"

run-lighthouse.js

@@ -19,7 +19,7 @@ const command = `./node_modules/.bin/lighthouse --output json --chrome-flags="--
  * @param {string} cmd
  * @returns {Promise<{stdout: string, stderr: string}>}
  */
-const run = async cmd =>
+const run = cmd =>
   new Promise((resolve, reject) => {
     const child = exec(cmd)
     let stdout = ''

src/api.tsx

@@ -26,11 +26,7 @@ const addRequestToIdb = async (request: Req) => {
   return currentRequests.length + 1
 }
 
-const queryAPI = (
-  path: string,
-  method: string = 'GET',
-  body?: any
-): Promise<any> =>
+const queryAPI = (path: string, method = 'GET', body?: any): Promise<any> =>
   fetch(`${endpoint}/${path}`, {
     method,
     body: JSON.stringify(body),
@@ -68,7 +64,7 @@ const get = <T extends {}>(url: string) => (
 
 const getEvents = () => get<FRCEvent[]>('events')
 
-const getEvent = (eventKey: string) => async (
+const getEvent = (eventKey: string) => (
   cb: (err: Error | null, data: FRCEvent | null) => any
 ) => {
   get<FRCEvent>(`events/${eventKey}`)((err: Error, data: FRCEvent) => {
@@ -129,7 +125,7 @@ const registerUser = (credentials: {
   username: string
   password: string
 }): Promise<string> =>
-  queryAPI('users', 'POST', credentials).then(async resp => {
+  queryAPI('users', 'POST', credentials).then(resp => {
     if (resp.status < 200 || resp.status >= 300) {
       throw new Error(resp.status)
     }

src/components/header/index.tsx

@@ -17,12 +17,11 @@ const Header = ({ title, back, contents, verify }: HeaderProps) => (
         class={style.back}
         aria-label="Back"
         onClick={(e: Event) => {
-          if (verify === true) {
-            e.stopImmediatePropagation()
-            e.preventDefault()
-            if (confirm('Are you sure you want to leave?')) {
-              route(back)
-            }
+          if (verify === false) return
+          e.stopImmediatePropagation()
+          e.preventDefault()
+          if (confirm('Are you sure you want to leave?')) {
+            route(back)
           }
         }}
         href={back}

src/components/select/index.tsx

@@ -7,7 +7,7 @@ interface SelectProps {
 }
 
 const Select = ({ options, onChange }: SelectProps) => (
-  <select class={selectClass} onChange={onChange}>
+  <select class={selectClass} onBlur={onChange}>
     {options}
   </select>
 )

src/components/table/index.tsx

@@ -25,13 +25,10 @@ interface TableState {
 }
 
 class Table extends Component<TableProps, TableState> {
-  constructor() {
-    super()
-    this.state = {
-      sortBy: 'teamNumber',
-      reversed: false,
-      selectedTeam: ''
-    }
+  state = {
+    sortBy: 'teamNumber',
+    reversed: false,
+    selectedTeam: ''
   }
 
   sortBy = (stat: string) => () =>
@@ -51,7 +48,8 @@ class Table extends Component<TableProps, TableState> {
             <th key="teamNumber" onClick={this.sortBy('teamNumber')}>
               <div>
                 <span>
-                  {sortBy === 'teamNumber' && (reversed ? ' ▲' : ' ▼')}Team
+                  {sortBy === 'teamNumber' && (reversed ? ' ▲' : ' ▼')}
+                  Team
                 </span>
               </div>
             </th>

src/components/team-picker/index.tsx

@@ -19,7 +19,7 @@ const TeamPicker = ({
     <span>Team</span>
     <select
       ref={inputRef}
-      onChange={(e: Event) => onChange((e.target as HTMLSelectElement).value)}
+      onBlur={(e: Event) => onChange((e.target as HTMLSelectElement).value)}
     >
       {redAlliance.map(t => (
         <option value={t} key={t}>

src/resolver.tsx

@@ -17,7 +17,7 @@ interface ResolverState {
 
 const Resolver = <T extends {}>(props: ResolverProps<T>) =>
   h(
-    class extends Component<ResolverProps<T>, ResolverState> {
+    class InnerResolver extends Component<ResolverProps<T>, ResolverState> {
       constructor(p: ResolverProps<T>) {
         super()
         this.state = { data: {}, error: null }

src/routes/admin/index.tsx

@@ -26,10 +26,6 @@ interface AdminPanelState {
 }
 
 class AdminPanel extends Component<{}, AdminPanelState> {
-  constructor() {
-    super()
-  }
-
   componentWillMount() {
     getUsers()(
       (err, users) =>

src/routes/compare/index.tsx

@@ -79,7 +79,7 @@ const Compare = ({
                 <div class={style.team}>
                   <select
                     value={team1}
-                    onChange={(e: Event) =>
+                    onBlur={(e: Event) =>
                       route(
                         `/events/${eventId}/compare/${
                           (e.target as HTMLSelectElement).value
@@ -103,7 +103,7 @@ const Compare = ({
                 <div class={style.team}>
                   <select
                     value={team2}
-                    onChange={(e: Event) =>
+                    onBlur={(e: Event) =>
                       route(
                         `/events/${eventId}/compare/${team1}/${
                           (e.target as HTMLSelectElement).value

src/routes/event/index.tsx

@@ -64,6 +64,7 @@ const Event = ({ eventId }: { eventId: string }) => (
                         <Icon icon="youtube" fill="red" />
                       </a>
                     ) : (
+                      // eslint-disable-next-line caleb/jsx-a11y/anchor-is-valid
                       <a>
                         <Icon icon="youtube" fill="grey" />
                       </a>

src/routes/home/index.tsx

@@ -37,7 +37,7 @@ const eventTypeClassMap = new Map<number, string>([
   [100, style.pre]
 ])
 
-export default () => (
+const Home = () => (
   <Resolver
     data={{
       events: getEvents()
@@ -136,3 +136,4 @@ export default () => (
     }
   />
 )
+export default Home

src/routes/print/index.tsx

@@ -62,7 +62,7 @@ const Alliance = ({ data, name, schema }: AllianceProps) => (
   </div>
 )
 
-export default ({ eventId, matchId }: PrintProps) => (
+const Print = ({ eventId, matchId }: PrintProps) => (
   <Resolver
     data={{
       redAlliance: getAllianceAnalysis(eventId, matchId, 'red'),
@@ -71,14 +71,10 @@ export default ({ eventId, matchId }: PrintProps) => (
     }}
     render={
       class Print extends Component<Props, {}> {
-        constructor() {
-          super()
-        }
         componentDidUpdate() {
-          if (this.props.redAlliance && this.props.blueAlliance) {
-            print()
-            window.close()
-          }
+          if (!(this.props.redAlliance && this.props.blueAlliance)) return
+          print()
+          window.close()
         }
         render({ redAlliance, blueAlliance, schema }: Props) {
           return (
@@ -97,3 +93,5 @@ export default ({ eventId, matchId }: PrintProps) => (
     }
   />
 )
+
+export default Print