Merge pull request #1130 from storybooks/add-events-addon

Add events addon

.eslintignore

@@ -6,6 +6,9 @@ node_modules
 **/demo/**
 docs/public
 
+*.bundle.js
+*.js.map
+
 !.remarkrc.js
 !.eslintrc.js
 !.eslintrc-markdown.js

addons/events/CHANGELOG.md

@@ -0,0 +1,15 @@
+# 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. <hello@kadira.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

@@ -0,0 +1,94 @@
+# 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/addon-actions';
+import '@storybook/addon-links';
+import '@storybook/addon-events/register';
+```
+
+Then write your stories like this:
+
+```js
+import { storiesOf } from '@storybook/react';
+import WithEvents from '@storybook/addon-events';
+import EventEmiter from 'event-emiter';
+
+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,37 @@
+{
+  "name": "@storybook/addon-events",
+  "version": "3.0.1",
+  "description": "Add events to your Storybook stories.",
+  "keywords": [
+    "addon",
+    "events",
+    "react",
+    "storybook"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:storybooks/storybook.git"
+  },
+  "scripts": {
+    "build-storybook": "build-storybook",
+    "prepublish": "node ../../scripts/prepublish.js",
+    "storybook": "start-storybook -p 6006"
+  },
+  "dependencies": {
+    "@storybook/addons": "^3.0.0",
+    "babel-runtime": "^6.5.0",
+    "format-json": "^1.0.3",
+    "prop-types": "^15.5.10",
+    "react-textarea-autosize": "^4.0.5",
+    "uuid": "^3.0.1"
+  },
+  "devDependencies": {
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

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, // eslint-disable-line react/forbid-prop-types
+  };
+
+  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>
+    );
+  }
+}

addons/events/src/components/Panel.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+// import addons from '@storybook/addons';
+import PropTypes from 'prop-types';
+
+import { EVENTS } from '../constants';
+
+import Event from './Event';
+
+const styles = {
+  wrapper: {
+    margin: 10,
+    fontFamily: `
+      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
+      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
+    `,
+    fontSize: 14,
+    width: '100%',
+    color: 'rgb(51, 51, 51)',
+    overflow: 'auto',
+  },
+};
+
+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(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(EVENTS.ADD, this.onAdd);
+  }
+
+  onAdd = events => {
+    this.setState({ events });
+  };
+
+  onEmit = event => {
+    this.props.channel.emit(EVENTS.EMIT, event);
+  };
+
+  render() {
+    const { events } = this.state;
+    return (
+      <div style={styles.wrapper}>
+        {events.map(event => <Event key={event.id} {...event} onEmit={this.onEmit} />)}
+      </div>
+    );
+  }
+}