🚨(app-desk) add duration on TextErrors component

Add a duration on the TextErrors component.
I will display the error message the time specified
in the `duration` prop.
By default the errors will be displayed 6 seconds.

src/frontend/apps/desk/src/components/Box.tsx

@@ -2,6 +2,8 @@ import { ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
 import { CSSProperties } from 'styled-components/dist/types';
 
+import { hideEffect, showEffect } from './Effect';
+
 export interface BoxProps {
   as?: keyof ReactHTML;
   $align?: CSSProperties['alignItems'];
@@ -10,6 +12,7 @@ export interface BoxProps {
   $css?: string;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
+  $effect?: 'show' | 'hide';
   $flex?: boolean;
   $gap?: CSSProperties['gap'];
   $height?: CSSProperties['height'];
@@ -43,4 +46,12 @@ export const Box = styled('div')<BoxProps>`
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
+  ${({ $effect }) => {
+    switch ($effect) {
+      case 'show':
+        return showEffect;
+      case 'hide':
+        return hideEffect;
+    }
+  }}
 `;

src/frontend/apps/desk/src/components/Effect.tsx

@@ -0,0 +1,20 @@
+import { css, keyframes } from 'styled-components';
+
+const show = keyframes`
+ 0% { transform: scaleY(0); opacity: 0; }
+ 100% { transform: scaleY(1); opacity: 1;}
+`;
+
+const hide = keyframes`
+ 0% { transform: scaleY(1); opacity: 1;}
+ 100% { display:none; transform: scaleY(0); opacity: 0 }
+`;
+
+export const showEffect = css`
+  animation: ${show} 0.3s ease-in-out;
+`;
+
+export const hideEffect = css`
+  animation: ${hide} 0.3s ease-in-out;
+  animation-fill-mode: forwards;
+`;

src/frontend/apps/desk/src/components/TextErrors.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Text, TextType } from '@/components';
@@ -5,17 +6,34 @@ import { Box, Text, TextType } from '@/components';
 interface TextErrorsProps extends TextType {
   causes?: string[];
   defaultMessage?: string;
+  duration?: number;
 }
 
+/**
+ * Display a list of errors
+ * @param causes - List of causes
+ * @param defaultMessage - Default message if no causes
+ * @param duration -- Duration in milliseconds of the error message
+ * - Set to `0` or `undefined` for unlimited duration
+ * @param textProps - Text props
+ */
 export const TextErrors = ({
   causes,
   defaultMessage,
+  duration = 6000, // 6 seconds
   ...textProps
 }: TextErrorsProps) => {
   const { t } = useTranslation();
+  const [visible, setVisible] = useState(true);
+
+  if (duration) {
+    setTimeout(() => {
+      setVisible(false);
+    }, duration);
+  }
 
   return (
-    <Box>
+    <Box $effect={visible ? 'show' : 'hide'}>
       {causes &&
         causes.map((cause, i) => (
           <Text

src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts

@@ -112,6 +112,12 @@ test.describe('Teams Create', () => {
     await expect(
       page.getByText('Team with this Slug already exists.'),
     ).toBeVisible();
+
+    await expect(
+      page.getByText('Team with this Slug already exists.'),
+    ).toBeHidden({
+      timeout: 15000,
+    });
   });
 
   test('checks 404 on teams/[id] page', async ({ page }) => {