the-vision - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

build/product-card/index.js

@@ -23,5 +23,4 @@ "use strict";
   _createClass(ProductCard, [{
-    key: "render",
-    value: function render() {
-
+    key: "renderBuyButton",
+    value: function renderBuyButton(props) {
       return React.createElement(
@@ -33,3 +32,3 @@ "div",
           { className: "image" },
-          React.createElement("img", { src: this.props.image, alt: this.props.image, className: "img-rounded" })
+          React.createElement("img", { src: props.image, alt: props.image, className: "img-rounded" })
         ),
@@ -45,3 +44,3 @@ React.createElement(
               { className: "title" },
-              this.props.title
+              props.title
             )
@@ -52,3 +51,3 @@ ),
             { className: "price" },
-            this.props.price
+            props.price
           )
@@ -58,3 +57,3 @@ ),
           "a",
-          { href: this.props.link, className: "btn btn-primary", target: "_blank" },
+          { href: props.link, className: "btn btn-primary", target: "_blank" },
           "Buy Now"
@@ -64,2 +63,57 @@ )
     }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.props.type === 'buy-button') return this.renderBuyButton(this.props);
+
+      return React.createElement(
+        "div",
+        { className: "card card-block product-card" },
+        React.createElement(
+          "div",
+          { className: "image" },
+          React.createElement("img", { src: this.props.image, alt: this.props.image, className: "img-rounded" })
+        ),
+        React.createElement(
+          "div",
+          { className: "info" },
+          React.createElement(
+            "div",
+            { className: "title-wrap" },
+            React.createElement(
+              "h6",
+              { className: "title" },
+              this.props.title
+            )
+          ),
+          [this.props.brand && React.createElement(
+            "div",
+            { className: "brand", key: "brand" },
+            "by ",
+            this.props.brand
+          ), this.props.offers && React.createElement(
+            "div",
+            { className: "offers", key: "offers" },
+            React.createElement(
+              "span",
+              { className: "count" },
+              this.props.offers,
+              " offers"
+            ),
+            " from"
+          ), this.props.price && React.createElement(
+            "h6",
+            { className: "price", key: "price" },
+            this.props.price
+          ), this.props.stores && React.createElement(
+            "div",
+            { className: "stores", key: "stores" },
+            "Available in ",
+            this.props.stores,
+            " store",
+            this.props.stores === 1 ? '' : 's'
+          )]
+        )
+      );
+    }
   }]);
@@ -70,2 +124,17 @@
 
+ProductCard.propTypes = {
+  type: React.PropTypes.oneOf(['buy-button', 'info']),
+  image: React.PropTypes.string,
+  title: React.PropTypes.string.isRequired,
+  brand: React.PropTypes.string,
+  offers: React.PropTypes.number,
+  price: React.PropTypes.string,
+  stores: React.PropTypes.number,
+  onClick: React.PropTypes.func
+};
+
+ProductCard.defaultProps = {
+  type: 'buy-button'
+};
+
 module.exports = ProductCard;

components/product-card/index.js

@@ -1,2 +0,2 @@
-const React = require('react');
+const React = require('react')
 
