@xaypay/tui 0.0.62 → 0.0.64

package/src/components/toaster/toaster.module.css

@@ -0,0 +1,188 @@
+#top-left {
+  top: 1em;
+  left: 0;
+}
+
+#top-right {
+  top: 1em;
+  right: 0
+}
+
+#top-center {
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+#bottom-left {
+  left: 0;
+  bottom: 1em;
+}
+
+#bottom-right {
+  right: 0;
+  bottom: 1em;
+}
+
+#bottom-center {
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+.top-left {
+  top: 1em;
+  left: 0;
+}
+
+.top-right {
+  top: 1em;
+  right: 0
+}
+
+.top-center {
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+.bottom-left {
+  left: 0;
+  bottom: 1em;
+}
+
+.bottom-right {
+  right: 0;
+  bottom: 1em;
+}
+
+.bottom-center {
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+.notify-block {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.bounce-in-right {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+.bounce-out-right {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@keyframes bounceInRight {
+  from {
+    opacity: 0;
+    right: -100%;
+  }
+
+  60% {
+    opacity: 1;
+    right: 40px;
+  }
+
+  75% {
+    right: 0px;
+  }
+
+  90% {
+    right: 30px;
+  }
+
+  to {
+    right: 20px;
+  }
+}
+
+@keyframes bounceOutRight {
+  from {
+    opacity: 1;
+    right: 20px;
+  }
+  
+  60% {
+    opacity: 1;
+    right: 60px;
+  }
+
+  to {
+    opacity: 0;
+    right: -100%;
+  }
+}
+
+.bounce-in-left {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+.bounce-out-left {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@keyframes bounceInLeft {
+  from {
+    opacity: 0;
+    left: -100%;
+  }
+
+  60% {
+    opacity: 1;
+    left: 40px;
+  }
+
+  75% {
+    left: 0px;
+  }
+
+  90% {
+    left: 30px;
+  }
+
+  to {
+    left: 20px;
+  }
+}
+
+@keyframes bounceOutLeft {
+  from {
+    opacity: 1;
+    left: 20px;
+  }
+
+  60% {
+    opacity: 1;
+    left: 60px;
+  }
+
+  to {
+    opacity: 0;
+    left: -100%;
+  }
+}

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

@@ -0,0 +1,378 @@
+import React from 'react';
+import { Toaster, toast } from './index';
+import { Button } from './../button';
+
+export default {
+  component: Toaster,
+  title: 'Components/Toaster',
+};
+
+const Template = (args) => {
+  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 (
+    <div
+      style={{
+        height: 'calc(100vh - 100px)',
+        display: 'flex',
+        overflowY: 'auto',
+        flexDirection: 'column',
+        justifyContent: 'center'
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          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'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success top left"
+          backgroundColor='#10a574'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success top right"
+          backgroundColor='#10a574'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success top center"
+          backgroundColor='#10a574'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success bottom left"
+          backgroundColor='#10a574'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success bottom right"
+          backgroundColor='#10a574'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Success bottom center"
+          backgroundColor='#10a574'
+          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: '20px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info top left"
+          backgroundColor='#02246b'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info top right"
+          backgroundColor='#02246b'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info top center"
+          backgroundColor='#02246b'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info bottom left"
+          backgroundColor='#02246b'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info bottom right"
+          backgroundColor='#02246b'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Info bottom center"
+          backgroundColor='#02246b'
+          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: '20px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning top left"
+          backgroundColor='#ff8a04'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning top right"
+          backgroundColor='#ff8a04'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning top center"
+          backgroundColor='#ff8a04'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning bottom left"
+          backgroundColor='#ff8a04'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning bottom right"
+          backgroundColor='#ff8a04'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Warning bottom center"
+          backgroundColor='#ff8a04'
+          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: '20px',
+          paddingBottom: '20px',
+          borderBottom: '1.5px solid gray',
+          justifyContent: 'space-between'
+        }}
+      >
+        <Button
+          outline
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error top left"
+          backgroundColor='#ed0000'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error top right"
+          backgroundColor='#ed0000'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error top center"
+          backgroundColor='#ed0000'
+          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'
+          contentWidth
+          color='white'
+          label="Error bottom left"
+          backgroundColor='#ed0000'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error bottom right"
+          backgroundColor='#ed0000'
+          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
+          radius='8px'
+          contentWidth
+          color='white'
+          label="Error bottom center"
+          backgroundColor='#ed0000'
+          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>
+
+      <Toaster />
+    </div>
+  )
+};
+
+export const Default = Template.bind({});

package/src/index.js

@@ -5,6 +5,7 @@ export * from './components/input';
 export * from './components/radio';
 export * from './components/button';
 export * from './components/select';
+export * from './components/toaster';
 export * from './components/tooltip';
 export * from './components/captcha';
 export * from './components/stepper';
@@ -13,4 +14,4 @@ export * from './components/icon/Icon';
 export * from './components/typography';
 export * from './components/pagination';
 export * from './components/autocomplate';
-export * from './components/selectCheckbox';
+export * from './components/selectCheckbox';

package/src/stories/configuration.stories.mdx

@@ -365,3 +365,41 @@ import StackAlt from './assets/stackalt.svg';
     optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
 }
 ```
+
+### Toaster
+
+```
+{
+  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
+  });
+}
+```

package/src/stories/usage.stories.mdx

@@ -9,7 +9,10 @@ import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
 import buttonImage from './static/button-usage.png';
+import selectImage from './static/select-usage.png';
 import inputTooltipImage from './static/input-tooltip-usage.png';
+import toasterImage from './static/toaster-container-usage.png';
+import toastImage from './static/toaster-usage.png'
 
 <Meta title="Intro/Usage" />
 
@@ -129,4 +132,16 @@ import inputTooltipImage from './static/input-tooltip-usage.png';
 
 ### Input / Tooltip
 
-<img src={inputTooltipImage} alt="button image" />
+<img src={inputTooltipImage} alt="input tooltip image" />
+
+### Select
+
+<img src={selectImage} alt="select image" />
+
+### Toaster
+
+#### Toaster container usage
+<img src={toasterImage} alt="toaster image" />
+
+#### createToast function usage
+<img src={toastImage} alt="toaster image" />