├── .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 ├── user │ └── modify_webpack_config.js └── webpack.config.js ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist └── index.js ├── docs └── home-screenshot-add-stories.png ├── example ├── ErrorBar.js └── story.js ├── package.json └── src ├── index.js └── tests └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "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 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | -------------------------------------------------------------------------------- /.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 | import React from 'react'; 2 | import { configure, setAddon, addDecorator } from '@kadira/storybook'; 3 | import addStoriesGroup from '../src/'; 4 | 5 | addDecorator((story) => ( 6 |
7 | {story()} 8 |
9 | )); 10 | 11 | setAddon(addStoriesGroup); 12 | 13 | configure(function () { 14 | require('../example/story'); 15 | }, module); 16 | -------------------------------------------------------------------------------- /.storybook/user/modify_webpack_config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | // This is the default webpack config defined in the `../webpack.config.js` 3 | // modify as you need. 4 | }; 5 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | // Use `.storybook/user/modify_webpack_config.js instead`. 6 | 7 | const path = require('path'); 8 | const updateConfig = require('./user/modify_webpack_config'); 9 | 10 | const config = { 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.css?$/, 15 | loaders: ['style', 'raw'], 16 | include: path.resolve(__dirname, '../'), 17 | }, 18 | { 19 | test: /\.json?$/, 20 | loaders: ['json'], 21 | include: path.resolve(__dirname, '../'), 22 | } 23 | ], 24 | }, 25 | }; 26 | 27 | updateConfig(config); 28 | module.exports = config; 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ### v3.0.0 4 | 5 | * Add the version which works as an React Storybook addon. 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React Storybook Story 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 | # React Storybook Info Addon 2 | 3 | A React Storybook addon to show additional information for your stories. 4 | 5 | ![React Storybook Screenshot](docs/home-screenshot-add-stories.png) 6 | 7 | ### Usage 8 | 9 | Install the following npm module: 10 | 11 | ```sh 12 | npm i --save-dev react-storybook-addon-add-stories-group 13 | ``` 14 | 15 | 16 | 17 | 18 | 19 | ```js 20 | 21 | import { configure,setAddon } from '@kadira/storybook'; 22 | import addStoriesGroup from 'react-storybook-addon-add-stories-group' 23 | 24 | setAddon(addStoriesGroup) 25 | 26 | function loadStories() { 27 | require('../src/components/stories/MyComp'); 28 | // require as many stories as you need. 29 | } 30 | 31 | configure(loadStories, module); 32 | ``` 33 | 34 | Then create your stories with the `.addWithInfo` API. 35 | 36 | ```js 37 | import { action , storiesOf} from '@kadira/storybook'; 38 | import MyComp from '../MyComp'; 39 | 40 | const stories = [ 41 | { 42 | name:"with text" , 43 | props: {text:"super error props", resetErrorMessage: action('clicked!') } 44 | }, 45 | { 46 | name:"with very long text", 47 | props: {text:"super error this is a reaaaaaalllly long error, probably more than one line of text, even if you have a huge monitor, text text", resetErrorMessage: action('clicked!') } 48 | } 49 | ] 50 | 51 | storiesOf('MyComp', module) 52 | .addStoriesGroup(MyComp, stories) 53 | ``` 54 | 55 | > Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API. 56 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _react = require('react'); 8 | 9 | var _react2 = _interopRequireDefault(_react); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | function _addStoriesGroup(Comp, storiesList, stories) { 14 | stories.add('All Toghether', function () { 15 | return _react2.default.createElement( 16 | 'div', 17 | null, 18 | storiesList.map(function (story) { 19 | return _react2.default.createElement( 20 | 'div', 21 | { key: story.name, style: { marginTop: '25px' } }, 22 | _react2.default.createElement( 23 | 'h1', 24 | { style: { marginBottom: '25px' } }, 25 | ' ', 26 | story.name, 27 | ' ' 28 | ), 29 | _react2.default.createElement( 30 | 'div', 31 | null, 32 | _react2.default.createElement(Comp, story.props) 33 | ) 34 | ); 35 | }) 36 | ); 37 | }); 38 | storiesList.forEach(function (story) { 39 | return stories.add(story.name, function () { 40 | return _react2.default.createElement(Comp, story.props); 41 | }); 42 | }); 43 | return stories; 44 | } 45 | 46 | exports.default = { 47 | addStoriesGroup: function addStoriesGroup(Comp, storiesList) { 48 | _addStoriesGroup(Comp, storiesList, this); 49 | } 50 | }; 51 | 52 | /** 53 | 54 | .storybook/config.js 55 | 56 | import { configure,setAddon } from '@kadira/storybook'; 57 | import addStoriesGroup from 'UTILITY_PATH' 58 | 59 | setAddon(addStoriesGroup) 60 | 61 | function loadStories() { 62 | require('../src/components/stories/MyComp'); 63 | // require as many stories as you need. 64 | } 65 | 66 | configure(loadStories, module); 67 | 68 | 69 | /src/components/stories/MyComp 70 | 71 | import { action , storiesOf} from '@kadira/storybook'; 72 | import MyComp from '../MyComp'; 73 | 74 | const stories = [ 75 | { 76 | name:"with text" , 77 | props: {text:"super error props", resetErrorMessage: action('clicked!') } 78 | }, 79 | { 80 | name:"with very long text", 81 | props: { 82 | text:"super error this is a reaaaaaalllly long error, probably more"+ 83 | " than one line of text, even if you have a huge monitor, text text" 84 | , 85 | resetErrorMessage: action('clicked!') 86 | } 87 | } 88 | ] 89 | 90 | storiesOf('MyComp', module) 91 | .addStoriesGroup(MyComp, stories) 92 | 93 | 94 | */ -------------------------------------------------------------------------------- /docs/home-screenshot-add-stories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jurgob/react-storybook-addon-add-stories-group/43f0f0e042853ea224bd9ec43f38f9b22b920c06/docs/home-screenshot-add-stories.png -------------------------------------------------------------------------------- /example/ErrorBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ErrorBarStyle = { 4 | cont: { 5 | backgroundColor: 'red', 6 | padding: '10px', 7 | color: 'white', 8 | fontSize: '20px', 9 | display: 'table', 10 | width: '100%', 11 | textAlign: 'left', 12 | }, 13 | buttonCont: { 14 | display: 'table-cell', 15 | paddingRight: '5px', 16 | }, 17 | textCont: { 18 | display: 'table-cell', 19 | textAlign: 'left', 20 | width: '100%', 21 | }, 22 | }; 23 | 24 | const ErrorBar = ({ onClose, text }) => ( 25 |
26 |
27 | [X] 28 |
29 |
30 | {text} 31 |
32 |
33 | ); 34 | ErrorBar.propTypes = { 35 | text: React.PropTypes.string.isRequired, 36 | onClose: React.PropTypes.func, 37 | }; 38 | 39 | export default ErrorBar; 40 | -------------------------------------------------------------------------------- /example/story.js: -------------------------------------------------------------------------------- 1 | import { action, storiesOf } from '@kadira/storybook'; 2 | import ErrorBar from './ErrorBar'; 3 | 4 | 5 | const stories = [ 6 | { 7 | name: 'with text', 8 | props: { text: 'super error props', onClose: action('clicked!') }, 9 | }, 10 | { 11 | name: 'with very long text', 12 | props: { 13 | text: 'super error this is a reaaaaaalllly long error,' + 14 | 'probably more than one line of text, even if you have a huge monitor, text text', 15 | onClose: action('clicked!'), 16 | }, 17 | }, 18 | ]; 19 | 20 | storiesOf('ErrorBar', module) 21 | .addStoriesGroup(ErrorBar, stories); 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-storybook-addon-add-stories-group", 3 | "version": "0.1.0", 4 | "description": "A React Storybook addon to show add groups of stories and show them all toghether.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/jurgob/react-storybook-addon-add-stories-group.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 | "@kadira/storybook": "^1.31.0", 22 | "babel-cli": "^6.5.0", 23 | "babel-core": "^6.5.0", 24 | "babel-eslint": "^6.0.2", 25 | "babel-loader": "^6.2.4", 26 | "babel-plugin-transform-runtime": "^6.5.0", 27 | "babel-polyfill": "^6.5.0", 28 | "babel-preset-es2015": "^6.5.0", 29 | "babel-preset-react": "^6.5.0", 30 | "babel-preset-stage-0": "^6.5.0", 31 | "chai": "^3.5.0", 32 | "enzyme": "^2.2.0", 33 | "eslint": "^2.7.0", 34 | "eslint-config-airbnb": "^7.0.0", 35 | "eslint-plugin-babel": "^3.2.0", 36 | "eslint-plugin-jsx-a11y": "^0.6.2", 37 | "eslint-plugin-react": "^4.3.0", 38 | "git-url-parse": "^6.0.1", 39 | "jsdom": "^8.3.1", 40 | "json-loader": "^0.5.4", 41 | "mocha": "^2.4.5", 42 | "raw-loader": "^0.5.1", 43 | "react": "^15.0.0", 44 | "react-addons-test-utils": "^15.0.0", 45 | "react-dom": "^15.0.0", 46 | "sinon": "^1.17.3", 47 | "style-loader": "^0.13.1" 48 | }, 49 | "peerDependencies": { 50 | "react": "^0.14.7 || ^15.0.0" 51 | }, 52 | "dependencies": { 53 | "babel-runtime": "^6.5.0", 54 | "markdown-modest": "github:markdowncss/modest", 55 | "markdown-to-react-components": "^0.2.0", 56 | "react-addons-create-fragment": "^15.1.0", 57 | "react-remarkable": "^1.1.1" 58 | }, 59 | "main": "dist/index.js", 60 | "engines": { 61 | "npm": "^3.0.0" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | function addStoriesGroup(Comp, storiesList, stories) { 5 | stories 6 | .add('All Together', 7 | () =>
8 | {storiesList.map(story => ( 9 |
10 |

{ story.name }

11 |
12 | 13 |
14 |
15 | ))} 16 |
17 | ); 18 | storiesList 19 | .forEach((story) => stories.add(story.name, () => )); 20 | return stories; 21 | } 22 | 23 | 24 | export default { 25 | addStoriesGroup(Comp, storiesList) { 26 | addStoriesGroup(Comp, storiesList, this); 27 | }, 28 | }; 29 | 30 | 31 | /** 32 | 33 | .storybook/config.js 34 | 35 | import { configure,setAddon } from '@kadira/storybook'; 36 | import addStoriesGroup from 'UTILITY_PATH' 37 | 38 | setAddon(addStoriesGroup) 39 | 40 | function loadStories() { 41 | require('../src/components/stories/MyComp'); 42 | // require as many stories as you need. 43 | } 44 | 45 | configure(loadStories, module); 46 | 47 | 48 | /src/components/stories/MyComp 49 | 50 | import { action , storiesOf} from '@kadira/storybook'; 51 | import MyComp from '../MyComp'; 52 | 53 | const stories = [ 54 | { 55 | name:"with text" , 56 | props: {text:"super error props", resetErrorMessage: action('clicked!') } 57 | }, 58 | { 59 | name:"with very long text", 60 | props: { 61 | text:"super error this is a reaaaaaalllly long error, probably more"+ 62 | " than one line of text, even if you have a huge monitor, text text" 63 | , 64 | resetErrorMessage: action('clicked!') 65 | } 66 | } 67 | ] 68 | 69 | storiesOf('MyComp', module) 70 | .addStoriesGroup(MyComp, stories) 71 | 72 | 73 | */ 74 | -------------------------------------------------------------------------------- /src/tests/index.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import { shallow, mount } from 'enzyme'; 3 | // import Story from '../index'; 4 | // import { expect } from 'chai'; 5 | // import sinon from 'sinon'; 6 | const { describe, it } = global; 7 | 8 | describe('Story', () => { 9 | it('should show all Toghether story'); 10 | }); 11 | --------------------------------------------------------------------------------