From f6276798e9d7f131f625be5151a7d80a06f137d4 Mon Sep 17 00:00:00 2001 From: Alexander Kachkaev Date: Tue, 31 Aug 2021 22:22:21 +0100 Subject: [PATCH 1/3] Update ESLint config --- .eslintrc.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index bc521369..58d02023 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,5 @@ module.exports = { - extends: ['prettier/@typescript-eslint', 'react-app', 'plugin:prettier/recommended'], + extends: ['react-app', 'prettier'], plugins: ['prettier'], rules: { 'prettier/prettier': [ diff --git a/package.json b/package.json index 8fc52490..755f82ff 100644 --- a/package.json +++ b/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,stories}/**/*.{ts,tsx}", + "lint": "eslint \"{src,tests,stories}/**/*.{ts,tsx}\"", "lint:fix": "yarn lint --fix", "lint:types": "tsc --noEmit", "build:cjs": "tsc", From d2028ae44c79628475f0ef1736c4a48ca310247a Mon Sep 17 00:00:00 2001 From: Alexander Kachkaev Date: Tue, 31 Aug 2021 22:22:38 +0100 Subject: [PATCH 2/3] Run "yarn lint --fix" --- src/factory/createBreakpoint.ts | 54 ++++++++++++------------ src/factory/createHTMLMediaHook.ts | 2 +- src/factory/createMemo.ts | 6 ++- src/factory/createReducerContext.ts | 7 +-- src/factory/createStateContext.ts | 5 +-- src/useAsyncFn.ts | 2 +- src/useDropArea.ts | 40 +++++++++--------- src/useIntersection.ts | 6 +-- src/useMethods.ts | 4 +- src/useMultiStateValidator.ts | 6 +-- src/useObservable.ts | 4 +- stories/useMultiStateValidator.story.tsx | 6 +-- stories/useStateList.story.tsx | 2 +- stories/useStateValidator.story.tsx | 2 +- stories/util/NewTabStory.tsx | 2 +- tests/useMediatedState.test.ts | 4 +- tests/useMultiStateValidator.test.ts | 4 +- tests/useStateValidator.test.ts | 4 +- 18 files changed, 76 insertions(+), 84 deletions(-) diff --git a/src/factory/createBreakpoint.ts b/src/factory/createBreakpoint.ts index fb97896f..d6183282 100644 --- a/src/factory/createBreakpoint.ts +++ b/src/factory/createBreakpoint.ts @@ -1,33 +1,33 @@ import { useEffect, useMemo, useState } from 'react'; import { isBrowser, off, on } from '../misc/util'; -const createBreakpoint = ( - breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 } -) => () => { - const [screen, setScreen] = useState(isBrowser ? window.innerWidth : 0); +const createBreakpoint = + (breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) => + () => { + const [screen, setScreen] = useState(isBrowser ? window.innerWidth : 0); - useEffect(() => { - const setSideScreen = (): void => { - setScreen(window.innerWidth); - }; - setSideScreen(); - on(window, 'resize', setSideScreen); - return () => { - off(window, 'resize', setSideScreen); - }; - }); - const sortedBreakpoints = useMemo( - () => Object.entries(breakpoints).sort((a, b) => (a[1] >= b[1] ? 1 : -1)), - [breakpoints] - ); - const result = sortedBreakpoints.reduce((acc, [name, width]) => { - if (screen >= width) { - return name; - } else { - return acc; - } - }, sortedBreakpoints[0][0]); - return result; -}; + useEffect(() => { + const setSideScreen = (): void => { + setScreen(window.innerWidth); + }; + setSideScreen(); + on(window, 'resize', setSideScreen); + return () => { + off(window, 'resize', setSideScreen); + }; + }); + const sortedBreakpoints = useMemo( + () => Object.entries(breakpoints).sort((a, b) => (a[1] >= b[1] ? 1 : -1)), + [breakpoints] + ); + const result = sortedBreakpoints.reduce((acc, [name, width]) => { + if (screen >= width) { + return name; + } else { + return acc; + } + }, sortedBreakpoints[0][0]); + return result; + }; export default createBreakpoint; diff --git a/src/factory/createHTMLMediaHook.ts b/src/factory/createHTMLMediaHook.ts index 954a5bb8..92d62c9d 100644 --- a/src/factory/createHTMLMediaHook.ts +++ b/src/factory/createHTMLMediaHook.ts @@ -51,7 +51,7 @@ export default function createHTMLMediaHook(null); diff --git a/src/factory/createMemo.ts b/src/factory/createMemo.ts index 9b796877..8fe16ee9 100644 --- a/src/factory/createMemo.ts +++ b/src/factory/createMemo.ts @@ -1,6 +1,8 @@ import { useMemo } from 'react'; -const createMemo = any>(fn: T) => (...args: Parameters) => - useMemo>(() => fn(...args), args); +const createMemo = + any>(fn: T) => + (...args: Parameters) => + useMemo>(() => fn(...args), args); export default createMemo; diff --git a/src/factory/createReducerContext.ts b/src/factory/createReducerContext.ts index f07a0165..db24bfbb 100644 --- a/src/factory/createReducerContext.ts +++ b/src/factory/createReducerContext.ts @@ -4,9 +4,10 @@ const createReducerContext = >( reducer: R, defaultInitialState: React.ReducerState ) => { - const context = createContext< - [React.ReducerState, React.Dispatch>] | undefined - >(undefined); + const context = + createContext<[React.ReducerState, React.Dispatch>] | undefined>( + undefined + ); const providerFactory = (props, children) => createElement(context.Provider, props, children); const ReducerProvider: React.FC<{ initialState?: React.ReducerState }> = ({ diff --git a/src/factory/createStateContext.ts b/src/factory/createStateContext.ts index 3e73ef93..4c3919c5 100644 --- a/src/factory/createStateContext.ts +++ b/src/factory/createStateContext.ts @@ -1,9 +1,8 @@ import { createContext, createElement, useContext, useState } from 'react'; const createStateContext = (defaultInitialValue: T) => { - const context = createContext<[T, React.Dispatch>] | undefined>( - undefined - ); + const context = + createContext<[T, React.Dispatch>] | undefined>(undefined); const providerFactory = (props, children) => createElement(context.Provider, props, children); const StateProvider: React.FC<{ initialValue?: T }> = ({ children, initialValue }) => { diff --git a/src/useAsyncFn.ts b/src/useAsyncFn.ts index 3e40c5f0..d330ffba 100644 --- a/src/useAsyncFn.ts +++ b/src/useAsyncFn.ts @@ -63,5 +63,5 @@ export default function useAsyncFn( ) as ReturnType; }, deps); - return [state, (callback as unknown) as T]; + return [state, callback as unknown as T]; } diff --git a/src/useDropArea.ts b/src/useDropArea.ts index 76e399ff..52ca8fae 100644 --- a/src/useDropArea.ts +++ b/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) => { diff --git a/src/useIntersection.ts b/src/useIntersection.ts index 8bec1aea..f5b83364 100644 --- a/src/useIntersection.ts +++ b/src/useIntersection.ts @@ -4,10 +4,8 @@ const useIntersection = ( ref: RefObject, options: IntersectionObserverInit ): IntersectionObserverEntry | null => { - const [ - intersectionObserverEntry, - setIntersectionObserverEntry, - ] = useState(null); + const [intersectionObserverEntry, setIntersectionObserverEntry] = + useState(null); useEffect(() => { if (ref.current && typeof IntersectionObserver === 'function') { diff --git a/src/useMethods.ts b/src/useMethods.ts index 5a17c62a..db3cacb6 100644 --- a/src/useMethods.ts +++ b/src/useMethods.ts @@ -5,9 +5,7 @@ type Action = { payload?: any; }; -type CreateMethods = ( - state: T -) => { +type CreateMethods = (state: T) => { [P in keyof M]: (payload?: any) => T; }; diff --git a/src/useMultiStateValidator.ts b/src/useMultiStateValidator.ts index 480d6708..5b017686 100644 --- a/src/useMultiStateValidator.ts +++ b/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; +export type MultiStateValidator = + StateValidator; export function useMultiStateValidator< V extends ValidityState, diff --git a/src/useObservable.ts b/src/useObservable.ts index a329aa16..dfe64d67 100644 --- a/src/useObservable.ts +++ b/src/useObservable.ts @@ -2,9 +2,7 @@ import { useState } from 'react'; import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'; export interface Observable { - subscribe: ( - listener: (value: T) => void - ) => { + subscribe: (listener: (value: T) => void) => { unsubscribe: () => void; }; } diff --git a/stories/useMultiStateValidator.story.tsx b/stories/useMultiStateValidator.story.tsx index 1f095adb..0723bb25 100644 --- a/stories/useMultiStateValidator.story.tsx +++ b/stories/useMultiStateValidator.story.tsx @@ -20,7 +20,7 @@ const Demo = () => { max="10" value={state1} onChange={(ev: React.ChangeEvent) => { - setState1((ev.target.value as unknown) as number); + setState1(ev.target.value as unknown as number); }} /> { max="10" value={state2} onChange={(ev: React.ChangeEvent) => { - setState2((ev.target.value as unknown) as number); + setState2(ev.target.value as unknown as number); }} /> { max="10" value={state3} onChange={(ev: React.ChangeEvent) => { - setState3((ev.target.value as unknown) as number); + setState3(ev.target.value as unknown as number); }} /> {isValid !== undefined && ( diff --git a/stories/useStateList.story.tsx b/stories/useStateList.story.tsx index dc60dd5d..c33e1a2f 100644 --- a/stories/useStateList.story.tsx +++ b/stories/useStateList.story.tsx @@ -21,7 +21,7 @@ const Demo = () => {
-
diff --git a/stories/useStateValidator.story.tsx b/stories/useStateValidator.story.tsx index f8604772..63f056ad 100644 --- a/stories/useStateValidator.story.tsx +++ b/stories/useStateValidator.story.tsx @@ -18,7 +18,7 @@ const Demo = () => { max="10" value={state} onChange={(ev: React.ChangeEvent) => { - setState((ev.target.value as unknown) as number); + setState(ev.target.value as unknown as number); }} /> {isValid !== undefined && {isValid ? 'Valid!' : 'Invalid'}} diff --git a/stories/util/NewTabStory.tsx b/stories/util/NewTabStory.tsx index 6af8c046..e25f1583 100644 --- a/stories/util/NewTabStory.tsx +++ b/stories/util/NewTabStory.tsx @@ -8,7 +8,7 @@ const NewTabStory = ({ children }) => { return (

This story should be{' '} - + opened in a new tab . diff --git a/tests/useMediatedState.test.ts b/tests/useMediatedState.test.ts index 3f6d4e47..cdb3588d 100644 --- a/tests/useMediatedState.test.ts +++ b/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>): void => { + const spy = jest.fn((newState: number, setState: Dispatch>): void => { setState(newState * 2); - }) as unknown) as StateMediator; + }) as unknown as StateMediator; const [, hook] = getHook(1, spy); act(() => hook.result.current[1](3)); diff --git a/tests/useMultiStateValidator.test.ts b/tests/useMultiStateValidator.test.ts index ee1e0234..e98492de 100644 --- a/tests/useMultiStateValidator.test.ts +++ b/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; diff --git a/tests/useStateValidator.test.ts b/tests/useStateValidator.test.ts index 5d2e3163..ff3b09c8 100644 --- a/tests/useStateValidator.test.ts +++ b/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; From 79c72158948d4df36b705493b841160b6ecaffd2 Mon Sep 17 00:00:00 2001 From: Alexander Kachkaev Date: Tue, 31 Aug 2021 23:07:25 +0100 Subject: [PATCH 3/3] Add "yarn lint" to .github/workflows/pull_request_ci.yml --- .github/workflows/pull_request_ci.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/pull_request_ci.yml b/.github/workflows/pull_request_ci.yml index 3d7b602b..5e6140b4 100644 --- a/.github/workflows/pull_request_ci.yml +++ b/.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