intelicoreact 0.0.24 → 0.0.41

package/dist/Atomic/UI/Button/Button.scss

@@ -1,22 +1,22 @@
 .button {
-    display: inline-flex;
-    align-items: center;
-    font-size: 13px;
-    line-height: 20px;
-    border-radius: 3px;
-    padding: 3px 10px;
-    cursor: pointer;
-    box-sizing: border-box;
-    text-align: center;
-    user-select: none;
-    height: 28px;
-    white-space: nowrap;
-    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  line-height: 20px;
+  border-radius: 3px;
+  padding: 3px 10px;
+  cursor: pointer;
+  box-sizing: border-box;
+  text-align: center;
+  user-select: none;
+  height: 28px;
+  white-space: nowrap;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
 
-    &:disabled {
-        opacity: 0.5;
-        pointer-events: none;
-    }
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
     &_dark-outline {
         border: 1px solid #bac2c9;
@@ -45,36 +45,38 @@
         }
     }
 
-    &_link {
-        color: #6b81dd;
+  &_link {
+    color: #6b81dd;
+    box-shadow: none;
 
-        svg {
-            display: none;
-        }
+    svg {
+      display: none;
     }
+  }
 
-    &_success {
-        background-color: #7AC48C;
-        border: 1px solid #7AC48C;
-        color: #fff;
-        &:hover {
-            filter: brightness(1.1);
-        }
-    }
+  &_success {
+    background-color: #7ac48c;
+    border: 1px solid #7ac48c;
+    color: #fff;
 
-    &__text {
-        width: 100%;
-        text-align: center;
+    &:hover {
+      filter: brightness(1.1);
     }
+  }
 
-    &:active {
-        filter: brightness(1.3);
-    }
+  &__text {
+    width: 100%;
+    text-align: center;
+  }
 
-    &__icon {
-        width: 20px;
-        height: 25px;
-        margin-right: 5px;
-        min-width: 15px;
-    }
+  &:active {
+    filter: brightness(1.1);
+  }
+
+  &__icon {
+    width: 20px;
+    height: 25px;
+    margin-right: 5px;
+    min-width: 15px;
+  }
 }

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

@@ -9,13 +9,13 @@ exports.ButtonTemplate = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = _interopRequireDefault(require("./Button"));
+var _reactFeather = require("react-feather");
 
-require("../../../../scss/main.scss");
+var _Button = _interopRequireDefault(require("./Button"));
 
 global.lng = 'en';
 var _default = {
-  title: 'Button',
+  title: 'UI/Button',
   component: _Button.default,
   argTypes: {
     variant: {
@@ -25,7 +25,7 @@ var _default = {
         options: ['primary', 'secondary', 'dark-outline', 'link']
       }
     },
-    text: {
+    label: {
       description: 'string'
     },
     disabled: {
@@ -38,25 +38,9 @@ var _default = {
       description: 'svg icon code',
       control: {
         type: 'select',
-        options: ['FiCheck', 'FiEdit3', 'FiPlus', 'FiTool', 'FiUploadCloud', 'FiX', 'FiArrowLeft']
+        options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X', 'ArrowLeft']
       }
     }
-  },
-  text: {
-    description: 'string'
-  },
-  disabled: {
-    description: 'boolean'
-  },
-  onClick: {
-    description: 'function'
-  },
-  icon: {
-    description: 'svg icon code',
-    control: {
-      type: 'select',
-      options: ['FiCheck', 'FiEdit3', 'FiPlus', 'FiTool', 'FiUploadCloud', 'FiX']
-    }
   }
 };
 exports.default = _default;
@@ -72,6 +56,6 @@ ButtonTemplate.args = {
   onClick: function onClick() {
     return null;
   },
-  text: 'Button',
-  icon: 'FiCheck'
+  label: 'Button',
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)
 };

package/dist/Atomic/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/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/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,32 @@
+"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;
+  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/scss/main.scss

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.24",
+  "version": "0.0.41",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -10,13 +10,15 @@
   "author": "Andrey Isakov",
   "license": "ISC",
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "classnames": "^2.3.1",
-    "react-icons": "^4.2.0"
+    "react-feather": "^2.0.9",
+    "react-input-mask": "^2.0.4",
+    "moment": "^2.29.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6"
+    "@babel/preset-env": "^7.15.6",
+    "@babel/polyfill": "^7.12.1",
+    "classnames": "^2.3.1"
   }
 }

package/src/Atomic/FormElements/Calendar/Calendar.js

@@ -0,0 +1,106 @@
+import cn from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+import { ChevronLeft, ChevronRight } from 'react-feather';
+import './Calendar.scss';
+
+export default function (props) {
+  const { date, setDate, allowPrev = true, allowNext = true } = props;
+
+  const [days, setDays] = useState({});
+
+  const selectedDay = moment(date);
+  const isError = 'Invalid date';
+
+  const title = useMemo(
+    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(date).format('YYYY')}`),
+    [date]
+  );
+  useEffect(() => {
+    const result = {};
+    const day = selectedDay.startOf('month');
+    const daysInMonth = day.daysInMonth();
+    for (let d = 0; d < daysInMonth; d += 1) {
+      let week = day.week();
+      if (day.month() === 11 && week === 1) week = 53;
+      if (day.month() === 0 && week === 53) week = 0;
+      if (!Object.prototype.hasOwnProperty.call(result, week)) {
+        result[week] = {};
+      }
+      result[week][day.weekday()] = { date: day.toDate() };
+      day.add(1, 'd');
+    }
+    setDays(result);
+  }, [date]);
+
+  const renderDay = (week, dayOfWeek) => {
+    const day = days[week][dayOfWeek];
+    if (!day) return <div className="calendar__day" />;
+    const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
+
+    const classNames = cn(
+      'calendar__day',
+      { 'calendar__day--clickable': day },
+      { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--selected': selectedDay.format() === moment(day.date).format() }
+    );
+
+    return (
+      <div
+        key={`${week}_${dayOfWeek}`}
+        className={classNames}
+        onClick={day && !isFutureDay ? () => setDate(moment(day.date).format('L')) : null}
+        // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
+        // onMouseLeave={() => onHover(null)}
+      >
+        {day && day.date.getDate()}
+      </div>
+    );
+  };
+
+  const handlePrev = () => {
+    setDate(moment(date).subtract(1, 'month').format('L'));
+  };
+
+  const handleNext = () => {
+    setDate(moment(date).add(1, 'month').format('L'));
+  };
+
+  return (
+    <div className="calendar">
+      <div className="calendar-header">
+        <div className="calendar-header__prev">
+          {allowPrev && (
+            <div onClick={handlePrev}>
+              <ChevronLeft />
+            </div>
+          )}
+        </div>
+        <div className="calendar-header__title">{title}</div>
+        <div className="calendar-header__next">
+          {allowNext && (
+            <div onClick={handleNext}>
+              <ChevronRight />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="calendar__week">
+        {[...Array(7).keys()].map((dayOfWeek) => {
+          return (
+            <div key={`day-of-week_${dayOfWeek}`} className="calendar__day calendar__day--title">
+              {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+            </div>
+          );
+        })}
+      </div>
+      {Object.keys(days).map((week, index) => (
+        <div key={`week_${index}`} className="calendar__week">
+          {[...Array(7).keys()].map((dayOfWeek) => (
+            <React.Fragment key={`calendar-day--${dayOfWeek}`}>{renderDay(week, dayOfWeek)}</React.Fragment>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}