chore(dependencies): updated linting and test dependencies

Author: liamross

.eslintrc.js

@@ -0,0 +1,60 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": { "project": "./tsconfig.lint.json" },
+  "plugins": ["react-hooks", "prettier"],
+  "extends": [
+    "plugin:jsx-a11y/recommended",
+    "plugin:jest/recommended",
+    "plugin:jest/style",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+
+    // Prettier overrides
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "commonjs": true,
+    "node": true,
+    "jest": true
+  },
+  "rules": {
+    // Off
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-triple-slash-reference": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    // Consider turning on eventually... lots of warnings though.
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+
+    // On.
+    "prettier/prettier": "error",
+    "no-empty": ["error", { "allowEmptyCatch": true }],
+    "prefer-const": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/unbound-method": "error"
+  }
+}

.eslintrc.json

@@ -96,8 +96,8 @@
     "@types/terser-webpack-plugin": "^2.2.0",
     "@types/webpack": "^4.41.0",
     "@types/webpack-node-externals": "^1.7.0",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
+    "@typescript-eslint/eslint-plugin": "^3.0.0",
+    "@typescript-eslint/parser": "^3.0.0",
     "ansi-colors": "^4.1.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
@@ -107,15 +107,15 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
-    "eslint": "^6.7.2",
+    "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-jest": "^23.1.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "file-loader": "^5.0.2",
-    "jest": "^25.1.0",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.2",
+    "file-loader": "^6.0.0",
+    "jest": "^26.0.1",
     "jest-svg-transformer": "^1.0.0",
     "node-sass": "^4.13.0",
     "normalize.css": "^8.0.1",
@@ -130,10 +130,10 @@
     "sass-loader": "^8.0.0",
     "shelljs": "^0.8.3",
     "sinon": "^9.0.1",
-    "standard-version": "^7.1.0",
+    "standard-version": "^8.0.0",
     "style-loader": "^1.0.1",
-    "ts-jest": "^25.2.0",
-    "ts-loader": "^6.2.1",
+    "ts-jest": "^26.0.0",
+    "ts-loader": "^7.0.4",
     "ts-node": "^8.6.2",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^3.7.3",

package.json

