├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── .scripts ├── get_gh_pages_url.js ├── mocha_runner.js ├── prepublish.sh ├── publish_storybook.sh └── user │ ├── prepublish.sh │ └── pretest.js ├── .storybook └── config.js ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── docs └── demo.png ├── package.json ├── register.js └── src ├── index.js ├── register.js ├── stories └── index.js └── tests └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "rules": { 4 | "arrow-body-style": 0, 5 | "prefer-arrow-callback": 0, 6 | "func-names": 0, 7 | "react/jsx-no-bind": 0, 8 | "react/jsx-uses-react": 1, 9 | "react/prefer-stateless-function": 0 10 | }, 11 | "parserOptions": { 12 | "ecmaVersion": 6, 13 | "ecmaFeatures": { 14 | "experimentalObjectRestSpread": true 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .idea 4 | dist 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | .babelrc 3 | -------------------------------------------------------------------------------- /.scripts/get_gh_pages_url.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | 6 | const parse = require('git-url-parse'); 7 | var ghUrl = process.argv[2]; 8 | const parsedUrl = parse(ghUrl); 9 | 10 | const ghPagesUrl = 'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name; 11 | console.log(ghPagesUrl); 12 | -------------------------------------------------------------------------------- /.scripts/mocha_runner.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | // Use `.scripts/user/pretest.js instead`. 6 | 7 | require('babel-core/register'); 8 | require('babel-polyfill'); 9 | 10 | // Add jsdom support, which is required for enzyme. 11 | var jsdom = require('jsdom').jsdom; 12 | 13 | var exposedProperties = ['window', 'navigator', 'document']; 14 | 15 | global.document = jsdom(''); 16 | global.window = document.defaultView; 17 | Object.keys(document.defaultView).forEach((property) => { 18 | if (typeof global[property] === 'undefined') { 19 | exposedProperties.push(property); 20 | global[property] = document.defaultView[property]; 21 | } 22 | }); 23 | 24 | global.navigator = { 25 | userAgent: 'node.js' 26 | }; 27 | 28 | process.on('unhandledRejection', function (error) { 29 | console.error('Unhandled Promise Rejection:'); 30 | console.error(error && error.stack || error); 31 | }); 32 | 33 | require('./user/pretest.js'); 34 | -------------------------------------------------------------------------------- /.scripts/prepublish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # IMPORTANT 4 | # --------- 5 | # This is an auto generated file with React CDK. 6 | # Do not modify this file. 7 | # Use `.scripts/user/prepublish.sh instead`. 8 | 9 | echo "=> Transpiling 'src' into ES5 ..." 10 | echo "" 11 | rm -rf ./dist 12 | ./node_modules/.bin/babel --ignore tests,stories --plugins "transform-runtime" ./src --out-dir ./dist 13 | echo "" 14 | echo "=> Transpiling completed." 15 | 16 | . .scripts/user/prepublish.sh 17 | -------------------------------------------------------------------------------- /.scripts/publish_storybook.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # IMPORTANT 4 | # --------- 5 | # This is an auto generated file with React CDK. 6 | # Do not modify this file. 7 | 8 | set -e # exit with nonzero exit code if anything fails 9 | 10 | # get GIT url 11 | 12 | GIT_URL=`git config --get remote.origin.url` 13 | if [[ $GIT_URL == "" ]]; then 14 | echo "This project is not configured with a remote git repo". 15 | exit 1 16 | fi 17 | 18 | # clear and re-create the out directory 19 | rm -rf .out || exit 0; 20 | mkdir .out; 21 | 22 | # run our compile script, discussed above 23 | build-storybook -o .out 24 | 25 | # go to the out directory and create a *new* Git repo 26 | cd .out 27 | git init 28 | 29 | # inside this git repo we'll pretend to be a new user 30 | git config user.name "GH Pages Bot" 31 | git config user.email "hello@ghbot.com" 32 | 33 | # The first and only commit to this new Git repo contains all the 34 | # files present with the commit message "Deploy to GitHub Pages". 35 | git add . 36 | git commit -m "Deploy Storybook to GitHub Pages" 37 | 38 | # Force push from the current repo's master branch to the remote 39 | # repo's gh-pages branch. (All previous history on the gh-pages branch 40 | # will be lost, since we are overwriting it.) We redirect any output to 41 | # /dev/null to hide any sensitive credential data that might otherwise be exposed. 42 | git push --force --quiet $GIT_URL master:gh-pages > /dev/null 2>&1 43 | cd .. 44 | rm -rf .out 45 | 46 | echo "" 47 | echo "=> Storybook deployed to: `node .scripts/get_gh_pages_url.js $GIT_URL`" 48 | -------------------------------------------------------------------------------- /.scripts/user/prepublish.sh: -------------------------------------------------------------------------------- 1 | # Use this file to your own code to run at NPM `prepublish` event. 2 | -------------------------------------------------------------------------------- /.scripts/user/pretest.js: -------------------------------------------------------------------------------- 1 | // Use this file to setup any test utilities. 2 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | 6 | import { configure } from '@kadira/storybook'; 7 | 8 | function loadStories() { 9 | require('../src/stories'); 10 | } 11 | 12 | configure(loadStories, module); 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # ChangeLog 2 | 3 | ### v1.0.1 4 | 30-August-2016 5 | 6 | * Update docs. 7 | 8 | ### v1.0.0 9 | 30-August-2016 10 | 11 | * Initial version 12 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Storybook Addon Notes Component 2 | 3 | We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. 4 | 5 | ## Development Setup 6 | 7 | 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. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Your Name. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Storybook Addon Notes 2 | 3 | This contents of this repo was moved to the [Storybook monorepo](https://github.com/storybooks/storybook/) and the NPM package name has been changed. 4 | 5 | - The old name of the package was: **@kadira/storybook-addon-notes** 6 | - The new name of the package is: **@storybook/addon-notes** 7 | - The location of the code is: https://github.com/storybooks/storybook/tree/master/addons/notes 8 | 9 | The repo you're looking at now is out of date and no longer maintained. 10 | -------------------------------------------------------------------------------- /docs/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybook-eol/storybook-addon-notes/ad53fa51ff9f4dc2d9d8144aa781ab7cede2f42a/docs/demo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@kadira/storybook-addon-notes", 3 | "version": "1.0.1", 4 | "description": "Write notes for your Storybook stories.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/kadirahq/storybook-addon-notes.git" 8 | }, 9 | "license": "MIT", 10 | "scripts": { 11 | "prepublish": ". ./.scripts/prepublish.sh", 12 | "lint": "eslint src", 13 | "lintfix": "eslint src --fix", 14 | "testonly": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js", 15 | "test": "npm run lint && npm run testonly", 16 | "test-watch": "npm run testonly -- --watch --watch-extensions js", 17 | "storybook": "start-storybook -p 9010", 18 | "publish-storybook": "bash .scripts/publish_storybook.sh" 19 | }, 20 | "devDependencies": { 21 | "react": "^15.3.2", 22 | "react-dom": "^15.3.2", 23 | "babel-core": "^6.5.0", 24 | "babel-loader": "^6.2.4", 25 | "babel-polyfill": "^6.5.0", 26 | "babel-preset-es2015": "^6.5.0", 27 | "babel-preset-react": "^6.5.0", 28 | "babel-preset-stage-2": "^6.5.0", 29 | "babel-plugin-transform-runtime": "^6.5.0", 30 | "babel-cli": "^6.5.0", 31 | "eslint": "^3.6.1", 32 | "babel-eslint": "^7.0.0", 33 | "eslint-config-airbnb": "^12.0.0", 34 | "eslint-plugin-babel": "^3.2.0", 35 | "eslint-plugin-react": "^6.2.2", 36 | "mocha": "^3.1.0", 37 | "chai": "^3.5.0", 38 | "sinon": "^1.17.6", 39 | "enzyme": "^2.2.0", 40 | "react-addons-test-utils": "^15.3.2", 41 | "jsdom": "^8.3.1", 42 | "eslint-plugin-jsx-a11y": "^0.6.2", 43 | "@kadira/storybook": "^2.20.1", 44 | "git-url-parse": "^6.0.1" 45 | }, 46 | "peerDependencies": { 47 | "react": "^0.14.7 || ^15.0.0", 48 | "@kadira/storybook-addons": "^v1.3.1" 49 | }, 50 | "dependencies": { 51 | "babel-runtime": "^6.5.0" 52 | }, 53 | "main": "dist/index.js", 54 | "engines": { 55 | "npm": "^3.0.0" 56 | }, 57 | "keywords": [ 58 | "react", 59 | "storybook", 60 | "addon" 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /register.js: -------------------------------------------------------------------------------- 1 | require('./dist/register.js'); 2 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import addons from '@kadira/storybook-addons'; 3 | 4 | export class WithNotes extends React.Component { 5 | render() { 6 | const { children, notes } = this.props; 7 | const channel = addons.getChannel(); 8 | 9 | // send the notes to the channel. 10 | channel.emit('kadira/notes/add_notes', notes); 11 | // return children elements. 12 | return children; 13 | } 14 | } 15 | 16 | WithNotes.propTypes = { 17 | children: React.PropTypes.node, 18 | notes: React.PropTypes.string, 19 | }; 20 | -------------------------------------------------------------------------------- /src/register.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import addons from '@kadira/storybook-addons'; 3 | 4 | const styles = { 5 | notesPanel: { 6 | margin: 10, 7 | fontFamily: 'Arial', 8 | fontSize: 14, 9 | color: '#444', 10 | width: '100%', 11 | overflow: 'auto', 12 | }, 13 | }; 14 | 15 | export class Notes extends React.Component { 16 | constructor(...args) { 17 | super(...args); 18 | this.state = { text: '' }; 19 | this.onAddNotes = this.onAddNotes.bind(this); 20 | } 21 | 22 | componentDidMount() { 23 | const { channel, api } = this.props; 24 | // Listen to the notes and render it. 25 | channel.on('kadira/notes/add_notes', this.onAddNotes); 26 | 27 | // Clear the current notes on every story change. 28 | this.stopListeningOnStory = api.onStory(() => { 29 | this.onAddNotes(''); 30 | }); 31 | } 32 | 33 | // This is some cleanup tasks when the Notes panel is unmounting. 34 | componentWillUnmount() { 35 | if (this.stopListeningOnStory) { 36 | this.stopListeningOnStory(); 37 | } 38 | 39 | this.unmounted = true; 40 | const { channel } = this.props; 41 | channel.removeListener('kadira/notes/add_notes', this.onAddNotes); 42 | } 43 | 44 | onAddNotes(text) { 45 | this.setState({ text }); 46 | } 47 | 48 | render() { 49 | const { text } = this.state; 50 | const textAfterFormatted = text ? text.trim().replace(/\n/g, '
') : ''; 51 | 52 | return ( 53 |
54 |
55 |
56 | ); 57 | } 58 | } 59 | 60 | Notes.propTypes = { 61 | channel: React.PropTypes.object, 62 | api: React.PropTypes.object, 63 | }; 64 | 65 | // Register the addon with a unique name. 66 | addons.register('kadira/notes', (api) => { 67 | // Also need to set a unique name to the panel. 68 | addons.addPanel('kadira/notes/panel', { 69 | title: 'Notes', 70 | render: () => ( 71 | 72 | ), 73 | }); 74 | }); 75 | -------------------------------------------------------------------------------- /src/stories/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybook-eol/storybook-addon-notes/ad53fa51ff9f4dc2d9d8144aa781ab7cede2f42a/src/stories/index.js -------------------------------------------------------------------------------- /src/tests/index.js: -------------------------------------------------------------------------------- 1 | const { describe, it } = global; 2 | 3 | describe('Storybook Addon Notes', () => { 4 | it('should have some tests'); 5 | }); 6 | --------------------------------------------------------------------------------