Add events addon

.eslintignore

@@ -2,3 +2,6 @@ dist
 build
 coverage
 node_modules
+
+*.bundle.js
+*.js.map

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
       printWidth: 100,
       tabWidth: 2,
       bracketSpacing: true,
-      trailingComma: 'all',
+      trailingComma: 'es5',
       singleQuote: true,
     }],
     quotes: ['warn', 'single'],

addons/comments/src/manager/containers/CommentsPanel/dataStore.js

@@ -53,7 +53,7 @@ export default class DataStore {
       () => {
         this._loadUsers().then(() => this._loadComments());
       },
-      1000 * 60, // Reload for every minute
+      1000 * 60 // Reload for every minute
     );
   }
 

addons/events/.storybook/addons.js

@@ -0,0 +1 @@
+import '../register';

addons/events/.storybook/config.js

@@ -0,0 +1,2 @@
+import * as storybook from '@storybook/react';
+storybook.configure(() => require('../stories'), module);

addons/events/CHANGELOG.md

@@ -0,0 +1,13 @@
+# ChangeLog
+
+### v1.1.0
+14-04-2017
+
+* Added the ability to edit event payload
+* Added live example
+* Updated readme
+
+### v1.0.0
+13-04-2017
+
+* Initial version

addons/events/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Kadira Inc. <[email protected]>
+
+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

@@ -0,0 +1,95 @@
+# Storybook Addon Events
+
+This [storybook](https://storybooks.js.org) ([source](https://github.com/storybooks/storybook)) addon allows you to add events for your stories.
+
+![Storybook Addon Events Example](docs/demo1.png)
+[Storybook Addon Events Live Demo](https://z4o4z.github.io/storybook-addon-events/index.html)
+
+### Getting Started
+
+```sh
+npm i --save-dev @storybook/addon-events
+```
+
+Then create a file called `addons.js` in your storybook config.
+
+Add following content to it:
+
+```js
+import '@storybook/addons-actions';
+import '@storybook/addons-links';
+import '@storybook/addon-events/register';
+```
+
+Then write your stories like this:
+
+```js
+import React from 'react';
+import EventEmiter from 'event-emiter';
+import { storiesOf } from '@storybook/react';
+import WithEvents from '@storybook/addon-events';
+
+import Logger from './Logger';
+import * as EVENTS from './events';
+
+const emiter = new EventEmiter();
+const emit = emiter.emit.bind(emiter);
+
+
+storiesOf('WithEvents', module)
+  .addDecorator(getStory => (
+    <WithEvents
+      emit={emit}
+      events={[
+        {
+          name: EVENTS.TEST_EVENT_1,
+          title: 'Test event 1',
+          payload: 0,
+        },
+        {
+          name: EVENTS.TEST_EVENT_2,
+          title: 'Test event 2',
+          payload: 'asdasdad asdasdasd',
+        },
+        {
+          name: EVENTS.TEST_EVENT_3,
+          title: 'Test event 3',
+          payload: {
+            string: 'value',
+            number: 123,
+            array: [1, 2, 3],
+            object: {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          },
+        },
+        {
+          name: EVENTS.TEST_EVENT_4,
+          title: 'Test event 4',
+          payload: [
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          ],
+        },
+      ]}
+    >
+      {getStory()}
+    </WithEvents>
+  ))
+  .add('Logger', () => <Logger emiter={emiter} />);
+```

addons/events/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@storybook/addon-events",
+  "version": "3.1.0-alpha",
+  "description": "Add events to your Storybook stories.",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "prepublish": "node ../../scripts/prepublish.js",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.5.0",
+    "babel-core": "^6.5.0",
+    "babel-eslint": "^7.0.0",
+    "babel-plugin-transform-runtime": "^6.5.0",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-2": "^6.5.0",
+    "eventemitter3": "^2.0.3",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "dependencies": {
+    "@storybook/addons": "^3.0.0-rc.0",
+    "babel-runtime": "^6.5.0",
+    "format-json": "^1.0.3",
+    "react-textarea-autosize": "^4.0.5"
+  },
+  "main": "dist/index.js",
+  "engines": {
+    "npm": "^3.0.0"
+  },
+  "keywords": [
+    "react",
+    "storybook",
+    "addon",
+    "events"
+  ]
+}

addons/events/register.js

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

addons/events/src/components/Event.js

@@ -0,0 +1,137 @@
+import React, { Component } from 'react';
+import json from 'format-json';
+import Textarea from 'react-textarea-autosize';
+import PropTypes from 'prop-types';
+
+const styles = {
+  item: {
+    padding: '10 0',
+  },
+  buttonWrapper: {
+    textAlign: 'center',
+  },
+  button: {
+    display: 'inline-block',
+    fontFamily: `
+      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
+      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
+    `,
+    fontSize: 14,
+    padding: 10,
+    margin: 10,
+    width: '40%',
+  },
+  textArea: {
+    display: 'block',
+    boxSizing: 'border-box',
+    margin: 0,
+    width: '100%',
+    maxWidth: '100%',
+    verticalAlign: 'middle',
+    outline: 'none',
+    border: '1px solid #c7c7c7',
+    borderRadius: 2,
+    fontSize: 13,
+    padding: '5px',
+    color: 'rgb(51, 51, 51)',
+    fontFamily: 'Arial, sans-serif',
+  },
+};
+
+export default class Item extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    onEmit: PropTypes.func.isRequired,
+    payload: PropTypes.any,
+  };
+
+  static defaultProps = {
+    payload: {},
+  };
+
+  static getJSONFromString(str) {
+    try {
+      return JSON.parse(str);
+    } catch (e) {
+      return str;
+    }
+  }
+
+  state = {};
+
+  componentWillMount() {
+    const payloadString = json.plain(this.props.payload);
+
+    this.setState({
+      failed: false,
+      payload: Item.getJSONFromString(payloadString),
+      payloadString,
+      isTextAreaShowed: false,
+    });
+  }
+
+  onChange = ({ target: { value } }) => {
+    const newState = {
+      payloadString: value,
+    };
+
+    try {
+      newState.payload = JSON.parse(value.trim());
+      newState.failed = false;
+    } catch (err) {
+      newState.failed = true;
+    }
+
+    this.setState(newState);
+  };
+
+  onEmitClick = () => {
+    this.props.onEmit({
+      name: this.props.name,
+      payload: this.state.payload,
+    });
+  };
+
+  onToggleEditClick = () => {
+    this.setState(({ isTextAreaShowed }) => ({
+      isTextAreaShowed: !isTextAreaShowed,
+    }));
+  };
+
+  render() {
+    const { failed, isTextAreaShowed } = this.state;
+    const extraStyle = {
+      display: isTextAreaShowed ? 'block' : 'none',
+    };
+
+    if (failed) {
+      extraStyle.border = '1px solid #fadddd';
+      extraStyle.backgroundColor = '#fff5f5';
+    }
+
+    return (
+      <div style={{ width: '100%' }}>
+        <h3>{this.props.title}</h3>
+        <div style={styles.buttonWrapper}>
+          <button style={styles.button} onClick={this.onEmitClick} disabled={failed}>
+            Emit
+          </button>
+          <button style={styles.button} onClick={this.onToggleEditClick}>
+            {isTextAreaShowed ? 'Close' : 'Edit payload'}
+          </button>
+        </div>
+
+        <Textarea
+          ref={ref => {
+            this.input = ref;
+          }}
+          style={{ ...styles.textArea, ...extraStyle }}
+          value={this.state.payloadString}
+          minRows={3}
+          onChange={this.onChange}
+        />
+      </div>
+    );
+  }
+}