@sealcode/sealgen 0.2.1 → 0.2.2

package/src/forms/field.ts

@@ -0,0 +1,119 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { BaseContext } from "koa";
+
+export type FormFieldValidationResponse = { valid: boolean; message: string };
+
+export type FormFieldValidationFn = (
+	ctx: BaseContext,
+	value: unknown,
+	field: FormField
+) => Promise<FormFieldValidationResponse>;
+
+export class FormField<Fieldnames extends string = string> {
+	constructor(
+		public name: Fieldnames,
+		public required: boolean = false,
+		public validator: FormFieldValidationFn = async () => ({
+			valid: true,
+			message: "",
+		})
+	) {}
+
+	public async _validate(
+		ctx: BaseContext,
+		value: unknown
+	): Promise<FormFieldValidationResponse> {
+		if (this.required && (value == "" || value == null || value == undefined)) {
+			return { valid: false, message: "This field is required" };
+		}
+		return this.validator(ctx, value, this);
+	}
+
+	public getEmptyValue() {
+		return "";
+	}
+}
+
+export class PickFromListField<
+	Fieldnames extends string = string
+> extends FormField<Fieldnames> {
+	constructor(
+		public name: Fieldnames,
+		public required: boolean = false,
+		public generateOptions: (
+			ctx: BaseContext
+		) => Promise<Record<string, string> | { [i: string]: string }>,
+		public customValidation: (
+			ctx: BaseContext,
+			value: unknown,
+			instance: PickFromListField
+		) => Promise<FormFieldValidationResponse> = (ctx, value, instance) =>
+			instance.valueInList(ctx, value)
+	) {
+		super(name, required, (ctx, value) => this.customValidation(ctx, value, this));
+	}
+
+	async valueInList(
+		ctx: BaseContext,
+		value: unknown
+	): Promise<FormFieldValidationResponse> {
+		const options = await this.generateOptions(ctx);
+		if (!is(value, predicates.string)) {
+			return { valid: false, message: "not a string" };
+		}
+		if (!Object.keys(options).includes(value)) {
+			return { valid: false, message: `"${value}" is not one of the options` };
+		}
+		return { valid: true, message: "" };
+	}
+}
+
+export class ChekboxedListField<
+	Fieldnames extends string = string
+> extends FormField<Fieldnames> {
+	constructor(
+		public name: Fieldnames,
+		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(name, required, (ctx, value) => this.isValueValid(ctx, value));
+	}
+
+	private 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: "" };
+	}
+}
+
+export class NumberField<
+	Fieldnames extends string = string
+> extends FormField<Fieldnames> {
+	constructor(field_name: Fieldnames, required: boolean) {
+		super(field_name, required, (_, value) => this.isValueValid(_, value));
+	}
+
+	private async isValueValid(_: BaseContext, value: unknown) {
+		if (
+			(is(value, predicates.string) &&
+				!isNaN(parseFloat(value)) &&
+				parseFloat(value).toString() == value.trim()) ||
+			is(value, predicates.number) ||
+			((is(value, predicates.undefined) || value == "") && !this.required)
+		) {
+			return { valid: true, message: "" };
+		}
+		return { valid: false, message: "Proszę wprowadzić liczbę" };
+	}
+}

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

@@ -0,0 +1,7 @@
+import { FormField } from "./field";
+
+export class FormFieldsList {
+	static getField(fields: FormField[], name: string) {
+		return fields.find((f) => f.name == name);
+	}
+}

package/src/forms/form.ts

