@overmap-ai/forms 1.0.17-master.1 → 1.0.17-master.3

package/src/ImageMarkup/ImageMarkup.tsx

@@ -1,268 +0,0 @@
-import { ButtonGroup, IconButton, IconToggleButton, RiIcon, Separator, Spinner, useSize } from "@overmap-ai/blocks"
-import { CSSColor } from "@overmap-ai/core"
-import { Colors, DeferredPromise, downloadFile, fileToBlob, hashFile } from "@overmap-ai/core"
-import * as RadixDialog from "@radix-ui/react-dialog"
-import React, { memo, RefObject, useCallback, useEffect, useRef, useState } from "react"
-import { ReactSketchCanvas, ReactSketchCanvasRef } from "react-sketch-canvas"
-
-import { ColorPicker } from "../ColorPicker"
-
-type FileWithObjectURL = File & { objectURL?: string }
-export interface AttachmentMarkupProps {
-	file: FileWithObjectURL
-	onClose: () => void
-	onSave: (imageWithMarkup: FileWithObjectURL) => void
-	onDelete: (imageFile: FileWithObjectURL) => void
-	dirty: boolean
-	onDirty: (dirty: boolean) => void
-}
-
-const colors: CSSColor[] = Object.values(Colors)
-
-// 0-1 range, 1 is best quality.
-const COMPRESSION_QUALITY = 1
-
-async function combineImages(
-	canvas: HTMLCanvasElement,
-	image1: File,
-	image2: File,
-	finalSize: { width: number; height: number },
-): Promise<FileWithObjectURL> {
-	const context = canvas.getContext("2d", {} satisfies CanvasRenderingContext2DSettings)!
-	const imageObj1 = new Image(finalSize.width, finalSize.height)
-	const imageObj2 = new Image(finalSize.width, finalSize.height)
-	const ret = new DeferredPromise<FileWithObjectURL>()
-	// Add an onload handler to the image
-	imageObj1.onload = function () {
-		context.drawImage(imageObj1, 0, 0, finalSize.width, finalSize.height)
-		imageObj2.src = URL.createObjectURL(image2)
-		imageObj2.onload = async function () {
-			context.drawImage(imageObj2, 0, 0, finalSize.width, finalSize.height)
-			const combinedDataUrl = canvas.toDataURL("image/jpeg", COMPRESSION_QUALITY)
-			const asBlob = await fileToBlob(combinedDataUrl)
-			const asFile = new File([asBlob], image1.name, { type: "image/jpeg" })
-			ret.resolve(asFile as FileWithObjectURL)
-		}
-	}
-	// Load the image
-	imageObj1.src = URL.createObjectURL(image1)
-	return ret
-}
-
-// TODO: Make this similar to the Alert Dialog setup with a context
-export const ImageMarkup = memo((props: AttachmentMarkupProps) => {
-	const { file, onClose, onSave, onDelete, dirty, onDirty } = props
-	if (!file.objectURL) {
-		file.objectURL = URL.createObjectURL(file)
-	}
-	const canvasRef = useRef<ReactSketchCanvasRef>(null)
-	const imageCombinerRef = useRef<HTMLCanvasElement>(null)
-	const [color, setColor] = useState<CSSColor>(Colors.red!)
-	const [originalImageSize, setOriginalImageSize] = useState<{ width: number; height: number } | null>(null)
-	const [loading, setLoading] = useState(false)
-	const [reset, setReset] = useState(false)
-
-	// We'll be watching for resize events of the inner container, so we know what to animate the height to.
-	const watchResizeTarget = useRef<HTMLImageElement>(null)
-	const currentImageSize = useSize(watchResizeTarget as RefObject<HTMLImageElement>)
-
-	useEffect(() => {
-		const image = new Image()
-		image.onload = function () {
-			setOriginalImageSize({ width: image.naturalWidth, height: image.naturalHeight })
-		}
-		image.src = URL.createObjectURL(file)
-	}, [file])
-
-	useEffect(() => {
-		if (!reset && currentImageSize?.width && currentImageSize.height) {
-			setReset(true)
-		}
-	}, [currentImageSize, reset])
-
-	const saveMarkup = useCallback(async () => {
-		if (!dirty) onClose()
-
-		const currentCanvasRef = canvasRef.current
-		if (!currentCanvasRef) return
-
-		if (!originalImageSize) {
-			throw new Error("Original image size not loaded yet")
-		}
-
-		const markupDataUrl: string = await currentCanvasRef.exportImage("png")
-		const markupImage = new Image(originalImageSize.width, originalImageSize.height)
-
-		markupImage.onload = async function () {
-			const markupBlob: Blob = await fileToBlob(markupDataUrl)
-			const markupFile: File = new File([markupBlob], file.name, { type: file.type })
-			const canvas = imageCombinerRef.current!
-			const combinedFile = await combineImages(canvas, file, markupFile, originalImageSize)
-			combinedFile.objectURL = URL.createObjectURL(combinedFile)
-			const oldHash = await hashFile(file)
-			const newHash = await hashFile(combinedFile)
-			// If the markup didn't change the image, we don't need to save it. In fact, doing so results in an error.
-			if (newHash !== oldHash) {
-				onSave(combinedFile)
-			}
-			setLoading(false)
-			onClose()
-		}
-
-		setLoading(true)
-		// Initiates the loading of image process
-		markupImage.src = markupDataUrl
-	}, [dirty, file, onClose, onSave, originalImageSize])
-
-	const handleDelete = useCallback(() => {
-		onDelete(file)
-	}, [file, onDelete])
-
-	const handleCancel = useCallback(() => {
-		onClose()
-	}, [onClose])
-
-	const handleCanvasChange = useCallback(() => {
-		onDirty(true)
-	}, [onDirty])
-
-	const handleRedoLast = useCallback(() => {
-		if (!canvasRef.current) return
-		canvasRef.current.redo()
-	}, [])
-
-	const handleUndoLast = useCallback(() => {
-		if (!canvasRef.current) return
-		canvasRef.current.undo()
-	}, [])
-
-	const handleUndoAll = useCallback(() => {
-		if (!canvasRef.current) return
-		onDirty(false)
-		canvasRef.current.clearCanvas()
-	}, [onDirty])
-
-	const handleToggleEraseMode = useCallback((erasing: boolean) => {
-		if (!canvasRef.current) return
-		canvasRef.current.eraseMode(erasing)
-	}, [])
-
-	const handleSave = useCallback(() => {
-		void saveMarkup()
-	}, [saveMarkup])
-
-	const handleDownload: React.MouseEventHandler<HTMLButtonElement> = useCallback(() => {
-		downloadFile(file)
-	}, [file])
-
-	return (
-		<RadixDialog.Root open onOpenChange={onClose}>
-			<RadixDialog.Portal>
-				<RadixDialog.Overlay className="light:bg-(--black-a6) fixed inset-0 dark:bg-(--black-a8)" />
-				<RadixDialog.Content className="fixed inset-0">
-					<>
-						{/* Invisible canvas for combining background image and markup */}
-						{originalImageSize && (
-							<canvas
-								style={{ display: "none" }}
-								id="attachment-markup-canvas"
-								ref={imageCombinerRef}
-								width={originalImageSize.width}
-								height={originalImageSize.height}
-							/>
-						)}
-						<div className="relative flex h-full w-full flex-col">
-							<div className="flex h-8 w-full items-center bg-(--color-background) px-2">
-								<ButtonGroup accentColor="base" size="md" variant="soft">
-									<div className="grid w-full grid-cols-3">
-										<div className="flex gap-2">
-											<IconButton aria-label="close" onClick={handleCancel}>
-												<RiIcon icon="RiCloseLine" />
-											</IconButton>
-											<IconButton aria-label={`Download ${file.name}`} onClick={handleDownload}>
-												<RiIcon icon="RiDownload2Line" />
-											</IconButton>
-										</div>
-										<div className="flex items-center justify-center gap-2">
-											<ColorPicker
-												selectedColor={color}
-												allColors={colors}
-												onFinish={setColor}
-												trigger={
-													<IconButton
-														aria-label="Markup color picker"
-														type="button"
-														variant="solid"
-														style={{
-															backgroundColor: color,
-														}}
-													>
-														{" "}
-													</IconButton>
-												}
-											/>
-											<IconToggleButton
-												defaultPressed={false}
-												aria-label="erase"
-												onPressedChange={handleToggleEraseMode}
-											>
-												<RiIcon icon="RiEraserFill" />
-											</IconToggleButton>
-											<Separator orientation="vertical" size="full" />
-											<IconButton aria-label="undo" onClick={handleUndoLast}>
-												<RiIcon icon="RiArrowGoBackLine" />
-											</IconButton>
-											<IconButton aria-label="undo" onClick={handleRedoLast}>
-												<RiIcon icon="RiArrowGoForwardLine" />
-											</IconButton>
-											<IconButton aria-label="undo all" onClick={handleUndoAll}>
-												<RiIcon icon="RiLoopLeftLine" />
-											</IconButton>
-										</div>
-										<div className="flex justify-end gap-2">
-											<IconButton
-												aria-label="Save markup"
-												accentColor="primary"
-												onClick={handleSave}
-											>
-												<RiIcon icon="RiSaveLine" />
-											</IconButton>
-											<IconButton aria-label="Delete attachment" onClick={handleDelete}>
-												<RiIcon icon="RiDeleteBin2Line" />
-											</IconButton>
-										</div>
-									</div>
-								</ButtonGroup>
-							</div>
-							<div className="relative flex w-full grow items-center justify-center p-4">
-								{/**NOTE: Invisible. Its only purpose is for us to measure its size (which is automatically
-						      set for img tags */}
-								<img
-									className="translate-xmax-h-[calc(100%-130px)] pointer-events-none invisible absolute top-[50%] left-[50%] max-w-svw translate-x-[-50%] translate-y-[-50%] object-contain"
-									alt="Photo attachment"
-									ref={watchResizeTarget}
-									src={file.objectURL}
-								/>
-
-								{loading ? (
-									<Spinner />
-								) : (
-									<ReactSketchCanvas
-										key={reset ? "1" : "0"}
-										backgroundImage={file.objectURL}
-										ref={canvasRef}
-										width={`${currentImageSize?.width || 0}px`}
-										height={`${currentImageSize?.height || 0}px`}
-										onStroke={handleCanvasChange}
-										strokeColor={color}
-									/>
-								)}
-							</div>
-						</div>
-					</>
-				</RadixDialog.Content>
-			</RadixDialog.Portal>
-		</RadixDialog.Root>
-	)
-})
-ImageMarkup.displayName = "AttachmentEditor"

