intelicoreact 0.0.4 → 0.0.8

package/dist/Atomic/FormElements/Input/Input.js

@@ -15,47 +15,51 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactFeather = require("react-feather");
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
-var _Label = _interopRequireDefault(require("../Label/Label"));
+var _index = require("../../../Constants/index.constants");
 
-require("./Input.scss");
+var _inputExecutor = require("../../../Functions/inputExecutor");
 
-var _excluded = ["error", "onChange", "disabled", "withDelete", "isNumeric", "min", "max", "value", "placeholder", "hint", "label", "hintSide", "className", "isLabelBold", "type", "onBlur", "icon", "isRequired"];
+require("./Input.scss");
 
 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; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var Input = function Input(_ref) {
-  var error = _ref.error,
-      onChange = _ref.onChange,
+  var onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onKeyUp = _ref.onKeyUp,
+      isNotBlinkErrors = _ref.isNotBlinkErrors,
+      isPriceInput = _ref.isPriceInput,
+      isOnlyNumber = _ref.isOnlyNumber,
+      isOnlyString = _ref.isOnlyString,
+      isTwoDigitAfterDot = _ref.isTwoDigitAfterDot,
       disabled = _ref.disabled,
       withDelete = _ref.withDelete,
-      isNumeric = _ref.isNumeric,
-      min = _ref.min,
-      max = _ref.max,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? min : _ref$value,
+      value = _ref.value,
       placeholder = _ref.placeholder,
-      hint = _ref.hint,
-      label = _ref.label,
-      hintSide = _ref.hintSide,
       className = _ref.className,
-      isLabelBold = _ref.isLabelBold,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      _ref$onBlur = _ref.onBlur,
-      _onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+      mask = _ref.mask,
+      maskChar = _ref.maskChar,
+      formatChars = _ref.formatChars,
+      error = _ref.error,
       icon = _ref.icon,
-      isRequired = _ref.isRequired,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      symbolsLimit = _ref.symbolsLimit,
+      blinkTime = _ref.blinkTime;
+  var DEFAULT_BLINK_TIME = 100; // STATES
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -64,98 +68,138 @@ var Input = function Input(_ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      onInputHover = _useState4[0],
-      setOnInputHover = _useState4[1];
+      isEditing = _useState4[0],
+      setEditing = _useState4[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  var previousValueRef = (0, _react.useRef)(value);
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isEditing = _useState6[0],
-      setEditing = _useState6[1];
+      isAttemptToChange = _useState6[0],
+      setIsAttemptToChange = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isToHighlightError = _useState8[0],
+      setIsToHighlightError = _useState8[1];
+
+  var onlyNumbers = _inputExecutor.formatInput.onlyNumbers,
+      onlyString = _inputExecutor.formatInput.onlyString;
+  var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
+      addCommas = _formatInput$priceInp.addCommas,
+      removeComma = _formatInput$priceInp.removeComma; // HANDLES
+
+  var handle = {
+    change: function change(e) {
+      var inputValue = e.target ? e.target.value : e;
+
+      if (symbolsLimit && inputValue.length > +symbolsLimit) {
+        inputValue = inputValue.substring(0, +symbolsLimit);
+      }
+
+      if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
+      if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
+      if (isOnlyString) inputValue = onlyString(inputValue);
+      onChange(inputValue.toString());
+    },
+    toggleEdit: function toggleEdit() {
+      setEditing(!isEditing);
+      onChange('');
+    },
+    focus: function focus(e) {
+      setIsFocused(true);
+      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) onChange(removeComma(value));
+      if (onFocus) onFocus(e);
+    },
+    blur: function blur(e) {
+      setIsFocused(false);
+      setEditing(false);
 
-  var inputRef = (0, _react.useRef)(null);
+      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
+        onChange(addCommas(value));
+      }
 
-  var changeHandler = function changeHandler(inputValue) {
-    if (isNumeric || type === 'number' && inputValue !== '') {
-      var totalValue = Number(+inputValue);
-      if (totalValue >= (min !== null && min !== void 0 ? min : -Infinity) && totalValue <= (max !== null && max !== void 0 ? max : Infinity)) onChange(totalValue);
-      return;
-    }
+      if (isTwoDigitAfterDot && !isPriceInput) {
+        onChange(cutOffsingleDot(value));
+      }
 
-    onChange(inputValue);
-  };
+      if (onBlur) onBlur(e);
+    },
+    keyUp: function keyUp(e) {
+      if (!isNotBlinkErrors) {
+        var _previousValueRef$cur;
+
+        var changedValue = '' + (value !== null && value !== void 0 ? value : '');
+        var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
+
+        var currentSet = function () {
+          if (previousValue.length < changedValue.length) return value.slice(previousValue.length - changedValue.length);else return changedValue.includes(e.key) ? e.key : '';
+        }();
 
-  var toggleEditing = function toggleEditing() {
-    setEditing(!isEditing);
+        if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
+        console.log(changedValue, previousValue);
+        if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e);
+    }
   };
 
+  function cutOffsingleDot(value) {
+    return value.slice(-1) === '.' ? value.slice(0, -1) : value;
+  }
+
   (0, _react.useEffect)(function () {
-    if (isEditing) {
-      inputRef.current.focus();
-    }
+    if (isEditing) inputRef.current.focus();
   }, [isEditing, isFocused]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('input-classic', className)
-  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    className: "input-classic-label",
-    isBold: isLabelBold,
-    label: label,
-    hint: hint,
-    hintSide: hintSide,
-    isRequired: isRequired
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    onMouseEnter: function onMouseEnter() {
-      return setOnInputHover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setOnInputHover(false);
-    },
-    className: (0, _classnames.default)("input-classic__wrap", (0, _defineProperty2.default)({}, "input-classic__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input-classic__wrap_error", error), (0, _defineProperty2.default)({}, "input-classic__wrap_disabled", disabled))
-  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-    ref: inputRef,
-    className: "input-classic__input",
-    type: isNumeric ? 'number' : type,
-    onChange: function onChange(e) {
-      return changeHandler(e.target.value);
-    },
+
+  var uniProps = _objectSpread(_objectSpread({
+    className: "input ".concat(className),
+    placeholder: placeholder,
     value: value || '',
     disabled: disabled,
-    onBlur: function onBlur() {
-      setIsFocused(false);
-      setEditing(false);
+    onChange: handle.change,
+    onFocus: handle.focus,
+    onBlur: handle.blur,
+    onKeyUp: handle.keyUp
+  }, maskChar ? {
+    maskChar: maskChar
+  } : {}), formatChars ? {
+    formatChars: formatChars
+  } : {});
+
+  function renderInput() {
+    if (mask) {
+      return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
+        ref: inputRef,
+        mask: mask
+      }));
+    }
 
-      _onBlur();
-    },
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    },
-    placeholder: placeholder
-  }, props)), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
-    className: "input-classic__nums"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return changeHandler(value - 1);
-    },
-    className: (0, _classnames.default)("input-classic__num-btn", {
-      disabled: value === min
-    })
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return changeHandler(value + 1);
-    },
-    className: (0, _classnames.default)("input-classic__num-btn", {
-      disabled: value === max
-    })
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))), withDelete && onInputHover && !isNumeric && /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames.default)("input-classic__close", {
+    return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
+      ref: inputRef,
+      type: isPriceInput ? 'text' : type
+    }));
+  }
+
+  (0, _react.useEffect)(function () {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(null);
+      setIsToHighlightError(true);
+      setTimeout(function () {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
+  }, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("input__close", {
       hidden: !value
     }),
-    onClick: function onClick() {
-      toggleEditing();
-      onChange('');
-    }
-  }), icon !== null && icon !== void 0 ? icon : null), error && /*#__PURE__*/_react.default.createElement("span", {
-    className: "input-classic__error"
-  }, error));
+    onClick: handle.toggleEdit
+  }));
 };
 
 var _default = Input;

