├── .npmignore ├── .gitignore ├── .babelrc ├── .scripts ├── user │ ├── pretest.js │ └── prepublish.sh ├── get_gh_pages_url.js ├── prepublish.sh ├── mocha_runner.js └── publish_storybook.sh ├── .storybook ├── addons.js ├── user │ └── modify_webpack_config.js ├── config.js └── webpack.config.js ├── docs └── home-screenshot.png ├── src ├── components │ ├── markdown │ │ ├── index.js │ │ ├── text.js │ │ ├── code.js │ │ └── htags.js │ ├── theme.js │ ├── Props.js │ ├── Node.js │ ├── PropVal.js │ ├── PropTable.js │ └── Story.js ├── tests │ └── index.js └── index.js ├── dist ├── components │ ├── theme.js │ ├── markdown │ │ ├── index.js │ │ ├── text.js │ │ ├── code.js │ │ └── htags.js │ ├── Props.js │ ├── Node.js │ ├── PropVal.js │ ├── PropTable.js │ └── Story.js └── index.js ├── .eslintrc ├── CONTRIBUTING.md ├── README.md ├── example ├── Button.js └── story.js ├── LICENSE ├── package.json └── CHANGELOG.md /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.scripts/user/pretest.js: -------------------------------------------------------------------------------- 1 | // Use this file to setup any test utilities. 2 | -------------------------------------------------------------------------------- /.scripts/user/prepublish.sh: -------------------------------------------------------------------------------- 1 | # Use this file to your own code to run at NPM `prepublish` event. 2 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@kadira/storybook/addons'; 2 | import 'react-storybook-addon-backgrounds/register'; 3 | -------------------------------------------------------------------------------- /docs/home-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybook-eol/react-storybook-addon-info/HEAD/docs/home-screenshot.png -------------------------------------------------------------------------------- /src/components/markdown/index.js: -------------------------------------------------------------------------------- 1 | export { H1, H2, H3, H4, H5, H6 } from './htags'; 2 | export { Code, Pre } from './code'; 3 | export { P, Small, A, LI } from './text'; 4 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/theme.js: -------------------------------------------------------------------------------- 1 | export const baseFonts = { 2 | fontFamily: ` 3 | -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", 4 | "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif 5 | `, 6 | color: '#444', 7 | WebkitFontSmoothing: 'antialiased', 8 | }; 9 | -------------------------------------------------------------------------------- /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 the info button'); 10 | }); 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /dist/components/theme.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var baseFonts = exports.baseFonts = { 7 | fontFamily: '\n -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n ', 8 | color: '#444', 9 | WebkitFontSmoothing: 'antialiased' 10 | }; -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { configure, setAddon, addDecorator } from '@kadira/storybook'; 3 | import InfoAddon from '../src/'; 4 | 5 | addDecorator((story) => ( 6 |
7 | {story()} 8 |
9 | )); 10 | 11 | setAddon(InfoAddon); 12 | 13 | configure(function () { 14 | require('../example/story'); 15 | }, module); 16 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Storybook Info Addon 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/react-storybook-addon-info** 6 | - The new name of the package is: **@storybook/addon-info** 7 | - The location of the code is: https://github.com/storybooks/storybook/tree/master/addons/info 8 | 9 | The repo you're looking at now is out of date and no longer maintained. 10 | -------------------------------------------------------------------------------- /example/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Button = ({ disabled, label, style, onClick }) => ( 4 | 7 | ); 8 | 9 | Object.assign(Button, { 10 | displayName: 'Button', 11 | propTypes: { 12 | /** Single line comment: This is label description */ 13 | label: React.PropTypes.string.isRequired, 14 | /* 15 | * Multiple lines comment: This is style description 16 | * Must be in object 17 | */ 18 | style: React.PropTypes.object, 19 | disabled: React.PropTypes.bool, 20 | onClick: React.PropTypes.func, 21 | }, 22 | }); 23 | 24 | export default Button; 25 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/markdown/text.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { baseFonts } from '../theme'; 3 | 4 | export class P extends React.Component { 5 | render() { 6 | const style = { 7 | ...baseFonts, 8 | fontSize: '15px', 9 | }; 10 | return

{this.props.children}

