Merge pull request #730 from hshoff/chris--docgenInfo-cleanup

docs: cleanup autogen

package.json

@@ -32,9 +32,7 @@
     "test": "yarn run jest",
     "type:dts": "nimbus typescript --build --reference-workspaces",
     "type-one": "nimbus typescript --build",
-    "docs": "yarn run docs:gen && node ./scripts/docs/index.js",
-    "docs:gen": "lerna run docs",
-    "prepare-release": "git checkout master && git pull --rebase origin master && yarn run docs && lerna updated",
+    "prepare-release": "git checkout master && git pull --rebase origin master && lerna updated",
     "release": "yarn run prepare-release && lerna publish --exact"
   },
   "devDependencies": {
@@ -58,7 +56,6 @@
     "marked": "^0.7.0",
     "raf": "^3.4.0",
     "react": "^15.0.0-0 || ^16.0.0-0",
-    "react-docgen": "^5.3.0",
     "react-dom": "^15.0.0-0 || ^16.0.0-0",
     "react-test-renderer": "^16.8.6",
     "regenerator-runtime": "^0.10.5"

packages/vx-bounds/Readme.md

@@ -1,5 +1,11 @@
 # @vx/bounds
 
+<p>
+  <a title="@vx/bounds npm downloads" href="https://www.npmjs.com/package/@vx/bounds">
+    <img src="https://img.shields.io/npm/dm/@vx/bounds.svg?style=flat-square" />
+  </a>
+</p>
+
 ```
 npm install --save @vx/bounds
 ```

packages/vx-demo/src/components/DocPage.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import React from 'react';
 import Markdown from 'react-markdown/with-html';
 
@@ -8,7 +9,7 @@ import Page from './Page';
 import { DocGenInfo, VxPackage } from '../types';
 
 type Props = {
-  components?: DocGenInfo[];
+  components?: unknown[];
   vxPackage: VxPackage;
   readme: string;
 };
@@ -27,10 +28,12 @@ export default function DocPage({ components, vxPackage, readme }: Props) {
               <h2>Components</h2>
               <ul>
                 {components.map(component => {
-                  const { displayName = '' } = component;
+                  // @ts-ignore TS doesn't know about docgenInfo
+                  const docgenInfo = component?.__docgenInfo as DocGenInfo | undefined;
+                  const { displayName = '' } = docgenInfo || {};
                   const isComponent =
                     displayName && displayName[0].toLowerCase() !== displayName[0];
-                  return (
+                  return docgenInfo ? (
                     <li key={displayName}>
                       <a href={`#${displayName}`}>
                         <code>
@@ -40,14 +43,18 @@ export default function DocPage({ components, vxPackage, readme }: Props) {
                         </code>
                       </a>
                     </li>
-                  );
+                  ) : null;
                 })}
               </ul>
 
               <h2>APIs</h2>
-              {components.map(component => (
-                <ApiTable key={component.displayName} docgenInfo={component} />
-              ))}
+              {components.map(component => {
+                // @ts-ignore TS doesn't know about docgenInfo
+                const docgenInfo = component.__docgenInfo as DocGenInfo | undefined;
+                return docgenInfo ? (
+                  <ApiTable key={docgenInfo.displayName} docgenInfo={docgenInfo} />
+                ) : null;
+              })}
             </>
           )}
         </div>

packages/vx-demo/src/components/PackageList.tsx

@@ -122,7 +122,7 @@ export default function PackageList({
               {!compact && <p>Utilities for clip-path elements</p>}
             </li>
             <li className={cx(emphasizePackage === 'event' && 'emphasize')}>
-              <a href="/static/docs/vx-event.html">@vx/event</a>
+              <a href="/docs/event">@vx/event</a>
               {!compact && (
                 <p>Utilities for computing svg coordinates from mouse or touch events</p>
               )}

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

@@ -1,14 +1,9 @@
 import React from 'react';
-
 import AnnotationReadme from '!!raw-loader!../../../../vx-annotation/Readme.md';
 import LinePathAnnotation from '../../../../vx-annotation/src/annotations/LinePathAnnotation';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  LinePathAnnotation.__docgenInfo,
-] as DocGenInfo[];
+const components = [LinePathAnnotation];
 
 export default () => (
   <DocPage components={components} readme={AnnotationReadme} vxPackage="annotation" />

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

@@ -6,19 +6,7 @@ import AxisLeft from '../../../../vx-axis/src/axis/AxisLeft';
 import AxisRight from '../../../../vx-axis/src/axis/AxisRight';
 import AxisTop from '../../../../vx-axis/src/axis/AxisTop';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  Axis.__docgenInfo,
-  // @ts-ignore
-  AxisBottom.__docgenInfo,
-  // @ts-ignore
-  AxisLeft.__docgenInfo,
-  // @ts-ignore
-  AxisRight.__docgenInfo,
-  // @ts-ignore
-  AxisTop.__docgenInfo,
-] as DocGenInfo[];
+const components = [Axis, AxisBottom, AxisLeft, AxisRight, AxisTop];
 
 export default () => <DocPage components={components} readme={AxisReadme} vxPackage="axis" />;

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

@@ -2,11 +2,7 @@ import React from 'react';
 import BrushReadme from '!!raw-loader!../../../../vx-brush/Readme.md';
 import Brush from '../../../../vx-brush/src/Brush';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  Brush.__docgenInfo,
-] as DocGenInfo[];
+const components = [Brush];
 
 export default () => <DocPage components={components} readme={BrushReadme} vxPackage="brush" />;

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

@@ -1,16 +1,9 @@
 import React from 'react';
-
 import ChordReadme from '!!raw-loader!../../../../vx-chord/Readme.md';
 import Chord from '../../../../vx-chord/src/Chord';
 import DocPage from '../../components/DocPage';
 import Ribbon from '../../../../vx-chord/src/Ribbon';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  Chord.__docgenInfo,
-  // @ts-ignore
-  Ribbon.__docgenInfo,
-] as DocGenInfo[];
+const components = [Chord, Ribbon];
 
 export default () => <DocPage components={components} readme={ChordReadme} vxPackage="chord" />;

