feat: simple tour

package.json

@@ -13,15 +13,15 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.0",
-    "@graasp/query-client": "1.1.3",
-    "@graasp/sdk": "1.1.1",
+    "@graasp/query-client": "1.1.5",
+    "@graasp/sdk": "1.1.2",
     "@graasp/translations": "1.15.0",
-    "@graasp/ui": "3.2.1",
+    "@graasp/ui": "3.2.3",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.135",
     "@mui/material": "5.13.7",
-    "@sentry/react": "7.57.0",
-    "@sentry/tracing": "7.57.0",
+    "@sentry/react": "7.58.1",
+    "@sentry/tracing": "7.58.1",
     "@uppy/core": "3.3.1",
     "@uppy/dashboard": "3.4.2",
     "@uppy/drag-drop": "3.0.2",
@@ -51,6 +51,7 @@
     "react-ga4": "2.1.0",
     "react-i18next": "11.18.6",
     "react-image-crop": "9.1.1",
+    "react-joyride": "2.5.4",
     "react-query": "3.39.3",
     "react-quill": "2.0.0",
     "react-router": "6.13.0",
@@ -97,7 +98,7 @@
   "devDependencies": {
     "@commitlint/cli": "17.6.6",
     "@commitlint/config-conventional": "17.6.6",
-    "@cypress/code-coverage": "3.10.7",
+    "@cypress/code-coverage": "3.11.0",
     "@cypress/instrument-cra": "1.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -114,16 +115,16 @@
     "@types/react-dom": "^17.0.20",
     "@types/uuid": "9.0.2",
     "@types/validator": "13.7.17",
-    "@typescript-eslint/eslint-plugin": "^5.5.0",
-    "@typescript-eslint/parser": "^5.5.0",
-    "concurrently": "8.1.0",
-    "cypress": "12.13.0",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "concurrently": "8.2.0",
+    "cypress": "12.17.1",
     "cypress-localstorage-commands": "2.2.3",
     "env-cmd": "10.1.0",
-    "eslint": "^8.32.0",
+    "eslint": "8.45.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.8.0",
-    "eslint-config-react-app": "^7.0.1",
+    "eslint-config-react-app": "7.0.1",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
@@ -133,7 +134,7 @@
     "nyc": "15.1.0",
     "prettier": "2.8.8",
     "react-app-rewired": "2.2.1",
-    "typescript": "5.0.4",
+    "typescript": "5.1.6",
     "wait-on": "7.0.1",
     "webpack-bundle-analyzer": "4.9.0"
   },

src/components/common/CancelButton.tsx

@@ -10,12 +10,13 @@ import { useCommonTranslation } from '../../config/i18n';
 type Props = {
   onClick: MouseEventHandler<HTMLButtonElement>;
   color?: ButtonProps['color'];
+  id?: string;
 };
 
