intelicoreact 0.0.2 → 0.0.6

package/dist/Atomic/UI/Calendar/Calendar.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarTemplate = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Calendar = _interopRequireDefault(require("./Calendar"));
+
+global.lng = 'en';
+var _default = {
+  title: 'UI/Calendar',
+  component: _Calendar.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '320px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Calendar.default, args));
+};
+
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: function setDate() {
+    return null;
+  }
+};

package/dist/Atomic/{FormElements → UI}/Hint/Hint.js

@@ -9,17 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _md = require("react-icons/md");
-
-var _io = require("react-icons/io");
+var _reactFeather = require("react-feather");
 
 require("./Hint.scss");
 
@@ -27,16 +23,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var RC = 'hint';
-
 var Hint = function Hint(_ref) {
   var hint = _ref.hint,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'right' : _ref$side,
       className = _ref.className,
       _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '' : _ref$label,
-      iconOutline = _ref.iconOutline;
+      label = _ref$label === void 0 ? '' : _ref$label;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -58,21 +51,23 @@ var Hint = function Hint(_ref) {
     };
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(RC, className),
+    className: (0, _classnames.default)('hint', className),
     ref: hintRef
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     },
-    className: (0, _classnames.default)("".concat(RC, "__button"), (0, _defineProperty2.default)({}, "".concat(RC, "__button_active"), isOpen))
-  }, iconOutline ? /*#__PURE__*/_react.default.createElement(_md.MdHelpOutline, null) : /*#__PURE__*/_react.default.createElement(_io.IoMdHelpCircle, {
+    className: (0, _classnames.default)('hint__button', {
+      hint__button_active: isOpen
+    })
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.HelpCircle, {
     className: "hint__icon"
   }), label && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)('hint__label', {
       'color--primary': isOpen
     })
   }, label[0].toUpperCase() + label.slice(1))), isOpen && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(RC, "__text"), "".concat(RC, "__text_").concat(side))
+    className: (0, _classnames.default)('hint__text', "hint__text_".concat(side))
   }, hint));
 };
 

package/{src/Atomic/FormElements → dist/Atomic/UI}/Hint/Hint.scss

@@ -1,5 +1,3 @@
-@import "../../../../scss/vars";
-
 .hint {
   position: relative;
   display: inline-block;
@@ -12,24 +10,22 @@
     svg {
       width: 16px;
       height: 16px;
-      margin-right: 3px;
-    }
-
-    &:hover {
-      color: $color--primary;
+      margin-right: 5px;
     }
 
     &:hover,
     &_active {
-      svg > path {
-        fill: $color--primary;
+      color: #6b81dd;
+
+      svg {
+        color: #6b81dd;
       }
     }
   }
 
   &__text {
     position: absolute;
-    background-color: $color--primary;
+    background-color: #6b81dd;
     color: #fff;
     font-size: 10px;
     line-height: 16px;
@@ -49,7 +45,7 @@
       position: absolute;
       width: 8.5px;
       height: 8.5px;
-      background-color: $color--primary;
+      background-color: #6b81dd;
       transform: rotate(45deg);
     }
 
@@ -91,6 +87,6 @@
   }
 
   &__icon {
-    color: #9AA0B9;
+    color: #9aa0b9;
   }
 }

package/dist/Atomic/{FormElements → UI}/Hint/Hint.stories.js

@@ -11,11 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Hint = _interopRequireDefault(require("./Hint"));
 
