add component size select

Summary: Ref T2895

Reviewers: #testers, kuba-orlik

Reviewed By: #testers, kuba-orlik

Subscribers: kuba-orlik, jenkins-user

Maniphest Tasks: T2895

Differential Revision: https://hub.sealcode.org/D1405

.eslintrc.cjs

@@ -40,5 +40,9 @@ module.exports = {
 				"no-await-in-loop": 1, // sometimes it's easier to debug when requests run sequentially
 			},
 		},
+		{
+			files: ["*.stimulus.ts", "src/front/*.ts"],
+			env: { browser: true },
+		},
 	],
 };

src/back/routes/component-preview/component-debugger.stimulus.ts

@@ -56,11 +56,22 @@ export default class ComponentDebugger extends Controller {
 
 	resizeHandler(e: MouseEvent) {
 		const width_offset = this.origin_x - e.clientX;
-
 		const new_width = Math.max(this.origin_width + width_offset, 1);
-		document
+		this.setPreviewWidth(new_width);
-			.getElementById("component-debugger")
-			.style.setProperty("--resizable-column-width", new_width.toString() + "px");
 		this.update_width_display();
 	}
+
+	setPreviewWidth(width: number) {
+		document
+			.getElementById("component-debugger")
+			.style.setProperty("--resizable-column-width", width.toString() + "px");
+		this.update_width_display();
+	}
+
+	handleWidthDropdown() {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const dropdown = this.targets.find("size-select") as HTMLSelectElement;
+		const value = dropdown.value;
+		this.setPreviewWidth(parseInt(value));
+	}
 }

src/back/routes/component-preview/component-preview-actions.ts

@@ -1,5 +1,4 @@
 import { isTableData, isTableRegularRow, TableData } from "@sealcode/jdd";
-import { is, predicates } from "@sealcode/ts-predicates";
 import objectPath from "object-path";
 import { registry } from "../../jdd-components/components.js";
 import type { ComponentPreviewState } from "../components.sreact.js";
@@ -105,10 +104,15 @@ export const ComponentPreviewActions = <const>{
 		empty_value: unknown
 	) => {
 		const component_args = state.component_args;
-		const tableData = objectPath.get(component_args, arg_path);
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		const tableData: TableData<unknown, unknown> = objectPath.get(
+			component_args,
+			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)) {
@@ -129,10 +133,15 @@ export const ComponentPreviewActions = <const>{
 		column_index_to_remove: number
 	) => {
 		const component_args = state.component_args;
-		const tableData = objectPath.get(component_args, arg_path);
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		const tableData: TableData<unknown, unknown> = objectPath.get(
+			component_args,
+			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)) {
@@ -202,4 +211,12 @@ export const ComponentPreviewActions = <const>{
 		};
 		return result;
 	},
+
+	change_size: (state: ComponentPreviewState, inputs: Record<string, string>) => {
+		return {
+			...state,
+			...inputs,
+			current_size: inputs.size,
+		};
+	},
 };

src/back/routes/components.css

@@ -80,3 +80,13 @@
 		transition: all 150ms;
 	}
 }
+
+@media (scripting: none) {
+	body {
+		min-width: max-content;
+	}
+}
+
+.component-preview-size-select {
+	margin-left: 10px;
+}

src/back/routes/components.sreact.tsx

@@ -14,6 +14,7 @@ export const actionName = "Components";
 export type ComponentPreviewState = {
 	component: string;
 	component_args: Record<string, unknown>;
+	current_size?: string;
 };
 
 export default new (class ComponentsPage extends StatefulPage<
@@ -107,6 +108,8 @@ export default new (class ComponentsPage extends StatefulPage<
 		return overrides;
 	}
 
+	containerSizes = ["320", "600", "800", "1024", "1300", "1920"];
+
 	render(_ctx: BaseContext, state: ComponentPreviewState) {
 		const all_components = registry.getAll();
 		const component =
@@ -162,6 +165,25 @@ export default new (class ComponentsPage extends StatefulPage<
 						<legend>
 							Preview{" "}
 							<span data-component-debugger-target="component-width"></span>
+							<select
+								name="size"
+								autocomplete="off"
+								class="component-preview-size-select"
+								data-component-debugger-target="size-select"
+								data-action="change->component-debugger#handleWidthDropdown"
+							>
+								{this.containerSizes.map((size) => (
+									<option
+										value={size}
+										selected={size === (state.current_size || "800")}
+									>
+										{`${size} px`}
+									</option>
+								))}
+							</select>
+							<noscript>
+								{this.makeActionButton(state, "change_size")}
+							</noscript>
 						</legend>
 						{render(
 							registry,