add events

addons/events/.babelrc

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

addons/events/.eslintrc

@@ -0,0 +1,12 @@
+{
+    "parser": "babel-eslint",
+    "extends": "airbnb",
+    "rules": {
+        "arrow-body-style": 0,
+        "prefer-arrow-callback": 0,
+        "func-names": 0,
+        "react/no-array-index-key": 0,
+        "react/jsx-filename-extension": 0,
+        "react/prefer-stateless-function": 0
+    }
+}

addons/events/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+*.log
+.idea
+dist

addons/events/.npmignore

@@ -0,0 +1,2 @@
+src
+.babelrc

addons/events/CHANGELOG.md

@@ -0,0 +1,6 @@
+# ChangeLog
+
+### v1.0.0
+13-04-2017
+
+* Initial version

addons/events/CONTRIBUTING.md

@@ -0,0 +1,7 @@
+# Contributing to Storybook Addon Events Component
+
+We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time.
+
+## Development Setup
+
+This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development.

addons/events/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Your Name. <name@emailprovider.io>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

addons/events/README.md

@@ -1 +1,52 @@
-z4o4z-storybook-addon-events
+# Storybook Addon Events
+
+This [Storybook](https://getstorybook.io) addon allows you to add events for your stories.
+
+![Storybook Addon Events Demo](docs/demo.png)
+
+### Getting Started
+**note: addons require @kadira/storybook 2.x or greater*
+
+```sh
+npm i --save-dev @z4o4z/storybook-addon-events
+```
+
+Then create a file called `addons.js` in your storybook config.
+
+Add following content to it:
+
+```js
+import '@kadira/storybook/addons';
+import '@z4o4z/storybook-addon-events/register';
+```
+
+Then write your stories like this:
+
+```js
+import React from 'react';
+import EventEmiter from 'event-emiter';
+import { storiesOf } from '@kadira/storybook';
+import { WithEvents } from '@z4o4z/storybook-addon-events';
+import MyContainerWithEmiter from './MyContainerWithEmiter';
+
+const emiter = new EventEmmiter();
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <WithEvents
+      emit={emiter.emit}
+      toggleLike={{
+        title: 'Toggle like',
+        name: 'togle-like',
+        payload: {},
+      }}
+      like-fetched={{
+        title: 'Toggle like',
+        name: 'togle-like',
+        payload: {},
+      }}
+    >
+    <MyContainerWithEmiter emiter={emiter}/>
+  </WithEvents>
+  ));
+```

addons/events/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@z4o4z/storybook-addon-events",
+  "version": "1.0.0",
+  "description": "Add events for your Storybook stories.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/z4o4z/storybook-addon-events.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "rm -rf ./dist &&  ./node_modules/.bin/babel ./src --out-dir ./dist",
+    "lint": "eslint src",
+    "lintfix": "eslint src --fix",
+    "storybook": "start-storybook -p 9010"
+  },
+  "devDependencies": {
+    "@kadira/storybook": "^2.20.1",
+    "babel-cli": "^6.5.0",
+    "babel-core": "^6.5.0",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.5.0",
+    "babel-polyfill": "^6.5.0",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-2": "^6.5.0",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-babel": "^3.2.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.2.2",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
+  },
+  "peerDependencies": {
+    "react": "^0.14.7 || ^15.0.0",
+    "@kadira/storybook-addons": "^v1.3.1"
+  },
+  "dependencies": {
+    "babel-runtime": "^6.5.0"
+  },
+  "main": "dist/index.js",
+  "engines": {
+    "npm": "^3.0.0"
+  },
+  "keywords": [
+    "react",
+    "storybook",
+    "addon",
+    "events"
+  ]
+}

addons/events/register.js

@@ -0,0 +1 @@
+require('./dist/register.js');

addons/events/src/index.js

