@overmap-ai/forms 0.0.1-master.3

package/src/forms/fields/SelectField/MultiSelectField.tsx

@@ -0,0 +1,53 @@
+import { ReactNode } from "react"
+import { RiCheckboxLine } from "react-icons/ri"
+
+import { ISerializedField, SelectFieldOptionValue, SerializedMultiSelectField } from "../../typings"
+import { emptyBaseField } from "../BaseField"
+import { GetInputProps } from "../typings"
+import { BaseSelectField, BaseSelectFieldOptions } from "./BaseSelectField"
+import { MultiSelectInput } from "./MultiSelectInput"
+
+/**
+ * The options passed to the constructor of MultiSelectField.
+ */
+export type MultiSelectFieldOptions = Omit<BaseSelectFieldOptions<SelectFieldOptionValue[], "multi-select">, "type">
+
+export const emptyMultiSelectField = {
+	...emptyBaseField,
+	type: "multi-select",
+	options: [],
+}
+
+export class MultiSelectField extends BaseSelectField<SelectFieldOptionValue[], "multi-select"> {
+	static readonly fieldTypeName = "Multi-select"
+	static readonly fieldTypeDescription = "Allows the user to select a multiple options from a list of options."
+
+	static Icon: typeof RiCheckboxLine = RiCheckboxLine
+
+	public constructor(options: MultiSelectFieldOptions) {
+		const { placeholder = "Select one or more...", ...rest } = options
+		super({ ...rest, placeholder, type: "multi-select" })
+	}
+
+	public getValueFromChangeEvent(event: React.ChangeEvent<HTMLInputElement> | string[]): string[] {
+		if (Array.isArray(event)) return event
+		throw new Error("Expected an array.")
+	}
+
+	protected isBlank(value: SelectFieldOptionValue[]): boolean {
+		return super.isBlank(value) || value.length === 0
+	}
+
+	serialize(): SerializedMultiSelectField {
+		return super._serialize()
+	}
+
+	static deserialize(data: ISerializedField): MultiSelectField {
+		if (data.type !== "multi-select") throw new Error("Type mismatch.")
+		return new MultiSelectField(data)
+	}
+
+	getInput(props: GetInputProps<this>): ReactNode {
+		return <MultiSelectInput field={this} {...props} />
+	}
+}

package/src/forms/fields/SelectField/MultiSelectInput.tsx

@@ -0,0 +1,80 @@
+import { Button, Menu, RiIcon } from "@overmap-ai/blocks"
+import { memo, useCallback, useMemo } from "react"
+
+import { InputWithLabel, InputWithLabelAndHelpText, useFormikInput } from "../BaseField"
+import { ComponentProps } from "../typings"
+import { MultiSelectField } from "./MultiSelectField"
+
+const parseValueToArray = (value: string[] | string): string[] => {
+	if (!value) return []
+	if (Array.isArray(value)) return value
+	return [value]
+}
+
+export const MultiSelectInput = memo((props: ComponentProps<MultiSelectField>) => {
+	const [{ inputId, labelId, size, severity, showInputOnly, field, fieldProps }, rest] = useFormikInput(props)
+	const { onChange, onBlur } = fieldProps
+	let [{ helpText, label }] = useFormikInput(props)
+	helpText = showInputOnly ? null : helpText
+	label = showInputOnly ? "" : label
+
+	const value = useMemo(() => parseValueToArray(fieldProps.value), [fieldProps.value])
+
+	const handleChange = useCallback(
+		(value: string[]) => {
+			onChange(value)
+			onBlur(value)
+		},
+		[onChange, onBlur],
+	)
+
+	return (
+		<InputWithLabelAndHelpText helpText={helpText} severity={severity}>
+			<InputWithLabel
+				size={size}
+				severity={severity}
+				inputId={inputId}
+				labelId={labelId}
+				label={label}
+				image={showInputOnly ? undefined : field.image}
+			>
+				<Menu.Root>
+					<Menu.ClickTrigger>
+						<Button
+							id={inputId}
+							className="!justify-between"
+							name={fieldProps.name}
+							variant="soft"
+							{...rest}
+						>
+							{value.length > 0 ? value.join(", ") : field.placeholder}
+							<RiIcon icon="RiArrowDownSLine" />
+						</Button>
+					</Menu.ClickTrigger>
+					<Menu.Content>
+						<Menu.MultiSelectGroup values={value} onValuesChange={handleChange}>
+							<Menu.SelectAllItem allValues={field.options.map(({ value }) => value)}>
+								<Menu.SelectAllIndicator>
+									{(indeterminate) =>
+										indeterminate ? <RiIcon icon="RiSubtractLine" /> : <RiIcon icon="RiCheckLine" />
+									}
+								</Menu.SelectAllIndicator>
+								Select all
+							</Menu.SelectAllItem>
+							{field.options.map((option) => (
+								<Menu.MultiSelectItem key={option.value} value={option.value}>
+									<Menu.SelectedIndicator>
+										<RiIcon icon="RiCheckLine" />
+									</Menu.SelectedIndicator>
+									{option.label}
+								</Menu.MultiSelectItem>
+							))}
+						</Menu.MultiSelectGroup>
+					</Menu.Content>
+				</Menu.Root>
+			</InputWithLabel>
+		</InputWithLabelAndHelpText>
+	)
+})
+
+MultiSelectInput.displayName = "MultiSelectInput"

