fix: update with new UI (#508)

* fix: update deps

* fix: use TextDisplay instead of readOnly TextEditor

* fix: module resolution issue that made importing sub packages impossible

* fix: update UI

.prettierrc → .prettierrc.json

@@ -6,6 +6,7 @@
  "bracketSpacing": true,
  "arrowParens": "always",
  "importOrder": [
+ ".*\\.css$",
  "^react",
  "^@?mui",
  "^@?graasp",

package.json

@@ -36,23 +36,26 @@
  "@emotion/react": "11.11.3",
  "@emotion/styled": "11.11.0",
  "@graasp/chatbox": "3.0.3",
- "@graasp/query-client": "2.5.0",
- "@graasp/sdk": "3.6.0",
+ "@graasp/query-client": "2.6.0",
+ "@graasp/sdk": "3.7.0",
  "@graasp/translations": "1.23.0",
- "@graasp/ui": "4.6.1",
- "@mui/icons-material": "5.15.7",
+ "@graasp/ui": "4.7.0",
+ "@mui/icons-material": "5.15.9",
  "@mui/lab": "5.0.0-alpha.151",
- "@mui/material": "5.15.7",
- "@sentry/react": "7.99.0",
+ "@mui/material": "5.15.9",
+ "@sentry/react": "7.100.1",
  "classnames": "2.5.1",
+ "date-fns": "3.3.1",
  "i18next": "23.7.16",
+ "katex": "0.16.9",
  "lodash.truncate": "4.4.2",
  "react": "18.2.0",
  "react-accessible-treeview": "2.8.3",
  "react-dom": "18.2.0",
  "react-ga4": "2.1.0",
  "react-i18next": "13.5.0",
- "react-intersection-observer": "9.6.0",
+ "react-intersection-observer": "9.8.0",
+ "react-quill": "2.0.0",
  "react-router": "6.22.0",
  "react-router-dom": "6.22.0",
  "react-toastify": "10.0.4",
@@ -62,12 +65,13 @@
  },
  "devDependencies": {
  "@commitlint/config-conventional": "18.6.0",
- "@cypress/code-coverage": "3.12.19",
+ "@cypress/code-coverage": "3.12.21",
  "@trivago/prettier-plugin-sort-imports": "4.3.0",
+ "@types/katex": "^0.16.7",
  "@types/lodash.truncate": "^4.4.9",
- "@types/node": "^20.11.16",
- "@types/react": "18.2.51",
- "@types/react-dom": "^18.2.18",
+ "@types/node": "^20.11.17",
+ "@types/react": "18.2.55",
+ "@types/react-dom": "^18.2.19",
  "@types/uuid": "9.0.8",
  "@typescript-eslint/eslint-plugin": "6.21.0",
  "@typescript-eslint/parser": "6.21.0",
@@ -88,10 +92,10 @@
  "eslint-plugin-react-hooks": "4.6.0",
  "http-status-codes": "2.3.0",
  "husky": "9.0.10",
- "prettier": "3.2.4",
+ "prettier": "3.2.5",
  "rollup-plugin-visualizer": "5.12.0",
  "typescript": "^5.3.3",
- "vite": "^5.0.12",
+ "vite": "^5.1.1",
  "vite-plugin-checker": "^0.6.4",
  "vite-plugin-istanbul": "5.0.0"
  },

src/Root.tsx

@@ -1,3 +1,7 @@
+import 'katex/dist/katex.min.css';
+import 'react-quill/dist/quill.snow.css';
+import 'react-toastify/dist/ReactToastify.css';
+
 import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';

src/main.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import ReactGA from 'react-ga4';
 
 import { hasAcceptedCookies } from '@graasp/sdk';
-import '@graasp/ui/dist/bundle.css';
 
 import * as Sentry from '@sentry/react';
 

src/modules/item/Item.tsx

@@ -24,15 +24,15 @@ import { FAILURE_MESSAGES } from '@graasp/translations';
 import {
  AppItem,
  Button,
- DocumentItem,
  EtherpadItem,
  FileItem,
  H5PItem,
  ItemSkeleton,
  LinkItem,
- TextEditor,
+ TextDisplay,
  withCollapse,
 } from '@graasp/ui';
+import { DocumentItem } from '@graasp/ui/text-editor';
 
 import {
  DEFAULT_RESIZABLE_SETTING,
@@ -392,7 +392,7 @@ const Item = ({
  data: children = [],
  isLoading: isChildrenLoading,
  isError: isChildrenError,
- } = useChildren(id, {
+ } = useChildren(id, undefined, {
  enabled: isFolder,
  getUpdates: isFolder,
  });
@@ -461,7 +461,7 @@ const Item = ({
  <Typography className={FOLDER_NAME_TITLE_CLASS} variant="h5">
  {item.name}
  </Typography>
- <TextEditor value={item.description ?? undefined} />
+ <TextDisplay content={item.description ?? ''} />
 
  {childrenPaginated?.pages.map((page) => (
  <Fragment key={page.pageNumber}>

tsconfig.json

@@ -4,18 +4,23 @@
  "useDefineForClassFields": true,
  "lib": ["DOM", "DOM.Iterable", "ESNext", "ES2021.String"],
  "allowJs": false,
+ "module": "ESNext",
  "skipLibCheck": true,
+
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "strict": true,
- "strictNullChecks": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
+
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noEmit": true,
  "jsx": "react-jsx",
+
+ "strictNullChecks": true,
+ "forceConsistentCasingInFileNames": true,
+
  "types": ["vite/client"],
  "baseUrl": "./src",
  "paths": {

vite.config.ts

@@ -1,8 +1,7 @@
 /// <reference types="./src/env"/>
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
-import { visualizer } from 'rollup-plugin-visualizer';
-import { PluginOption, UserConfigExport, defineConfig, loadEnv } from 'vite';
+import { UserConfigExport, defineConfig, loadEnv } from 'vite';
 import checker from 'vite-plugin-checker';
 import istanbul from 'vite-plugin-istanbul';
 
@@ -46,25 +45,11 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
  forceBuildInstrument: mode === 'test',
  checkProd: true,
  }),
- ...(mode === 'dev'
- ? [
- visualizer({
- template: 'treemap', // or sunburst
- open: true,
- gzipSize: true,
- brotliSize: true,
- filename: 'analice.html',
- }) as PluginOption,
- ]
- : []),
  ],
  resolve: {
  alias: {
  '@': resolve(__dirname, 'src'),
  },
  },
- define: {
- 'process.env.REACT_APP_GRAASP_ASSETS_URL': `"${process.env.VITE_GRAASP_ASSETS_URL}"`,
- },
  });
 };