change graasp ui imports to local imports

eslint.config.js

@@ -88,6 +88,9 @@ export default [
     rules: {
       'import/order': 'off',
 
+      // disable temporarily this rule, re-enable when we have all instances fixed
+      '@eslint-react/hooks-extra/no-direct-set-state-in-use-effect': 'off',
+
       '@typescript-eslint/no-namespace': 'off',
       'react/jsx-uses-react': 'off',
       'react/react-in-jsx-scope': 'off',

package.json

@@ -25,7 +25,6 @@
     "@graasp/sdk": "5.6.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.43.0",
-    "@graasp/ui": "5.5.1",
     "@mui/icons-material": "6.3.1",
     "@mui/lab": "6.0.0-beta.22",
     "@mui/material": "6.3.1",
@@ -43,6 +42,7 @@
     "i18next": "24.2.1",
     "i18next-browser-languagedetector": "8.0.2",
     "i18next-fetch-backend": "6.0.0",
+    "interweave": "13.1.0",
     "jwt-decode": "4.0.0",
     "katex": "0.16.20",
     "lodash": "4.17.21",
@@ -54,6 +54,8 @@
     "react": "18.3.1",
     "react-accessible-treeview": "2.10.0",
     "react-date-range": "2.0.1",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.3.1",
     "react-fullscreen-crossbrowser": "1.1.3",
     "react-helmet-async": "2.0.5",
@@ -63,6 +65,7 @@
     "react-intersection-observer": "9.15.0",
     "react-qr-code": "2.0.15",
     "react-quill": "2.0.0",
+    "react-rnd": "10.4.14",
     "react-toastify": "11.0.2",
     "recharts": "2.15.0",
     "social-links": "1.14.0",

src/locales/en/builder.json

@@ -470,7 +470,11 @@
   },
   "CHAT": {
     "SHOW": "Show chat",
-    "HIDE": "Hide chat"
+    "HIDE": "Hide chat",
+    "CLEAR_BUTTON_TEXT": "Clear",
+    "CLEAR_ALL": "Clear chat",
+    "CLEAR_ALL_TITLE": "Clear chat content",
+    "CLEAR_ALL_CONTENT": "You can delete all messages from the chat. Ensure you have downloaded a copy if you want to keep the messages. You can not undo this action."
   },
   "TRASH_NO_ITEM": "You trash is empty.",
   "BOOKMARKS_NO_ITEM": "No bookmarked item",

src/locales/en/enums.json

@@ -32,6 +32,7 @@
   "md": "Medium",
   "lg": "Large",
   "xl": "Extra Large",
+  "default": "Default",
 
   "guest": "guest",
   "individual": "member",
@@ -62,5 +63,7 @@
 
   "level": "Level",
   "discipline": "Discipline",
-  "resource-type": "Resource Type"
+  "resource-type": "Resource Type",
+
+  "disabled": "Disabled"
 }

src/modules/analytics/charts-layout/ChartsHeader.tsx

@@ -2,10 +2,10 @@ import { KeyboardEvent, MouseEvent, useContext, useState } from 'react';
 
 import { Badge, IconButton, Stack, SwipeableDrawer } from '@mui/material';
 
-import { useMobileView } from '@graasp/ui';
-
 import { Filter } from 'lucide-react';
 
+import { useMobileView } from '@/ui/hooks/useMobileView';
+
 import DateRangeInput from '~analytics/common/DateRangeInput';
 import { TOGGLE_FILTERS_DRAWER_BUTTON_ID } from '~analytics/config/selectors';
 import { DataContext } from '~analytics/context/DataProvider';

src/modules/analytics/common/ChartTitle.tsx

@@ -1,9 +1,9 @@
 import { Stack, Tooltip, Typography } from '@mui/material';
 
-import { useButtonColor } from '@graasp/ui';
-
 import { Info } from 'lucide-react';
 
