@sealcode/sealgen 0.6.1 → 0.7.1

package/lib/utils/input-wrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputWrapper = exports.getRequiredClass = void 0;
+const tempstream_1 = require("tempstream");
+function getRequiredClass(isRequired) {
+    return isRequired ? "required" : "";
+}
+exports.getRequiredClass = getRequiredClass;
+function getModifierClasses(modifiers) {
+    return modifiers.map((m) => "form-input__wrapper--" + m).join(" ");
+}
+function inputWrapper(modifiers, input) {
+    return tempstream_1.tempstream /* HTML */ `<div
+		class="form-input form-input__wrapper ${getModifierClasses(modifiers)}"
+	>
+		${input}
+	</div>`;
+}
+exports.inputWrapper = inputWrapper;
+//# sourceMappingURL=input-wrapper.js.map

package/lib/utils/input-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper.js","sourceRoot":"","sources":["../../src/utils/input-wrapper.ts"],"names":[],"mappings":";;;AACA,2CAAwC;AAExC,SAAgB,gBAAgB,CAAC,UAAmB;IACnD,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;AACrC,CAAC;AAFD,4CAEC;AAED,SAAS,kBAAkB,CAAC,SAAmB;IAC9C,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,uBAAuB,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACpE,CAAC;AAED,SAAgB,YAAY,CAAC,SAAmB,EAAE,KAAa;IAC9D,OAAO,uBAAU,CAAA,UAAU,CAAC;0CACa,kBAAkB,CAAC,SAAS,CAAC;;IAEnE,KAAK;QACD,CAAC;AACT,CAAC;AAND,oCAMC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.6.1",
+	"version": "0.7.1",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -26,6 +26,7 @@
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-prettier": "^3.4.1",
 		"eslint-plugin-with-tsc-error": "^0.0.7",
+		"koa-body": "^5.0.0",
 		"mocha": "^9.1.1",
 		"mri": "^1.1.6",
 		"nyc": "^15.1.0",
@@ -42,10 +43,10 @@
 		"koa": "^2.13.0",
 		"locreq": "^2.0.2",
 		"merge": "^2.1.1",
+		"prettier": "^2.7.1",
 		"prompts": "^2.4.2",
 		"tempstream": "^0.0.21",
-		"tiny-glob": "^0.2.9",
-		"prettier": "^2.7.1"
+		"tiny-glob": "^0.2.9"
 	},
 	"peerDependencies": {
 		"@koa/router": "^10.1.1",

package/src/add-route.ts

@@ -1,14 +1,17 @@
+import { existsSync, promises as fs } from "fs";
+import _locreq from "locreq";
 import { resolve } from "path";
-import { promises as fs, existsSync } from "fs";
-import { question } from "./utils/question";
-import { pageTemplate } from "./templates/page";
+import { generateRoutes } from "./generate-routes";
 import { formTemplate } from "./templates/form";
+import { listTemplate } from "./templates/list";
+import { multiformTemplate } from "./templates/multiform";
+import { pageTemplate } from "./templates/page";
+import { redirectTemplate } from "./templates/redirect";
 import { testTemplate } from "./templates/route-test";
 import { escape_url_params } from "./utils/escape-url-params";
+import { question } from "./utils/question";
+import prompts = require("prompts");
 
-import _locreq from "locreq";
-import { generateRoutes } from "./generate-routes";
-import { listTemplate } from "./templates/list";
 const target_locreq = _locreq(process.cwd());
 
 export async function addRoute(): Promise<void> {
@@ -20,11 +23,21 @@ export async function addRoute(): Promise<void> {
 		"Enter a full absolute path for the new route (e.g. /admin/users/add): ",
 		(s: string) => s.trim()[0] == "/"
 	);
-	const mode_answer = (await question(
-		"Is this a page (p), a form (f), or a list (l)? ",
-		(a: string) => ["p", "f", "l"].includes(a.toLowerCase())
-	)) as "p" | "f" | "l";
-	const mode = (<const>{ p: "page", f: "form", l: "list" })[mode_answer];
+
+	const response = await prompts({
+		type: "select",
+		name: "mode",
+		message: "What kind of route is it?",
+		choices: [
+			{ title: "page", value: "page" },
+			{ title: "form", value: "form" },
+			{ title: "list", value: "list" },
+			{ title: "multiform", value: "multiform" },
+			{ title: "redirect", value: "redirect" },
+		],
+	});
+
+	const mode = response.mode as string;
 
 	const file_path = target_locreq.resolve(
 		`src/back/routes/${escape_url_params(url)}.${mode}.ts`
@@ -36,8 +49,14 @@ export async function addRoute(): Promise<void> {
 		page: pageTemplate,
 		form: formTemplate,
 		list: listTemplate,
+		multiform: multiformTemplate,
+		redirect: redirectTemplate,
 	}[mode];
 
+	if (!template) {
+		throw new Error(`Could not get template ${mode}`);
+	}
+
 	if (existsSync(file_path)) {
 		// eslint-disable-next-line no-console
 		console.error(`ERROR: File ${file_path} already exists.`);

package/src/components/components.ts

@@ -0,0 +1 @@
+export * from "./tabs";

package/src/components/tabs.ts

@@ -0,0 +1,95 @@
+import { FlatTemplatable } from "tempstream";
+
+function name_to_id(str: string) {
+	return str.replace(/\W/g, "-");
+}
+
+const style = /* HTML */ `<style>
+	.tab-label {
+		height: 45px;
+		line-height: 45px;
+		padding: 0 45px;
+		display: block;
+		float: left;
+		box-sizing: border-box;
+		border-bottom: 3px solid transparent;
+		cursor: pointer;
+		font-size: 18px;
+		user-select: none;
+	}
+
+	@media screen and (max-width: 869px) {
+		.tab-label {
+			display: none;
+		}
+	}
+
+	.tab-label--mobile {
+		line-height: unset;
+		padding-top: 30px;
+		padding-left: 0;
+		pointer-events: none;
+		padding-bottom: 30px;
+		color: $font-graphite;
+		border-bottom: 2px solid $font-primary;
+		display: none;
+		@media screen and (max-width: 869px) {
+			display: block;
+		}
+	}
+
+	.tab-content {
+		padding-top: 30px;
+		clear: both;
+	}
+
+	@media screen and (max-width: 869px) {
+		.tab-content {
+			display: block !important;
+		}
+	}
+</style>`;
+
+export function tabs(
+	tabs: Record<string, string>,
+	selected_tab_style = "font-weight: bold;",
+	selected_index = 0
+): FlatTemplatable {
+	return /* HTML */ `${style}
+	${Object.keys(tabs)
+		.map((tab_title, index) => {
+			const id = name_to_id(tab_title);
+			return /* HTML */ `<input
+					type="radio"
+					name="tabs"
+					id="${id}"
+					class="tab-radio--${id}"
+					style="display: none"
+					${selected_index == index ? "checked" : ""}
+				/>
+				<label class="tab-label tab-label--${id}" for="${id}">
+					${tab_title}
+				</label>`;
+		})
+		.join("\n")}
+	${Object.entries(tabs)
+		.map(([title, content]) => {
+			const id = name_to_id(title);
+			return /* HTML */ ` <div class="tab-label tab-label--mobile">
+					${title}
+				</div>
+				<div class="tab-content tab-content--${id}">${content}</div>
+				<style>
+					.tab-radio--${id} ~ .tab-content--${id} {
+						display:none;
+					}
+					.tab-radio--${id}:checked ~ .tab-content--${id} {
+						display:block;
+					}
+					.tab-radio--${id}:checked ~ label.tab-label--${id} {
+						${selected_tab_style}
+					}
+				</style>`;
+		})
+		.join("\n")}`;
+}

package/src/forms/controls/checkboxed-list-input.ts

@@ -1,6 +1,7 @@
 import { is, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
 import { tempstream } from "tempstream";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { ChekboxedListField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
@@ -22,17 +23,23 @@ export class CheckboxedListInput extends FormFieldControl {
 			this.field.generateOptions(ctx),
 			this.field.isVisible(ctx),
 		]);
+
+		const { name, required } = this.field;
+
 		return tempstream/* HTML */ `${isVisible
-			? Object.entries(options).map(
-					([value, text]) => /* HTML */ `<div>
-						<input
-							type="checkbox"
-							id="${this.field.name}.${value}"
-							name="${this.field.name}.${value}"
-							${pickedValues.includes(value) ? "checked" : ""}
-						/>
-						<label for="${this.field.name}.${value}">${text}</label>
-					</div>`
+			? Object.entries(options).map(([value, text]) =>
+					inputWrapper(
+						[name, getRequiredClass(required)],
+						/* HTML */ `
+							<input
+								type="checkbox"
+								id="${name}.${value}"
+								name="${name}.${value}"
+								${pickedValues.includes(value) ? "checked" : ""}
+							/>
+							<label for="${name}.${value}">${text}</label>
+						`
+					)
 			  )
 			: ""}`;
 	}

package/src/forms/controls/controls.ts

@@ -10,3 +10,4 @@ export { FormParagraph } from "./form-paragraph";
 export { HTML } from "./html";
 export { HiddenInput } from "./hidden-input";
 export { Textarea } from "./textarea";
+export { FieldGroup } from "./field-group";

package/src/forms/controls/dropdown.ts

@@ -1,6 +1,6 @@
 import { Context } from "koa";
-import { tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField, PickFromListField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
@@ -26,28 +26,33 @@ export class Dropdown extends FormFieldControl {
 		data: Record<string, FormDataValue>
 	) {
 		const { parsed: picked_value } = await this.field.getValue(ctx, data);
-		const id = this.field.name;
-		return tempstream/* HTML */ `<label for="${id}"
-				>${this.options.label}</label
-			><select
-				name="${this.field.name}"
-				id="${id}"
-				${this.options.autosubmit
-					? `onchange='this.form.submit()'`
-					: ""}
-				${!this.options.autocomplete ? `autocomplete="off"` : ""}
-			>
-				${Promise.resolve(this.field.generateOptions(ctx)).then(
-					(options) =>
-						Object.entries(options).map(
-							([value, text]) =>
-								`<option value="${attribute(value)}" ${
-									(value || "") == picked_value
-										? "selected"
-										: ""
-								}>${text}</option>`
+		const name = this.field.name;
+		return inputWrapper(
+			[name, getRequiredClass(this.field.required)],
+			/* HTML */ `<label for="${name}">${this.options.label}</label
+				><select
+					name="${this.field.name}"
+					id="${name}"
+					${this.options.autosubmit
+						? `onchange='this.form.submit()'`
+						: ""}
+					${!this.options.autocomplete ? `autocomplete="off"` : ""}
+				>
+					${
+						// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+						Promise.resolve(this.field.generateOptions(ctx)).then(
+							(options) =>
+								Object.entries(options).map(
+									([value, text]) =>
+										`<option value="${attribute(value)}" ${
+											(value || "") == picked_value
+												? "selected"
+												: ""
+										}>${text}</option>`
+								)
 						)
-				)}
-			</select>`;
+					}
+				</select>`
+		);
 	}
 }

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

@@ -0,0 +1,32 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormDataValue } from "../form";
+import { FormControl } from "./form-control";
+
+export class FieldGroup extends FormControl {
+	constructor(
+		public controls: FormControl[],
+		public options: { label?: string; classes?: string } = {}
+	) {
+		super();
+	}
+
+	async render(
+		ctx: Context,
+		data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		const { label, classes } = this.options;
+
+		return tempstream/* HTML */ `
+			<div class="field-group ${classes || ""}">
+				${label ? `<label>${label}</label>` : ""}
+				<div class="field-group__fields">
+					${this.controls.map((control) =>
+						control.render(ctx, data, [], "", "")
+					)}
+				</div>
+			</div>
+		`;
+	}
+	role = <const>"decoration";
+}

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

@@ -6,7 +6,9 @@ export abstract class FormControl {
 	abstract render(
 		ctx: Context,
 		data: Record<string, FormDataValue>,
-		messages: FormMessage[]
+		messages: FormMessage[],
+		field_name_prefix: string,
+		form_id: string
 	): FlatTemplatable | Promise<FlatTemplatable>;
 	abstract role: "input" | "decoration" | "messages" | "submit";
 }

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

@@ -18,6 +18,9 @@ export abstract class FormFieldControl extends FormControl {
 
 	abstract render(
 		ctx: Context,
-		data: Record<string, FormDataValue>
+		data: Record<string, FormDataValue>,
+		messages: [],
+		field_name_prefix: string,
+		form_id: string
 	): FlatTemplatable | Promise<FlatTemplatable>;
 }

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

@@ -1,5 +1,7 @@
 import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
 import { attribute } from "../../sanitize";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
@@ -37,8 +39,11 @@ export class SimpleInput extends FormFieldControl {
 
 	async render<Fields extends Record<string, FormField>>(
 		ctx: Context,
-		data: Record<string, FormDataValue>
-	) {
+		data: Record<string, FormDataValue>,
+		_: unknown[],
+		field_prefix: string,
+		form_id: string
+	): Promise<FlatTemplatable> {
 		const id = this.options.id || this.field.name;
 		const label = this.options.label || this.field.name;
 		const type = this.options.type || "text";
@@ -52,16 +57,14 @@ export class SimpleInput extends FormFieldControl {
 		const readonly = this.options.readonly || false;
 		const required = this.field.required;
 
-		return /* HTML */ `<div
-			class="form-input form-input__wrapper ${required
-				? "form-input--required"
-				: ""}"
-		>
+		return /* HTML */ inputWrapper(
+			[id, type, getRequiredClass(required)],
+			`
 			<label for="${id}">${label}</label>
 			<input
 				id="${id}"
 				type="${type}"
-				name="${this.field.name}"
+				name="${field_prefix}${this.field.name}"
 				value="${attribute(
 					!valid && raw
 						? raw.toString()
@@ -70,15 +73,19 @@ export class SimpleInput extends FormFieldControl {
 						  ((parsed as any)?.toString() as string) || ""
 						: ""
 				)}"
+				${form_id ? `form="${form_id}"` : ""}
 				placeholder="${placeholder}"
 				${readonly ? "readonly" : ""}
 				${required ? "required" : ""}
 				${!this.options.autocomplete ? `autocomplete="off"` : ""}
 				${this.options.step ? `step="${this.options.step}"` : ""}
 			/>
-			${~valid && !this.options.hide_errors
-				? `<div class="input__error">${message}</div>`
-				: ""}
-		</div>`;
+			${
+				~valid && !this.options.hide_errors
+					? `<div class="input__error">${message}</div>`
+					: ""
+			}
+`
+		);
 	}
 }

package/src/forms/controls/textarea.ts

@@ -1,6 +1,7 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./form-field-control";
@@ -18,20 +19,20 @@ export class Textarea extends FormFieldControl {
 		data: Record<string, FormDataValue>
 	): Promise<FlatTemplatable> {
 		const { raw } = await this.field.getValue(ctx, data);
-		return tempstream/* HTML */ `<div
-			class="form-input form-input__wrapper"
-		>
-			<label for="${this.field.name}"
-				>${this.options.label || this.field.name}</label
-			>
-			<textarea
-				name="${this.field.name}"
-				id="${this.field.name}"
-				rows="${this.options.rows || 5}"
-				cols="${this.options.cols || 33}"
-			>
+		const { name, required } = this.field;
+		return inputWrapper(
+			[name, getRequiredClass(required)],
+			/* HTML */ ` <label for="${name}"
+					>${this.options.label || name}</label
+				>
+				<textarea
+					name="${name}"
+					id="${name}"
+					rows="${this.options.rows || 5}"
+					cols="${this.options.cols || 33}"
+				>
 ${attribute((raw || "").toString())}</textarea
-			>
-		</div>`;
+				>`
+		);
 	}
 }