Merge pull request #704 from hshoff/chris--docgen-geo

docs(vx-geo): convert to docgen
airbnb · May 22, 2020 · 203fc2e · 203fc2e
2 parents d5ca33a + 419e680
commit 203fc2e
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 502 deletions.
diff --git a/packages/vx-demo/src/components/PackageList.tsx b/packages/vx-demo/src/components/PackageList.tsx
@@ -72,7 +72,7 @@ export default function PackageList({
               {!compact && <p>Radial layout for matrix relationships</p>}
             </li>
             <li className={cx(emphasizePackage === 'geo' && 'emphasize')}>
-              <a href="/static/docs/vx-geo.html">@vx/geo</a>
+              <a href="/docs/geo">@vx/geo</a>
               {!compact && <p>Geographic projections</p>}
             </li>
             <li className={cx(emphasizePackage === 'heatmap' && 'emphasize')}>

diff --git a/packages/vx-demo/src/pages/docs/Geo.tsx b/packages/vx-demo/src/pages/docs/Geo.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import GeoReadme from '!!raw-loader!../../../../vx-geo/Readme.md';
+import Graticule from '../../../../vx-geo/src/graticule/Graticule';
+import Albers from '../../../../vx-geo/src/projections/Albers';
+import AlbersUsa from '../../../../vx-geo/src/projections/AlbersUsa';
+import CustomProjection from '../../../../vx-geo/src/projections/CustomProjection';
+import EqualEarth from '../../../../vx-geo/src/projections/EqualEarth';
+import Mercator from '../../../../vx-geo/src/projections/Mercator';
+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[];
+
+export default () => <DocPage components={components} readme={GeoReadme} vxPackage="geo" />;
diff --git a/packages/vx-demo/src/static/docs/vx-geo.html b/packages/vx-demo/src/static/docs/vx-geo.html
diff --git a/packages/vx-geo/Readme.md b/packages/vx-geo/Readme.md
@@ -4,133 +4,14 @@
   <img src="https://img.shields.io/npm/dm/@vx/geo.svg?style=flat-square" />
 </a>
 
+The `@vx/geo` package provides `react` components for rendering common and custom geographic
+projections. `<Projection />` can be used to render preset projections
+(`projection='orthographic' | 'albers' | 'albersUsa' | 'mercator' | 'naturalEarth' | 'equalEarth'`)
+along with configurable `<Graticule />`s lines. Convenience projections such as `<Mercator />` are
+also exported, along with `<CustomProjection />` and `<Graticule />` for full customization.
 
 ## Installation
 
 ```
 npm install --save @vx/geo
 ```
-
-
-## Components
-
-
-
-  - [Graticule](#graticule-)
-  - [Albers](#albers-)
-  - [AlbersUsa](#albersusa-)
-  - [CustomProjection](#customprojection-)
-  - [EqualEarth](#equalearth-)
-  - [Mercator](#mercator-)
-  - [NaturalEarth](#naturalearth-)
-  - [Orthographic](#orthographic-)
-  - [Projection](#projection-)
-
-## API
-
-
-
-<h3 id="graticule-">&lt;Graticule /&gt;</h3>
-
-
-
-<a id="#Graticule__children" name="Graticule__children" href="#Graticule__children">#</a> *Graticule*.**children**&lt;func&gt;  
-
-<a id="#Graticule__extent" name="Graticule__extent" href="#Graticule__extent">#</a> *Graticule*.**extent**&lt;arrayOf[object Object]&gt;  
-
-<a id="#Graticule__extentMajor" name="Graticule__extentMajor" href="#Graticule__extentMajor">#</a> *Graticule*.**extentMajor**&lt;arrayOf[object Object]&gt;  
-
-<a id="#Graticule__extentMinor" name="Graticule__extentMinor" href="#Graticule__extentMinor">#</a> *Graticule*.**extentMinor**&lt;arrayOf[object Object]&gt;  
-
-<a id="#Graticule__graticule" name="Graticule__graticule" href="#Graticule__graticule">#</a> *Graticule*.**graticule**&lt;func&gt;  
-
-<a id="#Graticule__lines" name="Graticule__lines" href="#Graticule__lines">#</a> *Graticule*.**lines**&lt;func&gt;  
-
-<a id="#Graticule__outline" name="Graticule__outline" href="#Graticule__outline">#</a> *Graticule*.**outline**&lt;func&gt;  
-
-<a id="#Graticule__precision" name="Graticule__precision" href="#Graticule__precision">#</a> *Graticule*.**precision**&lt;number&gt;  
-
-<a id="#Graticule__step" name="Graticule__step" href="#Graticule__step">#</a> *Graticule*.**step**&lt;arrayOf[object Object]&gt;  
-
-<a id="#Graticule__stepMajor" name="Graticule__stepMajor" href="#Graticule__stepMajor">#</a> *Graticule*.**stepMajor**&lt;arrayOf[object Object]&gt;  
-
-<a id="#Graticule__stepMinor" name="Graticule__stepMinor" href="#Graticule__stepMinor">#</a> *Graticule*.**stepMinor**&lt;arrayOf[object Object]&gt;  
-
-<h3 id="albers-">&lt;Albers /&gt;</h3>
-
-All props pass through to `<Projection projection="albers" {...props} />`
-
-
-<h3 id="albersusa-">&lt;AlbersUsa /&gt;</h3>
-
-All props pass through to `<Projection projection="albersUsa" {...props} />`
-
-
-<h3 id="customprojection-">&lt;CustomProjection /&gt;</h3>
-
-All props pass through to `<Projection projection={customProjection} {...props} />`
-
-
-<h3 id="equalearth-">&lt;EqualEarth /&gt;</h3>
-
-All props pass through to `<Projection projection="equalEarth" {...props} />`
-
-
-<h3 id="mercator-">&lt;Mercator /&gt;</h3>
-
-All props pass through to `<Projection projection="mercator" {...props} />`
-
-
-<h3 id="naturalearth-">&lt;NaturalEarth /&gt;</h3>
-
-All props pass through to `<Projection projection="naturalEarth" {...props} />`
-
-
-<h3 id="orthographic-">&lt;Orthographic /&gt;</h3>
-
-All props pass through to `<Projection projection="orthographic" {...props} />`
-
-
-<h3 id="projection-">&lt;Projection /&gt;</h3>
-
-Component for all projections.
-
-<a id="#Projection__center" name="Projection__center" href="#Projection__center">#</a> *Projection*.**center**&lt;array&gt;  
-
-<a id="#Projection__centroid" name="Projection__centroid" href="#Projection__centroid">#</a> *Projection*.**centroid**&lt;func&gt;  
-
-<a id="#Projection__children" name="Projection__children" href="#Projection__children">#</a> *Projection*.**children**&lt;func&gt;  
-
-<a id="#Projection__className" name="Projection__className" href="#Projection__className">#</a> *Projection*.**className**&lt;string&gt;  
-
-<a id="#Projection__clipAngle" name="Projection__clipAngle" href="#Projection__clipAngle">#</a> *Projection*.**clipAngle**&lt;number&gt;  
-
-<a id="#Projection__clipExtent" name="Projection__clipExtent" href="#Projection__clipExtent">#</a> *Projection*.**clipExtent**&lt;array&gt;  
-
-<a id="#Projection__data" name="Projection__data" href="#Projection__data">#</a> *Projection*.**data**&lt;array&gt; `required` 
-
-<a id="#Projection__fitExtent" name="Projection__fitExtent" href="#Projection__fitExtent">#</a> *Projection*.**fitExtent**&lt;array&gt;  
-
-<a id="#Projection__fitSize" name="Projection__fitSize" href="#Projection__fitSize">#</a> *Projection*.**fitSize**&lt;array&gt;  
-
-<a id="#Projection__graticule" name="Projection__graticule" href="#Projection__graticule">#</a> *Projection*.**graticule**&lt;object&gt;  
-
-<a id="#Projection__graticuleLines" name="Projection__graticuleLines" href="#Projection__graticuleLines">#</a> *Projection*.**graticuleLines**&lt;object&gt;  
-
-<a id="#Projection__graticuleOutline" name="Projection__graticuleOutline" href="#Projection__graticuleOutline">#</a> *Projection*.**graticuleOutline**&lt;object&gt;  
-
-<a id="#Projection__innerRef" name="Projection__innerRef" href="#Projection__innerRef">#</a> *Projection*.**innerRef**&lt;union(func|object)&gt;  
-
-<a id="#Projection__pointRadius" name="Projection__pointRadius" href="#Projection__pointRadius">#</a> *Projection*.**pointRadius**&lt;number&gt;  
-
-<a id="#Projection__precision" name="Projection__precision" href="#Projection__precision">#</a> *Projection*.**precision**&lt;number&gt;  
-
-<a id="#Projection__projection" name="Projection__projection" href="#Projection__projection">#</a> *Projection*.**projection**&lt;union(string|func)&gt;  <table><tr><td><strong>Default</strong></td><td>'mercator'</td></td></table>
-
-<a id="#Projection__projectionFunc" name="Projection__projectionFunc" href="#Projection__projectionFunc">#</a> *Projection*.**projectionFunc**&lt;func&gt;  
-
-<a id="#Projection__rotate" name="Projection__rotate" href="#Projection__rotate">#</a> *Projection*.**rotate**&lt;array&gt;  
-
-<a id="#Projection__scale" name="Projection__scale" href="#Projection__scale">#</a> *Projection*.**scale**&lt;number&gt;  
-
-<a id="#Projection__translate" name="Projection__translate" href="#Projection__translate">#</a> *Projection*.**translate**&lt;array&gt;