packages/vx-demo/src/pages/docs/Clip-Path.tsx

@@ -4,16 +4,8 @@ import ClipPath from '../../../../vx-clip-path/src/clip-paths/ClipPath';
 import CircleClipPath from '../../../../vx-clip-path/src/clip-paths/CircleClipPath';
 import RectClipPath from '../../../../vx-clip-path/src/clip-paths/RectClipPath';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  ClipPath.__docgenInfo,
-  // @ts-ignore
-  CircleClipPath.__docgenInfo,
-  // @ts-ignore
-  RectClipPath.__docgenInfo,
-] as DocGenInfo[];
+const components = [ClipPath, CircleClipPath, RectClipPath];
 
 export default () => (
   <DocPage components={components} readme={ClipPathReadme} vxPackage="clip-path" />

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

@@ -2,11 +2,7 @@ import React from 'react';
 import DragReadme from '!!raw-loader!../../../../vx-drag/Readme.md';
 import Drag from '../../../../vx-drag/src/Drag';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  Drag.__docgenInfo,
-] as DocGenInfo[];
+const components = [Drag];
 
 export default () => <DocPage components={components} readme={DragReadme} vxPackage="drag" />;

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

@@ -10,27 +10,17 @@ import NaturalEarth from '../../../../vx-geo/src/projections/NaturalEarth';
 import Orthographic from '../../../../vx-geo/src/projections/Orthographic';
 import Projection from '../../../../vx-geo/src/projections/Projection';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
 const components = [
-  // @ts-ignore
-  Projection.__docgenInfo,
-  // @ts-ignore
-  Graticule.__docgenInfo,
-  // @ts-ignore
-  Albers.__docgenInfo,
-  // @ts-ignore
-  AlbersUsa.__docgenInfo,
-  // @ts-ignore
-  CustomProjection.__docgenInfo,
-  // @ts-ignore
-  EqualEarth.__docgenInfo,
-  // @ts-ignore
-  Mercator.__docgenInfo,
-  // @ts-ignore
-  NaturalEarth.__docgenInfo,
-  // @ts-ignore
-  Orthographic.__docgenInfo,
-] as DocGenInfo[];
+  Projection,
+  Graticule,
+  Albers,
+  AlbersUsa,
+  CustomProjection,
+  EqualEarth,
+  Mercator,
+  NaturalEarth,
+  Orthographic,
+];
 
 export default () => <DocPage components={components} readme={GeoReadme} vxPackage="geo" />;

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

