intelicoreact 1.5.33 → 1.5.35

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

@@ -109,7 +109,7 @@
       height: 14px;
       margin: auto;
 
-      content: "";
+      content: '';
 
       background-color: #9aa0b9;
     }

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

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InputTemplate: function() {
+        return InputTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("./Input"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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';
+const _default = {
+    title: 'Form Elements/Input',
+    component: _Input.default,
+    argTypes: {
+        disabled: {
+            description: 'Disable input. Default is false.',
+            control: 'boolean'
+        },
+        error: {
+            description: 'Display validation error. Expect error message.',
+            control: 'text'
+        },
+        isPriceInput: {
+            description: 'Style the input as PriceInput. Default is false.',
+            control: 'boolean'
+        },
+        withDelete: {
+            description: 'Show clear (x) icon on hover. Default is false.',
+            control: 'boolean'
+        },
+        onlyNumbers: {
+            description: 'Only allow numeric value. Default is false.',
+            control: 'boolean'
+        },
+        blurTrim: {
+            description: 'Trim value on blur. Default is false.',
+            control: {
+                type: 'object',
+                options: {
+                    trimStart: true,
+                    trimEnd: true,
+                    characters: /\s12345/
+                }
+            }
+        },
+        isTwoDigitAfterDot: {
+            description: 'Allow only two digits after the decimal point. Default is true.',
+            control: 'boolean'
+        },
+        isFocusDefault: {
+            description: 'Automatically focus input on initial load. Default is false.',
+            control: 'boolean'
+        },
+        isCropFirstNool: {
+            description: 'Remove leading zeros. Work only if isPriceInput is true. Default is false.',
+            control: 'boolean'
+        },
+        placeholder: {
+            description: 'Placeholder text for the input.',
+            control: 'text'
+        },
+        type: {
+            description: 'Defines the type of the input.',
+            control: {
+                type: 'select',
+                options: [
+                    'text',
+                    'number',
+                    'password',
+                    'pseudoPassword',
+                    'color',
+                    'date',
+                    'datetime-local',
+                    'month',
+                    'time',
+                    'email',
+                    'range'
+                ]
+            }
+        },
+        icon: {
+            description: 'JSX: Add an icon inside the input',
+            control: 'object'
+        },
+        value: {
+            description: 'Value of the input. This is a required prop.',
+            control: 'text'
+        },
+        className: {
+            description: 'Add additional CSS classes to the input.',
+            control: 'text'
+        },
+        mask: {
+            description: 'Define an input mask. See more at: https://www.npmjs.com/package/react-input-mask',
+            control: 'text'
+        },
+        symbolsLimit: {
+            description: 'Set limit of symbols in input, overhead will be ignored',
+            control: 'number'
+        },
+        onBlur: {
+            description: 'Custom onBlur function',
+            action: 'onBlur'
+        },
+        onFocus: {
+            description: 'Custom onFocus function',
+            action: 'onFocus'
+        },
+        onKeyUp: {
+            description: 'Custom onKeyUp function, returns event keyCode',
+            action: 'onKeyUp'
+        },
+        isNumericMobileKeyboard: {
+            description: 'Enable Mobile Numeric Keyboard',
+            control: 'boolean'
+        },
+        attributesOfNativeInput: {
+            description: 'Object. Optional. This is list of attributes to add in native input',
+            control: 'object'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'Input component for capturing user text input. Supports different styles, behaviors and also validation errors'
+            }
+        }
+    }
+};
+const styles = {
+    with: '200px'
+};
+const Template = (args)=>{
+    const [value, setValue] = (0, _react.useState)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+        ...args,
+        style: styles,
+        value: value,
+        onChange: setValue
+    });
+};
+const InputTemplate = Template.bind({});
+InputTemplate.args = {
+    onlyNumbers: {
+        type: 'float',
+        decimalPlaces: 2
+    },
+    isPriceInput: true,
+    inputMode: "decimal",
+    type: 'text',
+    isLoading: false,
+    isFocusDefault: false,
+    // onlyNumbers: {type: 'float', decimalPlaces: 2, min: 0, max: 1000, isNoEmptyValues: true},
+    isPriceInput: false,
+    isTwoDigitAfterDot: false,
+    isReadOnly: false,
+    disabled: false,
+    error: '',
+    mask: '',
+    withDelete: true,
+    symbolsLimit: 255,
+    placeholder: 'Placeholder',
+    // icon: <User className="mr5" />,
+    isNumericMobileKeyboard: false,
+    isNotValidateASCII: false,
+    isCropFirstNool: false,
+    name: 'test-name',
+    fieldKey: 'test-fieldKey',
+    key: 'test-key',
+    id: 'test-id',
+    // action: (
+    //   <div onClick={() => console.log('input action')} className="mr5 color--primary pointer">
+    //     Generate
+    //   </div>
+    // ),
+    iconKey: 'Anchor',
+    iconKeyProps: {
+        size: 16,
+        color: 'red',
+        strokeWidth: 2
+    },
+    blurTrim: {
+        trimStart: true,
+        trimEnd: false,
+        characters: [
+            '5',
+            '6',
+            '0',
+            ' '
+        ]
+    }
+};

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

