@overmap-ai/forms 0.0.1-master.3

package/src/forms/fields/MultiStringField/MultiStringInput.tsx

@@ -0,0 +1,207 @@
+import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd"
+import { Badge, IconButton, Input, RiIcon } from "@overmap-ai/blocks"
+import { ChangeEventHandler, KeyboardEvent, memo, useCallback, useMemo, useState } from "react"
+
+import { remove, reorder } from "../../builder/utils"
+import { SEVERITY_COLOR_MAPPING } from "../../constants"
+import { SelectFieldOption } from "../../typings"
+import { InputWithLabel, InputWithLabelAndHelpText, useFormikInput } from "../BaseField"
+import { ComponentProps } from "../typings"
+import { MultiStringField } from "./MultiStringField"
+
+/**
+ * Allows the user to create an array of unique strings and customize the order.
+ * User to generate options for the Select field.
+ */
+export const MultiStringInput = memo((props: ComponentProps<MultiStringField>) => {
+	const [{ inputId, labelId, size, severity, showInputOnly, field, fieldProps, internal }, rest] =
+		useFormikInput<MultiStringField>(props)
+	let [{ helpText, label }] = useFormikInput(props)
+	helpText = showInputOnly ? null : helpText
+	label = showInputOnly ? "" : label
+
+	const color = severity ? SEVERITY_COLOR_MAPPING[severity] : undefined
+
+	const value: string[] = useMemo(() => (Array.isArray(fieldProps.value) ? fieldProps.value : []), [fieldProps.value])
+	const { onChange, onBlur } = fieldProps
+	const droppableId = `${inputId}-droppable`
+	const { disabled } = rest
+
+	const [intermediateValue, setIntermediateValue] = useState("")
+	const [internalError, setInternalError] = useState("")
+
+	const updatedHelpText = internalError || helpText
+	const updatedColor = internalError ? SEVERITY_COLOR_MAPPING.danger : color
+
+	const setValueAndTouched = useCallback(
+		(newValue: string[]) => {
+			onChange(newValue)
+			onBlur(newValue)
+		},
+		[onChange, onBlur],
+	)
+
+	// handle change to the input
+	const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+		(e) => {
+			if (value.findIndex((option: string): boolean => option === e.target.value.trim()) >= 0) {
+				// There is already an option with this value.
+				setInternalError("All options must be unique")
+			} else if (!e.target.value) {
+				setInternalError("Option cannot be empty")
+			} else {
+				setInternalError("")
+			}
+			setIntermediateValue(e.target.value)
+		},
+		[setIntermediateValue, value],
+	)
+
+	const addOption = useCallback(() => {
+		if (internalError) return
+
+		if (!intermediateValue.trim()) {
+			setInternalError("Option cannot be empty")
+			return
+		}
+
+		const trimmedValue = intermediateValue.trim()
+		// value and label are the same for user-defined options.
+		setValueAndTouched([...value, trimmedValue])
+		setIntermediateValue("")
+	}, [intermediateValue, internalError, setValueAndTouched, value])
+
+	// moves the intermediate value into the value array
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				// don't try and submit the form
+				e.preventDefault()
+
+				addOption()
+			}
+		},
+		[addOption],
+	)
+
+	// delete an existing option
+	const handleDeleteOption = useCallback(
+		(index: number) => {
+			setValueAndTouched(remove(value, index))
+		},
+		[value, setValueAndTouched],
+	)
+
+	// change the order of existing options
+	const handleDragEnd = useCallback(
+		(result: DropResult) => {
+			if (!result.destination) return
+
+			const sourceIndex = result.source.index
+			const destinationIndex = result.destination.index
+
+			setValueAndTouched(reorder(value, sourceIndex, destinationIndex))
+		},
+		[setValueAndTouched, value],
+	)
+
+	return (
+		<DragDropContext onDragEnd={handleDragEnd}>
+			<div className="flex flex-col gap-2">
+				<InputWithLabelAndHelpText helpText={updatedHelpText} severity={severity}>
+					<InputWithLabel
+						size={size}
+						severity={severity}
+						inputId={inputId}
+						labelId={labelId}
+						label={label}
+						image={showInputOnly ? undefined : field.image}
+					>
+						{/* Do not show input if disabled and options are defined */}
+						{(!disabled || value.length === 0) && (
+							<div className="flex gap-2">
+								<div className="grow">
+									<Input.Root accentColor={updatedColor} variant={internal ? "outline" : "soft"}>
+										<Input.Field
+											{...rest}
+											{...fieldProps}
+											value={intermediateValue}
+											onChange={handleChange}
+											onKeyDown={handleKeyDown}
+											id={inputId}
+											placeholder={field.placeholder}
+											onBlur={undefined}
+										/>
+									</Input.Root>
+								</div>
+								<IconButton
+									type="button"
+									aria-label="Add option"
+									disabled={!!internalError || disabled}
+									onClick={addOption}
+								>
+									<RiIcon icon="RiAddLine" />
+								</IconButton>
+							</div>
+						)}
+					</InputWithLabel>
+				</InputWithLabelAndHelpText>
+				<Droppable droppableId={droppableId}>
+					{(droppableProvided) => (
+						<div
+							className="flex flex-col"
+							{...droppableProvided.droppableProps}
+							ref={droppableProvided.innerRef}
+						>
+							{value.map((option: string, index) => (
+								<Draggable
+									draggableId={`${option}-draggable`}
+									index={index}
+									key={option}
+									isDragDisabled={disabled}
+								>
+									{({ draggableProps, dragHandleProps, innerRef }) => (
+										<Badge
+											{...dragHandleProps}
+											{...draggableProps}
+											ref={innerRef}
+											className="mb-1 flex items-center justify-between gap-2"
+											accentColor="base"
+											size="md"
+											variant="soft"
+										>
+											<span>
+												{
+													// TODO: remove this, its just a saftey check for old compatibility of what was acceptable as a value for multi string
+													typeof option === "object" && "label" in option
+														? (option as SelectFieldOption).label
+														: option
+												}
+											</span>
+											<IconButton
+												size="sm"
+												variant="ghost"
+												type="button"
+												aria-label="Delete option"
+												accentColor="base"
+												disabled={disabled}
+												onClick={() => {
+													handleDeleteOption(index)
+												}}
+											>
+												<RiIcon icon="RiCloseLargeLine" />
+											</IconButton>
+										</Badge>
+									)}
+								</Draggable>
+							))}
+							{droppableProvided.placeholder}
+						</div>
+					)}
+				</Droppable>
+			</div>
+		</DragDropContext>
+	)
+})
+
+MultiStringInput.displayName = "MultiStringInput"

