@overmap-ai/forms 1.0.17-master.2 → 1.0.17-master.4

package/src/SpreadsheetViewer/SpreadsheetViewer.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 { 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

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

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

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

package/src/forms/builder/DropDispatch.ts

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

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