[PB-3527]:feat/replace custom file grid with UI library Grid component

package.json

@@ -10,7 +10,7 @@
     "@internxt/css-config": "1.1.0",
     "@internxt/lib": "1.4.1",
     "@internxt/sdk": "=1.15.6",
-    "@internxt/ui": "=0.1.8",
+    "@internxt/ui": "=0.1.14",
     "@phosphor-icons/react": "^2.1.7",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.6.0",

src/hooks/useSidenavNavigation.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { useAppSelector } from 'app/store/hooks';
 import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors';
-import { SidenavOption } from '@internxt/ui/dist/components/sidenav/SidenavOptions';
+import { SidenavOption } from '@internxt/ui/dist/components/navigation/sidenav/SidenavOptions';
 import { AppView } from 'app/core/types';
 import { RootState } from 'app/store';
 import localStorageService from 'services/local-storage.service';

src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.tsx

@@ -1,14 +1,13 @@
 import React, { FC, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
-
 import { useAppDispatch } from 'app/store/hooks';
 import { fetchSortedFolderContentThunk } from 'app/store/slices/storage/storage.thunks/fetchSortedFolderContentThunk';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { DriveItemData } from 'app/drive/types';
+import { Grid } from '@internxt/ui';
 import DriveGridItemSkeleton from '../../DriveGridItemSkeleton';
 import EditItemNameDialog from 'app/drive/components/EditItemNameDialog/EditItemNameDialog';
 import DriveExplorerGridItem from './DriveExplorerGridItem';
-import './DriveExplorerGrid.scss';
 
 interface DriveExplorerGridProps {
   folderId: string;
@@ -93,7 +92,7 @@ const DriveExplorerGrid: FC<DriveExplorerGridProps> = (props: DriveExplorerGridP
   return (
     <>
       {isLoading && isFirstLoad.current ? (
-        <div className="files-grid grow">{loadingSkeleton()}</div>
+        <Grid className="grow">{loadingSkeleton()}</Grid>
       ) : (
         <div
           id="scrollableList"
@@ -116,14 +115,16 @@ const DriveExplorerGrid: FC<DriveExplorerGridProps> = (props: DriveExplorerGridP
             dataLength={itemsList().length}
             next={onEndOfScroll}
             hasMore={hasMoreItems}
-            loader={loadingSkeleton()}
+            loader={<Grid>{loadingSkeleton()}</Grid>}
             scrollableTarget="scrollableList"
-            className="files-grid z-0 grow"
+            className="z-0 grow"
             style={{ overflow: 'visible' }}
             scrollThreshold={0.6}
           >
-            {itemsFolderList()}
-            {itemsFileList()}
+            <Grid>
+              {itemsFolderList()}
+              {itemsFileList()}
+            </Grid>
           </InfiniteScroll>
         </div>
       )}