Merge pull request #399 from hshoff/harry-docgen

[docs] generate api docs from prop-types, sync to website
airbnb · Jan 4, 2019 · ceee076 · ceee076
2 parents adbd586 + 180edf0
commit ceee076
Show file tree

Hide file tree

Showing 219 changed files with 12,745 additions and 5,164 deletions.
diff --git a/package.json b/package.json
@@ -5,8 +5,10 @@
   "main": "index.js",
   "scripts": {
     "test": "lerna bootstrap && lerna exec npm run test",
-    "docs": "node ./scripts/docs/index.js",
-    "prepare-release": "git checkout master && git pull --rebase origin master && npm run docs && lerna updated",
+    "docs": "npm run docs:gen && node ./scripts/docs/index.js",
+    "docs:gen": "lerna run docs",
+    "prepare-release":
+      "git checkout master && git pull --rebase origin master && npm run docs && lerna updated",
     "release": "npm run prepare-release && lerna publish --exact",
     "lint": "eslint \"packages/**/*.js\" --config \"./.eslintrc\"",
     "lint:fix": "eslint \"packages/**/*.js\" --config \"./.eslintrc\" --fix",
@@ -21,32 +23,16 @@
     "singleQuote": true
   },
   "lint-staged": {
-    "*.js": [
-      "prettier-eslint --write",
-      "git add"
-    ]
+    "*.js": ["prettier-eslint --write", "git add"]
   },
   "jest": {
-    "projects": [
-      "<rootDir>/packages/*"
-    ],
+    "projects": ["<rootDir>/packages/*"],
     "collectCoverage": true,
     "coverageDirectory": "<rootDir>/coverage",
-    "coveragePathIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "coverageReporters": [
-      "text",
-      "lcov"
-    ]
+    "coveragePathIgnorePatterns": ["/node_modules/"],
+    "coverageReporters": ["text", "lcov"]
   },
-  "keywords": [
-    "react",
-    "d3",
-    "visualization",
-    "vx",
-    "charts"
-  ],
+  "keywords": ["react", "d3", "visualization", "vx", "charts"],
   "author": "@hshoff",
   "license": "MIT",
   "devDependencies": {
@@ -66,6 +52,7 @@
     "prettier": "^1.12.1",
     "prettier-eslint-cli": "^4.7.1",
     "react": "^15.0.0-0 || ^16.0.0-0",
+    "react-docgen": "^2.21.0",
     "react-dom": "^15.0.0-0 || ^16.0.0-0",
     "regenerator-runtime": "^0.10.5"
   }

diff --git a/packages/vx-annotation/Readme.md b/packages/vx-annotation/Readme.md
@@ -1,59 +1,93 @@
 # @vx/annotation
 
