Merge branch 'main' into feature/1499-2

.stylelintrc.json

@@ -9,6 +9,7 @@
     "selector-class-pattern": null,
     "no-descending-specificity": null,
     "order/properties-alphabetical-order": null,
-    "import-notation": "string"
+    "import-notation": "string",
+    "no-invalid-position-at-import-rule": null
   }
 }

lerna.json

@@ -1,5 +1,5 @@
 {
   "packages": ["packages/*"],
-  "version": "2.18.0",
+  "version": "2.20.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

packages/example-react/package.json

@@ -1,15 +1,15 @@
 {
   "name": "example-react",
   "private": true,
-  "version": "2.18.0",
+  "version": "2.20.0",
   "scripts": {
     "start": "vite --open",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@livechat/design-system-icons": "^2.15.0",
-    "@livechat/design-system-react-components": "^2.18.0",
+    "@livechat/design-system-icons": "^2.20.0",
+    "@livechat/design-system-react-components": "^2.20.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-icons",
-  "version": "2.15.0",
+  "version": "2.20.0",
   "description": "",
   "publishConfig": {
     "access": "public"

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "2.18.0",
+  "version": "2.20.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -76,7 +76,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.25",
     "@livechat/data-utils": "^0.2.16",
-    "@livechat/design-system-icons": "^2.15.0",
+    "@livechat/design-system-icons": "^2.20.0",
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
     "lodash.debounce": "^4.0.8",

packages/react-components/src/components/ActionBar/ActionBar.tsx

@@ -135,6 +135,7 @@ export const ActionBar: React.FC<IActionBarProps> = ({
             )}
             triggerRenderer={
               <Button
+                id={`${id}-menu-button`}
                 className={cx(
                   styles[`${menuWrapperClass}__button`],
                   buttonElement && styles[`${menuWrapperClass}__button--active`]

packages/react-components/src/components/AnimatedTextContainer/AnimatedTextContainer.mdx

@@ -0,0 +1,32 @@
+import { Meta, Title, Canvas, ArgTypes } from '@storybook/blocks';
+
+import * as Stories from './AnimatedTextContainer.stories';
+
+<Meta of={Stories} />
+
+<Title>AnimatedTextContainer</Title>
+
+[Intro](#Intro) | [Usage](#Usage) | [Component API](#ComponentAPI)
+
+## Intro <a id="Intro" />
+
+The `AnimatedTextContainer` components gives the possibility to put own text which will be rendered with typing animation. It also provides possibility to put own handler which will be executed at the end of animation.
+
+<Canvas of={Stories.Default} />
+
+## Usage <a id="Usage" />
+
+```tsx
+import { AnimatedTextContainer } from '@livechat/design-system-react-components';
+
+return (
+  <AnimatedTextContainer
+    text={/* your text here */}
+    onTypingEnd={/* your handler here */}
+  />
+)
+```
+
+## Component API <a id="ComponentAPI" />
+
+<ArgTypes of={Stories.Default} sort="requiredFirst" />

packages/react-components/src/components/AnimatedTextContainer/AnimatedTextContainer.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/react';
+
+import { AnimatedTextContainer } from './AnimatedTextContainer';
+
+export default {
+  title: 'Components/AnimatedTextContainer',
+  component: AnimatedTextContainer,
+} as Meta<typeof AnimatedTextContainer>;
+
+const TEXT =
+  'We have prepared the playground ready for you to test all capabilities of chat section. If you have any question, just trigger me from the upper -right corner of the screen!';
+
+export const Default = () => {
+  return (
+    <div
+      style={{
+        width: 360,
+      }}
+    >
+      <AnimatedTextContainer text={TEXT} />
+    </div>
+  );
+};

packages/react-components/src/components/AnimatedTextContainer/AnimatedTextContainer.tsx

@@ -0,0 +1,50 @@
+import { FC, useEffect, useState } from 'react';
+
+import { IAnimatedTextContainerProps } from './types';
+
+const TYPING_SPEED = 10;
+const TYPING_DELAY = 600;
+
+export const AnimatedTextContainer: FC<IAnimatedTextContainerProps> = ({
+  text,
+  typingAnimation = true,
+  typingDelay = TYPING_DELAY,
+  typingSpeed = TYPING_SPEED,
+  onTypingEnd,
+}) => {
+  const [displayedText, setDisplayedText] = useState('');
+  const [_, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (!text) return;
+
+    if (!typingAnimation && onTypingEnd) {
+      return onTypingEnd();
+    }
+
+    const startTyping = () => {
+      const interval = setInterval(() => {
+        setIndex((prevIndex) => {
+          if (prevIndex < text.length) {
+            setDisplayedText((prevText) => prevText + text[prevIndex]);
+
+            return prevIndex + 1;
+          } else {
+            clearInterval(interval);
+            onTypingEnd?.();
+
+            return prevIndex;
+          }
+        });
+      }, typingSpeed);
+    };
+
+    const timeout = setTimeout(startTyping, typingDelay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [text, typingAnimation]);
+
+  return <>{typingAnimation ? displayedText : text}</>;
+};

packages/react-components/src/components/AnimatedTextContainer/index.ts

@@ -0,0 +1 @@
+export { AnimatedTextContainer } from './AnimatedTextContainer';

packages/react-components/src/components/AnimatedTextContainer/types.ts

@@ -0,0 +1,22 @@
+export interface IAnimatedTextContainerProps {
+  /**
+   * Simple text to display
+   */
+  text: string;
+  /**
+   * Should the text typing be animated
+   */
+  typingAnimation?: boolean;
+  /**
+   * Delay before typing starts
+   */
+  typingDelay?: number;
+  /**
+   * Typing animation speed
+   */
+  typingSpeed?: number;
+  /**
+   * Callback when typing animation ends
+   */
+  onTypingEnd?: () => void;
+}

packages/react-components/src/components/AppFrame/components/ExpirationCounter/ExpirationCounter.tsx

@@ -38,6 +38,7 @@ export const ExpirationCounter: React.FC<IExpirationCounterProps> = ({
 }) => (
   <li key={id} className={cx(styles[baseClass], className)}>
     <a
+      id={id}
       tabIndex={0}
       href={url}
       onClick={(e) => onClick(e, id)}

packages/react-components/src/components/AppFrame/components/NavigationItem/NavigationItem.tsx

@@ -51,6 +51,7 @@ export const NavigationItem: React.FC<INavigationItemProps> = ({
 
   return (
     <li
+      id={id}
       key={id}
       className={cx(
         styles[baseClass],

packages/react-components/src/components/AppFrame/components/NavigationTopBar/NavigationTopBar.tsx

@@ -35,11 +35,12 @@ export const NavigationTopBar = ({
   children,
   className,
   additionalNodes,
+  id,
 }: INavigationTopBarProps): React.ReactElement => {
   const { isMobileViewEnabled } = useAppFrame();
 
   return (
-    <div className={cx(styles[baseClass], className)}>
+    <div className={cx(styles[baseClass], className)} id={id}>
       <div className={styles[`${baseClass}__alerts-wrapper`]}>{children}</div>
       {!isMobileViewEnabled && additionalNodes}
     </div>
@@ -95,6 +96,7 @@ export const NavigationTopBarAlert: React.FC<ITopBarAlertProps> = ({
   primaryCta,
   secondaryCta,
   isVisible = true,
+  id,
 }) => {
   const [isMobile, setIsMobile] = React.useState<boolean>(false);
   const alertRef = React.useRef<HTMLDivElement>(null);
@@ -178,6 +180,7 @@ export const NavigationTopBarAlert: React.FC<ITopBarAlertProps> = ({
             role="status"
           >
             <div
+              id={id}
               data-testid="navigation-top-bar-alert"
               className={cx(
                 styles[alertClass],

packages/react-components/src/components/AppFrame/components/NavigationTopBar/examples.tsx

@@ -6,7 +6,8 @@ import styles from './examples.module.scss';
 export const DisconnectedAlert: React.FC<{
   show: boolean;
   onClose: () => void;
-}> = ({ show, onClose }) => {
+  id?: string;
+}> = ({ show, onClose, id }) => {
   const [isReconnecting, setIsReconnecting] = React.useState(false);
   const [isReconnected, setIsReconnected] = React.useState(false);
 
@@ -31,6 +32,7 @@ export const DisconnectedAlert: React.FC<{
 
   return (
     <NavigationTopBar.Alert
+      id={id}
       kind={isReconnected ? 'success' : 'error'}
       isVisible={show}
       primaryCta={

packages/react-components/src/components/AppFrame/stories-helpers.tsx

@@ -164,7 +164,8 @@ export const ExampleTopBar: React.FC<{
   topBarVisible: boolean;
   visibleAlert: number | null;
   setVisibleAlert: (index: number | null) => void;
-}> = ({ topBarVisible, visibleAlert, setVisibleAlert }) => {
+  id?: string;
+}> = ({ topBarVisible, visibleAlert, setVisibleAlert, id }) => {
   const [kind, setKind] = React.useState<
     'info' | 'success' | 'warning' | 'error'
   >('warning');
@@ -197,6 +198,7 @@ export const ExampleTopBar: React.FC<{
       }
     >
       <DisconnectedAlert
+        id={id}
         show={visibleAlert === 0}
         onClose={() => closeAlert()}
       />