-const CancelButton = ({ onClick, color }: Props): JSX.Element => {
+const CancelButton = ({ onClick, color, id }: Props): JSX.Element => {
   const { t: translateCommon } = useCommonTranslation();
   return (
-    <Button onClick={onClick} variant="text" color={color}>
+    <Button onClick={onClick} variant="text" color={color} id={id}>
       {translateCommon(COMMON.CANCEL_BUTTON)}
     </Button>
   );

src/components/guidedTour/StarterTour.tsx

@@ -0,0 +1,84 @@
+import {
+  AutoStories,
+  Delete,
+  Folder,
+  FolderShared,
+  Star,
+} from '@mui/icons-material';
+import { Typography } from '@mui/material';
+
+import { Step } from 'react-joyride';
+
+import { BuildIcon } from '@graasp/ui';
+
+import {
+  TOUR_NAVIGATION_SIDEBAR_CLOSE_BUTTON_ID,
+  TOUR_NAVIGATION_SIDEBAR_ID,
+  TOUR_TUTORIALS_LINK_ID,
+} from '../../config/selectors';
+
+const iconInTextStyle = {
+  width: 20,
+  height: 20,
+  marginBottom: '-4px',
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const steps: Step[] = [
+  {
+    target: 'body',
+    placement: 'center',
+    content: 'Welcome',
+    locale: { skip: 'Skip' },
+  },
+  {
+    content: (
+      <Typography>
+        This is the <BuildIcon sx={iconInTextStyle} /> Builder, it allows you to{' '}
+        <strong>create</strong> content and <strong>build</strong> interactive
+        capsules.
+      </Typography>
+    ),
+    target: 'body',
+  },
+  {
+    content: (
+      <Typography align="left">
+        This is the navigation bar, you can use it to go to:
+        <ul>
+          <li>
+            <Folder sx={iconInTextStyle} /> <strong>My Graasp</strong>: Your own
+            items
+          </li>
+          <li>
+            <FolderShared sx={iconInTextStyle} /> <strong>Shared Items</strong>:
+            Items shared with you
+          </li>
+          <li>
+            <Star sx={iconInTextStyle} /> <strong>Favorite Items</strong>: Your
+            favorite items
+          </li>
+          <li>
+            <Delete sx={iconInTextStyle} /> <strong>Trash</strong>: Items you
+            deleted
+          </li>
+        </ul>
+      </Typography>
+    ),
+    target: `#${TOUR_NAVIGATION_SIDEBAR_ID}`,
+  },
+  {
+    content: (
+      <Typography>
+        If you need help, here are some <AutoStories sx={iconInTextStyle} />{' '}
+        Tutorials to get you started !
+      </Typography>
+    ),
+    target: `#${TOUR_TUTORIALS_LINK_ID}`,
+  },
+  {
+    content:
+      'With this button, you can close the side bar to free some screen space.',
+    target: `#${TOUR_NAVIGATION_SIDEBAR_CLOSE_BUTTON_ID}`,
+  },
+];

src/components/item/FolderDescription.tsx

@@ -41,7 +41,7 @@ const FolderDescription = ({
 
   return (
     <TextEditor
-      value={parentItem?.description}
+      value={parentItem?.description ?? ''}
       edit={isEditing}
       placeholderText={translateBuilder(
         BUILDER.EDIT_FOLDER_DESCRIPTION_PLACEHOLDER,

src/components/item/form/FolderForm.tsx

@@ -37,7 +37,7 @@ const FolderForm = ({
       <Box sx={{ mt: 2 }}>
         <TextEditor
           id={FOLDER_FORM_DESCRIPTION_ID}
-          value={updatedProperties?.description || item?.description}
+          value={(updatedProperties?.description || item?.description) ?? ''}
           edit
           onChange={onCaptionChange}
           showActions={false}

src/components/main/Home.tsx

@@ -19,6 +19,10 @@ const Home = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { data: ownItems, isLoading, isError, isSuccess } = hooks.useOwnItems();
 
+  if (isError) {
+    return <ErrorAlert id={HOME_ERROR_ALERT_ID} />;
+  }
+
   if (isLoading) {
     return <Loader />;
   }

src/components/main/ItemTypeTabs.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-wrap-multilines */
 import { Tab, Tabs, styled } from '@mui/material';
 
 import { useState } from 'react';

src/components/main/Main.tsx

@@ -1,6 +1,7 @@
 import { Grid, Typography, styled } from '@mui/material';
 import Box from '@mui/material/Box';
 
+import Joyride from 'react-joyride';
 import { Link, useParams } from 'react-router-dom';
 
 import { Context } from '@graasp/sdk';
@@ -23,10 +24,12 @@ import {
   APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS,
   APP_NAVIGATION_PLATFORM_SWITCH_ID,
   HEADER_APP_BAR_ID,
+  TOUR_NAVIGATION_SIDEBAR_CLOSE_BUTTON_ID,
 } from '../../config/selectors';
 import CookiesBanner from '../common/CookiesBanner';
 import UserSwitchWrapper from '../common/UserSwitchWrapper';
 import { useLayoutContext } from '../context/LayoutContext';
+import { steps } from '../guidedTour/StarterTour';
 import MainMenu from './MainMenu';
 import NotificationButton from './NotificationButton';
 
@@ -109,7 +112,18 @@ const Main = ({ children }: Props): JSX.Element => {
       headerRightContent={rightContent}
       sidebar={<MainMenu />}
       open={isMainMenuOpen}
+      menuButtonId={TOUR_NAVIGATION_SIDEBAR_CLOSE_BUTTON_ID}
     >
+      <Joyride
+        continuous
+        run
+        styles={{ options: { zIndex: 10000 } }}
+        scrollToFirstStep
+        showProgress
+        hideCloseButton
+        showSkipButton
+        steps={steps}
+      />
       <CookiesBanner />
       {children}
     </GraaspMain>

src/components/main/MainMenu.tsx

@@ -1,9 +1,10 @@
+import { AutoAwesome } from '@mui/icons-material';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import DeleteIcon from '@mui/icons-material/Delete';
 import FolderIcon from '@mui/icons-material/Folder';
 import FolderSharedIcon from '@mui/icons-material/FolderShared';
 import Star from '@mui/icons-material/Star';
-import { styled } from '@mui/material';
+import { ListItemButton, Stack, styled } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 
 import { useLocation, useNavigate } from 'react-router';
@@ -19,11 +20,15 @@ import {
   RECYCLE_BIN_PATH,
   SHARED_ITEMS_PATH,
 } from '../../config/paths';
+import {
+  TOUR_NAVIGATION_SIDEBAR_ID,
+  TOUR_TUTORIALS_LINK_ID,
+} from '../../config/selectors';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
 
 const StyledLink = styled('a')(({ theme }) => ({
-  position: 'absolute',
-  bottom: 0,
+  // position: 'absolute',
+  // bottom: 0,
   width: '100%',
   display: 'flex',
   alignItems: 'center',
@@ -52,14 +57,32 @@ const MainMenu = (): JSX.Element => {
   };
 
   const resourcesLink = (
-    <StyledLink href={TUTORIALS_LINK} target="_blank">
+    <StyledLink
+      id={TOUR_TUTORIALS_LINK_ID}
+      href={TUTORIALS_LINK}
+      target="_blank"
+    >
       <ListItemIcon>
         <AutoStoriesIcon />
       </ListItemIcon>
       {translateBuilder('Tutorials')}
     </StyledLink>
   );
 
+  const tourButton = (
+    <ListItemButton
+      sx={{
+        color: 'grey',
+        '&:hover': { color: 'purple' },
+      }}
+    >
+      <ListItemIcon sx={{ color: 'inherit' }}>
+        <AutoAwesome />
+      </ListItemIcon>
+      {translateBuilder('Show me around')}
+    </ListItemButton>
+  );
+
   const renderAuthenticatedMemberMenuItems = () => {
     if (!member || !member.id) {
       return (
@@ -72,7 +95,7 @@ const MainMenu = (): JSX.Element => {
     }
 
     return (
-      <>
+      <div id={TOUR_NAVIGATION_SIDEBAR_ID}>
         <MenuItem
           onClick={() => goTo(HOME_PATH)}
           selected={pathname === HOME_PATH}
@@ -85,6 +108,7 @@ const MainMenu = (): JSX.Element => {
           icon={<FolderSharedIcon />}
           selected={pathname === SHARED_ITEMS_PATH}
         />
+
         <MenuItem
           onClick={() => goTo(FAVORITE_ITEMS_PATH)}
           selected={pathname === FAVORITE_ITEMS_PATH}
@@ -97,14 +121,19 @@ const MainMenu = (): JSX.Element => {
           text={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
           icon={<DeleteIcon />}
         />
-      </>
+      </div>
     );
   };
 
   return (
     <GraaspMainMenu fullHeight>
-      {renderAuthenticatedMemberMenuItems()}
-      {resourcesLink}
+      <Stack direction="column" height="100%" justifyContent="space-between">
+        {renderAuthenticatedMemberMenuItems()}
+        <div>
+          {tourButton}
+          {resourcesLink}
+        </div>
+      </Stack>
     </GraaspMainMenu>
   );
 };