@sealcode/sealgen 0.8.44 → 0.8.48

package/src/components/tabs.ts

@@ -1,95 +0,0 @@
-import { FlatTemplatable, tempstream } from "tempstream";
-
-function name_to_id(str: string) {
-	return str.replace(/\W/g, "-");
-}
-
-const style = (hide_tabs_width: number) => /* 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;
-		-webkit-user-select: none;
-		user-select: none;
-	}
-
-	@media screen and (max-width: ${hide_tabs_width}px) {
-		.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: ${hide_tabs_width}px) {
-			display: block;
-		}
-	}
-
-	.tab-content {
-		padding-top: 30px;
-		clear: both;
-	}
-
-	@media screen and (max-width: ${hide_tabs_width}px) {
-		.tab-content {
-			display: block !important;
-		}
-	}
-</style>`;
-
-export function tabs(
-	tabs: Record<string, FlatTemplatable>,
-	selected_tab_style = "font-weight: bold;",
-	selected_index = 0,
-	hide_tabs_width = 0
-): FlatTemplatable {
-	return /* HTML */ tempstream`${style(hide_tabs_width)}
-	${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 */ tempstream`<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>`;
-	})}`;
-}

package/src/components/toggle-modal.ts

@@ -1,52 +0,0 @@
-import { FlatTemplatable, tempstream } from "tempstream";
-import { makeSlug } from "../utils/utils";
-
-export function toggleModal(options: {
-	name: string;
-	contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
-	contentUnwrapped: (
-		id: string
-	) => FlatTemplatable | Promise<FlatTemplatable>;
-}) {
-	const { contentWrapped, contentUnwrapped, name } = options;
-	const id = makeSlug(name);
-	return tempstream/* HTML */ `<style>
-			.toggle-modal__wrapped {
-				display: none;
-			}
-
-			@media (max-width: 960px) {
-				.toggle-modal__wrapped {
-					display: block;
-				}
-				.toggle-modal__unwrapped {
-					display: none;
-				}
-
-				#${id} {
-					display: none;
-				}
-
-				#${id}:checked ~ .toggle-modal__wrapped {
-					display: none;
-				}
-
-				#${id}:checked ~ .toggle-modal__unwrapped {
-					display: block;
-					position: fixed;
-					height: 100vh;
-					width: 100vw;
-					top: 0;
-					left: 0;
-					background-color: white;
-					z-index: 99;
-					overflow-y: scroll;
-				}
-			}
-		</style>
-		<div class="toggle-modal toggle-modal--${id}">
-			<input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
-			<div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
-			<div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
-		</div>`;
-}

package/src/example.test.ts

@@ -1,3 +0,0 @@
-describe("empty test", () => {
-	it("empty test", () => {});
-});

package/src/find-scss-includes.ts

@@ -1,32 +0,0 @@
-import { promises as fs } from "fs";
-import _locreq from "locreq";
-import { relative } from "path";
-import { walkDir } from "./utils/walk";
-
-const target_locreq = _locreq(process.cwd());
-
-export async function generateScssIncludes(): Promise<void> {
-	const files = await Promise.all(
-		(await walkDir(target_locreq.resolve("src/")))
-			.filter(
-				(f) =>
-					f.endsWith(".scss") &&
-					!f.endsWith("/main.scss") &&
-					!f.endsWith("/includes.scss")
-			)
-			.map((fullpath) =>
-				relative(target_locreq.resolve("src/"), fullpath)
-			)
-	);
-
-	await fs.writeFile(
-		target_locreq.resolve("src/includes.scss"),
-		`// DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes
-
-@import "../node_modules/@sealcode/sealgen/src/forms/forms.scss";
-${files.map((path) => `@import "${path}";`).join("\n")}
-`
-	);
-	// eslint-disable-next-line no-console
-	console.log("Successfuly generated new src/includes.scss file");
-}

package/src/forms/controls/array.ts