+import { useButtonColor } from '@/ui/buttons/hooks';
+
 const ChartTitle = ({
   title,
   description = title,

src/modules/analytics/functionality/ViewSelect.tsx

@@ -11,11 +11,11 @@ import {
 } from '@mui/material';
 
 import { Context } from '@graasp/sdk';
-import { useButtonColor } from '@graasp/ui';
 
 import { Info } from 'lucide-react';
 
 import { NS } from '@/config/constants';
+import { useButtonColor } from '@/ui/buttons/hooks';
 
 import {
   SELECT_VIEW_ID,

src/modules/auth/components/BrandingLogo.tsx

@@ -1,6 +1,6 @@
 import { Stack, Typography, useTheme } from '@mui/material';
 
-import { GraaspLogo } from '@graasp/ui';
+import GraaspLogo from '@/ui/GraaspLogo/GraaspLogo';
 
 export function BrandingLogo() {
   const theme = useTheme();

src/modules/auth/components/LeftContentContainer.tsx

@@ -2,16 +2,13 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, Stack } from '@mui/material';
 
-import {
-  AccentColors,
-  AnalyticsIcon,
-  BuildIcon,
-  LibraryIcon,
-  PlayIcon,
-} from '@graasp/ui';
-
 import { NS } from '@/config/constants';
 import { PLATFORM_ADVERTISEMENT_CONTAINER_ID } from '@/config/selectors';
+import AnalyticsIcon from '@/ui/icons/AnalyticsIcon';
+import BuildIcon from '@/ui/icons/BuildIcon';
+import LibraryIcon from '@/ui/icons/LibraryIcon';
+import PlayIcon from '@/ui/icons/PlayIcon';
+import { AccentColors } from '@/ui/theme';
 
 import { AUTH } from '~auth/langs';
 

src/modules/auth/components/Redirection.tsx

@@ -3,14 +3,13 @@ import { useTranslation } from 'react-i18next';
 
 import { Container, Stack, Typography, useTheme } from '@mui/material';
 
-import { GraaspLogo } from '@graasp/ui';
-
 import { ArrowRightIcon } from 'lucide-react';
 
 import { ButtonLink } from '@/components/ui/ButtonLink';
 import { NS } from '@/config/constants';
 import { hooks } from '@/config/queryClient';
 import { REDIRECTION_CONTENT_CONTAINER_ID } from '@/config/selectors';
+import GraaspLogo from '@/ui/GraaspLogo/GraaspLogo';
 
 import { AUTH } from '~auth/langs';
 

src/modules/auth/components/common/FormHeader.tsx

@@ -1,6 +1,6 @@
 import { Stack, Typography, useTheme } from '@mui/material';
 
-import { GraaspLogo } from '@graasp/ui';
+import GraaspLogo from '@/ui/GraaspLogo/GraaspLogo';
 
 type FormHeaderProps = {
   readonly id?: string;

src/modules/auth/components/layout/DialogHeader.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { Stack, Typography, useTheme } from '@mui/material';
 
-import { GraaspLogo } from '@graasp/ui';
+import GraaspLogo from '@/ui/GraaspLogo/GraaspLogo';
 
 type DialogHeaderProps = {
   title: string;

src/modules/builder/components/common/BookmarkButton.tsx

@@ -3,13 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { IconButtonProps } from '@mui/material';
 
 import { DiscriminatedItem, ItemBookmark } from '@graasp/sdk';
-import {
-  ActionButtonVariant,
-  BookmarkButton as GraaspBookmarkButton,
-} from '@graasp/ui';
 
 import { NS } from '@/config/constants';
 import { hooks, mutations } from '@/config/queryClient';
+import GraaspBookmarkButton from '@/ui/buttons/BookmarkButton/BookmarkButton';
+import { ActionButtonVariant } from '@/ui/types';
 
 import { BUILDER } from '../../langs/constants';
 

src/modules/builder/components/common/CancelButton.tsx

@@ -2,9 +2,8 @@ import { useTranslation } from 'react-i18next';
 
 import { ButtonProps } from '@mui/material';
 
-import { Button } from '@graasp/ui';
-
 import { NS } from '@/config/constants';
+import Button from '@/ui/buttons/Button/Button';
 
 type Props = {
   onClick: () => void;

src/modules/builder/components/common/Chatbox.tsx

@@ -1,9 +1,9 @@
 import { Chatbox as GraaspChatbox } from '@graasp/chatbox';
 import { PackedItem, PermissionLevel } from '@graasp/sdk';
-import { Loader } from '@graasp/ui';
 
 import { hooks, mutations } from '@/config/queryClient';
 import { CHATBOX_ID, CHATBOX_INPUT_BOX_ID } from '@/config/selectors';
+import Loader from '@/ui/Loader/Loader';
 
 const { useItemChat, useAvatarUrl, useItemMemberships } = hooks;
 const {

src/modules/builder/components/common/CollapseButton.tsx

@@ -4,13 +4,13 @@ import { useTranslation } from 'react-i18next';
 import { IconButton, ListItemIcon, MenuItem, Tooltip } from '@mui/material';
 
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
-import { ActionButton, ActionButtonVariant } from '@graasp/ui';
 
 import { ChevronsDownUpIcon, ChevronsUpDownIcon } from 'lucide-react';
 
 import { NS } from '@/config/constants';
 import { mutations } from '@/config/queryClient';
 import { COLLAPSE_ITEM_BUTTON_CLASS } from '@/config/selectors';
+import { ActionButton, ActionButtonVariant } from '@/ui/types';
 
 import { BUILDER } from '../../langs/constants';
 

src/modules/builder/components/common/ConfirmLicenseDialogContent.tsx

@@ -2,9 +2,8 @@ import { useTranslation } from 'react-i18next';
 
 import { DialogActions, DialogContent, DialogContentText } from '@mui/material';
 
-import { Button } from '@graasp/ui';
-
 import { NS } from '@/config/constants';
+import Button from '@/ui/buttons/Button/Button';
 
 type Props = {
   handleSubmit: () => void;

src/modules/builder/components/common/CropModal.tsx

@@ -16,10 +16,9 @@ import {
   DialogTitle,
 } from '@mui/material';
 
-import { Button } from '@graasp/ui';
-
 import { NS } from '@/config/constants';
 import { CROP_MODAL_CONFIRM_BUTTON_ID } from '@/config/selectors';
+import Button from '@/ui/buttons/Button/Button';
 
 import { BUILDER } from '../../langs/constants';
 import CancelButton from './CancelButton';

src/modules/builder/components/common/CurrentAccountAvatar.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
 
 import { ThumbnailSize } from '@graasp/sdk';
-import { Avatar } from '@graasp/ui';
 
 import { NS } from '@/config/constants';
 import { hooks } from '@/config/queryClient';
 import { buildMemberAvatarId } from '@/config/selectors';
+import Avatar from '@/ui/Avatar/Avatar';
 
 import { AVATAR_ICON_HEIGHT } from '~builder/config/constants';
 

src/modules/builder/components/common/DeleteButton.tsx

@@ -2,14 +2,11 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DiscriminatedItem } from '@graasp/sdk';
-import {
-  ActionButtonVariant,
-  ColorVariantsType,
-  DeleteButton as GraaspDeleteButton,
-} from '@graasp/ui';
 
 import { NS } from '@/config/constants';
 import { ITEM_DELETE_BUTTON_CLASS } from '@/config/selectors';
+import GraaspDeleteButton from '@/ui/buttons/DeleteButton/DeleteButton';
+import { ActionButtonVariant, ColorVariantsType } from '@/ui/types';
 
 import { BUILDER } from '../../langs/constants';
 import DeleteItemDialog from '../main/DeleteItemDialog';