package/src/forms/fields/SelectField/SelectField.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent, ReactNode } from "react"
+import { RiMenuFoldLine } from "react-icons/ri"
+
+import { ISerializedField, SelectFieldOptionValue, SerializedSelectField } from "../../typings"
+import { emptyBaseField } from "../BaseField"
+import { GetInputProps } from "../typings"
+import { BaseSelectField, BaseSelectFieldOptions } from "./BaseSelectField"
+import { SelectInput } from "./SelectInput"
+
+/**
+ * The options passed to the constructor of SelectField.
+ */
+export type SelectFieldOptions = Omit<BaseSelectFieldOptions<SelectFieldOptionValue, "select">, "type">
+
+export const emptySelectField = {
+	...emptyBaseField,
+	type: "select",
+	options: [],
+}
+
+export class SelectField extends BaseSelectField<SelectFieldOptionValue, "select"> {
+	static readonly fieldTypeName = "Dropdown"
+	static readonly fieldTypeDescription = "Allows the user to select a single option from a list of options."
+
+	static Icon: typeof RiMenuFoldLine = RiMenuFoldLine
+
+	public constructor(options: SelectFieldOptions) {
+		const { placeholder = "Select one...", ...rest } = options
+		super({ ...rest, placeholder, type: "select" })
+	}
+
+	public getValueFromChangeEvent(event: ChangeEvent<HTMLInputElement> | string): SelectFieldOptionValue {
+		if (typeof event === "string") return event
+		return event.target.value
+	}
+
+	serialize(): SerializedSelectField {
+		return super._serialize()
+	}
+
+	static deserialize(data: ISerializedField): SelectField {
+		if (data.type !== "select") throw new Error("Type mismatch.")
+		return new SelectField(data)
+	}
+
+	getInput(props: GetInputProps<this>): ReactNode {
+		return <SelectInput field={this} {...props} />
+	}
+}

package/src/forms/fields/SelectField/SelectInput.tsx

@@ -0,0 +1,69 @@
+import { Button, Menu, RiIcon } from "@overmap-ai/blocks"
+import { memo, useCallback } from "react"
+
+import { SEVERITY_COLOR_MAPPING } from "../../constants"
+import { InputWithLabel, InputWithLabelAndHelpText, useFormikInput } from "../BaseField"
+import { ComponentProps } from "../typings"
+import { SelectField } from "./SelectField"
+
+export const SelectInput = memo((props: ComponentProps<SelectField>) => {
+	const [{ inputId, labelId, size, severity, showInputOnly, field, fieldProps }, rest] = useFormikInput(props)
+	const { onChange, onBlur } = fieldProps
+	let [{ helpText, label }] = useFormikInput(props)
+	helpText = showInputOnly ? null : helpText
+	label = showInputOnly ? "" : label
+
+	const handleChange = useCallback(
+		(value: string | null) => {
+			onChange(value)
+			onBlur(value)
+		},
+		[onChange, onBlur],
+	)
+
+	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}
+			>
+				<Menu.Root>
+					<Menu.ClickTrigger>
+						<Button
+							{...fieldProps}
+							className="!justify-between"
+							id={inputId}
+							name={fieldProps.name}
+							accentColor={color}
+							variant="soft"
+							{...rest}
+						>
+							{fieldProps.value ? fieldProps.value : field.placeholder}
+							<RiIcon icon="RiArrowDownSLine" />
+						</Button>
+					</Menu.ClickTrigger>
+					<Menu.Content>
+						<Menu.SelectGroup value={fieldProps.value} onValueChange={handleChange}>
+							{field.options.map((option) => (
+								<Menu.SelectItem key={option.value} value={option.value}>
+									<Menu.SelectedIndicator>
+										<RiIcon icon="RiCheckLine" />
+									</Menu.SelectedIndicator>
+									{option.label}
+								</Menu.SelectItem>
+							))}
+						</Menu.SelectGroup>
+					</Menu.Content>
+				</Menu.Root>
+			</InputWithLabel>
+		</InputWithLabelAndHelpText>
+	)
+})
+
+SelectInput.displayName = "SelectInput"

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