+<p>
+  <a title="@vx/annotation npm downloads" href="https://www.npmjs.com/package/@vx/annotation">
+    <img src="https://img.shields.io/npm/dm/@vx/annotation.svg?style=flat-square" />
+  </a>
+</p>
+
 **Status**
 
 We recommend using [react-annotation](http://react-annotation.susielu.com/) by @susielu. This package is a work in progress. In the future we may make some helpers built on top of react-annotation.
 
+
+## Installation
+
 ```
 npm install --save @vx/annotation
 ```
 
-## LinePathAnnotation
-
-Line Path Annotations add a bit of text and a line coming from a point. They're useful for adding info to your graphs.
-
-``` javascript
-import { LinePathAnnotation } from '@vx/annotation';
-// or
-// import * as Annotation from '@vx/annotation'; 
-// <Annotation.LinePathAnnotation />
-
-const annotation = (
-  <LinePathAnnotation
-    label={'expected from deploy'}
-    stroke={'white'}
-    labelFill={'white'}
-    labelStroke={'none'}
-    labelStrokeWidth={2}
-    points={[
-      annotationPoint,
-      new Point({
-        x: annotationPoint.x + (width / allData.length),
-        y: annotationPoint.y - (height / allData.length),
-      })
-    ]}
-  />
-);
-```
 
-![image output](http://i.imgur.com/o5jnHFS.png)
-
-## Properties
-
-|         Name         |  Default   |  Type  |                                              Description                                               |
-|:-------------------- |:---------- |:------ |:------------------------------------------------------------------------------------------------------ |
-| top                  | 0          | number | Margin on top                                                                                          |
-| left                 | 0          | number | Margin on left                                                                                         |
-| points               |            | array  | Points describing the line path                                                                        |
-| stroke               | black      | string | The color of the line                                                                                  |
-| strokeWidth          | 1          | number | The pixel width of the line                                                                            |
-| className            |            | string | The class name associated of the LinePath shape                                                        |
-| label                |            | string | The text for your label                                                                                |
-| labelAnchor          | left       | string | The label's textAnchor                                                                                 |
-| labelDx              | 0          | number | The x-coordinate shift to the label                                                                    |
-| labelDy              | 0          | number | The y-coordinate shift to the label                                                                    |
-| labelFill            | <stroke>   | string | The color of label. Defaults to the stroke color                                                       |
-| labelFontSize        | 10         | number | The font size of the label text                                                                        |
-| labelStroke          | white      | string | The color of the label                                                                                 |
-| labelStrokeWidth     | 3          | number | The stroke width of the label text                                                                     |
-| labelPaintOrder      | stroke     | string | The label's SVG [paint-order](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order). |
+## Components
+
+
+
+  - [LinePathAnnotation](#linepathannotation-)
+
+## API
+
+
+
+<h3 id="linepathannotation-">&lt;LinePathAnnotation /&gt;</h3>
+
+
+
+<a id="#LinePathAnnotation__className" name="LinePathAnnotation__className" href="#LinePathAnnotation__className">#</a> *LinePathAnnotation*.**className**&lt;string&gt; 
+
+Add a class name to the line path. 
+
+<a id="#LinePathAnnotation__label" name="LinePathAnnotation__label" href="#LinePathAnnotation__label">#</a> *LinePathAnnotation*.**label**&lt;string&gt; 
+
+The text for your label. 
+
+<a id="#LinePathAnnotation__labelAnchor" name="LinePathAnnotation__labelAnchor" href="#LinePathAnnotation__labelAnchor">#</a> *LinePathAnnotation*.**labelAnchor**&lt;enum('start'|'middle'|'end')&gt; 
+
+The label's textAnchor. <table><tr><td><strong>Default</strong></td><td>'middle'</td></td></table>
+
+<a id="#LinePathAnnotation__labelDx" name="LinePathAnnotation__labelDx" href="#LinePathAnnotation__labelDx">#</a> *LinePathAnnotation*.**labelDx**&lt;number&gt; 
+
+The x-coordinate shift to the label. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__labelDy" name="LinePathAnnotation__labelDy" href="#LinePathAnnotation__labelDy">#</a> *LinePathAnnotation*.**labelDy**&lt;number&gt; 
+
+The y-coordinate shift to the label <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__labelFill" name="LinePathAnnotation__labelFill" href="#LinePathAnnotation__labelFill">#</a> *LinePathAnnotation*.**labelFill**&lt;string&gt; 
+
+The color of label. Defaults to *props*.**stroke**. 
+
+<a id="#LinePathAnnotation__labelFontSize" name="LinePathAnnotation__labelFontSize" href="#LinePathAnnotation__labelFontSize">#</a> *LinePathAnnotation*.**labelFontSize**&lt;number&gt; 
+
+The font size of the label text. <table><tr><td><strong>Default</strong></td><td>10</td></td></table>
+
+<a id="#LinePathAnnotation__labelPaintOrder" name="LinePathAnnotation__labelPaintOrder" href="#LinePathAnnotation__labelPaintOrder">#</a> *LinePathAnnotation*.**labelPaintOrder**&lt;string&gt; 
+
+The label's SVG [paint-order](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order). <table><tr><td><strong>Default</strong></td><td>'stroke'</td></td></table>
+
+<a id="#LinePathAnnotation__labelStroke" name="LinePathAnnotation__labelStroke" href="#LinePathAnnotation__labelStroke">#</a> *LinePathAnnotation*.**labelStroke**&lt;string&gt; 
+
+The color of the label. <table><tr><td><strong>Default</strong></td><td>'white'</td></td></table>
+
+<a id="#LinePathAnnotation__labelStrokeWidth" name="LinePathAnnotation__labelStrokeWidth" href="#LinePathAnnotation__labelStrokeWidth">#</a> *LinePathAnnotation*.**labelStrokeWidth**&lt;number&gt; 
+
+The stroke width of the label text. <table><tr><td><strong>Default</strong></td><td>3</td></td></table>
+
+<a id="#LinePathAnnotation__left" name="LinePathAnnotation__left" href="#LinePathAnnotation__left">#</a> *LinePathAnnotation*.**left**&lt;number&gt; 
+
+A left pixel offset applied to the entire bar group. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__points" name="LinePathAnnotation__points" href="#LinePathAnnotation__points">#</a> *LinePathAnnotation*.**points**&lt;array&gt; 
+
+An array of points describing the line path. <table><tr><td><strong>Default</strong></td><td>[]</td></td></table>
+
+<a id="#LinePathAnnotation__stroke" name="LinePathAnnotation__stroke" href="#LinePathAnnotation__stroke">#</a> *LinePathAnnotation*.**stroke**&lt;string&gt; 
+
+The color of the line. <table><tr><td><strong>Default</strong></td><td>'black'</td></td></table>
+
+<a id="#LinePathAnnotation__strokeWidth" name="LinePathAnnotation__strokeWidth" href="#LinePathAnnotation__strokeWidth">#</a> *LinePathAnnotation*.**strokeWidth**&lt;number&gt; 
+
+The pixel width of the line. <table><tr><td><strong>Default</strong></td><td>1</td></td></table>
+
+<a id="#LinePathAnnotation__top" name="LinePathAnnotation__top" href="#LinePathAnnotation__top">#</a> *LinePathAnnotation*.**top**&lt;number&gt; 
+
+A top pixel offset applied to the entire bar group. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
diff --git a/packages/vx-annotation/docs/api.md b/packages/vx-annotation/docs/api.md
@@ -0,0 +1,63 @@
+<h3 id="linepathannotation-">&lt;LinePathAnnotation /&gt;</h3>
+
+
+
+<a id="#LinePathAnnotation__className" name="LinePathAnnotation__className" href="#LinePathAnnotation__className">#</a> *LinePathAnnotation*.**className**&lt;string&gt; 
+
+Add a class name to the line path. 
+
+<a id="#LinePathAnnotation__label" name="LinePathAnnotation__label" href="#LinePathAnnotation__label">#</a> *LinePathAnnotation*.**label**&lt;string&gt; 
+
+The text for your label. 
+
+<a id="#LinePathAnnotation__labelAnchor" name="LinePathAnnotation__labelAnchor" href="#LinePathAnnotation__labelAnchor">#</a> *LinePathAnnotation*.**labelAnchor**&lt;enum('start'|'middle'|'end')&gt; 
+
+The label's textAnchor. <table><tr><td><strong>Default</strong></td><td>'middle'</td></td></table>
+
+<a id="#LinePathAnnotation__labelDx" name="LinePathAnnotation__labelDx" href="#LinePathAnnotation__labelDx">#</a> *LinePathAnnotation*.**labelDx**&lt;number&gt; 
+
+The x-coordinate shift to the label. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__labelDy" name="LinePathAnnotation__labelDy" href="#LinePathAnnotation__labelDy">#</a> *LinePathAnnotation*.**labelDy**&lt;number&gt; 
+
+The y-coordinate shift to the label <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__labelFill" name="LinePathAnnotation__labelFill" href="#LinePathAnnotation__labelFill">#</a> *LinePathAnnotation*.**labelFill**&lt;string&gt; 
+
+The color of label. Defaults to *props*.**stroke**. 
+
+<a id="#LinePathAnnotation__labelFontSize" name="LinePathAnnotation__labelFontSize" href="#LinePathAnnotation__labelFontSize">#</a> *LinePathAnnotation*.**labelFontSize**&lt;number&gt; 
+
+The font size of the label text. <table><tr><td><strong>Default</strong></td><td>10</td></td></table>
+
+<a id="#LinePathAnnotation__labelPaintOrder" name="LinePathAnnotation__labelPaintOrder" href="#LinePathAnnotation__labelPaintOrder">#</a> *LinePathAnnotation*.**labelPaintOrder**&lt;string&gt; 
+
+The label's SVG [paint-order](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order). <table><tr><td><strong>Default</strong></td><td>'stroke'</td></td></table>
+
+<a id="#LinePathAnnotation__labelStroke" name="LinePathAnnotation__labelStroke" href="#LinePathAnnotation__labelStroke">#</a> *LinePathAnnotation*.**labelStroke**&lt;string&gt; 
+
+The color of the label. <table><tr><td><strong>Default</strong></td><td>'white'</td></td></table>
+
+<a id="#LinePathAnnotation__labelStrokeWidth" name="LinePathAnnotation__labelStrokeWidth" href="#LinePathAnnotation__labelStrokeWidth">#</a> *LinePathAnnotation*.**labelStrokeWidth**&lt;number&gt; 
+
+The stroke width of the label text. <table><tr><td><strong>Default</strong></td><td>3</td></td></table>
+
+<a id="#LinePathAnnotation__left" name="LinePathAnnotation__left" href="#LinePathAnnotation__left">#</a> *LinePathAnnotation*.**left**&lt;number&gt; 
+
+A left pixel offset applied to the entire bar group. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__points" name="LinePathAnnotation__points" href="#LinePathAnnotation__points">#</a> *LinePathAnnotation*.**points**&lt;array&gt; 
+
+An array of points describing the line path. <table><tr><td><strong>Default</strong></td><td>[]</td></td></table>
+
+<a id="#LinePathAnnotation__stroke" name="LinePathAnnotation__stroke" href="#LinePathAnnotation__stroke">#</a> *LinePathAnnotation*.**stroke**&lt;string&gt; 
+
+The color of the line. <table><tr><td><strong>Default</strong></td><td>'black'</td></td></table>
+
+<a id="#LinePathAnnotation__strokeWidth" name="LinePathAnnotation__strokeWidth" href="#LinePathAnnotation__strokeWidth">#</a> *LinePathAnnotation*.**strokeWidth**&lt;number&gt; 
+
+The pixel width of the line. <table><tr><td><strong>Default</strong></td><td>1</td></td></table>
+
+<a id="#LinePathAnnotation__top" name="LinePathAnnotation__top" href="#LinePathAnnotation__top">#</a> *LinePathAnnotation*.**top**&lt;number&gt; 
+
+A top pixel offset applied to the entire bar group. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
diff --git a/packages/vx-annotation/docs/description.md b/packages/vx-annotation/docs/description.md
@@ -0,0 +1,11 @@
+# @vx/annotation
+
+<p>
+  <a title="@vx/annotation npm downloads" href="https://www.npmjs.com/package/@vx/annotation">
+    <img src="https://img.shields.io/npm/dm/@vx/annotation.svg?style=flat-square" />
+  </a>
+</p>
+
+**Status**
+
+We recommend using [react-annotation](http://react-annotation.susielu.com/) by @susielu. This package is a work in progress. In the future we may make some helpers built on top of react-annotation.
diff --git a/packages/vx-annotation/docs/docs.md b/packages/vx-annotation/docs/docs.md
@@ -0,0 +1,93 @@
+# @vx/annotation
+
+<p>
+  <a title="@vx/annotation npm downloads" href="https://www.npmjs.com/package/@vx/annotation">
+    <img src="https://img.shields.io/npm/dm/@vx/annotation.svg?style=flat-square" />
+  </a>
+</p>
+
+**Status**
+
+We recommend using [react-annotation](http://react-annotation.susielu.com/) by @susielu. This package is a work in progress. In the future we may make some helpers built on top of react-annotation.
+
+
+## Installation
+
+```
+npm install --save @vx/annotation
+```
+
+
+## Components
+
+
+
+  - [LinePathAnnotation](#linepathannotation-)
+
+## API
+
+
+
+<h3 id="linepathannotation-">&lt;LinePathAnnotation /&gt;</h3>
+
+
+
+<a id="#LinePathAnnotation__className" name="LinePathAnnotation__className" href="#LinePathAnnotation__className">#</a> *LinePathAnnotation*.**className**&lt;string&gt; 
+
+Add a class name to the line path. 
+
+<a id="#LinePathAnnotation__label" name="LinePathAnnotation__label" href="#LinePathAnnotation__label">#</a> *LinePathAnnotation*.**label**&lt;string&gt; 
+
+The text for your label. 
+
+<a id="#LinePathAnnotation__labelAnchor" name="LinePathAnnotation__labelAnchor" href="#LinePathAnnotation__labelAnchor">#</a> *LinePathAnnotation*.**labelAnchor**&lt;enum('start'|'middle'|'end')&gt; 
+
+The label's textAnchor. <table><tr><td><strong>Default</strong></td><td>'middle'</td></td></table>
+
+<a id="#LinePathAnnotation__labelDx" name="LinePathAnnotation__labelDx" href="#LinePathAnnotation__labelDx">#</a> *LinePathAnnotation*.**labelDx**&lt;number&gt; 
+
+The x-coordinate shift to the label. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__labelDy" name="LinePathAnnotation__labelDy" href="#LinePathAnnotation__labelDy">#</a> *LinePathAnnotation*.**labelDy**&lt;number&gt; 
+
+The y-coordinate shift to the label <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__labelFill" name="LinePathAnnotation__labelFill" href="#LinePathAnnotation__labelFill">#</a> *LinePathAnnotation*.**labelFill**&lt;string&gt; 
+
+The color of label. Defaults to *props*.**stroke**. 
+
+<a id="#LinePathAnnotation__labelFontSize" name="LinePathAnnotation__labelFontSize" href="#LinePathAnnotation__labelFontSize">#</a> *LinePathAnnotation*.**labelFontSize**&lt;number&gt; 
+
+The font size of the label text. <table><tr><td><strong>Default</strong></td><td>10</td></td></table>
+
+<a id="#LinePathAnnotation__labelPaintOrder" name="LinePathAnnotation__labelPaintOrder" href="#LinePathAnnotation__labelPaintOrder">#</a> *LinePathAnnotation*.**labelPaintOrder**&lt;string&gt; 
+
+The label's SVG [paint-order](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order). <table><tr><td><strong>Default</strong></td><td>'stroke'</td></td></table>
+
+<a id="#LinePathAnnotation__labelStroke" name="LinePathAnnotation__labelStroke" href="#LinePathAnnotation__labelStroke">#</a> *LinePathAnnotation*.**labelStroke**&lt;string&gt; 
+
+The color of the label. <table><tr><td><strong>Default</strong></td><td>'white'</td></td></table>
+
+<a id="#LinePathAnnotation__labelStrokeWidth" name="LinePathAnnotation__labelStrokeWidth" href="#LinePathAnnotation__labelStrokeWidth">#</a> *LinePathAnnotation*.**labelStrokeWidth**&lt;number&gt; 
+
+The stroke width of the label text. <table><tr><td><strong>Default</strong></td><td>3</td></td></table>
+
+<a id="#LinePathAnnotation__left" name="LinePathAnnotation__left" href="#LinePathAnnotation__left">#</a> *LinePathAnnotation*.**left**&lt;number&gt; 
+
+A left pixel offset applied to the entire bar group. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
+
+<a id="#LinePathAnnotation__points" name="LinePathAnnotation__points" href="#LinePathAnnotation__points">#</a> *LinePathAnnotation*.**points**&lt;array&gt; 
+
+An array of points describing the line path. <table><tr><td><strong>Default</strong></td><td>[]</td></td></table>
+
+<a id="#LinePathAnnotation__stroke" name="LinePathAnnotation__stroke" href="#LinePathAnnotation__stroke">#</a> *LinePathAnnotation*.**stroke**&lt;string&gt; 
+
+The color of the line. <table><tr><td><strong>Default</strong></td><td>'black'</td></td></table>
+
+<a id="#LinePathAnnotation__strokeWidth" name="LinePathAnnotation__strokeWidth" href="#LinePathAnnotation__strokeWidth">#</a> *LinePathAnnotation*.**strokeWidth**&lt;number&gt; 
+
+The pixel width of the line. <table><tr><td><strong>Default</strong></td><td>1</td></td></table>
+
+<a id="#LinePathAnnotation__top" name="LinePathAnnotation__top" href="#LinePathAnnotation__top">#</a> *LinePathAnnotation*.**top**&lt;number&gt; 
+
+A top pixel offset applied to the entire bar group. <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
diff --git a/packages/vx-annotation/docs/install.md b/packages/vx-annotation/docs/install.md
@@ -0,0 +1,5 @@
+## Installation
+
+```
+npm install --save @vx/annotation
+```