@sealcode/sealgen 0.3.2 → 0.4.0

package/src/forms/controls/checkboxed-list-input.ts

@@ -1,48 +1,37 @@
 import { is, predicates } from "@sealcode/ts-predicates";
 import { BaseContext } from "koa";
 import { tempstream } from "tempstream";
-import { ChekboxedListField, FormField } from "../field";
-import { Form, FormData } from "../form";
-import { FormFieldsList } from "../form-fields-list";
+import { ChekboxedListField } from "../fields/field";
+import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
 
 export class CheckboxedListInput extends FormFieldControl {
 	constructor(
-		public fieldname: string,
-		public options: { label: string } = { label: fieldname }
+		public field: ChekboxedListField,
+		public options: { label: string } = { label: field.name }
 	) {
-		super([fieldname]);
+		super([field]);
 	}
 
-	isValidFieldName(form: Form) {
-		return form.fields.some((f) => f.name == this.fieldname);
-	}
-
-	async _render(ctx: BaseContext, fields: FormField[], data: FormData) {
-		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const field = FormFieldsList.getField(
-			fields,
-			this.fieldname
-		) as ChekboxedListField;
-		const pickedValues = data.values[field.name] || "";
+	async render(ctx: BaseContext, data: Record<string, FormDataValue>) {
+		const { parsed: pickedValues } = await this.field.getValue(ctx, data);
 		if (!is(pickedValues, predicates.array(predicates.string))) {
 			throw new Error("picked values is not an array of strings");
 		}
 		const [options, isVisible] = await Promise.all([
-			field.generateOptions(ctx),
-			field.isVisible(ctx),
+			this.field.generateOptions(ctx),
+			this.field.isVisible(ctx),
 		]);
 		return tempstream/* HTML */ `${isVisible
 			? Object.entries(options).map(
 					([value, text]) => /* HTML */ `<div>
 						<input
 							type="checkbox"
-							id="${field.name}.${value}"
-							name="${field.name}.${value}"
+							id="${this.field.name}.${value}"
+							name="${this.field.name}.${value}"
 							${pickedValues.includes(value) ? "checked" : ""}
 						/>
-						<label for="${field.name}.${value}">${text}</label>
+						<label for="${this.field.name}.${value}">${text}</label>
 					</div>`
 			  )
 			: ""}`;

package/src/forms/controls/dropdown.ts

@@ -1,56 +1,51 @@
 import { BaseContext } from "koa";
 import { tempstream } from "tempstream";
-import { FormField, PickFromListField } from "../field";
-import { FormData } from "../form";
-import { FormFieldsList } from "../form-fields-list";
+import { FormField, PickFromListField } from "../fields/field";
+import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
 
 export class Dropdown extends FormFieldControl {
 	constructor(
-		public fieldname: string,
+		public field: PickFromListField,
 		public options: {
 			label: string;
 			autosubmit?: boolean;
 			autocomplete?: boolean;
 		} = {
-			label: fieldname,
+			label: field.name,
 			autosubmit: false,
 			autocomplete: true,
 		}
 	) {
-		super([fieldname]);
+		super([field]);
 	}
 
-	areFieldNamesValid(fields: FormField[]) {
-		return (
-			super.areFieldNamesValid(fields) &&
-			FormFieldsList.getField(fields, this.fieldname) instanceof PickFromListField
-		);
-	}
-
-	_render(ctx: BaseContext, fields: FormField[], data: FormData) {
-		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const field = FormFieldsList.getField(
-			fields,
-			this.fieldname
-		) as PickFromListField;
-		const picked_value = data.values[field.name] || "";
-		const id = field.name;
-		return tempstream/* HTML */ `<label for="${id}">${this.options.label}</label
+	async render<Fields extends Record<string, FormField>>(
+		ctx: BaseContext,
+		data: Record<string, FormDataValue>
+	) {
+		const { parsed: picked_value } = await this.field.getValue(ctx, data);
+		const id = this.field.name;
+		return tempstream/* HTML */ `<label for="${id}"
+				>${this.options.label}</label
 			><select
-				name="${this.fieldnames}"
+				name="${this.field.name}"
 				id="${id}"
-				${this.options.autosubmit ? `onchange='this.form.submit()'` : ""}
+				${this.options.autosubmit
+					? `onchange='this.form.submit()'`
+					: ""}
 				${!this.options.autocomplete ? `autocomplete="off"` : ""}
 			>
-				${Promise.resolve(field.generateOptions(ctx)).then((options) =>
-					Object.entries(options).map(
-						([value, text]) =>
-							`<option value="${value}" ${
-								(value || "") == picked_value ? "selected" : ""
-							}>${text}</option>`
-					)
+				${Promise.resolve(this.field.generateOptions(ctx)).then(
+					(options) =>
+						Object.entries(options).map(
+							([value, text]) =>
+								`<option value="${value}" ${
+									(value || "") == picked_value
+										? "selected"
+										: ""
+								}>${text}</option>`
+						)
 				)}
 			</select>`;
 	}

package/src/forms/controls/editable-collection-subset.ts

@@ -1,8 +1,7 @@
 import { BaseContext } from "koa";
-import { Templatable, tempstream } from "tempstream";
-import { FormField, PickFromListField } from "../field";
-import { FormData } from "../form";
-import { FormFieldsList } from "../form-fields-list";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { PickFromListField } from "../fields/field";
+import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
 
 /**
@@ -14,69 +13,73 @@ import { FormFieldControl } from "./controls";
  */
 export class EditableCollectionSubset extends FormFieldControl {
 	constructor(
-		public fieldname: string,
+		public field: PickFromListField,
 		public actionname: string,
 		public listLabel?: string,
 		public selectLabel?: string
 	) {
-		super([fieldname]);
+		super([field]);
 	}
 
-	_render(
+	async render(
 		ctx: BaseContext,
-		fields: FormField[],
-		data: FormData<string>
-	): Templatable | Promise<Templatable> {
-		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const field = FormFieldsList.getField(
-			fields,
-			this.fieldname
-		) as PickFromListField;
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const values = data.values[this.fieldname] as string[];
+		data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		const { parsed: values } = await this.field.getValue(ctx, data);
 
 		return tempstream/* HTML */ `<div>
 			<ul>
-				${Promise.resolve(field.generateOptions(ctx)).then((options) =>
-					Object.entries(options)
-						.filter(([value]) => values.includes(value))
-						.map(
-							([value, text]) => /* HTML */ `
-								<li>
-									<form method="POST" action="${ctx.path}">
-										<span>${text}</span>
-										<input
-											type="hidden"
-											name="${this.fieldname}"
-											value="${value}"
-										/>
-										<input
-											type="hidden"
-											name="${this.actionname}"
-											value="list"
-										/>
-										<input
-											type="submit"
-											${this.listLabel
-												? `value="${this.listLabel}"`
-												: ""}
-										/>
-									</form>
-								</li>
-							`
-						)
-				)}
-			</ul>
-			<form method="POST" action="${ctx.path}">
-				<select name="${this.fieldname}">
-					${Promise.resolve(field.generateOptions(ctx)).then((options) =>
+				${Promise.resolve(this.field.generateOptions(ctx)).then(
+					(options) =>
 						Object.entries(options)
-							.filter(([value]) => !values.includes(value))
+							.filter(([value]) =>
+								(values || ([] as string[])).includes(value)
+							)
 							.map(
-								([value, text]) =>
-									`<option value="${value}">${text}</option>`
+								([value, text]) => /* HTML */ `
+									<li>
+										<form
+											method="POST"
+											action="${ctx.path}"
+										>
+											<span>${text}</span>
+											<input
+												type="hidden"
+												name="${this.field.name}"
+												value="${value}"
+											/>
+											<input
+												type="hidden"
+												name="${this.actionname}"
+												value="list"
+											/>
+											<input
+												type="submit"
+												${this.listLabel
+													? `value="${this.listLabel}"`
+													: ""}
+											/>
+										</form>
+									</li>
+								`
 							)
+				)}
+			</ul>
+			<form method="POST" action="${ctx.path}">
+				<select name="${this.field.name}">
+					${Promise.resolve(this.field.generateOptions(ctx)).then(
+						(options) =>
+							Object.entries(options)
+								.filter(
+									([value]) =>
+										!(values || ([] as string[])).includes(
+											value
+										)
+								)
+								.map(
+									([value, text]) =>
+										`<option value="${value}">${text}</option>`
+								)
 					)}
 				</select>
 				<input type="hidden" name="${this.actionname}" value="select" />

package/src/forms/controls/form-control.ts

@@ -1,13 +1,12 @@
 import { BaseContext } from "koa";
-import { Templatable } from "tempstream";
-import { FormField } from "../field";
-import { FormData } from "../form";
+import { FlatTemplatable } from "tempstream";
+import { FormDataValue, FormMessage } from "../form";
 
 export abstract class FormControl {
 	abstract render(
 		ctx: BaseContext,
-		formFields: FormField[],
-		data: FormData
-	): Templatable | Promise<Templatable>;
+		data: Record<string, FormDataValue>,
+		messages: FormMessage[]
+	): FlatTemplatable | Promise<FlatTemplatable>;
 	abstract role: "input" | "decoration" | "messages" | "submit";
 }

package/src/forms/controls/form-field-control.ts

@@ -1,39 +1,23 @@
 import { BaseContext } from "koa";
-import { Templatable } from "tempstream";
-import { FormField } from "../field";
-import { FormData } from "../form";
+import { FlatTemplatable } from "tempstream";
+import { FormField } from "../fields/field";
+import { FieldValueType, FormDataValue } from "../form";
 import { FormControl } from "./form-control";
 
+export type FormFieldsToTypes<FormFields extends readonly FormField[]> = {
+	[Index in keyof FormFields]: FormFields[Index] extends FormField
+		? FieldValueType<FormFields[Index]>
+		: never;
+};
+
 export abstract class FormFieldControl extends FormControl {
 	role = <const>"input";
-	constructor(public fieldnames: string[]) {
+	constructor(public fields: FormField[]) {
 		super();
 	}
 
-	areFieldNamesValid(fields: FormField[]) {
-		return this.fieldnames.every((fieldname) =>
-			fields.some((f) => f.name == fieldname)
-		);
-	}
-
-	abstract _render(
+	abstract render(
 		ctx: BaseContext,
-		fields: FormField[],
-		data: FormData
-	): Templatable | Promise<Templatable>;
-
-	render(
-		ctx: BaseContext,
-		fields: FormField[],
-		data: FormData
-	): Templatable | Promise<Templatable> {
-		if (!this.areFieldNamesValid(fields)) {
-			throw new Error(
-				`Invalid field names given to form control: "${this.fieldnames.join(
-					", "
-				)}". Allowed fields are: ${fields.map((f) => f.name).join(", ")}`
-			);
-		}
-		return this._render(ctx, fields, data);
-	}
+		data: Record<string, FormDataValue>
+	): FlatTemplatable | Promise<FlatTemplatable>;
 }

package/src/forms/controls/frame.ts

@@ -1,4 +1,4 @@
-import { Templatable } from "tempstream";
+import { FlatTemplatable, Templatable } from "tempstream";
 import { FormControl } from "./controls";
 
 /**
@@ -15,7 +15,7 @@ export class Frame extends FormControl {
 		super();
 	}
 
-	render(): Templatable | Promise<Templatable> {
+	render(): FlatTemplatable | Promise<FlatTemplatable> {
 		return /* HTML */ `<turbo-frame
 			id="contrahents"
 			loading="lazy"

package/src/forms/controls/simple-input.ts

@@ -1,12 +1,13 @@
 import { BaseContext } from "koa";
-import { FormField } from "../field";
-import { FormData } from "../form";
-import { FormFieldsList } from "../form-fields-list";
+import { FormField } from "../fields/field";
+import { NumberField } from "../fields/number";
+import { SimpleFormField } from "../fields/simple-form-field";
+import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
 
 export class SimpleInput extends FormFieldControl {
 	constructor(
-		public fieldname: string,
+		public field: FormField,
 		public options: {
 			id?: string;
 			label?: string;
@@ -31,43 +32,45 @@ export class SimpleInput extends FormFieldControl {
 			step?: number;
 		} = {}
 	) {
-		super([fieldname]);
+		super([field]);
 	}
 
-	_render(_: BaseContext, fields: FormField[], data: FormData) {
-		const field = FormFieldsList.getField(fields, this.fieldname);
-		if (!field) {
-			throw new Error("wrong field name");
-		}
-		const id = this.options.id || field.name;
-		const label = this.options.label || field.name;
+	async render<Fields extends Record<string, FormField>>(
+		ctx: BaseContext,
+		data: Record<string, FormDataValue>
+	) {
+		const id = this.options.id || this.field.name;
+		const label = this.options.label || this.field.name;
 		const type = this.options.type || "text";
 		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const value = data.values[field.name] as string;
+		const { parsed, raw, valid, message } = await this.field.getValue(
+			ctx,
+			data
+		);
 		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const raw_value = data.raw_values[field.name] as string;
 		const placeholder = this.options.placeholder || type;
 		const readonly = this.options.readonly || false;
-		const required = field.required;
-		const error = data.errors[field.name];
+		const required = this.field.required;
+
 		return /* HTML */ `<div class="input">
 			<label for="${id}">${label}</label>
 			<input
 				id="${id}"
 				type="${type}"
-				name="${field.name}"
-				value="${value === undefined
-					? raw_value == undefined
-						? ""
-						: raw_value
-					: value}"
+				name="${this.field.name}"
+				value="${!valid && raw
+					? raw.toString()
+					: parsed !== undefined && parsed !== null
+					? // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-call,  @typescript-eslint/no-unsafe-member-access
+					  ((parsed as any)?.toString() as string) || ""
+					: ""}"
 				placeholder="${placeholder}"
 				${readonly ? "readonly" : ""}
 				${required ? "required" : ""}
 				${!this.options.autocomplete ? `autocomplete="off"` : ""}
 				${this.options.step ? `step="${this.options.step}"` : ""}
 			/>
-			${error ? `<div class="input__error">${error}</div>` : ""}
+			${~valid ? `<div class="input__error">${message}</div>` : ""}
 		</div>`;
 	}
 }

package/src/forms/fields/checkboxed-list.ts

@@ -0,0 +1,61 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { BaseContext } from "koa";
+import { FormDataValue } from "../form";
+import {
+	FieldParseResult,
+	FormField,
+	FormFieldValidationResponse,
+} from "./field";
+
+export class ChekboxedListField extends FormField<Record<string, "on">> {
+	constructor(
+		public required: boolean = false,
+		public generateOptions: (
+			ctx: BaseContext
+		) => Promise<Record<string, string> | { [i: string]: string }>,
+		public isVisible: (ctx: BaseContext) => Promise<boolean> = () =>
+			Promise.resolve(true)
+	) {
+		super(required);
+	}
+
+	public async isValueValid(
+		_: BaseContext,
+		value: unknown
+	): Promise<FormFieldValidationResponse> {
+		if (is(value, predicates.string)) {
+			return { valid: false, message: "you need an array" };
+		}
+		if (is(value, predicates.null)) {
+			return { valid: false, message: "you need an array" };
+		}
+		return { valid: true, message: "" };
+	}
+
+	async parse(
+		_: BaseContext,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<Record<string, "on">>> {
+		if (is(raw_value, predicates.object)) {
+			return {
+				parsable: true,
+				parsed_value: Object.fromEntries(
+					Object.entries(raw_value).filter(
+						([, value]) => value === "on"
+					)
+				) as Record<string, "on">,
+				error: null,
+			};
+		} else {
+			return {
+				parsed_value: null,
+				parsable: false,
+				error: "Expected an object",
+			};
+		}
+	}
+
+	public getEmptyValue(): Record<string, "on"> {
+		return {};
+	}
+}

package/src/forms/fields/collection-field.ts

@@ -0,0 +1,54 @@
+import { BaseContext } from "koa";
+import { Depromisify, Field, FieldOutput } from "sealious";
+import { FormDataValue } from "../form";
+
+import {
+	FieldParseResult,
+	FormField,
+	FormFieldValidationResponse,
+} from "./field";
+
+export class CollectionField<F extends Field> extends FormField<
+	FieldOutput<F>
+> {
+	constructor(required: boolean, public sealiousField: F) {
+		super(required);
+	}
+
+	async parse(
+		ctx: BaseContext,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<FieldOutput<F>>> {
+		const encoded_value = (await this.sealiousField.encode(
+			ctx.$context,
+			raw_value
+		)) as Depromisify<ReturnType<F["encode"]>>;
+		const parsed_value = (await this.sealiousField.decode(
+			ctx.$context,
+			encoded_value,
+			null,
+			{}
+		)) as Depromisify<ReturnType<F["encode"]>>;
+		return {
+			parsable: true,
+			error: null,
+			parsed_value,
+		};
+	}
+
+	public async isValueValid(
+		ctx: BaseContext,
+		value: FieldOutput<F>
+	): Promise<FormFieldValidationResponse> {
+		const { valid, reason } = await this.sealiousField.checkValue(
+			ctx.$context,
+			value,
+			undefined
+		);
+		return { valid, message: reason || (!valid ? "Wrong value" : "") };
+	}
+
+	public getEmptyValue(): Depromisify<ReturnType<F["decode"]>> {
+		return "" as unknown as Depromisify<ReturnType<F["decode"]>>;
+	}
+}

package/src/forms/fields/field.ts

@@ -0,0 +1,106 @@
+import { BaseContext } from "koa";
+import { FormDataValue } from "../form";
+
+export type FormFieldValidationResponse = { valid: boolean; message: string };
+
+export type FormFieldValidationFn<ValueType> = (
+	ctx: BaseContext,
+	value: ValueType,
+	field: FormField<ValueType>
+) => Promise<FormFieldValidationResponse>;
+
+export type FieldParsedValue<T> = T extends FormField<infer R> ? R : never;
+
+export type FieldParseResult<T> =
+	| {
+			parsable: false;
+			error: string;
+			parsed_value: null;
+	  }
+	| { parsable: true; error: null; parsed_value: T };
+
+export abstract class FormField<ParsedValue extends unknown = unknown> {
+	name: string;
+	constructor(public required: boolean = false) {}
+
+	init(fieldname: string): void {
+		this.name = fieldname;
+	}
+
+	public async _validate(
+		ctx: BaseContext,
+		value: ParsedValue
+	): Promise<FormFieldValidationResponse> {
+		if (
+			this.required &&
+			(value === "" || value === null || value === undefined)
+		) {
+			return { valid: false, message: "This field is required" };
+		}
+		return this.isValueValid(ctx, value);
+	}
+
+	public abstract getEmptyValue(): ParsedValue;
+
+	public async isValueValid(
+		ctx: BaseContext,
+		value: ParsedValue
+	): Promise<FormFieldValidationResponse> {
+		return { valid: true, message: "" };
+	}
+
+	abstract parse(
+		ctx: BaseContext,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<ParsedValue>>;
+
+	async getValue(
+		ctx: BaseContext,
+		all_form_values: Record<string, FormDataValue>
+	): Promise<{
+		valid: boolean;
+		message: string;
+		parsed: ParsedValue;
+		raw: FormDataValue;
+	}> {
+		if (Object.keys(all_form_values).length === 0) {
+			// don't validate on virgin form
+			return {
+				parsed: this.getEmptyValue(),
+				valid: true,
+				message: "",
+				raw: "",
+			};
+		}
+		const raw = all_form_values[this.name];
+		const {
+			parsable,
+			parsed_value,
+			error: parse_error,
+		} = await this.parse(ctx, raw);
+		if (!parsable) {
+			return {
+				valid: false,
+				parsed: this.getEmptyValue(),
+				raw,
+				message: parse_error || "Error",
+			};
+		}
+		const { valid, message } = await this._validate(
+			ctx,
+			parsed_value as ParsedValue
+		);
+		return {
+			parsed: parsed_value as ParsedValue,
+			valid,
+			message,
+			raw: all_form_values[this.name],
+		};
+	}
+}
+
+export * from "./simple-form-field";
+export * from "./checkboxed-list";
+export * from "./collection-field";
+export * from "./number";
+export * from "./pick-from-list";