@sealcode/sealgen 0.8.48 → 0.8.49

package/src/forms/controls/derived-frame.ts

@@ -0,0 +1,91 @@
+import Router from "@koa/router";
+import { hasShape, predicates } from "@sealcode/ts-predicates";
+import { Context } from "koa";
+import { ParsedUrlQuery } from "querystring";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { makeSlug } from "../../utils/make-slug";
+import { FormField } from "../fields/field";
+import { Derived } from "./derived";
+import { FormControlContext } from "./form-control";
+
+export class DerivedFrame extends Derived<{
+	frame_id: string;
+	form_id: string;
+	field_name_prefix: string;
+}> {
+	constructor(
+		public frame_name: string,
+		fields: FormField[],
+		public generateFrameContent: (
+			ctx: FormControlContext,
+			args: ParsedUrlQuery
+		) => Promise<FlatTemplatable>,
+		// "a" is to make it a valid DOM id
+		public frame_id = "a" + makeSlug(frame_name)
+	) {
+		super(
+			fields,
+			async (values, consts) => /* HTML */ `<turbo-frame
+				id="${consts.frame_id}"
+				src="./${consts.frame_id}?${Object.entries({
+					...consts,
+					...(values || {}),
+				})
+					.map(([key, value]) => `${key}=${value}`)
+					.join("&")}"
+			></turbo-frame>`,
+			async (fctx) => ({
+				form_id: fctx.form_id,
+				field_name_prefix: fctx.field_name_prefix,
+				frame_id,
+				validate: fctx.validate,
+			})
+		);
+	}
+
+	renderBackendResponseFrame(_ctx: Context, content: FlatTemplatable) {
+		return tempstream/* HTML */ `<turbo-frame
+			id="${this.frame_id}"
+			target="_top"
+		>
+			${content || ""}
+		</turbo-frame>`;
+	}
+
+	mount(router: Router) {
+		router.get(this.frame_id, async (ctx) => {
+			const query = ctx.query;
+			if (
+				!hasShape(
+					{
+						field_name_prefix: predicates.string,
+						form_id: predicates.string,
+						validate: predicates.string,
+					},
+					query
+				)
+			) {
+				ctx.body = this.renderBackendResponseFrame(
+					ctx,
+					"Missing query params"
+				);
+				return;
+			}
+			ctx.body = this.renderBackendResponseFrame(
+				ctx,
+				await this.generateFrameContent(
+					new FormControlContext(
+						ctx,
+						ctx.query,
+						[],
+						query.field_name_prefix,
+						query.form_id,
+						query.validate === "true" ? true : false
+					),
+					ctx.query
+				)
+			);
+		});
+		return;
+	}
+}

package/src/forms/controls/derived.ts

@@ -0,0 +1,108 @@
+import { randomUUID } from "crypto";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormField } from "../fields/field";
+import { FormDataValue } from "../form";
+import { FormControl, FormControlContext } from "./form-control";
+
+export class Derived<
+	Consts extends Record<string, unknown | undefined>
+> extends FormControl {
+	role = <const>"decoration";
+
+	constructor(
+		public fields: FormField[],
+		public _render: (
+			values: Record<string, string>,
+			consts: Consts
+		) => Promise<FlatTemplatable>,
+		public getConsts: (
+			fctx: FormControlContext
+		) => Promise<Consts> = async () => ({} as Consts)
+	) {
+		super();
+	}
+
+	async getBackendValues(
+		fctx: FormControlContext
+	): Promise<Record<string, FormDataValue>> {
+		const fieldnames = this.fields.map((f) => f.name);
+		const result = Object.fromEntries(
+			Object.entries(fctx.data).filter(([key]) =>
+				fieldnames.includes(key)
+			)
+		);
+		return result;
+	}
+
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		// the A makes it always a valid id, as it cannot start with a number
+		const id = "A" + randomUUID();
+
+		const consts = this.getConsts(fctx);
+
+		const frontend_side_refresh_code = (values_code = "getValues()") =>
+			`render(${values_code}, consts)
+.then(result=>document.querySelector("#${id}").innerHTML=result)`;
+
+		return tempstream/* HTML */ `<div>
+			<script>
+				(function () {
+					const consts = ${"{" +
+					Object.entries((await consts) || {})
+						.map(([key, value]) => {
+							return `"${key}": ${
+								typeof value === "object"
+									? JSON.stringify(value)
+									: typeof value == "string"
+									? '"' + (value as string).toString() + '"'
+									: (value as string).toString()
+							}`;
+						})
+						.join(",") +
+					"}"};
+					const form_container =
+						document.currentScript.closest(".form-container");
+					const render = ${this._render.toString()};
+					function getValues() {
+						return Object.fromEntries(
+							${JSON.stringify(
+								this.fields.map((field) => field.name)
+							)}.map((field_name) => {
+								let input = form_container.querySelector(
+									\`input[name="\${field_name}"]\`
+								);
+								if (!input) {
+									return [field_name, ""];
+								}
+								if (input.type === "radio") {
+									input = form_container.querySelector(
+										\`input[name="\${field_name}"]:checked\`
+									);
+								}
+								return [field_name, input.value];
+							})
+						);
+					}
+					function setupWatcher(field_name) {
+						form_container
+							.querySelectorAll(\`input[name="\${field_name}"]\`)
+							.forEach((input) => {
+								input.addEventListener("change", () => {
+									${frontend_side_refresh_code()};
+								});
+							});
+					}
+					${JSON.stringify(
+						this.fields.map((field) => field.name)
+					)}.forEach(setupWatcher);
+					setTimeout(() => {
+						${frontend_side_refresh_code(
+							JSON.stringify(await this.getBackendValues(fctx))
+						)};
+					}, 0);
+				})();
+			</script>
+			<div id="${id}">${this._render({}, await consts)}</div>
+		</div>`;
+	}
+}