@@ -0,0 +1,4 @@
+export * from "./MultiSelectField"
+export * from "./MultiSelectInput"
+export * from "./SelectField"
+export * from "./SelectInput"

package/src/forms/fields/StringOrTextFields/StringField/StringField.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from "react"
+import { RiInputField } from "react-icons/ri"
+
+import { SHORT_TEXT_FIELD_MAX_LENGTH } from "../../../constants"
+import { ISerializedField, SerializedStringField, StringInputType } from "../../../typings"
+import { emptyBaseField } from "../../BaseField"
+import { GetInputProps } from "../../typings"
+import { StringOrTextField, StringOrTextFieldOptions } from "../StringOrTextField"
+import { StringInput } from "./StringInput"
+
+export interface StringFieldOptions extends Omit<StringOrTextFieldOptions, "type"> {
+	inputType?: StringInputType
+}
+
+export const emptyStringField = {
+	...emptyBaseField,
+	type: "string",
+	maximum_length: SHORT_TEXT_FIELD_MAX_LENGTH,
+	input_type: "text",
+}
+
+export class StringField extends StringOrTextField<"string"> {
+	static readonly fieldTypeName = "Short Text"
+	static readonly fieldTypeDescription = `Short text fields can hold up to ${SHORT_TEXT_FIELD_MAX_LENGTH} characters on a single line.`
+	public readonly inputType: StringInputType
+
+	static Icon: typeof RiInputField = RiInputField
+
+	constructor(options: StringFieldOptions) {
+		const { inputType = "text", ...rest } = options
+		// the field supports a max length no larger than 500
+		const maxLength = options.maxLength
+			? Math.min(SHORT_TEXT_FIELD_MAX_LENGTH, options.maxLength)
+			: SHORT_TEXT_FIELD_MAX_LENGTH
+		// the field supports a min length no larger than the max length
+		const minLength = options.minLength ? Math.min(options.minLength, maxLength) : undefined
+		super({ ...rest, maxLength, minLength, type: "string" })
+
+		this.inputType = inputType
+	}
+
+	serialize(): SerializedStringField {
+		return { ...super._serialize(), input_type: this.inputType }
+	}
+
+	static deserialize(data: ISerializedField): StringField {
+		if (data.type !== "string") throw new Error("Type mismatch.")
+		const { maximum_length, minimum_length, input_type, ...rest } = data
+		return new StringField({
+			...rest,
+			maxLength: maximum_length,
+			minLength: minimum_length,
+			inputType: input_type,
+			placeholder: "Enter a short description",
+		})
+	}
+
+	getInput(props: GetInputProps<this>): ReactNode {
+		return <StringInput field={this} {...props} />
+	}
+}

package/src/forms/fields/StringOrTextFields/StringField/StringInput.tsx

@@ -0,0 +1,41 @@
+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 { StringField } from "./StringField"
+
+export const StringInput = memo((props: ComponentProps<StringField>) => {
+	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={field.inputType}
+						id={inputId}
+						placeholder={field.placeholder}
+					/>
+				</Input.Root>
+			</InputWithLabel>
+		</InputWithLabelAndHelpText>
+	)
+})
+
+StringInput.displayName = "StringInput"

