Use AddInfo plugin in storybook

Author: Amir Tocker

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure, setAddon } from '@kadira/storybook';
+import infoAddon from '@kadira/react-storybook-addon-info';
+function loadStories() {
+  require('../stories');
+}
+setAddon(infoAddon);
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,18 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add addional webpack configurations.
+// For more information refer the docs: https://goo.gl/qPbSyX
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    loaders: [
+      // add your custom loaders.
+    ],
+  },
+};

package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/CloudinaryLtd/cloudinary_react#readme",
   "devDependencies": {
+    "@kadira/react-storybook-addon-info": "^3.2.1",
     "@kadira/storybook": "^2.5.2",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",

stories/index.js

@@ -6,65 +6,82 @@ import CloudinaryContext from '../src/components/CloudinaryContext';
 import cloudinary from 'cloudinary-core';
 
 storiesOf('Image', module)
-  .add('image', ()=> {
+  .addWithInfo('image', "Basic tag", ()=> {
     let t = { width: 0.5, crop: "scale"};
     return (
     <Image cloudName="demo" publicId="sample" transformation={t}/>
   )})
-  .add('image with alt', ()=> {
+  .addWithInfo('image with alt', "Demostrate using an img tag attribute", ()=> {
     let t = { width: 0.5, crop: "scale"};
     return(
       <Image cloudName="demo" publicId="does-not-exist" alt="This image is intentionally missing" transformation={t}/>
     )
   })
-  .add('image with html attributes', ()=> {
+  .addWithInfo('image with html attributes', 'image with html attributes', ()=> {
     return(
       <Image cloudName="demo" publicId="sample"  html_width="100"/>
     )
   })
-  .add('image with style', ()=> {
+  .addWithInfo('image with style', 'image with style', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return(
-      <Image cloudName="demo" publicId="sample" style={{border: "20px solid"}} transformation={t}/>
+      <Image cloudName="demo" publicId="sample" style={{border: "20px solid"}}  />
+    )
+  }).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
+    let t = { width: 0.5, crop: "scale"};
+    return(<div>
+      <Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10" transformation={[{width:100, crop:"crop"}, {width:100, angle: -10, crop: "scale"}]}  />
+      <Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10" />
+      </div>
+    )
+  }).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
+    let t = { width: 0.5, crop: "scale"};
+    return(<div>
+      <Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10">
+        <Transformation width="100" crop="scale" angle="10"/>
+        <Transformation width="100" crop="scale" angle="10"/>
+      </Image>
+      <Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10" />
+      </div>
     )
   });
 storiesOf('Video', module)
-  .add('Simple tag', ()=> {
+  .addWithInfo('Simple tag', 'Simple tag', ()=> {
     return (
       <Video cloudName="demo" controls publicId="dog"/>
     )
-  }).add('With fallback', ()=> {
+  }).addWithInfo('With fallback', 'With fallback', ()=> {
     return (
       <Video cloudName="demo" controls="controls" publicId="dog" fallback="Cannot display video"/>
     )
-  }).add('With inline fallback', ()=> {
+  }).addWithInfo('With inline fallback', 'With inline fallback', ()=> {
     return (
       <Video cloudName="demo" controls="controls" publicId="dog" >
         Cannot display <b>video</b>.
       </Video>
     )
-  }).add('With source types', ()=> {
+  }).addWithInfo('With source types', 'With source types', ()=> {
     return (
       <Video cloudName="demo" controls="controls" publicId="dog" sourceTypes={['webm', 'ogv', 'mp4']}>
         Cannot display video.
       </Video>
     )
-  }).add('Simple tag with width', ()=> {
+  }).addWithInfo('Simple tag with width', 'Simple tag with width', ()=> {
     return (
       <Video cloudName="demo" controls publicId="dog" width="300" crop="scale"/>
     )
-  }).add('Simple tag with poster url', ()=> {
+  }).addWithInfo('Simple tag with poster url', 'Simple tag with poster url', ()=> {
     let url = cloudinary.Cloudinary.new({cloud_name: "demo"}).url("sample", {width:300, crop: "scale"});
     return (
       <Video cloudName="demo" controls publicId="dog" width="300" crop="scale" poster={url}/>
     )
-  }).add('Simple tag with poster object', ()=> {
+  }).addWithInfo('Simple tag with poster object', 'Simple tag with poster object', ()=> {
     return (
       <Video cloudName="demo" controls publicId="dog" width="300" crop="scale" poster={{publicId: "sample"}}/>
     )
   });
 storiesOf('CloudinaryContext', module)
-  .add('CloudinaryContext', ()=> {
+  .addWithInfo('CloudinaryContext', 'CloudinaryContext', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return (
       <CloudinaryContext cloudName="demo" >
@@ -75,7 +92,7 @@ storiesOf('CloudinaryContext', module)
           <Image publicId="sample" transformation={t}/>
       </CloudinaryContext>
     )})
-  .add('Nested Context', ()=> {
+  .addWithInfo('Nested Context', 'Nested Context', ()=> {
     return (
       <CloudinaryContext cloudName="demo" width="50" crop="scale">
         <Image publicId="sample"/>