-require("../../../../scss/main.scss");
-
 global.lng = 'en';
 var _default = {
-  title: 'Hint',
+  title: 'UI/Hint',
   component: _Hint.default,
   argTypes: {
     side: {
@@ -41,5 +39,6 @@ exports.HintTemplate = HintTemplate;
 HintTemplate.args = {
   hint: ' hint text hint text hint text hint text hint text hint text hint text hint text',
   side: 'right',
-  label: ''
+  label: '' // isIconOutline: false
+
 };

package/dist/Atomic/UI/Price/Price.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var Price = function Price(_ref) {
+  var value = _ref.value,
+      _ref$unit = _ref.unit,
+      unit = _ref$unit === void 0 ? '$' : _ref$unit,
+      unitAfter = _ref.unitAfter,
+      className = _ref.className;
+  if (value === undefined || value === null) return null;
+  var formatted;
+
+  if (value.length <= 3) {
+    formatted = parseFloat(value).toFixed(2);
+  } else {
+    formatted = Number(value.toString().replace(/[+*?$^(,)]/g, '')).toLocaleString('en-US');
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "price ".concat(className)
+  }, !unitAfter && unit, formatted, unitAfter && unit);
+};
+
+var _default = Price;
+exports.default = _default;

package/dist/Atomic/UI/Price/Price.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PriceTemplate = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Price = _interopRequireDefault(require("./Price"));
+
+global.lng = 'en';
+var _default = {
+  title: 'UI/Price',
+  component: _Price.default,
+  argTypes: {
+    value: {
+      description: 'string'
+    },
+    unit: {
+      description: 'string'
+    },
+    unitAfter: {
+      description: 'boolean'
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Price.default, args);
+};
+
+var PriceTemplate = Template.bind({});
+exports.PriceTemplate = PriceTemplate;
+PriceTemplate.args = {
+  value: '15000',
+  unit: '$',
+  unitAfter: false
+};

package/dist/Atomic/{FormElements → UI}/Status/Status.js

@@ -14,9 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./Status.scss");
 
 var Status = function Status(_ref) {
-  var _ref2, _ref3;
-
-  var value = _ref.value,
+  var label = _ref.label,
       status = _ref.status,
       disabled = _ref.disabled,
       type = _ref.type,
@@ -25,8 +23,8 @@ var Status = function Status(_ref) {
       _ref$pause = _ref.pause,
       pause = _ref$pause === void 0 ? 0 : _ref$pause,
       className = _ref.className,
-      noBackground = _ref.noBackground;
-  var label = ((_ref2 = value || status) === null || _ref2 === void 0 ? void 0 : _ref2[0].toUpperCase()) + ((_ref3 = value || status) === null || _ref3 === void 0 ? void 0 : _ref3.slice(1));
+      noBackground = _ref.noBackground,
+      children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
@@ -47,7 +45,7 @@ var Status = function Status(_ref) {
     }, {
       'color--gray-gull': noBackground && status === 'pause' && !className
     })
-  }, label));
+  }, children || label));
 };
 
 var _default = Status;

package/dist/Atomic/{FormElements → UI}/Status/Status.stories.js

@@ -11,11 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Status = _interopRequireDefault(require("./Status"));
 
-require("../../../../scss/main.scss");
-
 global.lng = 'en';
 var _default = {
-  title: 'Status',
+  title: 'UI/Status',
   component: _Status.default,
   argTypes: {
     status: {
@@ -30,6 +28,9 @@ var _default = {
     },
     disabled: {
       description: 'boolean'
+    },
+    children: {
+      description: 'any rect children'
     }
   }
 };

package/dist/Functions/useClickOutside.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutside = void 0;
+
+var _react = require("react");
+
+var useClickOutside = function useClickOutside(ref, setOut, open) {
+  function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+};
+
+exports.useClickOutside = useClickOutside;

package/dist/Functions/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
 
 var _react = require("react");
 
@@ -55,4 +55,12 @@ var logout = function logout() {
   window.location.reload();
 };
 
-exports.logout = logout;
+exports.logout = logout;
+
+var getStyles = function getStyles(el, prop) {
+  if (!el) return null;
+  if (!prop) return window.getComputedStyle(el);
+  return window.getComputedStyle(el).getPropertyValue(prop);
+};
+
+exports.getStyles = getStyles;

package/dist/Molecular/FormElements/FormElement.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Label = _interopRequireDefault(require("../../Atomic/FormElements/Label/Label"));
+
+require("./FormElement.scss");
+
+var RC = 'form-element';
+
+var FormElement = function FormElement(_ref) {
+  var label = _ref.label,
+      required = _ref.required,
+      children = _ref.children,
+      error = _ref.error,
+      className = _ref.className,
+      hint = _ref.hint;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(className, RC)
+  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
+    className: "".concat(RC, "__label"),
+    label: label,
+    hint: hint,
+    isRequired: required
+  }), children, error && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(RC, "__error")
+  }, error));
+};
+
+var _default = FormElement;
+exports.default = _default;

package/dist/Molecular/FormElements/FormElement.scss

@@ -0,0 +1,8 @@
+.form-element__error {
+  margin-top: 2px;
+  margin-left: 1px;
+  position: absolute;
+  display: block;
+  font-size: 10px;
+  color: #f06d8d;
+}