package/src/ImageMarkup/index.ts

@@ -1 +0,0 @@
-export * from "./ImageMarkup"

package/src/ImageViewer/ImageViewer.stories.tsx

@@ -1,57 +0,0 @@
-import { Button } from "@overmap-ai/blocks"
-import type { Meta } from "@storybook/react"
-import { ChangeEvent, useCallback, useRef, useState } from "react"
-
-import { ImageViewer } from "./ImageViewer"
-
-const meta = {
-	title: "Components/ImageViewer",
-	component: ImageViewer,
-	tags: ["autodocs"],
-	parameters: {
-		disablePanel: true,
-	},
-} satisfies Meta<typeof ImageViewer>
-
-export default meta
-// type Story = StoryObj<typeof meta>
-
-export const Basic = () => {
-	const inputRef = useRef<HTMLInputElement>(null)
-	const [file, setFile] = useState<File | null>(null)
-	const [open, setOpen] = useState(false)
-
-	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-		if (e.target.files) {
-			const files = Array.from(e.target.files)
-			if (files.length > 0) {
-				setFile(files[0] || null)
-			}
-		}
-	}, [])
-
-	console.log(file)
-	return (
-		<>
-			<input ref={inputRef} type="file" onChange={handleChange} />
-			<Button
-				onClick={() => {
-					setOpen(!open)
-				}}
-			>
-				open
-			</Button>
-			{file && open && (
-				<ImageViewer
-					file={file}
-					onClose={() => {
-						setOpen(false)
-					}}
-					onDelete={() => {
-						setFile(null)
-					}}
-				/>
-			)}
-		</>
-	)
-}