package/src/forms/fields/StringOrTextFields/StringField/index.ts

@@ -0,0 +1,2 @@
+export * from "./StringField"
+export * from "./StringInput"

package/src/forms/fields/StringOrTextFields/StringOrTextField.ts

@@ -0,0 +1,143 @@
+import get from "lodash.get"
+
+import { FormikUserFormRevision } from "../../builder"
+import { LONG_TEXT_FIELD_MAX_LENGTH } from "../../constants"
+import { Form, SerializedStringField } from "../../typings"
+import { BaseField, FieldOptions } from "../BaseField"
+import { NumberField, NumberFieldValue } from "../NumberField"
+import { InputFieldLevelValidator, InputValidator } from "../typings"
+
+export interface StringOrTextFieldOptions extends FieldOptions<string> {
+	minLength?: NumberFieldValue
+	maxLength?: NumberFieldValue
+	placeholder?: string
+}
+
+// NOTE: If changing, also change it in NumberField.ts (avoid circular imports)
+const valueIsFormikUserFormRevision = (form: FormikUserFormRevision | Form): form is FormikUserFormRevision => {
+	return "fields" in form
+}
+
+export type SerializedStringOrTextField<TIdentifier extends "string" | "text"> = Omit<SerializedStringField, "type"> & {
+	type: TIdentifier
+}
+
+export abstract class StringOrTextField<TIdentifier extends "string" | "text"> extends BaseField<string, TIdentifier> {
+	public readonly minLength?: number
+	public readonly maxLength: number
+	public readonly placeholder: string
+
+	protected constructor(options: StringOrTextFieldOptions) {
+		const { minLength, maxLength, placeholder = "", ...base } = options
+		super(base)
+		// lengths must be greater than or equal to 0
+		this.minLength = minLength ? Math.max(minLength, 0) : undefined
+		this.maxLength = maxLength ? Math.max(maxLength, 0) : LONG_TEXT_FIELD_MAX_LENGTH
+		this.placeholder = placeholder
+	}
+
+	/**
+	 * This function returns a function that validates that the value given for "minimum length" (when creating a new field) is less than or
+	 * equal to the value given for "maximum length".
+	 */
+	static _validateMin: (path: string) => InputValidator<NumberFieldValue> = (path: string) => (value, allValues) => {
+		const field = valueIsFormikUserFormRevision(allValues)
+			? (get(allValues, path) as SerializedStringField)
+			: allValues
+		if (typeof field.maximum_length === "number" && typeof value === "number" && field.maximum_length < value) {
+			return "Minimum cannot be greater than maximum."
+		}
+		return null
+	}
+
+	/**
+	 * This function returns a function that validates that the value given for "maximum length" (when creating a new field) is greater than or
+	 * equal to the value given for "minimum length".
+	 */
+	static _validateMax: (path: string) => InputValidator<NumberFieldValue> = (path: string) => (value, allValues) => {
+		if (typeof value !== "number") return null
+
+		const { minimum_length: minimumLength } = valueIsFormikUserFormRevision(allValues)
+			? (get(allValues, path) as SerializedStringField)
+			: allValues
+
+		if (typeof minimumLength !== "number") {
+			return null
+		}
+
+		if (minimumLength > value) {
+			return "Maximum cannot be less than minimum."
+		}
+		return null
+	}
+
+	static getFieldCreationSchema(parentPath = "") {
+		const path = parentPath && `${parentPath}.`
+		return [
+			{
+				field:
+					// min, max
+					new NumberField({
+						label: "Minimum length",
+						description: "Minimum number of characters",
+						required: false,
+						identifier: `${path}minimum_length`,
+						minimum: 0,
+						maximum: 100,
+						formValidators: [this._validateMin(parentPath)],
+						integers: true,
+					}),
+				showDirectly: false,
+			},
+			{
+				field: new NumberField({
+					label: "Maximum length",
+					description: "Maximum number of characters",
+					required: false,
+					identifier: `${path}maximum_length`,
+					minimum: 1,
+					maximum: LONG_TEXT_FIELD_MAX_LENGTH, // TODO: depends on short vs long text
+					formValidators: [this._validateMax(parentPath)],
+					// TODO: default: 500 (see: "Short text fields can hold up to 500 characters on a single line.")
+					integers: true,
+				}),
+				showDirectly: false,
+			},
+		]
+	}
+
+	getFieldValidators(): InputFieldLevelValidator<string>[] {
+		const validators = super.getFieldValidators()
+
+		if (this.minLength) {
+			validators.push((value) => {
+				if (this.minLength && (!value || value.length < this.minLength)) {
+					// One exception to this rule:
+					if (!this.required && !value) return null
+					return `Minimum ${this.minLength} character(s).`
+				}
+			})
+		}
+		if (this.maxLength) {
+			validators.push((value) => {
+				if (typeof value === "string" && this.maxLength && value.length > this.maxLength) {
+					return `Maximum ${this.maxLength} character(s).`
+				}
+			})
+		}
+
+		return validators
+	}
+
+	protected _serialize(): SerializedStringOrTextField<TIdentifier> {
+		if (!this.identifier) {
+			throw new Error("Field identifier must be set before serializing.")
+		}
+		return {
+			...super._serialize(),
+			minimum_length: this.minLength,
+			maximum_length: this.maxLength,
+			placeholder: this.placeholder,
+		}
+	}
+}

