cf-component-card - npm Package Compare versions

Comparing version 0.2.3 to 1.0.0

lib/Card.js

 "use strict";
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -10,2 +12,3 @@
 var React = require('react');
+var PropTypes = React.PropTypes;
 
@@ -18,12 +21,15 @@ var Card = function (_React$Component) {
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (Card.__proto__ || Object.getPrototypeOf(Card)).apply(this, arguments));
   }
 
-  Card.prototype.render = function render() {
-    return React.createElement(
-      "section",
-      { className: "cf-card" },
-      this.props.children
-    );
-  };
+  _createClass(Card, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(
+        "section",
+        { className: "cf-card" },
+        this.props.children
+      );
+    }
+  }]);
 
@@ -33,2 +39,6 @@ return Card;
 
+Card.propTypes = {
+  children: PropTypes.node
+};
+
 module.exports = Card;

lib/CardContent.js

 "use strict";
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -18,22 +20,25 @@
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (CardContent.__proto__ || Object.getPrototypeOf(CardContent)).apply(this, arguments));
   }
 
-  CardContent.prototype.render = function render() {
-    return React.createElement(
-      "div",
-      { className: "cf-card__content" },
-      React.createElement(
-        "h3",
-        { className: "cf-card__title" },
-        this.props.title
-      ),
-      this.props.children,
-      this.props.footerMessage ? React.createElement(
+  _createClass(CardContent, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(
         "div",
-        { className: "cf-card__footer_message" },
-        this.props.footerMessage
-      ) : null
-    );
-  };
+        { className: "cf-card__content" },
+        React.createElement(
+          "h3",
+          { className: "cf-card__title" },
+          this.props.title
+        ),
+        this.props.children,
+        this.props.footerMessage ? React.createElement(
+          "div",
+          { className: "cf-card__footer_message" },
+          this.props.footerMessage
+        ) : null
+      );
+    }
+  }]);
 
@@ -45,6 +50,6 @@ return CardContent;
   title: PropTypes.any.isRequired,
-  footerMessage: PropTypes.string
+  footerMessage: PropTypes.string,
+  children: PropTypes.node
 };
 
-
 module.exports = CardContent;

lib/CardControl.js

 "use strict";
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -10,2 +12,3 @@
 var React = require('react');
+var PropTypes = React.PropTypes;
 
@@ -18,12 +21,15 @@ var CardControl = function (_React$Component) {
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (CardControl.__proto__ || Object.getPrototypeOf(CardControl)).apply(this, arguments));
   }
 
-  CardControl.prototype.render = function render() {
-    return React.createElement(
-      "div",
-      { className: "cf-card__control" },
-      this.props.children
-    );
-  };
+  _createClass(CardControl, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(
+        "div",
+        { className: "cf-card__control" },
+        this.props.children
+      );
+    }
+  }]);
 
@@ -33,2 +39,6 @@ return CardControl;
 
+CardControl.propTypes = {
+  children: PropTypes.node
+};
+
 module.exports = CardControl;

lib/CardDrawers.js

 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -22,70 +24,70 @@
 
