refactor: update dependencies, import translations (#357)

* refactor: update dependencies, import translations

* fix: dependencies conflict

---------

Co-authored-by: spaenleh <[email protected]>

package.json

@@ -36,65 +36,66 @@
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.1",
     "@graasp/query-client": "1.8.2",
-    "@graasp/sdk": "1.6.0",
-    "@graasp/translations": "1.18.3",
-    "@graasp/ui": "3.5.1",
-    "@mui/icons-material": "5.14.6",
-    "@mui/lab": "5.0.0-alpha.141",
-    "@mui/material": "5.14.6",
+    "@graasp/sdk": "1.7.0",
+    "@graasp/translations": "1.19.2",
+    "@graasp/ui": "3.5.2",
+    "@mui/icons-material": "5.14.11",
+    "@mui/lab": "5.0.0-alpha.146",
+    "@mui/material": "5.14.11",
     "@sentry/react": "7.73.0",
-    "@sentry/tracing": "7.73.0",
-    "clsx": "1.2.1",
-    "i18next": "23.4.4",
-    "immutable": "4.3.2",
+    "i18next": "23.5.1",
+    "immutable": "4.3.4",
     "lodash.truncate": "4.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
-    "react-i18next": "13.2.0",
+    "react-i18next": "13.2.2",
     "react-intersection-observer": "9.5.2",
-    "react-router": "6.15.0",
-    "react-router-dom": "6.15.0",
+    "react-router": "6.16.0",
+    "react-router-dom": "6.16.0",
     "react-toastify": "9.1.3",
     "stylis": "4.3.0",
     "stylis-plugin-rtl": "2.1.1",
-    "uuid": "9.0.0"
+    "uuid": "9.0.1"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "17.7.0",
-    "@cypress/code-coverage": "3.11.0",
+    "@cypress/code-coverage": "3.12.1",
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
     "@types/lodash.truncate": "^4.4.7",
     "@types/node": "^18.13.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@types/uuid": "9.0.2",
-    "@typescript-eslint/eslint-plugin": "6.4.1",
-    "@typescript-eslint/parser": "6.4.1",
-    "@vitejs/plugin-react": "^4.0.4",
-    "commitlint": "17.7.1",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "^18.2.8",
+    "@types/uuid": "9.0.4",
+    "@typescript-eslint/eslint-plugin": "6.7.3",
+    "@typescript-eslint/parser": "6.7.3",
+    "@vitejs/plugin-react": "^4.1.0",
+    "commitlint": "17.7.2",
     "concurrently": "8.2.1",
-    "cypress": "13.2.0",
+    "cypress": "13.3.0",
     "cypress-iframe": "1.0.1",
     "cypress-vite": "1.4.2",
     "env-cmd": "10.1.0",
-    "eslint": "^8.46.0",
+    "eslint": "^8.50.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.0.0",
-    "eslint-import-resolver-typescript": "3.6.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "http-status-codes": "2.2.0",
+    "http-status-codes": "2.3.0",
     "husky": "8.0.3",
-    "path": "0.12.7",
-    "prettier": "3.0.2",
+    "prettier": "3.0.3",
     "rollup-plugin-visualizer": "5.9.2",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-checker": "^0.6.2",
     "vite-plugin-istanbul": "5.0.0"
   },
+  "resolutions": {
+    "i18next": "23.5.1",
+    "immutable": "4.3.4"
+  },
   "packageManager": "[email protected]"
 }

src/config/i18n.ts

@@ -4,11 +4,22 @@ import { initReactI18next, useTranslation } from 'react-i18next';
 import { namespaces } from '@graasp/translations';
 import buildI18n from '@graasp/translations/dist/i18n';
 
+import ar from '../langs/ar.json';
+import de from '../langs/de.json';
+import en from '../langs/en.json';
+import fr from '../langs/fr.json';
+import it from '../langs/it.json';
+
 const i18n = buildI18n(namespaces.player).use(initReactI18next);
+const PLAYER_NAMESPACE = 'player';
+i18n.addResourceBundle('en', PLAYER_NAMESPACE, en);
+i18n.addResourceBundle('fr', PLAYER_NAMESPACE, fr);
+i18n.addResourceBundle('de', PLAYER_NAMESPACE, de);
+i18n.addResourceBundle('it', PLAYER_NAMESPACE, it);
+i18n.addResourceBundle('ar', PLAYER_NAMESPACE, ar);
 
+export const usePlayerTranslation = () => useTranslation(PLAYER_NAMESPACE);
 export const useCommonTranslation = () => useTranslation(namespaces.common);
-export const usePlayerTranslation = () => useTranslation(namespaces.player);
 export const useMessagesTranslation = () => useTranslation(namespaces.messages);
 export const useAuthTranslation = () => useTranslation(namespaces.auth);
-export const useBuilderTranslation = () => useTranslation(namespaces.builder);
 export default i18n;

src/langs/ar.json

