Merge pull request #7 from kadirahq/props-in-source-code

Props in source code
storybookjs · Jun 15, 2016 · c03919d · c03919d
2 parents 02c1600 + 76b9476
commit c03919d
Show file tree

Hide file tree

Showing 7 changed files with 493 additions and 7 deletions.
diff --git a/dist/components/Node.js b/dist/components/Node.js
@@ -32,6 +32,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _Props = require('./Props');
+
+var _Props2 = _interopRequireDefault(_Props);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Node = function (_React$Component) {
@@ -75,6 +79,7 @@ var Node = function (_React$Component) {
       var text = _getData.text;
       var children = _getData.children;
 
+      // Just text
 
       if (!name) {
         return _react2.default.createElement(
@@ -97,7 +102,12 @@ var Node = function (_React$Component) {
             'span',
             { style: tagStyle },
             '<',
-            name,
+            name
+          ),
+          _react2.default.createElement(_Props2.default, { node: node }),
+          _react2.default.createElement(
+            'span',
+            { style: tagStyle },
             ' />'
           )
         );
@@ -114,7 +124,12 @@ var Node = function (_React$Component) {
             'span',
             { style: tagStyle },
             '<',
-            name,
+            name
+          ),
+          _react2.default.createElement(_Props2.default, { node: node }),
+          _react2.default.createElement(
+            'span',
+            { style: tagStyle },
             '>'
           )
         ),
@@ -127,9 +142,9 @@ var Node = function (_React$Component) {
           _react2.default.createElement(
             'span',
             { style: tagStyle },
-            '<',
+            '</',
             name,
-            ' />'
+            '>'
           )
         )
       );

diff --git a/dist/components/PropVal.js b/dist/components/PropVal.js
@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsCreateFragment = require('react-addons-create-fragment');
+
+var _reactAddonsCreateFragment2 = _interopRequireDefault(_reactAddonsCreateFragment);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var valueStyles = {
+  func: {
+    color: '#170'
+  },
+
+  attr: {
+    color: '#666'
+  },
+
+  object: {
+    color: '#666'
+  },
+
+  array: {
+    color: '#666'
+  },
+
+  number: {
+    color: '#a11'
+  },
+
+  string: {
+    color: '#22a',
+    wordBreak: 'break-word'
+  },
+
+  bool: {
+    color: '#a11'
+  },
+
+  empty: {
+    color: '#777'
+  }
+};
+
+function previewArray(val) {
+  var items = {};
+  val.slice(0, 3).forEach(function (item, i) {
+    items['n' + i] = _react2.default.createElement(PropVal, { val: item, nested: true });
+    items['c' + i] = ', ';
+  });
+  if (val.length > 3) {
+    items.last = '…';
+  } else {
+    delete items['c' + (val.length - 1)];
+  }
+  return _react2.default.createElement(
+    'span',
+    { style: valueStyles.array },
+    '[',
+    (0, _reactAddonsCreateFragment2.default)(items),
+    ']'
+  );
+}
+
+function previewObject(val) {
+  var names = (0, _keys2.default)(val);
+  var items = {};
+  names.slice(0, 3).forEach(function (name, i) {
+    items['k' + i] = _react2.default.createElement(
+      'span',
+      { style: valueStyles.attr },
+      name
+    );
+    items['c' + i] = ': ';
+    items['v' + i] = _react2.default.createElement(PropVal, { val: val[name], nested: true });
+    items['m' + i] = ', ';
+  });
+  if (names.length > 3) {
+    items.rest = '…';
+  } else {
+    delete items['m' + (names.length - 1)];
+  }
+  return _react2.default.createElement(
+    'span',
+    { style: valueStyles.object },
+    '{',
+    (0, _reactAddonsCreateFragment2.default)(items),
+    '}'
+  );
+}
+
+function previewProp(val) {
+  if (typeof val === 'number') {
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.number },
+      val
+    );
+  }
+  if (typeof val === 'string') {
+    if (val.length > 50) {
+      val = val.slice(0, 50) + '…';
+    }
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.string },
+      '"',
+      val,
+      '"'
+    );
+  }
+  if (typeof val === 'boolean') {
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.bool },
+      '' + val
+    );
+  }
+  if (Array.isArray(val)) {
+    return previewArray(val);
+  }
+  if (!val) {
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.empty },
+      '' + val
+    );
+  }
+  if ((typeof val === 'undefined' ? 'undefined' : (0, _typeof3.default)(val)) !== 'object') {
+    return _react2.default.createElement(
+      'span',
+      null,
+      '…'
+    );
+  }
+
+  return previewObject(val);
+}
+
+var PropVal = function (_React$Component) {
+  (0, _inherits3.default)(PropVal, _React$Component);
+
+  function PropVal() {
+    (0, _classCallCheck3.default)(this, PropVal);
+    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(PropVal).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(PropVal, [{
+    key: 'render',
+    value: function render() {
+      return previewProp(this.props.val);
+    }
+  }]);
+  return PropVal;
+}(_react2.default.Component);
+
+exports.default = PropVal;
+
+
+module.exports = PropVal;
diff --git a/dist/components/Props.js b/dist/components/Props.js
@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _PropVal = require('./PropVal');
+
+var _PropVal2 = _interopRequireDefault(_PropVal);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Props = function (_React$Component) {
+  (0, _inherits3.default)(Props, _React$Component);
+
+  function Props() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, Props);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(Props)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.stylesheet = {
+      propStyle: {
+        paddingLeft: 8
+      },
+      propNameStyle: {},
+      propValueStyle: {}
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(Props, [{
+    key: 'render',
+    value: function render() {
+      var props = this.props.node.props;
+      var defaultProps = this.props.node.type.defaultProps;
+      if (!props || (typeof props === 'undefined' ? 'undefined' : (0, _typeof3.default)(props)) !== 'object') {
+        return _react2.default.createElement('span', null);
+      }
+
+      var _stylesheet = this.stylesheet;
+      var propStyle = _stylesheet.propStyle;
+      var propValueStyle = _stylesheet.propValueStyle;
+      var propNameStyle = _stylesheet.propNameStyle;
+
+
+      var names = (0, _keys2.default)(props).filter(function (name) {
+        return name[0] !== '_' && name !== 'children' && (!defaultProps || props[name] != defaultProps[name]);
+      });
+
+      var items = [];
+      names.slice(0, 3).forEach(function (name) {
+        items.push(_react2.default.createElement(
+          'span',
+          { style: propStyle },
+          _react2.default.createElement(
+            'span',
+            { style: propNameStyle },
+            name
+          ),
+          '=',
+          _react2.default.createElement(
+            'span',
+            { style: propValueStyle },
+            _react2.default.createElement(_PropVal2.default, { val: props[name] })
+          )
+        ));
+      });
+
+      return _react2.default.createElement(
+        'span',
+        null,
+        items
+      );
+    }
+  }]);
+  return Props;
+}(_react2.default.Component);
+
+exports.default = Props;
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
   "dependencies": {
     "babel-runtime": "^6.5.0",
     "markdown-modest": "github:markdowncss/modest",
+    "react-addons-create-fragment": "^15.1.0",
     "react-remarkable": "^1.1.1"
   },
   "main": "dist/index.js",