package/dist/Molecular/FormElements/FormElement.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputTemplate = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
+
+var _FormElement = _interopRequireDefault(require("./FormElement"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/Form Element',
+  component: _FormElement.default,
+  argTypes: {
+    label: {
+      description: 'string/JSX'
+    },
+    children: {
+      description: 'JSX'
+    },
+    error: {
+      description: 'string - print error if is errored'
+    },
+    required: {
+      description: 'boolean'
+    },
+    className: {
+      description: 'string'
+    },
+    hint: {
+      description: 'object {text: string, hintSide: bottom/right',
+      control: {
+        type: 'object'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_FormElement.default, args, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    error: args.error
+  }));
+};
+
+var InputTemplate = Template.bind({});
+exports.InputTemplate = InputTemplate;
+InputTemplate.args = {
+  label: 'Text label',
+  error: 'error',
+  required: true,
+  hint: {
+    text: 'hint',
+    hintSide: 'bottom'
+  },
+  numStep: 1,
+  min: '0',
+  max: '5',
+  placeholder: 'Placeholder',
+  mask: ''
+};

package/dist/scss/main.scss

@@ -35,6 +35,6 @@ button {
 
 .main {
     &__wrap {
-        display: flex;  
+        display: flex;
     }
-}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.2",
-  "description": "",
+  "version": "0.0.6",
+  "description": "Add date range selector",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -10,13 +10,17 @@
   "author": "Andrey Isakov",
   "license": "ISC",
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "classnames": "^2.3.1",
-    "react-icons": "^4.2.0"
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.34",
+    "react": "^17.0.2",
+    "react-feather": "^2.0.9",
+    "react-input-mask": "^2.0.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6"
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.15.6",
+    "classnames": "^2.3.1"
   }
 }

package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss

@@ -1,5 +1,3 @@
-@import '../../../../scss/vars';
-
 .checkbox-input {
     display: flex;
     align-items: center;
@@ -13,7 +11,7 @@
 
     &:hover {
         .checkbox-input__input {
-            background-color: rgba($color--primary, .2);
+            background-color: rgba(#6b81dd, .2);
         }
     }
 
@@ -31,7 +29,7 @@
         background-color: #ffff;
 
         &_checked {
-            border-color: $color--primary;
+            border-color: #6b81dd;
         }
 
         .checkbox-input__checkbox:checked ~ .checkbox-input__mark {
@@ -52,7 +50,7 @@
         position: absolute;
         width: 14px;
         height: 14px;
-        background-color: $color--primary;
+        background-color: #6b81dd;
 
         &:after {
             content: '';

package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import CheckboxInput from './CheckboxInput';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
-  title: 'CheckboxInput',
+  title: 'Form Elements/CheckboxInput',
   component: CheckboxInput
 };
 
@@ -22,6 +21,5 @@ Checkbox.args = {
   label: 'Test label',
   value: true,
   disabled: false,
-  forced: false,
-  isThirdStatement: false
+  forced: false
 };

package/src/Atomic/FormElements/DateTime/DateTime.stories.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import DateTime from './DateTime';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {
-  title: 'DateTime',
+  title: 'Form Elements/DateTime',
   component: DateTime
 };
 

package/src/Atomic/FormElements/DoubleString/DoubleString.stories.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import DoubleString from './DoubleString';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {

package/src/Atomic/FormElements/Dropdown/Dropdown.js

@@ -1,13 +1,13 @@
 import React, { useState, useRef, useEffect } from 'react';
 import cn from 'classnames';
-import { FiCheck, FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { Check, ChevronDown, ChevronUp } from 'react-feather';
 import Label from '../Label/Label';
 
 import './Dropdown.scss';
 
 const RC = 'dropdown';
 
-const Dropdown = ({ options, value, onChange, placeholder, className, label, isLabelBold, hint, hintSide, isSearchable }) => {
+const Dropdown = ({ options, value, error, onChange, placeholder, className, isSearchable }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const dropdownRef = useRef(null);
@@ -51,9 +51,9 @@ const Dropdown = ({ options, value, onChange, placeholder, className, label, isL
         className={cn(`${RC}__list-item`, { [`${RC}__list-item_active`]: item.value === value }, { [`${RC}__list-item_disabled`]: item.disabled })}
       >
         <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: item.value === value })}>
-          <FiCheck />
+          <Check />
         </span>
-        <div dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
+        <div className={item.className || ''} dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
       </button>
     ) : null;
 
@@ -75,19 +75,23 @@ const Dropdown = ({ options, value, onChange, placeholder, className, label, isL
 
   return (
     <div className={cn(RC, className)} ref={dropdownRef}>
-      {label && <Label className={`${RC}-label`} isBold={isLabelBold} label={label} hint={hint} hintSide={hintSide} />}
-      <button className={`${RC}__trigger`} onClick={() => setIsOpen(!isOpen)}>
+      <button className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`} onClick={() => !isSearchable ? setIsOpen(!isOpen) : null}>
         {isSearchable ? (
           <input
             className={`${RC}__input`}
             value={searchValue ?? selectedLabel}
             onChange={e => onSearchHandler(e.target.value)}
             placeholder={placeholder}
+            onFocus={() => setIsOpen(true)}
           />
         ) : (
-          selectedLabel || placeholder
+          <span className="text">
+            {selectedLabel || placeholder}
+          </span>
         )}
-        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>{isOpen ? <FiChevronUp /> : <FiChevronDown />}</span>
+        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? <ChevronUp /> : <ChevronDown />}
+        </span>
       </button>
       {isOpen && filteredOptions.length > 0 && (
         <div className={`${RC}__list`}>