new(vx-demo): link all docs <> examples

packages/vx-brush/Readme.md

@@ -1,5 +1,13 @@
 # @vx/brush
 
+<a title="@vx/brush npm downloads" href="https://www.npmjs.com/package/@vx/brush">
+  <img src="https://img.shields.io/npm/dm/@vx/brush.svg?style=flat-square" />
+</a>
+
+A brush allows you to select a sub-region of your chart or axis.
+
+## Installation
+
 ```
 npm install --save @vx/brush
-```
+```

packages/vx-curve/Readme.md

@@ -1,26 +1,25 @@
 # @vx/curve
 
+<a title="@vx/curve npm downloads" href="https://www.npmjs.com/package/@vx/curve">
+  <img src="https://img.shields.io/npm/dm/@vx/curve.svg?style=flat-square" />
+</a>
+
+## Installation
+
 ```
 npm install --save @vx/curve
 ```
 
 ## Overview
 
-A curve is a function that can be passed into other vx objects, mainly a LinePath to change the way the line is structured.
-
-For example, checkout the difference between a `Curve.natural`:
-
-![natural curve](https://raw.githubusercontent.com/d3/d3-shape/master/img/natural.png)
-
-and a `Curve.step`:
-
-![step curve](https://raw.githubusercontent.com/d3/d3-shape/master/img/step.png)
-
-The `@vx/curve` package is a wrapper over [d3-shape](https://github.com/d3/d3-shape) curve functions.
+The `@vx/curve` package is a wrapper of the [d3-shape](https://github.com/d3/d3-shape) curve
+functions. A `curve` is a function that can be passed into other `vx` objects that draw lines or
+paths, such as a `LinePath`, to change the way the line between points is drawn. Click on the
+example below for an interactive way to explore curve aesthetics.
 
-Any function with the prefix `curve` in d3 can be used through `vx` like so:
+Any function with the prefix `curve` in `d3` can be used through `vx` like so:
 
-``` javascript
+```javascript
 import { curveCatmullRomOpen } from '@vx/curve';
 let line = (<Shape.LinePath curve={curveCatmullRomOpen} />)
 
@@ -31,7 +30,7 @@ let line = (<Shape.LinePath curve={Curve.curveCatmullRomOpen} />)
 
 ## Functions
 
-|           vx          |                                      d3                                       |
+| vx                    | d3                                                                            |
 | --------------------- | ----------------------------------------------------------------------------- |
 | curveBasis            | [curveBasis](https://github.com/d3/d3-shape#curveBasis)                       |
 | curveBasisClose       | [curveBasisClosed](https://github.com/d3/d3-shape#curveBasisClosed)           |

packages/vx-demo/src/components/Gallery/index.tsx

@@ -82,9 +82,6 @@ const tiles = [
   ZoomITile,
 ];
 const tiltOptions = { max: 8, scale: 1 };
-const columnCount = 3;
-const emptyTileCount =
-  tiles.length % columnCount > 0 ? columnCount - (tiles.length % columnCount) : 0;
 
 export default function Gallery() {
   return (
@@ -95,16 +92,11 @@ export default function Gallery() {
             <Tile />
           </Tilt>
         ))}
-        {[...new Array(emptyTileCount)].map((_, i) => (
-          <GalleryTile key={`placeholder-${i}`} exampleRenderer={() => null} />
-        ))}
       </div>
       <style jsx>{`
         .gallery {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          justify-content: space-around;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
           overflow-x: hidden;
           padding-bottom: 20px;
         }

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