@@ -2,12 +2,13 @@ import React from 'react';
 import GlyphReadme from '!!raw-loader!../../../../vx-glyph/Readme.md';
 import * as Glyph from '../../../../vx-glyph/src';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = (Object.values(Glyph).map(
-  component =>
-    // @ts-ignore
-    component.__docgenInfo,
-) as DocGenInfo[]).sort((a, b) => (a.displayName ?? '').localeCompare(b.displayName ?? ''));
+const components = Object.values(Glyph).sort((a, b) =>
+  // @ts-ignore TS doesn't know about docgenInfo
+  (a?.__docgenInfo?.displayName ?? '').localeCompare(
+    // @ts-ignore TS doesn't know about docgenInfo
+    b?.__docgenInfo?.displayName ?? '',
+  ),
+);
 
 export default () => <DocPage components={components} readme={GlyphReadme} vxPackage="glyph" />;

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

@@ -3,20 +3,20 @@ import GradientReadme from '!!raw-loader!../../../../vx-gradient/Readme.md';
 import * as Gradients from '../../../../vx-gradient/src';
 
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = (Object.values(Gradients).map(
-  component =>
-    // @ts-ignore
-    component.__docgenInfo,
-) as DocGenInfo[]).sort(
-  (a, b) =>
-    (a.displayName === 'LinearGradient' && -2) ||
-    (b.displayName === 'LinearGradient' && 2) ||
-    (a.displayName === 'RadialGradient' && -1) ||
-    (b.displayName === 'RadialGradient' && 1) ||
-    (a.displayName ?? '').localeCompare(b.displayName ?? ''),
-);
+const components = Object.values(Gradients).sort((a, b) => {
+  // @ts-ignore TS doesn't know about docgenInfo
+  const aName = a?.__docgenInfo?.displayName ?? '';
+  // @ts-ignore TS doesn't know about docgenInfo
+  const bName = b?.__docgenInfo?.displayName ?? '';
+  return (
+    (aName === 'LinearGradient' && -2) ||
+    (bName === 'LinearGradient' && 2) ||
+    (aName === 'RadialGradient' && -1) ||
+    (bName === 'RadialGradient' && 1) ||
+    aName.localeCompare(bName)
+  );
+});
 
 export default () => (
   <DocPage components={components} readme={GradientReadme} vxPackage="gradient" />

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

@@ -4,12 +4,7 @@ import Grid from '../../../../vx-grid/src/grids/Grid';
 import GridRows from '../../../../vx-grid/src/grids/GridRows';
 import GridColumns from '../../../../vx-grid/src/grids/GridColumns';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [GridRows, GridColumns, Grid].map(
-  c =>
-    // @ts-ignore
-    c.__docgenInfo,
-) as DocGenInfo[];
+const components = [GridRows, GridColumns, Grid];
 
 export default () => <DocPage components={components} readme={GridReadme} vxPackage="grid" />;

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

@@ -2,11 +2,7 @@ import React from 'react';
 import GroupReadme from '!!raw-loader!../../../../vx-group/Readme.md';
 import Group from '../../../../vx-group/src/Group';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  Group.__docgenInfo,
-] as DocGenInfo[];
+const components = [Group];
 
 export default () => <DocPage components={components} readme={GroupReadme} vxPackage="group" />;

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

