chore: add standard-with-typescript eslint rules, eliminate or ignore…

… ts errors
qri-io · Nov 4, 2021 · d554a92 · d554a92
1 parent d80747a
commit d554a92
Show file tree

Hide file tree

Showing 233 changed files with 4,621 additions and 2,843 deletions.
diff --git a/package.json b/package.json
@@ -3,80 +3,80 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.0.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@playwright/test": "^1.14.1",
-    "@reduxjs/toolkit": "^1.2.5",
+    "@craco/craco": "6.0.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.32",
+    "@fortawesome/free-regular-svg-icons": "5.15.1",
+    "@fortawesome/free-solid-svg-icons": "5.15.1",
+    "@fortawesome/react-fontawesome": "0.1.14",
+    "@playwright/test": "1.14.1",
+    "@reduxjs/toolkit": "1.2.5",
     "@tailwindcss/forms": "0.2.1",
     "@tailwindcss/line-clamp": "0.2.0",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/classnames": "^2.2.11",
+    "@tailwindcss/postcss7-compat": "2.0.2",
+    "@testing-library/jest-dom": "4.2.4",
+    "@testing-library/react": "9.3.2",
+    "@testing-library/user-event": "7.1.2",
+    "@types/classnames": "2.2.11",
     "@types/deep-equal": "1.0.1",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "26.0.20",
     "@types/markdown-it": "12.2.0",
-    "@types/node": "^12.0.0",
-    "@types/node-fetch": "^2.5.7",
-    "@types/numeral": "^0.0.29",
-    "@types/puppeteer": "^5.4.2",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/node": "12.0.0",
+    "@types/node-fetch": "2.5.7",
+    "@types/numeral": "0.0.29",
+    "@types/puppeteer": "5.4.2",
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "16.9.0",
     "@types/react-paginate": "7.1.0",
-    "@types/react-redux": "^7.1.7",
-    "@types/rimraf": "^3.0.0",
-    "autoprefixer": "^9",
-    "classnames": "^2.2.6",
-    "connected-react-router": "^6.8.0",
-    "css-loader": "^5.0.1",
-    "date-fns": "^2.16.1",
+    "@types/react-redux": "7.1.7",
+    "@types/rimraf": "3.0.0",
+    "autoprefixer": "9",
+    "classnames": "2.2.6",
+    "connected-react-router": "6.8.0",
+    "css-loader": "5.0.1",
+    "date-fns": "2.16.1",
     "deep-equal": "2.0.5",
-    "dotenv": "^8.2.0",
-    "history": "^4.10.1",
-    "install": "^0.13.0",
-    "json-schema": "^0.3.0",
+    "dotenv": "8.2.0",
+    "history": "4.10.1",
+    "install": "0.13.0",
+    "json-schema": "0.3.0",
     "jwt-decode": "3.1.2",
     "markdown-it": "12.2.0",
-    "monaco-editor-webpack-plugin": "^4.0.0",
-    "node-fetch": "^2.6.1",
+    "monaco-editor-webpack-plugin": "4.0.0",
+    "node-fetch": "2.6.1",
     "node-sass": "4.14.1",
-    "numeral": "^2.0.6",
-    "playwright": "^1.14.1",
-    "postcss": "^7",
-    "puppeteer": "^5.5.0",
+    "numeral": "2.0.6",
+    "playwright": "1.14.1",
+    "postcss": "7",
+    "puppeteer": "5.5.0",
     "query-string": "7.0.0",
-    "react": "^17.0.1",
+    "react": "17.0.1",
     "react-canvas-confetti": "1.2.0",
     "react-content-loader": "6.0.3",
     "react-data-table-component": "7.4.4",
-    "react-dom": "^17.0.1",
+    "react-dom": "17.0.1",
     "react-hot-keys": "2.6.2",
     "react-intersection-observer": "8.32.0",
-    "react-json-view": "^1.20.4",
-    "react-monaco-editor": "^0.41.2",
+    "react-json-view": "1.20.4",
+    "react-monaco-editor": "0.41.2",
     "react-paginate": "7.1.3",
-    "react-redux": "^7.2.0",
+    "react-redux": "7.2.0",
     "react-responsive-carousel": "3.2.18",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1",
