Render file upload

core/app/c/[communitySlug]/pubs/[pubId]/page.tsx

@@ -1,25 +1,29 @@
-import { PubField, PubFieldSchema, PubValue, Prisma } from "@prisma/client";
+import { Prisma, PubField, PubFieldSchema, PubValue } from "@prisma/client";
 import { AnySchema, JSONSchemaType } from "ajv";
 import Link from "next/link";
 import {
-	Button,
 	Avatar,
 	AvatarFallback,
 	AvatarImage,
-	Card,
-	CardTitle,
+	Button,
 	CardContent,
 	CardHeader,
+	CardTitle,
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
 	Separator,
 } from "ui";
+
 import IntegrationActions from "~/app/components/IntegrationActions";
 import { PubTitle } from "~/app/components/PubTitle";
 import { getLoginData } from "~/lib/auth/loginData";
+import cn from "~/lib/cn";
+import { FileUpload } from "~/lib/fields/fileUpload";
 import { getPubUsers } from "~/lib/permissions";
 import { createToken } from "~/lib/server/token";
 import { pubInclude } from "~/lib/types";
 import prisma from "~/prisma/db";
-import cn from "~/lib/cn";
 
 const getPub = async (pubId: string) => {
 	return await prisma.pub.findUnique({
@@ -37,8 +41,43 @@ interface PubValueWithFieldAndSchema extends PubValue {
 	field: PubFieldWithValue;
 }
 
+function FileUploadPreview({ files }: { files: FileUpload }) {
+	return (
+		<ul>
+			{files.map((file) => {
+				return (
+					<li key={file.fileName}>
+						<HoverCard>
+							<HoverCardTrigger asChild>
+								<Button variant="link">{file.fileName}</Button>
+							</HoverCardTrigger>
+							<HoverCardContent className=" w-auto m-auto space-y-1">
+								<h4 className="text-sm font-semibold">
+									{file.fileName} <br />
+								</h4>
+								<p className="text-sm pb-2">
+									The file is <strong>{file.fileSize}</strong> bytes in size. Its
+									MIME type is <strong>{file.fileType}</strong>.
+								</p>
+								<Button variant="secondary">
+									<a target="_blank" href={file.fileUploadUrl}>
+										Open file in new tab
+									</a>
+								</Button>
+							</HoverCardContent>
+						</HoverCard>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}
+
 function recursivelyGetScalarFields(schema: JSONSchemaType<AnySchema>, value: Prisma.JsonValue) {
 	const fields: any[] = [];
+	if (schema.$id === "pubpub:fileUpload") {
+		return <FileUploadPreview files={value as FileUpload} />;
+	}
 	// TODO: get schema IDs and render specific stuff -- e.g. file upload, confidence intervals
 	if (!schema.properties) {
 		switch (schema.type) {

core/lib/fields/fileUpload.ts

@@ -0,0 +1,47 @@
+import { JSONSchemaType } from "ajv";
+
+export type FileUploadFile = {
+	fileName: string;
+	fileSource: string;
+	fileType: string;
+	fileSize: number;
+	fileMeta: object;
+	fileUploadUrl: string;
+	filePreview: string;
+};
+export type FileUpload = FileUploadFile[];
+
+export const FileUpload = {
+	$id: "pubpub:fileUpload",
+	title: "Upload Files",
+	type: "array",
+	items: {
+		type: "object",
+		properties: {
+			fileName: {
+				type: "string",
+			},
+			fileSource: {
+				type: "string",
+			},
+			fileType: {
+				type: "string",
+			},
+			fileSize: {
+				type: "number",
+			},
+			fileMeta: {
+				type: "object",
+			},
+			fileUploadUrl: {
+				type: "string",
+				format: "uri",
+			},
+			filePreview: {
+				type: "string",
+				format: "uri",
+			},
+		},
+	},
+} as unknown as JSONSchemaType<FileUpload>;
+

core/prisma/exampleCommunitySeeds/unjournal.ts

@@ -1,6 +1,7 @@
 import { PrismaClient } from "@prisma/client";
 import { v4 as uuidv4 } from "uuid";
 import { faker } from "@faker-js/faker";
+import { FileUpload } from "../../lib/fields/fileUpload";
 
 export const unJournalId = "03e7a5fd-bdca-4682-9221-3a69992c1f3b";
 
@@ -258,39 +259,7 @@ export default async function main(prisma: PrismaClient, communityUUID: string)
 		data: {
 			name: "uploadFile",
 			namespace: "pubpub",
-			schema: {
-				$id: "pubpub:fileUpload",
-				title: "Upload Files",
-				type: "array",
-				items: {
-					type: "object",
-					properties: {
-						fileName: {
-							type: "string",
-						},
-						fileSource: {
-							type: "string",
-						},
-						fileType: {
-							type: "string",
-						},
-						fileSize: {
-							type: "number",
-						},
-						fileMeta: {
-							type: "object",
-						},
-						fileUploadUrl: {
-							type: "string",
-							format: "uri",
-						},
-						filePreview: {
-							type: "string",
-							format: "uri",
-						},
-					},
-				},
-			},
+			schema: FileUpload,
 		},
 	});
 

integrations/evaluations/app/actions/evaluate/evaluate.tsx

@@ -8,7 +8,6 @@ import { fullFormats } from "ajv-formats/dist/formats";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { Button, Form, Icon, useLocalStorage, useToast } from "ui";
-import { cn } from "utils";
 import { Process } from "~/lib/components/Process";
 import { Research } from "~/lib/components/Research";
 import { InstanceConfig } from "~/lib/types";

packages/ui/package.json

@@ -18,6 +18,7 @@
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dialog": "^1.0.4",
 		"@radix-ui/react-dropdown-menu": "^2.0.5",
+		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-label": "^2.0.2",
 		"@radix-ui/react-popover": "^1.0.6",

packages/ui/src/customRenderers/fileUpload/fileUpload.tsx

@@ -9,7 +9,6 @@ import { Dashboard } from "@uppy/react";
 import "@uppy/core/dist/style.min.css";
 import "@uppy/dashboard/dist/style.min.css";
 
-import { cn } from "utils";
 import AwsS3 from "@uppy/aws-s3";
 
 const uppy = new Uppy().use(AwsS3);
@@ -19,15 +18,6 @@ type FileUploadProps = {
 	onUpdateFiles: Function;
 };
 
-type UploadedFile = {
-	fileName: String;
-	fileSource?: String;
-	fileType?: String;
-	fileSize?: Number;
-	fileMeta?: Object;
-	filePreview?: String;
-	fileUploadUrl: String;
-};
 const FileUpload = forwardRef(function FileUpload(props: FileUploadProps, ref) {
 	useEffect(() => {
 		uppy.on("complete", () => {

packages/ui/src/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+	React.ElementRef<typeof HoverCardPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className
+		)}
+		{...props}
+	/>
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

packages/ui/src/index.tsx

@@ -13,6 +13,7 @@ export * from "./checkbox";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./form";
+export * from "./hover-card";
 export * from "./input";
 export * from "./label";
 export * from "./popover";