@sealcode/sealgen 0.15.49 → 0.15.50

package/@types/src/forms/controls/checkboxed-list-input.d.ts

@@ -9,5 +9,13 @@ export declare class CheckboxedListInput extends FormFieldControl {
     constructor(field: CheckboxedListField<boolean>, options?: {
         label: string;
     });
+    generateCountBasedClasses(n: number): string[];
     render(fctx: FormControlContext): Promise<string>;
+    renderOption({ name, value, form_id, label, checked, }: {
+        name: string;
+        form_id: string;
+        value: string;
+        label?: string;
+        checked: boolean;
+    }): Promise<string>;
 }

package/@types/src/forms/fields/checkboxed-list.d.ts

@@ -1,17 +1,16 @@
 import { Context } from "koa";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField, FormFieldValidationResponse } from "./field.js";
+export type CheckboxedListItem = {
+    value: string;
+    label?: string;
+    group?: string;
+};
 export declare class CheckboxedListField<Required extends boolean> extends FormField<Required, Record<string, "on">> {
     required: Required;
-    generateOptions: (ctx: Context) => Promise<{
-        value: string;
-        label?: string;
-    }[]>;
+    generateOptions: (ctx: Context) => Promise<CheckboxedListItem[]>;
     isVisible: (ctx: Context) => Promise<boolean>;
-    constructor(required: Required, generateOptions: (ctx: Context) => Promise<{
-        value: string;
-        label?: string;
-    }[]>, isVisible?: (ctx: Context) => Promise<boolean>);
+    constructor(required: Required, generateOptions: (ctx: Context) => Promise<CheckboxedListItem[]>, isVisible?: (ctx: Context) => Promise<boolean>);
     predicate: (v: unknown, w: unknown) => {
         readonly match: boolean;
         readonly wildcard: string[];

package/lib/forms/controls/checkboxed-list-input.js

@@ -7,6 +7,15 @@ class CheckboxedListInput extends FormFieldControl {
     this.field = field;
     this.options = options;
   }
+  generateCountBasedClasses(n) {
+    return [
+      "options-count--" + n.toString(),
+      ...n >= 5 ? ["options-count--5-or-more"] : [],
+      ...n >= 10 ? ["options-count--10-or-more"] : [],
+      ...n >= 15 ? ["options-count--15-or-more"] : [],
+      ...n >= 20 ? ["options-count--20-or-more"] : []
+    ];
+  }
   async render(fctx) {
     const {
       valid,
@@ -18,47 +27,84 @@ class CheckboxedListInput extends FormFieldControl {
       this.field.generateOptions(fctx.ctx),
       this.field.isVisible(fctx.ctx)
     ]);
+    const ungroupped = [];
+    const groups = {};
+    for (const option of options) {
+      if (!option.group) {
+        ungroupped.push(option);
+      } else {
+        if (!groups[option.group]) {
+          groups[option.group] = [];
+        }
+        groups[option.group].push(option);
+      }
+    }
     const { name, required } = this.field;
     return inputWrapper(
       "checkboxed-list",
       [
         name,
         getRequiredClass(required),
-        "options-count--" + options.length.toString(),
-        ...options.length >= 5 ? ["options-count--5-or-more"] : [],
-        ...options.length >= 10 ? ["options-count--10-or-more"] : [],
-        ...options.length >= 15 ? ["options-count--15-or-more"] : [],
-        ...options.length >= 20 ? ["options-count--20-or-more"] : []
+        ...this.generateCountBasedClasses(options.length)
       ],
       tempstream`<label
 					>${this.options.label || this.field.name}</label
 				>
 				${~valid && fctx.validate ? `<div class="input__error">${message}</div>` : ""}
 				<ul>
-					${isVisible ? options.map(
-        ({ value, label }) => tempstream`<li>
-									${inputWrapper(
-          "checkbox",
-          [name],
-          /* HTML */
-          `
-											<input
-												type="checkbox"
-												id="${name}.${value}"
-												name="${name}.${value}"
-												${pickedValues.includes(value) ? "checked" : ""}
-												form=${fctx.form_id}
-											/>
-											<label for="${name}.${value}"
-												>${label || value}</label
-											>
-										`
-        )}
-								</li>`
+					${isVisible ? Object.entries(groups).map(
+        ([group_label, options2]) => tempstream` <h3>
+											${group_label}
+										</h3>
+										${options2.map(
+          ({ value, label }) => this.renderOption({
+            name,
+            value,
+            label,
+            form_id: fctx.form_id,
+            checked: pickedValues.includes(
+              value
+            )
+          })
+        )}`
+      ) : ""}
+					${isVisible ? ungroupped.map(
+        ({ value, label }) => this.renderOption({
+          name,
+          value,
+          label,
+          form_id: fctx.form_id,
+          checked: pickedValues.includes(value)
+        })
       ) : ""}
 				</ul>`
     );
   }
+  renderOption({
+    name,
+    value,
+    form_id,
+    label,
+    checked
+  }) {
+    return tempstream`<li>
+			${inputWrapper(
+      "checkbox",
+      [name],
+      /* HTML */
+      `
+					<input
+						type="checkbox"
+						id="${name}.${value}"
+						name="${name}.${value}"
+						${checked ? "checked" : ""}
+						form=${form_id}
+					/>
+					<label for="${name}.${value}">${label || value}</label>
+				`
+    )}
+		</li>`;
+  }
 }
 export {
   CheckboxedListInput

package/lib/forms/controls/checkboxed-list-input.test.js

@@ -231,6 +231,55 @@ describe("checkboxed-list", () => {
       await page.getByRole("button", { name: "Wy\u015Blij" }).click();
       await page.getByText(/ABC/).click({ timeout: 500 });
     });
+    it("groups checkboxes based on the value of the 'group' attribute", async () => {
+      const port = await getPort();
+      console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+      const app = new Koa();
+      const router = new Router();
+      const fields = {
+        syllables: new CheckboxedListField(true, async () => {
+          return [
+            ...["e", "y", "u", "i", "o", "a"].map((s, index) => ({
+              value: "vowel" + index,
+              label: s,
+              group: "vowels"
+            })),
+            ...["q", "w", "r", "t", "p", "s", "test_label"].map((s, index) => ({
+              value: "consonant" + index,
+              label: s,
+              group: "consonants"
+            }))
+          ];
+        })
+      };
+      mount(
+        router,
+        "/",
+        new class extends Form {
+          constructor() {
+            super(...arguments);
+            this.fields = fields;
+            this.controls = [new CheckboxedListInput(fields.syllables, { label: "Letters" })];
+          }
+          async onSubmit(ctx) {
+          }
+          async canAccess(_) {
+            return { canAccess: true, message: "" };
+          }
+        }(),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(port);
+      browser = await getBrowser();
+      const context = await browser.newContext();
+      page = await context.newPage();
+      await page.goto(`http://localhost:${port}`);
+      await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+      await page.getByText(/vowels/).click({ timeout: 500 });
+      await page.getByText(/consonants/).click({ timeout: 500 });
+      await page.getByText("test_label").click({ timeout: 500 });
+    });
   });
 });
 //# sourceMappingURL=checkboxed-list-input.test.js.map