package/src/forms/fields/MultiStringField/index.ts

@@ -0,0 +1,2 @@
+export * from "./MultiStringField"
+export * from "./MultiStringInput"

package/src/forms/fields/NumberField/NumberField.tsx

@@ -0,0 +1,173 @@
+import get from "lodash.get"
+import { ChangeEvent, ReactNode } from "react"
+import { RiHashtag } from "react-icons/ri"
+
+import { FormikUserFormRevision } from "../../builder"
+import { Form, ISerializedField, SerializedNumberField } from "../../typings"
+import { BaseField, ChildFieldOptions, emptyBaseField } from "../BaseField"
+import { BooleanField } from "../BooleanField"
+import { GetInputProps, InputFieldLevelValidator, InputValidator } from "../typings"
+import { NumberInput } from "./NumberInput"
+
+// empty number fields are represented by an empty string
+export type NumberFieldValue = number | ""
+
+export const emptyNumberField = {
+	...emptyBaseField,
+	type: "number",
+	minimum: Number.MIN_SAFE_INTEGER,
+	maximum: Number.MAX_SAFE_INTEGER,
+	integers: false,
+}
+
+// NOTE: If changing, also change it in StringOrTextField.ts (avoid circular imports)
+const valueIsFormikUserFormRevision = (form: FormikUserFormRevision | Form): form is FormikUserFormRevision => {
+	return "fields" in form
+}
+
+export interface NumberFieldOptions extends ChildFieldOptions<NumberFieldValue> {
+	maximum?: number
+	minimum?: number
+	integers?: boolean
+	placeholder?: string
+}
+
+export class NumberField extends BaseField<NumberFieldValue, "number"> {
+	static readonly fieldTypeName = "Number"
+	static readonly fieldTypeDescription = "Allows specifying a number within a given range."
+
+	public readonly minimum: number | undefined
+	public readonly maximum: number | undefined
+	public readonly integers: boolean
+	public readonly placeholder: string
+
+	static Icon: typeof RiHashtag = RiHashtag
+
+	constructor(options: NumberFieldOptions) {
+		const {
+			minimum = Number.MIN_SAFE_INTEGER,
+			maximum = Number.MAX_SAFE_INTEGER,
+			integers = false,
+			placeholder = "Enter a number",
+			...base
+		} = options
+		super({ ...base, type: "number" })
+		this.minimum = minimum
+		this.maximum = maximum
+		this.integers = integers
+		this.placeholder = placeholder
+	}
+
+	public getValueFromChangeEvent(event: ChangeEvent<HTMLInputElement>): NumberFieldValue {
+		const number = Number.parseFloat(event.target.value)
+
+		if (Number.isNaN(number)) return ""
+		return number
+	}
+
+	static _validateMin: (path: string) => InputValidator<NumberFieldValue> = (path: string) => (value, allValues) => {
+		const field = valueIsFormikUserFormRevision(allValues)
+			? (get(allValues, path) as SerializedNumberField)
+			: allValues
+		if (typeof field.maximum === "number" && typeof value === "number" && field.maximum < value) {
+			return "Minimum cannot be greater than minimum."
+		}
+		return null
+	}
+
+	static _validateMax: (path: string) => InputValidator<NumberFieldValue> = (path: string) => (value, allValues) => {
+		const field = valueIsFormikUserFormRevision(allValues)
+			? (get(allValues, path) as SerializedNumberField)
+			: allValues
+		if (typeof field.minimum === "number" && typeof value === "number" && field.minimum > value) {
+			return "Maximum cannot be less than minimum."
+		}
+		return null
+	}
+
+	static getFieldCreationSchema(parentPath = "") {
+		const path = parentPath && `${parentPath}.`
+		return [
+			{
+				field: new NumberField({
+					label: "Minimum",
+					description: "Minimum value",
+					integers: true,
+					required: false,
+					identifier: `${path}minimum`,
+					formValidators: [this._validateMin(parentPath)],
+				}),
+				showDirectly: false,
+			},
+			{
+				field: new NumberField({
+					label: "Maximum",
+					description: "Maximum value",
+					integers: true,
+					required: false,
+					identifier: `${path}maximum`,
+					formValidators: [this._validateMax(parentPath)],
+				}),
+				showDirectly: false,
+			},
+			{
+				field: new BooleanField({
+					label: "Integers",
+					description: "Whole numbers only",
+					required: false,
+					identifier: `${path}integers`,
+				}),
+				showDirectly: false,
+			},
+		]
+	}
+
+	getFieldValidators(): InputFieldLevelValidator<NumberFieldValue>[] {
+		const validators = super.getFieldValidators()
+		const min = this.minimum
+		const max = this.maximum
+
+		if (typeof min === "number") {
+			validators.push((value) => {
+				if (typeof value === "number" && value < min) {
+					return `Must be at least ${this.minimum}.`
+				}
+			})
+		}
+		if (typeof max === "number") {
+			validators.push((value) => {
+				if (typeof value === "number" && value > max) {
+					return `Must be at most ${this.maximum}.`
+				}
+			})
+		}
+		if (this.integers) {
+			validators.push((value) => {
+				if (typeof value === "number" && !Number.isInteger(value)) {
+					return "Must be a whole number."
+				}
+			})
+		}
+
+		return validators
+	}
+
+	serialize(): SerializedNumberField {
+		return {
+			...super._serialize(),
+			minimum: this.minimum,
+			maximum: this.maximum,
+			integers: this.integers,
+			placeholder: this.placeholder,
+		}
+	}
+
+	static deserialize(data: ISerializedField): NumberField {
+		if (data.type !== "number") throw new Error("Type mismatch.")
+		return new NumberField(data)
+	}
+
+	getInput(props: GetInputProps<this>): ReactNode {
+		return <NumberInput field={this} {...props} />
+	}
+}

