docs(vx-brush): update to docgen

packages/vx-brush/package.json

@@ -37,7 +37,6 @@
     "@vx/group": "0.0.196",
     "@vx/shape": "0.0.196",
     "classnames": "^2.2.5",
-    "prop-types": "^15.6.1",
-    "recompose": "^0.23.1"
+    "prop-types": "^15.6.1"
   }
 }

packages/vx-brush/src/Brush.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import BaseBrush, { BaseBrushProps, BaseBrushState } from './BaseBrush';
 import {
   Bounds,
@@ -14,30 +14,51 @@ const SAFE_PIXEL = 2;
 const DEFAULT_COLOR = 'steelblue';
 
 export type BrushProps = {
+  /** Style object for the Brush selection rect. */
   selectedBoxStyle: React.SVGProps<SVGRectElement>;
+  /** x-coordinate scale. */
   xScale: Scale;
+  /** y-coordinate scale. */
   yScale: Scale;
+  /** Brush stage height. */
   height: number;
+  /** Brush stage width. */
   width: number;
-  onChange: (bounds: Bounds | null) => void;
-  onBrushStart: BaseBrushProps['onBrushStart'];
-  onBrushEnd: (bounds: Bounds | null) => void;
-  onMouseMove: BaseBrushProps['onMouseMove'];
-  onMouseLeave: BaseBrushProps['onMouseLeave'];
-  onClick: BaseBrushProps['onClick'];
-  margin: MarginShape;
-  brushDirection: 'vertical' | 'horizontal' | 'both';
+  /** Callback invoked on a change in Brush bounds. */
+  onChange?: (bounds: Bounds | null) => void;
+  /** Callback invoked on initialization of a Brush (not Brush move). */
+  onBrushStart?: BaseBrushProps['onBrushStart'];
+  /** Callback invoked on mouse up when a Brush size is being updated. */
+  onBrushEnd?: (bounds: Bounds | null) => void;
+  /** Callback invoked on mouse move in Brush stage when *not* dragging. */
+  onMouseMove?: BaseBrushProps['onMouseMove'];
+  /** Callback invoked on mouse leave from Brush stage when *not* dragging. */
+  onMouseLeave?: BaseBrushProps['onMouseLeave'];
+  /** Callback invoked on Brush stage click. */
+  onClick?: BaseBrushProps['onClick'];
+  /** Margin subtracted from Brush stage dimensions. */
+  margin?: MarginShape;
+  /** Allowed directions for Brush dimensional change. */
+  brushDirection?: 'vertical' | 'horizontal' | 'both';
+  /** Initial start and end position of the Brush. */
   initialBrushPosition?: PartialBrushStartEnd;
-  resizeTriggerAreas: ResizeTriggerAreas[];
-  brushRegion: 'xAxis' | 'yAxis' | 'chart';
-  yAxisOrientation: 'left' | 'right';
-  xAxisOrientation: 'top' | 'bottom';
+  /** Array of rect sides and corners which should be resizeable / can trigger a Brush size change. */
+  resizeTriggerAreas?: ResizeTriggerAreas[];
+  /** What is being brushed, used for margin subtraction. */
+  brushRegion?: 'xAxis' | 'yAxis' | 'chart';
+  /** Orientation of yAxis if `brushRegion=yAxis`. */
+  yAxisOrientation?: 'left' | 'right';
+  /** Orientation of xAxis if `brushRegion=xAxis`. */
+  xAxisOrientation?: 'top' | 'bottom';
+  /** Whether movement of Brush should be disabled. */
   disableDraggingSelection: boolean;
+  /** Whether to reset the Brush on drag end. */
   resetOnEnd?: boolean;
+  /** Size of Brush handles, applies to all `resizeTriggerAreas`. */
   handleSize: number;
 };
 
-class Brush extends React.Component<BrushProps> {
+class Brush extends Component<BrushProps> {
   static defaultProps = {
     xScale: null,
     yScale: null,

packages/vx-demo/src/pages/docs/Brush.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Markdown from 'react-markdown/with-html';
+
+import Page from '../../components/Page';
+import Footer from '../../components/Footer';
+import ApiTable, { DocGenInfo } from '../../components/ApiTable';
+import BrushReadme from '!!raw-loader!../../../../vx-brush/Readme.md';
+import Brush from '../../../../vx-brush/src/Brush';
+import DocPage from '../../components/DocPage';
+
+const components = [
+  // @ts-ignore
+  Brush.__docgenInfo,
+] as DocGenInfo[];
+
+export default () => (
+  <Page title="@vx/brush documentation">
+    <DocPage currentPackage="brush">
+      <Markdown escapeHtml={false} source={BrushReadme} />
+      <h2>Components</h2>
+      <ul>
+        {components.map(component => (
+          <li key={component.displayName}>
+            <a href={`#${component.displayName}`}>
+              <code>&lt;{component.displayName} /&gt;</code>
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      <h2>APIs</h2>
+      {components.map(component => (
+        <ApiTable key={component.displayName} docgenInfo={component} />
+      ))}
+    </DocPage>
+    <Footer />
+  </Page>
+);