+
+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.
diff --git a/packages/addon-comments/README.md b/packages/addon-comments/README.md
new file mode 100644
index 000000000000..814d23ff0488
--- /dev/null
+++ b/packages/addon-comments/README.md
@@ -0,0 +1,19 @@
+# Comments Addon
+
+This Storybook addon allows you to add comments for your stories. This addon works on [React Storybook](https://github.com/kadirahq/react-storybook).
+
+
+
+## Getting Started
+
+First, install the addon
+
+```shell
+npm install -D @kadira/storybook-addon-comments
+```
+
+Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
+
+```js
+import '@kadira/storybook-addon-comments/register';
+```
diff --git a/packages/addon-comments/docs/screenshot.png b/packages/addon-comments/docs/screenshot.png
new file mode 100644
index 000000000000..edf3c999cf4a
Binary files /dev/null and b/packages/addon-comments/docs/screenshot.png differ
diff --git a/packages/addon-comments/manager.js b/packages/addon-comments/manager.js
new file mode 100644
index 000000000000..68d13f4d0bf1
--- /dev/null
+++ b/packages/addon-comments/manager.js
@@ -0,0 +1,2 @@
+const manager = require('./dist/manager');
+manager.init();
diff --git a/packages/addon-comments/package.json b/packages/addon-comments/package.json
new file mode 100644
index 000000000000..e8e1fe32c6de
--- /dev/null
+++ b/packages/addon-comments/package.json
@@ -0,0 +1,69 @@
+{
+ "name": "@kadira/storybook-addon-comments",
+ "version": "1.9.1",
+ "description": "Comments addon for Storybook",
+ "main": "preview.js",
+ "scripts": {
+ "prepublish": ". ./.scripts/prepublish.sh",
+ "test": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js",
+ "storybook": "start-storybook -p 3006",
+ "storybook-local": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' start-storybook -p 9010",
+ "storybook-remote": "start-storybook -p 3006",
+ "publish-storybook": "bash .scripts/publish_storybook.sh"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/kadirahq/storybook-addon-comments.git"
+ },
+ "keywords": [
+ "storybook"
+ ],
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/kadirahq/storybook-addon-comments/issues"
+ },
+ "homepage": "https://github.com/kadirahq/storybook-addon-comments#readme",
+ "devDependencies": {
+ "react": "^15.5.4",
+ "react-dom": "^15.5.4",
+ "react-test-renderer": "^15.5.4",
+ "babel-loader": "^6.2.5",
+ "babel-polyfill": "^6.13.0",
+ "babel-preset-react-app": "^0.2.1",
+ "babel-cli": "^6.14.0",
+ "babel-core": "^6.14.0",
+ "babel-plugin-transform-runtime": "^6.15.0",
+ "babel-preset-es2015": "^6.14.0",
+ "babel-preset-react": "^6.11.1",
+ "babel-preset-stage-0": "^6.5.0",
+ "mocha": "^3.0.2",
+ "chai": "^3.5.0",
+ "sinon": "^1.17.6",
+ "enzyme": "^2.2.0",
+ "jsdom": "^9.5.0",
+ "git-url-parse": "^6.0.1",
+ "@kadira/storybook": "^2.24.1",
+ "@kadira/storybook-addons": "^1.5.0",
+ "@kadira/storybook-database-cloud": "^2.3.1",
+ "@kadira/storybook-deployer": "^1.2.0",
+ "@kadira/storybook-ui": "^3.4.1",
+ "chokidar": "^1.6.0",
+ "shelljs": "^0.7.4"
+ },
+ "peerDependencies": {
+ "@kadira/storybook-addons": "^1.5.0",
+ "react": "*",
+ "react-dom": "*"
+ },
+ "dependencies": {
+ "babel-runtime": "^6.11.6",
+ "deep-equal": "^1.0.1",
+ "events": "^1.1.1",
+ "insert-css": "^1.0.0",
+ "marked": "^0.3.6",
+ "moment": "^2.15.1",
+ "prop-types": "^15.5.7",
+ "react-render-html": "^0.1.6",
+ "react-textarea-autosize": "^4.0.5"
+ }
+}
diff --git a/packages/addon-comments/preview.js b/packages/addon-comments/preview.js
new file mode 100644
index 000000000000..06f2f2a7e5bd
--- /dev/null
+++ b/packages/addon-comments/preview.js
@@ -0,0 +1,2 @@
+const preview = require('./dist/preview');
+preview.init();
diff --git a/packages/addon-comments/register.js b/packages/addon-comments/register.js
new file mode 100644
index 000000000000..94af5ec3ba83
--- /dev/null
+++ b/packages/addon-comments/register.js
@@ -0,0 +1,3 @@
+// NOTE: loading addons using this file is deprecated!
+// please use manager.js and preview.js files instead
+require('./manager');
diff --git a/packages/addon-comments/src/index.js b/packages/addon-comments/src/index.js
new file mode 100644
index 000000000000..4a7863a01254
--- /dev/null
+++ b/packages/addon-comments/src/index.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const buttonStyles = {
+ border: '1px solid #eee',
+ borderRadius: 3,
+ backgroundColor: '#FFFFFF',
+ cursor: 'pointer',
+ fontSize: 15,
+ padding: '3px 10px',
+};
+
+const Button = ({ children, onClick, style = {} }) => (
+
+);
+
+Button.propTypes = {
+ children: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+ style: PropTypes.object,
+};
+
+export default Button;
diff --git a/packages/addon-comments/src/manager/components/CommentForm/index.js b/packages/addon-comments/src/manager/components/CommentForm/index.js
new file mode 100644
index 000000000000..c2259db8fdcb
--- /dev/null
+++ b/packages/addon-comments/src/manager/components/CommentForm/index.js
@@ -0,0 +1,89 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Textarea from 'react-textarea-autosize';
+import marked from 'marked';
+import style from './style';
+
+const renderer = new marked.Renderer();
+renderer.heading = function(text) {
+ return text;
+};
+
+marked.setOptions({
+ renderer,
+ gfm: true,
+ tables: false,
+ breaks: true,
+ pedantic: false,
+ sanitize: true,
+ smartLists: true,
+ smartypants: false,
+});
+
+export default class CommentForm extends Component {
+ constructor(props, ...args) {
+ super(props, ...args);
+ this.state = { text: '' };
+ }
+
+ onChange(e) {
+ const text = e.target.value;
+ this.setState({ text });
+ }
+
+ onSubmit() {
+ const { addComment } = this.props;
+ const text = this.state.text.trim();
+ if (!text || text === '') {
+ return;
+ }
+
+ addComment(marked(text));
+ this.setState({ text: '' });
+ }
+
+ openLogin() {
+ const signInUrl = `https://hub.getstorybook.io/sign-in?redirectUrl=${encodeURIComponent(location.href)}`;
+ location.href = signInUrl;
+ }
+
+ handleKeyDown(e) {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ this.onSubmit();
+ }
+ }
+
+ render() {
+ if (!this.props.user) {
+ return (
+
+
+
+
+ );
+ }
+
+ const { text } = this.state;
+ return (
+
+