💫(app-desk) add effect prop on Box component

Add the effect prop on Box component.
2 effects are available: 'show' and 'hide'.

src/frontend/apps/impress/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/impress/src/components/Effect.tsx

@@ -0,0 +1,20 @@
+import { css, keyframes } from 'styled-components';
+
+const show = keyframes`
+ 0% { transform: scaleY(0); opacity: 0; max-height: 0; }
+ 100% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+`;
+
+const hide = keyframes`
+ 0% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+ 100% { display:none; transform: scaleY(0); opacity: 0; max-height: 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;
+`;