@stokr/components-library 0.7.3 → 0.7.5

package/dist/components/Input/RangeInput.js

@@ -8,9 +8,16 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RangeInput = _interopRequireDefault(require("./RangeInput.styles"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactRange = require("react-range");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-//import FieldRange from '@atlaskit/field-range'
-
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var FieldRange = _styledComponents.default.div.withConfig({
   displayName: "RangeInput__FieldRange",
   componentId: "sc-18qoxwc-0"
@@ -27,15 +34,45 @@ var RangeInput = function RangeInput(_ref) {
   var valuePercent = ((value - min) / (max - min) * 100).toFixed(2);
   return /*#__PURE__*/_react.default.createElement(_RangeInput.default, {
     valuePercent: valuePercent
-  }, /*#__PURE__*/_react.default.createElement(FieldRange, {
+  }, /*#__PURE__*/_react.default.createElement(_reactRange.Range, {
     id: id,
     name: name,
     disabled: disabled,
     max: max,
     min: min,
     step: step,
-    value: value,
-    onChange: onChange
+    values: [value],
+    onChange: onChange,
+    renderTrack: function renderTrack(_ref2) {
+      var props = _ref2.props,
+        children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
+        style: _objectSpread(_objectSpread({}, props.style), {}, {
+          height: '9px',
+          width: '100%',
+          borderRadius: '10px',
+          backgroundColor: _colors.default.lightGrey,
+          background: (0, _reactRange.getTrackBackground)({
+            values: [value],
+            colors: [_colors.default.blue, _colors.default.lightGrey],
+            min: min,
+            max: max
+          })
+        })
+      }), children);
+    },
+    renderThumb: function renderThumb(_ref3) {
+      var props = _ref3.props;
+      return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
+        style: _objectSpread(_objectSpread({}, props.style), {}, {
+          height: '24px',
+          width: '24px',
+          backgroundColor: _colors.default.blue,
+          borderRadius: '50%',
+          border: '4px solid white'
+        })
+      }));
+    }
   }));
 };
 exports.RangeInput = RangeInput;

package/dist/components/Input/RangeInput.stories.js

@@ -52,7 +52,9 @@ var Template = function Template(args) {
 };
 var RangeInputDefault = Template.bind({});
 exports.RangeInputDefault = RangeInputDefault;
-RangeInputDefault.args = {};
+RangeInputDefault.args = {
+  value: 80
+};
 
 //doublecheck:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -46,6 +46,7 @@
     "mobile-detect": "^1.4.5",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-collapse": "^5.1.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -53,16 +54,16 @@
     "react-custom-scrollbars-2": "^4.5.0",
     "react-day-picker": "^8.5.1",
     "react-device-detect": "^2.2.3",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-portal": "^4.2.2",
+    "react-range": "^1.8.14",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.0",
     "react-slick": "^0.29.0",
     "react-tippy": "^1.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5",
     "scroll-to-element": "^2.0.3",
     "semantic-ui-css": "^2.5.0",
@@ -93,10 +94,6 @@
     "styled-components.macro": "^1.0.0",
     "webpack": "^5.75.0"
   },
-  "peerDependencies": {
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0"
-  },
   "eslintConfig": {
     "extends": [
       "react-app",