feat: add document styles in Player (#203)

* feat: bump @graasp dependencies * chore: fix eslint config for React default props in TS functional components
graasp · Mar 6, 2023 · 944f158 · 944f158
1 parent 967addc
commit 944f158
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 79 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,7 +7,12 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
-  "plugins": ["import", "jsx-a11y", "react", "@typescript-eslint"],
+  "plugins": [
+    "import",
+    "jsx-a11y",
+    "react",
+    "@typescript-eslint"
+  ],
   "env": {
     "browser": true,
     "node": true,
@@ -20,28 +25,40 @@
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-      "ecmaFeatures": {
-          "jsx": true
-      },
-      "ecmaVersion": "latest",
-      "sourceType": "module"
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
   "rules": {
-    "react/function-component-definition":[2, { "namedComponents": "arrow-function" }],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function"
+      }
+    ],
     "import/extensions": "off",
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     // note you must disable the base rule as it can report incorrect errors
     "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"],
+    "@typescript-eslint/no-use-before-define": [
+      "error"
+    ],
     // remove when possible
     "@typescript-eslint/no-explicit-any": "off",
     // disable the rule for all files
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/jsx-filename-extension": [
       1,
       {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
       }
     ],
     "import/no-named-as-default": 0,
@@ -57,38 +74,78 @@
         "propTypes": "static public field"
       }
     ],
-    "react/state-in-constructor": ["error", "never"],
-    "no-console": [1, { "allow": ["error"] }],
+    "react/state-in-constructor": [
+      "error",
+      "never"
+    ],
+    "no-console": [
+      1,
+      {
+        "allow": [
+          "error"
+        ]
+      }
+    ],
     "no-restricted-syntax": "off"
   },
   "overrides": [
     {
       // enable the rule specifically for TypeScript files
-      "files": ["*.ts", "*.tsx"],
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
       "rules": {
-        "@typescript-eslint/explicit-module-boundary-types": ["error"]
+        "@typescript-eslint/explicit-module-boundary-types": [
+          "error"
+        ],
+        "react/require-default-props": [
+          2,
+          {
+            "functions": "defaultArguments"
+          }
+        ],
       }
     },
     {
       // enable the rule specifically for src files
-      "files": ["src/**/*.js", "src/**/*.tsx", "src/**/*.ts"],
+      "files": [
+        "src/**/*.js",
+        "src/**/*.tsx",
+        "src/**/*.ts"
+      ],
       "rules": {
-        "no-restricted-syntax": ["error"]
+        "no-restricted-syntax": [
+          "error"
+        ]
       }
     }
   ],
   "settings": {
-    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/extensions": [
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx"
+    ],
     "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
     },
     "import/resolver": {
       "typescript": {
-          "alwaysTryTypes": true
+        "alwaysTryTypes": true
       },
       "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
       }
     }
   }