package/dist/Atomic/FormElements/Input/Input.scss

@@ -1,9 +1,12 @@
-.input-classic {
+.input {
   position: relative;
   word-break: break-all;
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
+  border: none;
+  background: none;
+  padding: 0 10px;
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
       -webkit-appearance: none;
   }
 
@@ -60,15 +63,6 @@
     border-radius: 4px;
   }
 
-  &__error {
-    margin-top: 2px;
-    margin-left: 1px;
-    position: absolute;
-    display: block;
-    font-size: 10px;
-    color: #f06d8d;
-  }
-
   &__close {
     position: relative;
     opacity: 0.6;
@@ -77,7 +71,8 @@
     background: none;
     cursor: pointer;
     margin-right: 4px;
-
+    visibility: hidden;
+    pointer-events: none;
     &:hover {
       opacity: 1;
     }
@@ -121,7 +116,9 @@
     background: none;
     font-size: 20px;
     user-select: none;
-
+    &.disabled {
+      opacity: 0.3;
+    }
     svg {
       margin-right: 0;
     }
@@ -131,3 +128,9 @@
     margin-bottom: 5px;
   }
 }
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}
+

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -15,6 +15,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactFeather = require("react-feather");
+
 var _Input = _interopRequireDefault(require("./Input"));
 
 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); }
