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

Comparing version 3.0.8 to 3.0.9

CHANGELOG.md

 # Change Log
 
+### v3.0.9
+
+* Add missing `@kadira/storybook` devDependencies [PR25](https://github.com/kadirahq/react-storybook-addon-info/pull/25)
+* Improve prop rendering in jsx source view [PR24](https://github.com/kadirahq/react-storybook-addon-info/pull/24)
+* Avoid warning message with "webkitFontSmoothing" [PR30](https://github.com/kadirahq/react-storybook-addon-info/pull/30)
+* 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)
+* Improve prop table rendering (handle css resets) [PR32](https://github.com/kadirahq/react-storybook-addon-info/pull/32)
+
 ### v3.0.8
@@ -4,0 +12,0 @@

dist/components/Node.js

@@ -104,7 +104,7 @@ 'use strict';
           ),
-          _react2.default.createElement(_Props2.default, { node: node }),
+          _react2.default.createElement(_Props2.default, { node: node, singleLine: true }),
           _react2.default.createElement(
             'span',
             { style: tagStyle },
-            ' />'
+            '/>'
           )
@@ -111,0 +111,0 @@ );

dist/components/Props.js

@@ -46,5 +46,3 @@ 'use strict';
 var stylesheet = {
-  propStyle: {
-    paddingLeft: 8
-  },
+  propStyle: {},
   propNameStyle: {},
@@ -80,7 +78,16 @@ propValueStyle: {}
 
+      var breakIntoNewLines = names.length > 3;
+      var endingSpace = this.props.singleLine ? ' ' : '';
+
       var items = [];
-      names.slice(0, 3).forEach(function (name) {
+      names.forEach(function (name, i) {
         items.push(_react2.default.createElement(
           'span',
-          { key: name, style: propStyle },
+          { key: name },
+          breakIntoNewLines ? _react2.default.createElement(
+            'span',
+            null,
+            _react2.default.createElement('br', null),
+            '  '
+          ) : ' ',
           _react2.default.createElement(
@@ -91,8 +98,13 @@ 'span',
           ),
-          '=',
-          _react2.default.createElement(
+          (!props[name] || typeof props[name] !== 'boolean') && _react2.default.createElement(
             'span',
-            { style: propValueStyle },
-            _react2.default.createElement(_PropVal2.default, { val: props[name] })
-          )
+            null,
+            '=',
+            _react2.default.createElement(
+              'span',
+              { style: propValueStyle },
+              _react2.default.createElement(_PropVal2.default, { val: props[name] })
+            )
+          ),
+          i === names.length - 1 && (breakIntoNewLines ? _react2.default.createElement('br', null) : endingSpace)
         ));
@@ -99,0 +111,0 @@ });

dist/components/PropTable.js

@@ -54,2 +54,10 @@ 'use strict';
 
+var stylesheet = {
+  propTable: {
+    marginLeft: -10,
+    borderSpacing: '10px 5px',
+    borderCollapse: 'separate'
+  }
+};
+
 var PropTable = function (_React$Component) {
@@ -116,3 +124,3 @@ (0, _inherits3.default)(PropTable, _React$Component);
         'table',
-        null,
+        { style: stylesheet.propTable },
         _react2.default.createElement(
@@ -119,0 +127,0 @@ 'thead',

dist/components/PropVal.js

@@ -128,4 +128,6 @@ 'use strict';
 function previewProp(val) {
+  var braceWrap = true;
+  var content = null;
   if (typeof val === 'number') {
-    return _react2.default.createElement(
+    content = _react2.default.createElement(
       'span',
@@ -135,8 +137,7 @@ { style: valueStyles.number },
     );
-  }
-  if (typeof val === 'string') {
+  } else if (typeof val === 'string') {
     if (val.length > 50) {
       val = val.slice(0, 50) + '…';
     }
-    return _react2.default.createElement(
+    content = _react2.default.createElement(
       'span',
@@ -148,5 +149,5 @@ { style: valueStyles.string },
     );
-  }
-  if (typeof val === 'boolean') {
-    return _react2.default.createElement(
+    braceWrap = false;
+  } else if (typeof val === 'boolean') {
+    content = _react2.default.createElement(
       'span',
@@ -156,8 +157,6 @@ { style: valueStyles.bool },
     );
-  }
-  if (Array.isArray(val)) {
-    return previewArray(val);
-  }
-  if (typeof val === 'function') {
-    return _react2.default.createElement(
+  } else if (Array.isArray(val)) {
+    content = previewArray(val);
+  } else if (typeof val === 'function') {
+    content = _react2.default.createElement(
       'span',
@@ -167,5 +166,4 @@ { style: valueStyles.func },
     );
-  }
-  if (!val) {
-    return _react2.default.createElement(
+  } else if (!val) {
+    content = _react2.default.createElement(
       'span',
@@ -175,5 +173,4 @@ { style: valueStyles.empty },
     );
-  }
-  if ((typeof val === 'undefined' ? 'undefined' : (0, _typeof3.default)(val)) !== 'object') {
-    return _react2.default.createElement(
+  } else if ((typeof val === 'undefined' ? 'undefined' : (0, _typeof3.default)(val)) !== 'object') {
+    content = _react2.default.createElement(
       'span',
@@ -183,5 +180,4 @@ null,
     );
-  }
-  if (_react2.default.isValidElement(val)) {
-    return _react2.default.createElement(
+  } else if (_react2.default.isValidElement(val)) {
+    content = _react2.default.createElement(
       'span',
@@ -191,5 +187,14 @@ { style: valueStyles.object },
     );
+  } else {
+    content = previewObject(val);
   }
 
-  return previewObject(val);
+  if (!braceWrap) return content;
+  return _react2.default.createElement(
+    'span',
+    null,
+    '{',
+    content,
+    '}'
+  );
 }
@@ -196,0 +201,0 @@

dist/components/Story.js

@@ -120,3 +120,2 @@ 'use strict';
   fontWeight: 300,
-  maxWidth: '48rem',
   lineHeight: 1.45,
@@ -149,2 +148,4 @@ fontSize: 15
   }
+}), (0, _defineProperty3.default)(_stylesheet, 'propTableHead', {
+  margin: '20px 0 0 0'
 }), _stylesheet);
@@ -383,3 +384,3 @@
             'h2',
-            null,
+            { style: stylesheet.propTableHead },
             '"',
@@ -386,0 +387,0 @@ type.displayName || type.name,

dist/components/theme.js

@@ -9,3 +9,3 @@ 'use strict';
   color: '#444',
-  webkitFontSmoothing: 'antialiased'
+  WebkitFontSmoothing: 'antialiased'
 };

package.json

 {
   "name": "@kadira/react-storybook-addon-info",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "A React Storybook addon to show additional information for your stories.",
@@ -21,2 +21,3 @@ "repository": {
   "devDependencies": {
+    "@kadira/storybook": "^1.35.1",
     "babel-cli": "^6.5.0",
@@ -23,0 +24,0 @@ "babel-core": "^6.5.0",

src/components/Node.js

@@ -41,7 +41,7 @@ import React from 'react';
         <span style={tagStyle}>&lt;{name}</span>
-          <Props node={node} />
-        <span style={tagStyle}> /&gt;</span>
+          <Props node={node} singleLine />
+        <span style={tagStyle}>/&gt;</span>
       </div>;
     }
-    
+
     // Keep a copy so that further mutations to containerStyle don't impact us:
@@ -51,13 +51,17 @@ const containerStyleCopy = Object.assign({}, containerStyle);
     // tag with children
-    return <div>
-      <div style={containerStyleCopy}>
-        <span style={tagStyle}>&lt;{name}</span>
-          <Props node={node} />
-        <span style={tagStyle}>&gt;</span>
+    return (
+      <div>
+        <div style={containerStyleCopy}>
+          <span style={tagStyle}>&lt;{name}</span>
+            <Props node={node} />
+          <span style={tagStyle}>&gt;</span>
+        </div>
+        {React.Children.map(children, childElement => (
+          <Node node={childElement} depth={depth + 1} />
+        ))}
+        <div style={containerStyleCopy}>
+          <span style={tagStyle}>&lt;/{name}&gt;</span>
+        </div>
       </div>
-      {React.Children.map(children, childElement => <Node node={childElement} depth={depth + 1}/>)}
-      <div style={containerStyleCopy}>
-        <span style={tagStyle}>&lt;/{name}&gt;</span>
-      </div>
-    </div>
+    );
   }
@@ -64,0 +68,0 @@ }

src/components/Props.js

@@ -6,9 +6,6 @@ import React from 'react';
   propStyle: {
-    paddingLeft: 8,
   },
   propNameStyle: {
-
   },
   propValueStyle: {
-
   }
@@ -22,3 +19,3 @@ }
     if (!props || typeof props !== 'object') {
-      return <span/>;
+      return <span />;
     }
@@ -32,9 +29,26 @@
 
+    const breakIntoNewLines = names.length > 3;
+    const endingSpace = this.props.singleLine ? ' ' : '';
+
     const items = [];
-    names.slice(0, 3).forEach(name => {
+    names.forEach((name, i) => {
       items.push(
-        <span key={name} style={propStyle}>
+        <span key={name}>
+          {breakIntoNewLines ? (
+            <span>
+              <br />&nbsp;&nbsp;
+            </span>
+          ) : ' '}
           <span style={propNameStyle}>{name}</span>
-          =
-          <span style={propValueStyle}><PropVal val={props[name]} /></span>
+          {/* Use implicit true: */}
+          {(!props[name] || typeof props[name] !== 'boolean') && (
+            <span>
+              =
+              <span style={propValueStyle}><PropVal val={props[name]} /></span>
+            </span>
+          )}
+
+          {i === (names.length - 1) && (
+            breakIntoNewLines ? <br /> : endingSpace
+          )}
         </span>
@@ -44,4 +58,4 @@ );
 
-    return <span>{items}</span>
+    return <span>{items}</span>;
   }
 }

src/components/PropTable.js

@@ -13,2 +13,10 @@ import React from 'react';
 
+const stylesheet = {
+  propTable: {
+    marginLeft: -10,
+    borderSpacing: '10px 5px',
+    borderCollapse: 'separate',
+  }
+};
+
 export default class PropTable extends React.Component {
@@ -61,3 +69,3 @@ render () {
     return (
-      <table>
+      <table style={stylesheet.propTable}>
         <thead>
@@ -64,0 +72,0 @@ <tr>

src/components/PropVal.js

@@ -79,31 +79,34 @@ import React from 'react';
 function previewProp(val) {
+  let braceWrap = true;
+  let content = null;
   if (typeof val === 'number') {
-    return <span style={valueStyles.number}>{val}</span>;
-  }
-  if (typeof val === 'string') {
+    content = <span style={valueStyles.number}>{val}</span>;
+  } else if (typeof val === 'string') {
     if (val.length > 50) {
       val = val.slice(0, 50) + '…';
     }
-    return <span style={valueStyles.string}>"{val}"</span>;
+    content = <span style={valueStyles.string}>"{val}"</span>;
+    braceWrap = false;
+  } else if (typeof val === 'boolean') {
+    content = <span style={valueStyles.bool}>{`${val}`}</span>;
+  } else if (Array.isArray(val)) {
+    content = previewArray(val);
+  } else if (typeof val === 'function') {
+    content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
+  } else if (!val) {
+    content = <span style={valueStyles.empty}>{`${val}`}</span>;
+  } else if (typeof val !== 'object') {
+    content = <span>…</span>;
+  } else if (React.isValidElement(val)) {
+    content = (
+      <span style={valueStyles.object}>
+        {`<${val.type.displayName || val.type.name || val.type} />`}
+      </span>
+    );
+  } else {
+    content = previewObject(val);
   }
-  if (typeof val === 'boolean') {
-    return <span style={valueStyles.bool}>{`${val}`}</span>;
-  }
-  if (Array.isArray(val)) {
-    return previewArray(val);
-  }
-  if (typeof val === 'function') {
-    return <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
-  }
-  if (!val) {
-    return <span style={valueStyles.empty}>{`${val}`}</span>;
-  }
-  if (typeof val !== 'object') {
-    return <span>…</span>;
-  }
-  if (React.isValidElement(val)) {
-    return <span style={valueStyles.object}>{`<${val.type.displayName || val.type.name || val.type } />`}</span>
-  }
 
-  return previewObject(val);
+  if (!braceWrap) return content;
+  return <span>&#123;{content}&#125;</span>;
 }
@@ -110,0 +113,0 @@

src/components/Story.js

@@ -58,3 +58,2 @@ import React from 'react';
     fontWeight: 300,
-    maxWidth: '48rem',
     lineHeight: 1.45,
@@ -90,3 +89,6 @@ fontSize: 15,
     }
-  }
+  },
+  propTableHead: {
+    margin: '20px 0 0 0'
+  },
 }
@@ -268,3 +270,3 @@
         <div key={idx}>
-          <h2>"{type.displayName || type.name}" Component</h2>
+          <h2 style={stylesheet.propTableHead}>"{type.displayName || type.name}" Component</h2>
           <PropTable type={type} />
@@ -271,0 +273,0 @@ </div>

src/components/theme.js

@@ -7,3 +7,3 @@ export const baseFonts = {
   color: '#444',
-  webkitFontSmoothing: 'antialiased',
+  WebkitFontSmoothing: 'antialiased',
 };

No alert changes

Improved metrics

Total package byte prevSize

373855

increased by0.74%

Lines of code

2389

increased by2.31%

Worsened metrics

Dev dependency count

23

increased by4.55%

No dependency changes