package/src/forms/fields/NumberField/NumberInput.tsx

@@ -0,0 +1,44 @@
+import { Input } from "@overmap-ai/blocks"
+import { memo } from "react"
+
+import { SEVERITY_COLOR_MAPPING } from "../../constants"
+import { InputWithLabel, InputWithLabelAndHelpText, useFormikInput } from "../BaseField"
+import { ComponentProps } from "../typings"
+import { NumberField } from "./NumberField"
+
+export const NumberInput = memo((props: ComponentProps<NumberField>) => {
+	const [{ inputId, labelId, size, severity, showInputOnly, field, fieldProps }, rest] = useFormikInput(props)
+	let [{ helpText, label }] = useFormikInput(props)
+	helpText = showInputOnly ? null : helpText
+	label = showInputOnly ? "" : label
+
+	const color = severity ? SEVERITY_COLOR_MAPPING[severity] : undefined
+
+	return (
+		<InputWithLabelAndHelpText helpText={helpText} severity={severity}>
+			<InputWithLabel
+				size={size}
+				severity={severity}
+				inputId={inputId}
+				labelId={labelId}
+				label={label}
+				image={showInputOnly ? undefined : field.image}
+			>
+				<Input.Root accentColor={color} variant="soft">
+					<Input.Field
+						{...rest}
+						{...fieldProps}
+						type="number"
+						id={inputId}
+						placeholder={field.placeholder}
+						min={field.minimum}
+						max={field.maximum}
+						step={field.integers ? 1 : 0.1}
+					/>
+				</Input.Root>
+			</InputWithLabel>
+		</InputWithLabelAndHelpText>
+	)
+})
+
+NumberInput.displayName = "NumberInput"

