feat(@vtmn/react, @vtmn/vue): timeout enhancement

packages/showcases/core/csf/components/overlays/alert.csf.js

@@ -32,4 +32,13 @@ export const argTypes = {
     defaultValue: undefined,
     control: { type: 'text' },
   },
+
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 8000,
+    control: {
+      type: 'number',
+    },
+  },
 };

packages/showcases/core/csf/components/overlays/snackbar.csf.js

@@ -9,12 +9,6 @@ export const parameters = {
 };
 
 export const argTypes = {
-  content: {
-    type: { name: 'string', required: true },
-    description: 'Text displayed on the snackbar',
-    defaultValue: 'This is the content of a snackbar',
-    control: { type: 'text' },
-  },
   withCloseButton: {
     type: { name: 'boolean', required: false },
     description: 'Show close button',
@@ -31,4 +25,12 @@ export const argTypes = {
       type: 'text',
     },
   },
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 4500,
+    control: {
+      type: 'number',
+    },
+  },
 };

packages/showcases/core/csf/components/overlays/toast.csf.js

@@ -9,12 +9,6 @@ export const parameters = {
 };
 
 export const argTypes = {
-  content: {
-    type: { name: 'string', required: true },
-    description: 'Text displayed on the toast',
-    defaultValue: 'This is the content of a toast',
-    control: { type: 'text' },
-  },
   withCloseButton: {
     type: { name: 'boolean', required: false },
     description: 'Show close button',
@@ -31,4 +25,12 @@ export const argTypes = {
       type: 'boolean',
     },
   },
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 4500,
+    control: {
+      type: 'number',
+    },
+  },
 };

packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx

@@ -7,6 +7,8 @@ import {
 import { VtmnAlert } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 700;
+
 export default {
   title: 'Components / Overlays / VtmnAlert',
   component: VtmnAlert,
@@ -21,7 +23,7 @@ const OverviewTemplate: Story = (args) => {
     if (showAlert) {
       const timeout = setTimeout(() => {
         setShowAlert(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showAlert]);

packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx

@@ -7,10 +7,20 @@ import {
 import { VtmnSnackbar } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
-  argTypes,
+  argTypes: {
+    ...argTypes,
+    content: {
+      type: { name: 'string', required: true },
+      description: 'Text displayed on the toast',
+      defaultValue: 'This is the content of a toast',
+      control: { type: 'text' },
+    },
+  },
   parameters,
 } as Meta;
 
@@ -21,7 +31,7 @@ const OverviewTemplate: Story = (args) => {
     if (showSnackbar) {
       const timeout = setTimeout(() => {
         setshowSnackbar(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showSnackbar]);

packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx

@@ -7,10 +7,20 @@ import {
 import { VtmnToast } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
-  argTypes,
+  argTypes: {
+    ...argTypes,
+    content: {
+      type: { name: 'string', required: true },
+      description: 'Text displayed on the snackbar',
+      defaultValue: 'This is the content of a snackbar',
+      control: { type: 'text' },
+    },
+  },
   parameters,
 } as Meta;
 
@@ -21,7 +31,7 @@ const OverviewTemplate: Story = (args) => {
     if (showToast) {
       const timeout = setTimeout(() => {
         setshowToast(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showToast]);

packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte

@@ -11,17 +11,7 @@
 <Meta
   title="Components / Overlays / VtmnSnackbar"
   component={VtmnSnackbar}
-  argTypes={{
-    ...argTypes,
-    timeout: {
-      type: { name: 'number', required: false },
-      description: 'Duration of the animation',
-      defaultValue: 4500,
-      control: {
-        type: 'number',
-      },
-    },
-  }}
+  {argTypes}
   parameters={{
     ...parameters,
     readme: {

packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte

@@ -11,17 +11,7 @@
 <Meta
   title="Components / Overlays / VtmnToast"
   component={VtmnToast}
-  argTypes={{
-    ...argTypes,
-    timeout: {
-      type: { name: 'number', required: false },
-      description: 'Duration of the animation',
-      defaultValue: 4500,
-      control: {
-        type: 'number',
-      },
-    },
-  }}
+  {argTypes}
   parameters={{
     ...parameters,
     readme: {

packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js

@@ -5,6 +5,8 @@ import {
   parameters,
 } from '@vtmn/showcase-core/csf/components/overlays/alert.csf';
 
+const CSS_ANIMATION_TIME_MS = 700;
+
 export default {
   title: 'Components / Overlays / VtmnAlert',
   component: VtmnAlert,
@@ -23,7 +25,7 @@ const Template = (args) => ({
         showAlert.value = true;
         setTimeout(() => {
           showAlert.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };

packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js

@@ -1,28 +1,16 @@
 import { ref } from 'vue';
 import { VtmnSnackbar, VtmnButton } from '@vtmn/vue';
-import { parameters } from '@vtmn/showcase-core/csf/components/overlays/snackbar.csf';
+import {
+  parameters,
+  argTypes,
+} from '@vtmn/showcase-core/csf/components/overlays/snackbar.csf';
+
+const CSS_ANIMATION_TIME_MS = 500;
 
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
-  argTypes: {
-    withCloseButton: {
-      type: { name: 'boolean', required: true },
-      description: 'Show close button',
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    actionLabel: {
-      type: { name: 'string', required: false },
-      describe: 'Label of the action. If set, it displays action button',
-      defaultValue: undefined,
-      control: {
-        type: 'text',
-      },
-    },
-  },
+  argTypes,
   parameters,
 };
 
@@ -37,7 +25,7 @@ const Template = (args) => ({
         showSnackbar.value = true;
         setTimeout(() => {
           showSnackbar.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };

packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js

@@ -1,28 +1,16 @@
 import { ref } from 'vue';
 import { VtmnToast, VtmnButton } from '@vtmn/vue';
-import { parameters } from '@vtmn/showcase-core/csf/components/overlays/toast.csf';
+import {
+  parameters,
+  argTypes,
+} from '@vtmn/showcase-core/csf/components/overlays/toast.csf';
+
+const CSS_ANIMATION_TIME_MS = 500;
 
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
-  argTypes: {
-    withCloseButton: {
-      type: { name: 'boolean', required: false },
-      description: 'Show close button',
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    withIcon: {
-      type: { name: 'boolean', required: false },
-      description: 'Display left icon',
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
+  argTypes,
   parameters,
 };
 
@@ -37,7 +25,7 @@ const Template = (args) => ({
         showToast.value = true;
         setTimeout(() => {
           showToast.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };

packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx

@@ -4,6 +4,8 @@ import { VtmnAlertVariant } from './types';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnAlertProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -48,14 +50,20 @@ export const VtmnAlert = ({
   timeout = 8000,
   className,
 }: VtmnAlertProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_alert-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       aria-label={title}
       role="dialog"
+      style={propertyStyle}
       className={clsx(
         'vtmn-alert',
         `vtmn-alert_variant--${variant}`,
-        timeout > 0 && 'show',
+        timeout > 0 && 'show animate-delay',
         className,
       )}
     >

packages/sources/react/src/components/overlays/VtmnSnackbar/VtmnSnackbar.tsx

@@ -3,6 +3,8 @@ import '@vtmn/css-snackbar/dist/index-with-vars.css';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnSnackbarProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -20,6 +22,11 @@ export interface VtmnSnackbarProps
    */
   withCloseButton?: boolean;
 
+  /**
+   * Duration of the snackbar in ms
+   */
+  timeout?: number;
+
   /**
    * The alert callback close function
    * @type {function}
@@ -33,11 +40,22 @@ export const VtmnSnackbar = ({
   withCloseButton = false,
   onClose,
   className,
+  timeout = 4500,
 }: VtmnSnackbarProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_overlay-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       role="status"
-      className={clsx('vtmn-snackbar', 'show', className)}
+      style={propertyStyle}
+      className={clsx(
+        'vtmn-snackbar',
+        timeout > 0 && 'show animate-delay',
+        className,
+      )}
       onClick={onClose}
     >
       <div className="vtmn-snackbar_content">{content}</div>