fix(lint): make eslint work with yarn v2

Uses eslint-config-typescript-shareable to import
linting rules from a shared config instead of specifying
own rules.

Temporary disabled global cache to avoid bug.

.eslintrc.yml

@@ -0,0 +1,20 @@
+extends:
+  - 'typescript-shareable'
+
+parserOptions:
+  project: './tsconfig.json'
+  ecmaVersion: 2019
+  ecmaFeatures:
+    jsx: true
+
+env:
+  browser: true
+  es6: true
+  node: true
+
+settings:
+  react:
+    version: detect
+
+rules:
+  '@typescript-eslint/unbound-method': 'off'

.yarnrc.yml

@@ -1,7 +1,20 @@
-enableGlobalCache: true
+# Prefer global cache, but currently this doesn't work with eslint
+# because of: https://github.com/yarnpkg/berry/issues/706
+enableGlobalCache: false
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
 
 yarnPath: .yarn/releases/yarn-berry.js
+
+packageExtensions:
+  '@types/styled-components@*':
+    dependencies:
+      'react': '*'
+  '@types/hoist-non-react-statics@*':
+    dependencies:
+      'react': '*'
+  '@types/react-dom@*':
+    dependencies:
+      'react': '*'

lib/Foundation.tsx

@@ -55,10 +55,10 @@ import { Coord } from './utils/geometry'
  * An area is represented by the top left and bottom right
  * corner coordinates.
  */
-export type Area = [Coord, Coord]
+export type Area = readonly [Coord, Coord]
 
 /**
- * A boundix box is represented by the top left and bottom right
+ * A bounding box is represented by the top left and bottom right
  * corner coordinates.
  *
  * We use an over-specified bounding box so that it can easily be
@@ -69,7 +69,7 @@ export type Area = [Coord, Coord]
  *  width = |x2 - x| = |right - left|
  *  height = |y2 - y| = |bottom - top|
  */