@@ -3,13 +3,7 @@ import HeatmapReadme from '!!raw-loader!../../../../vx-heatmap/Readme.md';
 import HeatmapRect from '../../../../vx-heatmap/src/heatmaps/HeatmapRect';
 import HeatmapCircle from '../../../../vx-heatmap/src/heatmaps/HeatmapCircle';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  HeatmapRect.__docgenInfo,
-  // @ts-ignore
-  HeatmapCircle.__docgenInfo,
-] as DocGenInfo[];
+const components = [HeatmapRect, HeatmapCircle];
 
 export default () => <DocPage components={components} readme={HeatmapReadme} vxPackage="heatmap" />;

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

@@ -6,13 +6,8 @@ import Partition from '../../../../vx-hierarchy/src/hierarchies/Partition';
 import Tree from '../../../../vx-hierarchy/src/hierarchies/Tree';
 import Treemap from '../../../../vx-hierarchy/src/hierarchies/Treemap';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [Cluster, Pack, Partition, Tree, Treemap].map(
-  c =>
-    // @ts-ignore
-    c.__docgenInfo,
-) as DocGenInfo[];
+const components = [Cluster, Pack, Partition, Tree, Treemap];
 
 export default () => (
   <DocPage components={components} readme={HierarchyReadme} vxPackage="hierarchy" />

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

@@ -7,12 +7,7 @@ import Quantile from '../../../../vx-legend/src/legends/Quantile';
 import Size from '../../../../vx-legend/src/legends/Size';
 import Threshold from '../../../../vx-legend/src/legends/Threshold';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [Linear, Ordinal, Quantile, Size, Threshold, Legend].map(
-  c =>
-    // @ts-ignore
-    c.__docgenInfo,
-) as DocGenInfo[];
+const components = [Linear, Ordinal, Quantile, Size, Threshold, Legend];
 
 export default () => <DocPage components={components} readme={LegendReadme} vxPackage="legend" />;

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

@@ -2,11 +2,7 @@ import React from 'react';
 import MarkerReadme from '!!raw-loader!../../../../vx-marker/Readme.md';
 import Marker from '../../../../vx-marker/src/markers/Marker';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [
-  // @ts-ignore
-  Marker.__docgenInfo,
-] as DocGenInfo[];
+const components = [Marker];
 
 export default () => <DocPage components={components} readme={MarkerReadme} vxPackage="marker" />;

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

@@ -6,12 +6,7 @@ import Links from '../../../../vx-network/src/Links';
 import DefaultNode from '../../../../vx-network/src/DefaultNode';
 import DefaultLink from '../../../../vx-network/src/DefaultLink';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [Graph, Nodes, Links, DefaultNode, DefaultLink].map(
-  c =>
-    // @ts-ignore
-    c.__docgenInfo,
-) as DocGenInfo[];
+const components = [Graph, Nodes, Links, DefaultNode, DefaultLink];
 
 export default () => <DocPage components={components} readme={NetworkReadme} vxPackage="network" />;

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

@@ -7,12 +7,7 @@ import Path from '../../../../vx-pattern/src/patterns/Path';
 import Pattern from '../../../../vx-pattern/src/patterns/Pattern';
 import Waves from '../../../../vx-pattern/src/patterns/Waves';
 import DocPage from '../../components/DocPage';
-import { DocGenInfo } from '../../types';
 
-const components = [Pattern, Circles, Hexagons, Lines, Path, Waves].map(
-  component =>
-    // @ts-ignore
-    component.__docgenInfo,
-) as DocGenInfo[];
+const components = [Pattern, Circles, Hexagons, Lines, Path, Waves];
 
 export default () => <DocPage components={components} readme={PatternReadme} vxPackage="pattern" />;