package/src/forms/fields/NumberField/index.ts

@@ -0,0 +1,2 @@
+export * from "./NumberField"
+export * from "./NumberInput"

package/src/forms/fields/QrField/QrField.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from "react"
+import { RiQrCodeLine } from "react-icons/ri"
+
+import { ISerializedField, SerializedQrField } from "../../typings"
+import { BaseField, ChildFieldOptions, emptyBaseField } from "../BaseField"
+import { ComponentProps } from "../typings"
+import { QrInput } from "./QrInput"
+
+export const emptyQrField = {
+	...emptyBaseField,
+	type: "qr",
+}
+
+export class QrField extends BaseField<string, "qr"> {
+	static readonly fieldTypeName = "QR"
+	static readonly fieldTypeDescription = "Used for scanning/reading QR codes."
+
+	public readonly onlyValidateAfterTouched = false
+
+	static Icon: typeof RiQrCodeLine = RiQrCodeLine
+
+	public constructor(options: ChildFieldOptions<string>) {
+		super({ ...options, type: "qr" })
+	}
+
+	serialize(): SerializedQrField {
+		return super._serialize()
+	}
+
+	static deserialize(data: ISerializedField): QrField {
+		if (data.type !== "qr") throw new Error("Type mismatch.")
+		return new QrField(data)
+	}
+
+	getInput(props: ComponentProps<QrField>): ReactNode {
+		return <QrInput {...props} field={this} />
+	}
+}

package/src/forms/fields/QrField/QrInput.module.sass

@@ -0,0 +1,5 @@
+.QrScannerWrapper
+  background: var(--color-background)
+
+  svg
+    stroke: #29A383 !important

package/src/forms/fields/QrField/QrInput.tsx