@@ -6,6 +6,25 @@ class ProductCard extends React.Component{
   constructor(props) {
-    super(props);
+    super(props)
   }
 
+  renderBuyButton(props) {
+    return (
+      <div className="card card-block product-card">
+        <div className="image">
+          <img src={props.image} alt={props.image} className="img-rounded" />
+        </div>
+        <div className="info">
+          <div className="title-wrap">
+            <h6 className="title">{props.title}</h6>
+          </div>
+          <h6 className="price">{props.price}</h6>
+        </div>
+        <a href={props.link} className="btn btn-primary" target="_blank">Buy Now</a>
+      </div>
+    )
+  }
+
   render() {
+    if(this.props.type === 'buy-button')
+      return this.renderBuyButton(this.props)
 
@@ -21,5 +40,18 @@ return (
           </div>
-          <h6 className="price">{this.props.price}</h6>
+          {
+            [
+              this.props.brand &&
+              <div className="brand" key="brand">by {this.props.brand}</div>
+              ,
+              this.props.offers &&
+              <div className="offers" key="offers"><span className="count">{this.props.offers} offers</span> from</div>
+              ,
+              this.props.price &&
+              <h6 className="price" key="price">{this.props.price}</h6>
+              ,
+              this.props.stores &&
+              <div className="stores" key="stores">Available in {this.props.stores} store{this.props.stores === 1 ? '' : 's'}</div>
+            ]
+          }
         </div>
-        <a href={this.props.link} className="btn btn-primary" target="_blank">Buy Now</a>
       </div>
@@ -30,2 +62,17 @@ )
 
-module.exports = ProductCard;
+ProductCard.propTypes = {
+  type: React.PropTypes.oneOf(['buy-button', 'info']),
+  image: React.PropTypes.string,
+  title: React.PropTypes.string.isRequired,
+  brand: React.PropTypes.string,
+  offers: React.PropTypes.number,
+  price: React.PropTypes.string,
+  stores: React.PropTypes.number,
+  onClick: React.PropTypes.func,
+}
+
+ProductCard.defaultProps = {
+  type: 'buy-button',
+}
+
+module.exports = ProductCard

package.json

 {
   "name": "the-vision",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A set of reusable UI(react) components",
@@ -28,2 +28,4 @@ "main": "build/index.js",
     "morgan": "^1.7.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
     "serve-favicon": "^2.3.0"
@@ -33,4 +35,3 @@ },
     "build": "babel components -d build && webpack --dist",
-    "build-page": "webpack && middleman build",
-    "publish-page": "git subtree push --prefix public origin gh-pages",
+    "publish-page": "./publish.sh",
     "develop": "webpack -w"
@@ -50,4 +51,2 @@ },
     "node-sass": "^3.4.2",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7",
     "sass-loader": "^3.1.2",
@@ -54,0 +53,0 @@ "style-loader": "^0.13.0",

README.md

@@ -16,5 +16,8 @@ #The Vision
 1. Checkout the code.
-2. Run `nvm use` to switch to the right node version.
-3. Run `npm install` to install all the dependencies. This may take a while.
-4. Run `bundle install` to install a few dev-dependencies ([Middleman](https://middlemanapp.com/)).
+2. Run `sh boostrap.sh`
+  - Sets up git hooks
+    - `pre-commit` runs the build and adds it before/for every commit
+  - Runs `nvm use` to switch to the right node version.
+  - Runs `npm install` to install all the dependencies. This may take a while.
+3. Run `bundle install` to install a few dev-dependencies ([Middleman](https://middlemanapp.com/)).
 <br/>If the previous step fails, install the correct version of ruby. We suggest using [rvm](https://rvm.io/) gemsets.
@@ -35,4 +38,2 @@
 ####Update the webpage
-1. Run `npm run build-page` to build the files.
-2. Run `npm run publish-page` to push the static files to `gh-pages` branch.
-3. Push the branch using `git push origin gh-pages`
+Run `npm run publish-page -- "<commit msg>"` to push the static files to `gh-pages` branch.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3371271

increased by0.5%

Dev dependency count

16

decreased by-11.11%

Number of package files

29

increased by11.54%

Lines of code

18346

increased by1.04%

Number of lines in readme file

38

increased by2.7%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

9

increased by28.57%

Dependency changes

• + Addedreact@^0.14.7

• + Addedreact-dom@^0.14.7

• + Addedacorn@5.7.4(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedast-types@0.9.6(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbase62@1.2.8(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommoner@0.10.8(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@4.7.1(transitive)

• + Addedenvify@3.4.1(transitive)

• + Addedesprima@3.1.3(transitive)

• + Addedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• + Addedfbjs@0.6.1(transitive)

• + Addedglob@5.0.15(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjstransform@11.0.3(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedobject-assign@2.1.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedq@1.5.1(transitive)

• + Addedreact@0.14.10(transitive)

• + Addedreact-dom@0.14.10(transitive)

• + Addedrecast@0.11.23(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@0.9.0(transitive)

• + Addedwrappy@1.0.2(transitive)