@overmap-ai/forms 0.0.1-master.3

package/src/PDFViewer/PDFViewer.tsx

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

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

package/src/PDFViewer/index.ts

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

package/src/SpreadsheetViewer/SpreadsheetViewer.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 { SpreadsheetViewer } from "./SpreadsheetViewer"
+
+const meta = {
+	title: "Components/SpreadsheetViewer",
+	component: SpreadsheetViewer,
+	tags: ["autodocs"],
+	parameters: {
+		disablePanel: true,
+	},
+} satisfies Meta<typeof SpreadsheetViewer>
+
+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 && (
+				<SpreadsheetViewer
+					file={file}
+					onClose={() => {
+						setOpen(false)
+					}}
+					onDelete={() => {
+						setFile(null)
+					}}
+				/>
+			)}
+		</>
+	)
+}

package/src/SpreadsheetViewer/SpreadsheetViewer.tsx

@@ -0,0 +1,162 @@
+import { Badge, ButtonGroup, IconButton, RiIcon, Spinner, useViewportSize } from "@overmap-ai/blocks"
+import { downloadFile } from "@overmap-ai/core"
+import * as RadixDialog from "@radix-ui/react-dialog"
+import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState } from "react"
+import { read, utils, WorkSheet } from "xlsx"
+
+import { FileBadge } from "../FileBadge"
+
+interface SpreadsheetViewerProps {
+	file: File
+	onClose: () => void
+	onDelete?: (file: File) => void
+}
+export const SpreadsheetViewer = memo((props: SpreadsheetViewerProps) => {
+	const { file, onClose, onDelete } = props
+	const { md } = useViewportSize()
+	const [sheetNames, setSheetNames] = useState<string[]>([])
+	const [sheets, setSheets] = useState<Record<string, WorkSheet>>({})
+	const [activeSheet, setActiveSheet] = useState<string | undefined>()
+	const [data, setData] = useState<{
+		rowLabels: string[]
+		columnLabels: string[]
+		data: { value: unknown; readOnly: boolean }[][]
+	}>({
+		rowLabels: [],
+		columnLabels: [],
+		data: [[]],
+	})
+
+	const Spreadsheet = useMemo(() => {
+		return lazy(() => import("react-spreadsheet"))
+	}, [file, activeSheet])
+
+	useEffect(() => {
+		void file.arrayBuffer().then((result) => {
+			const { SheetNames, Sheets } = read(result)
+			setSheetNames(SheetNames)
+			setSheets(Sheets)
+			setActiveSheet(SheetNames[0])
+		})
+	}, [file])
+
+	useEffect(() => {
+		if (!activeSheet) return
+		const worksheet = sheets[activeSheet]!
+		const sheetAsJson = utils.sheet_to_json<NonNullable<unknown>>(worksheet)
+		const columnLabels = Object.keys(sheetAsJson[0] ?? {}).splice(1)
+		const rowLabels = sheetAsJson.map((row) => Object.values(row)[0] as string)
+
+		// Extract data based on column labels for each row, format as expected by "react-spreadsheet"
+		const data = sheetAsJson.map((row: Record<string, unknown>) => {
+			return columnLabels.map((columnLabel) => ({ value: row[columnLabel], readOnly: true }))
+		})
+		setData({ rowLabels, columnLabels, data })
+	}, [activeSheet, sheets])
+
+	const handleDelete = useCallback(() => {
+		if (onDelete) onDelete(file)
+	}, [file, onDelete])
+
+	const handleDownload = useCallback(() => {
+		downloadFile(file)
+	}, [file])
+
+	const handleNextSheet = useCallback(() => {
+		if (!activeSheet) throw new Error(`Expected an activeSheet, got ${activeSheet}`)
+		const activeSheetIndex = sheetNames.indexOf(activeSheet)
+		if (activeSheetIndex < 0)
+			throw new Error(
+				`Expected activeSheet to be present in sheets, ${activeSheet} not found in ${sheetNames.join(", ")}`,
+			)
+
+		if (activeSheetIndex === sheetNames.length - 1) return
+
+		setActiveSheet(sheetNames[activeSheetIndex + 1])
+	}, [activeSheet, sheetNames])
+
+	const handlePreviousSheet = useCallback(() => {
+		if (!activeSheet) throw new Error(`Expected an activeSheet, got ${activeSheet}`)
+		const activeSheetIndex = sheetNames.indexOf(activeSheet)
+		if (activeSheetIndex < 0)
+			throw new Error(
+				`Expected activeSheet to be present in sheets, ${activeSheet} not found in ${sheetNames.join(", ")}`,
+			)
+
+		if (activeSheetIndex === 0) return
+
+		setActiveSheet(sheetNames[activeSheetIndex - 1])
+	}, [activeSheet, sheetNames])
+
+	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 overflow-hidden">
+						<div className="h-max w-full shrink-0 bg-(--color-background) p-2">
+							<ButtonGroup size="md" variant="soft" accentColor="base">
+								<div className="grid w-full grid-cols-3">
+									<div className="flex gap-2 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={!md ? 25 : undefined}
+										/>
+									</div>
+									<div className="flex justify-end gap-2">
+										{!!onDelete && (
+											<IconButton aria-label="delete" onClick={handleDelete}>
+												<RiIcon icon="RiDeleteBin2Line" />
+											</IconButton>
+										)}
+									</div>
+								</div>
+							</ButtonGroup>
+						</div>
+						<div className="flex h-full w-full flex-col items-center gap-3 overflow-hidden p-2">
+							<Suspense fallback={<Spinner />}>
+								<div className="flex h-max max-h-[calc(100%-50px)] w-max max-w-full overflow-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]">
+									<Spreadsheet
+										className="z-[1] h-full"
+										data={data.data}
+										rowLabels={data.rowLabels}
+										columnLabels={data.columnLabels}
+										// TODO: set darkMode
+									/>
+								</div>
+								<div className="flex h-max shrink-0 bg-(--base-2)">
+									<ButtonGroup
+										className="flex items-center"
+										variant="solid"
+										accentColor="base"
+										size="sm"
+									>
+										<IconButton aria-label="previous" onClick={handlePreviousSheet}>
+											<RiIcon icon="RiArrowLeftLine" />
+										</IconButton>
+										<Badge variant="solid" size="sm" style={{ borderRadius: 0 }} accentColor="base">
+											{activeSheet}
+										</Badge>
+										<IconButton aria-label="next" onClick={handleNextSheet}>
+											<RiIcon icon="RiArrowRightLine" />
+										</IconButton>
+									</ButtonGroup>
+								</div>
+							</Suspense>
+						</div>
+					</div>
+				</RadixDialog.Content>
+			</RadixDialog.Portal>
+		</RadixDialog.Root>
+	)
+})
+SpreadsheetViewer.displayName = "SpreadsheetViewer"