package/src/ImageViewer/ImageViewer.tsx

@@ -1,124 +0,0 @@
-import { ButtonGroup, IconButton, RiIcon, useViewportSize } from "@overmap-ai/blocks"
-import { downloadFile } from "@overmap-ai/core"
-import * as RadixDialog from "@radix-ui/react-dialog"
-import { memo, useCallback, useLayoutEffect, useRef } from "react"
-
-import { FileBadge } from "../FileBadge"
-
-interface ImageViewerProps {
-	file: File
-	onClose: () => void
-	onDelete?: (file: File) => void
-}
-export const ImageViewer = memo((props: ImageViewerProps) => {
-	const { file, onClose, onDelete } = props
-	const { md } = useViewportSize()
-	const imageRef = useRef<HTMLImageElement>(null)
-	const imageContainerRef = useRef<HTMLDivElement>(null)
-	const originalImageSize = useRef<{ width: number; height: number }>(null)
-
-	const adjustSize = useCallback(() => {
-		if (!imageContainerRef.current || !imageRef.current || !originalImageSize.current) return
-
-		const heightDifference = originalImageSize.current.height - imageContainerRef.current.clientHeight
-		const widthDifference = originalImageSize.current.width - imageContainerRef.current.clientWidth
-
-		if (heightDifference >= 0 || widthDifference >= 0) {
-			if (widthDifference > heightDifference) {
-				imageRef.current.style.width = `${imageContainerRef.current.clientWidth}px`
-				imageRef.current.style.height = "unset"
-			} else {
-				imageRef.current.style.height = `${imageContainerRef.current.clientHeight}px`
-				imageRef.current.style.width = "unset"
-			}
-		} else {
-			imageRef.current.style.width = `${originalImageSize.current.width}px`
-			imageRef.current.style.height = `${originalImageSize.current.height}px`
-		}
-	}, [])
-
-	const handleDelete = useCallback(() => {
-		if (onDelete) onDelete(file)
-	}, [file, onDelete])
-
-	const handleDownload = useCallback(() => {
-		downloadFile(file)
-	}, [file])
-
-	useLayoutEffect(() => {
-		const image = new Image()
-		image.onload = () => {
-			originalImageSize.current = {
-				width: image.width,
-				height: image.height,
-			}
-			// once we have stored the original image size, adjust the size of the image to the appropriate size
-			adjustSize()
-		}
-		image.src = URL.createObjectURL(file)
-		/*NOTE: adjustSize function has no dependencies, so the only thing causing this hook to rerun
-		 * is if file changes, which is as desired since that will require loading a new image.
-		 */
-	}, [adjustSize, file])
-
-	useLayoutEffect(() => {
-		if (!imageContainerRef.current) return
-		const resizeObserver = new ResizeObserver(() => {
-			// we want to adjust the size of the image as its container is resized
-			adjustSize()
-		})
-		resizeObserver.observe(imageContainerRef.current)
-		return () => {
-			resizeObserver.disconnect()
-		}
-	}, [adjustSize])
-
-	return (
-		<RadixDialog.Root open onOpenChange={onClose}>
-			<RadixDialog.Portal>
-				<RadixDialog.Overlay className="light:bg-(--black-a6) fixed inset-0 dark:bg-(--black-a8)" />
-				<RadixDialog.Content className="fixed inset-0">
-					<div className="flex h-full w-full flex-col">
-						<div className="flex h-max w-full items-center bg-(--color-background) p-2">
-							<ButtonGroup className="w-full" accentColor="base" variant="soft">
-								<div className="grid w-full grid-cols-3">
-									<div className="flex justify-start gap-2 items-center">
-										<IconButton onClick={onClose} aria-label="close">
-											<RiIcon icon="RiCloseLine" />
-										</IconButton>
-										<IconButton onClick={handleDownload} aria-label="close">
-											<RiIcon icon="RiDownload2Line" />
-										</IconButton>
-									</div>
-									<div className="flex justify-center">
-										<FileBadge
-											file={file}
-											accentColor="base"
-											truncateLength={!md ? 25 : undefined}
-										/>
-									</div>
-									<div className="flex justify-end">
-										{!!onDelete && (
-											<IconButton onClick={handleDelete} aria-label="close">
-												<RiIcon icon="RiDeleteBin2Line" />
-											</IconButton>
-										)}
-									</div>
-								</div>
-							</ButtonGroup>
-						</div>
-						<div className="h-full w-full overflow-hidden p-5">
-							<div
-								className="flex h-full w-full items-center justify-center overflow-hidden"
-								ref={imageContainerRef}
-							>
-								<img ref={imageRef} src={URL.createObjectURL(file)} alt="" />
-							</div>
-						</div>
-					</div>
-				</RadixDialog.Content>
-			</RadixDialog.Portal>
-		</RadixDialog.Root>
-	)
-})
-ImageViewer.displayName = "ImageViewer"

