feat: create document viewer component

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import 'katex/dist/katex.min.css';
 
 import { CssBaseline } from '@mui/material';
-import { ThemeProvider } from '@mui/system';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
 
 import * as React from 'react';
 import 'react-quill/dist/quill.snow.css';
@@ -50,7 +50,7 @@ export const globalTypes = {
     },
   },
 };
-const theme = buildTheme()
+const theme = buildTheme();
 export const decorators = [
   (Story, { globals }) => {
     return (

package.json

@@ -79,6 +79,7 @@
     "@ag-grid-community/client-side-row-model": "31.3.2",
     "@ag-grid-community/react": "^31.3.2",
     "@ag-grid-community/styles": "^31.3.2",
+    "@cyntler/react-doc-viewer": "1.16.6",
     "@storybook/react-vite": "8.1.11",
     "http-status-codes": "2.3.0",
     "interweave": "13.1.0",
@@ -97,7 +98,7 @@
     "@emotion/cache": "~11.10.7 || ~11.11.0 || ~11.13.0",
     "@emotion/react": "~11.10.6 || ~11.11.0 || ~11.13.0",
     "@emotion/styled": "~11.10.6 || ~11.11.0 || ~11.13.0",
-    "@graasp/sdk": "^4.14.0",
+    "@graasp/sdk": "*",
     "@graasp/translations": "^1.23.0",
     "@mui/icons-material": "~5.14.0 || ~5.15.0 || ~5.16.0",
     "@mui/lab": "~5.0.0-alpha.150",
@@ -116,7 +117,7 @@
     "@emotion/cache": "~11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@graasp/sdk": "4.22.0",
+    "@graasp/sdk": "https://github.com/graasp/graasp-sdk.git#616-docs-mimetypes",
     "@mui/icons-material": "5.16.0",
     "@mui/lab": "5.0.0-alpha.171",
     "@mui/material": "5.16.0",

src/items/Document.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import FileDocument from './FileDocument';
+
+const meta: Meta<typeof FileDocument> = {
+  title: 'Items/Document File',
+  component: FileDocument,
+
+  render: (args) => {
+    return <FileDocument {...args} />;
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FileDocument>;
+
+export const Document: Story = {
+  args: {
+    uri: 'https://www.lehman.edu/faculty/john/classroomrespolicy1.docx',
+  },
+};

src/items/FileDocument.tsx

@@ -0,0 +1,18 @@
+import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';
+import '@cyntler/react-doc-viewer/dist/index.css';
+
+type Props = {
+  uri: string;
+};
+const FileDocument = ({ uri }: Props): JSX.Element => {
+  const docs = [{ uri }];
+  return (
+    <DocViewer
+      documents={docs}
+      pluginRenderers={DocViewerRenderers}
+      prefetchMethod='GET'
+    />
+  );
+};
+
+export default FileDocument;

src/items/FileItem.tsx

@@ -18,6 +18,7 @@ import { SCREEN_MAX_HEIGHT, UNEXPECTED_ERROR_MESSAGE } from '../constants';
 import { ERRORS } from '../enums';
 import DownloadButtonFileItem from './DownloadButtonFileItem';
 import FileAudio from './FileAudio';
+import FileDocument from './FileDocument';
 import FileImage from './FileImage';
 import FilePdf from './FilePdf';
 import FileVideo from './FileVideo';
@@ -136,6 +137,23 @@ const FileItem = ({
             pdfViewerLink={pdfViewerLink}
           />
         );
+      } else if (
+        MimeTypes.isDocument(mimetype) ||
+        MimeTypes.isPresentation(mimetype) ||
+        MimeTypes.isSpreadsheet(mimetype)
+      ) {
+        return (
+          <Box height='100%' width='100%' id={id}>
+            <FileDocument uri={url} />
+            <DownloadButtonFileItem
+              id={id}
+              name={originalFileName ?? item.name}
+              url={url}
+              text={downloadText}
+              onClick={onClick}
+            />
+          </Box>
+        );
       }
     }
 

src/items/SizingWrapper.tsx

@@ -30,7 +30,7 @@ export const SizingWrapper = ({
 }): JSX.Element => {
   const width = getWidthFromSizing(size);
   return (
-    <Box maxWidth='100%' width={width}>
+    <Box maxWidth='100%' width={width} flex={1}>
       {children}
     </Box>
   );

src/items/withCaption.tsx

@@ -93,7 +93,13 @@ export const CaptionWrapper = <T extends WithCaptionItem>({
   const description = normalizeDescription(item.description);
 
   return (
-    <Stack direction={direction} gap={0.5} alignItems={alignItems} width='100%'>
+    <Stack
+      direction={direction}
+      gap={0.5}
+      alignItems={alignItems}
+      width='100%'
+      flex={1}
+    >
       {children}
       <TextDisplay content={description} />
     </Stack>