@sealcode/jdd-editor 0.1.0

package/src/component-preview-actions.ts

@@ -0,0 +1,520 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import type { Registry, TableData } from "@sealcode/jdd";
+import { List, Table } from "@sealcode/jdd";
+import { isTableData, isTableRegularRow } from "@sealcode/jdd";
+import objectPath from "object-path";
+import type { JDDPageState } from "./jdd-page.js";
+import type { StatefulPageActionArgument } from "@sealcode/sealgen";
+import type JDDPage from "./jdd-page.js";
+
+function moveElement<T>(
+	array: Array<T>,
+	fromIndex: number,
+	toIndex: number
+): Array<T> {
+	const element = array.splice(fromIndex, 1)[0];
+	array.splice(toIndex, 0, element as T);
+	return array;
+}
+
+export function getComponentData(
+	state: JDDPageState,
+	arg_path: string[],
+	registry: Registry
+) {
+	const index_arg = arg_path[1];
+	if (!index_arg) {
+		throw new Error("Missing component index in arg path");
+	}
+	const component_index = parseInt(index_arg);
+	const component_args = state.components[component_index]?.args || {};
+	const component_name =
+		state.components[component_index]?.component_name || "";
+	const component = registry.get(component_name);
+	const arg_path_within_component = arg_path.slice(3); // remove "components" and the index of the component and "args"
+
+	const [argument, , argument_value] = component?.getArgumentAtPath(
+		arg_path_within_component,
+		component_args
+	) || [null, null, null];
+
+	return {
+		component_index,
+		component_args,
+		component_name,
+		component,
+		argument,
+		argument_value,
+		arg_path_within_component,
+	};
+}
+
+export const ComponentPreviewActions = <const>{
+	add_array_item: async ({
+		ctx,
+		state,
+		args: [arg_path],
+		page,
+	}: StatefulPageActionArgument<JDDPageState, [string[]]>) => {
+		const {
+			component_name,
+			component,
+			argument,
+			arg_path_within_component,
+			argument_value,
+		} = getComponentData(state, arg_path, (page as JDDPage).registry);
+		if (!component) {
+			console.error("unknown component: ", component_name);
+			return state;
+		}
+		if (!argument) {
+			console.error(
+				"Didn't find a list argument at this path",
+				arg_path_within_component
+			);
+			return state;
+		}
+		if (!(argument instanceof List)) {
+			throw new Error(
+				`Expected argument in path ${arg_path.join(
+					"."
+				)} to be an instance of List`
+			);
+		}
+		objectPath.insert(
+			state,
+			arg_path,
+			await argument.item_type.getExampleValue(
+				(page as JDDPage).makeJDDContext(ctx)
+			),
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			Array.isArray(argument_value) ? argument_value.length : 0
+		);
+		return state;
+	},
+
+	remove_array_item: ({
+		state,
+		args: [arg_path, index_to_remove],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string[], number]
+	>): JDDPageState => {
+		objectPath.del(state, [...arg_path, index_to_remove]);
+		return state;
+	},
+
+	move_array_item_up: async ({
+		state,
+		args: [arg_path, element_index],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string[], number]
+	>): Promise<JDDPageState> => {
+		const array_values = objectPath.get(state, arg_path) as unknown[];
+		const curr = array_values[element_index];
+		const prev = array_values[element_index - 1];
+		if (!prev || !curr) {
+			throw new Error("No element at such index or cannot move it up");
+		}
+		[array_values[element_index - 1], array_values[element_index]] = [
+			curr,
+			prev,
+		];
+		return state;
+	},
+
+	move_array_item_down: async ({
+		state,
+		args: [arg_path, element_index],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string[], number]
+	>): Promise<JDDPageState> => {
+		const array_values = objectPath.get(state, arg_path) as unknown[];
+		const curr = array_values[element_index];
+		const next = array_values[element_index + 1];
+		if (!next || !curr) {
+			throw new Error("No element at such index or cannot move it up");
+		}
+		[array_values[element_index], array_values[element_index + 1]] = [
+			next,
+			curr,
+		];
+		return state;
+	},
+
+	change_component: async ({
+		ctx,
+		inputs,
+		state,
+		page,
+	}: StatefulPageActionArgument<JDDPageState, []>): Promise<JDDPageState> => {
+		const component_name = inputs.component;
+		if (!component_name || typeof component_name !== "string") {
+			throw new Error(
+				"Missing input: 'component' for action change_component. It should contain the name of the new component type"
+			);
+		}
+		const component = (page as JDDPage).registry.get(component_name);
+		if (!component) {
+			throw new Error(
+				`Unknown or disallowed component name: ${component_name}`
+			);
+		}
+		return {
+			...state,
+			components: [
+				{
+					component_name: component_name,
+					args:
+						(await component?.getExampleValues(
+							(page as JDDPage).makeJDDContext(ctx)
+						)) || {},
+				},
+			],
+		};
+	},
+
+	randomize_args: async ({
+		ctx,
+		state,
+		page,
+		args: [component_index_str],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string]
+	>): Promise<JDDPageState> => {
+		const { component_index, component } = getComponentData(
+			state,
+			["components", component_index_str],
+			(page as JDDPage).registry
+		);
+
+		const component_data = state.components[component_index];
+		if (!component_data) {
+			throw new Error("Missing component data");
+		}
+		component_data.args =
+			(await component?.getExampleValues(
+				(page as JDDPage).makeJDDContext(ctx)
+			)) || {};
+		return {
+			...state,
+		};
+	},
+
+	add_table_row: async ({
+		ctx,
+		state,
+		page,
+		args: [arg_path, columns, type = "row"],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string[], number, "header" | "row" | undefined]
+	>) => {
+		const jdd_context = (page as JDDPage).makeJDDContext(ctx);
+		const { component_args, argument } = getComponentData(
+			state,
+			arg_path,
+			(page as JDDPage).registry
+		);
+		let row;
+
+		if (!argument) {
+			console.error("Unknown component at path", arg_path);
+			return state;
+		}
+		if (!(argument instanceof Table)) {
+			throw new Error(
+				`Expected argument at path ${arg_path.join(
+					"."
+				)} to be of type Table`
+			);
+		}
+		if (type == "header") {
+			row = {
+				type: "header",
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+				header_content: await argument.header_type.getExampleValue(
+					jdd_context
+				),
+			};
+		} else {
+			const cells = [];
+			for (let i = 0; i < columns; i++) {
+				cells.push(
+					// eslint-disable-next-line no-await-in-loop
+					await argument.cell_type.getExampleValue(jdd_context)
+				);
+			}
+			row = { type: "row", cells };
+		}
+		objectPath.push(state, [...arg_path, "rows"], row);
+		return state;
+	},
+
+	add_table_column: async ({
+		ctx,
+		state,
+		page,
+		args: [arg_path],
+	}: StatefulPageActionArgument<JDDPageState, [string[]]>) => {
+		const { argument } = getComponentData(
+			state,
+			arg_path,
+			(page as JDDPage).registry
+		) as unknown as {
+			argument: Table<unknown, unknown>;
+		};
+		if (!argument) {
+			console.error("Unknown component at path", arg_path);
+			return state;
+		}
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		const tableData: TableData<unknown, unknown> = objectPath.get(
+			state,
+			arg_path
+		);
+		if (!isTableData(tableData)) {
+			throw new Error("wrong table data");
+		}
+		// eslint-disable-next-line @typescript-eslint/no-for-in-array
+		for (const i in tableData.rows) {
+			const row = tableData.rows[i];
+			if (isTableRegularRow(row)) {
+				row.cells.push(
+					// eslint-disable-next-line no-await-in-loop
+					await argument.cell_type.getExampleValue(
+						(page as JDDPage).makeJDDContext(ctx)
+					)
+				);
+			}
+		}
+		objectPath.set(state, arg_path, tableData);
+		console.log("NEW STATE AFTER ADDING THE COLUN");
+		console.dir(state, { depth: 10 });
+		return state;
+	},
+
+	remove_table_column: ({
+		state,
+		args: [arg_path, column_index_to_remove],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string[], number]
+	>): JDDPageState => {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		const tableData: TableData<unknown, unknown> = objectPath.get(
+			state,
+			arg_path
+		);
+		if (!isTableData(tableData)) {
+			throw new Error("wrong table data");
+		}
+		// eslint-disable-next-line @typescript-eslint/no-for-in-array
+		for (const i in tableData.rows) {
+			const row = tableData.rows[i];
+			if (isTableRegularRow(row)) {
+				row.cells = row.cells.filter(
+					(_, i) => i != column_index_to_remove
+				);
+			}
+		}
+		objectPath.set(state, arg_path, tableData);
+		return state;
+	},
+
+	remove_table_row: ({
+		state,
+		args: [arg_path, row_index],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string[], number]
+	>): JDDPageState => {
+		objectPath.del(state, [...arg_path, "rows", row_index]);
+		return state;
+	},
+
+	move_table_column_right: ({
+		state,
+		page,
+		args: [arg_path, column_index],
+	}: StatefulPageActionArgument<JDDPageState, [string[], number]>) => {
+		const { component_args } = getComponentData(
+			state,
+			arg_path,
+			(page as JDDPage).registry
+		);
+
+		const last_path_element = arg_path.at(-1);
+		if (!last_path_element) {
+			throw new Error("arg path is empty");
+		}
+		const data = objectPath.get<unknown>(
+			component_args,
+			last_path_element,
+			""
+		);
+		if (!isTableData(data)) {
+			throw new Error(
+				"Expected arg value for a table to be properly shaped"
+			);
+		}
+		for (const row of data.rows) {
+			if (row.type == "row") {
+				moveElement(row.cells, column_index, column_index + 1);
+			}
+		}
+		objectPath.set(state, [...arg_path, "rows"], data.rows);
+		return state;
+	},
+
+	move_table_row_down: ({
+		state,
+		page,
+		args: [arg_path, row_index],
+	}: StatefulPageActionArgument<JDDPageState, [string[], number]>) => {
+		const { component_args } = getComponentData(
+			state,
+			arg_path,
+			(page as JDDPage).registry
+		);
+		const last_path_element = arg_path.at(-1);
+		if (!last_path_element) {
+			throw new Error("arg path is empty");
+		}
+		const data = objectPath.get<unknown>(
+			component_args,
+			last_path_element,
+			""
+		);
+		if (!isTableData(data)) {
+			throw new Error(
+				"Expected arg value for a table to be properly shaped"
+			);
+		}
+		moveElement(data.rows, row_index, row_index + 1);
+		objectPath.set(state, [...arg_path, "rows"], data.rows);
+		return state;
+	},
+
+	change_size: ({
+		state,
+		inputs,
+	}: StatefulPageActionArgument<JDDPageState>) => {
+		return {
+			...state,
+			preview_size: inputs.size,
+		};
+	},
+
+	add_component: async ({
+		ctx,
+		state,
+		inputs,
+		page,
+	}: StatefulPageActionArgument<JDDPageState, []>): Promise<JDDPageState> => {
+		const component_name = inputs.component;
+		if (!component_name) {
+			throw new Error("Missing component name");
+		}
+		const component = (page as JDDPage).registry.get(component_name);
+
+		return {
+			...state,
+			components: [
+				...state.components,
+				{
+					component_name: component_name,
+					args:
+						(await component?.getExampleValues(
+							(page as JDDPage).makeJDDContext(ctx)
+						)) || {},
+				},
+			],
+		};
+	},
+
+	remove_component: async ({
+		state,
+		args: [component_index],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[number]
+	>): Promise<JDDPageState> => {
+		const newComponentState = [...state.components];
+		newComponentState.splice(component_index, 1);
+		return {
+			...state,
+			components: newComponentState,
+		};
+	},
+
+	move_component_up: async ({
+		state,
+		args: [component_index],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[number]
+	>): Promise<JDDPageState> => {
+		const newComps = [...state.components];
+		const prev = newComps[component_index - 1];
+		const curr = newComps[component_index];
+		if (!prev || !curr) {
+			throw new Error("No component at such index or cannot move it up");
+		}
+		[newComps[component_index], newComps[component_index - 1]] = [
+			prev,
+			curr,
+		];
+		return { ...state, components: newComps };
+	},
+
+	move_component_down: async ({
+		state,
+		args: [component_index],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[number]
+	>): Promise<JDDPageState> => {
+		const newComps = [...state.components];
+		const next = newComps[component_index + 1];
+		const curr = newComps[component_index];
+		if (!next || !curr) {
+			throw new Error("No component at such index or cannot move it up");
+		}
+		[newComps[component_index], newComps[component_index + 1]] = [
+			next,
+			curr,
+		];
+		return { ...state, components: newComps };
+	},
+
+	remove_file: async ({
+		state,
+		args: [arg_path],
+	}: StatefulPageActionArgument<
+		JDDPageState,
+		[string[]]
+	>): Promise<JDDPageState> => {
+		objectPath.set(state, arg_path, null);
+		return state;
+	},
+
+	replace_state: async ({
+		ctx,
+		state,
+		inputs,
+		page,
+	}: StatefulPageActionArgument<JDDPageState>) => {
+		const new_state = await (page as JDDPage).deserializeState(
+			ctx,
+			inputs["state_override"] || "{}"
+		);
+		return {
+			...new_state,
+			preview_size: state.preview_size,
+		};
+	},
+};

package/src/components.sreact.ts

@@ -0,0 +1,100 @@
+import { documentContainerFromParsed, JDD } from "@sealcode/jdd";
+import type { Context } from "koa";
+import type { Templatable } from "tempstream";
+import { tempstream } from "tempstream";
+import type { Stringifiable } from "tempstream/@types/stringify.js";
+import { ComponentPreviewActions } from "./component-preview-actions.js";
+import type { JDDPageState } from "./jdd-page.js";
+import JDDPage from "./jdd-page.js";
+
+export class JDDDebugger extends JDDPage {
+	renderParameterButtons(state: JDDPageState): Stringifiable {
+		const all_components = super.getRegistryComponents();
+		if (!state.components[0]) {
+			console.error("No components are present in state.components");
+		}
+		return /* HTML */ `<div>
+			<input type="submit" value="Preview" />
+			<select
+				name="component"
+				onchange="${this.makeActionCallback("change_component")}"
+				autocomplete="off"
+			>
+				${Object.entries(all_components)
+					.map(
+						([name]) => /* HTML */ `<option
+							value="${name}"
+							${name == state.components[0]?.component_name
+								? "selected"
+								: ""}
+						>
+							${name}
+						</option>`
+					)
+					.join("")}
+			</select>
+			<noscript>
+				${this.makeActionButton(state, "change_component")}
+			</noscript>
+			${this.makeActionButton(state, "randomize_args", "0")}
+		</div>`;
+	}
+	actions = ComponentPreviewActions;
+
+	async getInitialState(ctx: Context) {
+		const first_component = Object.entries(this.registry.getAll())[0];
+		if (!first_component) {
+			throw new Error("No registered components!");
+		}
+		const [component_name, component] = first_component;
+		const initial_state = {
+			components: [
+				{
+					component_name: component_name,
+					args: await component.getExampleValues(
+						this.makeJDDContext(ctx)
+					),
+					open: true,
+				},
+			],
+		};
+		return initial_state;
+	}
+
+	wrapInLayout(
+		ctx: Context,
+		content: Templatable,
+		state: JDDPageState
+	): Templatable {
+		const jdd = new JDD(
+			this.registry,
+			this.makeJDDContext(ctx),
+			documentContainerFromParsed(state.components)
+		);
+		return this.html({
+			ctx,
+			title: "Components",
+			body: content,
+			description: "",
+			css_clumps: ["jdd-page", ...jdd.getAllCSSClumps()],
+			htmlOptions: {
+				morphing: true,
+				preserveScroll: true,
+				autoRefreshCSS: true,
+				showBanner: false,
+				navbar: () => ``,
+				bodyClasses: ["jdd-editor"],
+				showBottomNavbar: false,
+				showFooter: false,
+				loadHamburgerMenu: false,
+				loadSearchModal: false,
+			},
+			makeHead: (...args: unknown[]) =>
+				tempstream`${this.defaultHead(
+					...args
+				)}${jdd.renderEarlyAssets()}`,
+		});
+	}
+
+	containerSizes = ["320", "600", "800", "1024", "1300", "1920"];
+}

package/src/controllers/autogrow-textarea.stimulus.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-assignment */
+import { Controller } from "stimulus";
+
+export default class AutogrowTextarea extends Controller<HTMLTextAreaElement> {
+	connect() {
+		this.autogrow();
+	}
+
+	autogrow() {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+		(this.element.parentNode as any).dataset.replicatedValue = this.element.value;
+	}
+}