@xaypay/tui 0.0.63 → 0.0.65

package/dist/index.es.js

@@ -629,6 +629,14 @@ const Input = ({
         animation: ${errorAnimation ? animation : 'none'};
     `;
   const handleChange = event => {
+    // TODO: need to discuss
+    // onChange
+    //     ? type === 'tel'
+    //             ? phoneNumberRegex.test(event.target.value)
+    //                     ? onChange(event.target.value)
+    //                     : _ => _
+    //         : onChange(event.target.value)
+    //     : _ => _;
     onChange ? onChange(event.target.value) : _ => _;
   };
   const handleMouseEnter = () => {
@@ -692,6 +700,8 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
+    // TODO: need to discuss
+    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
     value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
     className: classProps,
     onChange: handleChange,
@@ -703,7 +713,7 @@ const Input = ({
     style: {
       border: 'none',
       outline: 'none',
-      pointerEvents: disabled ? 'none' : 'auto',
+      cursor: disabled ? 'not-allowed' : 'auto',
       width: width ? width : configStyles.INPUT.width,
       fontSize: size ? size : configStyles.INPUT.size,
       height: height ? height : configStyles.INPUT.height,
@@ -1214,12 +1224,12 @@ const Select = ({
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default.createElement("div", {
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$6['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
+  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
@@ -1518,19 +1528,25 @@ const Toast = ({
   }, /*#__PURE__*/React__default.createElement(SvgToasterClose, null)));
 };
 Toast.propTypes = {
+  timer: PropTypes.number,
+  title: PropTypes.string,
   description: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  timer: PropTypes.number.isRequired,
   removeToast: PropTypes.func.isRequired,
-  type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
-  position: PropTypes.oneOf(Object.values(ToasterPosition)).isRequired
+  position: PropTypes.oneOf(Object.values(ToasterPosition)),
+  type: PropTypes.oneOf(Object.values(ToasterType)).isRequired
+};
+Toast.defaultProps = {
+  timer: 5000,
+  position: 'top-right',
+  title: 'toaster title'
 };
 
 let toastify;
-const removeToast = (ref, position) => {
-  const parent = document.getElementById(styles$5[position]);
+let path = window.location.href;
+const removeToast = ref => {
   const node = ReactDOM.findDOMNode(ref.current);
   const removeElem = node.parentNode;
+  const parent = removeElem.parentNode;
   parent.removeChild(removeElem);
   if (!parent.hasChildNodes()) {
     toastify.removeChild(parent);
@@ -1538,12 +1554,15 @@ const removeToast = (ref, position) => {
 };
 const createToast = ({
   type,
-  title,
   timer,
+  title,
   position,
   description
 }) => {
   let toastParentBlock;
+  if (!toastify) {
+    toastify = document.getElementById('toastify');
+  }
   const toastBlock = document.createElement('div');
   toastBlock.style.position = 'relative';
   toastBlock.style.flexShrink = 0;
@@ -1559,10 +1578,7 @@ const createToast = ({
     description
   });
   ReactDOM.render(newElem, toastBlock);
-  if (!toastify) {
-    toastify = document.getElementById('toastify');
-  }
-  if (!document.getElementById(styles$5[position])) {
+  if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
     toastParentBlock = document.createElement('div');
     toastParentBlock.style.position = 'fixed';
     toastParentBlock.style.display = 'flex';
@@ -1575,7 +1591,76 @@ const createToast = ({
     document.getElementById(styles$5[position]).appendChild(toastBlock);
   }
 };
+const toast = {
+  success: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'success',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  info: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'info',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  warn: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'warn',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  error: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'error',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  }
+};
 const Toaster = () => {
+  window.addEventListener('popstate', () => {
+    if (path !== window.location.href) {
+      if (!toastify) {
+        toastify = document.getElementById('toastify');
+      }
+      if (toastify.hasChildNodes()) {
+        toastify.innerHTML = '';
+      }
+      path = window.location.href;
+    }
+  });
   const handleToasterClick = e => {
     e.stopPropagation();
   };
@@ -2056,7 +2141,10 @@ const Autocomplate = ({
       setShowOptions(!showOptions);
     },
     value: inputValue,
-    placeholder: placeHolder
+    placeholder: placeHolder,
+    style: {
+      cursor: disabled ? 'not-allowed' : 'auto'
+    }
   }, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
     className: styles.errorMessage
   }, errorMessage) : null, optionList));
@@ -2080,4 +2168,4 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, createToast };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, toast };

package/dist/index.js

@@ -659,6 +659,14 @@ const Input = ({
         animation: ${errorAnimation ? animation : 'none'};
     `;
   const handleChange = event => {
+    // TODO: need to discuss
+    // onChange
+    //     ? type === 'tel'
+    //             ? phoneNumberRegex.test(event.target.value)
+    //                     ? onChange(event.target.value)
+    //                     : _ => _
+    //         : onChange(event.target.value)
+    //     : _ => _;
     onChange ? onChange(event.target.value) : _ => _;
   };
   const handleMouseEnter = () => {
@@ -722,6 +730,8 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
+    // TODO: need to discuss
+    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
     value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
     className: classProps,
     onChange: handleChange,
@@ -733,7 +743,7 @@ const Input = ({
     style: {
       border: 'none',
       outline: 'none',
-      pointerEvents: disabled ? 'none' : 'auto',
+      cursor: disabled ? 'not-allowed' : 'auto',
       width: width ? width : configStyles.INPUT.width,
       fontSize: size ? size : configStyles.INPUT.size,
       height: height ? height : configStyles.INPUT.height,
@@ -1244,12 +1254,12 @@ const Select = ({
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$6['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
@@ -1548,19 +1558,25 @@ const Toast = ({
   }, /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
 };
 Toast.propTypes = {
+  timer: PropTypes__default["default"].number,
+  title: PropTypes__default["default"].string,
   description: PropTypes__default["default"].string,
-  title: PropTypes__default["default"].string.isRequired,
-  timer: PropTypes__default["default"].number.isRequired,
   removeToast: PropTypes__default["default"].func.isRequired,
-  type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired,
-  position: PropTypes__default["default"].oneOf(Object.values(ToasterPosition)).isRequired
+  position: PropTypes__default["default"].oneOf(Object.values(ToasterPosition)),
+  type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired
+};
+Toast.defaultProps = {
+  timer: 5000,
+  position: 'top-right',
+  title: 'toaster title'
 };
 
 let toastify;
-const removeToast = (ref, position) => {
-  const parent = document.getElementById(styles$5[position]);
+let path = window.location.href;
+const removeToast = ref => {
   const node = ReactDOM__default["default"].findDOMNode(ref.current);
   const removeElem = node.parentNode;
+  const parent = removeElem.parentNode;
   parent.removeChild(removeElem);
   if (!parent.hasChildNodes()) {
     toastify.removeChild(parent);
@@ -1568,12 +1584,15 @@ const removeToast = (ref, position) => {
 };
 const createToast = ({
   type,
-  title,
   timer,
+  title,
   position,
   description
 }) => {
   let toastParentBlock;
+  if (!toastify) {
+    toastify = document.getElementById('toastify');
+  }
   const toastBlock = document.createElement('div');
   toastBlock.style.position = 'relative';
   toastBlock.style.flexShrink = 0;
@@ -1589,10 +1608,7 @@ const createToast = ({
     description
   });
   ReactDOM__default["default"].render(newElem, toastBlock);
-  if (!toastify) {
-    toastify = document.getElementById('toastify');
-  }
-  if (!document.getElementById(styles$5[position])) {
+  if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
     toastParentBlock = document.createElement('div');
     toastParentBlock.style.position = 'fixed';
     toastParentBlock.style.display = 'flex';
@@ -1605,7 +1621,76 @@ const createToast = ({
     document.getElementById(styles$5[position]).appendChild(toastBlock);
   }
 };
+const toast = {
+  success: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'success',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  info: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'info',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  warn: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'warn',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  error: (title, props) => {
+    const {
+      timer,
+      position,
+      description
+    } = props || {};
+    createToast({
+      title,
+      type: 'error',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  }
+};
 const Toaster = () => {
+  window.addEventListener('popstate', () => {
+    if (path !== window.location.href) {
+      if (!toastify) {
+        toastify = document.getElementById('toastify');
+      }
+      if (toastify.hasChildNodes()) {
+        toastify.innerHTML = '';
+      }
+      path = window.location.href;
+    }
+  });
   const handleToasterClick = e => {
     e.stopPropagation();
   };
@@ -2086,7 +2171,10 @@ const Autocomplate = ({
       setShowOptions(!showOptions);
     },
     value: inputValue,
-    placeholder: placeHolder
+    placeholder: placeHolder,
+    style: {
+      cursor: disabled ? 'not-allowed' : 'auto'
+    }
   }, props)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles.errorMessage
   }, errorMessage) : null, optionList));
@@ -2128,4 +2216,4 @@ exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
 exports.TypographyType = TypographyType;
-exports.createToast = createToast;
+exports.toast = toast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/autocomplate/index.js

@@ -107,6 +107,9 @@ export const Autocomplate = ({
           onClick={() => { setShowOptions(!showOptions) }}
           value={inputValue}
           placeholder={placeHolder}
+          style={{
+            cursor: disabled ? 'not-allowed' : 'auto'
+          }}
           {...props}
           />
           {errorMessage ? <span className={styles.errorMessage}>{errorMessage}</span> : null}

package/src/components/input/index.js

@@ -61,6 +61,7 @@ export const Input = ({
     errorAnimationDuration,
     ...props
 }) => {
+    const phoneNumberRegex = /^\d{0,8}$/;
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
     
@@ -90,7 +91,15 @@ export const Input = ({
     `;
 
     const handleChange = (event) => {
-        onChange ? onChange(event.target.value) : _ => _;
+        // TODO: need to discuss
+        // onChange
+        //     ? type === 'tel'
+        //             ? phoneNumberRegex.test(event.target.value)
+        //                     ? onChange(event.target.value)
+        //                     : _ => _
+        //         : onChange(event.target.value)
+        //     : _ => _;
+        onChange ? onChange(event.target.value) : _ => _
     };
 
     const handleMouseEnter = () => {
@@ -173,6 +182,8 @@ export const Input = ({
                 }
                 <input
                     {...props}
+                    // TODO: need to discuss
+                    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
                     value={maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
                     className={classProps}
                     onChange={handleChange}
@@ -184,7 +195,7 @@ export const Input = ({
                     style={{
                         border: 'none',
                         outline: 'none',
-                        pointerEvents: disabled ? 'none' : 'auto',
+                        cursor: disabled ? 'not-allowed' : 'auto',
                         width: width ? width : configStyles.INPUT.width,
                         fontSize: size ? size : configStyles.INPUT.size,
                         height: height ? height : configStyles.INPUT.height,

package/src/components/select/index.js

@@ -264,13 +264,14 @@ export const Select = ({
                                 </div>
                             }
 
-                            <div
-                                style={{
-                                    transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
-                                }}
-                                className={`${styles['arrow-icon']}`}>
-                                {arrowIcon ? arrowIcon : <ReactArrowIcon />}
-                            </div>
+                            {!disabled ? <div
+                                    style={{
+                                        transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
+                                    }}
+                                    className={`${styles['arrow-icon']}`}>
+                                    {arrowIcon ? arrowIcon : <ReactArrowIcon />}
+                                </div> : ''
+                            }
                         </div>
                     </div>
                     {

package/src/components/toaster/Toast.js

@@ -10,14 +10,14 @@ import ToasterSuccess from '../icon/ToasterSuccess';
 
 import styles from './toaster.module.css';
 
-export const ToasterType = {
+const ToasterType = {
   info: 'info',
   warn: 'warn',
   error: 'error',
   success: 'success'
 };
 
-export const ToasterPosition = {
+const ToasterPosition = {
   topLeft: 'top-left',
   topRight: 'top-right',
   topCenter: 'top-center',
@@ -109,8 +109,6 @@ export const Toast = ({
                     : ''
         }}
       >
-        {/* <img
-          src= */}
           {
             type === 'info' ? <ToasterInfo />
               : type === 'warn' ? <ToasterWarn />
@@ -118,8 +116,6 @@ export const Toast = ({
                   : type === 'success' ? <ToasterSuccess />
                     : ''
           }
-          {/* alt="notify icon"
-        /> */}
       </div>
 
       <div
@@ -170,10 +166,16 @@ export const Toast = ({
 };
 
 Toast.propTypes = {
+  timer: PropTypes.number,
+  title: PropTypes.string,
   description: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  timer: PropTypes.number.isRequired,
   removeToast: PropTypes.func.isRequired,
+  position: PropTypes.oneOf(Object.values(ToasterPosition)),
   type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
-  position: PropTypes.oneOf(Object.values(ToasterPosition)).isRequired,
-}
+};
+
+Toast.defaultProps = {
+  timer: 5000,
+  position: 'top-right',
+  title: 'toaster title'
+};

package/src/components/toaster/index.js

@@ -6,11 +6,13 @@ import { Toast } from './Toast';
 import styles from './toaster.module.css';
 
 let toastify;
+let path = window.location.href;
 
-const removeToast = (ref, position) => {
-  const parent = document.getElementById(styles[position]);
+const removeToast = (ref) => {
   const node = ReactDOM.findDOMNode(ref.current);
   const removeElem = node.parentNode;
+  const parent = removeElem.parentNode;
+
   parent.removeChild(removeElem);
 
   if (!parent.hasChildNodes()) {
@@ -18,14 +20,17 @@ const removeToast = (ref, position) => {
   }
 };
 
-export const createToast = ({
+const createToast = ({
   type,
-  title,
   timer,
+  title,
   position,
   description,
 }) => {
   let toastParentBlock;
+  if (!toastify) {
+    toastify = document.getElementById('toastify');
+  }
 
   const toastBlock = document.createElement('div');
   toastBlock.style.position = 'relative';
@@ -43,11 +48,7 @@ export const createToast = ({
   });
   ReactDOM.render(newElem, toastBlock);
 
-  if (!toastify) {
-    toastify = document.getElementById('toastify');
-  }
-
-  if (!document.getElementById(styles[position])) {
+  if (!document.getElementById(styles[position]) || document.getElementById(styles[position]) == null) {
     toastParentBlock = document.createElement('div');
     toastParentBlock.style.position = 'fixed';
     toastParentBlock.style.display = 'flex';
@@ -61,12 +62,68 @@ export const createToast = ({
   }
 };
 
+export const toast = {
+  success: (title, props) => {
+    const { timer, position, description } = props || {};
+    createToast({
+      title,
+      type: 'success',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  info: (title, props) => {
+    const { timer, position, description } = props || {};
+    createToast({
+      title,
+      type: 'info',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  warn: (title, props) => {
+    const { timer, position, description } = props || {};
+    createToast({
+      title,
+      type: 'warn',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  },
+  error: (title, props) => {
+    const { timer, position, description } = props || {};
+    createToast({
+      title,
+      type: 'error',
+      timer: timer ? timer : 5000,
+      position: position ? position : 'top-right',
+      description: description ? description : ''
+    });
+  }
+};
+
 export const Toaster = () => {
+  window.addEventListener('popstate', () => {
+    if (path !== window.location.href) {
+      if (!toastify) {
+        toastify = document.getElementById('toastify');
+      }
+
+      if (toastify.hasChildNodes()) {
+        toastify.innerHTML = '';
+      }
+
+      path = window.location.href;
+    }
+  });
   const handleToasterClick = (e) => {
     e.stopPropagation();
   };
 
   return (
-    <div onClick={handleToasterClick} id='toastify'></div>
-  )
+    <div onClick={handleToasterClick} id="toastify"></div>
+  );
 };

package/src/components/toaster/toaster.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Toaster, createToast } from './index';
+import { Toaster, toast } from './index';
 import { Button } from './../button';
 
 export default {
@@ -8,14 +8,48 @@ export default {
 };
 
 const Template = (args) => {
-  const handleAddToaster = (type, timer, title, position, description) => {
-    createToast({
-      type,
-      timer,
-      title,
-      position,
-      description
-    });
+  const handleAddToaster = (type, empty, title, timer, position, description) => {
+    if (type === 'success') {
+      if (empty) {
+        toast.success();
+      } else {
+        toast.success(title, {
+          timer,
+          position,
+          description
+        });
+      }
+    } else if (type === 'info') {
+      if (empty) {
+        toast.info();
+      } else {
+        toast.info(title, {
+          timer,
+          position,
+          description
+        });
+      }
+    } else if (type === 'warn') {
+      if (empty) {
+        toast.warn();
+      } else {
+        toast.warn(title, {
+          timer,
+          position,
+          description
+        });
+      }
+    } else if (type === 'error') {
+      if (empty) {
+        toast.error();
+      } else {
+        toast.error(title, {
+          timer,
+          position,
+          description
+        });
+      }
+    }
   };
 
   return (
@@ -23,6 +57,7 @@ const Template = (args) => {
       style={{
         height: 'calc(100vh - 100px)',
         display: 'flex',
+        overflowY: 'auto',
         flexDirection: 'column',
         justifyContent: 'center'
       }}
@@ -30,7 +65,55 @@ const Template = (args) => {
       <div
         style={{
           display: 'flex',
-          marginBottom: '30px',
+          marginBottom: '20px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          color='white'
+          contentWidth
+          backgroundColor='#10a574'
+          label="call empty Success toast"
+          onClick={() => handleAddToaster('success', true)}
+        />
+        <Button
+          outline
+          radius='8px'
+          color='white'
+          contentWidth
+          label="call empty Info toast"
+          backgroundColor='#02246b'
+          onClick={() => handleAddToaster('info', true)}
+        />
+        <Button
+          outline
+          radius='8px'
+          color='white'
+          contentWidth
+          label="call empty Warn toast"
+          backgroundColor='#ff8a04'
+          onClick={() => handleAddToaster('warn', true)}
+        />
+        <Button
+          outline
+          radius='8px'
+          color='white'
+          contentWidth
+          label="call empty Error toast"
+          backgroundColor='#ed0000'
+          onClick={() => handleAddToaster('error', true)}
+        />
+      </div>
+
+
+      <div
+        style={{
+          display: 'flex',
+          marginBottom: '20px',
           paddingBottom: '20px',
           borderBottom: '1.5px solid gray',
           justifyContent: 'space-between'
@@ -43,7 +126,7 @@ const Template = (args) => {
           color='white'
           label="Success top left"
           backgroundColor='#10a574'
-          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -52,7 +135,7 @@ const Template = (args) => {
           color='white'
           label="Success top right"
           backgroundColor='#10a574'
-          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -61,7 +144,7 @@ const Template = (args) => {
           color='white'
           label="Success top center"
           backgroundColor='#10a574'
-          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -70,7 +153,7 @@ const Template = (args) => {
           color='white'
           label="Success bottom left"
           backgroundColor='#10a574'
-          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -79,7 +162,7 @@ const Template = (args) => {
           color='white'
           label="Success bottom right"
           backgroundColor='#10a574'
-          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -88,14 +171,14 @@ const Template = (args) => {
           color='white'
           label="Success bottom center"
           backgroundColor='#10a574'
-          onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
       </div>
 
       <div
         style={{
           display: 'flex',
-          marginBottom: '30px',
+          marginBottom: '20px',
           paddingBottom: '20px',
           borderBottom: '1.5px solid gray',
           justifyContent: 'space-between'
@@ -108,7 +191,7 @@ const Template = (args) => {
           color='white'
           label="Info top left"
           backgroundColor='#02246b'
-          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -117,7 +200,7 @@ const Template = (args) => {
           color='white'
           label="Info top right"
           backgroundColor='#02246b'
-          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -126,7 +209,7 @@ const Template = (args) => {
           color='white'
           label="Info top center"
           backgroundColor='#02246b'
-          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -135,7 +218,7 @@ const Template = (args) => {
           color='white'
           label="Info bottom left"
           backgroundColor='#02246b'
-          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -144,7 +227,7 @@ const Template = (args) => {
           color='white'
           label="Info bottom right"
           backgroundColor='#02246b'
-          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -153,14 +236,14 @@ const Template = (args) => {
           color='white'
           label="Info bottom center"
           backgroundColor='#02246b'
-          onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
       </div>
 
       <div
         style={{
           display: 'flex',
-          marginBottom: '30px',
+          marginBottom: '20px',
           paddingBottom: '20px',
           borderBottom: '1.5px solid gray',
           justifyContent: 'space-between'
@@ -173,7 +256,7 @@ const Template = (args) => {
           color='white'
           label="Warning top left"
           backgroundColor='#ff8a04'
-          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -182,7 +265,7 @@ const Template = (args) => {
           color='white'
           label="Warning top right"
           backgroundColor='#ff8a04'
-          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -191,7 +274,7 @@ const Template = (args) => {
           color='white'
           label="Warning top center"
           backgroundColor='#ff8a04'
-          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -200,7 +283,7 @@ const Template = (args) => {
           color='white'
           label="Warning bottom left"
           backgroundColor='#ff8a04'
-          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -209,7 +292,7 @@ const Template = (args) => {
           color='white'
           label="Warning bottom right"
           backgroundColor='#ff8a04'
-          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -218,14 +301,14 @@ const Template = (args) => {
           color='white'
           label="Warning bottom center"
           backgroundColor='#ff8a04'
-          onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
       </div>
 
       <div
         style={{
           display: 'flex',
-          marginBottom: '30px',
+          marginBottom: '20px',
           paddingBottom: '20px',
           borderBottom: '1.5px solid gray',
           justifyContent: 'space-between'
@@ -238,7 +321,7 @@ const Template = (args) => {
           color='white'
           label="Error top left"
           backgroundColor='#ed0000'
-          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -247,7 +330,7 @@ const Template = (args) => {
           color='white'
           label="Error top right"
           backgroundColor='#ed0000'
-          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -256,9 +339,8 @@ const Template = (args) => {
           color='white'
           label="Error top center"
           backgroundColor='#ed0000'
-          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
-
         <Button
           outline
           radius='8px'
@@ -266,7 +348,7 @@ const Template = (args) => {
           color='white'
           label="Error bottom left"
           backgroundColor='#ed0000'
-          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -275,7 +357,7 @@ const Template = (args) => {
           color='white'
           label="Error bottom right"
           backgroundColor='#ed0000'
-          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
         <Button
           outline
@@ -284,7 +366,7 @@ const Template = (args) => {
           color='white'
           label="Error bottom center"
           backgroundColor='#ed0000'
-          onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
+          onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
         />
       </div>
 

package/src/stories/configuration.stories.mdx

@@ -368,16 +368,38 @@ import StackAlt from './assets/stackalt.svg';
 
 ### Toaster
 
-#### toaster props are not global, you should set directly
-##### all properties are required except description
 ```
 {
-  createToast({
-    type,        ---> one of this strings ['info', 'warn', 'error', 'success']
-    timer,       ---> timer must be a number, for example 5000, is a 5 seconds
-    title,       ---> title is a string for toast title
-    description  ---> description is a string for toast description
-    position     ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
+  toast.success();
+  toast.success(title);
+  toast.success(title, {
+    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
+    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
+    description: 'Toast description'    ---> description is a string for toast description
+  });
+
+  toast.info();
+  toast.info(title);
+  toast.info(title, {
+    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
+    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
+    description: 'Toast description'    ---> description is a string for toast description
+  });
+
+  toast.warn();
+  toast.warn(title);
+  toast.warn(title, {
+    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
+    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
+    description: 'Toast description'    ---> description is a string for toast description
+  });
+
+  toast.error();
+  toast.error(title);
+  toast.error(title, {
+    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
+    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
+    description: 'Toast description'    ---> description is a string for toast description
   });
 }
 ```