-}
+}
diff --git a/cypress/e2e/main.cy.js b/cypress/e2e/main.cy.js
@@ -1,30 +1,29 @@
 import { buildMainPath } from '../../src/config/paths';
 import {
-  BUILDER_EDIT_BUTTON_ID,
   FOLDER_NAME_TITLE_CLASS,
-  MAIN_MENU_ID,
+  MAIN_MENU_ID
 } from '../../src/config/selectors';
 import { GRAASP_APP_ITEM } from '../fixtures/apps';
 import { GRAASP_DOCUMENT_ITEM } from '../fixtures/documents';
 import {
   IMAGE_ITEM_DEFAULT,
   PDF_ITEM_DEFAULT,
-  VIDEO_ITEM_DEFAULT,
+  VIDEO_ITEM_DEFAULT
 } from '../fixtures/files';
 import { FOLDER_WITH_SUBFOLDER_ITEM } from '../fixtures/items';
 import { GRAASP_LINK_ITEM, YOUTUBE_LINK_ITEM } from '../fixtures/links';
 import { MEMBERS } from '../fixtures/members';
 import {
   PUBLIC_STATIC_ELECTRICITY,
-  STATIC_ELECTRICITY,
+  STATIC_ELECTRICITY
 } from '../fixtures/useCases/staticElectricity';
 import {
   expectAppViewScreenLayout,
   expectDocumentViewScreenLayout,
   expectFileViewScreenLayout,
   expectFolderButtonLayout,
   expectFolderLayout,
-  expectLinkViewScreenLayout,
+  expectLinkViewScreenLayout
 } from '../support/integrationUtils';
 
 describe('Main Screen', () => {

diff --git a/package.json b/package.json
@@ -14,9 +14,9 @@
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
     "@graasp/chatbox": "1.0.3",
-    "@graasp/query-client": "0.2.1",
-    "@graasp/sdk": "0.4.1",
-    "@graasp/ui": "0.11.2",
+    "@graasp/query-client": "0.3.0",
+    "@graasp/sdk": "0.6.0",
+    "@graasp/ui": "2.0.0",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.119",
     "@mui/material": "5.11.8",

diff --git a/src/components/main/HeaderNavigation.tsx b/src/components/main/HeaderNavigation.tsx
@@ -35,13 +35,13 @@ const StyledLink = styled(Link)(() => ({
 }));
 
 interface HeaderNavigationProps {
-  rootId: string;
-  topItemName: string;
+  rootId?: string;
+  topItemName?: string;
 }
 
 export const HeaderNavigation = ({
-  rootId,
-  topItemName,
+  rootId = undefined, // this makes eslint happy with react/require-default-props
+  topItemName = '',
 }: HeaderNavigationProps): JSX.Element => {
   const getNavigationEvents = usePlatformNavigation(platformsHostsMap, rootId);
 

diff --git a/src/components/main/ItemForbiddenScreen.tsx b/src/components/main/ItemForbiddenScreen.tsx
@@ -1,35 +1,16 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
 
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import BlockIcon from '@mui/icons-material/Block';
-import { Grid, IconButton, Typography, styled } from '@mui/material';
+import { Grid, IconButton, Typography } from '@mui/material';
 
-import { Context } from '@graasp/sdk';
-import { Button, GraaspLogo, Main, Navigation } from '@graasp/ui';
+import { Button, Main } from '@graasp/ui';
 
-import {
-  APP_NAME,
-  GRAASP_LOGO_HEADER_HEIGHT,
-  HOST_MAP,
-} from '../../config/constants';
-import { HOME_PATH } from '../../config/paths';
 import UserSwitchWrapper from '../common/UserSwitchWrapper';
+import HeaderNavigation from './HeaderNavigation';
 import HeaderRightContent from './HeaderRightContent';
 
-const StyledLink = styled(Link)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  textDecoration: 'none',
-  color: 'inherit',
-}));
-
-const LeftContentWrapper = styled('div')(({ theme }) => ({
-  display: 'flex',
-  marginLeft: theme.spacing(1),
-}));
-
 const ItemForbiddenScreen: FC = () => {
   const { t } = useTranslation();
 
@@ -39,22 +20,10 @@ const ItemForbiddenScreen: FC = () => {
     </Button>
   );
 
-  const leftContent = (
-    <LeftContentWrapper>
-      <StyledLink to={HOME_PATH}>
-        <GraaspLogo height={GRAASP_LOGO_HEADER_HEIGHT} sx={{ fill: 'white' }} />
-        <Typography variant="h6" color="inherit" mr={2} ml={1}>
-          {APP_NAME}
-        </Typography>
-      </StyledLink>
-      <Navigation hostMap={HOST_MAP} currentValue={Context.PLAYER} />
-    </LeftContentWrapper>
-  );
-
   return (
     <Main
       open={false}
-      headerLeftContent={leftContent}
+      headerLeftContent={<HeaderNavigation />}
       headerRightContent={<HeaderRightContent />}
     >
       <Grid

diff --git a/yarn.lock b/yarn.lock
@@ -2341,9 +2341,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@npm:0.2.1":
-  version: 0.2.1
-  resolution: "@graasp/query-client@npm:0.2.1"
+"@graasp/query-client@npm:0.3.0":
+  version: 0.3.0
+  resolution: "@graasp/query-client@npm:0.3.0"
   dependencies:
     "@graasp/sdk": 0.4.1
     "@graasp/translations": 1.4.0
@@ -2356,7 +2356,7 @@ __metadata:
     uuid: 9.0.0
   peerDependencies:
     react: ^17.0.0
-  checksum: 63337026c3fe71d9a772cc5a9f2144fc523fa1682db29bb3718fb096e1a8dd9945ae32eef900a129baa32979ca5c89d9457956bf95552d06977e4f1ecd0505a2
+  checksum: 6d52a706f7b6418e4c67d4ca0835107c27b113d54fe090503694d6908f6ee1d48dd25fc00eac3d6d4436f14aa30f460ea1e9e300fd0e0a68398214bbaca00eef
   languageName: node
   linkType: hard
 
@@ -2394,6 +2394,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/sdk@npm:0.6.0":
+  version: 0.6.0
+  resolution: "@graasp/sdk@npm:0.6.0"
+  dependencies:
+    "@fastify/secure-session": 5.3.0
+    aws-sdk: 2.1310.0
+    fastify: 3.29.5
+    fluent-json-schema: 3.1.0
+    immutable: 4.2.4
+    js-cookie: 3.0.1
+    qs: 6.11.0
+    slonik: 28.1.1
+    uuid: 9.0.0
+  checksum: 450ec10d93b2139ea21728b6ce633e6947092707b1caa66055a0a251607b0c2b28ed03d3c9baa1864e930a460289927209256aef7509e7b8ff4973d17703a2ba
+  languageName: node
+  linkType: hard
+
 "@graasp/translations@npm:1.4.0":
   version: 1.4.0
   resolution: "@graasp/translations@npm:1.4.0"
@@ -2442,11 +2459,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:0.11.2":
-  version: 0.11.2
-  resolution: "@graasp/ui@npm:0.11.2"
+"@graasp/ui@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@graasp/ui@npm:2.0.0"
   dependencies:
-    "@graasp/sdk": 0.4.1
+    "@graasp/sdk": 0.6.0
     clsx: 1.1.1
     http-status-codes: 2.2.0
     immutable: 4.2.4
@@ -2477,7 +2494,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: f0732062e011dcd45c28657eb36aeb7fdcca80cf73835f9b759c998b195ec6fe26b0e7b942dde6a090e3dd93edbd974dbc6a050a6db06d8ecd557754c2fa3ade
+  checksum: 0bfd67465c0b572732329e8d4b493f5113d8dfb4a5a51ec5a5b541f11f8425b2dd38032c5f54eccf798f400998a9effb8ed5a0526c2dd0fc6a6d31e26c87a42c
   languageName: node
   linkType: hard
 
@@ -9641,9 +9658,9 @@ __metadata:
     "@emotion/react": 11.10.5
     "@emotion/styled": 11.10.5
     "@graasp/chatbox": 1.0.3
-    "@graasp/query-client": 0.2.1
-    "@graasp/sdk": 0.4.1
-    "@graasp/ui": 0.11.2
+    "@graasp/query-client": 0.3.0
+    "@graasp/sdk": 0.6.0
+    "@graasp/ui": 2.0.0
     "@graasp/websockets": "github:graasp/graasp-plugin-websockets"
     "@mui/icons-material": 5.11.0
     "@mui/lab": 5.0.0-alpha.119