fix(): update logic in generator (#2)

* wip

* add storybooks

* add react and react-dom for dev

* add jazzicon story

* yarn add --dev @storybook/addon-knobs/register

* add knobs addon

* update jazzicon story file

* wip

* add jsNumberForAddress

* update readme

* fixes

* update stories

* bump version to 0.0.2

* bump version to 0.1.0

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

README.md

@@ -22,6 +22,22 @@ export default class App extends React.Component {
 }
 ```
 
+for Ethereum addresses
+```js
+import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
+
+export default class App extends React.Component {
+
+  …
+
+  render() {
+    return (
+      <Jazzicon diameter={100} seed={jsNumberForAddress('0x1111111111111111111111111111111111111111')} />
+    )
+  }
+}
+```
+
 # setup
 
 ```sh

package.json

@@ -1,12 +1,14 @@
 {
   "name": "react-jazzicon",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "React component for danfinlay/jazzicon",
   "main": "lib/index.js",
   "scripts": {
     "build": "rimraf lib && mkdir lib && babel src -d lib",
     "prepublish": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -28,6 +30,11 @@
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-knobs": "^3.4.8",
+    "@storybook/addon-links": "^3.4.8",
+    "@storybook/addons": "^3.4.8",
+    "@storybook/react": "^3.4.8",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-jest": "^21.0.2",
@@ -36,6 +43,9 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.26.0",
+    "babel-runtime": "^6.26.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
     "rimraf": "^2.6.2"
   },
   "peerDependencies": {

src/Jazzicon.js

@@ -11,17 +11,10 @@ const svgns = 'http://www.w3.org/2000/svg';
 const wobble = 30;
 
 export default class Jazzicon extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    const { seed } = this.props;
-
-    this.generator = new MersenneTwister(seed);
-  }
-
   genColor = (colors) => {
+    const rand = this.generator.random();
     const idx = Math.floor(colors.length * this.generator.random());
-    const color = colors.splice(idx,1)[0];
+    const color = colors.splice(idx, 1)[0];
     return color;
   }
 
@@ -34,7 +27,7 @@ export default class Jazzicon extends React.PureComponent {
     });
   }
 
-  genShape = (remainingColors, diameter, i, total, svg) => {
+  genShape = (remainingColors, diameter, i, total) => {
     const center = diameter / 2;
     const firstRot = this.generator.random();
     const angle = Math.PI * 2 * firstRot;
@@ -61,13 +54,15 @@ export default class Jazzicon extends React.PureComponent {
         width={diameter}
         transform={transform}
         fill={fill} // todo: make prop
-      >
-      </rect>
-    )
+      />
+    );
   }
 
   render() {
-    const { diameter, paperStyles, svgStyles } = this.props;
+    const { diameter, paperStyles, seed, svgStyles } = this.props;
+
+    this.generator = new MersenneTwister(seed);
+
     const remainingColors = this.hueShift(colors.slice(), this.generator);
     const shapesArr = Array(shapeCount).fill();
 

src/index.js

@@ -1,3 +1,5 @@
 import Jazzicon from './Jazzicon';
+import jsNumberForAddress from './jsNumberForAddress';
 
 export default Jazzicon;
+export { jsNumberForAddress };

src/jsNumberForAddress.js

@@ -0,0 +1,6 @@
+export default function jsNumberForAddress (address) {
+  const addr = address.slice(2, 10);
+  const seed = parseInt(addr, 16);
+
+  return seed;
+}

stories/index.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+import { linkTo } from '@storybook/addon-links';
+
+import Jazzicon, { jsNumberForAddress } from '../src';
+
+const stories = storiesOf('Jazzicon', module);
+
+// Add the `withKnobs` decorator to add knobs support to your stories.
+// You can also configure `withKnobs` as a global decorator.
+stories.addDecorator(withKnobs);
+
+// Knobs for React props
+stories.add('default', () => (
+  <Jazzicon diameter={100} seed={text('seed', jsNumberForAddress('0x1111111111111111111111111111111111111111'))} />
+));