-export type BBox = {
+export interface BBox {
   readonly x: number
   readonly y: number
   readonly x2?: number
@@ -112,9 +112,9 @@ const throwIfNoFoundationProvider = () => {
 export type CoordTransform = (P: Coord) => Coord
 
 export interface FoundationContextProps {
-  userBasis: Area
-  toSvgBasis: CoordTransform
-  toUserBasis: CoordTransform
+  readonly userBasis: Area
+  readonly toSvgBasis: CoordTransform
+  readonly toUserBasis: CoordTransform
 }
 
 export const FoundationContext = React.createContext<FoundationContextProps>({
@@ -228,10 +228,11 @@ export const Foundation = React.forwardRef<
         bSU = multiply(bSN, multiply(inverse(transformationMatrix), bNU))
       }
       const bUS = inverse(bSU)
-      const toSvgBasis = (p: Coord) => apply(bSU, p)
-      const toUserBasis = (p: Coord) => apply(bUS, p)
 
-      return { toSvgBasis, toUserBasis }
+      return {
+        toSvgBasis: (p: Coord) => apply(bSU, p),
+        toUserBasis: (p: Coord) => apply(bUS, p),
+      }
     }, [width, height, userBasis, transformationMatrix])
 
     /**
@@ -253,24 +254,27 @@ export const Foundation = React.forwardRef<
           height,
         })
       }
-    }, [width, height, toUserBasis, toSvgBasis])
+    }, [width, height, toUserBasis, toSvgBasis, onReady])
 
     /**
      * Keep track of the SVG element (both internally and externally forwarded).
      */
     const internalRef = useRef<HTMLDivElement | null>(null)
-    const callbackRef = useCallback((node: HTMLDivElement | null) => {
-      // Set the external forwarded ref if present
-      if (ref !== null) {
-        if (typeof ref === 'function') {
-          ref(node)
-        } else {
-          ref.current = node
+    const callbackRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        // Set the external forwarded ref if present
+        if (ref !== null) {
+          if (typeof ref === 'function') {
+            ref(node)
+          } else {
+            ref.current = node
+          }
         }
-      }
-      // Keep track of the element internally
-      internalRef.current = node
-    }, [])
+        // Keep track of the element internally
+        internalRef.current = node
+      },
+      [ref],
+    )
 
     /**
      * Keep track of the size of the SVG drawing area and adjust width/height.

lib/Liner.tsx

@@ -25,7 +25,7 @@ export const LinerContext = React.createContext<LinerContextProps>({
   },
   clampCoord: (point) => point,
   clampCoordArray: (points) => points,
-  clampBBox: (bbox) => bbox,
+  clampBBox: (b) => b,
 })
 
 export interface LinerProps {
@@ -62,21 +62,18 @@ export const Liner: React.FC<LinerProps> = ({ area, children }) => {
       const dx = clamp(areaBBox.x, x, x2) - x
       const dy = clamp(areaBBox.y, y, y2) - y
       // apply reverse translation
-      return points.map(([x, y]) => [x + dx, y + dy])
+      return points.map(([px, py]) => [px + dx, py + dy])
     },
     [areaBBox],
   )
 
   const clampBBox = useCallback(
-    (bbox: BBox): BBox => {
-      const { x, y, width, height } = bbox
-      return {
-        x: clamp(areaBBox.x, x, areaBBox.x2 - width),
-        y: clamp(areaBBox.y, y, areaBBox.y2 - height),
-        width,
-        height,
-      }
-    },
+    ({ x, y, width, height }: BBox): BBox => ({
+      x: clamp(areaBBox.x, x, areaBBox.x2 - width),
+      y: clamp(areaBBox.y, y, areaBBox.y2 - height),
+      width,
+      height,
+    }),
     [areaBBox],
   )
 

lib/hooks/useDraggable.ts

@@ -60,20 +60,18 @@ export function useDraggable(): DraggableControls {
     e.stopPropagation()
     const name = e.currentTarget.getAttribute('name')
     if (name === null) {
-      console.error(
-        `${useDraggable.name}: \'name\' attribute missing on element`,
-      )
+      console.error(`${useDraggable.name}: 'name' attribute missing on element`)
     }
     setOrigin([e.pageX, e.pageY])
     __translationName.current = name
   }, [])
 
   useEffect(() => {
-    if (origin) {
+    if (origin !== null) {
       const [originX, originY] = origin
       const emitTranslationEvent = (ended: boolean) => {
         if (__translationSubscriber.current === undefined) {
-          console.error(`${useDraggable.name}: \'missing subscriber function\'`)
+          console.error(`${useDraggable.name}: 'missing subscriber function'`)
           return
         }
         __translationSubscriber.current(

lib/utils/geometry.ts

@@ -1,5 +1,5 @@
 export type Coord = readonly [number, number]
-export type CoordArray = readonly Coord[]
+export type CoordArray = ReadonlyArray<Coord>
 
 /**
  * Compute a ranged version of a number so that is always
@@ -18,7 +18,7 @@ export const modulo = (i: number, n: number) => {
  * @param  {Number} i - The index of the element to select
  * @return {Object} - The element corresponding to cyclic index i
  */
-export const select = <T>(arr: readonly T[], i: number) => {
+export const select = <T>(arr: ReadonlyArray<T>, i: number) => {
   return arr[modulo(i, arr.length)]
 }
 
@@ -27,7 +27,9 @@ export const select = <T>(arr: readonly T[], i: number) => {
  * @param  {Array} items - The array to double
  * @return {Array} - A new array of doubled items
  */
-export const doubled = <T>(items: readonly T[]): ReadonlyArray<[T, T]> => {
+export const doubled = <T>(
+  items: ReadonlyArray<T>,
+): ReadonlyArray<readonly [T, T]> => {
   return items.map((item, i, arr) => {
     return [item, select(arr, i + 1)]
   })
@@ -45,7 +47,7 @@ export const midPoints = (points: CoordArray): CoordArray => {
 }
 
 export const withMidPoints = (points: CoordArray): CoordArray => {
-  return doubled(points).reduce<Coord[]>((acc, [p1, p2]) => {
+  return doubled(points).reduce<Array<Coord>>((acc, [p1, p2]) => {
     acc.push(p1)
     acc.push([(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2])
     return acc
@@ -59,11 +61,11 @@ const SMALL = Number.MIN_SAFE_INTEGER
 const LARGE = Number.MAX_SAFE_INTEGER
 export const bbox = (coords: CoordArray) => {
   const { x, y, x2, y2 } = coords.reduce(
-    (acc, [x, y]) => {
-      acc.x = Math.min(acc.x, x)
-      acc.y = Math.min(acc.y, y)
-      acc.x2 = Math.max(acc.x2, x)
-      acc.y2 = Math.max(acc.y2, y)
+    (acc, [cx, cy]) => {
+      acc.x = Math.min(acc.x, cx)
+      acc.y = Math.min(acc.y, cy)
+      acc.x2 = Math.max(acc.x2, cx)
+      acc.y2 = Math.max(acc.y2, cy)
       return acc
     },
     { x: LARGE, y: LARGE, x2: SMALL, y2: SMALL },

package.json

@@ -54,11 +54,12 @@
     "conventional-recommended-bump": "6.0.10",
     "css-loader": "3.6.0",
     "eslint": "7.6.0",
-    "eslint-config-prettier": "6.11.0",
+    "eslint-config-typescript-shareable": "0.10.0",
+    "eslint-import-resolver-node": "^0.3.4",
+    "eslint-plugin-functional": "3.0.1",
     "eslint-plugin-import": "2.22.0",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "4.2.1",
-    "eslint-plugin-react": "7.20.6",
+    "eslint-plugin-react": "7.20.5",
     "eslint-plugin-react-hooks": "4.0.8",
     "file-loader": "6.0.0",
     "html-webpack-plugin": "4.3.0",