package/src/ImageViewer/constants.ts

@@ -1 +0,0 @@
-export const SUPPORTED_IMAGE_FILE_TYPES = ["image/jpeg", "image/png", "image/svg+xml"]

package/src/ImageViewer/index.ts

@@ -1,2 +0,0 @@
-export * from "./constants"
-export * from "./ImageViewer"

package/src/PDFViewer/PDFViewer.stories.tsx

@@ -1,55 +0,0 @@
-import { Button } from "@overmap-ai/blocks"
-import type { Meta } from "@storybook/react"
-import { ChangeEvent, useCallback, useRef, useState } from "react"
-
-import { PDFViewer } from "./PDFViewer"
-
-const meta = {
-	title: "Components/PDFViewer",
-	component: PDFViewer,
-	tags: ["autodocs"],
-	parameters: {
-		disablePanel: true,
-	},
-} satisfies Meta<typeof PDFViewer>
-
-export default meta
-
-export const Basic = () => {
-	const inputRef = useRef<HTMLInputElement>(null)
-	const [file, setFile] = useState<File | null>(null)
-	const [open, setOpen] = useState(false)
-
-	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-		if (e.target.files) {
-			const files = Array.from(e.target.files)
-			if (files.length > 0) {
-				setFile(files[0] || null)
-			}
-		}
-	}, [])
-
-	return (
-		<>
-			<input ref={inputRef} type="file" onChange={handleChange} />
-			<Button
-				onClick={() => {
-					setOpen(!open)
-				}}
-			>
-				open
-			</Button>
-			{file && open && (
-				<PDFViewer
-					file={file}
-					onClose={() => {
-						setOpen(false)
-					}}
-					onDelete={() => {
-						setFile(null)
-					}}
-				/>
-			)}
-		</>
-	)
-}