package/src/forms/controls/dropdown.ts

@@ -0,0 +1,87 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { attribute } from "../../sanitize";
+import { FormField, PickFromListField } from "../fields/field";
+import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
+import { SimpleInput } from "./simple-input";
+
+export type DropdownOptions = {
+	label: string;
+	autosubmit?: boolean;
+	autocomplete?: boolean;
+};
+
+export type DropdownOption = { value: string; label: string };
+
+export class FreeformDropdown extends SimpleInput<string | null> {
+	constructor(
+		public field: FormField<boolean, string | null>,
+		public _generateOptions: (ctx: Context) => Promise<DropdownOption[]>,
+		public options: DropdownOptions = {
+			label: field.name,
+			autosubmit: false,
+			autocomplete: true,
+		}
+	) {
+		super(field, options);
+	}
+
+	async generateOptions(ctx: Context): Promise<DropdownOption[]> {
+		return this._generateOptions(ctx);
+	}
+
+	async getInputAttributes(
+		fctx: FormControlContext
+	): Promise<Record<string, string | boolean>> {
+		const original = await super.getInputAttributes(fctx);
+		return {
+			...original,
+			...Object.fromEntries([
+				...(this.options.autosubmit
+					? [
+							[
+								"onchange",
+								(original.onchange || "") +
+									";this.form.submit();",
+							],
+					  ]
+					: []),
+			]),
+		};
+	}
+
+	async renderInput(
+		ctx: Context,
+		attributes_str: string,
+		data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		const { parsed: picked_value } = await this.field.getValue(ctx, data);
+		return /* HTML */ tempstream`<select ${attributes_str}>
+			${
+				// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+				Promise.resolve(this.generateOptions(ctx)).then((options) =>
+					options.map(
+						({ value, label }) =>
+							`<option value="${attribute(value)}" ${
+								(value || "") == picked_value ? "selected" : ""
+							}>${label}</option>`
+					)
+				)
+			}
+		</select>`;
+	}
+}
+
+export class Dropdown extends FreeformDropdown {
+	constructor(
+		public field: PickFromListField<boolean>,
+		public options: DropdownOptions = {
+			label: field.name,
+			autosubmit: false,
+			autocomplete: true,
+		}
+	) {
+		super(field, (ctx) => field.generateOptions(ctx), options);
+	}
+}

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