@@ -140,13 +140,13 @@ export const Choice = forwardRef<HTMLInputElement, ChoiceProps>(
  * Observable helper to notify radio buttons that they have become unchecked.
  */
 class RadioObservable {
-  private _subscribers: { name: string; subscriber: Function }[];
+  private _subscribers: { name: string; subscriber: () => void }[];
 
   constructor() {
     this._subscribers = [];
   }
 
-  subscribe(name: string, subscriber: Function) {
+  subscribe(name: string, subscriber: () => void) {
     this._trigger(name);
 
     this._subscribers.push({ name, subscriber });
@@ -159,7 +159,7 @@ class RadioObservable {
     });
   }
 
-  private _unsubscribe(subscriber: Function) {
+  private _unsubscribe(subscriber: () => void) {
     return () => {
       this._subscribers = this._subscribers.filter((s) => s.subscriber !== subscriber);
     };

src/components/Choice/Choice.tsx

@@ -20,7 +20,6 @@ export const Basic = () => (
   <DndMultiProvider>
     <Draggable
       index={0}
-      onMove={action('onMove')}
       onDragChange={action('onDragChange')}
       disableDrag={boolean('disableDrag', false)}
       hideDragPreview={boolean('hideDragPreview', false)}
@@ -39,7 +38,6 @@ export const WithOnRenderChildren = () => (
           {isDragging ? 'This div is being dragged!' : 'This div is draggable!'}
         </div>
       )}
-      onMove={action('onMove')}
       onDragChange={action('onDragChange')}
       disableDrag={boolean('disableDrag', false)}
       hideDragPreview={boolean('hideDragPreview', false)}

src/components/Draggable/Draggable.stories.tsx

@@ -265,7 +265,7 @@ export function FileOrganizer<F extends ObjectWithId>({
         (draggingIds && draggingIds.length && !draggingIds.includes(file.id))
       );
       const draggableRef = createRef<HTMLDivElement>();
-      const isInDragGroup = draggingIds?.includes(file.id) ?? false;
+      const isInDragGroup = draggingIds ? draggingIds.includes(file.id) : false;
       return (
         <Draggable
           data-file-id={file.id}
@@ -305,10 +305,10 @@ export function FileOrganizer<F extends ObjectWithId>({
       editingId,
       draggingId,
       draggingIds,
+      pad,
       onRenderDragLayer,
       disableMove,
       onMove,
-      pad,
       handleOnDragChange,
       handleItemKeyDown,
       onRenderThumbnail,

src/components/FileOrganizer/FileOrganizer.tsx

@@ -10,7 +10,7 @@ const validKeys = [
 ];
 
 class ThumbnailFocusObservable implements FocusObservable {
-  private _subscribers: Function[];
+  private _subscribers: (() => void)[];
   private _isUserTabbing: boolean;
 
   constructor() {
@@ -22,7 +22,7 @@ class ThumbnailFocusObservable implements FocusObservable {
     return this._isUserTabbing;
   }
 
-  subscribe(subscriber: Function) {
+  subscribe(subscriber: () => void) {
     // If adding first subscriber, begin listening to document.
     if (this._subscribers.length === 0) {
       if (this._isUserTabbing) {
@@ -36,7 +36,7 @@ class ThumbnailFocusObservable implements FocusObservable {
     return this._unsubscribe(subscriber);
   }
 
-  private _unsubscribe(subscriber: Function) {
+  private _unsubscribe(subscriber: () => void) {
     return () => {
       this._subscribers = this._subscribers.filter((s) => s !== subscriber);
       // If no subscribers, stop listening to document.

src/components/Thumbnail/thumbnailFocusObservable.ts

@@ -59,7 +59,7 @@ export interface FileLike {
   thumbnail: MemoizedPromise<string>;
   fileObj: MemoizedPromise<Blob>;
   documentObj: MemoizedPromise<CoreControls.Document>;
-  subscribe: (...args: any) => Function;
+  subscribe: (...args: any) => () => void;
 }
 
 export type FileEventType =

src/data/file.ts

@@ -19,11 +19,11 @@ export function useAccessibleFocus(observable: FocusObservable = tabObservable)
 
 export interface FocusObservable {
   value: boolean;
-  subscribe(subscriber: Function): void;
+  subscribe(subscriber: () => void): void;
 }
 
 class AccessibleFocusObservable implements FocusObservable {
-  private _subscribers: Function[];
+  private _subscribers: (() => void)[];
   private _isUserTabbing: boolean;
 
   constructor() {
@@ -35,7 +35,7 @@ class AccessibleFocusObservable implements FocusObservable {
     return this._isUserTabbing;
   }
 
-  subscribe(subscriber: Function) {
+  subscribe(subscriber: () => void) {
     // If adding first subscriber, begin listening to document.
     if (this._subscribers.length === 0) {
       if (this._isUserTabbing) {
@@ -49,7 +49,7 @@ class AccessibleFocusObservable implements FocusObservable {
     return this._unsubscribe(subscriber);
   }
 
-  private _unsubscribe(subscriber: Function) {
+  private _unsubscribe(subscriber: () => void) {
     return () => {
       this._subscribers = this._subscribers.filter((s) => s !== subscriber);
       // If no subscribers, stop listening to document.

src/hooks/useAccessibleFocus.ts

@@ -60,7 +60,7 @@ export function useFileSubscribe<F extends FileLike, T>(
 
     subscribe(true);
 
-    let unsubscribe: Function | undefined;
+    let unsubscribe: (() => void) | undefined;
 
     if (eventType) unsubscribe = file.subscribe(eventType, subscribe);