-    "react-simplemde-editor": "^4.1.3",
+    "react-simplemde-editor": "4.1.3",
     "react-spinner": "0.2.7",
-    "react-spinners": "^0.10.4",
+    "react-spinners": "0.10.4",
     "react-toastify": "7.0.4",
     "react-tooltip": "4.2.13",
     "react-use-dimensions": "1.2.1",
-    "sass-loader": "^10.1.1",
-    "sleep-promise": "^9.0.0",
-    "string-strip-html": "^8.1.0",
-    "style-loader": "^2.0.0",
-    "styled-components": "^5.2.1",
+    "sass-loader": "10.1.1",
+    "sleep-promise": "9.0.0",
+    "string-strip-html": "8.1.0",
+    "style-loader": "2.0.0",
+    "styled-components": "5.2.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "typescript": "~3.8.2",
+    "typescript": "*",
     "use-debounce": "6.0.1"
   },
   "scripts": {
@@ -93,7 +93,47 @@
     "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
-    "extends": "react-app",
+    "extends": [
+      "standard-with-typescript",
+      "plugin:react/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "project": "./tsconfig.json"
+    },
+    "rules": {
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-member-accessibility": "off",
+      "@typescript-eslint/strict-boolean-expressions": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/prefer-optional-chain": "off",
+      "@typescript-eslint/prefer-nullish-coalescing": "off",
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/no-dynamic-delete": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/prefer-readonly": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/quotes": "off",
+      "array-bracket-spacing": "off",
+      "dot-notation": "off",
+      "lines-between-class-members": "off",
+      "no-useless-catch": "off",
+      "no-case-declarations": "off",
+      "object-curly-newline": "off",
+      "prefer-const": "off",
+      "quote-props": "off",
+      "react/prop-types": "off"
+    },
+    "settings": {
+      "react": {
+        "version": "latest"
+      }
+    },
     "globals": {
       "fathom": true
     }
@@ -111,14 +151,21 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.1.15",
-    "@storybook/addon-essentials": "^6.1.15",
-    "@storybook/addon-links": "^6.1.15",
-    "@storybook/node-logger": "^6.1.15",
-    "@storybook/preset-create-react-app": "^3.1.5",
-    "@storybook/react": "^6.1.15",
-    "@types/react-router-dom": "^5.1.6",
-    "ts-jest": "^26.4.4"
+    "@storybook/addon-actions": "6.1.15",
+    "@storybook/addon-essentials": "6.1.15",
+    "@storybook/addon-links": "6.1.15",
+    "@storybook/node-logger": "6.1.15",
+    "@storybook/preset-create-react-app": "3.1.5",
+    "@storybook/react": "6.1.15",
+    "@types/react-router-dom": "5.1.6",
+    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "eslint": "7.12.1",
+    "eslint-config-standard-with-typescript": "21.0.1",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "5.0.0",
+    "eslint-plugin-react": "7.26.1",
+    "ts-jest": "26.4.4"
   },
   "resolutions": {
     "babel-loader": "8.1.0"

diff --git a/server/index.js b/server/index.js
@@ -6,7 +6,7 @@ const composeHeadData = require('./util').composeHeadData
 const composeJSONLD = require('./util').composeJSONLD
 
 const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:2503'
-const PORT = process.env.PORT || 3000 
+const PORT = process.env.PORT || 3000
 
 const app = express()
 
@@ -39,7 +39,7 @@ const reservedUsernames = [
   'issues',
   'follow',
   'unpublish'
-] 
+]
 
 
 // reservedNames are a list of words that may be mistaken for dataset names
@@ -56,7 +56,7 @@ fs.access(indexPath, fs.constants.F_OK, (err) => {
     console.error(`File ${indexPath} does not exist: ${err}.\nApp must be built before attempting to host it.`)
     server.close(() => {
       process.exit(1)
-    }) 
+    })
   }
 })
 
@@ -110,4 +110,4 @@ app.use('/:username/:name', async (req, res) => {
 
 app.use('/', async (req, res) => {
   return res.sendFile(indexPath)
-})
+})
diff --git a/server/util.js b/server/util.js
@@ -47,4 +47,4 @@ const composeJSONLD = (dataset) => {
   return `<script type="application/ld+json">${JSON.stringify(jld, null, 2)}</script>`
 }
 
