@sealcode/sealgen 0.8.44 → 0.8.48

package/src/forms/form.ts

@@ -1,294 +0,0 @@
-import { Context } from "koa";
-import { randomUUID } from "crypto";
-import { File as SealiousFile } from "sealious";
-import Router from "@koa/router";
-import { FlatTemplatable, tempstream } from "tempstream";
-import {
-	hasFieldOfType,
-	hasShape,
-	is,
-	predicates,
-} from "@sealcode/ts-predicates";
-import { FormField } from "./fields/field";
-import {
-	Fields,
-	MountableWithFields,
-	PageErrorMessage,
-} from "../page/mountable-with-fields";
-
-export type FormDataPrimitive = string | string[] | number | undefined;
-export type FormDataValue =
-	| FormDataPrimitive
-	| Record<string, FormDataPrimitive>
-	| SealiousFile;
-
-export type FieldValueType<F extends FormField> = F extends FormField<infer R>
-	? R
-	: never;
-
-export type FormFieldsToValues<
-	F extends Record<string, FormField<boolean, keyof F>>
-> = {
-	[Property in keyof F]: FieldValueType<F[Property]>;
-};
-
-export type FormMessage = { type: "info" | "success" | "error"; text: string };
-
-export type FormData<Fieldnames extends string = string> = {
-	raw_values: Record<Fieldnames, FormDataValue>;
-	messages: FormMessage[];
-};
-
-export type FormReaction =
-	| { action: "stay"; content: FlatTemplatable; messages?: FormMessage[] }
-	| { action: "redirect"; url: string; messages?: FormMessage[] };
-
-export abstract class Form<
-	F extends Fields,
-	SubmitResult extends any
-> extends MountableWithFields<F> {
-	defaultSuccessMessage = "Done";
-	submitButtonText = "Wyślij";
-	action = "./";
-	useTurbo = true;
-	form_id = randomUUID();
-
-	async canAccess(
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		_: Context
-	): Promise<{ canAccess: boolean; message: string }> {
-		return { canAccess: true, message: "" };
-	}
-
-	async renderError(
-		_: Context,
-		error: PageErrorMessage
-	): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `<div>${error.message}</div>`;
-	}
-
-	makeSubmitButton(): FlatTemplatable {
-		return /* HTML */ `<input
-			type="submit"
-			value="${this.submitButtonText}"
-			formaction="${this.action}"
-			${this.form_id ? `form="${this.form_id}"` : ""}
-		/>`;
-	}
-
-	async render(
-		ctx: Context,
-		data: FormData,
-		show_field_errors: boolean
-	): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `<div class="form-container">
-			${this.makeOpenFormTag(ctx)}
-			${!this.controls.some((control) => control.role == "messages")
-				? this.renderMessages(ctx, data)
-				: ""}
-			${this.renderControls(
-				this.makeFormControlContext(ctx, data, show_field_errors)
-			)}
-			${this.controls.some((control) => control.role == "submit")
-				? ""
-				: this.makeSubmitButton()}
-			${this.makeCloseFormTag()}
-		</div>`;
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	public async makeFormClasses(_ctx: Context): Promise<string[]> {
-		return [];
-	}
-
-	public makeOpenFormTag(ctx: Context): FlatTemplatable {
-		return tempstream`<form enctype="multipart/form-data" method="POST" id="${
-			this.form_id
-		}" action="${this.action}" class="${this.makeFormClasses(ctx).then(
-			(classes) => classes.join(" ")
-		)}" ${
-			this.useTurbo ? "" : `data-turbo="false"`
-		}></form><div class="form">`;
-	}
-
-	public makeCloseFormTag(): FlatTemplatable {
-		return `</div>`;
-	}
-
-	public async onValuesInvalid(
-		ctx: Context,
-		form_messages: FormMessage[],
-		_field_errors: Partial<Record<keyof Fields, string>>
-	): Promise<FormReaction> {
-		const messages = form_messages.length
-			? form_messages
-			: [<const>{ type: "error", text: "Some fields are invalid" }];
-		return {
-			action: "stay",
-			content: await this.render(
-				ctx,
-				{
-					raw_values: await this.extractRawValues(ctx),
-					messages,
-				},
-				"show_field_errors" && true
-			),
-			messages,
-		};
-	}
-
-	public async onError(
-		ctx: Context,
-		data: FormData,
-		error: unknown
-	): Promise<FormReaction> {
-		let error_message = "Unknown error has occured";
-		if (
-			is(error, predicates.object) &&
-			hasShape({ message: predicates.string }, error)
-		) {
-			error_message = error.message;
-		}
-		const messages = [<const>{ type: "error", text: error_message }];
-		return {
-			action: "stay",
-			content: await this.render(
-				ctx,
-				{
-					raw_values: data.raw_values,
-					messages,
-				},
-				"show_field_errors" && true
-			),
-		};
-	}
-
-	public abstract onSubmit(
-		ctx: Context,
-		data: FormData
-	): SubmitResult | Promise<SubmitResult>;
-
-	public async onSuccess(
-		ctx: Context,
-		data: FormData,
-		_submitResult: SubmitResult
-	): Promise<FormReaction> {
-		const messages = [
-			<const>{ type: "success", text: this.defaultSuccessMessage },
-		];
-		return {
-			action: "stay",
-			content: await this.render(
-				ctx,
-				{
-					raw_values: data.raw_values,
-					messages,
-				},
-				"show_field_errors" && false
-			),
-			messages,
-		};
-	}
-
-	async getRawValuesOnSuccess(ctx: Context) {
-		return this.extractRawValues(ctx);
-	}
-
-	async handlePost(ctx: Context): Promise<FormReaction> {
-		const raw_values = await this.extractRawValues(ctx);
-		const { valid, form_messages, field_errors } = await this.validate(
-			ctx,
-			raw_values
-		);
-		if (!valid) {
-			return this.onValuesInvalid(ctx, form_messages, field_errors);
-		}
-		try {
-			ctx.status = 303;
-			const result = await this.onSubmit(ctx, {
-				raw_values,
-				messages: [],
-			});
-			return this.onSuccess(
-				ctx,
-				{
-					raw_values: await this.getRawValuesOnSuccess(ctx),
-					messages: [],
-				},
-				result
-			);
-		} catch (e: unknown) {
-			// eslint-disable-next-line no-console
-			console.dir(e, { depth: 5 });
-			const message =
-				is(e, predicates.object) &&
-				hasFieldOfType(e, "message", predicates.string)
-					? e?.message
-					: is(e, predicates.string)
-					? e
-					: "Wystąpił błąd";
-
-			return this.onError(
-				ctx,
-				{
-					raw_values,
-					messages: [
-						{
-							type: "error",
-							text: message,
-						},
-					],
-				},
-				e
-			);
-		}
-	}
-
-	public mount(router: Router, path: string): void {
-		router.use(path, async (ctx, next) => {
-			const result = await this.canAccess(ctx);
-			if (!result.canAccess) {
-				ctx.body = this.renderError(ctx, {
-					type: "access",
-					message: result.message,
-				});
-				ctx.status = 403;
-				return;
-			}
-			await next();
-		});
-		router.get(path, async (ctx) => {
-			ctx.type = "html";
-			ctx.body = await this.render(
-				ctx,
-				{
-					raw_values: await this.extractRawValues(ctx),
-					messages: [],
-				},
-				"show_field_errors" && false
-			);
-		});
-		router.post(path, async (ctx) => {
-			const reaction = await this.handlePost(ctx);
-			if (reaction.action == "stay") {
-				ctx.status = 422;
-				ctx.body = reaction.content;
-			} else if (reaction.action == "redirect") {
-				ctx.status = 303;
-				ctx.redirect(reaction.url);
-			}
-		});
-		const subrouter = new Router(); // for use with other subroutes that individual controls might register
-		for (const control of this.controls) {
-			control.mount(subrouter);
-		}
-
-		router.use(path, subrouter.routes(), subrouter.allowedMethods());
-	}
-
-	async extractRawValues(
-		ctx: Context
-	): Promise<Record<string, FormDataValue>> {
-		return ctx.$body;
-	}
-}