@@ -1,226 +0,0 @@
-import Router from "@koa/router";
-import { hasShape, predicates } from "@sealcode/ts-predicates";
-import { Context } from "koa";
-import qs from "qs";
-import { Field, FieldsetOutput } from "sealious";
-import { tempstream } from "tempstream";
-import { Controls, Fields } from "../..";
-import { FormField, StructuredArrayField } from "../fields/field";
-import { FormDataValue } from "../form";
-import { FormControl } from "./controls";
-import { FormControlContext } from "./form-control";
-import { FormFieldControl } from "./form-field-control";
-
-export type UnboundControlStorage<
-	F extends { new (...args: any): FormFieldControl } = {
-		new (...args: any): FormFieldControl;
-	}
-> = [F, string, ConstructorParameters<F>];
-
-export function UnboundControl<
-	F extends { new (...args: any): FormFieldControl }
->(
-	controlClass: F,
-	arbitrary_field_name: string,
-	params: ConstructorParameters<F>["1"]
-): UnboundControlStorage {
-	return [controlClass, arbitrary_field_name, params];
-}
-
-export class StructuredArray<
-	Subfields extends Record<string, Field>
-> extends FormFieldControl {
-	constructor(
-		public field: StructuredArrayField<Subfields>,
-		public item_controls: Array<FormControl | UnboundControlStorage>
-	) {
-		super([field]);
-	}
-
-	getFrameID() {
-		return `array-frame-${this.field.name}`;
-	}
-
-	getInnerFormID() {
-		return this.getFrameID() + "-form";
-	}
-
-	getActionURL(form_id?: string, action?: Record<string, unknown>) {
-		return `${this.getFrameID()}${
-			form_id || action ? "?" : ""
-		}${qs.stringify({ form_id, action })}`;
-	}
-
-	async getDefaultItemBody() {
-		return {};
-	}
-
-	makeSubfield(_field_name: string): FormField {
-		const fields = this;
-		return new Fields.SimpleFormField(false);
-	}
-
-	async renderItemControl(
-		ctx: Context,
-		form_id: string,
-		control: FormControl | UnboundControlStorage,
-		item: FieldsetOutput<Subfields>,
-		index: number
-	) {
-		const fctx = {
-			ctx,
-			data: {},
-			messages: [],
-			field_name_prefix: "",
-			form_id,
-			validate: false,
-		};
-		if (Array.isArray(control)) {
-			const [constructor, field_name, params] = control;
-			const field = this.makeSubfield(field_name);
-			if (!field) {
-				console.warn(
-					`makeSubfield returned null for field ${field_name}`
-				);
-				return "";
-			}
-			await field.init(
-				`${this.field.name}[data][${index}][${field_name}]`
-			);
-			const hidden_shadow = new Controls.Derived(
-				[field],
-				async (
-					values,
-					{ inner_form_id, field_name }
-				) => /* HTML */ `<input
-					name="${field_name}"
-					type="hidden"
-					value="${values[field_name] || ""}"
-					form="${inner_form_id}"
-				/>`,
-				async () => ({
-					inner_form_id: this.getInnerFormID(),
-					field_name: field.name,
-				})
-			);
-			return tempstream`${new constructor(field, params).render({
-				...fctx,
-				data: { [field.name]: item[field_name] as FormDataValue },
-			})}${hidden_shadow.render({
-				...fctx,
-				data: { [field.name]: item[field_name] as FormDataValue },
-				form_id: this.getInnerFormID(),
-			})}`;
-		} else {
-			return control.render(fctx);
-		}
-	}
-
-	async renderItem(
-		ctx: Context,
-		form_id: string,
-		item: FieldsetOutput<Subfields>,
-		index: number
-	) {
-		return tempstream/* HTML */ `<div>
-			${this.item_controls.map((control) =>
-				this.renderItemControl(ctx, form_id, control, item, index)
-			)}
-			<input
-				type="submit"
-				value="remove"
-				form="${this.getInnerFormID()}"
-				formaction="${this.getActionURL(form_id, {
-					remove: index,
-				})}"
-			/>
-		</div>`;
-	}
-
-	async getItems(ctx: Context, raw_values: Record<string, FormDataValue>) {
-		return (await this.field.getValue(ctx, raw_values)).parsed as Promise<
-			FieldsetOutput<Subfields>[]
-		>;
-	}
-
-	async _render(
-		ctx: Context,
-		form_id: string,
-		raw_values: Record<string, FormDataValue>
-	) {
-		const items = await this.getItems(ctx, raw_values);
-
-		return tempstream/* HTML */ `<turbo-frame id="${this.getFrameID()}">
-			Reverse Single Reference
-			${items.map((item, index) =>
-				this.renderItem(ctx, form_id, item, index)
-			)}
-			<form id="${this.getInnerFormID()}" method="POST"></form>
-			<input
-				type="submit"
-				value="add"
-				form="${this.getInnerFormID()}"
-				formaction="${this.getActionURL(form_id, {
-					insert: { index: items.length, value: {} },
-				})}"
-			/>
-		</turbo-frame>`;
-	}
-
-	render(fctx: FormControlContext) {
-		return this._render(fctx.ctx, fctx.form_id, fctx.data);
-	}
-
-	async getTargetItemID(ctx: Context): Promise<string> {
-		return ctx.params.id;
-	}
-
-	mount(router: Router) {
-		console.log("mounting!", this.getActionURL());
-		router.post(this.getActionURL(), async (ctx) => {
-			let form_id = ctx.query.form_id;
-			if (typeof form_id != "string") {
-				throw new Error("Missing form_id query param");
-			}
-
-			const item = await this.field.sealious_field.collection.getByID(
-				ctx.$context,
-				await this.getTargetItemID(ctx)
-			);
-
-			if (!hasShape({ action: predicates.object }, ctx.$body)) {
-				throw new Error("Missing action param");
-			}
-
-			const field_data = ctx.$body[this.field.name] || { data: [] };
-			console.log({ action: field_data });
-			if (
-				!hasShape(
-					{
-						data: predicates.array(
-							this.field.sealious_field.value_predicate
-						),
-					},
-					field_data
-				)
-			) {
-				throw new Error("missing data atribute in action description");
-			}
-			item.set(this.field.name, {
-				...ctx.$body.action,
-				data: field_data.data || [],
-			});
-			console.log("ACTION", {
-				...ctx.$body.action,
-				data: field_data.data || [],
-			});
-			await item.save(ctx.$context);
-			console.log(await item.getDecodedBody(ctx.$context, {}));
-			ctx.body = this._render(
-				ctx,
-				form_id,
-				await item.getDecodedBody(ctx.$context, {})
-			);
-		});
-	}
-}