@@ -0,0 +1,242 @@
+import { BaseContext } from "koa";
+import Router from "@koa/router";
+import { Templatable, tempstream } from "tempstream";
+import { FormControl } from "./controls/controls";
+import { hasShape, is, predicates } from "@sealcode/ts-predicates";
+import { Mountable, PageErrorMessage } from "../page/page";
+import { FormField } from "./field";
+
+export type FormData<Fieldnames extends string = string> = {
+	values: Record<Fieldnames, string | string[] | number>;
+	raw_values: Record<Fieldnames, string | string[] | number>;
+	errors: Partial<Record<Fieldnames, string>>;
+	messages: { type: "info" | "success" | "error"; text: string }[];
+};
+
+export abstract class Form<Fieldnames extends string = string>
+	implements Mountable
+{
+	abstract fields: FormField<Fieldnames>[];
+	abstract controls: FormControl[];
+	defaultSuccessMessage = "Done";
+	submitButtonText = "Wyslij";
+
+	async canAccess(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_: BaseContext
+	): Promise<{ canAccess: boolean; message: string }> {
+		return { canAccess: true, message: "" };
+	}
+
+	async renderError(
+		_: BaseContext,
+		error: PageErrorMessage
+	): Promise<Templatable> {
+		return tempstream/* HTML */ `<div>${error.message}</div>`;
+	}
+
+	async validate(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_: BaseContext,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		__: Record<string, unknown>
+	): Promise<{ valid: boolean; error: string }> {
+		return {
+			valid: true,
+			error: "",
+		};
+	}
+
+	private async _validate(
+		ctx: BaseContext,
+		values: Record<string, unknown>
+	): Promise<{
+		valid: boolean;
+		errors: Record<Fieldnames | "form", string>;
+	}> {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const errors = {} as Record<Fieldnames | "form", string>;
+		let valid = true;
+		await Promise.all(
+			this.fields.map(async (field) => {
+				const { valid: fieldvalid, message: fieldmessage } =
+					await field._validate(ctx, values[field.name]);
+				if (!fieldvalid) {
+					valid = false;
+					errors[field.name] = fieldmessage;
+				}
+			})
+		);
+		const formValidationResult = await this.validate(ctx, values);
+		if (!formValidationResult.valid) {
+			valid = false;
+			errors.form = formValidationResult.error;
+		}
+		return { valid, errors };
+	}
+
+	async render(
+		ctx: BaseContext,
+		data: FormData,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_: string
+	): Promise<Templatable> {
+		return tempstream/* HTML */ `${this.makeFormTag(
+			`${ctx.URL.pathname}/`
+		)} ${
+			!this.controls.some((control) => control.role == "messages")
+				? this.renderMessages(ctx, data)
+				: ""
+		} ${
+			data.errors.form !== undefined
+				? `<div class="form__error">${data.errors.form}</div>`
+				: ""
+		} ${this.renderControls(ctx, data)}<input type="submit" value="${
+			this.submitButtonText
+		}"/></form>`;
+	}
+
+	public renderMessages(_: BaseContext, data: FormData): Templatable {
+		return tempstream/* HTML */ `<div class="form-messages">
+			${data.messages.map(
+				(message) =>
+					`<div class="form-message form-message--${message.type}">${message.text}</div>`
+			)}
+		</div>`;
+	}
+
+	public renderControls(ctx: BaseContext, data: FormData): Templatable {
+		return tempstream/* HTML */ `${this.controls.map((control) =>
+			control.render(ctx, this.fields, data)
+		)}`;
+	}
+
+	public makeFormTag(path: string) {
+		return `<form method="POST" action="${path}">`;
+	}
+
+	private generateData(rawData: Record<string, unknown> = {}): FormData {
+		// generates a FormData object that has the correct shape to be passed to
+		// render(), so for example it makes sure that all fields either have values or
+		// are empty string (the aren't undefined, for example). If no argument is passed,
+		// creates an object that represents an empty state of the form. If some data
+		// object is passed in the first argument, then the values in that data object are
+		// incorporated into the generated object
+
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const values = Object.fromEntries(
+			this.fields.map((f) => [
+				f.name,
+				rawData[f.name] || f.getEmptyValue(),
+			])
+		) as Record<Fieldnames, string>;
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const errors = Object.fromEntries(
+			this.fields.map((f) => [f.name, ""])
+		) as Record<Fieldnames, string>;
+		return {
+			values,
+			errors,
+			messages: [],
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			raw_values: rawData as Record<string, string>,
+		};
+	}
+
+	public async onValuesInvalid(
+		ctx: BaseContext,
+		errors: Record<Fieldnames, string>,
+		form_path: string
+	) {
+		ctx.status = 422;
+		const { values, raw_values } = this.generateData(ctx.$body);
+		ctx.body = await this.render(
+			ctx,
+			{
+				values,
+				raw_values,
+				errors,
+				messages: [{ type: "error", text: "Some fields are invalid" }],
+			},
+			form_path
+		);
+	}
+
+	public async onError(ctx: BaseContext, error: unknown, form_path: string) {
+		ctx.status = 422;
+		let error_message = "Unknown error has occured";
+		if (
+			is(error, predicates.object) &&
+			hasShape({ message: predicates.string }, error)
+		) {
+			error_message = error.message;
+		}
+		const { values, raw_values } = this.generateData(ctx.$body);
+		ctx.body = await this.render(
+			ctx,
+			{
+				values,
+				raw_values,
+				errors: {},
+				messages: [{ type: "error", text: error_message }],
+			},
+			form_path
+		);
+	}
+
+	public abstract onSubmit(
+		ctx: BaseContext,
+		values: Record<Fieldnames, string | string[] | number>
+	): void | Promise<void>;
+
+	public async onSuccess(ctx: BaseContext, form_path: string): Promise<void> {
+		const { values, raw_values } = this.generateData(ctx.$body);
+		ctx.body = await this.render(
+			ctx,
+			{
+				values,
+				raw_values,
+				errors: {},
+				messages: [
+					{ type: "success", text: this.defaultSuccessMessage },
+				],
+			},
+			form_path
+		);
+		ctx.status = 422;
+	}
+
+	public mount(router: Router, path: string) {
+		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, this.generateData(), path);
+		});
+		router.post(path, async (ctx) => {
+			const { valid, errors } = await this._validate(ctx, ctx.$body);
+			if (!valid) {
+				await this.onValuesInvalid(ctx, errors, path);
+				return;
+			}
+			try {
+				await this.onSubmit(ctx, this.generateData(ctx.$body).values);
+				await this.onSuccess(ctx, path);
+			} catch (e) {
+				// eslint-disable-next-line no-console
+				console.dir(e, { depth: 5 });
+				await this.onError(ctx, e, path);
+			}
+		});
+	}
+}