package/src/forms/fields/StringOrTextFields/TextField/TextField.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from "react"
+import { RiAlignJustify } from "react-icons/ri"
+
+import { LONG_TEXT_FIELD_MAX_LENGTH } from "../../../constants"
+import { ISerializedField, SerializedTextField } from "../../../typings"
+import { emptyBaseField } from "../../BaseField"
+import { GetInputProps } from "../../typings"
+import { StringOrTextField, StringOrTextFieldOptions } from "../StringOrTextField"
+import { TextInput } from "./TextInput"
+
+export type TextFieldOptions = Omit<StringOrTextFieldOptions, "type">
+
+export const emptyTextField = {
+	...emptyBaseField,
+	type: "text",
+	maximum_length: LONG_TEXT_FIELD_MAX_LENGTH,
+}
+
+export class TextField extends StringOrTextField<"text"> {
+	static readonly fieldTypeName = "Paragraph"
+	static readonly fieldTypeDescription = `Paragraph fields can hold up to ${LONG_TEXT_FIELD_MAX_LENGTH} characters and can have multiple lines.`
+
+	static Icon: typeof RiAlignJustify = RiAlignJustify
+
+	constructor(options: TextFieldOptions) {
+		const maxLength = options.maxLength
+			? Math.min(LONG_TEXT_FIELD_MAX_LENGTH, options.maxLength)
+			: LONG_TEXT_FIELD_MAX_LENGTH
+		// the field supports a min length no larger than the max length
+		const minLength = options.minLength ? Math.min(options.minLength, maxLength) : undefined
+		super({ ...options, maxLength, minLength, type: "text" })
+	}
+
+	serialize(): SerializedTextField {
+		return super._serialize()
+	}
+
+	static deserialize(data: ISerializedField) {
+		if (data.type !== "text") throw new Error("Type mismatch.")
+		const { maximum_length, minimum_length, ...rest } = data
+		return new TextField({
+			...rest,
+			maxLength: maximum_length,
+			minLength: minimum_length,
+			placeholder: "Enter a description",
+		})
+	}
+
+	getInput(props: GetInputProps<this>): ReactNode {
+		return <TextInput field={this} {...props} />
+	}
+}

package/src/forms/fields/StringOrTextFields/TextField/TextInput.tsx

@@ -0,0 +1,42 @@
+import { TextArea } 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 { TextField } from "./TextField"
+
+export const TextInput = memo((props: ComponentProps<TextField>) => {
+	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}
+			>
+				<TextArea
+					{...rest}
+					{...fieldProps}
+					className="field-sizing-content"
+					resize="vertical"
+					id={inputId}
+					placeholder={field.placeholder}
+					accentColor={color}
+					variant="soft"
+				/>
+			</InputWithLabel>
+		</InputWithLabelAndHelpText>
+	)
+})
+
+TextInput.displayName = "TextInput"

package/src/forms/fields/StringOrTextFields/TextField/index.ts

@@ -0,0 +1,2 @@
+export * from "./TextField"
+export * from "./TextInput"

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

@@ -0,0 +1,2 @@
+export * from "./StringField"
+export * from "./TextField"