fix: make package ESM

cypress/fixtures/members.ts

@@ -7,16 +7,17 @@ export const MEMBERS: { [key: string]: CompleteMember } = {
     email: '[email protected]',
     type: MemberType.Individual,
     extra: {},
-    createdAt: "2023-12-11T23:00:45.456Z",
-    updatedAt: "2023-12-11T23:00:45.456Z"
+    createdAt: '2023-12-11T23:00:45.456Z',
+    updatedAt: '2023-12-11T23:00:45.456Z',
   },
   BOB: {
     id: '1f0a2774-a965-4b97-afb4-bccc3796e060',
     name: 'bob',
-    email: '[email protected]',    type: MemberType.Individual,
+    email: '[email protected]',
+    type: MemberType.Individual,
     extra: {},
-    createdAt: "2023-12-11T23:00:45.456Z",
-    updatedAt: "2023-12-11T23:00:45.456Z"
+    createdAt: '2023-12-11T23:00:45.456Z',
+    updatedAt: '2023-12-11T23:00:45.456Z',
   },
 };
 

package.json

@@ -13,7 +13,6 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -23,7 +22,8 @@
     }
   },
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:vite": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "type-check": "tsc --noEmit",
     "check": "yarn prettier:check && yarn lint && yarn type-check",
@@ -39,11 +39,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@graasp/sdk": "^3.7.0",
+    "@graasp/sdk": "github:graasp/graasp-sdk#esm-package",
     "@graasp/translations": "^1.23.0",
-    "@graasp/ui": "^4.6.1",
-    "@mui/icons-material": "^5.15.9",
-    "@mui/material": "^5.15.9",
+    "@graasp/ui": "^4.8.1",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.10",
     "cypress": "^13.6.4",
     "date-fns": "^3.3.1",
     "lodash.groupby": "^4.6.0",
@@ -63,23 +63,24 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.truncate": "^4.4.9",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.19",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-mentions": "^4.1.13",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "i18next": "23.7.20",
+    "i18next": "23.8.2",
     "prettier": "^3.2.5",
     "rollup-plugin-visualizer": "^5.12.0",
     "stylis-plugin-rtl": "^2.1.1",
+    "tsc-alias": "^1.8.8",
     "typescript": "^5.3.3",
-    "vite": "^5.1.0",
+    "vite": "^5.1.3",
     "vite-plugin-dts": "^3.7.2"
   },
   "peerDependencies": {

src/components/Chatbox/Chatbox.tsx

@@ -4,21 +4,20 @@ import { StyledEngineProvider, styled } from '@mui/material';
 
 import { ChatMessage, CompleteMember, Member } from '@graasp/sdk';
 
-import { CONTAINER_HEIGHT_SAFETY_MARGIN } from '@/constants';
-import { CurrentMemberContextProvider } from '@/context/CurrentMemberContext';
-import { EditingContextProvider } from '@/context/EditingContext';
-import { HooksContextProvider } from '@/context/HooksContext';
-import { MessagesContextProvider } from '@/context/MessagesContext';
+import { CONTAINER_HEIGHT_SAFETY_MARGIN } from '@/constants.js';
+import { CurrentMemberContextProvider } from '@/context/CurrentMemberContext.js';
+import { EditingContextProvider } from '@/context/EditingContext.js';
+import { HooksContextProvider } from '@/context/HooksContext.js';
+import { MessagesContextProvider } from '@/context/MessagesContext.js';
 import {
   AvatarHookType,
   DeleteMessageFunctionType,
   EditMessageFunctionType,
   SendMessageFunctionType,
-} from '@/types';
+} from '@/types.js';
 