-  function CardDrawers() {
-    var _temp, _this, _ret;
-
+  function CardDrawers(props) {
     _classCallCheck(this, CardDrawers);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (CardDrawers.__proto__ || Object.getPrototypeOf(CardDrawers)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this._cardId = UNIQUE_ID++, _temp), _possibleConstructorReturn(_this, _ret);
+    _this._cardId = UNIQUE_ID++;
+    return _this;
   }
 
-  CardDrawers.prototype.render = function render() {
-    var _this2 = this;
+  _createClass(CardDrawers, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
 
-    var links = [];
-    var drawers = [];
+      var links = [];
+      var drawers = [];
 
-    this.props.drawers.forEach(function (drawer) {
-      var isActive = drawer.id === _this2.props.active;
-      var id = 'card-' + _this2._cardId + '-drawer-' + drawer.id;
+      this.props.drawers.forEach(function (drawer) {
+        var isActive = drawer.id === _this2.props.active;
+        var id = 'card-' + _this2._cardId + '-drawer-' + drawer.id;
 
-      links.push(React.createElement(
-        CardToolbarLink,
-        {
-          key: drawer.id,
-          id: id,
-          isActive: isActive,
-          onClick: _this2.props.onClick.bind(null, drawer.id) },
-        drawer.name
-      ));
+        links.push(React.createElement(
+          CardToolbarLink,
+          {
+            key: drawer.id,
+            id: id,
+            isActive: isActive,
+            onClick: _this2.props.onClick.bind(null, drawer.id) },
+          drawer.name
+        ));
 
-      var className = 'cf-card__drawer';
+        var className = 'cf-card__drawer';
 
-      if (isActive) {
-        className += ' cf-card__drawer--active';
-      }
+        if (isActive) {
+          className += ' cf-card__drawer--active';
+        }
 
-      drawers.push(React.createElement(
-        'div',
-        {
-          key: drawer.id,
-          role: 'tabpanel',
-          'aria-labelledby': id,
-          'aria-hidden': isActive ? 'false' : 'true',
-          className: className },
-        isActive && drawer.content
-      ));
-    });
+        drawers.push(React.createElement(
+          'div',
+          {
+            key: drawer.id,
+            role: 'tabpanel',
+            'aria-labelledby': id,
+            'aria-hidden': isActive ? 'false' : 'true',
+            className: className },
+          isActive && drawer.content
+        ));
+      });
 
-    var containerClassName = 'cf-card__drawers_container';
+      var containerClassName = 'cf-card__drawers_container';
 
-    if (this.props.active) {
-      containerClassName += ' cf-card__drawers_container--open';
+      if (this.props.active) {
+        containerClassName += ' cf-card__drawers_container--open';
+      }
+
+      return React.createElement(
+        CardSection,
+        null,
+        React.createElement(CardToolbar, { controls: this.props.controls, links: links }),
+        React.createElement(
+          'div',
+          { className: containerClassName },
+          drawers
+        )
+      );
     }
+  }]);
 
-    return React.createElement(
-      CardSection,
-      null,
-      React.createElement(CardToolbar, { controls: this.props.controls, links: links }),
-      React.createElement(
-        'div',
-        { className: containerClassName },
-        drawers
-      )
-    );
-  };
-
   return CardDrawers;
@@ -104,3 +106,2 @@ }(React.Component);
 
-
 module.exports = CardDrawers;

lib/CardLoadingText.js

 "use strict";
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -17,8 +19,11 @@
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (CardLoadingText.__proto__ || Object.getPrototypeOf(CardLoadingText)).apply(this, arguments));
   }
 
-  CardLoadingText.prototype.render = function render() {
-    return React.createElement("div", { className: "cf-card__loading_text" });
-  };
+  _createClass(CardLoadingText, [{
+    key: "render",
+    value: function render() {
+      return React.createElement("div", { className: "cf-card__loading_text" });
+    }
+  }]);
 
@@ -25,0 +30,0 @@ return CardLoadingText;

lib/CardMessages.js

@@ -1,3 +0,5 @@
-'use strict';
+"use strict";
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -18,18 +20,21 @@
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (CardMessages.__proto__ || Object.getPrototypeOf(CardMessages)).apply(this, arguments));
   }
 
-  CardMessages.prototype.render = function render() {
-    return React.createElement(
-      'div',
-      { className: 'cf-card__messages' },
-      this.props.messages.map(function (message, index) {
-        return React.createElement(
-          'div',
-          { key: index, role: 'alert', className: 'cf-card__message cf-card__message--' + message.type },
-          message.content
-        );
-      })
-    );
-  };
+  _createClass(CardMessages, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(
+        "div",
+        { className: "cf-card__messages" },
+        this.props.messages.map(function (message, index) {
+          return React.createElement(
+            "div",
+            { key: index, role: "alert", className: 'cf-card__message cf-card__message--' + message.type },
+            message.content
+          );
+        })
+      );
+    }
+  }]);
 
@@ -46,3 +51,2 @@ return CardMessages;
 