package/src/SpreadsheetViewer/constants.ts

@@ -0,0 +1,8 @@
+export const SUPPORTED_SPREADSHEET_FILE_EXTENSIONS = [
+	// .csv
+	"text/csv",
+	// .xlsx
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	// .xls
+	"application/vnd.ms-excel",
+]

package/src/SpreadsheetViewer/index.ts

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

package/src/forms/builder/DropDispatch.ts

@@ -0,0 +1,84 @@
+import { Reducer } from "react"
+
+import { SerializedFieldSection } from "../typings"
+
+export interface SmallFieldSection {
+	/** is dropping disabled in this section? */
+	disabled: boolean
+	/** id's of field that may not be dropped on this section */
+	conditionFields: Set<string>
+	/** the index of the section the condition is in */
+	conditionIndex?: number
+	/** the index of the section */
+	index: number
+	/** label of the section */
+	label: string | null
+}
+
+// section id -> section state
+export type DropState = Record<string, SmallFieldSection>
+
+export type DropAction = { type: "release" } | { type: "hold"; fieldId: string } | { type: "update"; state: DropState }
+
+export const reducer: Reducer<DropState, DropAction> = (state, action) => {
+	const next = { ...state }
+
+	switch (action.type) {
+		case "release":
+			for (const sectionId in next) {
+				next[sectionId]!.disabled = false
+			}
+			return next
+		case "hold":
+			for (const sectionId in next) {
+				if (next[sectionId]?.conditionFields.has(action.fieldId)) {
+					next[sectionId]!.disabled = true
+				}
+			}
+			return next
+		case "update":
+			return action.state
+	}
+}
+
+/** @returns the index of the section containing the field */
+const getConditionIndex = (fields: SerializedFieldSection[], identifier?: string): number | undefined => {
+	if (!identifier) return undefined
+
+	for (let i = 0; i < fields.length; i++) {
+		const section = fields[i]
+
+		if (!section) continue
+
+		for (const field of section.fields) {
+			if (field.identifier === identifier) return i
+		}
+	}
+}
+
+/** creates a `DropState` from a list of `SerializedFieldSection` objects */
+export const initializer = (fields: SerializedFieldSection[]): DropState => {
+	const acc: DropState = {}
+
+	for (let index = 0; index < fields.length; index++) {
+		const field = fields[index]
+		if (!field) throw new Error("Field is undefined.")
+
+		// include any fields that are disabled by the condition of the previous field
+		const previousConditionFields = index > 0 ? acc[fields[index - 1]!.identifier]?.conditionFields : undefined
+		const disabledFields = new Set<string>(previousConditionFields)
+		if (field.condition?.identifier) {
+			disabledFields.add(field.condition.identifier)
+		}
+
+		acc[field.identifier] = {
+			disabled: false,
+			conditionFields: disabledFields,
+			conditionIndex: getConditionIndex(fields, field.condition?.identifier),
+			index,
+			label: field.label,
+		}
+	}
+
+	return acc
+}

package/src/forms/builder/FieldActions.tsx

