@kadira/react-storybook-addon-info - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

dist/components/markdown/code.js

@@ -43,2 +43,19 @@ 'use strict';
   (0, _createClass3.default)(Code, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.highlight();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.highlight();
+    }
+  }, {
+    key: 'highlight',
+    value: function highlight() {
+      if (typeof Prism !== 'undefined') {
+        Prism.highlightAll();
+      }
+    }
+  }, {
     key: 'render',
@@ -59,8 +76,10 @@ value: function render() {
 
+      var className = this.props.language ? 'language-' + this.props.language : '';
+
       return _react2.default.createElement(
         'pre',
-        { style: preStyle },
+        { style: preStyle, className: className },
         _react2.default.createElement(
           'code',
-          { style: codeStyle },
+          { style: codeStyle, className: className },
           this.props.code
@@ -67,0 +86,0 @@ )

dist/components/markdown/htags.js

@@ -56,3 +56,3 @@ 'use strict';
         padding: 0,
-        fontSize: '40'
+        fontSize: '40px'
       });
@@ -85,3 +85,3 @@
         padding: 0,
-        fontSize: '30'
+        fontSize: '30px'
       });
@@ -114,3 +114,3 @@
         padding: 0,
-        fontSize: '22',
+        fontSize: '22px',
         textTransform: 'uppercase'
@@ -144,3 +144,3 @@ });
         padding: 0,
-        fontSize: '20'
+        fontSize: '20px'
       });
@@ -173,3 +173,3 @@
         padding: 0,
-        fontSize: '18'
+        fontSize: '18px'
       });
@@ -202,3 +202,3 @@
         padding: 0,
-        fontSize: '18'
+        fontSize: '18px'
       });
@@ -205,0 +205,0 @@

dist/components/markdown/text.js

@@ -52,3 +52,3 @@ 'use strict';
       var style = (0, _extends3.default)({}, _theme.baseFonts, {
-        fontSize: 15
+        fontSize: '15px'
       });
