Merge pull request #11 from bitjourney/react-storybook

Add React storybook

.eslintrc.json

@@ -7,10 +7,11 @@
     "import"
   ],
   "rules": {
-    "arrow-body-style": 0
+    "arrow-body-style": 0,
+    "react/jsx-closing-bracket-location": 0
   },
   "env": {
     "es6": true,
     "mocha": true
   }
-}
+}

.gitignore

@@ -21,4 +21,4 @@ npm-debug.log
 
 # app
 lib
-
+build

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure, addDecorator } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories/image.jsx');
+}
+
+configure(loadStories, module);

.vscode/settings.json

@@ -2,9 +2,7 @@
   "editor.renderWhitespace": "all",
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
-
   "files.trimTrailingWhitespace": true,
   "files.autoSave": "onFocusChange",
-
   "eslint.autoFixOnSave": true
 }

package.json

@@ -8,6 +8,8 @@
     "build": "babel src --out-dir lib --source-maps",
     "test": "nyc mocha --opts spec/mocha.opts spec/**/*.spec.jsx",
     "coveralls": "nyc report --reporter=text-lcov | $(npm bin)/coveralls",
+    "story:start": "start-storybook -p 9001 -c .storybook",
+    "story:build": "build-storybook -c .storybook -o build",
     "prepublish": "yarnpkg build"
   },
   "files": [
@@ -28,6 +30,7 @@
   },
   "homepage": "https://github.com/bitjourney/react-simple-image#readme",
   "devDependencies": {
+    "@kadira/storybook": "^2.35.2",
     "babel-cli": "^6.14.0",
     "babel-plugin-istanbul": "^3.0.0",
     "babel-preset-es2015": "^6.18.0",

src/image.jsx

@@ -56,7 +56,7 @@ export default class Image extends React.Component {
         src={this.props.src}
         srcSet={this.buildSrcSet()}
         sizes={this.buildSizes()}
-      />
+        />
     );
   }
 }

stories/image.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { storiesOf } from '@kadira/storybook';
+import Image from '../src/image';
+import photo1x from './images/astronaut.jpg';
+import photo2x from './images/astronaut@2x.jpg';
+import photo300 from './images/react-300.png';
+import photo900 from './images/react-900.png';
+
+storiesOf('<Image />', module)
+  .addDecorator(story => (
+    <div style={{ textAlign: 'center' }}>
+      {story()}
+    </div>
+  ))
+  .add('with pixel descriptor', () => (
+    <div>
+      <Image
+        alt="react-simple-image storybook component"
+        src={photo1x}
+        className="additional-className"
+        srcSet={{
+          '1x': photo1x,
+          '2x': photo2x,
+        }}
+        />
+      <p>License: CC0 1.0 Universal (CC0 1.0) Public Domain Dedication</p>
+      <p><a href="https://visualhunt.com/photo/15033/close-up-of-astronaut-in-space/">Visual Hunt</a></p>
+    </div>
+  ))
+  .add('with width descriptor', () => (
+    <div>
+      <Image
+        alt="react-simple-image storybook component"
+        src={photo300}
+        className="additional-className"
+        srcSet={{
+          '300w': photo300,
+          '900w': photo900,
+        }}
+        sizes={[
+          { size: '100vw', mediaCondition: '(max-width: 480px)' },
+          { size: '50vw', mediaCondition: '(max-width: 1200px)' },
+          { size: 'calc(33vw - 100px)' },
+        ]}
+        />
+      <p>License: <a href="https://facebook.github.io/react/">React</a></p>
+    </div>
+  ));