intelicoreact 0.0.46 → 0.0.52

package/dist/Atomic/FormElements/Calendar/Calendar.js

@@ -33,7 +33,10 @@ function _default(props) {
       _props$allowPrev = props.allowPrev,
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _props$allowNext = props.allowNext,
-      allowNext = _props$allowNext === void 0 ? true : _props$allowNext;
+      allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
+      params = props.params;
+  var minDate = params.minDate,
+      maxDate = params.maxDate;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -73,14 +76,18 @@ function _default(props) {
     if (!day) return /*#__PURE__*/_react.default.createElement("div", {
       className: "calendar__day"
     });
-    var isFutureDay = day && (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    var isFutureDay = day && maxDate ? (0, _moment.default)(day.date).isAfter((0, _moment.default)(maxDate || ''), 'day') : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    var isBeforeDay = day && (0, _moment.default)(day.date).isBefore((0, _moment.default)(minDate || ''), 'day');
     var classNames = (0, _classnames.default)('calendar__day', {
       'calendar__day--clickable': day
     }, {
       'calendar__day--disabled': isFutureDay
+    }, {
+      'calendar__day--disabled': isBeforeDay
     }, {
       'calendar__day--selected': selectedDay.format() === (0, _moment.default)(day.date).format()
-    });
+    }); // console.log(isMaxDate, isMinDate);
+
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,

package/dist/Atomic/FormElements/Calendar/Calendar.scss

@@ -381,10 +381,10 @@ select.form-input {
   }
 }
 
-
 .calendar-header {
   display: flex;
   height: 24px;
+  margin: 0 6px;
 
   &__title {
     line-height: 20px;

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -118,6 +118,7 @@ var Dropdown = function Dropdown(_ref) {
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), item.value === value))
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
+      className: item.className || '',
       dangerouslySetInnerHTML: {
         __html: hightlightedText(item.label)
       }