package/src/forms/forms.scss

@@ -0,0 +1,18 @@
+.form-message {
+	--color: black;
+	border: 1px solid var(--color);
+	border-radius: 5px;
+	padding: 10px;
+
+	&--error {
+		--color: #ff4136;
+	}
+
+	&--success {
+		--color: #2ecc40;
+	}
+}
+
+.form__error {
+	color: #ff4136;
+}

package/src/forms/validator.ts

@@ -0,0 +1,10 @@
+import { BaseContext } from "koa";
+import { Field } from "sealious";
+import { FormFieldValidationFn } from "./field";
+
+export function collectionFieldValidator(field: Field): FormFieldValidationFn {
+	return async (ctx: BaseContext, value) => {
+		const { valid, reason } = await field.checkValue(ctx.$context, value, undefined);
+		return { valid, message: reason || (valid ? "Wrong value" : "") };
+	};
+}

package/src/generate-routes.ts

@@ -1,7 +1,7 @@
 import { promises as fs } from "fs";
 import { relative } from "path";
 import _locreq from "locreq";
-import { walk } from "./utils/walk";
+import { walkDir } from "./utils/walk";
 import { importPath } from "./utils/import-path";
 import { assertType, predicates } from "@sealcode/ts-predicates";
 import { unescape_url_params } from "./utils/escape-url-params";