@@ -0,0 +1,9 @@
+{
+  "GRAASP_PLAYER": "مشغل چراسپ ",
+  "SHOW_CHAT_TOOLTIP": "إظهار الدردشة",
+  "HIDE_CHAT_TOOLTIP": "إخفاء الدردشة",
+  "SHOW_PINNED_ITEMS_TOOLTIP": "إظهار العناصر المثبتة",
+  "HIDE_PINNED_ITEMS_TOOLTIP": "إخفاء العناصر المثبتة",
+  "PINNED_ITEMS": "العناصر المثبتة",
+  "LOAD_MORE": "تحميل المزيد"
+}

src/langs/constants.ts

@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/prefer-default-export
+export const PLAYER = {
+  GRAASP_PLAYER: 'GRAASP_PLAYER',
+  SHOW_CHAT_TOOLTIP: 'SHOW_CHAT_TOOLTIP',
+  HIDE_CHAT_TOOLTIP: 'HIDE_CHAT_TOOLTIP',
+  SHOW_PINNED_ITEMS_TOOLTIP: 'SHOW_PINNED_ITEMS_TOOLTIP',
+  HIDE_PINNED_ITEMS_TOOLTIP: 'HIDE_PINNED_ITEMS_TOOLTIP',
+  PINNED_ITEMS: 'PINNED_ITEMS',
+  LOAD_MORE: 'LOAD_MORE',
+  HIDDEN_WRAPPER_TOOLTIP: 'HIDDEN_WRAPPER_TOOLTIP',
+};

src/langs/de.json

@@ -0,0 +1,6 @@
+{
+  "GRAASP_PLAYER": "Graasp Player",
+  "SHOW_CHAT_TOOLTIP": "Chat anzeigen",
+  "HIDE_CHAT_TOOLTIP": "Chat verstecken",
+  "LOAD_MORE": "Mehr laden"
+}

src/langs/en.json

@@ -0,0 +1,10 @@
+{
+  "GRAASP_PLAYER": "Graasp Player",
+  "SHOW_CHAT_TOOLTIP": "Show chat",
+  "HIDE_CHAT_TOOLTIP": "Hide chat",
+  "SHOW_PINNED_ITEMS_TOOLTIP": "Show pinned items",
+  "HIDE_PINNED_ITEMS_TOOLTIP": "Hide pinned items",
+  "PINNED_ITEMS": "Pinned items",
+  "LOAD_MORE": "Load more",
+  "HIDDEN_WRAPPER_TOOLTIP": "This element is hidden, you can see it because you have admin or write access, users with read access won't see it"
+}

src/langs/fr.json

@@ -0,0 +1,10 @@
+{
+  "GRAASP_PLAYER": "Graasp Player",
+  "SHOW_CHAT_TOOLTIP": "Montrer le chat",
+  "HIDE_CHAT_TOOLTIP": "Cacher le chat",
+  "SHOW_PINNED_ITEMS_TOOLTIP": "Montrer les éléments épinglés",
+  "HIDE_PINNED_ITEMS_TOOLTIP": "Cacher les éléments épinglés",
+  "PINNED_ITEMS": "Éléments épinglés",
+  "LOAD_MORE": "Montrer plus",
+  "HIDDEN_WRAPPER_TOOLTIP": "Cet élément est caché, vous pouvez le voir car vous possédez un droit d'administration ou d'écriture, les utilisateurs avec droits de lecture ne peuvent pas voir cet élément"
+}

src/langs/it.json

@@ -0,0 +1 @@
+{}

src/main.tsx

@@ -6,7 +6,6 @@ import { hasAcceptedCookies } from '@graasp/sdk';
 import '@graasp/ui/dist/bundle.css';
 
 import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/tracing';
 
 import { APP_VERSION, GA_MEASUREMENT_ID, SENTRY_DSN } from '@/config/env';
 import { SENTRY_ENVIRONMENT, SENTRY_TRACE_SAMPLE_RATE } from '@/config/sentry';