@@ -77,3 +77,3 @@ return _react2.default.createElement(
       var style = (0, _extends3.default)({}, _theme.baseFonts, {
-        fontSize: 15
+        fontSize: '15px'
       });
@@ -102,3 +102,3 @@ return _react2.default.createElement(
       var style = (0, _extends3.default)({}, _theme.baseFonts, {
-        fontSize: 15
+        fontSize: '15px'
       });
@@ -105,0 +105,0 @@

dist/components/Node.js

@@ -59,7 +59,7 @@ 'use strict';
     value: function render() {
-      var _props = this.props;
-      var node = _props.node;
-      var depth = _props.depth;
-      var tagStyle = stylesheet.tagStyle;
-      var containerStyle = stylesheet.containerStyle;
+      var _props = this.props,
+          node = _props.node,
+          depth = _props.depth;
+      var tagStyle = stylesheet.tagStyle,
+          containerStyle = stylesheet.containerStyle;
 
@@ -74,10 +74,10 @@
 
-      var _getData = getData(node);
+      var _getData = getData(node),
+          name = _getData.name,
+          text = _getData.text,
+          children = _getData.children;
 
-      var name = _getData.name;
-      var text = _getData.text;
-      var children = _getData.children;
-
       // Just text
 
+
       if (!name) {
@@ -84,0 +84,0 @@ return _react2.default.createElement(

dist/components/Props.js

@@ -68,5 +68,5 @@ 'use strict';
 
-      var propStyle = stylesheet.propStyle;
-      var propValueStyle = stylesheet.propValueStyle;
-      var propNameStyle = stylesheet.propNameStyle;
+      var propStyle = stylesheet.propStyle,
+          propValueStyle = stylesheet.propValueStyle,
+          propNameStyle = stylesheet.propNameStyle;
 
@@ -73,0 +73,0 @@

dist/components/Story.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -70,3 +74,3 @@
       fontFamily: 'sans-serif',
-      fontSize: 12,
+      fontSize: '12px',
       display: 'block',
@@ -103,3 +107,3 @@ position: 'fixed',
     lineHeight: 1.45,
-    fontSize: 15
+    fontSize: '15px'
   }),
@@ -109,7 +113,11 @@ infoContent: {
   },
+  jsxInfoContent: {
+    borderTop: '1px solid #eee',
+    margin: '20px 0 0 0'
+  },
   header: {
     h1: {
-      margin: '20px 0 0 0',
+      margin: 0,
       padding: 0,
-      fontSize: 35
+      fontSize: '35px'
     },
@@ -120,6 +128,7 @@ h2: {
       fontWeight: 400,
-      fontSize: 22
+      fontSize: '22px'
     },
     body: {
       borderBottom: '1px solid #eee',
+      paddingTop: 10,
       marginBottom: 10
@@ -132,3 +141,3 @@ }
       padding: '0 0 5px 0',
-      fontSize: 25,
+      fontSize: '25px',
       borderBottom: '1px solid #EEE'
@@ -156,3 +165,6 @@ }
 
-    _this.state = { open: false };
+    _this.state = {
+      open: false,
+      stylesheet: _this.props.styles(JSON.parse((0, _stringify2.default)(stylesheet)))
+    };
     _markdownToReactComponents2.default.configure(_this.props.mtrcConf);
@@ -163,2 +175,9 @@ return _this;
   (0, _createClass3.default)(Story, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({
+        stylesheet: nextProps.styles(JSON.parse((0, _stringify2.default)(stylesheet)))
+      });
+    }
+  }, {
     key: '_renderStory',
@@ -180,6 +199,6 @@ value: function _renderStory() {
           'div',
-          { style: stylesheet.infoPage },
+          { style: this.state.stylesheet.infoPage },
           _react2.default.createElement(
             'div',
-            { style: stylesheet.infoBody },
+            { style: this.state.stylesheet.infoBody },
             this._getInfoHeader()
@@ -195,6 +214,6 @@ )
           'div',
-          { style: stylesheet.infoPage },
+          { style: this.state.stylesheet.infoPage },
           _react2.default.createElement(
             'div',
-            { style: stylesheet.infoBody },
+            { style: this.state.stylesheet.infoBody },
             this._getInfoContent(),
@@ -234,3 +253,3 @@ this._getSourceCode(),
           'div',
-          { style: stylesheet.children },
+          { style: this.state.stylesheet.children },
           this.props.children
@@ -253,6 +272,6 @@ ),
             'div',
-            { style: stylesheet.infoPage },
+            { style: this.state.stylesheet.infoPage },
             _react2.default.createElement(
               'div',
-              { style: stylesheet.infoBody },
+              { style: this.state.stylesheet.infoBody },
               this._getInfoHeader(),
@@ -276,6 +295,6 @@ this._getInfoContent(),
         'div',
-        { style: stylesheet.header.body },
+        { style: this.state.stylesheet.header.body },
         _react2.default.createElement(
           'h1',
-          { style: stylesheet.header.h1 },
+          { style: this.state.stylesheet.header.h1 },
           this.props.context.kind
@@ -285,3 +304,3 @@ ),
           'h2',
-          { style: stylesheet.header.h2 },
+          { style: this.state.stylesheet.header.h2 },
           this.props.context.story
@@ -297,2 +316,13 @@ )
       }
+
+      if (_react2.default.isValidElement(this.props.info)) {
+        return _react2.default.createElement(
+          'div',
+          {
+            style: this.props.showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent
+          },
+          this.props.info
+        );
+      }
+
       var lines = this.props.info.split('\n');
@@ -312,3 +342,3 @@ while (lines[0].trim() === '') {
         'div',
-        { style: stylesheet.infoContent },
+        { style: this.state.stylesheet.infoContent },
         (0, _markdownToReactComponents2.default)(source).tree
@@ -329,3 +359,3 @@ );
           'h1',
-          { style: stylesheet.source.h1 },
+          { style: this.state.stylesheet.source.h1 },
           'Story Source'
@@ -345,2 +375,4 @@ ),
     value: function _getPropTables() {
+      var _this3 = this;
+
       var types = new _map2.default();
@@ -396,3 +428,3 @@
             'h2',
-            { style: stylesheet.propTableHead },
+            { style: _this3.state.stylesheet.propTableHead },
             '"',
@@ -415,3 +447,3 @@ type.displayName || type.name,
           'h1',
-          { style: stylesheet.source.h1 },
+          { style: this.state.stylesheet.source.h1 },
           'Prop Types'
@@ -443,3 +475,3 @@ ),
   context: _react2.default.PropTypes.object,
-  info: _react2.default.PropTypes.string,
+  info: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.node]),
   propTables: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.func),
