@overmap-ai/forms 0.0.1-master.3

package/src/ImageCard/ImageCard.tsx

@@ -0,0 +1,82 @@
+import { RiIcon, Spinner, useSize } from "@overmap-ai/blocks"
+import { truncate } from "@overmap-ai/core"
+import { cx } from "class-variance-authority"
+import {
+	ComponentProps,
+	forwardRef,
+	memo,
+	PropsWithoutRef,
+	ReactNode,
+	RefObject,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from "react"
+
+import { FileIcon } from "../FileIcon"
+
+export interface ImageCardProps extends Omit<PropsWithoutRef<ComponentProps<"div">>, "children"> {
+	file: File | null
+	alt?: string
+	error?: string
+	truncateLength?: number
+	rightSlot?: ReactNode
+}
+export const ImageCard = memo(
+	forwardRef<HTMLDivElement, ImageCardProps>((props, forwardedRef) => {
+		const { file, alt, error, rightSlot, className, truncateLength, ...rest } = props
+		const fileCardRef = useRef<HTMLDivElement>(null)
+		const imageInsetRef = useRef<HTMLDivElement>(null)
+		const fileCardSize = useSize(fileCardRef as RefObject<HTMLDivElement>)
+
+		useLayoutEffect(() => {
+			if (!imageInsetRef.current || !fileCardSize) return
+			imageInsetRef.current.style.height = `${fileCardSize.height * 4}px`
+		}, [fileCardSize])
+
+		const fileName = useMemo(() => {
+			if (!file) return
+			return truncateLength !== undefined ? truncate(file.name, truncateLength) : file.name
+		}, [file, truncateLength])
+
+		return (
+			<div
+				className={cx(
+					className,
+					"relative flex h-max w-full flex-col gap-0 overflow-hidden rounded-md border items-center border-(--base-a6)",
+				)}
+				ref={forwardedRef}
+				{...rest}
+			>
+				{!file && !error && (
+					<div className="absolute flex h-full w-full flex-col items-center justify-center">
+						<Spinner />
+					</div>
+				)}
+
+				<div
+					ref={imageInsetRef}
+					className="-m-4 flex max-w-full items-center justify-center overflow-hidden bg-clip-padding"
+				>
+					{file && !error && (
+						<img
+							className="max-w-full object-cover"
+							src={URL.createObjectURL(file)}
+							alt={alt ?? file.name}
+						/>
+					)}
+				</div>
+				<div
+					className={cx("flex h-max w-full items-center gap-1 bg-(--base-2) px-2 py-1", {
+						"bg-transparent": !file,
+					})}
+					ref={fileCardRef}
+				>
+					{error ? <RiIcon icon="RiFileWarningLine" /> : file && <FileIcon fileType={file.type} />}
+					{error ?? fileName}
+					{rightSlot}
+				</div>
+			</div>
+		)
+	}),
+)

package/src/ImageCard/index.ts

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

package/src/ImageMarkup/ImageMarkup.stories.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@overmap-ai/blocks"
+import type { Meta } from "@storybook/react"
+import { ChangeEvent, useCallback, useRef, useState } from "react"
+
+import { ImageMarkup } from "./ImageMarkup"
+
+const meta = {
+	title: "Components/ImageMarkup",
+	component: ImageMarkup,
+	tags: ["autodocs"],
+	parameters: {
+		disablePanel: true,
+	},
+} satisfies Meta<typeof ImageMarkup>
+
+export default meta
+
+export const Basic = () => {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [file, setFile] = useState<File | null>(null)
+	const [open, setOpen] = useState(false)
+	const [dirty, setDirty] = 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 && (
+				<ImageMarkup
+					dirty={dirty}
+					onDirty={(dirty) => {
+						setDirty(dirty)
+					}}
+					file={file}
+					onClose={() => {
+						setOpen(false)
+					}}
+					onDelete={() => {
+						setFile(null)
+						alert("deleted")
+					}}
+					onSave={(file: File) => {
+						setFile(file)
+						alert("saved")
+					}}
+				/>
+			)}
+		</>
+	)
+}

package/src/ImageMarkup/ImageMarkup.tsx

@@ -0,0 +1,268 @@
+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

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

package/src/ImageViewer/ImageViewer.stories.tsx

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,124 @@
+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

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

package/src/ImageViewer/index.ts

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

package/src/PDFViewer/PDFViewer.stories.tsx

@@ -0,0 +1,55 @@
+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)
+					}}
+				/>
+			)}
+		</>
+	)
+}