@overmap-ai/forms 0.0.1-master.3

package/src/forms/builder/FieldBuilder.tsx

@@ -0,0 +1,386 @@
+import {
+	Badge,
+	Button,
+	Checkbox,
+	IconButton,
+	Input,
+	Popover,
+	RiIcon,
+	Separator,
+	Text,
+	TextArea,
+} from "@overmap-ai/blocks"
+import { ISerializedOnlyField } from "@overmap-ai/core"
+import { useFormikContext } from "formik"
+import get from "lodash.get"
+import { ChangeEvent, FC, memo, MouseEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+import { SEVERITY_COLOR_MAPPING } from "../constants"
+import { FullScreenImagePreview } from "../constantsJsx"
+import { deserialize, FieldCreationSchemaObject, useFieldInput, useFieldInputs, valueIsFile } from "../fields"
+import { BaseField, BaseFormElement, FieldSection } from "../fields"
+import { PatchField } from "../renderer"
+import { FieldTypeIdentifier, ISerializedField, SelectFieldOption, SerializedFieldSection } from "../typings"
+import { hasKeys } from "../utils"
+import { CompleteFieldTypeToClsMapping, formId } from "./constants"
+import { useFieldTypeItems } from "./hooks"
+import { FormikUserFormRevision, NestedFieldPath } from "./typings"
+import { findFieldByIdentifier } from "./utils"
+
+// Type guard to check if initial is a FieldSection. We access initial.conditional or initial.image a few times
+// 	so the type guard lets TypeScript know that conditional or image exists on initial or not
+const isSection = (field: ISerializedField): field is SerializedFieldSection => {
+	return field.type === "section"
+}
+
+interface FieldSettingsPopoverProps {
+	popoverInputs: ReactNode
+	hasError: boolean
+}
+
+const FieldSettingsPopover = memo((props: FieldSettingsPopoverProps) => {
+	const { popoverInputs, hasError } = props
+	return (
+		<Popover.Root>
+			<Popover.Trigger>
+				<Button
+					key="settings"
+					variant="soft"
+					size="sm"
+					aria-label="settings"
+					{...(hasError && { color: SEVERITY_COLOR_MAPPING.danger })}
+				>
+					<RiIcon icon="RiSettings2Line" />
+					<span>Settings</span>
+				</Button>
+			</Popover.Trigger>
+			<Popover.Content size="sm">
+				<div className="flex max-w-[240px] flex-col">{popoverInputs}</div>
+			</Popover.Content>
+		</Popover.Root>
+	)
+})
+
+FieldSettingsPopover.displayName = "FieldSettingsPopover"
+
+export interface FieldBuilderProps {
+	index: number
+	parentPath: NestedFieldPath
+	initial: ISerializedField
+	conditionalSourceFields?: ISerializedField[]
+}
+
+export const FieldBuilder: FC<FieldBuilderProps> = memo((props: FieldBuilderProps) => {
+	const { parentPath, index, initial, conditionalSourceFields } = props
+	const { values, setFieldValue, errors } = useFormikContext<FormikUserFormRevision>()
+	const fieldTypeItems = useFieldTypeItems()
+
+	const containerRef = useRef<HTMLDivElement>(null)
+	// The min-width value is the same as $screen-sm-min for small tablets and large smartphones (landscape view) in _variables.sass of hemora-web
+	const RADIX_SM_MIN_WIDTH = 576 // px
+	const [isLargeContainer, setIsLargeContainer] = useState(
+		containerRef.current && containerRef.current.getBoundingClientRect().width >= RADIX_SM_MIN_WIDTH,
+	)
+
+	useEffect(() => {
+		const container = containerRef.current
+		if (container) {
+			const observer = new ResizeObserver((entries) => {
+				// There is only one entry since we only observe the container
+				if (entries[0]) {
+					setIsLargeContainer(entries[0].contentRect.width >= RADIX_SM_MIN_WIDTH)
+				}
+			})
+
+			observer.observe(container)
+
+			return () => {
+				observer.disconnect()
+			}
+		}
+	}, [])
+
+	const [resolvedImage, setResolvedImage] = useState<File | undefined>(undefined)
+	const [showImagePreview, setShowImagePreview] = useState<boolean>(false)
+
+	useEffect(() => {
+		// Images only exist on non-section fields
+		if (!isSection(initial)) {
+			if (initial.image instanceof Promise) {
+				initial.image.then(setResolvedImage).catch(console.error)
+			} else {
+				setResolvedImage(initial.image)
+			}
+		} else {
+			setResolvedImage(undefined)
+		}
+	}, [initial])
+
+	const resolvedImageURL = resolvedImage ? URL.createObjectURL(resolvedImage) : undefined
+
+	const handleImageDelete = useCallback(
+		(event: MouseEvent<HTMLButtonElement>) => {
+			event.stopPropagation()
+			// Remove image attribute from initial
+			const { image: _, ...fieldWithoutImage } = initial as ISerializedOnlyField
+			void setFieldValue(`${parentPath}.${index}`, fieldWithoutImage).then()
+		},
+		[index, initial, parentPath, setFieldValue],
+	)
+
+	// Set condition field of field section to null if conditional is set to false
+	useEffect(() => {
+		if (isSection(initial) && !initial.conditional) {
+			void setFieldValue(`${parentPath}.${index}.condition`, null).then()
+		}
+	}, [index, initial, parentPath, setFieldValue])
+
+	const conditionLabel = useMemo(
+		() =>
+			isSection(initial) ? findFieldByIdentifier(values.fields, initial.condition?.identifier)?.label : undefined,
+		[initial, values.fields],
+	)
+	const conditionComparison = isSection(initial)
+		? Array.isArray(initial.condition?.value)
+			? "contains all of"
+			: "equals"
+		: undefined
+
+	let conditionValue: string | undefined = undefined
+	if (isSection(initial)) {
+		if (valueIsFile(initial.condition?.value)) {
+			throw new Error("File values are not supported for conditions.")
+		}
+		conditionValue = Array.isArray(initial.condition?.value)
+			? initial.condition.value
+					.map((v: string | SelectFieldOption) => (typeof v === "string" ? v : v.label))
+					.join(", ")
+			: initial.condition?.value?.toString()
+	}
+
+	// Needed for the growing input and text-areas to work. The functions are separated because TypeScript gives incompatible
+	//	type errors when event is ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+	const handleInputChangeForInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+		if (event.target.parentNode instanceof HTMLElement) {
+			event.target.parentNode.dataset.replicatedValue = event.target.value
+		}
+	}, [])
+	const handleInputChangeForTextArea = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
+		if (event.target.parentNode instanceof HTMLElement) {
+			event.target.parentNode.dataset.replicatedValue = event.target.value
+		}
+	}, [])
+
+	const type = initial.type
+	const fieldCls = CompleteFieldTypeToClsMapping[type as FieldTypeIdentifier]
+	// TODO: TypeScript thinks directlyShownFields and popoverFields can be undefined even though that is untrue.
+	// 	Remove the many non-null assertion operators in this file used for directlyShownFields and popoverFields
+	const [directlyShownFields, popoverFields]: BaseFormElement[][] = useMemo<BaseFormElement[][]>(() => {
+		let directlyShownFields: BaseFormElement[] = []
+		let popoverFields: BaseFormElement[] = []
+		if (fieldCls === FieldSection) {
+			if (conditionalSourceFields === undefined) {
+				throw new Error("Conditional source fields must be provided when changing sections.")
+			}
+			const fieldObject = fieldCls.getFieldCreationSchema(conditionalSourceFields, `${parentPath}.${index}`)
+
+			directlyShownFields = directlyShownFields.concat(
+				fieldObject.filter((field) => field.showDirectly).map((field) => field.field),
+			)
+			popoverFields = popoverFields.concat(
+				fieldObject.filter((field) => !field.showDirectly).map((field) => field.field),
+			)
+		} else {
+			if (!(fieldCls.prototype instanceof BaseField)) {
+				throw new Error(`Field must be an instance of BaseField. Got ${fieldCls.toString()}.`)
+			}
+
+			// We now know that this is not a FieldSection. We need to tell TypeScript that.
+			type FieldClass = Exclude<typeof fieldCls, typeof FieldSection>
+			const fieldObject: FieldCreationSchemaObject[] = (fieldCls as FieldClass).getFieldCreationSchema(
+				`${parentPath}.${index}`,
+			)
+
+			if (isLargeContainer) {
+				directlyShownFields = [
+					...directlyShownFields,
+					...fieldObject.filter((field) => field.showDirectly).map((field) => field.field),
+				]
+				popoverFields = [
+					...popoverFields,
+					...fieldObject.filter((field) => !field.showDirectly).map((field) => field.field),
+				]
+			} else {
+				// Show everything as a popoverField
+				popoverFields = [...popoverFields, ...fieldObject.map((field) => field.field)]
+			}
+		}
+
+		return [directlyShownFields, popoverFields]
+	}, [fieldCls, conditionalSourceFields, parentPath, index, isLargeContainer])
+
+	const directlyShownInputs = useFieldInputs(directlyShownFields!, {
+		formId,
+		disabled: false,
+		internal: true,
+		...(fieldCls === FieldSection && { size: "sm" }),
+	})
+	const popoverInputs = useFieldInputs(popoverFields!, {
+		formId,
+		disabled: false,
+	})
+
+	let showPopoverInputs = popoverFields!.length > 0
+	// For sections, don't show popoverInputs if its conditional is null or false since the popover would show an empty div
+	if (isSection(initial) && popoverFields!.length > 0) {
+		showPopoverInputs = initial.conditional
+	}
+
+	const popoverHasErrors = popoverFields!.some((field) => {
+		const error = get(errors, fieldCls === FieldSection ? `${parentPath}.${index}.condition` : field.getId()) as
+			| string
+			| object
+		return error && (typeof error !== "object" || hasKeys(error))
+	})
+	const color = popoverHasErrors ? SEVERITY_COLOR_MAPPING.danger : undefined
+
+	const deserializedField = useMemo(() => deserialize(initial), [initial])
+	const previewInput = useFieldInput(deserializedField, { formId, showInputOnly: false })
+
+	return (
+		<div className="flex grow items-center w-full" ref={containerRef}>
+			<div className="flex w-full flex-col gap-4">
+				{fieldCls === FieldSection && (
+					<div className="flex flex-col gap-2">
+						{directlyShownFields!.length > 0 && directlyShownInputs}
+						<div className="flex items-center gap-4">
+							{showPopoverInputs && (
+								<FieldSettingsPopover popoverInputs={popoverInputs} hasError={popoverHasErrors} />
+							)}
+							{isSection(initial) && initial.conditional && (
+								<span className="text-sm text-(--accent-a11)" data-accent-color={color}>
+									<em>
+										Display only if <strong>{conditionLabel}</strong> {conditionComparison}{" "}
+										<strong>{conditionValue}</strong>
+									</em>
+								</span>
+							)}
+						</div>
+					</div>
+				)}
+				{fieldCls !== FieldSection && (
+					<div className="flex gap-2 w-full justify-between">
+						<div className="flex gap-2 items-center">
+							<Badge className="w-fit" accentColor="base" variant="soft">
+								{fieldTypeItems.flat().find((item) => item.value === type)?.children}
+							</Badge>
+							<PatchField
+								name={`${parentPath}.${index}.required`}
+								render={({ setValue, value }) => (
+									<div className="flex items-center gap-2">
+										<Checkbox.Root
+											checked={value as boolean}
+											onCheckedChange={setValue}
+											variant="soft"
+										>
+											<Checkbox.Indicator>
+												<RiIcon icon="RiCheckLine" />
+											</Checkbox.Indicator>
+										</Checkbox.Root>
+										<Text size="sm" accentColor="base">
+											Required field
+										</Text>
+									</div>
+								)}
+							/>
+						</div>
+						{showPopoverInputs && (
+							<FieldSettingsPopover popoverInputs={popoverInputs} hasError={popoverHasErrors} />
+						)}
+					</div>
+				)}
+				{resolvedImage && (
+					<>
+						<div className="group relative inline-block w-full min-w-[300px]">
+							<img
+								className="h-[100px] w-full min-w-[300px] cursor-pointer rounded-md object-cover"
+								src={resolvedImageURL}
+								alt={resolvedImage.name}
+								onClick={() => {
+									setShowImagePreview(true)
+								}}
+							/>
+							<IconButton
+								className="absolute top-2 right-2 hidden group-hover:not-disabled:flex"
+								variant="solid"
+								accentColor={SEVERITY_COLOR_MAPPING.danger}
+								aria-label="delete"
+								onClick={handleImageDelete}
+							>
+								<RiIcon icon="RiDeleteBin2Line" />
+							</IconButton>
+						</div>
+						{showImagePreview && (
+							<FullScreenImagePreview
+								file={resolvedImage}
+								url={resolvedImageURL!}
+								name={resolvedImage.name}
+								setShowPreview={setShowImagePreview}
+							/>
+						)}
+					</>
+				)}
+				<PatchField
+					name={`${parentPath}.${index}.label`}
+					render={({ setValue, value }) => (
+						<Input.Root size="md" variant="outline">
+							<Input.Field
+								placeholder={
+									type === "section" ? "Enter a section label (optional)" : "Enter your question"
+								}
+								value={value as string}
+								onChange={(event) => {
+									setValue(event.target.value)
+								}}
+								onInput={handleInputChangeForInput}
+								maxLength={200}
+							/>
+						</Input.Root>
+					)}
+				/>
+
+				<PatchField
+					name={`${parentPath}.${index}.description`}
+					render={({ setValue, value }) => (
+						<TextArea
+							className="field-sizing-content grow"
+							placeholder={`Enter a ${type === "section" ? "section" : "field"} description (optional)`}
+							value={value as string}
+							onChange={(event) => {
+								setValue(event.target.value)
+							}}
+							onInput={handleInputChangeForTextArea}
+							resize="none"
+							maxLength={1000}
+							variant="outline"
+						/>
+					)}
+				/>
+				{fieldCls !== FieldSection && directlyShownFields!.length > 0 && (
+					<div className="w-full">{directlyShownInputs}</div>
+				)}
+				{fieldCls !== FieldSection && (
+					<>
+						<Separator size="full" />
+						<div className="flex flex-col gap-2">
+							<Text accentColor="base">Field preview</Text>
+							<div>{previewInput}</div>
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	)
+})
+
+FieldBuilder.displayName = "FieldBuilder"