@@ -159,7 +160,7 @@ var Dropdown = function Dropdown(_ref) {
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return !isSearchable ? setIsOpen(!isOpen) : null;
     }
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),
@@ -167,11 +168,17 @@ var Dropdown = function Dropdown(_ref) {
     onChange: function onChange(e) {
       return onSearchHandler(e.target.value);
     },
-    placeholder: placeholder
+    placeholder: placeholder,
+    onFocus: function onFocus() {
+      return setIsOpen(true);
+    }
   }) : /*#__PURE__*/_react.default.createElement("span", {
     className: "text"
   }, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
+    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
   }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__list")
   }, filteredOptions.map(function (filteredOption) {

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

@@ -65,7 +65,8 @@ DropdownTemplate.args = {
   isSearchable: true,
   options: [{
     label: 'Dropdown1',
-    value: 'drop1'
+    value: 'drop1',
+    className: 'status status--approved'
   }, {
     label: 'Dropdown2',
     value: 'drop2'

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

@@ -49,7 +49,8 @@ var Input = function Input(_ref) {
       onKeyUp = _ref.onKeyUp,
       mask = _ref.mask,
       error = _ref.error,
-      icon = _ref.icon;
+      icon = _ref.icon,
+      symbolsLimit = _ref.symbolsLimit;
 
   // STATES
   var _useState = (0, _react.useState)(false),
@@ -65,8 +66,8 @@ var Input = function Input(_ref) {
   var inputRef = (0, _react.useRef)(null); // HANDLES
 
   var handle = {
-    change: function change(event) {
-      var inputValue = event.target.value;
+    change: function change(e) {
+      var inputValue = e.target ? e.target.value : e;
 
       if (isNumeric || type === 'number' && inputValue !== '') {
         inputValue = parseFloat(inputValue) || '';
@@ -74,7 +75,7 @@ var Input = function Input(_ref) {
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
 
       onChange(inputValue.toString());
     },

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

@@ -71,6 +71,9 @@ var _default = {
     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'
     },
@@ -109,5 +112,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
+  symbolsLimit: 225
 };

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

@@ -7,54 +7,70 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarSimple = exports.default = void 0;
+exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _yup = require("yup");
-
 var _useClickOutside = require("../../../Functions/useClickOutside");
 
-var _Calendar = _interopRequireDefault(require("./Calendar"));
+var _Calendar = _interopRequireDefault(require("../Calendar/Calendar"));
 
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
+var _moment = _interopRequireDefault(require("moment"));
+
 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/Calendar',
-  component: _Calendar.default
-};
-exports.default = _default;
+var InputCalendar = function InputCalendar(_ref) {
+  var data = _ref.data,
+      params = _ref.params;
 
-var Template = function Template(args) {
-  var _useState = (0, _react.useState)(args.date),
+  var _useState = (0, _react.useState)(data),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       date = _useState2[0],
-      _setDate = _useState2[1];
+      setDate = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(date),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isOpened = _useState4[0],
-      setIsOpened = _useState4[1];
+      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: date,
+    value: inputValue,
     onChange: function onChange(e) {
-      return _setDate(e.target.value);
+      return changeInputValue(e.target.value);
     },
     className: "calendar-dropdown",
     onFocus: function onFocus() {
@@ -63,13 +79,11 @@ var Template = function Template(args) {
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
     date: date,
     setDate: function setDate(newDate) {
-      return _setDate(newDate);
-    }
+      return changeCalendarDay(newDate);
+    },
+    params: params
   }) : null);
 };
 
-var CalendarSimple = Template.bind({});
-exports.CalendarSimple = CalendarSimple;
-CalendarSimple.args = {
-  date: '10/11/2021'
-};
+var _default = InputCalendar;
+exports.default = _default;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Calendar = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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); }
+
+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/InputCalendar',
+  component: _InputCalendar.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  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 Calendar = Template.bind({});
+exports.Calendar = Calendar;
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021'
+};

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

@@ -15,6 +15,7 @@ var Price = function Price(_ref) {
       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) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.46",
-  "description": "",
+  "version": "0.0.52",
+  "description": "Add symbols limit in input",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

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

@@ -5,8 +5,8 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true } = props;
-
+  const { date, setDate, allowPrev = true, allowNext = true, params } = props;
+  const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
 
   const selectedDay = moment(date);
@@ -36,15 +36,19 @@ export default function (props) {
   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 isFutureDay = day && maxDate ? moment(day.date).isAfter(moment(maxDate || ''), 'day') : moment(day.date).isAfter(moment(), 'day');
+    const isBeforeDay = day && moment(day.date).isBefore(moment(minDate || ''), 'day');
 
     const classNames = cn(
       'calendar__day',
       { 'calendar__day--clickable': day },
       { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--disabled': isBeforeDay },
       { 'calendar__day--selected': selectedDay.format() === moment(day.date).format() }
     );
 
+    // console.log(isMaxDate, isMinDate);
+
     return (
       <div
         key={`${week}_${dayOfWeek}`}

package/src/Atomic/FormElements/Calendar/Calendar.scss

@@ -381,10 +381,10 @@ select.form-input {
   }
 }
 
-
 .calendar-header {
   display: flex;
   height: 24px;
+  margin: 0 6px;
 
   &__title {
     line-height: 20px;

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

@@ -53,7 +53,7 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
         <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: item.value === value })}>
           <Check />
         </span>
-        <div dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
+        <div className={item.className || ''} dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
       </button>
     ) : null;
 
@@ -75,18 +75,23 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
 
   return (
     <div className={cn(RC, className)} ref={dropdownRef}>
-      <button className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`} 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)}
           />
         ) : (
-          <span className="text">{selectedLabel || placeholder}</span>
+          <span className="text">
+            {selectedLabel || placeholder}
+          </span>
         )}
-        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>{isOpen ? <ChevronUp /> : <ChevronDown />}</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`}>

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

@@ -32,7 +32,7 @@ DropdownTemplate.args = {
   placeholder: 'Placeholder',
   isSearchable: true,
   options: [
-    { label: 'Dropdown1', value: 'drop1' },
+    { label: 'Dropdown1', value: 'drop1', className: 'status status--approved' },
     { label: 'Dropdown2', value: 'drop2' },
     { label: 'Dropdown3', value: 'drop3', disabled: true },
     { label: 'Dropdown4', value: 'drop4' },

package/src/Atomic/FormElements/Input/Input.js

@@ -23,6 +23,7 @@ const Input = ({
   mask,
   error,
   icon,
+  symbolsLimit,
 }) => {
   // STATES
   const [isFocused, setIsFocused] = useState(false);
@@ -30,14 +31,14 @@ const Input = ({
   const inputRef = useRef(null);
   // HANDLES
   const handle = {
-    change: event => {
-      let inputValue = event.target.value;
+    change: e => {
+      let inputValue = e.target ? e.target.value : e;
       if (isNumeric || (type === 'number' && inputValue !== '')) {
         inputValue = parseFloat(inputValue) || '';
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
       onChange(inputValue.toString());
     },
     toggleEdit: () => {
@@ -70,7 +71,7 @@ const Input = ({
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
     min,
-    max
+    max,
   };
 
   function renderInput() {

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

@@ -43,6 +43,7 @@ export default {
     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' }
@@ -67,5 +68,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: <User />
+  icon: <User />,
+  symbolsLimit: 225
 };

package/src/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -0,0 +1,43 @@
+import React, { useState, useRef } from 'react';
+import { useClickOutside } from '../../../Functions/useClickOutside';
+import Calendar from '../Calendar/Calendar';
+import InputMask from 'react-input-mask';
+import moment from 'moment';
+
+const InputCalendar = ({ data, params }) => {
+  const [date, setDate] = useState(data);
+  const [inputValue, setInputValue] = useState(date);
+  const [isOpened, setIsOpened] = useState(false);
+  const calendarRef = useRef(null);
+
+  useClickOutside(calendarRef, () => setIsOpened(false));
+
+  const changeInputValue = (value) => {
+    if (!value.includes('_') && value) {
+      setDate(moment(value).format('L'));
+      setInputValue(moment(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  const changeCalendarDay = (value) => {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return (
+    <div className="calendar-container" ref={calendarRef}>
+      <InputMask
+        mask="99/99/9999"
+        value={inputValue}
+        onChange={(e) => changeInputValue(e.target.value)}
+        className="calendar-dropdown"
+        onFocus={() => setIsOpened(!isOpened)}
+      />
+      {isOpened ? <Calendar date={date} setDate={(newDate) => changeCalendarDay(newDate)} params={params} /> : null}
+    </div>
+  );
+};
+
+export default InputCalendar;

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

@@ -0,0 +1,27 @@
+import React, { useRef, useState } from 'react';
+import { ref } from 'yup';
+import InputCalendar from './InputCalendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/InputCalendar',
+  component: InputCalendar,
+};
+
+const Template = (args) => {
+  const params = {
+    minDate: args?.minDate,
+    maxDate: args?.maxDate,
+  };
+
+  return <InputCalendar data={args.date} params={params} />;
+};
+
+export const Calendar = Template.bind({});
+
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021',
+};

package/src/Atomic/UI/Price/Price.js

@@ -1,5 +1,6 @@
 import React from 'react';
 const Price = ({ value, unit = '$', unitAfter, className }) => {
+  if (value === undefined || value === null) return null;
   let formatted;
   if (value.length <= 3) {
     formatted = parseFloat(value).toFixed(2);

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

@@ -1,38 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { ref } from 'yup';
-import { useClickOutside } from '../../../Functions/useClickOutside';
-import Calendar from './Calendar';
-import InputMask from 'react-input-mask';
-
-global.lng = 'en';
-
-export default {
-  title: 'Form Elements/Calendar',
-  component: Calendar,
-};
-
-const Template = (args) => {
-  const [date, setDate] = useState(args.date);
-  const [isOpened, setIsOpened] = useState(false);
-  const calendarRef = useRef(null);
-  useClickOutside(calendarRef, () => setIsOpened(false));
-
-  return (
-    <div className="calendar-container" ref={calendarRef}>
-      <InputMask
-        mask="99/99/9999"
-        value={date}
-        onChange={(e) => setDate(e.target.value)}
-        className="calendar-dropdown"
-        onFocus={() => setIsOpened(!isOpened)}
-      />
-      {isOpened ? <Calendar date={date} setDate={(newDate) => setDate(newDate)} /> : null}
-    </div>
-  );
-};
-
-export const CalendarSimple = Template.bind({});
-
-CalendarSimple.args = {
-  date: '10/11/2021',
-};