Merge pull request #34 from AntaresSimulatorTeam/fix/ANT-2621_refacto…

…_hooks

fix: ANT-2621 - Refacto hooks and add unit tests

src/App.tsx

@@ -10,7 +10,7 @@ import './App.css';
 import ThemeHandler from './components/common/handler/ThemeHandler';
 import Navbar from './components/pegase/navbar/Navbar';
 import PegaseStar from './components/pegase/star/PegaseStar';
-import { UserContext } from './contexts/UserContext';
+import { UserContext } from '@/store/contexts/UserContext';
 import { PEGASE_NAVBAR_ID } from './shared/constants';
 import { THEME_COLOR } from './shared/types';
 import { menuBottomData, menuTopData } from './routes';

src/components/common/data/stdTable/TableCore.tsx

@@ -4,10 +4,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useStdId } from '@/hooks/useStdId';
 import { Cell, flexRender, Header, Row, Table } from '@tanstack/react-table';
 import { clsx } from 'clsx';
 import { tableCoreRowClassBuilder } from './tableCoreRowClassBuilder';
+import { useRdsId } from 'rte-design-system-react';
 
 export type ColumnSizeType = 'pixels' | 'meta';
 export type ColumnResizeMode = 'onChange' | 'onEnd';
@@ -97,7 +97,7 @@ const tableStyleBuilder = <TData,>(table: Table<TData>, columnSize: ColumnSizeTy
     : undefined;
 
 const TableCore = <TData,>({ table, id: propId, striped, trClassName, columnSize = 'meta' }: TableCoreProps<TData>) => {
-  const id = useStdId('table-', propId);
+  const id = useRdsId('table-', propId);
 
   const handleToggleRow = (row: Row<unknown>) => () => {
     if (row.getCanSelect()) {

src/components/common/handler/ThemeHandler.tsx

@@ -4,7 +4,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { UserContext } from '@/contexts/UserContext';
+import { UserContext } from '@/store/contexts/UserContext';
 import usePrevious from '@/hooks/common/usePrevious';
 import { THEME_COLOR } from '@/shared/types';
 import { useEffect } from 'react';

src/components/common/handler/test/ThemeHandler.test.tsx

@@ -5,14 +5,14 @@
  */
 
 import { render } from '@testing-library/react';
-import { describe, it, expect, vi, Mock } from 'vitest';
-import { UserContext } from '@/contexts/UserContext';
-import usePrevious from '@/hooks/common/usePrevious';
+import { describe, expect, it, Mock, vi } from 'vitest';
 import { THEME_COLOR } from '@/shared/types';
 import ThemeHandler from '../ThemeHandler';
+import { UserContext } from '@/store/contexts/UserContext';
+import usePrevious from '@/hooks/common/usePrevious';
 
 // Mocking the UserContext and usePrevious hook
-vi.mock('@/contexts/UserContext', () => ({
+vi.mock('@/store/contexts/UserContext', () => ({
   UserContext: {
     useStore: vi.fn(),
   },

src/components/common/layout/stdAvatar/StdAvatar.tsx

@@ -6,8 +6,7 @@
 
 import { avatarClassBuilder } from './avatarClassBuilder';
 import { AVATAR_COLORS } from '../stdAvatarGroup/avatarTools';
-import { useStdId } from '@/hooks/common/useStdId';
-import { RdsTextTooltip } from 'rte-design-system-react';
+import { RdsTextTooltip, useRdsId } from 'rte-design-system-react';
 
 type StdAvatarProps = {
   initials: string;
@@ -24,7 +23,7 @@ const OFFSET_HOVER_HEIGHT = 5;
 
 const StdAvatar = ({ initials, size, backgroundColor, fullname, id: propsId }: StdAvatarProps) => {
   const avatarClasses = avatarClassBuilder(size, backgroundColor);
-  const id = useStdId('avatar', propsId);
+  const id = useRdsId('avatar', propsId);
 
   return (
     <div role="figure" id={id} className={'avatar overflow-visible'}>

src/components/common/layout/stdAvatarGroup/StdAvatarGroup.tsx

@@ -9,19 +9,19 @@ import StdAvatar from '../stdAvatar/StdAvatar';
 import { AvatarSize } from '../stdAvatar/StdAvatar';
 import { classBuilder as groupContainerClassBuilder } from './avatarGroupClassBuilder';
 import { getColor, getUserFullname, getUserInitials, splitUserList } from './avatarTools';
-import { useStdId } from '@/hooks/common/useStdId';
+import { useRdsId } from 'rte-design-system-react';
 
 type StdAvatarGroup = {
   users: User[];
-  avatarSize?: AvatarSize;
+  avatarSize: AvatarSize;
   id?: string;
 };
 
 const StdAvatarGroup = ({ users: listUser, avatarSize = 'es', id: propsId }: StdAvatarGroup) => {
   const groupContainerClasses = groupContainerClassBuilder(avatarSize);
   const users = splitUserList(listUser);
 
-  const id = useStdId('avatarGroup', propsId);
+  const id = useRdsId('avatarGroup', propsId);
 
   return (
     <div role="group" id={id} className={groupContainerClasses}>

src/components/common/layout/stdNavbar/StdNavbar.tsx

@@ -4,15 +4,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useStdId } from '@/hooks/common/useStdId';
 import { MenuNavItem } from '@/shared/types';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import StdNavbarController from './StdNavbarController';
 import StdNavbarHeader from './StdNavbarHeader';
 import StdNavbarMenu from './StdNavbarMenu';
 import { navbarClassBuilder } from './navbarClassBuilder';
-import { RdsDivider } from 'rte-design-system-react';
+import { RdsDivider, useRdsId } from 'rte-design-system-react';
 
 export type StdNavbarProps = {
   topItems: MenuNavItem[];
@@ -32,7 +31,7 @@ const StdNavbar = ({ topItems, bottomItems, appName, appVersion, headerLink, id:
   };
 
   const navbarClasses = navbarClassBuilder(expanded);
-  const id = useStdId('navbar', propsId);
+  const id = useRdsId('navbar', propsId);
   const controllerId = `${id}-controller`;
   const headerId = `${id}-header`;
   const controllerLabel = expanded ? t('components.navbar.@minimize') : t('components.navbar.@expand');

src/components/common/layout/stdNavbar/StdNavbarController.tsx

@@ -4,9 +4,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import StdTextTooltip from '../stdTextTooltip/StdTextTooltip';
 import { navbarControllerClassBuilder } from './navbarClassBuilder';
-import { RdsIcon, RdsIconId } from 'rte-design-system-react';
+import { RdsIcon, RdsIconId, RdsTextTooltip } from 'rte-design-system-react';
 
 type StdNavbarControllerProps = {
   id: string;
@@ -17,16 +16,16 @@ type StdNavbarControllerProps = {
 
 const StdNavbarController = ({ label, id, action, expanded = true }: StdNavbarControllerProps) => {
   const iconId = expanded ? RdsIconId.KeyboardDoubleArrowLeft : RdsIconId.KeyboardDoubleArrowRight;
-  const navbarControllerClasses = navbarControllerClassBuilder(expanded);
+  const navbarControllerClasses = expanded ? navbarControllerClassBuilder(expanded) : undefined;
 
   return (
     <div>
-      <StdTextTooltip text={label} enabled={!expanded} placement="right" disableArrow>
+      <RdsTextTooltip text={label} enabled={!expanded} placement="right" disableArrow>
         <div className={navbarControllerClasses} id={id} onClick={action} role="button" tabIndex={0}>
           {expanded ? <RdsIcon name={iconId} isExplicit /> : <RdsIcon name={iconId} isExplicit={false} alt={label} />}
           {expanded && <>{label}</>}
         </div>
-      </StdTextTooltip>
+      </RdsTextTooltip>
     </div>
   );
 };

src/components/common/layout/stdNavbar/StdNavbarMenuItem.tsx

@@ -4,13 +4,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useStdId } from '@/hooks/common/useStdId';
 import { MenuNavItem } from '@/shared/types';
 import { Link } from 'react-router-dom';
-import StdTextTooltip from '../stdTextTooltip/StdTextTooltip';
 import { navbarItemClassBuilder } from './navbarClassBuilder';
 import { useTranslation } from 'react-i18next';
-import { RdsIcon } from 'rte-design-system-react';
+import { RdsIcon, RdsTextTooltip, useRdsId } from 'rte-design-system-react';
 
 type StdNavbarMenuItemProps = {
   item: MenuNavItem;
@@ -19,18 +17,18 @@ type StdNavbarMenuItemProps = {
 };
 
 const StdNavbarMenuItem = ({ item, expanded = true, selected = false }: StdNavbarMenuItemProps) => {
-  const id = useStdId('navbar-item', item.id);
+  const id = useRdsId('navbar-item', item.id);
   const { t } = useTranslation();
   const { path, key, icon, label } = item;
   const navbarMenuItemClasses = navbarItemClassBuilder(selected, expanded);
 
   return (
-    <StdTextTooltip text={label} placement="right" enabled={!expanded} disableArrow>
+    <RdsTextTooltip text={label} placement="right" enabled={!expanded} disableArrow>
       <Link to={path} className={navbarMenuItemClasses} key={key} id={id}>
         <RdsIcon name={icon} />
         {expanded && t(label)}
       </Link>
-    </StdTextTooltip>
+    </RdsTextTooltip>
   );
 };
 

src/components/common/layout/stdTextWithTooltip/StdTextWithTooltip.tsx

@@ -5,15 +5,14 @@
  */
 
 import React, { useRef, useState } from 'react';
-import StdTextTooltip from '../stdTextTooltip/StdTextTooltip';
-import { useCallOnResize } from '@/hooks/common/useCallOnResize';
+import { RdsTextTooltip, useCallOnResize } from 'rte-design-system-react';
 
 type StdTextTooltipProps = { text: string; id: string | undefined } & React.HTMLProps<HTMLSpanElement>;
 
 const DEFAULT_OFFSET = 8;
 
 const StdTextWithTooltip = ({ text, id, ...props }: StdTextTooltipProps) => {
-  const spanRef = useRef<HTMLSpanElement>(null);
+  const spanRef = useRef<HTMLSpanElement | null>(null);
   const [enabled, setEnabled] = useState<boolean>(false);
 
   useCallOnResize(() => {
@@ -24,11 +23,11 @@ const StdTextWithTooltip = ({ text, id, ...props }: StdTextTooltipProps) => {
   }, spanRef.current?.id);
 
   return (
-    <StdTextTooltip text={text} enabled={enabled} offset={DEFAULT_OFFSET}>
+    <RdsTextTooltip text={text} enabled={enabled} offset={DEFAULT_OFFSET}>
       <span ref={spanRef} {...props} id={id}>
         {text}
       </span>
-    </StdTextTooltip>
+    </RdsTextTooltip>
   );
 };
 

src/components/pegase/pegaseCard/pegaseCard.tsx

@@ -17,7 +17,7 @@ export type PegaseCardTripleActionButtonProps = {
 };
 
 type PegaseCardTripleActionProps = Omit<RdsCardProps, 'disabled'> &
-  Omit<PegaseCardTitleProps, 'onClick'> & {
+  PegaseCardTitleProps & {
     title: string;
     buttons?: PegaseCardTripleActionButtonProps;
     secondaryButtonPosition?: PegaseCardSecondaryButtonPosition;

src/components/pegase/pegaseCard/tests/pegaseCardTripleAction.test.tsx

@@ -19,11 +19,11 @@ const TEST_SECONDARY_BUTTON: Omit<RdsButtonProps, 'type' | 'size' | 'variant'> =
 };
 const TEST_CHILDREN = <div role="article"></div>;
 const TEST_ID = 'card-triple-action-id';
-const TEST_DROPDOWN_DROPDOWN: RdsDropdownOption[] = [
+const TEST_DROPDOWN_DROPDOWN = [
   { key: 'op1', label: 'Option 1', value: 'op1', onItemClick: noop },
   { key: 'op2', label: 'Option 2', value: 'op2', onItemClick: noop },
   { key: 'op3', label: 'Option 3', value: 'op3', onItemClick: noop },
-];
+] as RdsDropdownOption[];
 
 describe('PegaseCard', () => {
   it('renders the default PegaseCard component', () => {