package/lib/templates/jdd-component.js

@@ -1,11 +1,7 @@
 import { toKebabCase, toPascalCase } from "js-convert-case";
 function jddComponentTemplate(component_name) {
-  return `import type { FlatTemplatable } from "tempstream";
-import { TempstreamJSX } from "tempstream";
-import type {
-	ExtractStructuredComponentArgumentsParsed,
-	JDDContext,
-} from "@sealcode/jdd";
+  return `import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.15.49",
+	"version": "0.15.50",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

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

@@ -255,5 +255,58 @@ describe("checkboxed-list", () => {
 			await page.getByRole("button", { name: "Wyślij" }).click();
 			await page.getByText(/ABC/).click({ timeout: 500 }); // should display an error message for that field
 		});
+
+		it("groups checkboxes based on the value of the 'group' attribute", async () => {
+			const port = await getPort();
+			console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+			const app = new Koa();
+			const router = new Router();
+
+			const fields = {
+				syllables: new CheckboxedListField(true, async () => {
+					return [
+						...["e", "y", "u", "i", "o", "a"].map((s, index) => ({
+							value: "vowel" + index,
+							label: s,
+							group: "vowels",
+						})),
+						...["q", "w", "r", "t", "p", "s", "test_label"].map((s, index) => ({
+							value: "consonant" + index,
+							label: s,
+							group: "consonants",
+						})),
+					];
+				}),
+			};
+
+			mount(
+				router,
+				"/",
+				new (class extends Form<typeof fields, unknown> {
+					fields = fields;
+					controls = [new CheckboxedListInput(fields.syllables, { label: "Letters" })];
+
+					async onSubmit(ctx: Context) {
+						// noop
+					}
+
+					async canAccess(_: Context) {
+						return { canAccess: true, message: "" };
+					}
+				})(),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(port);
+
+			browser = await getBrowser();
+			const context = await browser.newContext();
+			page = await context.newPage();
+			await page.goto(`http://localhost:${port}`);
+			await page.getByRole("button", { name: "Wyślij" }).click();
+			await page.getByText(/vowels/).click({ timeout: 500 }); // should display an error message for that field
+			await page.getByText(/consonants/).click({ timeout: 500 }); // should display an error message for that field
+			await page.getByText("test_label").click({ timeout: 500 });
+		});
 	});
 });

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

@@ -1,6 +1,9 @@
 import { tempstream } from "tempstream";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
-import { CheckboxedListField } from "../fields/checkboxed-list.js";
+import {
+	CheckboxedListField,
+	CheckboxedListItem,
+} from "../fields/checkboxed-list.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
 
@@ -12,6 +15,16 @@ export class CheckboxedListInput extends FormFieldControl {
 		super([field]);
 	}
 