; 11 | } 12 | } 13 | 14 | export class LI extends React.Component { 15 | render() { 16 | const style = { 17 | ...baseFonts, 18 | fontSize: '15px', 19 | }; 20 | return
  • {this.props.children}
    • ; 21 | } 22 | } 23 | 24 | export class UL extends React.Component { 25 | render() { 26 | const style = { 27 | ...baseFonts, 28 | fontSize: '15px', 29 | }; 30 | 31 | return ; 32 | } 33 | } 34 | 35 | export class A extends React.Component { 36 | render() { 37 | const style = { 38 | color: '#3498db', 39 | }; 40 | 41 | return {this.props.children}; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropVal from './PropVal'; 3 | 4 | const stylesheet = { 5 | propStyle: { 6 | }, 7 | propNameStyle: { 8 | }, 9 | propValueStyle: { 10 | } 11 | } 12 | 13 | export default class Props extends React.Component { 14 | render() { 15 | const props = this.props.node.props; 16 | const defaultProps = this.props.node.type.defaultProps; 17 | if (!props || typeof props !== 'object') { 18 | return ; 19 | } 20 | 21 | const {propStyle, propValueStyle, propNameStyle} = stylesheet; 22 | 23 | const names = Object.keys(props).filter(name => { 24 | return name[0] !== '_' && name !== 'children' && (!defaultProps || props[name] != defaultProps[name]); 25 | }); 26 | 27 | const breakIntoNewLines = names.length > 3; 28 | const endingSpace = this.props.singleLine ? ' ' : ''; 29 | 30 | const items = []; 31 | names.forEach((name, i) => { 32 | items.push( 33 | 34 | {breakIntoNewLines ? ( 35 | 36 |
       37 |     38 | ) : ' '} 39 | {name} 40 | {/* Use implicit true: */} 41 | {(!props[name] || typeof props[name] !== 'boolean') && ( 42 | 43 | = 44 | 45 | 46 | )} 47 | 48 | {i === (names.length - 1) && ( 49 | breakIntoNewLines ?
    : endingSpace 50 | )} 51 |     52 | ); 53 | }); 54 | 55 | return {items}; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/components/markdown/code.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export class Code extends React.Component { 4 | 5 | componentDidMount() { 6 | this.highlight() 7 | } 8 | 9 | componentDidUpdate() { 10 | this.highlight() 11 | } 12 | 13 | highlight() { 14 | if (typeof Prism !== 'undefined') { 15 | Prism.highlightAll() 16 | } 17 | } 18 | 19 | render() { 20 | const codeStyle = { 21 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 22 | backgroundColor: '#fafafa', 23 | }; 24 | 25 | const preStyle = { 26 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 27 | backgroundColor: '#fafafa', 28 | padding: '.5rem', 29 | lineHeight: 1.5, 30 | overflowX: 'scroll', 31 | }; 32 | 33 | const className = this.props.language ? `language-${this.props.language}` : ''; 34 | 35 | return ( 36 | 
    37 |         
38 |           { this.props.code }
39 |         
40 |
    41 | ); 42 | } 43 | } 44 | 45 | export class Pre extends React.Component { 46 | render() { 47 | const style = { 48 | fontSize: '.88em', 49 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 50 | backgroundColor: '#fafafa', 51 | padding: '.5rem', 52 | lineHeight: 1.5, 53 | overflowX: 'scroll', 54 | }; 55 | 56 | return 
    {this.props.children}
    ; 57 | } 58 | } 59 | 60 | export class Blockquote extends React.Component { 61 | render() { 62 | const style = { 63 | fontSize: '1.88em', 64 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 65 | borderLeft: '8px solid #fafafa', 66 | padding: '1rem', 67 | }; 68 | 69 | return
    {this.props.children}
    ; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /dist/components/markdown/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _htags = require('./htags'); 8 | 9 | Object.defineProperty(exports, 'H1', { 10 | enumerable: true, 11 | get: function get() { 12 | return _htags.H1; 13 | } 14 | }); 15 | Object.defineProperty(exports, 'H2', { 16 | enumerable: true, 17 | get: function get() { 18 | return _htags.H2; 19 | } 20 | }); 21 | Object.defineProperty(exports, 'H3', { 22 | enumerable: true, 23 | get: function get() { 24 | return _htags.H3; 25 | } 26 | }); 27 | Object.defineProperty(exports, 'H4', { 28 | enumerable: true, 29 | get: function get() { 30 | return _htags.H4; 31 | } 32 | }); 33 | Object.defineProperty(exports, 'H5', { 34 | enumerable: true, 35 | get: function get() { 36 | return _htags.H5; 37 | } 38 | }); 39 | Object.defineProperty(exports, 'H6', { 40 | enumerable: true, 41 | get: function get() { 42 | return _htags.H6; 43 | } 44 | }); 45 | 46 | var _code = require('./code'); 47 | 48 | Object.defineProperty(exports, 'Code', { 49 | enumerable: true, 50 | get: function get() { 51 | return _code.Code; 52 | } 53 | }); 54 | Object.defineProperty(exports, 'Pre', { 55 | enumerable: true, 56 | get: function get() { 57 | return _code.Pre; 58 | } 59 | }); 60 | 61 | var _text = require('./text'); 62 | 63 | Object.defineProperty(exports, 'P', { 64 | enumerable: true, 65 | get: function get() { 66 | return _text.P; 67 | } 68 | }); 69 | Object.defineProperty(exports, 'Small', { 70 | enumerable: true, 71 | get: function get() { 72 | return _text.Small; 73 | } 74 | }); 75 | Object.defineProperty(exports, 'A', { 76 | enumerable: true, 77 | get: function get() { 78 | return _text.A; 79 | } 80 | }); 81 | Object.defineProperty(exports, 'LI', { 82 | enumerable: true, 83 | get: function get() { 84 | return _text.LI; 85 | } 86 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@kadira/react-storybook-addon-info", 3 | "version": "3.4.0", 4 | "description": "A React Storybook addon to show additional information for your stories.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/kadirahq/react-storybook-addon-info.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": "^2.20.1", 22 | "babel-cli": "^6.5.0", 23 | "babel-core": "^6.5.0", 24 | "babel-eslint": "^7.0.0", 25 | "babel-plugin-transform-runtime": "^6.5.0", 26 | "babel-polyfill": "^6.5.0", 27 | "babel-preset-es2015": "^6.5.0", 28 | "babel-preset-react": "^6.5.0", 29 | "babel-preset-stage-2": "^6.5.0", 30 | "chai": "^3.5.0", 31 | "enzyme": "^2.2.0", 32 | "eslint": "^3.6.1", 33 | "eslint-config-airbnb": "^12.0.0", 34 | "eslint-plugin-babel": "^3.2.0", 35 | "eslint-plugin-jsx-a11y": "^2.2.2", 36 | "eslint-plugin-react": "^6.2.1", 37 | "git-url-parse": "^6.0.1", 38 | "jsdom": "^9.5.0", 39 | "mocha": "^3.0.2", 40 | "react": "^15.3.2", 41 | "react-addons-test-utils": "^15.3.1", 42 | "react-dom": "^0.14.7 || ^15.0.0", 43 | "react-storybook-addon-backgrounds": "0.0.7", 44 | "sinon": "^1.17.6" 45 | }, 46 | "peerDependencies": { 47 | "react": "^0.14.7 || ^15.0.0" 48 | }, 49 | "dependencies": { 50 | "babel-runtime": "^6.5.0", 51 | "markdown-to-react-components": "^0.2.1", 52 | "react-addons-create-fragment": "^15.3.2" 53 | }, 54 | "main": "dist/index.js", 55 | "engines": { 56 | "npm": "^3.0.0" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/markdown/htags.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { baseFonts } from '../theme'; 3 | 4 | export class H1 extends React.Component { 5 | render() { 6 | const styles = { 7 | ...baseFonts, 8 | borderBottom: '1px solid #eee', 9 | fontWeight: 600, 10 | margin: 0, 11 | padding: 0, 12 | fontSize: '40px', 13 | }; 14 | 15 | return

    {this.props.children}

    ; 16 | } 17 | } 18 | 19 | export class H2 extends React.Component { 20 | render() { 21 | const styles = { 22 | ...baseFonts, 23 | fontWeight: 600, 24 | margin: 0, 25 | padding: 0, 26 | fontSize: '30px', 27 | }; 28 | 29 | return

    {this.props.children}

    ; 30 | } 31 | } 32 | 33 | export class H3 extends React.Component { 34 | render() { 35 | const styles = { 36 | ...baseFonts, 37 | fontWeight: 600, 38 | margin: 0, 39 | padding: 0, 40 | fontSize: '22px', 41 | textTransform: 'uppercase', 42 | }; 43 | 44 | return

    {this.props.children}

    ; 45 | } 46 | } 47 | 48 | export class H4 extends React.Component { 49 | render() { 50 | const styles = { 51 | ...baseFonts, 52 | fontWeight: 600, 53 | margin: 0, 54 | padding: 0, 55 | fontSize: '20px', 56 | }; 57 | 58 | return

    {this.props.children}

    ; 59 | } 60 | } 61 | 62 | export class H5 extends React.Component { 63 | render() { 64 | const styles = { 65 | ...baseFonts, 66 | fontWeight: 600, 67 | margin: 0, 68 | padding: 0, 69 | fontSize: '18px', 70 | }; 71 | 72 | return
    {this.props.children}
    ; 73 | } 74 | } 75 | 76 | export class H6 extends React.Component { 77 | render() { 78 | const styles = { 79 | ...baseFonts, 80 | fontWeight: 400, 81 | margin: 0, 82 | padding: 0, 83 | fontSize: '18px', 84 | }; 85 | 86 | return
    {this.props.children}
    ; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _Story from './components/Story'; 3 | import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown'; 4 | export const Story = _Story; 5 | 6 | const defaultOptions = { 7 | inline: false, 8 | header: true, 9 | source: true, 10 | propTables: [], 11 | }; 12 | 13 | const defaultMtrcConf = { 14 | h1: H1, 15 | h2: H2, 16 | h3: H3, 17 | h4: H4, 18 | h5: H5, 19 | h6: H6, 20 | code: Code, 21 | p: P, 22 | a: A, 23 | li: LI, 24 | ul: UL, 25 | }; 26 | 27 | export default { 28 | addWithInfo(storyName, info, storyFn, _options) { 29 | 30 | if (typeof storyFn !== 'function') { 31 | if (typeof info === 'function') { 32 | _options = storyFn; 33 | storyFn = info; 34 | info = ''; 35 | } else { 36 | throw new Error('No story defining function has been specified'); 37 | } 38 | } 39 | 40 | const options = { 41 | ...defaultOptions, 42 | ..._options 43 | }; 44 | 45 | // props.propTables can only be either an array of components or null 46 | // propTables option is allowed to be set to 'false' (a boolean) 47 | // if the option is false, replace it with null to avoid react warnings 48 | if (!options.propTables) { 49 | options.propTables = null; 50 | } 51 | 52 | const mtrcConf = { ...defaultMtrcConf }; 53 | if (options && options.mtrcConf) { 54 | Object.assign(mtrcConf, options.mtrcConf); 55 | } 56 | 57 | return this.add(storyName, (context) => { 58 | const props = { 59 | info, 60 | context, 61 | showInline: Boolean(options.inline), 62 | showHeader: Boolean(options.header), 63 | showSource: Boolean(options.source), 64 | propTables: options.propTables, 65 | styles: typeof options.styles === 'function' 66 | ? options.styles 67 | : (s) => s, 68 | mtrcConf 69 | }; 70 | 71 | return ( 72 | 73 | {storyFn(context)} 74 | 75 | ); 76 | }); 77 | } 78 | }; 79 | 80 | export function setDefaults(newDefaults) { 81 | return Object.assign(defaultOptions, newDefaults); 82 | }; 83 | -------------------------------------------------------------------------------- /src/components/Node.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Props from './Props' 3 | 4 | 5 | const stylesheet = { 6 | containerStyle: {}, 7 | tagStyle: { 8 | color: '#777', 9 | } 10 | } 11 | 12 | export default class Node extends React.Component { 13 | constructor(props){ 14 | super(props); 15 | } 16 | 17 | render(){ 18 | const {node, depth} = this.props; 19 | let {tagStyle, containerStyle} = stylesheet; 20 | 21 | var leftPad = { 22 | paddingLeft: 3 + (depth + 1) * 15, 23 | paddingRight: 3, 24 | }; 25 | 26 | Object.assign(containerStyle, leftPad); 27 | 28 | const {name, text, children} = getData(node); 29 | 30 | // Just text 31 | if (!name) { 32 | return
    33 | {text} 34 |
    ; 35 | } 36 | 37 | // Single-line tag 38 | if (!children) { 39 | return
    40 | <{name} 41 | 42 | /> 43 |
    ; 44 | } 45 | 46 | // Keep a copy so that further mutations to containerStyle don't impact us: 47 | const containerStyleCopy = Object.assign({}, containerStyle); 48 | 49 | // tag with children 50 | return ( 51 |
    52 |
    53 | <{name} 54 | 55 | > 56 |
    57 | {React.Children.map(children, childElement => ( 58 | 59 | ))} 60 |
    61 | </{name}> 62 |
    63 |
    64 | ); 65 | } 66 | } 67 | 68 | function getData(element) { 69 | const data = { 70 | name: null, 71 | text: null, 72 | children: null 73 | }; 74 | 75 | if (typeof element == 'string') { 76 | data.text = element; 77 | return data; 78 | } 79 | 80 | if (typeof element === 'number') { 81 | data.text = String.toString(element); 82 | return data; 83 | } 84 | 85 | data.children = element.props.children; 86 | const type = element.type; 87 | 88 | if (typeof type === 'string') { 89 | data.name = type; 90 | } else { 91 | data.name = type.displayName || type.name || 'Unknown'; 92 | } 93 | 94 | return data; 95 | } 96 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.Story = undefined; 7 | 8 | var _assign = require('babel-runtime/core-js/object/assign'); 9 | 10 | var _assign2 = _interopRequireDefault(_assign); 11 | 12 | var _extends2 = require('babel-runtime/helpers/extends'); 13 | 14 | var _extends3 = _interopRequireDefault(_extends2); 15 | 16 | exports.setDefaults = setDefaults; 17 | 18 | var _react = require('react'); 19 | 20 | var _react2 = _interopRequireDefault(_react); 21 | 22 | var _Story2 = require('./components/Story'); 23 | 24 | var _Story3 = _interopRequireDefault(_Story2); 25 | 26 | var _markdown = require('./components/markdown'); 27 | 28 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 29 | 30 | var Story = exports.Story = _Story3.default; 31 | 32 | var defaultOptions = { 33 | inline: false, 34 | header: true, 35 | source: true, 36 | propTables: [] 37 | }; 38 | 39 | var defaultMtrcConf = { 40 | h1: _markdown.H1, 41 | h2: _markdown.H2, 42 | h3: _markdown.H3, 43 | h4: _markdown.H4, 44 | h5: _markdown.H5, 45 | h6: _markdown.H6, 46 | code: _markdown.Code, 47 | p: _markdown.P, 48 | a: _markdown.A, 49 | li: _markdown.LI, 50 | ul: _markdown.UL 51 | }; 52 | 53 | exports.default = { 54 | addWithInfo: function addWithInfo(storyName, info, storyFn, _options) { 55 | 56 | if (typeof storyFn !== 'function') { 57 | if (typeof info === 'function') { 58 | _options = storyFn; 59 | storyFn = info; 60 | info = ''; 61 | } else { 62 | throw new Error('No story defining function has been specified'); 63 | } 64 | } 65 | 66 | var options = (0, _extends3.default)({}, defaultOptions, _options); 67 | 68 | // props.propTables can only be either an array of components or null 69 | // propTables option is allowed to be set to 'false' (a boolean) 70 | // if the option is false, replace it with null to avoid react warnings 71 | if (!options.propTables) { 72 | options.propTables = null; 73 | } 74 | 75 | var mtrcConf = (0, _extends3.default)({}, defaultMtrcConf); 76 | if (options && options.mtrcConf) { 77 | (0, _assign2.default)(mtrcConf, options.mtrcConf); 78 | } 79 | 80 | return this.add(storyName, function (context) { 81 | var props = { 82 | info: info, 83 | context: context, 84 | showInline: Boolean(options.inline), 85 | showHeader: Boolean(options.header), 86 | showSource: Boolean(options.source), 87 | propTables: options.propTables, 88 | styles: typeof options.styles === 'function' ? options.styles : function (s) { 89 | return s; 90 | }, 91 | mtrcConf: mtrcConf 92 | }; 93 | 94 | return _react2.default.createElement( 95 | Story, 96 | props, 97 | storyFn(context) 98 | ); 99 | }); 100 | } 101 | }; 102 | function setDefaults(newDefaults) { 103 | return (0, _assign2.default)(defaultOptions, newDefaults); 104 | }; -------------------------------------------------------------------------------- /src/components/PropVal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import createFragment from 'react-addons-create-fragment'; 3 | 4 | const valueStyles = { 5 | func: { 6 | color: '#170', 7 | }, 8 | 9 | attr: { 10 | color: '#666', 11 | }, 12 | 13 | object: { 14 | color: '#666', 15 | }, 16 | 17 | array: { 18 | color: '#666', 19 | }, 20 | 21 | number: { 22 | color: '#a11', 23 | }, 24 | 25 | string: { 26 | color: '#22a', 27 | wordBreak: 'break-word', 28 | }, 29 | 30 | bool: { 31 | color: '#a11', 32 | }, 33 | 34 | empty: { 35 | color: '#777', 36 | }, 37 | }; 38 | 39 | function previewArray(val) { 40 | const items = {}; 41 | val.slice(0, 3).forEach((item, i) => { 42 | items[`n${i}`] = ; 43 | items[`c${i}`] = ', '; 44 | }); 45 | if (val.length > 3) { 46 | items.last = '…'; 47 | } else { 48 | delete items[`c${val.length - 1}`]; 49 | } 50 | return ( 51 | 52 | [{createFragment(items)}] 53 | 54 | ); 55 | } 56 | 57 | function previewObject(val) { 58 | const names = Object.keys(val); 59 | const items = {}; 60 | names.slice(0, 3).forEach((name, i) => { 61 | items[`k${i}`] = {name}; 62 | items[`c${i}`] = ': '; 63 | items[`v${i}`] = ; 64 | items[`m${i}`] = ', '; 65 | }); 66 | if (names.length > 3) { 67 | items.rest = '…'; 68 | } else { 69 | delete items[`m${names.length - 1}`]; 70 | } 71 | return ( 72 | 73 | {'{'}{createFragment(items)}{'}'} 74 | 75 | ); 76 | } 77 | 78 | function previewProp(val) { 79 | let braceWrap = true; 80 | let content = null; 81 | if (typeof val === 'number') { 82 | content = {val}; 83 | } else if (typeof val === 'string') { 84 | if (val.length > 50) { 85 | val = val.slice(0, 50) + '…'; 86 | } 87 | content = "{val}"; 88 | braceWrap = false; 89 | } else if (typeof val === 'boolean') { 90 | content = {`${val}`}; 91 | } else if (Array.isArray(val)) { 92 | content = previewArray(val); 93 | } else if (typeof val === 'function') { 94 | content = {val.name ? `${val.name}()` : 'anonymous()'}; 95 | } else if (!val) { 96 | content = {`${val}`}; 97 | } else if (typeof val !== 'object') { 98 | content = …; 99 | } else if (React.isValidElement(val)) { 100 | content = ( 101 | 102 | {`<${val.type.displayName || val.type.name || val.type} />`} 103 | 104 | ); 105 | } else { 106 | content = previewObject(val); 107 | } 108 | 109 | if (!braceWrap) return content; 110 | return {{content}}; 111 | } 112 | 113 | export default class PropVal extends React.Component { 114 | render() { 115 | return previewProp(this.props.val); 116 | } 117 | } 118 | 119 | module.exports = PropVal; 120 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ### v3.3.0 4 | 5 | * Add setDefaults function [PR114](https://github.com/kadirahq/react-storybook-addon-info/pull/114) 6 | 7 | ### v3.2.4 8 | 9 | * Add missing dist files [PR113](https://github.com/kadirahq/react-storybook-addon-info/pull/113) 10 | 11 | ### v3.2.3 12 | 13 | * Handle number type nodes [PR110](https://github.com/kadirahq/react-storybook-addon-info/pull/110) 14 | 15 | ### v3.2.2 16 | 17 | * Use markdown-to-react-components npm package instead of our fork. Our PR to them is merged and published. [PR109](https://github.com/kadirahq/react-storybook-addon-info/pull/109) 18 | 19 | ### v3.2.1 20 | 21 | * Handle false values for types [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) 22 | 23 | ### v3.2.0 24 | 25 | * Support custom MTRC config [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) 26 | * Fix propTables prop validation with a default value [PR55](https://github.com/kadirahq/react-storybook-addon-info/pull/55) 27 | 28 | ### v3.1.4 29 | 30 | * Remove propTables prop validation warning [PR53](https://github.com/kadirahq/react-storybook-addon-info/pull/53) 31 | * Update example storybook [PR52](https://github.com/kadirahq/react-storybook-addon-info/pull/52) 32 | 33 | ### v3.1.3 34 | 35 | * Fix wrong detection of propType when isRequired is set [PR49](https://github.com/kadirahq/react-storybook-addon-info/pull/49) 36 | * Add displayName for Button [PR51](https://github.com/kadirahq/react-storybook-addon-info/pull/51) 37 | 38 | ### v3.1.2 39 | 40 | * Fixed a bug which made the `info` to not display and the `options` parameter to be ignored when `info` is not given.[PR45](https://github.com/kadirahq/react-storybook-addon-info/pull/45) 41 | 42 | ### v3.1.1 43 | 44 | * Add a z-index for rendered items to make the overlay always display on top [PR38](https://github.com/kadirahq/react-storybook-addon-info/pull/38) 45 | 46 | ### v3.1.0 47 | 48 | * Make the `info` argument optional [PR37](https://github.com/kadirahq/react-storybook-addon-info/pull/37) 49 | 50 | ### v3.0.10 51 | 52 | * Render the component inside a div element when on inline mode [PR34](https://github.com/kadirahq/react-storybook-addon-info/pull/34) 53 | 54 | ### v3.0.9 55 | 56 | * Add missing `@kadira/storybook` devDependencies [PR25](https://github.com/kadirahq/react-storybook-addon-info/pull/25) 57 | * Improve prop rendering in jsx source view [PR24](https://github.com/kadirahq/react-storybook-addon-info/pull/24) 58 | * Avoid warning message with "webkitFontSmoothing" [PR30](https://github.com/kadirahq/react-storybook-addon-info/pull/30) 59 | * Remove max-width style rule for wrapper [PR31](https://github.com/kadirahq/react-storybook-addon-info/pull/31) and [PR36](https://github.com/kadirahq/react-storybook-addon-info/pull/36) 60 | * Improve prop table rendering (handle css resets) [PR32](https://github.com/kadirahq/react-storybook-addon-info/pull/32) 61 | 62 | ### v3.0.8 63 | 64 | * Fixed unkeyed array iteration warning in React with: [PR23](https://github.com/kadirahq/react-storybook-addon-info/pull/23) 65 | 66 | ### v3.0.7 67 | 68 | * Improve default display in prop table. See [#16](https://github.com/kadirahq/react-storybook-addon-info/pull/16) 69 | 70 | ### v3.0.6 71 | 72 | * Improve function type and react element type props display. See [#14](https://github.com/kadirahq/react-storybook-addon-info/pull/14) 73 | 74 | ### v3.0.5 75 | 76 | * Over-indentation of ending tag in source code is fixed. See [#13](https://github.com/kadirahq/react-storybook-addon-info/pull/13) 77 | 78 | ### v3.0.4 79 | 80 | * Remove the need to use json-loader with webpack when using this package. 81 | See: [#12](https://github.com/kadirahq/react-storybook-addon-info/issues/12) 82 | 83 | ### v3.0.0 84 | 85 | * Add the version which works as an React Storybook addon. 86 | -------------------------------------------------------------------------------- /dist/components/Props.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _keys = require('babel-runtime/core-js/object/keys'); 8 | 9 | var _keys2 = _interopRequireDefault(_keys); 10 | 11 | var _typeof2 = require('babel-runtime/helpers/typeof'); 12 | 13 | var _typeof3 = _interopRequireDefault(_typeof2); 14 | 15 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); 16 | 17 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); 18 | 19 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); 20 | 21 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); 22 | 23 | var _createClass2 = require('babel-runtime/helpers/createClass'); 24 | 25 | var _createClass3 = _interopRequireDefault(_createClass2); 26 | 27 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); 28 | 29 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); 30 | 31 | var _inherits2 = require('babel-runtime/helpers/inherits'); 32 | 33 | var _inherits3 = _interopRequireDefault(_inherits2); 34 | 35 | var _react = require('react'); 36 | 37 | var _react2 = _interopRequireDefault(_react); 38 | 39 | var _PropVal = require('./PropVal'); 40 | 41 | var _PropVal2 = _interopRequireDefault(_PropVal); 42 | 43 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 44 | 45 | var stylesheet = { 46 | propStyle: {}, 47 | propNameStyle: {}, 48 | propValueStyle: {} 49 | }; 50 | 51 | var Props = function (_React$Component) { 52 | (0, _inherits3.default)(Props, _React$Component); 53 | 54 | function Props() { 55 | (0, _classCallCheck3.default)(this, Props); 56 | return (0, _possibleConstructorReturn3.default)(this, (Props.__proto__ || (0, _getPrototypeOf2.default)(Props)).apply(this, arguments)); 57 | } 58 | 59 | (0, _createClass3.default)(Props, [{ 60 | key: 'render', 61 | value: function render() { 62 | var props = this.props.node.props; 63 | var defaultProps = this.props.node.type.defaultProps; 64 | if (!props || (typeof props === 'undefined' ? 'undefined' : (0, _typeof3.default)(props)) !== 'object') { 65 | return _react2.default.createElement('span', null); 66 | } 67 | 68 | var propStyle = stylesheet.propStyle, 69 | propValueStyle = stylesheet.propValueStyle, 70 | propNameStyle = stylesheet.propNameStyle; 71 | 72 | 73 | var names = (0, _keys2.default)(props).filter(function (name) { 74 | return name[0] !== '_' && name !== 'children' && (!defaultProps || props[name] != defaultProps[name]); 75 | }); 76 | 77 | var breakIntoNewLines = names.length > 3; 78 | var endingSpace = this.props.singleLine ? ' ' : ''; 79 | 80 | var items = []; 81 | names.forEach(function (name, i) { 82 | items.push(_react2.default.createElement( 83 | 'span', 84 | { key: name }, 85 | breakIntoNewLines ? _react2.default.createElement( 86 | 'span', 87 | null, 88 | _react2.default.createElement('br', null), 89 | '\xA0\xA0' 90 | ) : ' ', 91 | _react2.default.createElement( 92 | 'span', 93 | { style: propNameStyle }, 94 | name 95 | ), 96 | (!props[name] || typeof props[name] !== 'boolean') && _react2.default.createElement( 97 | 'span', 98 | null, 99 | '=', 100 | _react2.default.createElement( 101 | 'span', 102 | { style: propValueStyle }, 103 | _react2.default.createElement(_PropVal2.default, { val: props[name] }) 104 | ) 105 | ), 106 | i === names.length - 1 && (breakIntoNewLines ? _react2.default.createElement('br', null) : endingSpace) 107 | )); 108 | }); 109 | 110 | return _react2.default.createElement( 111 | 'span', 112 | null, 113 | items 114 | ); 115 | } 116 | }]); 117 | return Props; 118 | }(_react2.default.Component); 119 | 120 | exports.default = Props; -------------------------------------------------------------------------------- /dist/components/markdown/text.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.A = exports.UL = exports.LI = exports.P = undefined; 7 | 8 | var _extends2 = require('babel-runtime/helpers/extends'); 9 | 10 | var _extends3 = _interopRequireDefault(_extends2); 11 | 12 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); 13 | 14 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); 15 | 16 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); 17 | 18 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); 19 | 20 | var _createClass2 = require('babel-runtime/helpers/createClass'); 21 | 22 | var _createClass3 = _interopRequireDefault(_createClass2); 23 | 24 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); 25 | 26 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); 27 | 28 | var _inherits2 = require('babel-runtime/helpers/inherits'); 29 | 30 | var _inherits3 = _interopRequireDefault(_inherits2); 31 | 32 | var _react = require('react'); 33 | 34 | var _react2 = _interopRequireDefault(_react); 35 | 36 | var _theme = require('../theme'); 37 | 38 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 39 | 40 | var P = exports.P = function (_React$Component) { 41 | (0, _inherits3.default)(P, _React$Component); 42 | 43 | function P() { 44 | (0, _classCallCheck3.default)(this, P); 45 | return (0, _possibleConstructorReturn3.default)(this, (P.__proto__ || (0, _getPrototypeOf2.default)(P)).apply(this, arguments)); 46 | } 47 | 48 | (0, _createClass3.default)(P, [{ 49 | key: 'render', 50 | value: function render() { 51 | var style = (0, _extends3.default)({}, _theme.baseFonts, { 52 | fontSize: '15px' 53 | }); 54 | return _react2.default.createElement( 55 | 'p', 56 | { style: style }, 57 | this.props.children 58 | ); 59 | } 60 | }]); 61 | return P; 62 | }(_react2.default.Component); 63 | 64 | var LI = exports.LI = function (_React$Component2) { 65 | (0, _inherits3.default)(LI, _React$Component2); 66 | 67 | function LI() { 68 | (0, _classCallCheck3.default)(this, LI); 69 | return (0, _possibleConstructorReturn3.default)(this, (LI.__proto__ || (0, _getPrototypeOf2.default)(LI)).apply(this, arguments)); 70 | } 71 | 72 | (0, _createClass3.default)(LI, [{ 73 | key: 'render', 74 | value: function render() { 75 | var style = (0, _extends3.default)({}, _theme.baseFonts, { 76 | fontSize: '15px' 77 | }); 78 | return _react2.default.createElement( 79 | 'li', 80 | { style: style }, 81 | this.props.children 82 | ); 83 | } 84 | }]); 85 | return LI; 86 | }(_react2.default.Component); 87 | 88 | var UL = exports.UL = function (_React$Component3) { 89 | (0, _inherits3.default)(UL, _React$Component3); 90 | 91 | function UL() { 92 | (0, _classCallCheck3.default)(this, UL); 93 | return (0, _possibleConstructorReturn3.default)(this, (UL.__proto__ || (0, _getPrototypeOf2.default)(UL)).apply(this, arguments)); 94 | } 95 | 96 | (0, _createClass3.default)(UL, [{ 97 | key: 'render', 98 | value: function render() { 99 | var style = (0, _extends3.default)({}, _theme.baseFonts, { 100 | fontSize: '15px' 101 | }); 102 | 103 | return _react2.default.createElement( 104 | 'ul', 105 | { style: style }, 106 | this.props.children 107 | ); 108 | } 109 | }]); 110 | return UL; 111 | }(_react2.default.Component); 112 | 113 | var A = exports.A = function (_React$Component4) { 114 | (0, _inherits3.default)(A, _React$Component4); 115 | 116 | function A() { 117 | (0, _classCallCheck3.default)(this, A); 118 | return (0, _possibleConstructorReturn3.default)(this, (A.__proto__ || (0, _getPrototypeOf2.default)(A)).apply(this, arguments)); 119 | } 120 | 121 | (0, _createClass3.default)(A, [{ 122 | key: 'render', 123 | value: function render() { 124 | var style = { 125 | color: '#3498db' 126 | }; 127 | 128 | return _react2.default.createElement( 129 | 'a', 130 | { href: this.props.href, style: style }, 131 | this.props.children 132 | ); 133 | } 134 | }]); 135 | return A; 136 | }(_react2.default.Component); -------------------------------------------------------------------------------- /src/components/PropTable.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropVal from './PropVal'; 3 | 4 | const stylesheet = { 5 | propTable: { 6 | marginLeft: -10, 7 | borderSpacing: '10px 5px', 8 | borderCollapse: 'separate', 9 | }, 10 | }; 11 | 12 | function isNotEmpty(obj) { 13 | return obj && Object.keys(obj).length > 0; 14 | } 15 | 16 | const PropTypesMap = new Map(); 17 | for (const typeName in React.PropTypes) { 18 | if (!React.PropTypes.hasOwnProperty(typeName)) { 19 | continue; 20 | } 21 | const type = React.PropTypes[typeName]; 22 | PropTypesMap.set(type, typeName); 23 | PropTypesMap.set(type.isRequired, typeName); 24 | } 25 | 26 | function renderDocgenPropType(propType) { 27 | if (!propType) { 28 | return 'unknown'; 29 | } 30 | 31 | const name = propType.name; 32 | 33 | switch (name) { 34 | case 'arrayOf': 35 | return `${propType.value.name}[]`; 36 | case 'instanceOf': 37 | return propType.value; 38 | case 'union': 39 | return propType.raw; 40 | default: 41 | return name; 42 | } 43 | } 44 | 45 | function hasDocgen(type) { 46 | return isNotEmpty(type.__docgenInfo); 47 | } 48 | 49 | function propsFromDocgen(type) { 50 | let props = null; 51 | 52 | const docgenInfo = type.__docgenInfo || {}; 53 | const docgenInfoProps = docgenInfo.props; 54 | 55 | if (docgenInfoProps) { 56 | props = {}; 57 | for (const propName in docgenInfoProps) { 58 | if (!docgenInfoProps.hasOwnProperty(propName)) { 59 | continue; 60 | } 61 | const docgenInfoProp = docgenInfoProps[propName]; 62 | const defaultValueDesc = docgenInfoProp.defaultValue || {}; 63 | const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other'; 64 | 65 | props[propName] = { 66 | property: propName, 67 | propType: renderDocgenPropType(propType), 68 | required: docgenInfoProp.required, 69 | description: docgenInfoProp.description, 70 | defaultValue: defaultValueDesc.value, 71 | }; 72 | } 73 | } 74 | return props; 75 | } 76 | 77 | function propsFromPropTypes(type) { 78 | let props = null; 79 | 80 | if (type.propTypes) { 81 | props = {}; 82 | for (const property in type.propTypes) { 83 | if (!type.propTypes.hasOwnProperty(property)) { 84 | continue; 85 | } 86 | const typeInfo = type.propTypes[property]; 87 | const propType = PropTypesMap.get(typeInfo) || 'other'; 88 | const required = typeInfo.isRequired === undefined ? 'yes' : 'no'; 89 | props[property] = { property, propType, required }; 90 | } 91 | } 92 | 93 | if (type.defaultProps) { 94 | for (const property in type.defaultProps) { 95 | if (!type.defaultProps.hasOwnProperty(property)) { 96 | continue; 97 | } 98 | const value = type.defaultProps[property]; 99 | if (value === undefined) { 100 | continue; 101 | } 102 | if (!props[property]) { 103 | props[property] = { property }; 104 | } 105 | props[property].defaultValue = value; 106 | } 107 | } 108 | return props; 109 | } 110 | 111 | export default class PropTable extends React.Component { 112 | render() { 113 | const type = this.props.type; 114 | 115 | if (!type) { 116 | return null; 117 | } 118 | 119 | const props = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type); 120 | 121 | if (isNotEmpty(props)) { 122 | return ( 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | {Object.values(props).sort((a, b) => a.property > b.property).map(row => ( 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | ))} 143 | 144 |
    propertypropTyperequireddefaultdescription
    {row.property}{row.propType}{row.required}{row.defaultValue === undefined ? '-' : }{row.description}
    145 | ); 146 | } else { 147 | return No propTypes defined!; 148 | } 149 | } 150 | } 151 | 152 | PropTable.displayName = 'PropTable'; 153 | PropTable.propTypes = { 154 | type: React.PropTypes.func, 155 | }; 156 | -------------------------------------------------------------------------------- /dist/components/markdown/code.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.Blockquote = exports.Pre = exports.Code = undefined; 7 | 8 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); 9 | 10 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); 11 | 12 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); 13 | 14 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); 15 | 16 | var _createClass2 = require('babel-runtime/helpers/createClass'); 17 | 18 | var _createClass3 = _interopRequireDefault(_createClass2); 19 | 20 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); 21 | 22 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); 23 | 24 | var _inherits2 = require('babel-runtime/helpers/inherits'); 25 | 26 | var _inherits3 = _interopRequireDefault(_inherits2); 27 | 28 | var _react = require('react'); 29 | 30 | var _react2 = _interopRequireDefault(_react); 31 | 32 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 33 | 34 | var Code = exports.Code = function (_React$Component) { 35 | (0, _inherits3.default)(Code, _React$Component); 36 | 37 | function Code() { 38 | (0, _classCallCheck3.default)(this, Code); 39 | return (0, _possibleConstructorReturn3.default)(this, (Code.__proto__ || (0, _getPrototypeOf2.default)(Code)).apply(this, arguments)); 40 | } 41 | 42 | (0, _createClass3.default)(Code, [{ 43 | key: 'componentDidMount', 44 | value: function componentDidMount() { 45 | this.highlight(); 46 | } 47 | }, { 48 | key: 'componentDidUpdate', 49 | value: function componentDidUpdate() { 50 | this.highlight(); 51 | } 52 | }, { 53 | key: 'highlight', 54 | value: function highlight() { 55 | if (typeof Prism !== 'undefined') { 56 | Prism.highlightAll(); 57 | } 58 | } 59 | }, { 60 | key: 'render', 61 | value: function render() { 62 | var codeStyle = { 63 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 64 | backgroundColor: '#fafafa' 65 | }; 66 | 67 | var preStyle = { 68 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 69 | backgroundColor: '#fafafa', 70 | padding: '.5rem', 71 | lineHeight: 1.5, 72 | overflowX: 'scroll' 73 | }; 74 | 75 | var className = this.props.language ? 'language-' + this.props.language : ''; 76 | 77 | return _react2.default.createElement( 78 | 'pre', 79 | { style: preStyle, className: className }, 80 | _react2.default.createElement( 81 | 'code', 82 | { style: codeStyle, className: className }, 83 | this.props.code 84 | ) 85 | ); 86 | } 87 | }]); 88 | return Code; 89 | }(_react2.default.Component); 90 | 91 | var Pre = exports.Pre = function (_React$Component2) { 92 | (0, _inherits3.default)(Pre, _React$Component2); 93 | 94 | function Pre() { 95 | (0, _classCallCheck3.default)(this, Pre); 96 | return (0, _possibleConstructorReturn3.default)(this, (Pre.__proto__ || (0, _getPrototypeOf2.default)(Pre)).apply(this, arguments)); 97 | } 98 | 99 | (0, _createClass3.default)(Pre, [{ 100 | key: 'render', 101 | value: function render() { 102 | var style = { 103 | fontSize: '.88em', 104 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 105 | backgroundColor: '#fafafa', 106 | padding: '.5rem', 107 | lineHeight: 1.5, 108 | overflowX: 'scroll' 109 | }; 110 | 111 | return _react2.default.createElement( 112 | 'pre', 113 | { style: style }, 114 | this.props.children 115 | ); 116 | } 117 | }]); 118 | return Pre; 119 | }(_react2.default.Component); 120 | 121 | var Blockquote = exports.Blockquote = function (_React$Component3) { 122 | (0, _inherits3.default)(Blockquote, _React$Component3); 123 | 124 | function Blockquote() { 125 | (0, _classCallCheck3.default)(this, Blockquote); 126 | return (0, _possibleConstructorReturn3.default)(this, (Blockquote.__proto__ || (0, _getPrototypeOf2.default)(Blockquote)).apply(this, arguments)); 127 | } 128 | 129 | (0, _createClass3.default)(Blockquote, [{ 130 | key: 'render', 131 | value: function render() { 132 | var style = { 133 | fontSize: '1.88em', 134 | fontFamily: 'Menlo, Monaco, "Courier New", monospace', 135 | borderLeft: '8px solid #fafafa', 136 | padding: '1rem' 137 | }; 138 | 139 | return _react2.default.createElement( 140 | 'blockquote', 141 | { style: style }, 142 | this.props.children 143 | ); 144 | } 145 | }]); 146 | return Blockquote; 147 | }(_react2.default.Component); -------------------------------------------------------------------------------- /example/story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Button from './Button'; 3 | import { storiesOf, action } from '@kadira/storybook'; 4 | import backgrounds from 'react-storybook-addon-backgrounds'; 5 | 6 | storiesOf('Button') 7 | .addWithInfo( 8 | 'simple usage', 9 | ` 10 | This is the basic usage with the button with providing a label to show the text. 11 | `, 12 | () => ( 13 |
    14 |
    20 | ), 21 | ); 22 | 23 | storiesOf('Button') 24 | .addWithInfo( 25 | 'simple usage (inline info)', 26 | ` 27 | This is the basic usage with the button with providing a label to show the text. 28 | `, 29 | () => (