-
 module.exports = CardMessages;

lib/CardSection.js

 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -18,12 +20,15 @@
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (CardSection.__proto__ || Object.getPrototypeOf(CardSection)).apply(this, arguments));
   }
 
-  CardSection.prototype.render = function render() {
-    return React.createElement(
-      'div',
-      { className: 'cf-card__section cf-card__section--' + this.props.status },
-      this.props.children
-    );
-  };
+  _createClass(CardSection, [{
+    key: 'render',
+    value: function render() {
+      return React.createElement(
+        'div',
+        { className: 'cf-card__section cf-card__section--' + this.props.status },
+        this.props.children
+      );
+    }
+  }]);
 
@@ -34,4 +39,6 @@ return CardSection;
 CardSection.propTypes = {
-  status: PropTypes.oneOf(['default', 'error'])
+  status: PropTypes.oneOf(['default', 'error']),
+  children: PropTypes.node
 };
+
 CardSection.defaultProps = {
@@ -41,3 +48,2 @@ status: 'default'
 
-
 module.exports = CardSection;

lib/CardToolbar.js

 "use strict";
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -18,21 +20,24 @@
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (CardToolbar.__proto__ || Object.getPrototypeOf(CardToolbar)).apply(this, arguments));
   }
 
-  CardToolbar.prototype.render = function render() {
-    return React.createElement(
-      "div",
-      { className: "cf-card__toolbar" },
-      React.createElement(
+  _createClass(CardToolbar, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(
         "div",
-        { className: "cf-card__toolbar_controls" },
-        this.props.controls
-      ),
-      React.createElement(
-        "div",
-        { className: "cf-card__toolbar_links", role: "tablist" },
-        this.props.links
-      )
-    );
-  };
+        { className: "cf-card__toolbar" },
+        React.createElement(
+          "div",
+          { className: "cf-card__toolbar_controls" },
+          this.props.controls
+        ),
+        React.createElement(
+          "div",
+          { className: "cf-card__toolbar_links", role: "tablist" },
+          this.props.links
+        )
+      );
+    }
+  }]);
 
@@ -47,3 +52,2 @@ return CardToolbar;
 
-
 module.exports = CardToolbar;

lib/CardToolbarLink.js

 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -16,31 +18,34 @@
 
