docs + stories

.storybook/config.js

@@ -2,8 +2,8 @@ import { configure } from '@storybook/react';
 
 function loadStories() {
     require('../packages/element/stories/index.stories')
-    // require('../packages/layout/stories/index.stories')
-    // require('../packages/extra/stories/index.stories')
+    require('../packages/layout/stories/index.stories')
+    require('../packages/extra/stories/index.stories')
 }
 
 configure(loadStories, module);

package.json

@@ -34,7 +34,7 @@
   "scripts": {
     "clean": "lerna clean --yes && node ./scripts/clean.js",
     "bootstrap": "npm run clean && lerna bootstrap",
-    "publish": "npm run bootstrap && npm run lint && npm run build && npm test && npm run screenshot && lerna publish --npm-tag=next --preid=next && npm publish",
+    "publish": "npm run bootstrap && npm run lint && npm run build && npm test && npm run screenshot && lerna publish --npm-tag=next --preid=next",
     "build": "npm run build:lib && npm run build:umd",
     "build:umd": "webpack && NODE_ENV=production webpack",
     "build:storybook": "build-storybook",

packages/element/README.md

@@ -6,7 +6,7 @@ Potion provides several shape primitives for constructing visualizations. They a
 
 Renders an arc shape using the D3 Arc generator.
 
-![Arc](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-Arc.png "Arc")
+![Arc](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-Arc.png "Arc")
 
 ```javascript
 import { Arc } from '@potion/element';
@@ -38,7 +38,7 @@ import { Arc } from '@potion/element';
 
 Renders an area shape using the D3 Area generator.
 
-![Area](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-Area.png "Area")
+![Area](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-Area.png "Area")
 
 ```javascript
 import { Area } from '@potion/element';
@@ -70,7 +70,7 @@ import { Area } from '@potion/element';
 
 Renders a radial area shape using the D3 Radial Area generator.
 
-<!-- ![AreaRadial](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-AreaRadial.png "AreaRadial") -->
+<!-- ![AreaRadial](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-AreaRadial.png "AreaRadial") -->
 
 ```javascript
 import { RadialArea } from '@potion/element';
@@ -84,7 +84,7 @@ import { RadialArea } from '@potion/element';
 
 Renders a circle.
 
-![Circle](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-Circle.png "Circle")
+![Circle](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-Circle.png "Circle")
 
 ```javascript
 import { Circle } from '@potion/element';
@@ -131,7 +131,7 @@ import { Group } from '@potion/element';
 
 Renders a line.
 
-![Line](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-Line.png "Line")
+![Line](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-Line.png "Line")
 
 ```javascript
 import { Line } from '@potion/element';
@@ -157,7 +157,7 @@ import { Line } from '@potion/element';
 
 Renders a radial line using the D3 radial line generator.
 
-![LineRadial](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-LineRadial.png "LineRadial")
+![LineRadial](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-LineRadial.png "LineRadial")
 
 ```javascript
 import { LineRadial } from '@potion/element';
@@ -199,7 +199,7 @@ import { LineRadial } from '@potion/element';
 
 Renders a rectangle.
 
-![Rect](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-Rect.png "Rect")
+![Rect](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-Rect.png "Rect")
 
 ```javascript
 import { Rect } from '@potion/element';
@@ -225,7 +225,7 @@ import { Rect } from '@potion/element';
 
 Renders a ribbon using the D3 Ribbon generator.
 
-![Ribbon](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-Ribbon.png "Ribbon")
+![Ribbon](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-Ribbon.png "Ribbon")
 
 ```javascript
 import { Ribbon } from '@potion/element';
@@ -286,7 +286,7 @@ import { Svg } from '@potion/element';
 
 Renders a symbol shape using the D3 symbol generator.
 
-![SymbolShape](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-SymbolShape.png "SymbolShape")
+![SymbolShape](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-SymbolShape.png "SymbolShape")
 
 ```javascript
 import { SymbolShape } from '@potion/element';
@@ -310,7 +310,7 @@ import { SymbolShape } from '@potion/element';
 
 Renders text.
 
-![Text](https://raw.githubusercontent.com/finnfiddle/potion/master/packages/element/__screenshots__/Element-Text.png "Text")
+![Text](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Element-Text.png "Text")
 
 ```javascript
 import { Text } from '@potion/element';

packages/element/stories/index.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { storiesOf, addDecorator, configure } from '@storybook/react';
+import { storiesOf, addDecorator } from '@storybook/react';
 import { initScreenshot, withScreenshot } from 'storybook-chrome-screenshot';
 
 import Svg from '../src/Svg';
@@ -48,6 +48,7 @@ storiesOf('Element', module)
           { x: 5 * 90, y1: 5 * 50 },
         ]}
         fill='black'
+        transform={{ rotate: [180, 250, 250] }}
       />
     </Svg>
   )))

packages/extra/README.md

@@ -6,23 +6,45 @@ Extra elements/effects used when visualizing data like gradients, patterns, axes
 
 Potion provides the ability to fill shapes with patterns using the third-party library [react-svg-textures](https://github.com/finnfiddle/react-svg-textures).
 
+![Pattern](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Extra-Pattern.png "Pattern")
+
 ### Example:
 
 ```javascript
-import { Svg, Rect } from '@potion/element';
+import { Svg } from '@potion/element';
 import { Pattern } from '@potion/extra';
 
 <Svg width={400} height={400}>
-  <Pattern.Lines
+  <Pattern.Paths
     id='my-pattern'
-    strokeWidth={10}
-    stroke='purple'
-    size={10}
-    orientation='diagonal'
-    background='blue'
+    d='waves'
+    stroke='black'
   />
   <circle cx={100} cy={100} r={5} fill='url(#my-pattern)' />
 </Svg>
 ```
 
-## Gradients<a class="anchor" name="extras__gradients"></a>
+## Gradients<a class="anchor" name="extras__gradients"></a>
+
+Potion provides the ability to fill shapes with linear and radial gradients. Many preset gradients are provided by [uiGradients](https://uigradients.com).
+
+![LinearGradient](https://raw.githubusercontent.com/finnfiddle/potion/lego/__screenshots__/Extra-LinearGradient.png "LinearGradient")
+
+### Example:
+
+```javascript
+import { Svg, Circle } from '@potion/element';
+import { LinearGradient } from '@potion/extra';
+
+<Svg width={400} height={400}>
+   <LinearGradient
+    id="my-gradient"
+    x1="0%"
+    y1="0%"
+    x2="0%"
+    y2="100%"
+    name="argon"
+  />
+  <Circle cx={100} cy={100} r={5} fill='url(#my-gradient)' />
+</Svg>
+```