feat: use ts build

.prettierrc

@@ -6,8 +6,16 @@
   "bracketSpacing": true,
   "arrowParens": "always",
   "trailingComma": "all",
-  "importOrder": ["^@mui", "^react", "^@?graasp", "^[./]"],
+  "importOrder": [
+    "^@mui",
+    "^react",
+    "^@?graasp",
+    "^@/",
+    "^[./]"
+  ],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,
-  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports"
+  ]
 }

package.json

@@ -48,8 +48,7 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "tsc --noEmit -p tsconfig.build.json && vite build",
-    "build:ts": "tsc && tsc-alias",
+    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "prepack": "yarn build",
     "prepare": "yarn prepack && yarn hooks:install",
     "lint": "eslint src",
@@ -60,7 +59,7 @@
     "analyze-bundle": "npx vite-bundle-visualizer",
     "test": "yarn test:unit-ci && yarn test:sb",
     "test:sb": "yarn storybook:build && concurrently -k -s first -n \"SB, TEST\" -c \"magenta,blue\" \"yarn storybook:preview\" \"yarn storybook:test-ci\"",
-    "test:unit": "vitest",
+    "test:unit": "vitest --passWithNoTests",
     "test:unit-ci": "vitest run",
     "test:watch": "jest src --watchAll --env=jsdom",
     "hooks:uninstall": "husky uninstall",
@@ -76,15 +75,13 @@
     "storybook:test-ci": "wait-on http://127.0.0.1:6006 && yarn storybook:test"
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "31.3.2",
-    "@ag-grid-community/react": "^31.3.2",
-    "@ag-grid-community/styles": "^31.3.2",
-    "@storybook/react-vite": "8.1.11",
+    "@ag-grid-community/client-side-row-model": "31.3.4",
+    "@ag-grid-community/react": "^31.3.4",
+    "@ag-grid-community/styles": "^31.3.4",
+    "@storybook/react-vite": "8.2.6",
     "http-status-codes": "2.3.0",
     "interweave": "13.1.0",
-    "katex": "0.16.11",
     "lodash.truncate": "4.4.2",
-    "lucide-react": "0.408.0",
     "react-cookie-consent": "9.0.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
@@ -103,6 +100,8 @@
     "@mui/lab": "~5.0.0-alpha.150",
     "@mui/material": "~5.14.0 || ~5.15.0 || ~5.16.0",
     "i18next": "^22.4.15 || ^23.0.0",
