Merge remote-tracking branch 'origin/master' into gh-actions

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['prettier', 'react-app', 'plugin:prettier/recommended'],
+  extends: ['react-app', 'prettier'],
   plugins: ['prettier'],
   rules: {
     'prettier/prettier': [

.github/workflows/pull_request_ci.yml

@@ -21,6 +21,7 @@ jobs:
       run: |
         yarn install --pure-lockfile
         yarn build
+        yarn lint
         yarn test
       env:
         CI: true

package.json

@@ -17,7 +17,7 @@
     "test:ssr": "jest --maxWorkers 2 --config ./jest.config.node.ts",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "lint": "eslint {src,tests}/**/*.ts",
+    "lint": "eslint \"{src,tests,stories}/**/*.{ts,tsx}\"",
     "lint:fix": "yarn lint --fix",
     "lint:types": "tsc --noEmit",
     "build:cjs": "tsc",

src/useAsyncFn.ts

@@ -63,5 +63,5 @@ export default function useAsyncFn<T extends FunctionReturningPromise>(
     ) as ReturnType<T>;
   }, deps);
 
-  return [state, (callback as unknown) as T];
+  return [state, callback as unknown as T];
 }

src/useDropArea.ts

@@ -26,30 +26,28 @@ const defaultState: DropAreaState = {
 };
 */
 