-import Header from './Header';
-import InputBar from './InputBar';
-import Messages from './Messages';
+import InputBar from './InputBar.js';
+import Messages from './Messages.js';
 
 const ChatboxContainer = styled('div')({
   // set height of full container
@@ -60,7 +59,6 @@ const Chatbox: FC<Props> = ({
   messages,
   isLoading,
   chatId,
-  showHeader = false,
   showAdminTools = false,
   currentMember,
   members,
@@ -80,7 +78,6 @@ const Chatbox: FC<Props> = ({
               messages={messages}
             >
               <>
-                {showHeader && <Header />}
                 <ChatboxContainer id={id}>
                   <Messages
                     currentMember={currentMember}

src/components/Chatbox/EditBanner.tsx

@@ -10,14 +10,14 @@ import {
 
 import { CHATBOX } from '@graasp/translations';
 
-import { useChatboxTranslation } from '@/config/i18n';
+import { useChatboxTranslation } from '@/config/i18n.js';
 import {
   editBannerCloseButtonCypress,
   editBannerCypress,
   editBannerOldTextCypress,
-} from '@/config/selectors';
-import { useEditingContext } from '@/context/EditingContext';
-import { normalizeMentions } from '@/index';
+} from '@/config/selectors.js';
+import { useEditingContext } from '@/context/EditingContext.js';
+import { normalizeMentions } from '@/index.js';
 
 const Container = styled(Box)({
   display: 'flex',

src/components/Chatbox/Input.tsx

@@ -7,28 +7,28 @@ import {
   SuggestionDataItem,
 } from 'react-mentions';
 
-import SendIcon from '@mui/icons-material/Send';
+import { Send as SendIcon } from '@mui/icons-material';
 import { Box, IconButton, Typography, styled, useTheme } from '@mui/material';
 
 import { MessageBodyType } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';
 
-import { useChatboxTranslation } from '@/config/i18n';
+import { useChatboxTranslation } from '@/config/i18n.js';
 import {
   charCounterCypress,
   inputTextFieldCypress,
   inputTextFieldTextAreaCypress,
   sendButtonCypress,
-} from '@/config/selectors';
+} from '@/config/selectors.js';
 import {
   ALL_MEMBERS_ID,
   ALL_MEMBERS_SUGGESTION,
   GRAASP_MENTION_COLOR,
   HARD_MAX_MESSAGE_LENGTH,
-} from '@/constants';
-import { useCurrentMemberContext } from '@/context/CurrentMemberContext';
-import { useMessagesContext } from '@/context/MessagesContext';
-import { MENTION_MARKUP } from '@/utils/mentions';
+} from '@/constants.js';
+import { useCurrentMemberContext } from '@/context/CurrentMemberContext.js';
+import { useMessagesContext } from '@/context/MessagesContext.js';
+import { MENTION_MARKUP } from '@/utils/mentions.js';
 
 const HelperText = styled(Typography)(({ theme }) => ({
   whiteSpace: 'pre',

src/components/Chatbox/InputBar.tsx

@@ -4,12 +4,12 @@ import { Box } from '@mui/material';
 
 import { MessageBodyType } from '@graasp/sdk';
 
-import { useEditingContext } from '@/context/EditingContext';
-import { useMessagesContext } from '@/context/MessagesContext';
-import { EditMessageFunctionType, SendMessageFunctionType } from '@/types';
+import { useEditingContext } from '@/context/EditingContext.js';
+import { useMessagesContext } from '@/context/MessagesContext.js';
+import { EditMessageFunctionType, SendMessageFunctionType } from '@/types.js';
 
-import EditBanner from './EditBanner';
-import Input from './Input';
+import EditBanner from './EditBanner.js';
+import Input from './Input.js';
 
 type Props = {
   sendMessageBoxId?: string;

src/components/Chatbox/Message.tsx

@@ -1,7 +1,5 @@
-import { FC } from 'react';
-
 import { Box, Typography, styled } from '@mui/material';
-import grey from '@mui/material/colors/grey';
+import { colors } from '@mui/material';
 
 import { ChatMessage, CompleteMember, Member } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';
@@ -10,19 +8,19 @@ import { Avatar } from '@graasp/ui';
 import { format } from 'date-fns';
 import truncate from 'lodash.truncate';
 
-import { getDateLocale, useChatboxTranslation } from '@/config/i18n';
-import { messageIdCyWrapper } from '@/config/selectors';
+import { getDateLocale, useChatboxTranslation } from '@/config/i18n.js';
+import { messageIdCyWrapper } from '@/config/selectors.js';
 import {
   DEFAULT_USER_NAME,
   MAX_AVATAR_SIZE,
   MAX_USERNAME_LENGTH,
-} from '@/constants';
-import { useHooksContext } from '@/context/HooksContext';
+} from '@/constants.js';
+import { useHooksContext } from '@/context/HooksContext.js';
 
-import MessageBody from './MessageBody';
+import MessageBody from './MessageBody.js';
 
 const MessageWrapper = styled(Box)(({ theme }) => ({
-  background: grey[100],
+  background: colors.grey[100],
   borderRadius: '5px',
   margin: theme.spacing(1, 0),
   padding: theme.spacing(0.5, 1, 0),
@@ -51,7 +49,7 @@ type Props = {
   member?: Member;
 };
 
-const Message: FC<Props> = ({ message, currentMember, member }) => {
+const Message = ({ message, currentMember, member }: Props): JSX.Element => {
   const { t, i18n } = useChatboxTranslation();
   const { useAvatarUrl } = useHooksContext();
   const {
@@ -76,7 +74,7 @@ const Message: FC<Props> = ({ message, currentMember, member }) => {
       p={1}
       sx={
         isOwnMessage
-          ? { background: grey[300], alignSelf: 'flex-end' }
+          ? { background: colors.grey[300], alignSelf: 'flex-end' }
           : undefined
       }
       data-cy={messageIdCyWrapper(message.id)}

src/components/Chatbox/MessageActions.tsx

@@ -1,8 +1,6 @@
-import React, { FC, useState } from 'react';
+import { MouseEvent, useState } from 'react';
 
-import Delete from '@mui/icons-material/Delete';
-import Edit from '@mui/icons-material/Edit';
-import MoreVert from '@mui/icons-material/MoreVert';
+import { Delete, Edit, MoreVert } from '@mui/icons-material';
 import {
   IconButton,
   ListItemIcon,
@@ -15,15 +13,15 @@ import {
 import { ChatMessage } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';
 
-import { useChatboxTranslation } from '@/config/i18n';
+import { useChatboxTranslation } from '@/config/i18n.js';
 import {
   deleteMenuItemCypress,
   editMenuItemCypress,
   messageActionsButtonCypress,
-} from '@/config/selectors';
-import { LIST_ICON_MIN_WIDTH } from '@/constants';
-import { useEditingContext } from '@/context/EditingContext';
-import { DeleteMessageFunctionType } from '@/types';
+} from '@/config/selectors.js';
+import { LIST_ICON_MIN_WIDTH } from '@/constants.js';
+import { useEditingContext } from '@/context/EditingContext.js';
+import { DeleteMessageFunctionType } from '@/types.js';
 
 type Props = {
   message: ChatMessage;
@@ -38,17 +36,17 @@ const StyledListItemIcon = styled(ListItemIcon)({
   },
 });
 
-const MessageActions: FC<Props> = ({
+const MessageActions = ({
   message,
   deleteMessageFunction,
   isOwn = false,
-}) => {
+}: Props): JSX.Element => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
   const { t } = useChatboxTranslation();
   const { enableEdit } = useEditingContext();
 
-  const handleOnClickMenu = (e: React.MouseEvent<HTMLButtonElement>): void => {
+  const handleOnClickMenu = (e: MouseEvent<HTMLButtonElement>): void => {
     setMenuAnchor(e.currentTarget);
     setMenuOpen(!menuOpen);
   };

src/components/Chatbox/MessageBody.tsx

@@ -1,4 +1,3 @@
-import { FC, ReactElement } from 'react';
 import ReactMarkdown, { ExtraProps } from 'react-markdown';
 
 import { styled } from '@mui/material';
@@ -11,10 +10,10 @@ import {
   ALL_MEMBERS_ID,
   ALL_MEMBERS_MEMBER,
   UNKNOWN_USER_NAME,
-} from '@/constants';
-import { useCurrentMemberContext } from '@/context/CurrentMemberContext';
-import { useMessagesContext } from '@/context/MessagesContext';
-import { getIdMention, getMention } from '@/utils/mentions';
+} from '@/constants.js';
+import { useCurrentMemberContext } from '@/context/CurrentMemberContext.js';
+import { useMessagesContext } from '@/context/MessagesContext.js';
+import { getIdMention, getMention } from '@/utils/mentions.js';
 
 const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
@@ -84,7 +83,7 @@ type Props = {
   messageBody: string;
 };
 
-const MessageBody: FC<Props> = ({ messageBody }) => {
+const MessageBody = ({ messageBody }: Props): JSX.Element => {
   const currentMember = useCurrentMemberContext();
   const { members } = useMessagesContext();
 
@@ -127,7 +126,7 @@ const MessageBody: FC<Props> = ({ messageBody }) => {
         language={match[1] as Language}
         {...props}
       >
-        {({ className, tokens, getLineProps, getTokenProps }): ReactElement => (
+        {({ className, tokens, getLineProps, getTokenProps }): JSX.Element => (
           <div className={className}>
             {tokens.map((line, i) => (
               <div