package/src/forms/controls/autocomplete.ts

@@ -1,33 +0,0 @@
-import { Context } from "koa";
-import { PickFromListField } from "../fields/pick-from-list";
-import { FormDataValue } from "../form";
-import { FormControlContext } from "./form-control";
-import { SimpleInput } from "./simple-input";
-
-export class Autocomplete extends SimpleInput<string | null> {
-	constructor(
-		public field: PickFromListField<boolean>,
-		public options: { id?: string; label?: string; placeholder?: string }
-	) {
-		super(field);
-	}
-
-	getListID(): string {
-		return this.getID() + "_list";
-	}
-
-	async getInputAttributes(fctx: FormControlContext) {
-		return {
-			...(await super.getInputAttributes(fctx)),
-			list: this.getListID(),
-		};
-	}
-
-	async postInput(ctx: Context) {
-		return /* HTML */ `<datalist id="${this.getListID()}">
-			${(await this.field.generateOptions(ctx)).map(
-				({ value }) => /* HTML */ `<option>${value}</option>`
-			)}
-		</datalist>`;
-	}
-}

package/src/forms/controls/big-radio-group.ts

@@ -1,48 +0,0 @@
-import { FlatTemplatable, tempstream } from "tempstream";
-import { FormField } from "../fields/field";
-import { FormControlContext } from "./form-control";
-import { FormFieldControl } from "./form-field-control";
-
-export class BigRadioGroup extends FormFieldControl {
-	constructor(
-		public field: FormField,
-		public options: Record<
-			string,
-			{
-				description:
-					| FlatTemplatable
-					| ((fctx: FormControlContext) => FlatTemplatable);
-			}
-		>
-	) {
-		super([field]);
-	}
-
-	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
-		const { raw: current_value } = await this.field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
-		return tempstream/* HTML */ `<div class="bigradios">
-			${Object.entries(this.options).map(([key, { description }]) => {
-				const id = `${this.field.name}-radio-${key}`;
-				return tempstream/* HTML */ `<input
-						type="radio"
-						name="${this.field.name}"
-						value="${key}"
-						id="${id}"
-						style="display: none"
-						${fctx.form_id ? `form=${fctx.form_id}` : ""}
-						${this.field.required ? "required" : ""}
-						${key == current_value ? "checked" : ""}
-					/>
-					<div class="bigradio">
-						${typeof description == "function"
-							? description(fctx)
-							: description}
-						<label class="bigradio__cta" for="${id}">Wybierz</label>
-					</div>`;
-			})}
-		</div>`;
-	}
-}

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

