react-color - npm Package Compare versions

Comparing version 2.13.4 to 2.13.5

lib/components/block/Block.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -129,4 +133,10 @@
 
+Block.propTypes = {
+  width: _propTypes2.default.number,
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  triangle: _propTypes2.default.oneOf(['top', 'hide'])
+};
+
 Block.defaultProps = {
-  width: '170px',
+  width: 170,
   colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'],
@@ -133,0 +143,0 @@ triangle: 'top'

lib/components/block/spec.js

@@ -32,3 +32,3 @@ 'use strict';
   expect(tree).toMatchSnapshot();
-}); /* global test, expect */
+}); /* global test, jest, expect */
 
@@ -59,4 +59,4 @@ test('Block onChange events correctly', function () {
 
-test('Block `triangle="none"`', function () {
-  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Block2.default, { triangle: 'none' })).toJSON();
+test('Block `triangle="hide"`', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Block2.default, { triangle: 'hide' })).toJSON();
   expect(tree).toMatchSnapshot();
@@ -63,0 +63,0 @@ });

lib/components/chrome/Chrome.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -191,2 +195,10 @@
 
+Chrome.propTypes = {
+  disableAlpha: _propTypes2.default.bool
+};
+
+Chrome.defaultProps = {
+  disableAlpha: false
+};
+
 exports.default = (0, _common.ColorWrap)(Chrome);

lib/components/chrome/spec.js

 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, expect */
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, jest, expect */
 
@@ -5,0 +5,0 @@ var _react = require('react');

lib/components/circle/Circle.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -77,4 +81,10 @@
 
+Circle.propTypes = {
+  width: _propTypes2.default.number,
+  circleSize: _propTypes2.default.number,
+  circleSpacing: _propTypes2.default.number
+};
+
 Circle.defaultProps = {
-  width: '252px',
+  width: 252,
   circleSize: 28,
@@ -81,0 +91,0 @@ circleSpacing: 14,

lib/components/circle/spec.js

@@ -32,3 +32,3 @@ 'use strict';
   expect(tree).toMatchSnapshot();
-}); /* global test, expect */
+}); /* global test, jest, expect */
 
@@ -35,0 +35,0 @@ test('Circle onChange events correctly', function () {

lib/components/common/ColorWrap.js

@@ -81,3 +81,5 @@ 'use strict';
 
-        return _react2.default.createElement(Picker, _extends({}, this.props, this.state, { onChange: this.handleChange }, optionalEvents));
+        return _react2.default.createElement(Picker, _extends({}, this.props, this.state, {
+          onChange: this.handleChange
+        }, optionalEvents));
       }
@@ -89,3 +91,5 @@ }]);
 
-  ColorPicker.defaultProps = {
+  ColorPicker.propTypes = _extends({}, Picker.propTypes);
+
+  ColorPicker.defaultProps = _extends({}, Picker.defaultProps, {
     color: {
@@ -97,3 +101,3 @@ h: 250,
     }
-  };
+  });
 
@@ -100,0 +104,0 @@ return ColorPicker;

lib/components/common/spec.js

@@ -53,3 +53,3 @@ 'use strict';
 
-/* global test, expect */
+/* global test, jest, expect */
 
@@ -56,0 +56,0 @@ test('Checkboard renders correctly', function () {

lib/components/compact/Compact.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -100,2 +104,6 @@
 
+Compact.propTypes = {
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.string)
+};
+
 Compact.defaultProps = {
@@ -102,0 +110,0 @@ colors: ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E']

lib/components/compact/spec.js

 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, expect */
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, jest, expect */
 
@@ -5,0 +5,0 @@ var _react = require('react');

lib/components/github/Github.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -117,3 +121,8 @@
     (0, _map2.default)(colors, function (c) {
-      return _react2.default.createElement(_GithubSwatch2.default, { color: c, key: c, onClick: handleChange, onSwatchHover: onSwatchHover });
+      return _react2.default.createElement(_GithubSwatch2.default, {
+        color: c,
+        key: c,
+        onClick: handleChange,
+        onSwatchHover: onSwatchHover
+      });
     })
@@ -123,4 +132,10 @@ );
 
+Github.propTypes = {
+  width: _propTypes2.default.number,
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  triangle: _propTypes2.default.oneOf(['hide', 'top-left', 'top-right'])
+};
+
 Github.defaultProps = {
-  width: '200px',
+  width: 200,
   colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
@@ -127,0 +142,0 @@ triangle: 'top-left'

lib/components/github/GithubSwatch.js

@@ -37,3 +37,4 @@ 'use strict';
         width: '25px',
-        height: '25px'
+        height: '25px',
+        fontSize: '0'
       }
@@ -40,0 +41,0 @@ },

lib/components/github/spec.js

 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, expect */
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, jest, expect */
 
@@ -60,4 +60,4 @@ var _react = require('react');
 
-test('Github `triangle="none"`', function () {
-  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Github2.default, _extends({}, _color.red, { triangle: 'none' }))).toJSON();
+test('Github `triangle="hide"`', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Github2.default, _extends({}, _color.red, { triangle: 'hide' }))).toJSON();
   expect(tree).toMatchSnapshot();
@@ -64,0 +64,0 @@ });

lib/components/material/spec.js

@@ -19,3 +19,3 @@ 'use strict';
 
-/* global test, expect */
+/* global test, test, expect */
 