@@ -0,0 +1,144 @@
+import { Button, Card, IconButton, RiIcon, Spinner } from "@overmap-ai/blocks"
+import * as RadixDialog from "@radix-ui/react-dialog"
+import QrScannerAPI from "qr-scanner"
+import { memo, useCallback, useEffect, useRef, useState } from "react"
+
+import { InputWithLabel, InputWithLabelAndHelpText, useFormikInput } from "../BaseField"
+import { ComponentProps } from "../typings"
+import { QrField } from "./QrField"
+
+export const QrInput = memo((props: ComponentProps<QrField>) => {
+	const [{ inputId, labelId, label, helpText, size, severity, showInputOnly, field, fieldProps }, rest] =
+		useFormikInput(props)
+	const [showQrScanner, setShowQrScanner] = useState<boolean>(false)
+
+	const value = fieldProps.value
+
+	const handleQrScan = useCallback(
+		(data: string) => {
+			// we have to "mock" out a change event here since its what expected from the BaseField
+			fieldProps.onChange({ target: { value: data } })
+			// closing the scanner on succesfull scan
+			setShowQrScanner(false)
+		},
+		[fieldProps],
+	)
+
+	const handleClearScanResult = useCallback(() => {
+		fieldProps.onChange({ target: { value: "" } })
+	}, [fieldProps])
+
+	const handleScanButtonClicked = useCallback(() => {
+		setShowQrScanner(true)
+	}, [])
+
+	const handleQrScannerClose = useCallback(() => {
+		setShowQrScanner(false)
+	}, [])
+
+	return (
+		<InputWithLabelAndHelpText helpText={helpText} severity={severity}>
+			<InputWithLabel
+				size={size}
+				severity={severity}
+				inputId={inputId}
+				labelId={labelId}
+				label={label}
+				image={showInputOnly ? undefined : field.image}
+				className="flex-col items-start justify-start gap-1"
+			>
+				<RadixDialog.Root open={showQrScanner} onOpenChange={setShowQrScanner}>
+					<RadixDialog.Portal>
+						<RadixDialog.Overlay className="light:bg-(--black-a6) fixed inset-0 dark:bg-(--black-a8)" />
+						<RadixDialog.Content className="fixed inset-0">
+							<QrScanner onQrScan={handleQrScan} onClose={handleQrScannerClose} />
+						</RadixDialog.Content>
+					</RadixDialog.Portal>
+				</RadixDialog.Root>
+
+				<div className="flex w-max items-center gap-1">
+					<Button {...rest} variant="soft" onClick={handleScanButtonClicked}>
+						<RiIcon icon="RiQrCodeLine" />
+						Scan
+					</Button>
+					{value && (
+						<span className="text-xs text-(--accent-a11)" data-accent-color="primary">
+							<RiIcon icon="RiCheckLine" style={{ verticalAlign: "bottom" }} />
+						</span>
+					)}
+				</div>
+
+				{!!value && (
+					<Card>
+						<div className="w-max items-center gap-2">
+							<code className="bg-(--base-a3)">{value}</code>
+							<IconButton
+								accentColor="base"
+								variant="ghost"
+								aria-label="delete"
+								size="sm"
+								onClick={handleClearScanResult}
+							>
+								<RiIcon icon="RiCloseLine" />
+							</IconButton>
+						</div>
+					</Card>
+				)}
+			</InputWithLabel>
+		</InputWithLabelAndHelpText>
+	)
+})
+QrInput.displayName = "QrInput"
+
+interface QrScannerProps {
+	onQrScan: (data: string) => void
+	onClose: () => void
+}
+
+export const QrScanner = memo((props: QrScannerProps) => {
+	const { onQrScan, onClose } = props
+	const videoRef = useRef<HTMLVideoElement>(null)
+	const [isScannerLoading, setIsScannerLoading] = useState<boolean>(false)
+
+	useEffect(() => {
+		if (!videoRef.current) return
+
+		const qrScanner = new QrScannerAPI(
+			videoRef.current,
+			(result) => {
+				const data = result.data
+				onQrScan(data)
+				qrScanner.destroy()
+			},
+			{
+				highlightCodeOutline: true,
+				highlightScanRegion: true,
+				maxScansPerSecond: 1,
+			},
+		)
+		setIsScannerLoading(true)
+		// returns a promise when the scanner is ready
+		void qrScanner.start().finally(() => {
+			setIsScannerLoading(false)
+		})
+	}, [onQrScan])
+
+	return (
+		<div className="relative flex h-full w-full flex-col justify-center gap-2 bg-(--color-background)">
+			<div className="absolute top-0 flex w-full p-2">
+				<IconButton aria-label="close" variant="soft" accentColor="base" onClick={onClose}>
+					<RiIcon icon="RiCloseLine" />
+				</IconButton>
+			</div>
+			<div className="relative max-h-full max-w-full">
+				<video ref={videoRef} style={{ width: "100%", height: "100%" }}></video>
+				{isScannerLoading && (
+					<div className="absolute inset-0 flex items-center justify-center bg-(--color-background)">
+						<Spinner />
+					</div>
+				)}
+			</div>
+		</div>
+	)
+})
+QrScanner.displayName = "QrScanner"