@@ -1,71 +0,0 @@
-import { Context } from "koa";
-import { FlatTemplatable } from "tempstream";
-import { EnumMultipleField, FormField } from "../fields/field";
-import { ProxyFormField } from "../fields/proxy-field";
-import { FormDataValue, FormMessage } from "../form";
-import { CheckboxWithValue } from "./checkbox";
-import { FieldGroup, FormFieldControl } from "./controls";
-import { FormControlContext } from "./form-control";
-
-export type DefaultCheckboxOptions = {
-	id?: string;
-	label?: string;
-	hide_errors?: boolean;
-	readonly?: boolean;
-	name?: string;
-	checkboxNameToLabel?: (name: string) => string;
-	classes?: string[];
-};
-
-export class CheckboxGroup<
-	Options extends DefaultCheckboxOptions = DefaultCheckboxOptions
-> extends FormFieldControl {
-	constructor(
-		public field: EnumMultipleField<readonly string[], boolean>,
-		public options: Options = {} as Options
-	) {
-		super([field]);
-	}
-
-	wrapGroup(
-		fctx: FormControlContext,
-		checkboxes: CheckboxWithValue[]
-	): Promise<FlatTemplatable> {
-		return new FieldGroup(checkboxes, {
-			label: this.options.label,
-			classes: [
-				...(this.options.classes || []),
-				"field-group--checkboxes",
-			],
-		}).render(fctx);
-	}
-
-	async render<Fields extends Record<string, FormField>>(
-		fctx: FormControlContext
-	): Promise<FlatTemplatable> {
-		const { parsed: values } = await this.field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
-		const checkboxes = this.field.options.map(
-			(option) =>
-				new CheckboxWithValue(
-					new ProxyFormField(
-						false,
-						this.field.name,
-						false,
-						values.includes(option)
-					),
-					{
-						id: this.field.name + "__" + option,
-						label: (
-							this.options.checkboxNameToLabel ||
-							((s: string) => s)
-						)(option),
-					},
-					option
-				)
-		);
-		return this.wrapGroup(fctx, checkboxes);
-	}
-}

package/src/forms/controls/checkbox.ts

@@ -1,34 +0,0 @@
-import { Context } from "koa";
-import { FormDataValue } from "../form";
-import { Tickable, TickableOptions } from "./tickable";
-import { FormField } from "../fields/field";
-
-export class Checkbox extends Tickable<boolean> {
-	type = <const>"checkbox";
-
-	isChecked(
-		_ctx: Context,
-		_data: Record<string, FormDataValue>,
-		value: boolean
-	): boolean {
-		return value;
-	}
-
-	getValueAttribute(): string {
-		return "";
-	}
-}
-
-export class CheckboxWithValue extends Checkbox {
-	constructor(
-		public field: FormField<boolean, boolean>,
-		options: TickableOptions,
-		public value: string
-	) {
-		super(field, options);
-	}
-
-	getValueAttribute(): string {
-		return this.value;
-	}
-}

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

@@ -1,50 +0,0 @@
-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";
-import { FormControlContext } from "./form-control";
-
-export class CheckboxedListInput extends FormFieldControl {
-	constructor(
-		public field: ChekboxedListField<boolean>,
-		public options: { label: string } = { label: field.name }
-	) {
-		super([field]);
-	}
-
-	async render(fctx: FormControlContext) {
-		const { parsed: pickedValues } = await this.field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
-		if (!is(pickedValues, predicates.array(predicates.string))) {
-			throw new Error("picked values is not an array of strings");
-		}
-		const [options, isVisible] = await Promise.all([
-			this.field.generateOptions(fctx.ctx),
-			this.field.isVisible(fctx.ctx),
-		]);
-
-		const { name, required } = this.field;
-
-		return tempstream/* HTML */ `${isVisible
-			? 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/collapsible-checkbox-group.ts

@@ -1,28 +0,0 @@
-import { Context } from "koa";
-import { FlatTemplatable } from "tempstream";
-import { FormDataValue, FormMessage } from "../form";
-import { CheckboxWithValue } from "./checkbox";
-import { FieldGroup, FormFieldControl } from "./controls";
-import { CheckboxGroup, DefaultCheckboxOptions } from "./checkbox-group";
-import { CollapsibleFieldGroup } from "./collapsible-field-group";
-import { FormControlContext } from "./form-control";
-
-export class CollapsibleCheckboxGroup extends CheckboxGroup<
-	DefaultCheckboxOptions & {
-		textWhenOpen?: string;
-		textWhenClosed?: string;
-		groupID?: string;
-	}
-> {
-	wrapGroup(
-		fctx: FormControlContext,
-		checkboxes: CheckboxWithValue[]
-	): Promise<FlatTemplatable> {
-		return new CollapsibleFieldGroup(checkboxes, {
-			label: this.options.label,
-			textWhenOpen: this.options.textWhenOpen,
-			textWhenClosed: this.options.textWhenClosed,
-			groupID: this.options.groupID,
-		}).render(fctx);
-	}
-}