@@ -449,2 +481,3 @@ showInline: _react2.default.PropTypes.bool,
   showSource: _react2.default.PropTypes.bool,
+  styles: _react2.default.PropTypes.func.isRequired,
   children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.object, _react2.default.PropTypes.array]),
@@ -451,0 +484,0 @@ mtrcConf: _react2.default.PropTypes.object

dist/index.js

@@ -76,7 +76,7 @@ 'use strict';
     var mtrcConf = (0, _extends3.default)({}, defaultMtrcConf);
-    if (_options && _options.mtrcConf) {
-      (0, _assign2.default)(mtrcConf, _options.mtrcConf);
+    if (options && options.mtrcConf) {
+      (0, _assign2.default)(mtrcConf, options.mtrcConf);
     }
 
-    this.add(storyName, function (context) {
+    return this.add(storyName, function (context) {
       var props = {
@@ -89,2 +89,5 @@ info: info,
         propTables: options.propTables,
+        styles: typeof options.styles === 'function' ? options.styles : function (s) {
+          return s;
+        },
         mtrcConf: mtrcConf
@@ -91,0 +94,0 @@ };

example/story.js

 import React from 'react';
 import Button from './Button';
 import { storiesOf, action } from '@kadira/storybook';
+import backgrounds from 'react-storybook-addon-backgrounds';
 
@@ -89,1 +90,75 @@ storiesOf('Button')
   );
+
+storiesOf('Button')
+    .addWithInfo(
+      'simple usage (JSX description)',
+      (<div>
+          <h2>This is a JSX info section</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
+              Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
+              nulla.</p>
+          <p>
+              <a
+                  href='https://github.com/storybooks/react-storybook-addon-info'>
+              This is a link</a>
+          </p>
+          <p>
+              <img src="http://placehold.it/350x150" />
+          </p>
+      </div>),
+      () => (
+        <div>
+          <Button label="The Button" onClick={action('onClick')}/>
+          <br />
+          <p>
+            Click the "?" mark at top-right to view the info.
+          </p>
+        </div>
+      ),
+    );
+
+storiesOf('Button')
+    .addWithInfo(
+      'simple usage (inline JSX description)',
+      (<div>
+          <h2>This is a JSX info section</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
+              Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
+              nulla.</p>
+          <p>
+              <a
+                  href='https://github.com/storybooks/react-storybook-addon-info'>
+              This is a link</a>
+          </p>
+          <p>
+              <img src="http://placehold.it/350x150" />
+          </p>
+      </div>),
+      () => (<Button label="The Button" onClick={action('onClick')}/>),
+      { inline: true }
+    );
+
+storiesOf('Button')
+  .addDecorator(backgrounds([
+    { name: 'dark', value: '#333', default: true },
+  ]))
+  .addWithInfo(
+    'with custom styles',
+    `
+      This is an example of how to customize the styles of the info components.
+
+      For the full styles available, see \`./src/components/Story.js\`
+    `,
+    () => (<Button label="The Button" onClick={action('onClick')}/>),
+    {
+      inline: true,
+      styles: (stylesheet) => {
+        stylesheet.infoPage = {
+          backgroundColor: '#ccc'
+        };
+        return stylesheet;
+      }
+    }
+  );

package.json

 {
   "name": "@kadira/react-storybook-addon-info",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "A React Storybook addon to show additional information for your stories.",
@@ -43,2 +43,3 @@ "repository": {
     "react-dom": "^0.14.7 || ^15.0.0",
+    "react-storybook-addon-backgrounds": "0.0.7",
     "sinon": "^1.17.6"
@@ -45,0 +46,0 @@ },

README.md

@@ -18,3 +18,2 @@ # React Storybook Info Addon
 ```js
-import React from 'react';
 import { configure, setAddon } from '@kadira/storybook';
@@ -21,0 +20,0 @@ import infoAddon from '@kadira/react-storybook-addon-info';

src/components/markdown/code.js

 import React from 'react';
 
 export class Code extends React.Component {
+
+  componentDidMount() {
+    this.highlight()
+  }
+
+  componentDidUpdate() {
+    this.highlight()
+  }
+
+  highlight() {
+    if (typeof Prism !== 'undefined') {
+      Prism.highlightAll()
+    }
+  }
+
   render() {
@@ -18,5 +33,7 @@ const codeStyle = {
 
+    const className = this.props.language ? `language-${this.props.language}` : '';
+
     return (
-      <pre style={preStyle}>
-        <code style={codeStyle}>
+      <pre style={preStyle} className={className}>
+        <code style={codeStyle} className={className}>
           { this.props.code }
@@ -23,0 +40,0 @@ </code>

src/components/markdown/htags.js

@@ -12,3 +12,3 @@ import React from 'react';
       padding: 0,
-      fontSize: '40',
+      fontSize: '40px',
     };
@@ -27,3 +27,3 @@
       padding: 0,
-      fontSize: '30',
+      fontSize: '30px',
     };
@@ -42,3 +42,3 @@
       padding: 0,
-      fontSize: '22',
+      fontSize: '22px',
       textTransform: 'uppercase',
@@ -58,3 +58,3 @@ };
       padding: 0,
-      fontSize: '20',
+      fontSize: '20px',
     };
@@ -73,3 +73,3 @@
       padding: 0,
-      fontSize: '18',
+      fontSize: '18px',
     };
@@ -88,3 +88,3 @@
       padding: 0,
-      fontSize: '18',
+      fontSize: '18px',
     };
@@ -91,0 +91,0 @@

src/components/markdown/text.js

@@ -8,3 +8,3 @@ import React from 'react';
       ...baseFonts,
-      fontSize: 15,
+      fontSize: '15px',
     };
@@ -19,3 +19,3 @@ return <p style={style}>{this.props.children}</p>;
       ...baseFonts,
-      fontSize: 15,
+      fontSize: '15px',
     };
@@ -30,3 +30,3 @@ return <li style={style}>{this.props.children}</li>;
       ...baseFonts,
-      fontSize: 15,
+      fontSize: '15px',
     };
@@ -33,0 +33,0 @@

src/components/Story.js

@@ -12,3 +12,3 @@ import React from 'react';
       fontFamily: 'sans-serif',
-      fontSize: 12,
+      fontSize: '12px',
       display: 'block',
@@ -46,3 +46,3 @@ position: 'fixed',
     lineHeight: 1.45,
-    fontSize: 15,
+    fontSize: '15px',
   },
@@ -52,7 +52,11 @@ infoContent: {
   },
+  jsxInfoContent: {
+    borderTop: '1px solid #eee',
+    margin: '20px 0 0 0',
+  },
   header: {
     h1: {
-      margin: '20px 0 0 0',
+      margin: 0,
       padding: 0,
-      fontSize: 35,
+      fontSize: '35px',
     },
@@ -63,6 +67,7 @@ h2: {
       fontWeight: 400,
-      fontSize: 22,
+      fontSize: '22px',
     },
     body: {
       borderBottom: '1px solid #eee',
+      paddingTop: 10,
       marginBottom: 10,
@@ -75,3 +80,3 @@ },
       padding: '0 0 5px 0',
-      fontSize: 25,
+      fontSize: '25px',
       borderBottom: '1px solid #EEE',
@@ -88,6 +93,15 @@ },
     super(...args);
-    this.state = { open: false };
+    this.state = {
+      open: false,
+      stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet)))
+    };
     MTRC.configure(this.props.mtrcConf);
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet)))
+    });
+  }
+
   _renderStory() {
@@ -104,4 +118,4 @@ return (
       <div>
-        <div style={stylesheet.infoPage}>
-          <div style={stylesheet.infoBody} >
+        <div style={this.state.stylesheet.infoPage}>
+          <div style={this.state.stylesheet.infoBody} >
             { this._getInfoHeader() }
@@ -113,4 +127,4 @@ </div>
         </div>
-        <div style={stylesheet.infoPage}>
-          <div style={stylesheet.infoBody} >
+        <div style={this.state.stylesheet.infoPage}>
+          <div style={this.state.stylesheet.infoBody} >
             { this._getInfoContent() }
@@ -148,3 +162,3 @@ { this._getSourceCode() }
       <div>
-        <div style={stylesheet.children}>
+        <div style={this.state.stylesheet.children}>
           { this.props.children }
@@ -155,4 +169,4 @@ </div>
           <a style={linkStyle} onClick={closeOverlay}>×</a>
-          <div style={stylesheet.infoPage}>
-            <div style={stylesheet.infoBody}>
+          <div style={this.state.stylesheet.infoPage}>
+            <div style={this.state.stylesheet.infoBody}>
               { this._getInfoHeader() }
@@ -175,5 +189,5 @@ { this._getInfoContent() }
     return (
-      <div style={stylesheet.header.body}>
-        <h1 style={stylesheet.header.h1}>{this.props.context.kind}</h1>
-        <h2 style={stylesheet.header.h2}>{this.props.context.story}</h2>
+      <div style={this.state.stylesheet.header.body}>
+        <h1 style={this.state.stylesheet.header.h1}>{this.props.context.kind}</h1>
+        <h2 style={this.state.stylesheet.header.h2}>{this.props.context.story}</h2>
       </div>
@@ -187,2 +201,14 @@ );
     }
+
+    if (React.isValidElement(this.props.info)) {
+      return (
+        <div
+          style={this.props.showInline ?
+            stylesheet.jsxInfoContent : stylesheet.infoContent}
+        >
+          {this.props.info}
+        </div>
+      );
+    }
+
     const lines = this.props.info.split('\n');
@@ -199,3 +225,3 @@ while (lines[0].trim() === '') {
     return (
-      <div style={stylesheet.infoContent}>
+      <div style={this.state.stylesheet.infoContent}>
         {MTRC(source).tree}
@@ -213,3 +239,3 @@ </div>
       <div>
-        <h1 style={stylesheet.source.h1}>Story Source</h1>
+        <h1 style={this.state.stylesheet.source.h1}>Story Source</h1>
         <Pre>
@@ -269,6 +295,6 @@ {React.Children.map(this.props.children, (root, idx) => (
 
-    const propTables = array.map(function (type, idx) {
+    const propTables = array.map((type, idx) => {
       return (
         <div key={idx}>
-          <h2 style={stylesheet.propTableHead}>"{type.displayName || type.name}" Component</h2>
+          <h2 style={this.state.stylesheet.propTableHead}>"{type.displayName || type.name}" Component</h2>
           <PropTable type={type} />
@@ -285,3 +311,3 @@ </div>
       <div>
-        <h1 style={stylesheet.source.h1}>Prop Types</h1>
+        <h1 style={this.state.stylesheet.source.h1}>Prop Types</h1>
         {propTables}
@@ -306,3 +332,6 @@ </div>
   context: React.PropTypes.object,
-  info: React.PropTypes.string,
+  info: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.node,
+  ]),
   propTables: React.PropTypes.arrayOf(React.PropTypes.func),
@@ -312,2 +341,3 @@ showInline: React.PropTypes.bool,
   showSource: React.PropTypes.bool,
+  styles: React.PropTypes.func.isRequired,
   children: React.PropTypes.oneOfType([
@@ -314,0 +344,0 @@ React.PropTypes.object,

src/index.js

@@ -53,7 +53,7 @@ import React from 'react';
     const mtrcConf = { ...defaultMtrcConf };
-    if (_options && _options.mtrcConf) {
-      Object.assign(mtrcConf, _options.mtrcConf);
+    if (options && options.mtrcConf) {
+      Object.assign(mtrcConf, options.mtrcConf);
     }
 
-    this.add(storyName, (context) => {
+    return this.add(storyName, (context) => {
       const props = {
@@ -66,2 +66,5 @@ info,
         propTables: options.propTables,
+        styles: typeof options.styles === 'function'
+          ? options.styles
+          : (s) => s,
         mtrcConf
@@ -68,0 +71,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

282840

increased by1.99%

Number of package files

43

increased by2.38%

Lines of code

2660

increased by6.57%

Worsened metrics

Dev dependency count

24

increased by4.35%

Number of lines in readme file

60

decreased by-1.64%

No dependency changes