-const createProcess = (options: DropAreaOptions, mounted: boolean) => (
-  dataTransfer: DataTransfer,
-  event
-) => {
-  const uri = dataTransfer.getData('text/uri-list');
+const createProcess =
+  (options: DropAreaOptions, mounted: boolean) => (dataTransfer: DataTransfer, event) => {
+    const uri = dataTransfer.getData('text/uri-list');
 
-  if (uri) {
-    (options.onUri || noop)(uri, event);
-    return;
-  }
+    if (uri) {
+      (options.onUri || noop)(uri, event);
+      return;
+    }
 
-  if (dataTransfer.files && dataTransfer.files.length) {
-    (options.onFiles || noop)(Array.from(dataTransfer.files), event);
-    return;
-  }
+    if (dataTransfer.files && dataTransfer.files.length) {
+      (options.onFiles || noop)(Array.from(dataTransfer.files), event);
+      return;
+    }
 
-  if (dataTransfer.items && dataTransfer.items.length) {
-    dataTransfer.items[0].getAsString((text) => {
-      if (mounted) {
-        (options.onText || noop)(text, event);
-      }
-    });
-  }
-};
+    if (dataTransfer.items && dataTransfer.items.length) {
+      dataTransfer.items[0].getAsString((text) => {
+        if (mounted) {
+          (options.onText || noop)(text, event);
+        }
+      });
+    }
+  };
 
 const createBond = (process, setOver): DropAreaBond => ({
   onDragOver: (event) => {

src/useIntersection.ts

@@ -4,10 +4,8 @@ const useIntersection = (
   ref: RefObject<HTMLElement>,
   options: IntersectionObserverInit
 ): IntersectionObserverEntry | null => {
-  const [
-    intersectionObserverEntry,
-    setIntersectionObserverEntry,
-  ] = useState<IntersectionObserverEntry | null>(null);
+  const [intersectionObserverEntry, setIntersectionObserverEntry] =
+    useState<IntersectionObserverEntry | null>(null);
 
   useEffect(() => {
     if (ref.current && typeof IntersectionObserver === 'function') {

src/useMethods.ts

@@ -5,9 +5,7 @@ type Action = {
   payload?: any;
 };
 
-type CreateMethods<M, T> = (
-  state: T
-) => {
+type CreateMethods<M, T> = (state: T) => {
   [P in keyof M]: (payload?: any) => T;
 };
 

src/useMultiStateValidator.ts

@@ -2,10 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { StateValidator, UseStateValidatorReturn, ValidityState } from './useStateValidator';
 
 export type MultiStateValidatorStates = any[] | { [p: string]: any } | { [p: number]: any };
-export type MultiStateValidator<
-  V extends ValidityState,
-  S extends MultiStateValidatorStates
-> = StateValidator<V, S>;
+export type MultiStateValidator<V extends ValidityState, S extends MultiStateValidatorStates> =
+  StateValidator<V, S>;
 
 export function useMultiStateValidator<
   V extends ValidityState,

src/useObservable.ts

@@ -2,9 +2,7 @@ import { useState } from 'react';
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 export interface Observable<T> {
-  subscribe: (
-    listener: (value: T) => void
-  ) => {
+  subscribe: (listener: (value: T) => void) => {
     unsubscribe: () => void;
   };
 }

stories/useMultiStateValidator.story.tsx

@@ -20,7 +20,7 @@ const Demo = () => {
         max="10"
         value={state1}
         onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-          setState1((ev.target.value as unknown) as number);
+          setState1(ev.target.value as unknown as number);
         }}
       />
       <input
@@ -29,7 +29,7 @@ const Demo = () => {
         max="10"
         value={state2}
         onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-          setState2((ev.target.value as unknown) as number);
+          setState2(ev.target.value as unknown as number);
         }}
       />
       <input
@@ -38,7 +38,7 @@ const Demo = () => {
         max="10"
         value={state3}
         onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-          setState3((ev.target.value as unknown) as number);
+          setState3(ev.target.value as unknown as number);
         }}
       />
       {isValid !== undefined && (

stories/useStateList.story.tsx

@@ -21,7 +21,7 @@ const Demo = () => {
       <button onClick={() => next()}>next</button>
       <br />
       <input type="text" ref={indexInput} style={{ width: 120 }} />
-      <button onClick={() => setStateAt((indexInput.current!.value as unknown) as number)}>
+      <button onClick={() => setStateAt(indexInput.current!.value as unknown as number)}>
         set state by index
       </button>
       <br />

stories/useStateValidator.story.tsx

@@ -18,7 +18,7 @@ const Demo = () => {
         max="10"
         value={state}
         onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-          setState((ev.target.value as unknown) as number);
+          setState(ev.target.value as unknown as number);
         }}
       />
       {isValid !== undefined && <span>{isValid ? 'Valid!' : 'Invalid'}</span>}

stories/util/NewTabStory.tsx

@@ -8,7 +8,7 @@ const NewTabStory = ({ children }) => {
   return (
     <p>
       This story should be{' '}
-      <a href={window.location.href} target="_blank" title="Open in new tab">
+      <a href={window.location.href} target="_blank" title="Open in new tab" rel="noreferrer">
         opened in a new tab
       </a>
       .

tests/useMediatedState.test.ts

@@ -57,9 +57,9 @@ describe('useMediatedState', () => {
   });
 
   it('if mediator expects 2 args, second should be a function setting the state', () => {
-    const spy = (jest.fn((newState: number, setState: Dispatch<SetStateAction<number>>): void => {
+    const spy = jest.fn((newState: number, setState: Dispatch<SetStateAction<number>>): void => {
       setState(newState * 2);
-    }) as unknown) as StateMediator<number>;
+    }) as unknown as StateMediator<number>;
     const [, hook] = getHook(1, spy);
 
     act(() => hook.result.current[1](3));

tests/useMultiStateValidator.test.ts

@@ -117,9 +117,9 @@ describe('useMultiStateValidator', () => {
   });
 
   it('if validator expects 2nd parameters it should pass a validity setter there', () => {
-    const spy = (jest.fn((states: number[], done) => {
+    const spy = jest.fn((states: number[], done) => {
       done([states.every((num) => !!(num % 2))]);
-    }) as unknown) as MultiStateValidator<[boolean], number[]>;
+    }) as unknown as MultiStateValidator<[boolean], number[]>;
     const [, hook] = getHook(spy, [1, 3]);
     const [, [validity]] = hook.result.current;
 

tests/useStateValidator.test.ts

@@ -85,9 +85,9 @@ describe('useStateValidator', () => {
 
   it('if validator expects 2nd parameter it should pass a validity setter there', () => {
     const [spy, hook] = getHook(
-      (jest.fn((state, setValidity): void => {
+      jest.fn((state, setValidity): void => {
         setValidity([state % 2 === 0]);
-      }) as unknown) as StateValidator<[boolean], number>
+      }) as unknown as StateValidator<[boolean], number>
     );
     let [setState, [[isValid]]] = hook.result.current;