feat: fix sheet() and add stories

Author: streamich

.storybook/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": [ ["env", {"modules": false} ]]
+    "presets": [ ["env", {"modules": false} ]]
 }

.storybook/sheet.stories.js

@@ -0,0 +1,43 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+const {create} = require('../lib');
+const {addonSheet} = require('../addon/sheet');
+
+const renderer = create(h);
+addonSheet(renderer);
+const {sheet} = renderer;
+
+const styles = sheet({
+    tomato: {
+        bd: '1px solid tomato',
+    },
+    yellow: {
+        bd: '1px solid yellow',
+    },
+}, 'hello');
+
+
+const styles2 = renderer.sheet({
+    tomato: {
+        bd: '1px solid tomato',
+    },
+    yellow: {
+        bd: '1px solid yellow',
+    },
+});
+
+storiesOf('sheet()', module)
+    .add('Default', () =>
+        h('div', null,
+            h('div', {className: styles.tomato}, 'Red'),
+            h('div', {className: styles.yellow}, 'Yellow'),
+        )
+    )
+    .add('No block name', () =>
+        h('div', null,
+            h('div', {className: styles2.tomato}, 'Red'),
+            h('div', {className: styles2.yellow}, 'Yellow'),
+        )
+    )

addon/sheet.js

@@ -10,23 +10,27 @@ exports.addonSheet = function (renderer) {
             block = hash(map);
         }
 
-        for (var elementModifier in map) {
+        function onElementModifiler (elementModifier) {
             var styles = map[elementModifier];
 
             Object.defineProperty(result, elementModifier, {
                 configurable: true,
                 get: function () {
-                    var classNames = this.rule(styles, block + '-' + elementModifier);
+                    var classNames = renderer.rule(styles, block + '-' + elementModifier);
 
                     Object.defineProperty(result, elementModifier, {
-                        value: classNames,
+                        value: classNames
                     });
 
                     return classNames;
                 },
             });
         }
 
+        for (var elementModifier in map) {
+            onElementModifiler(elementModifier);
+        }
+
         return result;
     };
 };