#1 Added Storybook

.gitignore

@@ -1 +1,2 @@
-.idea
+.idea
+/dist/

.npmignore

@@ -1,4 +1,6 @@
 src
 .npmignore
 .idea
-.babelrc
+.babelrc
+stories
+.storybook

.storybook/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-runtime"]
+}

.storybook/config.js

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

package.json

@@ -9,7 +9,8 @@
     "build": "yarn run clean && yarn run compile",
     "yarn-publish": "yarn run build && yarn publish",
     "test": "mocha ./test --compilers js:babel-register --require babel-polyfill",
-    "coverage": "babel-node ./node_modules/.bin/isparta cover _mocha"
+    "coverage": "babel-node ./node_modules/.bin/isparta cover _mocha",
+    "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "repository": "git+https://github.com/BlackBoxVision/styled-animation.git",
   "keywords": [
@@ -28,13 +29,16 @@
     "styled-components": "^2.0.0"
   },
   "devDependencies": {
+    "@storybook/react": "^3.1.3",
     "babel-cli": "^6.22.2",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-babili": "^0.0.10",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-stage-0": "^6.22.0",
     "babel-register": "^6.23.0",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "rimraf": "^2.5.4"
   }
 }

stories/Animation.stories.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Animation } from '../src';
+
+const animationList = [
+    "bouceOut",
+    "bounce",
+    "bounceIn",
+    "bounceInDown",
+    "bounceInLeft",
+    "bounceInRight",
+    "bounceInUp",
+    "bounceOutDown",
+    "bounceOutLeft",
+    "bounceOutRight",
+    "bounceOutUp",
+    "fadeIn",
+    "fadeInDown",
+    "fadeInDownBig",
+    "fadeInLeft",
+    "fadeInLeftBig",
+    "fadeInRight",
+    "fadeInRightBig",
+    "fadeInUp",
+    "fadeInUpBig",
+    "fadeOut",
+    "fadeOutDown",
+    "fadeOutDownBig",
+    "fadeOutLeft",
+    "fadeOutLeftBig",
+    "fadeOutRight",
+    "fadeOutRightBig",
+    "fadeOutUp",
+    "fadeOutUpBig",
+    "flash",
+    "flip",
+    "flipInX",
+    "flipInY",
+    "flipOutX",
+    "flipOutY",
+    "headShake",
+    "hinge",
+    "jello",
+    "lightSpeedIn",
+    "lightSpeedOut",
+    "pulse",
+    "rollIn",
+    "rollOut",
+    "rotateIn",
+    "rotateInDownLeft",
+    "rotateInDownRight",
+    "rotateInUpLeft",
+    "rotateInUpRight",
+    "rotateOut",
+    "rotateOutDownLeft",
+    "rotateOutDownRight",
+    "rotateOutUpLeft",
+    "rotateOutUpRight",
+    "rubberBand",
+    "shake",
+    "slideInDown",
+    "slideInLeft",
+    "slideInRight",
+    "slideInUp",
+    "slideOutDown",
+    "slideOutLeft",
+    "slideOutRight",
+    "slideOutUp",
+    "swing",
+    "tada",
+    "wobble",
+    "zoomIn",
+    "zoomInDown",
+    "zoomInLeft",
+    "zoomInRight",
+    "zoomInUp",
+    "zoomOut",
+    "zoomOutDown",
+    "zoomOutLeft",
+    "zoomOutRight",
+    "zoomOutUp"
+];
+
+const stories = storiesOf('Animation', module);
+
+animationList.forEach(animation => stories.add(animation, () => (
+    <div style={{textAlign: "center", paddingTop: "200px"}}>
+        <Animation name={animation}>
+            Hey!, i'm animated
+        </Animation>
+    </div>
+)));
+