@@ -68,7 +68,7 @@ export default function GalleryTile<ExampleProps extends WidthAndHeight>({
           display: flex;
           height: 390px;
           flex: 1;
-          min-width: 25%;
+          min-width: 300px;
           flex-direction: column;
           border-radius: 14px;
         }

packages/vx-demo/src/pages/Areas.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import Show from '../components/Show';
 import Area from '../sandboxes/vx-area/Example';
 import AreaSource from '!!raw-loader!../sandboxes/vx-area/Example';
+import packageJson from '../sandboxes/vx-area/package.json';
 
 export default () => (
-  <Show component={Area} title="Areas" codeSandboxDirectoryName="vx-area">
+  <Show component={Area} title="Areas" codeSandboxDirectoryName="vx-area" packageJson={packageJson}>
     {AreaSource}
   </Show>
 );

packages/vx-demo/src/pages/BarGroup.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarGroup from '../sandboxes/vx-bargroup/Example';
 import BarGroupSource from '!!raw-loader!../sandboxes/vx-bargroup/Example';
+import packageJson from '../sandboxes/vx-bargroup/package.json';
 
 export default () => (
   <Show
@@ -10,6 +11,7 @@ export default () => (
     component={BarGroup}
     title="Bar Group"
     codeSandboxDirectoryName="vx-bargroup"
+    packageJson={packageJson}
   >
     {BarGroupSource}
   </Show>

packages/vx-demo/src/pages/BarGroupHorizontal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarGroupHorizontal from '../sandboxes/vx-bargroup-horizontal/Example';
 import BarGroupHorizontalSource from '!!raw-loader!../sandboxes/vx-bargroup-horizontal/Example';
+import packageJson from '../sandboxes/vx-bargroup-horizontal/package.json';
 
 export default () => (
   <Show
@@ -10,6 +11,7 @@ export default () => (
     component={BarGroupHorizontal}
     title="Bar Group Horizontal"
     codeSandboxDirectoryName="vx-bargroup-horizontal"
+    packageJson={packageJson}
   >
     {BarGroupHorizontalSource}
   </Show>

packages/vx-demo/src/pages/BarStack.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarStack from '../sandboxes/vx-barstack/Example';
 import BarStackSource from '!!raw-loader!../sandboxes/vx-barstack/Example';
+import packageJson from '../sandboxes/vx-barstack/package.json';
 
 export default () => (
   <Show
@@ -10,6 +11,7 @@ export default () => (
     component={BarStack}
     title="Bar Stack"
     codeSandboxDirectoryName="vx-barstack"
+    packageJson={packageJson}
   >
     {BarStackSource}
   </Show>

packages/vx-demo/src/pages/BarStackHorizontal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarStackHorizontal from '../sandboxes/vx-barstack-horizontal/Example';
 import BarStackHorizontalSource from '!!raw-loader!../sandboxes/vx-barstack-horizontal/Example';
+import packageJson from '../sandboxes/vx-barstack-horizontal/package.json';
 
 export default () => {
   return (
@@ -16,6 +17,7 @@ export default () => {
       component={BarStackHorizontal}
       title="Bar Stack Horizontal"
       codeSandboxDirectoryName="vx-barstack-horizontal"
+      packageJson={packageJson}
     >
       {BarStackHorizontalSource}
     </Show>

packages/vx-demo/src/pages/Bars.tsx

@@ -2,9 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Bars from '../sandboxes/vx-bars/Example';
 import BarsSource from '!!raw-loader!../sandboxes/vx-bars/Example';
+import packageJson from '../sandboxes/vx-bars/package.json';
 
 export default () => (
-  <Show events component={Bars} title="Bars" codeSandboxDirectoryName="vx-bars">
+  <Show
+    events
+    component={Bars}
+    title="Bars"
+    codeSandboxDirectoryName="vx-bars"
+    packageJson={packageJson}
+  >
     {BarsSource}
   </Show>
 );

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

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Brush from '../sandboxes/vx-brush/Example';
 import BrushSource from '!!raw-loader!../sandboxes/vx-brush/Example';
+import packageJson from '../sandboxes/vx-brush/package.json';
 
 export default () => (
   <Show
@@ -14,6 +15,7 @@ export default () => (
       bottom: 10,
     }}
     codeSandboxDirectoryName="vx-brush"
+    packageJson={packageJson}
   >
     {BrushSource}
   </Show>

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

@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Chord from '../sandboxes/vx-chord/Example';
 import ChordSource from '!!raw-loader!../sandboxes/vx-chord/Example';
+import packageJson from '../sandboxes/vx-chord/package.json';
 
 export default () => {
   return (
-    <Show component={Chord} title="Chords" codeSandboxDirectoryName="vx-chord">
+    <Show
+      component={Chord}
+      title="Chords"
+      codeSandboxDirectoryName="vx-chord"
+      packageJson={packageJson}
+    >
       {ChordSource}
     </Show>
   );

packages/vx-demo/src/pages/Curves.tsx

@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Lines from '../sandboxes/vx-curve/Example';
 import LinesSource from '!!raw-loader!../sandboxes/vx-curve/Example';
+import packageJson from '../sandboxes/vx-curve/package.json';
 
 export default () => {
   return (
-    <Show component={Lines} title="Curves" codeSandboxDirectoryName="vx-curve">
+    <Show
+      component={Lines}
+      title="Curves"
+      codeSandboxDirectoryName="vx-curve"
+      packageJson={packageJson}
+    >
       {LinesSource}
     </Show>
   );

packages/vx-demo/src/pages/Dendrograms.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Dendrograms from '../sandboxes/vx-dendrogram/Example';
 import DendrogramsSource from '!!raw-loader!../sandboxes/vx-dendrogram/Example';
+import packageJson from '../sandboxes/vx-dendrogram/package.json';
 
 export default () => {
   return (
@@ -16,6 +17,7 @@ export default () => {
         right: 10,
         bottom: 80,
       }}
+      packageJson={packageJson}
     >
       {DendrogramsSource}
     </Show>

packages/vx-demo/src/pages/Dots.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import Show from '../components/Show';
 import Dots from '../sandboxes/vx-dots/Example';
 import DotsSource from '!!raw-loader!../sandboxes/vx-dots/Example';
+import packageJson from '../sandboxes/vx-dots/package.json';
 
 export default () => (
-  <Show component={Dots} title="Dots" codeSandboxDirectoryName="vx-dots">
+  <Show component={Dots} title="Dots" codeSandboxDirectoryName="vx-dots" packageJson={packageJson}>
     {DotsSource}
   </Show>
 );

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

@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import DragI from '../sandboxes/vx-drag-i/Example';
 import DragISource from '!!raw-loader!../sandboxes/vx-drag-i/Example';
+import packageJson from '../sandboxes/vx-drag-i/package.json';
 
 export default () => {
   return (
-    <Show component={DragI} title="Drag I" codeSandboxDirectoryName="vx-drag-i">
+    <Show
+      component={DragI}
+      title="Drag I"
+      codeSandboxDirectoryName="vx-drag-i"
+      packageJson={packageJson}
+    >
       {DragISource}
     </Show>
   );

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

@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import DragII from '../sandboxes/vx-drag-ii/Example';
 import DragIISource from '!!raw-loader!../sandboxes/vx-drag-ii/Example';
+import packageJson from '../sandboxes/vx-drag-ii/package.json';
 
 export default () => {
   return (
-    <Show component={DragII} title="Drag II" codeSandboxDirectoryName="vx-drag-ii">
+    <Show
+      component={DragII}
+      title="Drag II"
+      codeSandboxDirectoryName="vx-drag-ii"
+      packageJson={packageJson}
+    >
       {DragIISource}
     </Show>
   );

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

@@ -2,10 +2,17 @@ import React from 'react';
 import Show from '../components/Show';
 import GeoCustom from '../sandboxes/vx-geo-custom/Example';
 import GeoCustomSource from '!!raw-loader!../sandboxes/vx-geo-custom/Example';
+import packageJson from '../sandboxes/vx-geo-custom/package.json';
 
 export default () => {
   return (
-    <Show events component={GeoCustom} title="Geo Custom" codeSandboxDirectoryName="vx-geo-custom">
+    <Show
+      events
+      component={GeoCustom}
+      title="Geo Custom"
+      codeSandboxDirectoryName="vx-geo-custom"
+      packageJson={packageJson}
+    >
       {GeoCustomSource}
     </Show>
   );

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

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import GeoMercator from '../sandboxes/vx-geo-mercator/Example';
 import GeoMercatorSource from '!!raw-loader!../sandboxes/vx-geo-mercator/Example';
+import packageJson from '../sandboxes/vx-geo-mercator/package.json';
 
 export default () => {
   return (
@@ -10,6 +11,7 @@ export default () => {
       component={GeoMercator}
       title="Geo Mercator"
       codeSandboxDirectoryName="vx-geo-mercator"
+      packageJson={packageJson}
     >
       {GeoMercatorSource}
     </Show>

packages/vx-demo/src/pages/Glyphs.tsx

@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Glyphs from '../sandboxes/vx-glyph/Example';
 import GlyphsSource from '!!raw-loader!../sandboxes/vx-glyph/Example';
+import packageJson from '../sandboxes/vx-glyph/package.json';
 
 export default () => {
   return (
-    <Show component={Glyphs} title="Glyphs" codeSandboxDirectoryName="vx-glyph">
+    <Show
+      component={Glyphs}
+      title="Glyphs"
+      codeSandboxDirectoryName="vx-glyph"
+      packageJson={packageJson}
+    >
       {GlyphsSource}
     </Show>
   );

packages/vx-demo/src/pages/Gradients.tsx

@@ -2,9 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Gradients from '../sandboxes/vx-gradient/Example';
 import GradientsSource from '!!raw-loader!../sandboxes/vx-gradient/Example';
+import packageJson from '../sandboxes/vx-gradient/package.json';
 
 export default () => (
-  <Show shadow component={Gradients} title="Gradients" codeSandboxDirectoryName="vx-gradient">
+  <Show
+    shadow
+    component={Gradients}
+    title="Gradients"
+    codeSandboxDirectoryName="vx-gradient"
+    packageJson={packageJson}
+  >
     {GradientsSource}
   </Show>
 );

packages/vx-demo/src/pages/Heatmaps.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Heatmaps from '../sandboxes/vx-heatmap/Example';
 import HeatmapsSource from '!!raw-loader!../sandboxes/vx-heatmap/Example';
+import packageJson from '../sandboxes/vx-heatmap/package.json';
 
 export default () => {
   return (
@@ -16,6 +17,7 @@ export default () => {
       component={Heatmaps}
       title="Heatmaps"
       codeSandboxDirectoryName="vx-heatmap"
+      packageJson={packageJson}
     >
       {HeatmapsSource}
     </Show>