+    "katex": "0.16.11",
+    "lucide-react": "^0.417.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-i18next": "^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -113,73 +112,76 @@
   "devDependencies": {
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
-    "@emotion/cache": "~11.11.0",
-    "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.5",
+    "@emotion/cache": "~11.13.1",
+    "@emotion/react": "11.13.0",
+    "@emotion/styled": "11.13.0",
     "@graasp/sdk": "4.22.0",
-    "@mui/icons-material": "5.16.0",
+    "@mui/icons-material": "5.16.5",
     "@mui/lab": "5.0.0-alpha.171",
-    "@mui/material": "5.16.0",
-    "@storybook/addon-a11y": "8.2.5",
-    "@storybook/addon-actions": "8.2.5",
+    "@mui/material": "5.16.5",
+    "@storybook/addon-a11y": "8.2.6",
+    "@storybook/addon-actions": "8.2.6",
     "@storybook/addon-coverage": "1.0.4",
-    "@storybook/addon-docs": "8.2.5",
-    "@storybook/addon-essentials": "8.2.5",
-    "@storybook/addon-interactions": "8.2.5",
-    "@storybook/addon-links": "8.2.5",
+    "@storybook/addon-docs": "8.2.6",
+    "@storybook/addon-essentials": "8.2.6",
+    "@storybook/addon-interactions": "8.2.6",
+    "@storybook/addon-links": "8.2.6",
     "@storybook/jest": "0.2.3",
-    "@storybook/react": "8.2.5",
+    "@storybook/react": "8.2.6",
     "@storybook/test-runner": "0.19.1",
     "@storybook/testing-library": "0.2.2",
     "@tanstack/react-query": "4.36.1",
-    "@testing-library/jest-dom": "6.4.7",
+    "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/jest": "29.5.12",
     "@types/katex": "^0.16.7",
     "@types/lodash.truncate": "4.4.9",
-    "@types/node": "20.14.11",
+    "@types/node": "20.14.13",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-router-dom": "5.3.3",
     "@types/react-text-mask": "5.4.14",
     "@types/stylis": "4.2.6",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "7.16.0",
-    "@typescript-eslint/parser": "7.16.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
     "@vitejs/plugin-react": "4.3.1",
     "concurrently": "8.2.2",
     "cross-env": "7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-n": "17.9.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-n": "17.10.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^6.6.0",
     "http-server": "14.1.1",
-    "husky": "9.0.11",
+    "husky": "9.1.4",
     "jest": "29.7.0",
     "jest-dom": "4.0.0",
     "jest-environment-jsdom": "29.7.0",
     "jsdom": "24.1.1",
+    "katex": "0.16.11",
+    "lucide-react": "0.417.0",
     "playwright": "1.45.3",
     "prettier": "3.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "15.0.0",
-    "react-router-dom": "6.24.1",
+    "react-router-dom": "6.25.1",
     "react-test-renderer": "18.3.1",
     "sass": "1.77.8",
-    "storybook": "8.2.5",
+    "storybook": "8.2.6",
     "stylis": "^4.3.2",
     "stylis-plugin-rtl": "^2.1.1",
     "ts-jest": "29.2.3",
     "ts-node": "10.9.2",
+    "tsc-alias": "1.8.10",
     "typescript": "5.5.4",
-    "vite": "5.3.4",
-    "vite-plugin-dts": "3.9.1",
+    "vite": "5.3.5",
+    "vite-plugin-dts": "4.0.0-beta.1",
     "vite-plugin-istanbul": "6.0.2",
     "wait-on": "7.2.0"
   },

src/Authorization/Redirect.stories.tsx

@@ -3,8 +3,8 @@ import { expect, within } from '@storybook/test';
 
 import { BrowserRouter } from 'react-router-dom';
 