package/src/forms/forms.scss

@@ -1,85 +0,0 @@
-.form-message {
-	--color: black;
-	border: 1px solid var(--color);
-	border-radius: 5px;
-	padding: 10px;
-
-	&--error {
-		--color: #ff4136;
-	}
-
-	&--success {
-		--color: #2ecc40;
-	}
-}
-
-.form__error {
-	color: #ff4136;
-}
-
-.form-input__wrapper--checkbox {
-	display: flex;
-	flex-flow: row nowrap;
-	align-items: center;
-	& > input[type="checkbox"] {
-		width: 15px;
-		height: 15px;
-
-		+ label {
-			padding-left: 10px;
-		}
-	}
-}
-
-.form-input__wrapper--multiple-files--photos {
-	ul {
-		list-style: none;
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-		grid-gap: 10px;
-		margin-bottom: 20px;
-
-		li {
-			background-color: white;
-			box-shadow: 1px 1px 6px 0px #00000038;
-			padding: 10px;
-			display: grid;
-			grid-template-columns: 1fr 20px;
-			grid-template-rows: 20px auto min-content;
-			grid-row-gap: 10px;
-
-			a {
-				grid-row: 1/3;
-				grid-column: 1/3;
-
-				picture,
-				img {
-					width: 100%;
-					height: 150px;
-					object-fit: contain;
-				}
-			}
-
-			.filename {
-				grid-row: 3/4;
-				grid-column: 1/3;
-			}
-
-			form {
-				grid-row: 1/2;
-				grid-column: 2/3;
-				position: relative;
-				z-index: 2;
-			}
-		}
-	}
-}
-
-.file-list-item {
-	display: flex;
-	flex-flow: row;
-
-	form {
-		padding-left: 20px;
-	}
-}