@@ -0,0 +1,97 @@
+import { FlatTemplatable, tempstream } from "tempstream";
+import { attribute } from "../../sanitize";
+import { PickFromListField } from "../fields/field";
+import { FormFieldControl } from "./controls";
+import { FormControlContext } from "./form-control";
+
+/**
+ * This control has own forms in it so if you want to use it you
+ * probably shouldn't use `await super.render(ctx, data, path)` in
+ * render method of you from implementation and you should write
+ * your own implementation of this method. See forms that uses
+ * this control for reference.
+ */
+export class EditableCollectionSubset extends FormFieldControl {
+	constructor(
+		public field: PickFromListField<false>,
+		public actionname: string,
+		public listLabel?: string,
+		public selectLabel?: string
+	) {
+		super([field]);
+	}
+
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		const { parsed: values } = await this.field.getValue(
+			fctx.ctx,
+			fctx.data
+		);
+
+		return tempstream/* HTML */ `<div>
+			<ul>
+				${Promise.resolve(this.field.generateOptions(fctx.ctx)).then(
+					(options) =>
+						Object.entries(options)
+							.filter(([value]) =>
+								(values || ([] as string[])).includes(value)
+							)
+							.map(
+								([value, text]) => /* HTML */ `
+									<li>
+										<form
+											method="POST"
+											action="${fctx.ctx.path}"
+										>
+											<span>${text}</span>
+											<input
+												type="hidden"
+												name="${this.field.name}"
+												value="${attribute(value)}"
+											/>
+											<input
+												type="hidden"
+												name="${this.actionname}"
+												value="list"
+											/>
+											<input
+												type="submit"
+												${this.listLabel
+													? `value="${this.listLabel}"`
+													: ""}
+											/>
+										</form>
+									</li>
+								`
+							)
+				)}
+			</ul>
+			<form method="POST" action="${fctx.ctx.path}">
+				<select name="${this.field.name}">
+					${Promise.resolve(
+						this.field.generateOptions(fctx.ctx)
+					).then((options) =>
+						Object.entries(options)
+							.filter(
+								([value]) =>
+									!(values || ([] as string[])).includes(
+										value
+									)
+							)
+							.map(
+								([value, text]) =>
+									`<option value="${attribute(
+										value
+									)}">${text}</option>`
+							)
+					)}
+				</select>
+				<input type="hidden" name="${this.actionname}" value="select" />
+				<input
+					type="submit"
+					${this.selectLabel ? `value="${this.selectLabel}"` : ""}
+				/>
+			</form>
+		</div>`;
+	}
+	role = <const>"input";
+}

package/src/forms/controls/field-group.ts

@@ -0,0 +1,69 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormDataValue, FormMessage } from "../form";
+import { FormControl, FormControlContext } from "./form-control";
+import { FormFieldControl } from "./form-field-control";
+
+export class FieldGroup extends FormFieldControl {
+	constructor(
+		public controls: FormControl[],
+		public options: {
+			label?: string;
+			classes?: string[];
+			containerID?: string;
+		} = {}
+	) {
+		super([]);
+	}
+
+	preLabel(): FlatTemplatable {
+		return "";
+	}
+
+	preLabelContainer(): FlatTemplatable {
+		return "";
+	}
+
+	postLabel(): FlatTemplatable {
+		return "";
+	}
+
+	preFields(): FlatTemplatable {
+		return "";
+	}
+
+	postFields(): FlatTemplatable {
+		return "";
+	}
+
+	getGroupLabelProps(): FlatTemplatable {
+		return `class="field-group__label"`;
+	}
+
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		const { label, classes } = this.options;
+
+		return tempstream/* HTML */ `
+			<div
+				class="field-group ${(classes || []).join(" ")}"
+				${this.options.containerID
+					? `id="${this.options.containerID}"`
+					: ""}
+			>
+				${this.preLabelContainer()}
+				<div class="field-group__label-container">
+					${this.preLabel()}
+					${label
+						? `<label ${this.getGroupLabelProps()}>${label}</label>`
+						: ""}
+					${this.postLabel()}
+				</div>
+				${this.preFields()}
+				<div class="field-group__fields">
+					${this.controls.map((control) => control.render(fctx))}
+				</div>
+				${this.postFields()}
+			</div>
+		`;
+	}
+}

package/src/forms/controls/file.ts

@@ -0,0 +1,47 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FileContainer } from "../fields/file";
+import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
+import { SimpleInput } from "./simple-input";
+
+export class File extends SimpleInput<FileContainer> {
+	getType() {
+		return "file";
+	}
+
+	async renderFilePreview(
+		_ctx: Context,
+		file_data: { id?: string; filename?: string } | null
+	): Promise<FlatTemplatable> {
+		return file_data?.filename || "";
+	}
+
+	async preInput(ctx: Context, data: Record<string, FormDataValue>) {
+		const { parsed } = await this.field.getValue(ctx, data);
+		return tempstream/* HTML */ `${this.renderFilePreview(ctx, parsed.old)}
+			<input
+				type="hidden"
+				name="${this.field.name}[old][id]"
+				value="${parsed.old?.id || ""}"
+			/>
+			<input
+				type="hidden"
+				name="${this.field.name}[old][filename]"
+				value="${parsed.old?.filename || ""}"
+			/>`;
+	}
+
+	async getInputAttributes(
+		fctx: FormControlContext
+	): Promise<Record<string, string | boolean>> {
+		const original = await super.getInputAttributes(fctx);
+		const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
+		return {
+			...original,
+			name: this.field.name + "[new]",
+			required: original.required && !parsed.old,
+			value: false,
+		};
+	}
+}

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

@@ -0,0 +1,24 @@
+import Router from "@koa/router";
+import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
+import { FormDataValue, FormMessage } from "../form";
+
+export class FormControlContext {
+	constructor(
+		public ctx: Context,
+		public data: Record<string, FormDataValue>,
+		public messages: FormMessage[],
+		public field_name_prefix: string,
+		public form_id: string,
+		public validate: boolean
+	) {}
+}
+
+export abstract class FormControl {
+	abstract render(
+		fctx: FormControlContext
+	): FlatTemplatable | Promise<FlatTemplatable>;
+	abstract role: "input" | "decoration" | "messages" | "submit";
+
+	mount(router: Router) {}
+}

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

@@ -0,0 +1,22 @@
+import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
+import { FormField } from "../fields/field";
+import { FieldValueType, FormDataValue } from "../form";
+import { FormControl, FormControlContext } 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 fields: FormField[]) {
+		super();
+	}
+
+	abstract render(
+		fctx: FormControlContext
+	): FlatTemplatable | Promise<FlatTemplatable>;
+}

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

@@ -0,0 +1,19 @@
+import { Context } from "koa";
+import { FormControl } from "./controls";
+import { FormControlContext } from "./form-control";
+
+export class FormHeader extends FormControl {
+	role = <const>"decoration";
+	constructor(
+		public text: string,
+		public isVisible: (
+			fctx: FormControlContext
+		) => Promise<boolean> = async () => true
+	) {
+		super();
+	}
+	async render(fctx: FormControlContext) {
+		const isVsbl = await this.isVisible(fctx);
+		return isVsbl ? `<h2>${this.text}</h2>` : "";
+	}
+}

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

@@ -0,0 +1,11 @@
+import { FormControl } from "./controls";
+
+export class FormParagraph extends FormControl {
+	role = <const>"decoration";
+	constructor(public text: string) {
+		super();
+	}
+	render() {
+		return `<p>${this.text}</p>`;
+	}
+}

package/src/forms/controls/frame.ts

@@ -0,0 +1,26 @@
+import { FlatTemplatable, Templatable } from "tempstream";
+import { FormControl } from "./controls";
+
+/**
+ * This class will render `turbo-frame` tag so that u can
+ * embed other route inside your form. This will require
+ * to add value to `data: FormData` (inside your master form
+ * render function) with key `Frame.FRAME_PATH_KEY`. Value
+ * needs to be url to route that you want to embed. If you
+ * this value wont be provided frame will redner empty string.
+ * See `src/back/routes/profile/[id].form.ts` for an example.
+ */
+export class Frame extends FormControl {
+	constructor(public src: string) {
+		super();
+	}
+
+	render(): FlatTemplatable | Promise<FlatTemplatable> {
+		return /* HTML */ `<turbo-frame
+			id="contrahents"
+			loading="lazy"
+			src="${this.src}"
+		></turbo-frame>`;
+	}
+	role = <const>"decoration";
+}

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

@@ -0,0 +1,22 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { attribute } from "../../sanitize";
+import { FormField } from "../fields/field";
+import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
+import { FormFieldControl } from "./form-field-control";
+
+export class HiddenInput extends FormFieldControl {
+	constructor(public field: FormField) {
+		super([field]);
+	}
+
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		const { raw } = await this.field.getValue(fctx.ctx, fctx.data);
+		return tempstream`<input type="hidden" name="${
+			this.field.name
+		}" value="${attribute((raw || "").toString())}" form="${
+			fctx.form_id
+		}">`;
+	}
+}

package/src/forms/controls/html.ts

@@ -0,0 +1,38 @@
+import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
+import { FormDataValue, FormMessage } from "../form";
+import { FormControl } from "./controls";
+import { FormControlContext } from "./form-control";
+
+type Renderer =
+	| ((fctx: FormControlContext) => FlatTemplatable)
+	| FlatTemplatable;
+
+export class HTML extends FormControl {
+	role = (<const>"decoration") as "decoration" | "submit";
+	public renderer: Renderer;
+
+	constructor(role: "decoration" | "submit", renderer: Renderer);
+	constructor(renderer: Renderer);
+	constructor(
+		role_or_renderer: "decoration" | "submit" | Renderer,
+		renderer_or_undefined?: Renderer | FlatTemplatable
+	) {
+		super();
+		if (arguments.length == 2) {
+			this.role = role_or_renderer as "decoration" | "submit";
+			this.renderer = renderer_or_undefined as Renderer;
+		} else {
+			this.renderer = role_or_renderer;
+		}
+	}
+
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		if (typeof this.renderer === "string") {
+			return this.renderer;
+		}
+		return typeof this.renderer == "function"
+			? this.renderer(fctx)
+			: this.renderer;
+	}
+}