@@ -22,0 +22,0 @@ test('Material renders correctly', function () {

lib/components/photoshop/Photoshop.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -190,2 +194,6 @@
 
+Photoshop.propTypes = {
+  header: _propTypes2.default.string
+};
+
 Photoshop.defaultProps = {
@@ -192,0 +200,0 @@ header: 'Color Picker'

lib/components/photoshop/spec.js

 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, expect */
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, jest, expect */
 
@@ -5,0 +5,0 @@ var _react = require('react');

lib/components/sketch/Sketch.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -170,11 +174,22 @@
     }),
-    _react2.default.createElement(_SketchPresetColors2.default, { colors: presetColors, onClick: onChange, onSwatchHover: onSwatchHover })
+    _react2.default.createElement(_SketchPresetColors2.default, {
+      colors: presetColors,
+      onClick: onChange,
+      onSwatchHover: onSwatchHover
+    })
   );
 };
 
+Sketch.propTypes = {
+  disableAlpha: _propTypes2.default.bool,
+  width: _propTypes2.default.number,
+  presetColors: _propTypes2.default.arrayOf(_propTypes2.default.string)
+};
+
 Sketch.defaultProps = {
-  presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'],
-  width: 200
+  disableAlpha: false,
+  width: 200,
+  presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
 };
 
 exports.default = (0, _common.ColorWrap)(Sketch);

lib/components/sketch/spec.js

@@ -35,3 +35,3 @@ 'use strict';
 
-/* global test, expect */
+/* global test, jest, expect */
 
@@ -38,0 +38,0 @@ test('Sketch renders correctly', function () {

lib/components/swatches/spec.js

@@ -33,3 +33,3 @@ 'use strict';
 
-/* global test, expect */
+/* global test, jest, expect */
 
@@ -36,0 +36,0 @@ test('Swatches renders correctly', function () {

lib/components/swatches/Swatches.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -103,4 +107,9 @@
 
-/* eslint-disable max-len */
-Swatches.defaultProps = {
+Swatches.propTypes = {
+  width: _propTypes2.default.number,
+  height: _propTypes2.default.number,
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.arrayOf(_propTypes2.default.string))
+
+  /* eslint-disable max-len */
+};Swatches.defaultProps = {
   width: 320,
@@ -107,0 +116,0 @@ height: 240,

lib/components/twitter/spec.js

 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, expect */
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, jest, expect */
 
@@ -32,4 +32,4 @@ var _react = require('react');
 
-test('Twitter `triangle="none"`', function () {
-  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Twitter2.default, _extends({}, _color.red, { triangle: 'none' }))).toJSON();
+test('Twitter `triangle="hide"`', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Twitter2.default, _extends({}, _color.red, { triangle: 'hide' }))).toJSON();
   expect(tree).toMatchSnapshot();
@@ -36,0 +36,0 @@ });

lib/components/twitter/Twitter.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -182,4 +186,10 @@
 
+Twitter.propTypes = {
+  width: _propTypes2.default.number,
+  triangle: _propTypes2.default.oneOf(['hide', 'top-left', 'top-right']),
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.string)
+};
+
 Twitter.defaultProps = {
-  width: '276px',
+  width: 276,
   colors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'],
@@ -186,0 +196,0 @@ triangle: 'top-left'

lib/helpers/color.js

@@ -20,3 +20,3 @@ 'use strict';
   simpleCheckForValidColor: function simpleCheckForValidColor(data) {
-    var keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'a', 'v'];
+    var keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
     var checked = 0;
@@ -23,0 +23,0 @@ var passed = 0;

lib/helpers/saturation.js

@@ -9,4 +9,7 @@ 'use strict';
   e.preventDefault();
-  var containerWidth = container.clientWidth;
-  var containerHeight = container.clientHeight;
+
+  var _container$getBoundin = container.getBoundingClientRect(),
+      containerWidth = _container$getBoundin.width,
+      containerHeight = _container$getBoundin.height;
+
   var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
@@ -13,0 +16,0 @@ var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;

package.json

 {
   "name": "react-color",
-  "version": "2.13.4",
+  "version": "2.13.5",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
@@ -27,3 +27,4 @@ "main": "lib/index.js",
     "docs-server": "node ./scripts/docs-server",
-    "docs-dist": "node ./scripts/docs-dist"
+    "docs-dist": "node ./scripts/docs-dist",
+    "storybook": "start-storybook -p 6006"
   },
@@ -46,3 +47,2 @@ "homepage": "http://casesandberg.github.io/react-color/",
     "material-colors": "^1.2.1",
-    "prop-types": "^15.5.4",
     "reactcss": "^1.2.0",
@@ -53,2 +53,6 @@ "tinycolor2": "^1.1.2"
     "@case/eslint-config": "^0.1.2",
+    "@storybook/addon-centered": "^3.2.0",
+    "@storybook/addon-knobs": "^3.2.0",
+    "@storybook/addon-options": "^3.2.4",
+    "@storybook/react": "^3.2.4",
     "babel-cli": "^6.8.0",
@@ -70,7 +74,11 @@ "babel-core": "^6.10.4",
     "html-loader": "^0.3.0",
-    "jest": "^16.0.1",
+    "i": "^0.3.5",
+    "jest": "^16.0.2",
+    "jest-cli": "^20.0.4",
     "jsx-loader": "^0.13.2",
     "mocha": "^2.4.5",
     "normalize.css": "^4.1.1",
+    "npm": "^5.3.0",
     "object-assign": "^4.1.0",
+    "prop-types": "https://github.com/anti-gravity/prop-types",
     "react": "^15.3.2",
@@ -77,0 +85,0 @@ "react-addons-test-utils": "^0.14.0 || ^15.0.0",

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

Improved metrics

Total package byte prevSize

783537

increased by2%

Dependency count

4

decreased by-20%

Number of package files

126

increased by12.5%

Lines of code

13647

increased by2.66%

Worsened metrics

Dev dependency count

43

increased by22.86%

Dependency changes

• - Removedprop-types@^15.5.4

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)