@@ -0,0 +1,64 @@
+/* eslint-disable jsx-a11y/anchor-has-content,
+  jsx-a11y/anchor-has-content,
+  jsx-a11y/aria-props,
+  jsx-a11y/aria-proptypes,
+  jsx-a11y/aria-proptypes,
+  jsx-a11y/aria-unsupported-elements,
+  jsx-a11y/aria-unsupported-elements,
+  jsx-a11y/href-no-hash,
+  jsx-a11y/href-no-hash,
+  jsx-a11y/img-has-alt,
+  jsx-a11y/img-has-alt,
+  jsx-a11y/img-redundant-alt,
+  jsx-a11y/img-redundant-alt,
+  jsx-a11y/label-has-for,
+  jsx-a11y/label-has-for,
+  jsx-a11y/aria-role,
+  jsx-a11y/aria-role,
+  jsx-a11y/role-supports-aria-props,
+  jsx-a11y/role-supports-aria-props,
+  jsx-a11y/tabindex-no-positive,
+  jsx-a11y/tabindex-no-positive,
+  jsx-a11y/heading-has-content,
+  jsx-a11y/heading-has-content,
+  jsx-a11y/html-has-lang,
+  jsx-a11y/html-has-lang,
+  jsx-a11y/lang,
+  jsx-a11y/lang,
+  jsx-a11y/role-has-required-aria-props,
+  jsx-a11y/scope,
+  jsx-a11y/no-static-element-interactions
+ */
+
+import { Component, PropTypes } from 'react';
+import addons from '@kadira/storybook-addons';
+
+export default class WithEvents extends Component {
+  static propTypes = {
+    emit: PropTypes.func.isRequired,
+    children: PropTypes.element.isRequired,
+  };
+
+  componentDidMount() {
+    const { emit, children, ...events } = this.props;
+
+    this.channel = addons.getChannel();
+
+    this.channel.on('z4o4z/events/emit', this.onEmit);
+
+    this.channel.emit('z4o4z/events/add', Object.values(events));
+  }
+
+  componentWillUnmount() {
+    this.unmounted = true;
+    this.channel.removeListener('z4o4z/events/emit');
+  }
+
+  onEmit = (event) => {
+    this.props.emit(event.name, event.payload);
+  };
+
+  render() {
+    return this.props.children;
+  }
+}

addons/events/src/register.js

@@ -0,0 +1,119 @@
+/* eslint-disable jsx-a11y/anchor-has-content,
+  jsx-a11y/anchor-has-content,
+  jsx-a11y/aria-props,
+  jsx-a11y/aria-proptypes,
+  jsx-a11y/aria-proptypes,
+  jsx-a11y/aria-unsupported-elements,
+  jsx-a11y/aria-unsupported-elements,
+  jsx-a11y/href-no-hash,
+  jsx-a11y/href-no-hash,
+  jsx-a11y/img-has-alt,
+  jsx-a11y/img-has-alt,
+  jsx-a11y/img-redundant-alt,
+  jsx-a11y/img-redundant-alt,
+  jsx-a11y/label-has-for,
+  jsx-a11y/label-has-for,
+  jsx-a11y/aria-role,
+  jsx-a11y/aria-role,
+  jsx-a11y/role-supports-aria-props,
+  jsx-a11y/role-supports-aria-props,
+  jsx-a11y/tabindex-no-positive,
+  jsx-a11y/tabindex-no-positive,
+  jsx-a11y/heading-has-content,
+  jsx-a11y/heading-has-content,
+  jsx-a11y/html-has-lang,
+  jsx-a11y/html-has-lang,
+  jsx-a11y/lang,
+  jsx-a11y/lang,
+  jsx-a11y/role-has-required-aria-props,
+  jsx-a11y/scope,
+  jsx-a11y/no-static-element-interactions
+ */
+
+import React, { PropTypes, Component } from 'react';
+import addons from '@kadira/storybook-addons';
+
+const styles = {
+  wrapper: {
+    margin: 10,
+    fontFamily: 'Arial',
+    fontSize: 14,
+    width: '100%',
+    overflow: 'auto',
+  },
+  item: {
+    margin: 5,
+  },
+  button: {
+    fontFamily: 'Arial',
+    fontSize: 14,
+    padding: 10,
+    width: '100%',
+  },
+};
+
+export default class Events extends Component {
+  static propTypes = {
+    api: PropTypes.shape({
+      onStory: PropTypes.func,
+    }).isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func,
+      emit: PropTypes.func,
+      removeListener: PropTypes.func,
+    }).isRequired,
+  };
+
+  state = {
+    events: [],
+  };
+
+  componentDidMount() {
+    this.props.channel.on('z4o4z/events/add', this.onAdd);
+
+    this.stopListeningOnStory = this.props.api.onStory(() => {
+      this.onAdd([]);
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.stopListeningOnStory) {
+      this.stopListeningOnStory();
+    }
+
+    this.unmounted = true;
+    this.props.channel.removeListener('z4o4z/events/add', this.onAdd);
+  }
+
+  onAdd = (events) => {
+    this.setState({ events });
+  };
+
+  render() {
+    const { events } = this.state;
+
+    return (
+      <div style={styles.wrapper}>
+        {events.map((event, index) => (
+          <div style={styles.item} key={index}>
+            <button
+              style={styles.button}
+              onClick={() => this.props.channel.emit('z4o4z/events/emit', event)}
+            >
+              {event.title}
+            </button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+// Register the addon with a unique name.
+addons.register('z4o4z/events', (api) => {
+  // Also need to set a unique name to the panel.
+  addons.addPanel('z4o4z/events/panel', {
+    title: 'Events',
+    render: () => <Events channel={addons.getChannel()} api={api} />,
+  });
+});