-import { BuildIcon } from '../icons';
-import withAuthorization from './withAuthorization';
+import BuildIcon from '../icons/BuildIcon.js';
+import withAuthorization from './withAuthorization.js';
 
 const ComponentWithAuthorization = withAuthorization(BuildIcon, {
   // use an empty string because we do not want to be redirected but the prop is mandatory

src/Authorization/RedirectionContent.tsx

@@ -2,14 +2,14 @@ import { Container, Typography, styled, useTheme } from '@mui/material';
 
 import { Link, LinkProps } from 'react-router-dom';
 
-import GraaspLogo from '../GraaspLogo';
+import GraaspLogo from '../GraaspLogo/GraaspLogo.js';
 
-interface Props {
+type Props = {
   link: LinkProps['to'];
   id?: string;
   redirectionLinkText?: string;
   redirectionText?: string;
-}
+};
 
 const StyledContainer = styled(Container)(() => ({
   height: '100vh',

src/Authorization/withAuthorization.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { CompleteMember } from '@graasp/sdk';
 
-import { BuildIcon } from '../icons';
-import withAuthorization from './withAuthorization';
+import BuildIcon from '../icons/BuildIcon.js';
+import withAuthorization from './withAuthorization.js';
 
 const redirectionLink = 'http://redirect.org';
 

src/Authorization/withAuthorization.tsx

@@ -1,20 +1,20 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType } from 'react';
 
 import { CompleteMember, redirect } from '@graasp/sdk';
 
-import RedirectContent from './RedirectionContent';
+import RedirectionContent from './RedirectionContent.js';
 
-export interface WithAuthorizationProps {
+export type WithAuthorizationProps = {
   redirectionLink: string;
   currentMember?: CompleteMember | null;
   onRedirect?: () => void;
-}
+};
 
 const withAuthorization =
   <P extends object>(
     ChildComponent: ComponentType<P>,
     { currentMember, redirectionLink, onRedirect }: WithAuthorizationProps,
-  ): FC<P> =>
+  ): ((props: P) => JSX.Element) =>
   (childProps: P) => {
     const redirectToSignIn = (): void => {
       if (!redirectionLink) {
@@ -33,7 +33,7 @@ const withAuthorization =
     redirectToSignIn();
 
     // redirect page if redirection is not working
-    return <RedirectContent link={redirectionLink} />;
+    return <RedirectionContent link={redirectionLink} />;
   };
 
 export default withAuthorization;

src/Avatar/Avatar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TABLE_CATEGORIES } from '../utils/storybook';
-import Avatar from './Avatar';
+import { TABLE_CATEGORIES } from '../utils/storybook.js';
+import Avatar from './Avatar.js';
 
 const meta = {
   title: 'Images/Avatar',

src/Avatar/Avatar.tsx

@@ -5,7 +5,7 @@ import {
   SxProps,
 } from '@mui/material';
 
-import Thumbnail from '../Thumbnail';
+import Thumbnail from '../Thumbnail/Thumbnail.js';
 
 type AvatarProps = {
   alt: string;

src/Card/Card.stories.tsx

@@ -1,16 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
+import { Grip, Snowflake } from 'lucide-react';
 
-import AcUnitIcon from '@mui/icons-material/AcUnit';
-import GrainIcon from '@mui/icons-material/Grain';
-import { Box, Stack } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { Box, IconButton, Stack } from '@mui/material';
 
 import { BrowserRouter } from 'react-router-dom';
 
-import ItemBadges from '../ItemBadges/ItemBadges';
-import { TABLE_CATEGORIES } from '../utils/storybook';
-import Card from './Card';
+import ItemBadges from '../ItemBadges/ItemBadges.js';
+import { TABLE_CATEGORIES } from '../utils/storybook.js';
+import Card from './Card.js';
 
 const meta = {
   title: 'Common/Card',
@@ -49,17 +47,17 @@ export const Example: Story = {
       >
         <Box>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
         </Box>
         <IconButton>
-          <GrainIcon />
+          <Grip />
         </IconButton>
       </Stack>
     ),
@@ -79,19 +77,19 @@ export const Dense: Story = {
     footer: (
       <>
         <IconButton>
-          <AcUnitIcon />
+          <Snowflake />
         </IconButton>
         <IconButton>
-          <AcUnitIcon />
+          <Snowflake />
         </IconButton>
         <IconButton>
-          <AcUnitIcon />
+          <Snowflake />
         </IconButton>
       </>
     ),
     menu: (
       <IconButton>
-        <AcUnitIcon />
+        <Snowflake />
       </IconButton>
     ),
   },
@@ -126,13 +124,13 @@ export const FullWidth = {
         <ItemBadges isHidden isPublic isPublished isPinned />
         <Box>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
         </Box>
       </Stack>
@@ -178,13 +176,13 @@ export const TallCard: Story = {
         <ItemBadges isHidden isPublic isPublished isPinned />
         <Box>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
           <IconButton>
-            <AcUnitIcon />
+            <Snowflake />
           </IconButton>
         </Box>
       </Stack>

src/Card/Card.tsx

@@ -1,16 +1,21 @@
-import { PRIMARY_COLOR } from '@/theme';
-
-import { Box, Stack, SxProps, styled } from '@mui/material';
-import MuiCard from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import Typography from '@mui/material/Typography';
-import Grid2 from '@mui/material/Unstable_Grid2';
+import {
+  Box,
+  CardActions,
+  Card as MuiCard,
+  Stack,
+  SxProps,
+  Typography,
+  styled,
+} from '@mui/material';
+import { Unstable_Grid2 as Grid2 } from '@mui/material/';
 
 import { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
 
-import type { DraggableAndDroppableProps } from '../draggable/types';
-import CardThumbnail, { CardThumbnailProps } from './CardThumbnail';
+import { PRIMARY_COLOR } from '@/theme.js';
+
+import type { DraggableAndDroppableProps } from '../draggable/types.js';
+import CardThumbnail, { CardThumbnailProps } from './CardThumbnail.js';
 
 const DEFAULT_CARD_HEIGHT = 130;