@@ -26,46 +28,60 @@ var _default = {
   title: 'Form Elements/Input',
   component: _Input.default,
   argTypes: {
-    hintSide: {
-      description: 'string: ["right", "bottom", "top", "left"]',
-      control: {
-        type: 'select',
-        options: ['right', 'bottom', 'top', 'left']
-      }
-    },
-    hint: {
-      description: 'string'
-    },
     disabled: {
       description: 'boolean'
     },
     error: {
-      description: 'text'
+      description: 'text - coloring input if is errored'
+    },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
     },
     withDelete: {
-      description: 'boolean'
+      description: 'boolean - add clear-cross by hover'
     },
-    isNumeric: {
-      description: 'boolean'
+    isOnlyNumber: {
+      description: 'boolean - only numbers'
     },
-    min: {
-      description: 'number'
+    isOnlyString: {
+      description: 'boolean - only strings'
     },
-    max: {
-      description: 'number'
+    isTwoDigitAfterDot: {
+      description: 'boolean - only two digits after dot'
     },
     placeholder: {
       description: 'text'
     },
-    label: {
-      description: 'text'
-    },
     type: {
-      description: 'string: any input type',
+      description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
       control: {
         type: 'select',
-        options: ['text', 'number']
+        options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
       }
+    },
+    icon: {
+      description: 'JSX'
+    },
+    value: {
+      description: '(* - required prop)'
+    },
+    className: {
+      description: 'string'
+    },
+    mask: {
+      description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
+    },
+    symbolsLimit: {
+      description: 'Set limit of symbols in input, overhead will be ignored'
+    },
+    onBlur: {
+      description: 'custom callback on blur'
+    },
+    onFocus: {
+      description: 'custom callback on focus'
+    },
+    onKeyUp: {
+      description: 'custom callback on keyup, returns event keyCode'
     }
   }
 };
@@ -87,14 +103,15 @@ var InputTemplate = Template.bind({});
 exports.InputTemplate = InputTemplate;
 InputTemplate.args = {
   type: 'text',
+  isOnlyNumber: false,
+  isOnlyString: false,
+  isPriceInput: false,
+  isTwoDigitAfterDot: false,
   disabled: false,
   error: '',
+  mask: '',
   withDelete: true,
-  isNumeric: false,
-  min: '0',
-  max: 5,
+  symbolsLimit: 255,
   placeholder: 'Placeholder',
-  label: 'label',
-  hint: 'hint',
-  hintSide: 'bottom'
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
 };

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+
+var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
+
+var _useClickOutside = require("../../../Functions/useClickOutside");
+
+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; }
+
+var InputCalendar = function InputCalendar(_ref) {
+  var data = _ref.data,
+      params = _ref.params;
+
+  var _useState = (0, _react.useState)(data),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(date),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isOpened = _useState6[0],
+      setIsOpened = _useState6[1];
+
+  var calendarRef = (0, _react.useRef)(null);
+  (0, _useClickOutside.useClickOutside)(calendarRef, function () {
+    return setIsOpened(false);
+  });
+
+  var changeInputValue = function changeInputValue(value) {
+    if (!value.includes('_') && value) {
+      setDate((0, _moment.default)(value).format('L'));
+      setInputValue((0, _moment.default)(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  var changeCalendarDay = function changeCalendarDay(value) {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-container",
+    ref: calendarRef
+  }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
+    mask: "99/99/9999",
+    value: inputValue,
+    onChange: function onChange(e) {
+      return changeInputValue(e.target.value);
+    },
+    className: "calendar-dropdown",
+    onFocus: function onFocus() {
+      return setIsOpened(!isOpened);
+    }
+  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: date,
+    setDate: function setDate(newDate) {
+      return changeCalendarDay(newDate);
+    },
+    params: params
+  }) : null);
+};
+
+var _default = InputCalendar;
+exports.default = _default;

package/dist/Atomic/FormElements/{Calendar/Calendar.stories.js → InputCalendar/InputCalendar.stories.js}

@@ -7,13 +7,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarSimple = exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.Calendar = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Calendar = _interopRequireDefault(require("./Calendar"));
+var _yup = require("yup");
+
+var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
 
 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); }
 
@@ -21,27 +21,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 global.lng = 'en';
 var _default = {
-  title: 'Form Elements/Calendar',
-  component: _Calendar.default
+  title: 'Form Elements/InputCalendar',
+  component: _InputCalendar.default
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)(args.date),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: date,
-    onClick: function onClick(newDate) {
-      return setDate(newDate);
-    }
+  var params = {
+    minDate: args === null || args === void 0 ? void 0 : args.minDate,
+    maxDate: args === null || args === void 0 ? void 0 : args.maxDate
+  };
+  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, {
+    data: args.date,
+    params: params
   });
 };
 
-var CalendarSimple = Template.bind({});
-exports.CalendarSimple = CalendarSimple;
-CalendarSimple.args = {
-  date: '10.04.2021'
+var Calendar = Template.bind({});
+exports.Calendar = Calendar;
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021'
 };