work on imports

package.json

@@ -132,6 +132,7 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@tanstack/router-plugin": "1.95.1",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",

src/locales/en/map.json

@@ -20,5 +20,6 @@
   "Select a country": "Select a country",
   "VIEW_ITEM_BUILDER_TOOLTIP": "View item in Graasp Builder",
   "VIEW_ITEM_PLAYER_TOOLTIP": "View item in Graasp Player",
-  "FUNCTIONALITIES_REDUCED_FOR_LOGGED_OUT_MESSAGE": "Some functionalities are disabled for logged out users."
+  "FUNCTIONALITIES_REDUCED_FOR_LOGGED_OUT_MESSAGE": "Some functionalities are disabled for logged out users.",
+  "Add a new item at this location": "Add a new item at this location"
 }

src/modules/builder/components/main/NotificationButton.tsx

@@ -1,4 +1,5 @@
-// import { MentionButton } from '@graasp/chatbox';
+import { MentionButton } from '@graasp/chatbox';
+
 import { hooks, mutations } from '@/config/queryClient';
 
 export function NotificationButton(): JSX.Element | null {
@@ -27,13 +28,13 @@ export function NotificationButton(): JSX.Element | null {
   const clearAllMentionsFunction = () => clearAllMentionsMutate();
 
   return (
-    // <MentionButton
-    //   color="white"
-    //   badgeColor="primary"
-    //   useMentions={hooks.useMentions}
-    //   patchMentionFunction={patchMentionFunction}
-    //   deleteMentionFunction={deleteMentionFunction}
-    //   clearAllMentionsFunction={clearAllMentionsFunction}
-    // />
+    <MentionButton
+      color="white"
+      badgeColor="primary"
+      useMentions={hooks.useMentions}
+      patchMentionFunction={patchMentionFunction}
+      deleteMentionFunction={deleteMentionFunction}
+      clearAllMentionsFunction={clearAllMentionsFunction}
+    />
   );
 }

src/modules/builder/map/components/GeolocationPicker/GeolocationPicker.stories.tsx

@@ -1,12 +1,11 @@
 import { TextField } from '@mui/material';
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { BoundFunctions } from '@testing-library/dom';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { queries } from '@testing-library/dom';
 
-import { MOCK_USE_SUGGESTIONS } from '../../../.storybook/fixtures';
+import { MOCK_USE_SUGGESTIONS } from '../../fixture';
 import GeolocationPicker from './GeolocationPicker';
 
 const meta = {
@@ -79,8 +78,8 @@ export const Background = {
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByLabelText('Geolocation')).toHaveTextContent(
-      args.initialValue!,
+    expect(canvas.getByLabelText('Geolocation')).toHaveTextContent(
+      'initial value',
     );
 
     await checkSuggestions(canvas);

src/modules/builder/map/components/Map.stories.tsx

@@ -7,21 +7,9 @@ import {
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
+import { MOCK_USE_SUGGESTIONS } from '../fixture';
 import MapComponent from './Map';
 
-const MOCK_USE_SUGGESTIONS = ({ address }: { address: string }) => {
-  if (address) {
-    return {
-      data: [
-        { addressLabel: 'suggestion 1' },
-        { addressLabel: 'suggestion 2' },
-        { addressLabel: 'suggestion 3' },
-      ],
-    };
-  }
-  return { data: undefined };
-};
-
 const meta = {
   title: 'Map',
   component: MapComponent,

src/modules/builder/map/fixture.ts

@@ -0,0 +1,12 @@
+export const MOCK_USE_SUGGESTIONS = ({ address }: { address: string }) => {
+  if (address) {
+    return {
+      data: [
+        { addressLabel: 'suggestion 1' },
+        { addressLabel: 'suggestion 2' },
+        { addressLabel: 'suggestion 3' },
+      ],
+    };
+  }
+  return { data: undefined };
+};

src/ui/Authorization/PreventGuestWrapper.stories.tsx

@@ -1,9 +1,9 @@
+import { AccountType, CompleteGuest, CompleteMember } from '@graasp/sdk';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
 
-import { AccountType, CompleteGuest, CompleteMember } from '@graasp/sdk';
-
-import BuildIcon from '@/icons/BuildIcon.js';
+import BuildIcon from '@/ui/icons/BuildIcon.js';
 
 import PreventGuestWrapper from './PreventGuestWrapper.js';
 
@@ -17,7 +17,7 @@ const meta = {
     errorText: 'An error occured.',
     text: 'You are currently using Graasp with a guest account. In order to use all features of Graasp, you have to log out and create a Graasp account.',
     children: (
-      <div data-testid='content'>
+      <div data-testid="content">
         <BuildIcon />
         <BuildIcon />
         <BuildIcon />

src/ui/Authorization/Redirect.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
 
-import { BrowserRouter } from 'react-router-dom';
-
 import SignedInWrapper from './SignedInWrapper.js';
 
 // this story is separated from the others
@@ -19,15 +17,10 @@ const meta: Meta<typeof SignedInWrapper> = {
     },
   },
   render: () => (
-    <SignedInWrapper redirectionLink=''>
+    <SignedInWrapper redirectionLink="">
       <div />
     </SignedInWrapper>
   ),
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 };
 export default meta;
 

src/ui/Authorization/SignedInWrapper.stories.tsx

@@ -1,9 +1,9 @@
+import { CompleteMember } from '@graasp/sdk';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
 
-import { CompleteMember } from '@graasp/sdk';
-
-import BuildIcon from '@/icons/BuildIcon.js';
+import BuildIcon from '@/ui/icons/BuildIcon.js';
 
 import SignedInWrapper from './SignedInWrapper.js';
 
@@ -19,7 +19,7 @@ const meta: Meta<typeof SignedInWrapper> = {
   args: {
     redirectionLink,
     children: (
-      <div data-testid='content'>
+      <div data-testid="content">
         <BuildIcon />
         <BuildIcon />
         <BuildIcon />

src/ui/Card/Card.stories.tsx

@@ -1,11 +1,9 @@
+import { Box, IconButton, Stack } from '@mui/material';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Grip, Snowflake } from 'lucide-react';
 
-import { Box, IconButton, Stack } from '@mui/material';
-
-import { BrowserRouter } from 'react-router-dom';
-
 import ItemBadges from '../ItemBadges/ItemBadges.js';
 import { TABLE_CATEGORIES } from '../utils/storybook.js';
 import Card from './Card.js';
@@ -40,10 +38,10 @@ export const Example: Story = {
     creator: 'graasp',
     footer: (
       <Stack
-        width='100%'
-        alignItems='end'
-        direction='row'
-        justifyContent='space-between'
+        width="100%"
+        alignItems="end"
+        direction="row"
+        justifyContent="space-between"
       >
         <Box>
           <IconButton>
@@ -93,11 +91,6 @@ export const Dense: Story = {
       </IconButton>
     ),
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 } satisfies Story;
 
 export const FullWidth = {
@@ -116,10 +109,10 @@ export const FullWidth = {
 
     footer: (
       <Stack
-        width='100%'
-        alignItems='center'
-        direction='row'
-        justifyContent='space-between'
+        width="100%"
+        alignItems="center"
+        direction="row"
+        justifyContent="space-between"
       >
         <ItemBadges isHidden isPublic isPublished isPinned />
         <Box>
@@ -168,10 +161,10 @@ export const TallCard: Story = {
     height: 300,
     footer: (
       <Stack
-        width='100%'
-        alignItems='center'
-        direction='row'
-        justifyContent='space-between'
+        width="100%"
+        alignItems="center"
+        direction="row"
+        justifyContent="space-between"
       >
         <ItemBadges isHidden isPublic isPublished isPinned />
         <Box>
@@ -206,11 +199,6 @@ export const DenseMobile: Story = {
     alt: 'graasp',
     footer: 'myfooter',
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 } satisfies Story;
 
 export const Selected: Story = {
@@ -227,9 +215,4 @@ export const Selected: Story = {
     className: 'class-card',
     onThumbnailClick: fn(),
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
 } satisfies Story;

src/ui/Card/Cards.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj, composeStories } from '@storybook/react';
-import { v4 } from 'uuid';
-
 import { Grid2 as Grid } from '@mui/material';
 
 import { PackedFolderItemFactory } from '@graasp/sdk';
 
-import ItemBadges from '@/ItemBadges/ItemBadges.js';
+import { Meta, StoryObj, composeStories } from '@storybook/react';
+import { v4 } from 'uuid';
+
+import ItemBadges from '@/ui/ItemBadges/ItemBadges.js';
 
 import * as CardStories from './Card.stories.js';
 

src/ui/Card/FolderCard.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj, composeStories } from '@storybook/react';
 
-import { BrowserRouter } from 'react-router-dom';
-
 import TextDisplay from '../TextDisplay/TextDisplay.js';
 import * as TextDisplayStories from '../TextDisplay/TextDisplay.stories.js';
 import FolderCard from './FolderCard.js';
@@ -19,11 +17,6 @@ const meta = {
       },
     },
   },
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
   args: {
     name: 'Example folder',
     description: 'Optional description',
@@ -55,7 +48,7 @@ export const LongHtmlDescription = {
   args: {
     thumbnail: undefined,
     description: (
-      <TextDisplay content='<p>Hello wefh uwhf uqhw hqwkjehr jkqwher jkqwhej khqwefhj hwkjefh jwhef jahwefj khawjkf hawjkf hajkwefh ajk hajkhf wkej </p><p>World</p>' />
+      <TextDisplay content="<p>Hello wefh uwhf uqhw hqwkjehr jkqwher jkqwhej khqwefhj hwkjefh jwhef jahwefj khawjkf hawjkf hajkwefh ajk hajkhf wkej </p><p>World</p>" />
     ),
   },
 } satisfies Story;

src/ui/Card/FolderCard.tsx

@@ -1,5 +1,3 @@
-import { ChevronRight } from 'lucide-react';
-
 import {
   Card,
   CardActionArea,
@@ -8,10 +6,11 @@ import {
   useTheme,
 } from '@mui/material';
 
-import { Link, LinkProps } from 'react-router-dom';
-
 import { ItemType } from '@graasp/sdk';
 
+import { Link } from '@tanstack/react-router';
+import { ChevronRight } from 'lucide-react';
+
 import CardThumbnail from './CardThumbnail.js';
 
 // FIX: use the same constant
@@ -22,10 +21,7 @@ type Props = {
   name: string;
   description?: string | null | JSX.Element;
   thumbnail?: string;
-  /**
-   * React Router Link target
-   */
-  to: LinkProps['to'];
+  to: string;
 };
 const FolderCard = ({
   id,
@@ -49,7 +45,7 @@ const FolderCard = ({
       }}
     >
       <CardActionArea component={Link} to={to} sx={{ height: '100%' }}>
-        <Stack direction='row' alignItems='center' height='100%' minWidth={0}>
+        <Stack direction="row" alignItems="center" height="100%" minWidth={0}>
           <CardThumbnail
             width={CARD_HEIGHT}
             minHeight={CARD_HEIGHT}

src/ui/Card/LinkCard.stories.tsx

@@ -1,17 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { BrowserRouter } from 'react-router-dom';
-
 import FancyLink from './LinkCard.js';
 
 const meta = {
   title: 'Card/Link',
   component: FancyLink,
-  decorators: [
-    (story) => {
-      return <BrowserRouter>{story()}</BrowserRouter>;
-    },
-  ],
   args: {
     title: 'Default link name',
     url: 'https://graasp.org',