package/src/forms/fields/QrField/index.ts

@@ -0,0 +1,2 @@
+export * from "./QrField"
+export * from "./QrInput"

package/src/forms/fields/SelectField/BaseSelectField.ts

@@ -0,0 +1,73 @@
+import { FieldValue, SelectFieldOption } from "../../typings"
+import { BaseField, ChildFieldOptions } from "../BaseField"
+import { MultiStringField } from "../MultiStringField"
+
+/**
+ * The options passed to the constructor of SelectField.
+ */
+export interface BaseSelectFieldOptions<TValue, TIdentifier extends "select" | "multi-select">
+	extends ChildFieldOptions<TValue> {
+	/** When instantiating a SelectField, you can either pass an array of strings or an array of objects. User-created
+	 * forms only support arrays of strings. For more complex internal purposes, you can provide an array of objects
+	 * where the `label` is the text to display to the user and the `value` is the value handled by Formik.*/
+	options: string[] | SelectFieldOption[]
+	type: TIdentifier
+	placeholder?: string
+}
+
+export abstract class BaseSelectField<
+	TValue extends FieldValue,
+	TIdentifier extends "select" | "multi-select",
+> extends BaseField<TValue, TIdentifier> {
+	public readonly options: SelectFieldOption[]
+	public readonly onlyValidateAfterTouched = false
+	public readonly placeholder: string
+
+	protected constructor(options: BaseSelectFieldOptions<TValue, TIdentifier>) {
+		const { placeholder = "", ...base } = options
+		super(base)
+		this.placeholder = placeholder
+		// SelectField supports two types of options: string[] and { value: string, identifier: string }[]. If
+		const encounteredIds = new Set<string>()
+		this.options = options.options.map((option: string | SelectFieldOption): SelectFieldOption => {
+			if (typeof option === "string") {
+				option = { label: option, value: option }
+			}
+			encounteredIds.add(option.label)
+			return option
+		})
+		if (encounteredIds.size !== options.options.length) {
+			// TODO: Determine if we need to prevent this.
+			console.error(
+				`${
+					options.options.length - encounteredIds.size
+				} duplicate identifiers found in options. This may cause unexpected behavior. Options:`,
+				options.options,
+			)
+		}
+	}
+
+	protected _serialize() {
+		return {
+			...super._serialize(),
+			options: this.options,
+			placeholder: this.placeholder,
+		}
+	}
+
+	static getFieldCreationSchema(parentPath = "") {
+		const path = parentPath && `${parentPath}.`
+		return [
+			{
+				field: new MultiStringField({
+					label: "Options",
+					description: "List possible options for the user to select from.",
+					required: true,
+					identifier: `${path}options`,
+					minimum_length: 2,
+				}),
+				showDirectly: true,
+			},
+		]
+	}
+}