@@ -16,7 +15,7 @@ import Root from './Root';
 
 Sentry.init({
   dsn: SENTRY_DSN,
-  integrations: [new BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
   environment: SENTRY_ENVIRONMENT,
   release: `${pkg.name}@${APP_VERSION}`,
 

src/modules/common/HiddenWrapper.tsx

@@ -1,10 +1,10 @@
 import { Box, styled } from '@mui/material';
 
 import { ItemRecord } from '@graasp/sdk/frontend';
-import { PLAYER } from '@graasp/translations';
 
 import { usePlayerTranslation } from '@/config/i18n';
 import { buildHiddenWrapperId } from '@/config/selectors';
+import { PLAYER } from '@/langs/constants';
 
 export const HIDDEN_STYLE = {
   backgroundColor: '#eee',

src/modules/item/Item.tsx

@@ -16,7 +16,7 @@ import {
   S3FileItemTypeRecord,
   ShortcutItemTypeRecord,
 } from '@graasp/sdk/frontend';
-import { FAILURE_MESSAGES, PLAYER } from '@graasp/translations';
+import { FAILURE_MESSAGES } from '@graasp/translations';
 import {
   AppItem,
   Button,
@@ -49,6 +49,7 @@ import {
   buildFolderButtonId,
 } from '@/config/selectors';
 import { useCurrentMemberContext } from '@/contexts/CurrentMemberContext';
+import { PLAYER } from '@/langs/constants';
 import { isHidden, paginationContentFilter } from '@/utils/item';
 
 import PinnedFolderItem from './PinnedFolderItem';

src/modules/rightPanel/SideContent.tsx

@@ -5,11 +5,11 @@ import IconButton from '@mui/material/IconButton';
 
 import { ItemType } from '@graasp/sdk';
 import { ItemRecord } from '@graasp/sdk/frontend';
-import { PLAYER } from '@graasp/translations';
 
 import { usePlayerTranslation } from '@/config/i18n';
 import { useItemContext } from '@/contexts/ItemContext';
 import { useLayoutContext } from '@/contexts/LayoutContext';
+import { PLAYER } from '@/langs/constants';
 import Chatbox from '@/modules/chatbox/Chatbox';
 import Item from '@/modules/item/Item';
 

src/modules/tree/CustomContentTree.tsx

@@ -4,8 +4,6 @@ import { useTreeItem } from '@mui/lab/TreeItem';
 import { styled } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
-import clsx from 'clsx';
-
 const StyledDiv = styled('div')({
   // align expand arrow to top
   alignItems: 'start !important',
@@ -54,15 +52,15 @@ const CustomContentTree = React.forwardRef(
 
     const icon = iconProp || expansionIcon || displayIcon;
 
-    const handleMouseDown = (event: MouseEvent) => {
+    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {
       preventSelection(event);
     };
 
-    const handleExpansionClick = (event: MouseEvent) => {
+    const handleExpansionClick = (event: MouseEvent<HTMLDivElement>) => {
       handleExpansion(event);
     };
 
-    const handleSelectionClick = (event: MouseEvent) => {
+    const handleSelectionClick = (event: MouseEvent<HTMLDivElement>) => {
       // this handles the auto expansion of an item on click to show children
       if (!expanded) {
         handleExpansion(event);
@@ -77,15 +75,19 @@ const CustomContentTree = React.forwardRef(
       </div>
     );
 
+    const classNames = [
+      className,
+      classes.root,
+      expanded ? classes.expanded : '',
+      disabled ? classes.disabled : '',
+      selected ? classes.selected : '',
+      focused ? classes.focused : '',
+    ].join(' ');
+
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <StyledDiv
-        className={clsx(className, classes.root, {
-          [classes.expanded]: expanded,
-          [classes.selected]: selected,
-          [classes.focused]: focused,
-          [classes.disabled]: disabled,
-        })}
+        className={classNames}
         onMouseDown={handleMouseDown}
         ref={ref as Ref<HTMLDivElement>}
       >

src/modules/userSwitch/UserSwitchWrapper.tsx

@@ -1,9 +1,7 @@
 import { MemberRecord } from '@graasp/sdk/frontend';
-import { BUILDER } from '@graasp/translations';
 import { UserSwitchWrapper as GraaspUserSwitch } from '@graasp/ui';
 
 import { MEMBER_PROFILE_PATH, SIGN_IN_PATH } from '@/config/constants';
-import { useBuilderTranslation } from '@/config/i18n';
 import { mutations } from '@/config/queryClient';
 import {
   HEADER_MEMBER_MENU_BUTTON_ID,
@@ -29,8 +27,6 @@ const UserSwitchWrapper = ({
   preserveUrl = false,
 }: Props): JSX.Element => {
   const { data: member, isLoading = true } = useCurrentMemberContext();
-  const { t: translateBuilder } = useBuilderTranslation();
-  // const { mutateAsync: useSwitchMemberAsyncMutation } = useSwitchMember();
   const { mutate: useSignOutMutation } = useSignOut();
 
   const redirectUrl = new URL(SIGN_IN_PATH);
@@ -47,13 +43,6 @@ const UserSwitchWrapper = ({
       signOut={useSignOutMutation}
       currentMember={member}
       isCurrentMemberLoading={isLoading}
-      // switchMember={useSwitchMemberAsyncMutation}
-      seeProfileText={translateBuilder(BUILDER.USER_SWITCH_PROFILE_BUTTON)}
-      signedOutTooltipText={translateBuilder(
-        BUILDER.USER_SWITCH_SIGNED_OUT_TOOLTIP,
-      )}
-      signOutText={translateBuilder(BUILDER.USER_SWITCH_SIGN_OUT_BUTTON)}
-      // switchMemberText={translateBuilder(BUILDER.USER_SWITCH_SWITCH_USER_TEXT)}
       profilePath={MEMBER_PROFILE_PATH}
       redirectPath={redirectUrl.toString()}
       buttonId={HEADER_MEMBER_MENU_BUTTON_ID}