@sealcode/sealgen 0.2.1 → 0.3.2

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

@@ -0,0 +1,16 @@
+import { BaseContext } from "koa";
+import { FormControl } from "./controls";
+
+export class FormHeader extends FormControl {
+	role = <const>"decoration";
+	constructor(
+		public text: string,
+		public isVisible: (ctx: BaseContext) => Promise<boolean> = async () => true
+	) {
+		super();
+	}
+	async render(ctx: BaseContext) {
+		const isVsbl = await this.isVisible(ctx);
+		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 { 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(): Templatable | Promise<Templatable> {
+		return /* HTML */ `<turbo-frame
+			id="contrahents"
+			loading="lazy"
+			src="${this.src}"
+		></turbo-frame>`;
+	}
+	role = <const>"decoration";
+}

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

@@ -0,0 +1,73 @@
+import { BaseContext } from "koa";
+import { FormField } from "../field";
+import { FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+export class SimpleInput extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public options: {
+			id?: string;
+			label?: string;
+			autocomplete?: boolean;
+			type?:
+				| "color"
+				| "date"
+				| "email"
+				| "file"
+				| "month"
+				| "number"
+				| "password"
+				| "search"
+				| "tel"
+				| "text"
+				| "time"
+				| "url"
+				| "week";
+			value?: string;
+			placeholder?: string;
+			readonly?: boolean;
+			step?: number;
+		} = {}
+	) {
+		super([fieldname]);
+	}
+
+	_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;
+		const type = this.options.type || "text";
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const value = data.values[field.name] as string;
+		// 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];
+		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}"
+				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>` : ""}
+		</div>`;
+	}
+}

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) =>
@@ -52,6 +52,7 @@ export async function generateRoutes(): Promise<void> {
 
 import Router from "@koa/router";
 import { Middlewares } from "sealious";
+import { Mountable } from "@sealcode/sealgen";
 
 ${files
 	.map(
@@ -67,15 +68,17 @@ ${files
 	.map(({ actionName, url }) => `export const ${actionName}URL = "${url}";`)
 	.join("\n")}
 
+function mount(router: Router, URL: string, mountable: Mountable){
+	router.use(URL, Middlewares.extractContext(), Middlewares.parseBody());
+	mountable.mount(router, URL);
+	// to automatically add trailing slashes:
+	router.get(URL.slice(0, -1), (ctx) => ctx.redirect(URL));
+}
+
 export default function mountAutoRoutes(router: Router) {
 ${files
-	.map(
-		({
-			actionName,
-		}) => `	router.use(${actionName}URL, Middlewares.extractContext(), Middlewares.parseBody());
-	${actionName}.mount(router, ${actionName}URL);`
-	)
-	.join("\n\n")}
+	.map(({ actionName }) => `	mount(router, ${actionName}URL, ${actionName});`)
+	.join("\n")}
 }
 `
 	);

package/src/index.ts

@@ -1,30 +1,17 @@
-#!/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";
+export * from "./page/list";

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: "" };
+	};
+}