@overmap-ai/forms 1.0.15 → 1.0.17-master.0

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"

package/src/forms/fields/UploadField/UploadField.tsx

@@ -0,0 +1,156 @@
+import { ChangeEvent, ReactNode } from "react"
+import { RiUpload2Line } from "react-icons/ri"
+
+import { ISerializedField, SerializedUploadField } from "../../typings"
+import { BaseField, ChildFieldOptions, emptyBaseField } from "../BaseField"
+import { maxFileSizeMB } from "../constants"
+import { NumberField } from "../NumberField"
+import { MultiSelectField } from "../SelectField"
+import { GetInputProps, InputFieldLevelValidator } from "../typings"
+import { UploadInput } from "./UploadInput"
+
+export interface UploadFieldOptions extends ChildFieldOptions<File[]> {
+	extensions?: string[]
+	maximum_size?: number | string
+	maximum_files?: number | string
+}
+
+export const emptyUploadField = {
+	...emptyBaseField,
+	type: "upload",
+	extensions: [],
+	maximum_size: undefined,
+	maximum_files: 1,
+}
+
+export class UploadField extends BaseField<File[], "upload"> {
+	static readonly fieldTypeName = "Upload"
+	static readonly fieldTypeDescription = "Allows a file to be uploaded."
+
+	public readonly extensions?: string[]
+	public readonly maxFileSize: number | undefined
+	public readonly maxFiles: number
+	public readonly onlyValidateAfterTouched = false
+
+	static Icon: typeof RiUpload2Line = RiUpload2Line
+
+	constructor(options: UploadFieldOptions) {
+		const { extensions, maximum_files, maximum_size, ...base } = options
+		super({ ...base, type: "upload" })
+
+		this.maxFileSize = typeof maximum_size === "number" ? maximum_size : undefined
+		// if maximum_files is not a number or less than 1, default and clamp to 1
+		this.maxFiles = Math.max(typeof maximum_files === "number" ? maximum_files : 1, 1)
+
+		this.extensions = extensions
+	}
+
+	public getValueFromChangeEvent(event: ChangeEvent<HTMLInputElement>): File[] {
+		return Array.from(event.target.files || [])
+	}
+
+	protected isBlank(value: File[]): boolean {
+		return super.isBlank(value) || value.length === 0
+	}
+
+	static getFieldCreationSchema(parentPath = "") {
+		const path = parentPath && `${parentPath}.`
+		return [
+			{
+				field: new NumberField({
+					label: "How many files can be uploaded?",
+					description: "By default, only one file can be uploaded.",
+					required: false,
+					minimum: 1,
+					maximum: 10,
+					identifier: `${path}maximum_files`,
+					integers: true,
+				}),
+				showDirectly: false,
+			},
+			{
+				field: new NumberField({
+					// TODO: Default value
+					label: "What is the maximum size of each file?",
+					description: `Maximum file size in megabytes (between 1MB–${maxFileSizeMB}MB).`,
+					required: false,
+					identifier: `${path}maximum_size`,
+					minimum: 1,
+					maximum: maxFileSizeMB,
+					integers: true,
+				}),
+				showDirectly: false,
+			},
+			{
+				field: new MultiSelectField({
+					label: "Accepted file types",
+					description: "Types of allowed files to upload. If left blank, all files will be accepted.",
+					required: false,
+					identifier: `${path}extensions`,
+					options: [
+						{
+							value: "image/*",
+							label: "Images",
+						},
+						{
+							value: "audio/*",
+							label: "Audio files",
+						},
+						{
+							value: "video/*",
+							label: "Videos",
+						},
+						{
+							value: "text/*",
+							label: "Text files",
+						},
+						{
+							value: "application/*",
+							label: "Application files (includes PDFs and Word documents)",
+						},
+					],
+				}),
+				showDirectly: false,
+			},
+		]
+	}
+
+	getFieldValidators(): InputFieldLevelValidator<File[]>[] {
+		const validators = super.getFieldValidators()
+		const maxFileSizeInMB = this.maxFileSize ?? maxFileSizeMB
+		const maxFileSizeInB = maxFileSizeInMB * 1000 * 1000
+		const maxFiles = this.maxFiles || 1
+
+		validators.push((value) => {
+			if (value && value.some((file) => file.size > maxFileSizeInB)) {
+				return `Files must be at most ${maxFileSizeInMB}MB.`
+			}
+		})
+
+		validators.push((value) => {
+			if (value && value.length > maxFiles) {
+				return `You can only upload ${maxFiles} files.`
+			}
+		})
+
+		return validators
+	}
+
+	serialize(): SerializedUploadField {
+		return {
+			...super._serialize(),
+			extensions: this.extensions,
+			maximum_size: this.maxFileSize,
+			maximum_files: this.maxFiles,
+		}
+	}
+
+	static deserialize(data: ISerializedField): UploadField {
+		if (data.type !== "upload") throw new Error("Type mismatch.")
+		return new UploadField(data)
+	}
+
+	getInput(props: GetInputProps<this>): ReactNode {
+		return <UploadInput field={this} {...props} />
+	}
+}