@@ -0,0 +1,155 @@
+import { IconButton, RiIcon } from "@overmap-ai/blocks"
+import { Menu } from "@overmap-ai/blocks"
+import { useFormikContext } from "formik"
+import { ChangeEvent, ComponentProps, memo, ReactNode, useMemo, useRef } from "react"
+import type { IconType } from "react-icons"
+import { RiArrowDownLine, RiArrowUpLine, RiDeleteBin2Line, RiFileCopyLine, RiImageLine } from "react-icons/ri"
+
+import { FieldTypeIdentifier } from "../typings"
+import { FormikUserFormRevision } from "./typings"
+
+interface FieldActionsProps {
+	index: number
+	type: FieldTypeIdentifier
+	sectionIndex?: number
+	remove: () => void
+	duplicate: () => void
+	move: (direction: "up" | "down") => void
+	upload?: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+interface ActionsType {
+	Icon: IconType
+	buttonProps?: ComponentProps<"div">
+	key: string
+	text: string
+}
+
+export const FieldActions = memo((props: FieldActionsProps) => {
+	const { index, type, sectionIndex, remove, duplicate, move, upload } = props
+	// Upload function prop must be defined for non-section fields
+	if (type !== "section" && !upload) {
+		throw new Error("Upload function prop must be defined for non-section fields.")
+	}
+
+	const { values } = useFormikContext<FormikUserFormRevision>()
+	const fileInputRef = useRef<HTMLInputElement>(null)
+
+	const actions: ActionsType[] = useMemo(() => {
+		const actions = [
+			{
+				Icon: RiFileCopyLine,
+				key: "duplicate",
+				text: "Duplicate",
+				buttonProps: { onClick: duplicate },
+			},
+		]
+		// Show delete button only if not first section
+		if (index !== 0) {
+			actions.push({
+				Icon: RiDeleteBin2Line,
+				key: "delete",
+				text: "Delete",
+				buttonProps: { onClick: remove },
+			})
+		}
+
+		// Show upload button for non-section fields
+		if (type !== "section") {
+			actions.unshift({
+				Icon: RiImageLine,
+				key: "upload",
+				text: "Upload image",
+				buttonProps: {
+					onClick: () => {
+						fileInputRef.current?.click()
+					},
+				},
+			})
+		}
+		// Only show down arrow if it's not the last section or last field in the last section
+		if (
+			(sectionIndex === undefined && index !== values.fields.length - 1) ||
+			(sectionIndex !== undefined &&
+				(sectionIndex < values.fields.length - 1 || index !== values.fields[sectionIndex]!.fields.length - 1))
+		) {
+			actions.unshift({
+				Icon: RiArrowDownLine,
+				key: "moveDown",
+				text: "Move down",
+				buttonProps: {
+					onClick: () => {
+						move("down")
+					},
+				},
+			})
+		}
+		// Only show up arrow if it's not the first section or first field in the first section
+		if (
+			(sectionIndex === undefined && index !== 0) ||
+			(sectionIndex !== undefined && (sectionIndex !== 0 || index !== 0))
+		) {
+			actions.unshift({
+				Icon: RiArrowUpLine,
+				key: "moveUp",
+				text: "Move up",
+				buttonProps: {
+					onClick: () => {
+						move("up")
+					},
+				},
+			})
+		}
+
+		return actions
+	}, [duplicate, index, move, remove, sectionIndex, type, values.fields])
+
+	return (
+		<>
+			{/* For tablet and up */}
+			<div className="mx-2 flex hidden flex-col gap-5 sm:block">
+				{actions.map((Action) => {
+					const Icon = Action.Icon as () => ReactNode
+					return (
+						<IconButton
+							key={Action.key}
+							type="button"
+							variant="ghost"
+							accentColor={Action.key.startsWith("move") ? "base" : undefined}
+							aria-label={Action.text}
+							{...(Action.buttonProps as Omit<ComponentProps<typeof IconButton>, "aria-label">)}
+						>
+							<Icon />
+						</IconButton>
+					)
+				})}
+			</div>
+			{/* For mobile devices */}
+			<div className="sm:hidden">
+				<Menu.Root>
+					<Menu.ClickTrigger>
+						<IconButton variant="ghost" aria-label="Actions menu">
+							<RiIcon icon="RiMore2Line" />
+						</IconButton>
+					</Menu.ClickTrigger>
+					<Menu.Content>
+						{actions.map((Action) => {
+							const Icon = Action.Icon as () => ReactNode
+							return (
+								<Menu.Item key={Action.key} onClick={Action.buttonProps?.onClick}>
+									<Icon />
+									{Action.text}
+								</Menu.Item>
+							)
+						})}
+					</Menu.Content>
+				</Menu.Root>
+			</div>
+			{type !== "section" && (
+				<input style={{ display: "none" }} ref={fileInputRef} type="file" accept="image/*" onChange={upload} />
+			)}
+		</>
+	)
+})
+
+FieldActions.displayName = "FieldActions"