-  function CardToolbarLink() {
-    var _temp, _this, _ret;
-
+  function CardToolbarLink(props) {
     _classCallCheck(this, CardToolbarLink);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (CardToolbarLink.__proto__ || Object.getPrototypeOf(CardToolbarLink)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.handleClick = function (e) {
-      e.preventDefault();
-      _this.props.onClick();
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    _this.handleClick = _this.handleClick.bind(_this);
+    return _this;
   }
 
-  CardToolbarLink.prototype.render = function render() {
-    var className = 'cf-card__toolbar_link';
+  _createClass(CardToolbarLink, [{
+    key: 'handleClick',
+    value: function handleClick(e) {
+      e.preventDefault();
+      this.props.onClick();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var className = 'cf-card__toolbar_link';
 
-    if (this.props.isActive) {
-      className += ' cf-card__toolbar_link--open';
+      if (this.props.isActive) {
+        className += ' cf-card__toolbar_link--open';
+      }
+
+      return React.createElement(
+        Link,
+        { role: 'tab', id: this.props.id, className: className, onClick: this.handleClick },
+        this.props.children
+      );
     }
+  }]);
 
-    return React.createElement(
-      Link,
-      { role: 'tab', id: this.props.id, className: className, onClick: this.handleClick },
-      this.props.children
-    );
-  };
-
   return CardToolbarLink;
@@ -52,6 +57,6 @@ }(React.Component);
   isActive: PropTypes.bool.isRequired,
-  id: PropTypes.string
+  id: PropTypes.string,
+  children: PropTypes.node
 };
 
-
 module.exports = CardToolbarLink;

package.json

 {
   "name": "cf-component-card",
   "description": "CloudFlare Card Component",
-  "version": "0.2.3",
+  "version": "1.0.0",
   "main": "lib/index.js",
@@ -12,10 +12,10 @@ "author": "James Kyle <[e-mail]>",
   "dependencies": {
-    "cf-component-link": "^3.0.2",
-    "react": "^0.14.2"
+    "cf-component-link": "^4.0.0",
+    "react": "^0.14.2 || ^15.0.0-0"
   },
   "devDependencies": {
     "assert-equal-jsx": "^1.0.0",
-    "cf-component-button": "^2.2.3",
-    "react-dom": "^0.14.2"
+    "cf-component-button": "^3.0.0",
+    "react-dom": "^15.0.0-0"
   }
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24532

31.71%

Lines of code

383

16.77%

Number of low quality alerts

1

-50%

Dependency changes

• + Added

  cf-component-link@4.2.3
  (transitive)

• + Added

  cf-util-route-handler@4.2.5
  (transitive)

• + Added

  create-react-class@15.7.0
  (transitive)

• + Added

  encoding@0.1.13
  (transitive)

• + Added

  fbjs@0.8.18
  (transitive)

• + Added

  iconv-lite@0.6.3
  (transitive)

• + Added

  is-stream@1.1.0
  (transitive)

• + Added

  isomorphic-fetch@2.2.1
  (transitive)

• + Added

  node-fetch@1.7.3
  (transitive)

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  prop-types@15.8.1
  (transitive)

• + Added

  react@15.7.0
  (transitive)

• + Added

  react-is@16.13.1
  (transitive)

• + Added

  setimmediate@1.0.5
  (transitive)

• + Added

  whatwg-fetch@3.6.20
  (transitive)

• - Removed

  acorn@5.7.4
  (transitive)

• - Removed

  amdefine@1.0.1
  (transitive)

• - Removed

  ast-types@0.9.6
  (transitive)

• - Removed

  balanced-match@1.0.2
  (transitive)

• - Removed

  base62@1.2.8
  (transitive)

• - Removed

  brace-expansion@1.1.12
  (transitive)

• - Removed

  cf-component-link@3.0.2
  (transitive)

• - Removed

  cf-util-route-handler@3.0.0
  (transitive)

• - Removed

  commander@2.20.3
  (transitive)

• - Removed

  commoner@0.10.8
  (transitive)

• - Removed

  concat-map@0.0.1
  (transitive)

• - Removed

  defined@1.0.1
  (transitive)

• - Removed

  detective@4.7.1
  (transitive)

• - Removed

  envify@3.4.1
  (transitive)

• - Removed

  esprima@3.1.3
  (transitive)

• - Removed

  esprima-fb@15001.1.0-dev-harmony-fb
  (transitive)

• - Removed

  fbjs@0.6.1
  (transitive)

• - Removed

  glob@5.0.15
  (transitive)

• - Removed

  graceful-fs@4.2.11
  (transitive)

• - Removed

  iconv-lite@0.4.24
  (transitive)

• - Removed

  inflight@1.0.6
  (transitive)

• - Removed

  inherits@2.0.4
  (transitive)

• - Removed

  jstransform@11.0.3
  (transitive)

• - Removed

  minimatch@3.1.2
  (transitive)

• - Removed

  minimist@1.2.8
  (transitive)

• - Removed

  mkdirp@0.5.6
  (transitive)

• - Removed

  object-assign@2.1.1
  (transitive)

• - Removed

  once@1.4.0
  (transitive)

• - Removed

  path-is-absolute@1.0.1
  (transitive)

• - Removed

  private@0.1.8
  (transitive)

• - Removed

  q@1.5.1
  (transitive)

• - Removed

  react@0.14.10
  (transitive)

• - Removed

  recast@0.11.23
  (transitive)

• - Removed

  source-map@0.4.40.5.7
  (transitive)

• - Removed

  through@2.3.8
  (transitive)

• - Removed

  whatwg-fetch@0.9.0
  (transitive)

• - Removed

  wrappy@1.0.2
  (transitive)

• Updated

  cf-component-link@^4.0.0

• Updated

  react@^0.14.2 || ^15.0.0-0