@@ -1,121 +1,165 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
-var _useClickOutside = require("../../../Functions/useClickOutside");
-var _Calendar = _interopRequireDefault(require("../Calendar/Calendar"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _momenttimezone = /*#__PURE__*/ _interop_require_default(require("moment-timezone"));
+const _reactinputmask = /*#__PURE__*/ _interop_require_default(require("react-input-mask"));
+const _useClickOutside = require("../../../Functions/useClickOutside");
+const _Calendar = /*#__PURE__*/ _interop_require_default(require("../Calendar/Calendar"));
 require("./InputCalendar.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const InputCalendar = _ref => {
-  let {
-    value,
-    minDate,
-    maxDate,
-    format = "MM/DD/YYYY",
-    isDontLimitFuture,
-    onChange,
-    className = "",
-    placeholder = "mm/dd/yyyy",
-    mask = "99/99/9999",
-    isListTop,
-    disabled,
-    disabledFormattedMaxDate = false,
-    testId = "input-calendar",
-    onKeyDown: onKeyDownProp = e => {},
-    onKeyUp: onKeyUpProp = e => {},
-    onBlur: onBlurProp = e => {}
-  } = _ref;
-  const [isOpened, setIsOpened] = (0, _react.useState)(null);
-  const [isOpenedByEnter, setOpenedByEnter] = (0, _react.useState)(false);
-  const calendarRef = (0, _react.useRef)(null);
-  const inputRef = (0, _react.useRef)(null);
-  const formattedMinDate = (0, _momentTimezone.default)(minDate, format).format(format) !== "Invalid date" ? (0, _momentTimezone.default)(minDate, format).format(format) : null;
-  const formattedMaxDate = (0, _momentTimezone.default)(maxDate, format).format(format) !== "Invalid date" ? (0, _momentTimezone.default)(maxDate, format).format(format) : null;
-  const momentMinDate = (0, _momentTimezone.default)(formattedMinDate, format).startOf("day");
-  const momentMaxDate = (0, _momentTimezone.default)(formattedMaxDate, format).startOf("day");
-  (0, _useClickOutside.useClickOutside)(calendarRef, () => setIsOpened(false));
-  const changeInputValue = val => {
-    if (onChange) onChange(val);
-  };
-  const changeCalendarDay = val => {
-    if (onChange) onChange(val);
-  };
-  const getCalendarValue = value => {
-    const date = (0, _momentTimezone.default)(value).format("L");
-    if (date !== "Invalid date") return date;
-    return (0, _momentTimezone.default)(new Date()).format("L");
-  };
-  (0, _react.useEffect)(() => {
-    if (typeof isOpened === "boolean" && !isOpened) {
-      handleBlur();
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
     }
-  }, [isOpened]);
-  const handleBlur = e => {
-    var _inputRef$current;
-    let value = inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
-    if ((0, _momentTimezone.default)(value, format).format(format) === "Invalid date" || value.indexOf("_") > -1) value = "";
-    if (value && typeof isOpened === "boolean" && (0, _momentTimezone.default)(value, format).startOf("day").isBefore(momentMinDate, "days")) onChange(formattedMinDate);else if (value && typeof isOpened === "boolean" && (0, _momentTimezone.default)(value, format).endOf("day").isAfter(momentMaxDate, "days")) onChange(formattedMaxDate);else if (value) onChange((0, _momentTimezone.default)(value, format).format(format));
-  };
-  const onKeyDown = e => {
-    if (isOpened && [9, 13].includes(e.keyCode)) {
-      setIsOpened(false);
-      setOpenedByEnter(true);
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-    onKeyDownProp(e);
-  };
-  const onKeyUp = e => {
-    var _e$target$value;
-    const isValidLenght = ((_e$target$value = e.target.value) === null || _e$target$value === void 0 ? void 0 : _e$target$value.replace(/[^0-9]/g, "").length) === 8;
-    if ([9, 13].includes(e.keyCode)) {
-      setIsOpened(true);
-      setOpenedByEnter(true);
+    var newObj = {
+        __proto__: null
+    };
+    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];
+            }
+        }
     }
-    if (isValidLenght) {
-      setIsOpened(false);
-      handleBlur();
-    } else {
-      setIsOpened(true);
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
     }
-    onKeyUpProp(e);
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: (0, _classnames.default)("input__wrap calendar-container", className, {
-      "calendar-container_disabled": disabled
-    }),
-    ref: calendarRef
-  }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
-    mask: mask,
-    placeholder: placeholder,
-    value: value,
-    onChange: e => changeInputValue(e.target.value),
-    className: "calendar-dropdown",
-    onClick: () => setIsOpened(true),
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    onBlur: onBlurProp,
-    ref: inputRef
-  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: getCalendarValue(value),
-    setDate: newDate => changeCalendarDay(newDate),
-    params: {
-      format,
-      minDate: formattedMinDate,
-      maxDate: formattedMaxDate,
-      momentMinDate,
-      momentMaxDate,
-      isDontLimitFuture
-    },
-    isListTop: isListTop,
-    setIsOpened: setIsOpened
-  }) : null);
+    return newObj;
+}
+const InputCalendar = ({ value, minDate, maxDate, format = "MM/DD/YYYY", isDontLimitFuture, onChange, className = "", placeholder = "mm/dd/yyyy", mask = "99/99/9999", isListTop, disabled, disabledFormattedMaxDate = false, testId = "input-calendar", onKeyDown: onKeyDownProp = (e)=>{}, onKeyUp: onKeyUpProp = (e)=>{}, onBlur: onBlurProp = (e)=>{} })=>{
+    const [isOpened, setIsOpened] = (0, _react.useState)(null);
+    const [isOpenedByEnter, setOpenedByEnter] = (0, _react.useState)(false);
+    const calendarRef = (0, _react.useRef)(null);
+    const inputRef = (0, _react.useRef)(null);
+    const formattedMinDate = (0, _momenttimezone.default)(minDate, format).format(format) !== "Invalid date" ? (0, _momenttimezone.default)(minDate, format).format(format) : null;
+    const formattedMaxDate = (0, _momenttimezone.default)(maxDate, format).format(format) !== "Invalid date" ? (0, _momenttimezone.default)(maxDate, format).format(format) : null;
+    const momentMinDate = (0, _momenttimezone.default)(formattedMinDate, format).startOf("day");
+    const momentMaxDate = (0, _momenttimezone.default)(formattedMaxDate, format).startOf("day");
+    (0, _useClickOutside.useClickOutside)(calendarRef, ()=>setIsOpened(false));
+    const changeInputValue = (val)=>{
+        if (onChange) onChange(val);
+    };
+    const changeCalendarDay = (val)=>{
+        if (onChange) onChange(val);
+    };
+    const getCalendarValue = (value)=>{
+        const date = (0, _momenttimezone.default)(value).format("L");
+        if (date !== "Invalid date") return date;
+        return (0, _momenttimezone.default)(new Date()).format("L");
+    };
+    (0, _react.useEffect)(()=>{
+        if (typeof isOpened === "boolean" && !isOpened) {
+            handleBlur();
+        }
+    }, [
+        isOpened
+    ]);
+    const handleBlur = (e)=>{
+        var _inputRef_current;
+        let value = inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.value;
+        if ((0, _momenttimezone.default)(value, format).format(format) === "Invalid date" || value.indexOf("_") > -1) value = "";
+        if (value && typeof isOpened === "boolean" && (0, _momenttimezone.default)(value, format).startOf("day").isBefore(momentMinDate, "days")) onChange(formattedMinDate);
+        else if (value && typeof isOpened === "boolean" && (0, _momenttimezone.default)(value, format).endOf("day").isAfter(momentMaxDate, "days")) onChange(formattedMaxDate);
+        else if (value) onChange((0, _momenttimezone.default)(value, format).format(format));
+    };
+    const onKeyDown = (e)=>{
+        if (isOpened && [
+            9,
+            13
+        ].includes(e.keyCode)) {
+            setIsOpened(false);
+            setOpenedByEnter(true);
+        }
+        onKeyDownProp(e);
+    };
+    const onKeyUp = (e)=>{
+        var _e_target_value;
+        const isValidLenght = ((_e_target_value = e.target.value) === null || _e_target_value === void 0 ? void 0 : _e_target_value.replace(/[^0-9]/g, "").length) === 8;
+        if ([
+            9,
+            13
+        ].includes(e.keyCode)) {
+            setIsOpened(true);
+            setOpenedByEnter(true);
+        }
+        if (isValidLenght) {
+            setIsOpened(false);
+            handleBlur();
+        } else {
+            setIsOpened(true);
+        }
+        onKeyUpProp(e);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)("input__wrap calendar-container", className, {
+            "calendar-container_disabled": disabled
+        }),
+        ref: calendarRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactinputmask.default, {
+                mask: mask,
+                placeholder: placeholder,
+                value: value,
+                onChange: (e)=>changeInputValue(e.target.value),
+                className: "calendar-dropdown",
+                onClick: ()=>setIsOpened(true),
+                onKeyUp: onKeyUp,
+                onKeyDown: onKeyDown,
+                onBlur: onBlurProp,
+                ref: inputRef
+            }),
+            isOpened ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Calendar.default, {
+                date: getCalendarValue(value),
+                setDate: (newDate)=>changeCalendarDay(newDate),
+                params: {
+                    format,
+                    minDate: formattedMinDate,
+                    maxDate: formattedMaxDate,
+                    momentMinDate,
+                    momentMaxDate,
+                    isDontLimitFuture
+                },
+                isListTop: isListTop,
+                setIsOpened: setIsOpened
+            }) : null
+        ]
+    });
 };