package/src/forms/builder/FieldSectionWithActions.tsx

@@ -0,0 +1,260 @@
+import { Draggable, Droppable } from "@hello-pangea/dnd"
+import { Button, Card, Menu, RiIcon, useAlertDialog } from "@overmap-ai/blocks"
+import { useFormikContext } from "formik"
+import { memo, useCallback, useMemo } from "react"
+
+import { FieldTypeToEmptyFieldMapping } from "../fields/constants"
+import { FieldTypeIdentifier, SerializedFieldSection } from "../typings"
+import { DropState } from "./DropDispatch"
+import { FieldActions } from "./FieldActions"
+import { FieldBuilder, FieldBuilderProps } from "./FieldBuilder"
+import { FieldWithActions } from "./FieldWithActions"
+import { useFieldTypeItems } from "./hooks"
+import { FormikUserFormRevision } from "./typings"
+import {
+	createNewField,
+	makeConditionalSourceFields,
+	makeIdentifier,
+	NewFieldInitialValues,
+	remove,
+	useFieldReordering,
+} from "./utils"
+
+interface FieldSectionWithActionsProps {
+	field: SerializedFieldSection
+	index: number
+	dropState: DropState
+	fieldsOnly: boolean
+}
+
+export const FieldSectionWithActions = memo((props: FieldSectionWithActionsProps) => {
+	const { field, index: sectionIndex, dropState, fieldsOnly } = props
+	const isDropDisabled = dropState[field.identifier]?.disabled
+	const { setFieldValue, values } = useFormikContext<FormikUserFormRevision>()
+	const alertDialog = useAlertDialog()
+	const { reorderSection } = useFieldReordering()
+
+	const removeSectionConditions = useCallback(
+		(sectionsToUpdate: SerializedFieldSection[], allSections: SerializedFieldSection[]) => {
+			for (const section of sectionsToUpdate) {
+				const sectionIndex = allSections.indexOf(section)
+				void setFieldValue(`fields.${sectionIndex}.condition`, null).then()
+				void setFieldValue(`fields.${sectionIndex}.conditional`, false).then()
+			}
+		},
+		[setFieldValue],
+	)
+
+	const makeRemoveFieldAction = useCallback(
+		(fieldIndex: number) => {
+			const removing = field.fields[fieldIndex]
+			if (!removing) throw new Error("Could not find field to remove.")
+
+			// check if field is being used as a condition
+			const sectionsWithMatchingCondition: SerializedFieldSection[] = []
+			for (const section of values.fields) {
+				if (section.condition?.identifier === removing.identifier) {
+					sectionsWithMatchingCondition.push(section)
+				}
+			}
+
+			return {
+				removing,
+				affectedSections: sectionsWithMatchingCondition,
+				action: () => setFieldValue(`fields.${sectionIndex}.fields`, remove(field.fields, fieldIndex)),
+			}
+		},
+		[field.fields, values.fields, setFieldValue, sectionIndex],
+	)
+
+	const removeField = useCallback(
+		(i: number) => {
+			const { affectedSections, action, removing } = makeRemoveFieldAction(i)
+
+			const cmd = () => {
+				void action().then()
+				removeSectionConditions(affectedSections, values.fields)
+			}
+
+			if (affectedSections.length > 0) {
+				const labels = affectedSections.map((section) => section.label).join(", ")
+				alertDialog({
+					title: "Remove condition?",
+					description: `${removing.label} is being used as a condition, deleting it will remove the condition from the ${labels} section(s).`,
+					action: "Remove",
+					onAction: cmd,
+				})
+				return
+			}
+
+			// not a condition, remove field
+			cmd()
+		},
+		[makeRemoveFieldAction, removeSectionConditions, values.fields, alertDialog],
+	)
+
+	const removeSection = useCallback(() => {
+		const fieldSideEffects = field.fields.map((_, i) => makeRemoveFieldAction(i))
+		const affectedSections = fieldSideEffects.flatMap((sideEffect) => sideEffect.affectedSections)
+
+		const title = affectedSections.length ? "Remove fields and conditions?" : "Remove fields?"
+		const numFields = field.fields.length
+		const sectionLabels = affectedSections.map((section) => section.label).join(", ")
+		const description = affectedSections.length
+			? `Deleting this section will remove the ${numFields} field(s) it contains and will remove the conditions from following sections: ${sectionLabels}`
+			: `Deleting this section will remove the ${numFields} field(s) it contains.`
+
+		const updatedSections = remove(values.fields, sectionIndex)
+		const cmd = () => setFieldValue("fields", updatedSections)
+
+		if (affectedSections.length > 0) {
+			alertDialog({
+				title,
+				description,
+				action: "Remove",
+				onAction: () => {
+					// remove the section (and fields)
+					void cmd().then(() => {
+						// remove conditions from affected sections
+						removeSectionConditions(affectedSections, updatedSections)
+					})
+				},
+			})
+			return
+		}
+
+		// if no side effects for other sections, just remove the section
+		void cmd().then()
+	}, [
+		field.fields,
+		values.fields,
+		sectionIndex,
+		makeRemoveFieldAction,
+		setFieldValue,
+		alertDialog,
+		removeSectionConditions,
+	])
+
+	const moveSection = useCallback(
+		(direction: "up" | "down") => {
+			const destinationIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1
+			reorderSection(dropState, field.identifier, sectionIndex, destinationIndex, values, setFieldValue)
+		},
+		[sectionIndex, reorderSection, dropState, field.identifier, values, setFieldValue],
+	)
+
+	const editSectionProps: FieldBuilderProps = useMemo(
+		() => ({
+			index: sectionIndex,
+			parentPath: "fields",
+			initial: field,
+			conditionalSourceFields: makeConditionalSourceFields(values.fields, sectionIndex),
+		}),
+		[field, sectionIndex, values.fields],
+	)
+
+	const duplicateSection = useCallback(() => {
+		const fieldLabel = field.label ?? "Untitled section"
+		const newFields = field.fields.map((oldField) => {
+			// Make new identifiers now as they will not be made later
+			return {
+				...oldField,
+				identifier: makeIdentifier(null, oldField.label),
+			}
+		})
+
+		const duplicatedField = { ...field, label: fieldLabel, fields: newFields }
+		createNewField("fields", sectionIndex + 1, duplicatedField, values, setFieldValue)
+	}, [field, sectionIndex, values, setFieldValue])
+
+	const handleCreateField = useCallback(
+		(type: Exclude<FieldTypeIdentifier, "section">) => {
+			createNewField(
+				`fields.${sectionIndex}.fields`,
+				field.fields.length,
+				FieldTypeToEmptyFieldMapping[type] as NewFieldInitialValues,
+				values,
+				setFieldValue,
+			)
+		},
+		[sectionIndex, field.fields.length, values, setFieldValue],
+	)
+
+	const fieldTypeItems = useFieldTypeItems(handleCreateField)
+
+	return (
+		<Draggable draggableId={field.identifier} index={sectionIndex}>
+			{(draggableProvided) => {
+				return (
+					<Card
+						// using margin bottom instead of flex gap to avoid a bug where the
+						// gap is not applied to dragged elements
+						ref={draggableProvided.innerRef}
+						{...draggableProvided.draggableProps}
+						{...draggableProvided.dragHandleProps}
+						variant="outline"
+						className="mb-4 w-full"
+					>
+						<div className="flex items-center justify-between gap-3 w-full">
+							<div className="flex grow flex-col gap-2 w-full">
+								{!fieldsOnly && <FieldBuilder {...editSectionProps} />}
+								<Droppable
+									droppableId={field.identifier}
+									type="SECTION"
+									isDropDisabled={isDropDisabled}
+								>
+									{(droppableProvided) => (
+										<div
+											className="flex flex-col gap-0 w-full"
+											ref={droppableProvided.innerRef}
+											{...droppableProvided.droppableProps}
+										>
+											{field.fields.map((child, i) => (
+												<FieldWithActions
+													key={child.identifier}
+													field={child}
+													index={i}
+													sectionIndex={sectionIndex}
+													remove={() => {
+														removeField(i)
+													}}
+												/>
+											))}
+											{droppableProvided.placeholder}
+											<Menu.Root>
+												<Menu.ClickTrigger>
+													<Button type="button" variant="solid">
+														<RiIcon icon="RiAddLine" /> Add field
+													</Button>
+												</Menu.ClickTrigger>
+												<Menu.Content>
+													{fieldTypeItems.flat().map((item) => (
+														<Menu.Item key={item.value} onSelect={item.onSelect}>
+															{item.leftSlot}
+															{item.children}
+														</Menu.Item>
+													))}
+												</Menu.Content>
+											</Menu.Root>
+										</div>
+									)}
+								</Droppable>
+							</div>
+							{!fieldsOnly && (
+								<FieldActions
+									index={sectionIndex}
+									type={field.type}
+									remove={removeSection}
+									duplicate={duplicateSection}
+									move={moveSection}
+								/>
+							)}
+						</div>
+					</Card>
+				)
+			}}
+		</Draggable>
+	)
+})
+
+FieldSectionWithActions.displayName = "FieldSectionWithActions"