+	generateCountBasedClasses(n: number) {
+		return [
+			"options-count--" + n.toString(),
+			...(n >= 5 ? ["options-count--5-or-more"] : []),
+			...(n >= 10 ? ["options-count--10-or-more"] : []),
+			...(n >= 15 ? ["options-count--15-or-more"] : []),
+			...(n >= 20 ? ["options-count--20-or-more"] : []),
+		];
+	}
+
 	async render(fctx: FormControlContext) {
 		const {
 			valid,
@@ -26,17 +39,26 @@ export class CheckboxedListInput extends FormFieldControl {
 			this.field.isVisible(fctx.ctx),
 		]);
 
+		const ungroupped = [];
+		const groups: Record<string, CheckboxedListItem[] | undefined> = {};
+		for (const option of options) {
+			if (!option.group) {
+				ungroupped.push(option);
+			} else {
+				if (!groups[option.group]) {
+					groups[option.group] = [];
+				}
+				groups[option.group]!.push(option);
+			}
+		}
+
 		const { name, required } = this.field;
 		return inputWrapper(
 			"checkboxed-list",
 			[
 				name,
 				getRequiredClass(required),
-				"options-count--" + options.length.toString(),
-				...(options.length >= 5 ? ["options-count--5-or-more"] : []),
-				...(options.length >= 10 ? ["options-count--10-or-more"] : []),
-				...(options.length >= 15 ? ["options-count--15-or-more"] : []),
-				...(options.length >= 20 ? ["options-count--20-or-more"] : []),
+				...this.generateCountBasedClasses(options.length),
 			],
 			tempstream/* HTML */ `<label
 					>${this.options.label || this.field.name}</label
@@ -46,30 +68,68 @@ export class CheckboxedListInput extends FormFieldControl {
 					: ""}
 				<ul>
 					${isVisible
-						? options.map(
-								({ value, label }) => tempstream/* HTML */ `<li>
-									${inputWrapper(
-										"checkbox",
-										[name],
-										/* HTML */ `
-											<input
-												type="checkbox"
-												id="${name}.${value}"
-												name="${name}.${value}"
-												${pickedValues.includes(value)
-													? "checked"
-													: ""}
-												form=${fctx.form_id}
-											/>
-											<label for="${name}.${value}"
-												>${label || value}</label
-											>
-										`
-									)}
-								</li>`
+						? Object.entries(groups).map(
+								([group_label, options]) =>
+									tempstream/* HTML */ ` <h3>
+											${group_label}
+										</h3>
+										${options!.map(({ value, label }) =>
+											this.renderOption({
+												name,
+												value,
+												label,
+												form_id: fctx.form_id,
+												checked:
+													pickedValues.includes(
+														value
+													),
+											})
+										)}`
+						  )
+						: ""}
+					${isVisible
+						? ungroupped.map(({ value, label }) =>
+								this.renderOption({
+									name,
+									value,
+									label,
+									form_id: fctx.form_id,
+									checked: pickedValues.includes(value),
+								})
 						  )
 						: ""}
 				</ul>`
 		);
 	}
+
+	renderOption({
+		name,
+		value,
+		form_id,
+		label,
+		checked,
+	}: {
+		name: string;
+		form_id: string;
+		value: string;
+		label?: string;
+		checked: boolean;
+	}) {
+		return tempstream/* HTML */ `<li>
+			${inputWrapper(
+				"checkbox",
+				[name],
+				/* HTML */ `
+					<input
+						type="checkbox"
+						id="${name}.${value}"
+						name="${name}.${value}"
+						${checked ? "checked" : ""}
+						form=${form_id}
+					/>
+					<label for="${name}.${value}">${label || value}</label>
+				`
+			)}
+		</li>`;
+	}
 }

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

@@ -7,15 +7,19 @@ import {
 	FormFieldValidationResponse,
 } from "./field.js";
 
+export type CheckboxedListItem = {
+	value: string;
+	label?: string;
+	group?: string;
+};
+
 export class CheckboxedListField<Required extends boolean> extends FormField<
 	Required,
 	Record<string, "on">
 > {
 	constructor(
 		public required: Required,
-		public generateOptions: (
-			ctx: Context
-		) => Promise<{ value: string; label?: string }[]>,
+		public generateOptions: (ctx: Context) => Promise<CheckboxedListItem[]>,
 		public isVisible: (ctx: Context) => Promise<boolean> = () =>
 			Promise.resolve(true)
 	) {

package/src/templates/jdd-component.ts

@@ -1,12 +1,8 @@
 import { toKebabCase, toPascalCase } from "js-convert-case";
 
 export function jddComponentTemplate(component_name: string) {
-	return `import type { FlatTemplatable } from "tempstream";
-import { TempstreamJSX } from "tempstream";
-import type {
-	ExtractStructuredComponentArgumentsParsed,
-	JDDContext,
-} from "@sealcode/jdd";
+	return `import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {