Merge pull request #327 from captableinc/docs/viewer

feat: implement office document viewer

.gitignore

@@ -4,7 +4,11 @@
 /node_modules
 /.pnp
 .pnp.js
+
+# lockfiles
 bun.lockb
+package-lock.json
+yarn.lock
 
 # testing
 /coverage

src/components/common/file-icon.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { fileType } from "@/lib/mime";
 
 import {
   RiFileCloudFill,
@@ -16,54 +17,52 @@ type FileIconProps = {
 };
 
 const FileIcon = ({ type }: FileIconProps) => {
-  switch (true) {
-    case type.includes("image"):
+  const _type = fileType(type);
+
+  switch (_type) {
+    case "image":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-pink-100">
           <RiFileImageFill className="h-5 w-5 text-pink-500" />
         </div>
       );
 
-    case type.includes("audio"):
+    case "audio":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-indigo-100">
           <RiFileMusicFill className="h-5 w-5 text-indigo-500" />
         </div>
       );
 
-    case type.includes("video"):
+    case "video":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-rose-100">
           <RiFileVideoFill className="h-5 w-5 text-rose-500" />
         </div>
       );
 
-    case type.includes("powerpoint") || type.includes("presentation"):
+    case "powerpoint":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-orange-100">
           <RiFilePptFill className="h-5 w-5 text-orange-500" />
         </div>
       );
 
-    case type.includes("rtf"):
-    case type.includes("doc"):
-    case type.includes("word"):
+    case "doc":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-blue-100">
           <RiFileWordFill className="h-5 w-5 text-blue-500" />
         </div>
       );
 
-    case type.includes("csv"):
-    case type.includes("excel"):
-    case type.includes("sheet"):
+    case "excel":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-emerald-100">
           <RiFileExcelFill className="h-5 w-5 text-emerald-500" />
         </div>
       );
 
-    case type.includes("pdf"):
+    case "pdf":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-red-100">
           <RiFilePdf2Fill className="h-5 w-5 text-red-500" />

src/components/file/office-viewer.tsx

@@ -0,0 +1,16 @@
+type OfficeViewerProps = {
+  url: string;
+};
+
+const OfficeViewer = ({ url }: OfficeViewerProps) => {
+  return (
+    <iframe
+      src={`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
+        url,
+      )}`}
+      className="w-full h-full min-h-screen"
+    />
+  );
+};
+
+export { OfficeViewer };

src/components/file/preview.tsx

@@ -1,6 +1,8 @@
 import EmptyState from "@/components/common/empty-state";
+import { OfficeViewer } from "@/components/file/office-viewer";
 import { Button } from "@/components/ui/button";
 import { PdfViewer } from "@/components/ui/pdf-viewer";
+import { fileType } from "@/lib/mime";
 import { RiFileUnknowFill as UnknownFileIcon } from "@remixicon/react";
 
 type FilePreviewProps = {
@@ -34,7 +36,7 @@ const VideoPreview = ({ url, name, mimeType }: FilePreviewProps) => {
 const UnknownPreview = ({ url, name, mimeType }: FilePreviewProps) => {
   return (
     <EmptyState
-      title="File type not supported"
+      title="Preview not available"
       subtitle={`This file type - ${mimeType} is not yet supported by the previewer. You can download the file by clicking the button below.`}
       icon={<UnknownFileIcon />}
     >
@@ -47,16 +49,21 @@ const UnknownPreview = ({ url, name, mimeType }: FilePreviewProps) => {
 
 const FilePreview = ({ url, name, mimeType }: FilePreviewProps) => {
   mimeType = mimeType || "";
+  const type = fileType(mimeType);
 
-  switch (true) {
-    case mimeType.includes("pdf"):
+  switch (type) {
+    case "pdf":
       return <PdfViewer file={url} />;
-    case mimeType.startsWith("image"):
+    case "image":
       return <ImagePreview url={url} name={name} />;
-    case mimeType.startsWith("audio"):
+    case "audio":
       return <AuditPreview url={url} name={name} mimeType={mimeType} />;
-    case mimeType.startsWith("video"):
+    case "video":
       return <VideoPreview url={url} name={name} mimeType={mimeType} />;
+    case "doc":
+    case "excel":
+    case "powerpoint":
+      return <OfficeViewer url={url} />;
     default:
       return <UnknownPreview url={url} name={name} mimeType={mimeType} />;
   }

src/lib/mime.ts

@@ -0,0 +1,29 @@
+type FileProps = {
+  mimeType: string;
+};
+
+const fileType = (mimeType: string) => {
+  switch (true) {
+    case mimeType.includes("pdf"):
+      return "pdf";
+    case mimeType.includes("image"):
+      return "image";
+    case mimeType.includes("audio"):
+      return "audio";
+    case mimeType.includes("video"):
+      return "video";
+    case mimeType.includes("powerpoint") || mimeType.includes("presentation"):
+      return "powerpoint";
+    case mimeType.includes("csv") ||
+      mimeType.includes("excel") ||
+      mimeType.includes("sheet"):
+      return "excel";
+    case mimeType.includes("doc"):
+    case mimeType.includes("word"):
+      return "doc";
+    default:
+      return "unknown";
+  }
+};
+
+export { fileType };