@sealcode/sealgen 0.8.44 → 0.8.48

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

@@ -1,94 +0,0 @@
-import { FlatTemplatable } from "tempstream";
-import { FieldGroup } from "./field-group";
-import { randomUUID } from "crypto";
-import { FormControl } from "./form-control";
-
-type CollapsibleFieldGroupOptions = {
-	label?: string;
-	classes?: string[];
-	openOnStart?: boolean;
-	textWhenOpen?: string;
-	textWhenClosed?: string;
-	groupID?: string;
-};
-
-export class CollapsibleFieldGroup extends FieldGroup {
-	public collapseID: string;
-	constructor(
-		public controls: FormControl[],
-		public options: CollapsibleFieldGroupOptions = {}
-	) {
-		super([]);
-		if (this.options.groupID == undefined) {
-			this.options.groupID = "A" + randomUUID(); // "A" is needed as ids always have to start with a letter
-		}
-		this.collapseID = this.options.groupID + "collapse";
-	}
-
-	getGroupLabelProps() {
-		return super.getGroupLabelProps() + ` for="${this.collapseID}"`;
-	}
-
-	preLabelContainer(): FlatTemplatable {
-		return /* HTML */ `<style>
-				input#${this.collapseID} {
-					display: none;
-				}
-
-				input#${this.collapseID} ~ .field-group__fields {
-					display: none;
-				}
-
-				input#${this.collapseID}:checked ~ .field-group__fields {
-					display: block;
-				}
-
-				input#${this.collapseID}
-					~ .field-group__label-container
-					.field-group__collapse-label-text--open {
-					display: none;
-				}
-
-				input#${this.collapseID}:checked
-					~ .field-group__label-container
-					.field-group__collapse-label-text--open {
-					display: inline-block;
-				}
-
-				input#${this.collapseID}
-					~ .field-group__label-container
-					.field-group__collapse-label-text--closed {
-					display: inline-block;
-				}
-
-				input#${this.collapseID}:checked
-					~ .field-group__label-container
-					.field-group__collapse-label-text--closed {
-					display: none;
-				}
-			</style>
-			<input
-				type="checkbox"
-				id="${this.collapseID}"
-				${this.options.openOnStart ? "checked" : ""}
-			/>`;
-	}
-
-	postLabel(): FlatTemplatable {
-		return /* HTML */ `<label
-			class="field-group__collapse-label"
-			for="${this.collapseID}"
-		>
-			<span
-				class="field-group__collapse-label-text field-group__collapse-label-text--open"
-			>
-				${this.options.textWhenOpen || "close"}
-			</span>
-			<span
-				class="field-group__collapse-label-text field-group__collapse-label-text--closed"
-			>
-				${this.options.textWhenClosed || "open"}
-			</span>
-		</label>`;
-	}
-}

package/src/forms/controls/controls.ts

@@ -1,30 +0,0 @@
-export { FormControl } from "./form-control";
-export { FormFieldControl } from "./form-field-control";
-export { EditableCollectionSubset } from "./editable-collection-subset";
-export { Frame } from "./frame";
-export { CheckboxedListInput } from "./checkboxed-list-input";
-export * from "./dropdown";
-export { SimpleInput } from "./simple-input";
-export { FormHeader } from "./form-header";
-export { FormParagraph } from "./form-paragraph";
-export { HTML } from "./html";
-export { HiddenInput } from "./hidden-input";
-export { Textarea } from "./textarea";
-export { FieldGroup } from "./field-group";
-export * from "./derived";
-export * from "./derived-frame";
-export * from "./tickable";
-export * from "./checkbox";
-export * from "./radio";
-export * from "./big-radio-group";
-export * from "./checkbox-group";
-export * from "./collapsible-field-group";
-export * from "./collapsible-checkbox-group";
-export * from "./autocomplete";
-export * from "./file";
-export * from "./photo";
-export * from "./multiple-files";
-export * from "./number";
-export * from "./multiple-photos";
-// export * from "./reverse-single-reference";
-export * from "./array";

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

@@ -1,91 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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>` : "";
-	}
-}