package/src/PDFViewer/PDFViewer.tsx

@@ -1,170 +0,0 @@
-import "react-pdf/dist/Page/AnnotationLayer.css"
-import "react-pdf/dist/Page/TextLayer.css"
-
-import { Badge, ButtonGroup, IconButton, RiIcon, Spinner, useViewportSize, ViewportSizes } from "@overmap-ai/blocks"
-import { downloadFile } from "@overmap-ai/core"
-import * as RadixDialog from "@radix-ui/react-dialog"
-import type { PDFDocumentProxy } from "pdfjs-dist"
-import { memo, useCallback, useEffect, useState } from "react"
-import { Document, Page, pdfjs } from "react-pdf"
-
-import { FileBadge } from "../FileBadge"
-
-pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.js", import.meta.url).toString()
-
-const ViewportSizeToScaleMapping: Record<ViewportSizes, number> = {
-	initial: 0.6,
-	xs: 0.8,
-	sm: 0.9,
-	md: 1,
-	lg: 1.1,
-	xl: 1.1,
-}
-
-// TODO: Add swiping functionality to navigate through pages on both desktop and mobile
-interface PDFViewerProps {
-	file: File
-	onDelete?: (file: File) => void
-	onClose: () => void
-}
-export const PDFViewer = memo((props: PDFViewerProps) => {
-	const { file, onDelete, onClose } = props
-
-	// loaded pdf from file if the load was successful
-	const [pdf, setPdf] = useState<PDFDocumentProxy | null>(null)
-	// current page being viewed
-	const [currentPageIndex, setCurrentPageIndex] = useState<number>(0)
-	// boolean used to track if an error occured when loading pdf from file
-	const [error, setError] = useState<boolean>(false)
-	const { lg, size } = useViewportSize()
-
-	/** when passed in file changes, have to restart the loading pdf process */
-	useEffect(() => {
-		setCurrentPageIndex(0)
-		setError(false)
-		setPdf(null)
-	}, [file])
-
-	const handleLoadSuccess = useCallback((pdf: PDFDocumentProxy) => {
-		setCurrentPageIndex(0)
-		setPdf(pdf)
-	}, [])
-
-	const handleLoadError = useCallback(() => {
-		setError(true)
-	}, [])
-
-	const handleNextPage = useCallback(() => {
-		if (!pdf || currentPageIndex === pdf.numPages - 1) return
-		setCurrentPageIndex((prevPageIndex) => prevPageIndex + 1)
-	}, [currentPageIndex, pdf])
-
-	const handleDownload = useCallback(() => {
-		downloadFile(file)
-	}, [file])
-
-	const handlePrevPage = useCallback(() => {
-		if (currentPageIndex === 0) return
-		setCurrentPageIndex((prevPageIndex) => prevPageIndex - 1)
-	}, [currentPageIndex])
-
-	const handleDelete = useCallback(() => {
-		if (onDelete) onDelete(file)
-	}, [file, onDelete])
-
-	return (
-		<RadixDialog.Root open onOpenChange={onClose}>
-			<RadixDialog.Portal>
-				<RadixDialog.Overlay className="light:bg-(--black-a6) fixed inset-0 dark:bg-(--black-a8)" />
-				<RadixDialog.Content className="fixed inset-0">
-					<div className="flex h-full w-full flex-col items-center">
-						<div className="h-max w-full shrink-0 items-center bg-(--color-background) p-2">
-							<ButtonGroup className="flex items-center gap-1" variant="soft" accentColor="base">
-								<div className="grid w-full grid-cols-3">
-									<div className="w-full gap-2 flex items-center">
-										<IconButton onClick={onClose} aria-label="close">
-											<RiIcon icon="RiCloseLine" />
-										</IconButton>
-										<IconButton onClick={handleDownload} aria-label="download">
-											<RiIcon icon="RiDownload2Line" />
-										</IconButton>
-									</div>
-									<div className="flex justify-center">
-										<FileBadge
-											file={file}
-											accentColor="base"
-											truncateLength={!lg ? 25 : undefined}
-										/>
-									</div>
-									<div className="flex justify-end">
-										{!!onDelete && (
-											<IconButton onClick={handleDelete} aria-label="delete">
-												<RiIcon icon="RiDeleteBin2Line" />
-											</IconButton>
-										)}
-									</div>
-								</div>
-							</ButtonGroup>
-						</div>
-						<div className="relative flex h-full w-full flex-col items-center gap-2 p-3">
-							{!pdf && !error && <SpinnerComponent />}
-							<div className="flex h-max max-h-full w-max max-w-full flex-col items-center justify-center overflow-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]">
-								<Document
-									className="relative"
-									file={file}
-									onLoadSuccess={handleLoadSuccess}
-									onLoadError={handleLoadError}
-									// get rid of default error component
-									error=""
-									// get rid of default loading component
-									loading=""
-								>
-									<Page scale={ViewportSizeToScaleMapping[size]} pageIndex={currentPageIndex} />
-									{!!pdf && !error && (
-										<div className="absolute top-0 z-[2] flex w-full justify-center py-2">
-											<ButtonGroup variant="solid" accentColor="base" size="sm">
-												<IconButton onClick={handlePrevPage} aria-label="previous page">
-													<RiIcon icon="RiArrowLeftLine" />
-												</IconButton>
-												<Badge accentColor="base" style={{ borderRadius: 0 }} variant="solid">
-													{currentPageIndex + 1}/{pdf.numPages}
-												</Badge>
-												<IconButton onClick={handleNextPage} aria-label="next-page">
-													<RiIcon icon="RiArrowRightLine" />
-												</IconButton>
-											</ButtonGroup>
-										</div>
-									)}
-								</Document>
-							</div>
-
-							{error && <ErrorComponent />}
-						</div>
-					</div>
-				</RadixDialog.Content>
-			</RadixDialog.Portal>
-		</RadixDialog.Root>
-	)
-})
-PDFViewer.displayName = "PDFViewer"
-
-const SpinnerComponent = memo(() => {
-	return (
-		<div className="absolute flex h-full w-full items-center justify-center">
-			<Spinner />
-		</div>
-	)
-})
-SpinnerComponent.displayName = "SpinnerComponent"
-
-const ErrorComponent = memo(() => {
-	return (
-		<div className="flex h-[70%] w-[40%] flex-col items-center justify-center rounded-md border border-(--base-a6) bg-(--base-2)">
-			<RiIcon icon="RiFileWarningLine" size={40} />
-			<span className="text-sm font-light text-(--accent-a11)" data-accent-color="base">
-				Failed to load
-			</span>
-		</div>
-	)
-})
-ErrorComponent.displayName = "ErrorComponent"

package/src/PDFViewer/constants.ts

@@ -1 +0,0 @@
-export const SUPPORTED_PDF_FILE_TYPES = ["application/pdf"]

package/src/PDFViewer/index.ts

@@ -1,2 +0,0 @@
-export * from "./constants"
-export * from "./PDFViewer"