-exports.composeJSONLD = composeJSONLD
+exports.composeJSONLD = composeJSONLD
diff --git a/src/chrome/Button.tsx b/src/chrome/Button.tsx
@@ -4,35 +4,35 @@ import classNames from 'classnames'
 import Icon, { IconSize } from './Icon'
 
 export type ButtonType = 'primary' // light blue button with white text
-  | 'primary-outline' // light blue outline button, thick border
-  | 'secondary' // pink button with white text
-  | 'secondary-outline' //pink outline button, thick border
-  | 'warning' // yellow button with dark text
-  | 'danger' // red button with white text
-  | 'light' // gray outline and text, thin border, e.g. cancel button for modal
-  | 'dark' // dark outline and text, thin border, e.g. follow button
+| 'primary-outline' // light blue outline button, thick border
+| 'secondary' // pink button with white text
+| 'secondary-outline' // pink outline button, thick border
+| 'warning' // yellow button with dark text
+| 'danger' // red button with white text
+| 'light' // gray outline and text, thin border, e.g. cancel button for modal
+| 'dark' // dark outline and text, thin border, e.g. follow button
 
-  // tailwind classes for each type to be used in classNames()
-  export function generateButtonTypeClasses(type: ButtonType, disabled: boolean): object {
-    return  {
-      'text-white bg-qritile hover:bg-qritile-600': (type === 'primary'),
-      'text-qritile hover:text-qritile-600 border border-qritile hover:border-qritile-600 box-border': (type === 'primary-outline'),
-      'text-white bg-qripink-600 hover:bg-qripink-700': (type === 'secondary'),
-      'text-qripink-600 hover:text-qripink-700 border border-qripink-600 hover:border-qripink-700 box-border': (type === 'secondary-outline'),
-      'text-qrigray-900 bg-warningyellow hover:bg-warningyellow-600': (type === 'warning'),
-      'text-white bg-dangerred hover:bg-dangerred-600': (type === 'danger'),
-      'text-qrigray-400 hover:text-qrigray-600 border border-qrigray-400 hover:border-qrigray-600': (type === 'light'),
-      'text-qrigray-900 hover:text-qripink-600 border border-qrigray-900 hover:border-qripink-600': (type === 'dark'),
-      'cursor-default text-white bg-qrigray-400 hover:bg-qrigray-400': (type === 'primary' && disabled),
-      'text-qrigray-400 border border-qrigray-400 box-border hover:text-qrigray-400 hover:border-qrigray-400': (type === 'primary-outline' && disabled),
-      'text-white bg-qrigray-400 hover:bg-qrigray-400': ((type === 'secondary' || type === 'danger') && disabled),
-      'text-qrigray-400 hover:text-qrigray-400 border border-qrigray-400 hover:border-qrigray-400 box-border': (type === 'secondary-outline' && disabled),
-      'text-qrigray-400 bg-qrigray-400 hover:bg-qrigray-400': (type === 'warning' && disabled),
-      'text-qrigray-400 hover:text-qrigray-400 border border-qrigray-400 hover:border-qrigray-400': (type === 'light' && disabled),
-      'text-qrigray-400 hover:text-qripink-600 border border-qrigray-400 hover:border-qrigray-400': (type === 'dark' && disabled),
-      'cursor-default': disabled
-    }
+// tailwind classes for each type to be used in classNames()
+export function generateButtonTypeClasses (type: ButtonType, disabled: boolean): object {
+  return {
+    'text-white bg-qritile hover:bg-qritile-600': (type === 'primary'),
+    'text-qritile hover:text-qritile-600 border border-qritile hover:border-qritile-600 box-border': (type === 'primary-outline'),
+    'text-white bg-qripink-600 hover:bg-qripink-700': (type === 'secondary'),
+    'text-qripink-600 hover:text-qripink-700 border border-qripink-600 hover:border-qripink-700 box-border': (type === 'secondary-outline'),
+    'text-qrigray-900 bg-warningyellow hover:bg-warningyellow-600': (type === 'warning'),
+    'text-white bg-dangerred hover:bg-dangerred-600': (type === 'danger'),
+    'text-qrigray-400 hover:text-qrigray-600 border border-qrigray-400 hover:border-qrigray-600': (type === 'light'),
+    'text-qrigray-900 hover:text-qripink-600 border border-qrigray-900 hover:border-qripink-600': (type === 'dark'),
+    'cursor-default text-white bg-qrigray-400 hover:bg-qrigray-400': (type === 'primary' && disabled),
+    'text-qrigray-400 border border-qrigray-400 box-border hover:text-qrigray-400 hover:border-qrigray-400': (type === 'primary-outline' && disabled),
+    'text-white bg-qrigray-400 hover:bg-qrigray-400': ((type === 'secondary' || type === 'danger') && disabled),
+    'text-qrigray-400 hover:text-qrigray-400 border border-qrigray-400 hover:border-qrigray-400 box-border': (type === 'secondary-outline' && disabled),
+    'text-qrigray-400 bg-qrigray-400 hover:bg-qrigray-400': (type === 'warning' && disabled),
+    'text-qrigray-400 hover:text-qrigray-400 border border-qrigray-400 hover:border-qrigray-400': (type === 'light' && disabled),
+    'text-qrigray-400 hover:text-qripink-600 border border-qrigray-400 hover:border-qrigray-400': (type === 'dark' && disabled),
+    'cursor-default': disabled
   }
+}
 
 export interface ButtonProps {
   id?: string
@@ -53,21 +53,21 @@ export interface ButtonProps {
   // caret will add a small caretRight icon to the right of the children
   caret?: boolean
   // onClick is a function that will fire when the button is clicked
-  onClick?: () => void
+  onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void
 }
 
 const Button: React.FC<ButtonProps> = ({
   id,
   className,
-  type='primary',
+  type = 'primary',
   icon,
-  size='md',
+  size = 'md',
   submit = false,
   disabled = false,
   block = false,
   caret = false,
-  onClick= () => {},
-  children,
+  onClick = () => {},
+  children
 }) => {
   let height = 32
   let sizeClassName = 'rounded-md px-2.5'
@@ -134,6 +134,4 @@ const Button: React.FC<ButtonProps> = ({
   )
 }
 
-
-
 export default Button
diff --git a/src/chrome/ButtonGroup.tsx b/src/chrome/ButtonGroup.tsx
@@ -33,8 +33,8 @@ const ButtonGroup: React.FC<ButtonGroupProps> = ({
           onClick={text === 'My Datasets'
             ? () => {
               // general-click-my-datasets event
-              trackGoal('LKV9RUBF', 0)
-            }
+                trackGoal('LKV9RUBF', 0)
+              }
             : () => {}
           }
         >

diff --git a/src/chrome/ContentBox.tsx b/src/chrome/ContentBox.tsx
@@ -15,7 +15,7 @@ const ContentBox: React.FC<ContentBoxProps> = ({
   className,
   paddingClassName = 'py-6 px-8',
   warning,
-  card=false,
+  card = false,
   children
 }) => (
   <div className={className}>

diff --git a/src/chrome/ContentTabs.tsx b/src/chrome/ContentTabs.tsx
@@ -35,7 +35,7 @@ export const ContentTabs: React.FC<ContentTabsProps> = ({ tabs }) => (
               (
                 <div className={classNames('text-white rounded px-2 ml-2', {
                   'bg-qripink-600': selected,
-                  'bg-qrigray-400': !selected,
+                  'bg-qrigray-400': !selected
                 })}>
                   {numberDecorator}
                 </div>
@@ -62,7 +62,7 @@ export const ContentTabs: React.FC<ContentTabsProps> = ({ tabs }) => (
               'bg-gray-200': !selected,
               'text-gray-400': disabled,
               'text-black': !disabled,
-              'hover:cursor-pointer': !disabled,
+              'hover:cursor-pointer': !disabled
             })}
           >
             {tabContent}

diff --git a/src/chrome/CustomIcon.tsx b/src/chrome/CustomIcon.tsx
@@ -10,8 +10,8 @@ export interface CustomIconProps {
 
 const CustomIcon: React.FunctionComponent<CustomIconProps> = ({
   className,
-  size='md',
-  spin=false,
+  size = 'md',
+  spin = false,
   children,
   rotation
 }) => {