-var _default = exports.default = InputCalendar;
+const _default = InputCalendar;

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

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CalendarTemplate: function() {
+        return CalendarTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _InputCalendar = /*#__PURE__*/ _interop_require_default(require("./InputCalendar"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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';
+const _default = {
+    title: 'Form Elements/Input Calendar',
+    component: _InputCalendar.default,
+    argTypes: {
+        value: {
+            description: 'string (mm.dd.yyyy)'
+        }
+    }
+};
+const Template = (args)=>{
+    const [date, setDate] = (0, _react.useState)('');
+    const [disabled, setDisabled] = (0, _react.useState)(false);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputCalendar.default, {
+                ...args,
+                value: date,
+                onChange: (val)=>setDate(val),
+                disabled: disabled
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    display: 'flex',
+                    flexFlow: 'row nowrap',
+                    justifyContent: 'flex-end',
+                    marginTop: '10px'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    style: {
+                        border: 'solid 1px black',
+                        padding: '10px',
+                        width: '80px'
+                    },
+                    onClick: ()=>setDisabled(!disabled),
+                    children: disabled ? 'Enable' : 'Disable'
+                })
+            })
+        ]
+    });
+};
+const CalendarTemplate = Template.bind({});
+CalendarTemplate.args = {
+    minDate: '01/10/1990',
+    maxDate: '04/20/2022'
+};