@@ -24,7 +24,7 @@ async function extractActionName(full_file_path: string): Promise<string> {
 export async function generateRoutes(): Promise<void> {
 	const files = await Promise.all(
 		(
-			await walk(target_locreq.resolve("src/back/routes"))
+			await walkDir(target_locreq.resolve("src/back/routes"))
 		)
 			.filter(
 				(f) =>

package/src/index.ts

@@ -1,30 +1,16 @@
-#!/usr/bin/env node
+import Sealious from "sealious";
 
-import { addCollection } from "./add-collection";
-import { addRoute } from "./add-route";
-import { generateScssIncludes } from "./find-scss-includes";
-import { generateCollections } from "./generate-collections";
-import { generateRoutes } from "./generate-routes";
+declare module "koa" {
+	interface BaseContext {
+		$context: Sealious.Context;
+		$body: Record<string, unknown>;
+	}
+}
 
-const actions: Record<string, () => Promise<void> | undefined> = {
-	"add-collection": addCollection,
-	"add-route": addRoute,
-	"generate-collections": generateCollections,
-	"generate-routes": generateRoutes,
-	"generate-scss-includes": generateScssIncludes,
-	default: async function () {
-		console.log("Usage: `sealscript <action>`");
-		console.log(
-			`Available actions: ${Object.keys(actions)
-				.filter((e) => e != "default")
-				.join(", ")}`
-		);
-	},
-};
-
-void (async function () {
-	const action = process.argv.at(-1);
-	actions;
-	const fn = actions[action || "default"] || actions.default;
-	await fn();
-})();
+export * from "./forms/form";
+export * from "./forms/controls/controls";
+export * from "./forms/field";
+export * from "./page/page";
+export * from "./page/props-parser";
+export * from "./utils/utils";
+export * from "./forms/validator";

package/src/page/access-control.ts

@@ -0,0 +1,18 @@
+import { BaseContext } from "koa";
+import { ActionName, Collection } from "sealious";
+
+export function peopleWhoCan(action: ActionName, collection: Collection) {
+	return async function (ctx: BaseContext) {
+		const policy = collection.getPolicy(action);
+		const result = await policy.check(ctx.$context);
+		if (!result) {
+			ctx.status = 403;
+			return { canAccess: false, message: "Not allowed" };
+		}
+		if (!result.allowed) {
+			ctx.status = 403;
+			return { canAccess: false, message: result.reason };
+		}
+		return { canAccess: true, message: "" };
+	};
+}

package/src/page/list.ts

@@ -0,0 +1,214 @@
+import { BaseContext } from "koa";
+import { Collection, CollectionItem } from "sealious";
+import { Templatable, tempstream } from "tempstream";
+import { peopleWhoCan } from "./access-control";
+import { Page } from "./page";
+import { predicates, ShapeToType } from "@sealcode/ts-predicates";
+import { PagePropsParser } from "./props-parser";
+import { FormFieldControl } from "../forms/controls/controls";
+import { FormField } from "../forms/field";
+import { FormData } from "../forms/form";
+import { FormFieldsList } from "../forms/form-fields-list";
+import { naturalNumbers, UrlWithNewParams } from "../utils/utils";
+
+export const BasePagePropsShape = <const>{};
+export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
+
+export const BaseListPagePropsShape = <const>{
+	page: predicates.number,
+	itemsPerPage: predicates.number,
+};
+export type BaseListPageProps = ShapeToType<typeof BaseListPagePropsShape>;
+export const BaseListPageDefaultProps = { page: 1, itemsPerPage: 25 };
+
+export type PropsErrors<PropsType> = Partial<Record<keyof PropsType, string>>;
+
+export abstract class ListPage<
+	ItemType,
+	PropsType extends BaseListPageProps = BaseListPageProps
+> extends Page {
+	abstract getItems(
+		ctx: BaseContext,
+		props: PropsType
+	): Promise<{ items: ItemType[] }>;
+	abstract getTotalPages(ctx: BaseContext, props: PropsType): Promise<number>;
+	abstract renderItem(ctx: BaseContext, item: ItemType): Promise<Templatable>;
+	abstract propsParser: PagePropsParser<PropsType>;
+
+	filterFields: FormField<keyof PropsType>[] = [];
+	filterControls: FormFieldControl[] = [];
+
+	renderListContainer(_: BaseContext, content: Templatable): Templatable {
+		return tempstream`<div>${content}</div>`;
+	}
+
+	async validateProps(
+		ctx: BaseContext,
+		props: PropsType
+	): Promise<{ valid: boolean; errors: PropsErrors<PropsType> }> {
+		const errors: PropsErrors<PropsType> = {};
+		let has_errors = false;
+		const promises = [];
+		for (const [key, value] of Object.entries(props)) {
+			const field = FormFieldsList.getField(this.filterFields, key);
+			if (field) {
+				promises.push(
+					field._validate(ctx, value).then(({ valid, message }) => {
+						if (!valid) {
+							has_errors = true;
+							// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+							errors[key as keyof PropsType] = message;
+						}
+					})
+				);
+			}
+		}
+		await Promise.all(promises);
+		return { valid: has_errors, errors };
+	}
+
+	async getProps(ctx: BaseContext): Promise<{
+		parsed_props: PropsType;
+		errors: PropsErrors<PropsType>;
+		raw_props: PropsType;
+	}> {
+		const raw_props = this.propsParser.decode(ctx);
+		const parsed_props = { ...raw_props };
+		const { errors } = await this.validateProps(ctx, parsed_props);
+		for (const prop_name in errors) {
+			const default_value = this.propsParser.getDefaultValue(prop_name);
+			if (default_value !== undefined) {
+				parsed_props[prop_name] = default_value;
+			} else {
+				delete parsed_props[prop_name];
+			}
+		}
+		return { parsed_props, errors, raw_props };
+	}
+
+	async render(ctx: BaseContext) {
+		const { parsed_props, errors, raw_props } = await this.getProps(ctx);
+
+		return tempstream`${this.renderPagination(ctx, parsed_props)}
+${this.renderFilters(ctx, parsed_props, raw_props, errors)}
+${this.getItems(ctx, parsed_props).then(({ items }) =>
+	this.renderListContainer(
+		ctx,
+		items.map((item) => this.renderItem(ctx, item))
+	)
+)}`;
+	}
+
+	async renderPagination(ctx: BaseContext, props: PropsType) {
+		const totalIems = await this.getTotalPages(ctx, props);
+		const currentPage = props.page;
+
+		return tempstream/* HTML */ `<center>
+			${currentPage > 1
+				? this.renderPageButton(ctx, 1, "Pierwsza strona")
+				: ""}
+			${currentPage > 1
+				? this.renderPageButton(
+						ctx,
+						currentPage - 1,
+						"Poprzednia strona"
+				  )
+				: ""}
+
+			<select onchange="if (this.value) Turbo.visit(this.value)">
+				${Array.from(
+					naturalNumbers(1, await this.getTotalPages(ctx, props))
+				).map(
+					(n) => /* HTML */ `<option
+						value="${UrlWithNewParams(
+							ctx,
+							//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+							this.propsParser.overwriteProp(ctx, {
+								page: n,
+							} as Partial<PropsType>)
+						)}"
+						${currentPage === n ? "selected" : ""}
+					>
+						${n}
+					</option>`
+				)}
+			</select>
+			${currentPage < totalIems
+				? this.renderPageButton(ctx, currentPage + 1, "Następna strona")
+				: ""}
+			${currentPage < totalIems
+				? this.renderPageButton(ctx, totalIems, "Ostatnia strona")
+				: ""}
+		</center>`;
+	}
+
+	private renderPageButton(ctx: BaseContext, page: number, text: string) {
+		return /* HTML */ `<a
+			href="${UrlWithNewParams(
+				ctx,
+				//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				this.propsParser.overwriteProp(ctx, {
+					page,
+				} as Partial<PropsType>)
+			)}"
+			>${text}</a
+		>`;
+	}
+
+	renderFilters(
+		ctx: BaseContext,
+		parsed_props: PropsType, // parsed props don't include wrong values
+		raw_props: PropsType,
+		errors: PropsErrors<PropsType>
+	) {
+		return tempstream/* HTML */ `<form method="GET">
+			${this.propsParser.makeHiddenInputs(parsed_props, [
+				"page",
+				...this.filterFields.map((f) => f.name),
+			])}
+			${this.filterControls.map((control) =>
+				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				control.render(ctx, this.filterFields, {
+					values: parsed_props,
+					raw_values: raw_props,
+					errors,
+					messages: [],
+				} as FormData)
+			)}
+		</form>`;
+	}
+}
+
+export abstract class SealiousItemListPage<
+	C extends Collection,
+	PageProps extends BaseListPageProps = BaseListPageProps
+> extends ListPage<CollectionItem<C>, PageProps> {
+	constructor(public collection: C) {
+		super();
+	}
+
+	async getTotalPages(ctx: BaseContext, props: PageProps) {
+		const { items } = await this.collection.list(ctx.$context).fetch();
+		return Math.ceil(items.length / props.itemsPerPage);
+	}
+
+	async getItems(ctx: BaseContext, props: PageProps) {
+		return {
+			items: (
+				await this.collection
+					.list(ctx.$context)
+					.paginate({ items: props.itemsPerPage, page: props.page })
+					.fetch()
+			).items,
+		};
+	}
+
+	async renderItem(
+		_: BaseContext,
+		item: CollectionItem<C>
+	): Promise<Templatable> {
+		return `<div>${item.id}</div>`;
+	}
+
+	canAccess = peopleWhoCan("list", this.collection);
+}