refactor: Move IconComponent to shared-components

src/components/CollapsibleDropdown/CollapsibleDropdown.spec.tsx

@@ -33,7 +33,7 @@ vi.mock('react-router', async (importOriginal) => {
 });
 
 // Mock IconComponent to expose fill prop for testing
-vi.mock('components/IconComponent/IconComponent', () => ({
+vi.mock('shared-components/IconComponent/IconComponent', () => ({
   default: ({ name, fill }: { name: string; fill?: string }) => (
     <div data-testid="mocked-icon-component" data-name={name} data-fill={fill}>
       {name}Icon

src/components/CollapsibleDropdown/CollapsibleDropdown.tsx

@@ -4,13 +4,11 @@
  * controlled by the `showDropdown` state, and it automatically toggles
  * based on the current route.
  *
- * @component
- * @param {InterfaceCollapsibleDropdown} props - The props for the component.
- * @param {object} props.target - The target object containing the dropdown's name and sub-targets.
- * @param {boolean} props.showDropdown - A boolean indicating whether the dropdown is currently visible.
- * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setShowDropdown - A function to toggle the dropdown's visibility.
+ * @param target - The target object containing the dropdown's name and sub-targets.
+ * @param showDropdown - A boolean indicating whether the dropdown is currently visible.
+ * @param setShowDropdown - A function to toggle the dropdown's visibility.
  *
- * @returns {JSX.Element} The collapsible dropdown component.
+ * @returns The collapsible dropdown component.
  *
  * @remarks
  * - The dropdown automatically opens if the current route includes 'orgstore'.
@@ -31,7 +29,7 @@
  * />
  * ```
  *
  * @dependencies
  * - `react-bootstrap/Collapse` for dropdown animation.
  * - `react-router-dom` for navigation and route handling.
  * - `react-i18next` for internationalization support.
@@ -40,7 +38,7 @@
 import React, { useEffect } from 'react';
 import { Collapse } from 'react-bootstrap';
 import styles from 'style/app-fixed.module.css';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import type { InterfaceCollapsibleDropdown } from 'types/DropDown/interface';

src/components/EventStats/EventStatsWrapper.tsx

@@ -19,11 +19,11 @@
  * <EventStatsWrapper _id="12345" />
  * ```
  *
  * @component
  * @category Event Management
  * @subcategory Statistics
  *
  * @dependencies
  * - `react-bootstrap/Button`: For rendering the button to toggle the modal.
  * - `components/IconComponent`: For displaying an icon inside the button.
  * - `style/app-fixed.module.css`: For styling the button's icon wrapper.
@@ -32,7 +32,7 @@
 import React, { useState } from 'react';
 import { EventStats } from './Statistics/EventStats';
 import { Button } from 'react-bootstrap';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import styles from 'style/app-fixed.module.css';
 
 export const EventStatsWrapper = ({ _id }: { _id: string }): JSX.Element => {

src/components/LeftDrawerOrg/LeftDrawerOrg.spec.tsx

@@ -116,7 +116,7 @@ vi.mock('components/CollapsibleDropdown/CollapsibleDropdown', () => ({
   )),
 }));
 
-vi.mock('components/IconComponent/IconComponent', () => ({
+vi.mock('shared-components/IconComponent/IconComponent', () => ({
   default: vi.fn(({ name, fill }) => (
     <div data-testid="icon-component" data-name={name} data-fill={fill}>
       {name}Icon

src/components/LeftDrawerOrg/LeftDrawerOrg.tsx

@@ -30,7 +30,7 @@
  */
 
 import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';

src/components/UserPortal/UserSidebar/UserSidebar.tsx

@@ -12,8 +12,8 @@
  * - The sidebar adapts its visibility based on the `hideDrawer` prop and viewport width.
  * - **REFACTORED**: Now uses shared SidebarBase, SidebarNavItem, and SidebarPluginSection components
  *
  * @param {InterfaceUserSidebarProps} props - The props for the UserSidebar component.
  * @param {boolean} props.hideDrawer - Determines the visibility of the sidebar.
  * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setHideDrawer -
  * Function to update the `hideDrawer` state.
  *
@@ -32,7 +32,7 @@
 import { usePluginDrawerItems } from 'plugin';
 import ProfileCard from 'components/ProfileCard/ProfileCard';
 import SignOut from 'components/SignOut/SignOut';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import SidebarBase from 'shared-components/SidebarBase/SidebarBase';
 import SidebarNavItem from 'shared-components/SidebarNavItem/SidebarNavItem';
 import SidebarPluginSection from 'shared-components/SidebarPluginSection/SidebarPluginSection';

src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx

@@ -30,7 +30,7 @@
  */
 
 import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { TargetsType } from 'state/reducers/routesReducer';

src/screens/AdminPortal/ManageTag/ManageTag.tsx

@@ -55,7 +55,7 @@ import React, { useEffect, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import { WarningAmberRounded } from '@mui/icons-material';
 import LoadingState from 'shared-components/LoadingState/LoadingState';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import { useNavigate, useParams, Link } from 'react-router';
 import { Col } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';

src/screens/AdminPortal/OrganizationTags/OrganizationTags.tsx

@@ -31,7 +31,7 @@ import Modal from 'react-bootstrap/Modal';
 import Row from 'react-bootstrap/Row';
 import { useTranslation } from 'react-i18next';
 import { NotificationToast } from 'components/NotificationToast/NotificationToast';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import LoadingState from 'shared-components/LoadingState/LoadingState';
 import type { InterfaceTagDataPG } from 'utils/interfaces';
 import styles from 'style/app-fixed.module.css';

src/screens/AdminPortal/SubTags/SubTags.tsx

@@ -41,7 +41,7 @@
  */
 import { useMutation, useQuery } from '@apollo/client';
 import { WarningAmberRounded } from '@mui/icons-material';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import LoadingState from 'shared-components/LoadingState/LoadingState';
 import { useNavigate, useParams, Link } from 'react-router';
 import type { ChangeEvent } from 'react';

src/screens/AdminPortal/Users/Users.spec.tsx

@@ -55,7 +55,7 @@ vi.mock('@mui/icons-material', async () => {
   };
 });
 
-vi.mock('components/IconComponent/IconComponent', () => ({
+vi.mock('shared-components/IconComponent/IconComponent', () => ({
   default: ({ name }: { name: string }) => (
     <div data-testid={`mock-icon-${name}`} />
   ),

src/shared-components/DataGridWrapper/DataGridErrorOverlay.tsx

@@ -9,7 +9,7 @@
  */
 import React from 'react';
 import { Stack, Typography } from '@mui/material';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 
 interface InterfaceDataGridErrorOverlayProps {
   /**

src/shared-components/EmptyState/EmptyState.tsx

@@ -53,7 +53,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Stack, Button, Typography } from '@mui/material';
-import IconComponent from 'components/IconComponent/IconComponent';
+import IconComponent from 'shared-components/IconComponent/IconComponent';
 import type { InterfaceEmptyStateProps } from 'types/shared-components/EmptyState/interface';
 
 const EmptyState: React.FC<InterfaceEmptyStateProps> = ({

src/components/IconComponent/IconComponent.tsx → src/shared-components/IconComponent/IconComponent.tsx

@@ -55,13 +55,7 @@ import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import { MdOutlineVolunteerActivism } from 'react-icons/md';
 
 import type { JSX } from 'react';
-
-export interface IIconComponent {
-  name: string;
-  fill?: string;
-  height?: string;
-  width?: string;
-}
+import type { IIconComponent } from 'types/shared-components/IconComponent';
 
 const iconComponent = (props: IIconComponent): JSX.Element => {
   switch (props.name) {

src/types/shared-components/IconComponent/index.ts

@@ -0,0 +1,10 @@
+/**
+ * IconComponent type definitions
+ */
+
+export interface IIconComponent {
+  name: string;
+  fill?: string;
+  height?: string;
+  width?: string;
+}