deps: bump all dev config

package.json

@@ -55,12 +55,12 @@
     "type:workspaces": "nimbus typescript --build"
   },
   "devDependencies": {
-    "@airbnb/config-babel": "^2.1.3",
-    "@airbnb/config-eslint": "^2.1.3",
-    "@airbnb/config-jest": "^2.1.3",
-    "@airbnb/config-prettier": "^2.0.4",
-    "@airbnb/config-typescript": "^2.1.2",
-    "@airbnb/nimbus": "^2.1.3",
+    "@airbnb/config-babel": "^3.1.0",
+    "@airbnb/config-eslint": "^3.1.0",
+    "@airbnb/config-jest": "^3.0.2",
+    "@airbnb/config-prettier": "^3.1.0",
+    "@airbnb/config-typescript": "^3.0.1",
+    "@airbnb/nimbus": "^3.1.4",
     "@octokit/rest": "18.1.0",
     "@types/enzyme": "^3.10.3",
     "@types/jest": "^24.0.18",
@@ -77,6 +77,7 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.4.0",
+    "eslint-plugin-import": "^2.22.1",
     "fast-glob": "3.2.5",
     "filesize": "6.1.0",
     "fs-jetpack": "^1.3.0",
@@ -161,38 +162,39 @@
         {
           "files": "*.test.{js,jsx,ts,tsx}",
           "rules": {
-            "import/no-extraneous-dependencies": "off"
+            "import/no-extraneous-dependencies": "off",
+            "jest/require-to-throw-message": "off"
           }
         },
         {
           "files": "*.{js,jsx,ts,tsx}",
           "rules": {
-            "no-useless-rename": "off",
-            "linebreak-style": "off",
-            "operator-linebreak": "off",
-            "no-use-before-define": "off",
-            "object-curly-newline": "off",
             "arrow-parens": "off",
             "consistent-return": "off",
+            "import/prefer-default-export": "off",
+            "linebreak-style": "off",
+            "lines-between-class-members": "off",
             "no-console": "off",
-            "no-restricted-syntax": "off",
             "no-nested-ternary": "off",
             "no-param-reassign": "warn",
-            "lines-between-class-members": "off",
-            "import/prefer-default-export": "off",
+            "no-restricted-syntax": "off",
+            "no-use-before-define": "off",
+            "no-useless-rename": "off",
+            "object-curly-newline": "off",
+            "operator-linebreak": "off",
             "promise/param-names": "off",
-            "react/sort-comp": "off",
+            "react/destructuring-assignment": "off",
+            "react/forbid-prop-types": "off",
             "react/jsx-curly-brace-presence": "off",
             "react/jsx-filename-extension": "off",
             "react/jsx-no-literals": "off",
             "react/jsx-props-no-spreading": "off",
             "react/jsx-sort-default-props": "off",
             "react/jsx-sort-props": "off",
-            "react/require-default-props": "off",
-            "react/forbid-prop-types": "off",
-            "react/destructuring-assignment": "off",
             "react/no-array-index-key": "off",
             "react/no-children-prop": "off",
+            "react/require-default-props": "off",
+            "react/sort-comp": "off",
             "react/sort-prop-types": "off",
             "unicorn/catch-error-name": "off",
             "unicorn/no-fn-reference-in-iterator": "off",

packages/visx-annotation/src/deprecated/LinePathAnnotation.tsx

@@ -95,8 +95,8 @@ export default function LinePathAnnotation({
       <LinePath<Point | SimplePoint>
         className={cx('visx-line-path-annotation', className)}
         data={points}
-        x={p => p.x}
-        y={p => p.y}
+        x={(p) => p.x}
+        y={(p) => p.y}
         stroke={stroke}
         strokeWidth={strokeWidth}
       />

packages/visx-axis/src/axis/Axis.tsx

@@ -47,7 +47,7 @@ export default function Axis<Scale extends AxisScale>({
   );
 
   const filteredTickValues = (tickValues ?? getTicks(scale, numTicks))
-    .filter(value => !hideZero || (value !== 0 && value !== '0'))
+    .filter((value) => !hideZero || (value !== 0 && value !== '0'))
     .map((value, index) => ({ value, index }));
 
   const ticks = filteredTickValues.map(({ value, index }) => {

packages/visx-axis/src/axis/AxisRenderer.tsx

@@ -46,7 +46,7 @@ export default function AxisRenderer<Scale extends AxisScale>({
   const allTickLabelProps = ticks.map(({ value, index }) => tickLabelProps(value, index, ticks));
   const maxTickLabelFontSize = Math.max(
     10,
-    ...allTickLabelProps.map(props => (typeof props.fontSize === 'number' ? props.fontSize : 0)),
+    ...allTickLabelProps.map((props) => (typeof props.fontSize === 'number' ? props.fontSize : 0)),
   );
   return (
     <>

packages/visx-axis/test/Axis.test.tsx

@@ -8,13 +8,7 @@ import { Axis } from '../src';
 
 const getTickLine = (
   wrapper: ShallowWrapper<unknown, Readonly<{}>, React.Component<{}, {}, unknown>>,
-) =>
-  wrapper
-    .children()
-    .find('.visx-axis-tick')
-    .not('.visx-axis-line')
-    .find('Line')
-    .first();
+) => wrapper.children().find('.visx-axis-tick').not('.visx-axis-line').find('Line').first();
 
 const axisProps = {
   orientation: 'left' as const,
@@ -81,7 +75,7 @@ describe('<Axis />', () => {
     const wrapper = shallow(<Axis {...axisProps} tickLabelProps={() => tickProps} />);
 
     const ticks = wrapper.find('.visx-axis-tick');
-    ticks.forEach(tick => {
+    ticks.forEach((tick) => {
       expect(tick.find(Text).props()).toEqual(expect.objectContaining(tickProps));
     });
 
@@ -122,42 +116,22 @@ describe('<Axis />', () => {
 
   it('should render the 0th tick if hideZero is false', () => {
     const wrapper = shallow(<Axis {...axisProps} hideZero={false} />);
-    expect(
-      wrapper
-        .find('.visx-axis-tick')
-        .at(0)
-        .key(),
-    ).toBe('visx-tick-0-0');
+    expect(wrapper.find('.visx-axis-tick').at(0).key()).toBe('visx-tick-0-0');
   });
 
   it('should not show 0th tick if hideZero is true', () => {
     const wrapper = shallow(<Axis {...axisProps} hideZero />);
-    expect(
-      wrapper
-        .find('.visx-axis-tick')
-        .at(0)
-        .key(),
-    ).toBe('visx-tick-1-0');
+    expect(wrapper.find('.visx-axis-tick').at(0).key()).toBe('visx-tick-1-0');
   });
 
   it('should SHOW an axis line if hideAxisLine is false', () => {
     const wrapper = shallow(<Axis {...axisProps} hideAxisLine={false} />);
-    expect(
-      wrapper
-        .children()
-        .not('.visx-axis-tick')
-        .find('.visx-axis-line'),
-    ).toHaveLength(1);
+    expect(wrapper.children().not('.visx-axis-tick').find('.visx-axis-line')).toHaveLength(1);
   });
 
   it('should HIDE an axis line if hideAxisLine is true', () => {
     const wrapper = shallow(<Axis {...axisProps} hideAxisLine />);
-    expect(
-      wrapper
-        .children()
-        .not('.visx-axis-tick')
-        .find('Line'),
-    ).toHaveLength(0);
+    expect(wrapper.children().not('.visx-axis-tick').find('Line')).toHaveLength(0);
   });
 
   it('should SHOW ticks if hideTicks is false', () => {
@@ -167,22 +141,13 @@ describe('<Axis />', () => {
 
   it('should HIDE ticks if hideTicks is true', () => {
     const wrapper = shallow(<Axis {...axisProps} hideTicks />);
-    expect(
-      wrapper
-        .children()
-        .find('.visx-axis-tick')
-        .find('Line'),
-    ).toHaveLength(0);
+    expect(wrapper.children().find('.visx-axis-tick').find('Line')).toHaveLength(0);
   });
 
   it('should render one tick for each value specified in tickValues', () => {
     let wrapper = shallow(<Axis {...axisProps} tickValues={[]} />);
     expect(
-      wrapper
-        .children()
-        .find('.visx-axis-tick')
-        .not('.visx-axis-line')
-        .find('Line'),
+      wrapper.children().find('.visx-axis-tick').not('.visx-axis-line').find('Line'),
     ).toHaveLength(0);
 
     wrapper = shallow(<Axis {...axisProps} tickValues={[2]} />);
@@ -194,26 +159,14 @@ describe('<Axis />', () => {
 
   it('should use tickFormat to format ticks if passed', () => {
     const wrapper = shallow(<Axis {...axisProps} tickValues={[0]} tickFormat={() => 'test!!!'} />);
-    expect(
-      wrapper
-        .children()
-        .find('.visx-axis-tick')
-        .find(Text)
-        .prop('children'),
-    ).toBe('test!!!');
+    expect(wrapper.children().find('.visx-axis-tick').find(Text).prop('children')).toBe('test!!!');
   });
 
   test('tickFormat should have access to tick index', () => {
     const wrapper = shallow(
       <Axis {...axisProps} tickValues={[9]} tickFormat={(val, i) => `${i}`} />,
     );
-    expect(
-      wrapper
-        .children()
-        .find('.visx-axis-tick')
-        .find(Text)
-        .prop('children'),
-    ).toBe('0');
+    expect(wrapper.children().find('.visx-axis-tick').find(Text).prop('children')).toBe('0');
   });
 
   test('tick default should follow parent', () => {

packages/visx-bounds/src/enhancers/withBoundingRects.tsx

@@ -54,10 +54,9 @@ export default function withBoundingRects<Props extends object = {}>(
 
       const rect = node.getBoundingClientRect ? node.getBoundingClientRect() : emptyRect;
 
-      const parentRect =
-        parentNode && parentNode.getBoundingClientRect
-          ? parentNode.getBoundingClientRect()
-          : emptyRect;
+      const parentRect = parentNode?.getBoundingClientRect
+        ? parentNode.getBoundingClientRect()
+        : emptyRect;
 
       return { rect, parentRect };
     }

packages/visx-brush/package.json

@@ -36,11 +36,9 @@
     "@visx/drag": "2.1.0",
     "@visx/event": "2.1.0",
     "@visx/group": "2.1.0",
+    "@visx/scale": "2.1.0",
     "@visx/shape": "2.1.1",
     "classnames": "^2.3.1",
     "prop-types": "^15.6.1"
-  },
-  "devDependencies": {
-    "@visx/scale": "2.1.0"
   }
 }

packages/visx-brush/src/BaseBrush.tsx

@@ -632,8 +632,8 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
         {start &&
           end &&
           (Object.keys(handles) as ResizeTriggerAreas[])
-            .filter(handleKey => resizeTriggerAreaSet.has(handleKey))
-            .map(handleKey => {
+            .filter((handleKey) => resizeTriggerAreaSet.has(handleKey))
+            .map((handleKey) => {
               const handle = handles[handleKey];
 
               return (
@@ -659,8 +659,8 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
         {start &&
           end &&
           (Object.keys(corners) as ResizeTriggerAreas[])
-            .filter(cornerKey => resizeTriggerAreaSet.has(cornerKey))
-            .map(cornerKey => {
+            .filter((cornerKey) => resizeTriggerAreaSet.has(cornerKey))
+            .map((cornerKey) => {
               const corner = corners[cornerKey];
 
               return (

packages/visx-brush/src/Brush.tsx

@@ -139,8 +139,14 @@ class Brush extends Component<BrushProps> {
     const invertedX = scaleInvert(xScale, x);
     const invertedY = scaleInvert(yScale, y);
     onBrushStart({
-      x: xScale.invert ? invertedX : xScale.domain()[invertedX],
-      y: yScale.invert ? invertedY : yScale.domain()[invertedY],
+      x:
+        'invert' in xScale && typeof xScale.invert !== 'undefined'
+          ? invertedX
+          : xScale.domain()[invertedX],
+      y:
+        'invert' in yScale && typeof yScale.invert !== 'undefined'
+          ? invertedY
+          : yScale.domain()[invertedY],
     });
   };
 
@@ -185,10 +191,10 @@ class Brush extends Component<BrushProps> {
     let brushRegionHeight;
     let left;
     let top;
-    const marginLeft = margin && margin.left ? margin.left : 0;
-    const marginTop = margin && margin.top ? margin.top : 0;
-    const marginRight = margin && margin.right ? margin.right : 0;
-    const marginBottom = margin && margin.bottom ? margin.bottom : 0;
+    const marginLeft = margin?.left ? margin.left : 0;
+    const marginTop = margin?.top ? margin.top : 0;
+    const marginRight = margin?.right ? margin.right : 0;
+    const marginBottom = margin?.bottom ? margin.bottom : 0;
 
     if (brushRegion === 'chart') {
       left = 0;

packages/visx-brush/src/BrushHandle.tsx

@@ -131,15 +131,8 @@ export default class BrushHandle extends React.Component<BrushHandleProps> {
   };
 
   render() {
-    const {
-      stageWidth,
-      stageHeight,
-      brush,
-      type,
-      handle,
-      isControlled,
-      isDragInProgress,
-    } = this.props;
+    const { stageWidth, stageHeight, brush, type, handle, isControlled, isDragInProgress } =
+      this.props;
     const { x, y, width, height } = handle;
     const cursor = type === 'right' || type === 'left' ? 'ew-resize' : 'ns-resize';
 

packages/visx-brush/src/BrushSelection.tsx

@@ -161,20 +161,20 @@ export default class BrushSelection extends React.Component<
               height={height}
               className="visx-brush-selection"
               onPointerDown={disableDraggingSelection ? undefined : dragStart}
-              onPointerLeave={event => {
+              onPointerLeave={(event) => {
                 if (onMouseLeave) onMouseLeave(event);
               }}
-              onPointerMove={event => {
+              onPointerMove={(event) => {
                 dragMove(event);
                 if (onMouseMove) onMouseMove(event);
               }}
-              onPointerUp={event => {
+              onPointerUp={(event) => {
                 if (!isControlled) {
                   dragEnd(event);
                 }
                 if (onMouseUp) onMouseUp(event);
               }}
-              onClick={event => {
+              onClick={(event) => {
                 if (onClick) onClick(event as React.PointerEvent<SVGRectElement>);
               }}
               style={{

packages/visx-brush/src/types.ts

@@ -1,3 +1,5 @@
+import { D3Scale, NumberLike } from '@visx/scale';
+
 export type Point = {
   x: number;
   y: number;
@@ -6,10 +8,10 @@ export type Point = {
 export type Bounds = {
   x0: number;
   x1: number;
-  xValues?: any[];
+  xValues?: unknown[];
   y0: number;
   y1: number;
-  yValues?: any[];
+  yValues?: unknown[];
 };
 
 export interface MarginShape {
@@ -50,13 +52,11 @@ export type BrushPageOffset = {
   pageY?: number;
 };
 
-export interface Scale<Input = any, Output = any> {
-  (value: Input): Output;
-  ticks?: (count: number) => Input[];
-  domain(input: Input[]): this;
-  domain(): Input[];
-  range(): Output[];
-  range(output: Output[]): this;
-  invert?: (output: Output) => Input;
-  step?: () => number;
-}
+// In order to plot values on a brush, output of the scale must be number.
+// Some scales return undefined.
+type BrushScaleOutput = number | NumberLike | undefined;
+
+/** A catch-all type for scales that are compatible with axis */
+export type Scale<Output extends BrushScaleOutput = BrushScaleOutput> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  D3Scale<Output, any, any>;