Move show-first-row to separate component

package.json

@@ -41,7 +41,8 @@
 	"sealgen": {
 		"styleDirs": [
 			"node_modules/@sealcode/jdd-editor/assets",
-			"node_modules/@sealcode/sortable/src/stimulus-styles"
+			"node_modules/@sealcode/sortable/src/stimulus-styles",
+			"node_modules/@sealcode/show-first-row/src/styles"
 		],
 		"controllerDirs": [
 			"node_modules/@sealcode/jdd-editor/src/controllers",

src/back/routes/common/show-first-row/show-first-row.css

@@ -1,49 +0,0 @@
-.show-first-row {
-	container-type: inline-size;
-	text-align: center;
-	width: 100%;
-
-	.show-first-row__items {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
-		justify-content: center;
-		gap: var(--column-gap);
-		transition: row-gap 200ms, overflow 200ms;
-		overflow: hidden;
-
-		.show-first-row__checkbox:not(:checked) + & {
-			row-gap: 0;
-		}
-
-		& > * {
-			align-self: center;
-			justify-self: center;
-		}
-	}
-
-	.show-first-row__default-button {
-		background: blue;
-		color: white;
-		height: 40px;
-		display: inline-block;
-		padding: 0 20px;
-		line-height: 40px;
-		cursor: pointer;
-		margin: 0 auto;
-		margin-top: 20px;
-	}
-
-	.show-first-row__show-less-button {
-		display: none;
-	}
-
-	&:has(input:checked) {
-		.show-first-row__show-less-button {
-			display: block;
-		}
-
-		.show-first-row__show-more-button {
-			display: none;
-		}
-	}
-}

src/back/routes/common/show-first-row/show-first-row.tsx

@@ -1,137 +0,0 @@
-import { TempstreamJSX } from "tempstream";
-import type { FlatTemplatable } from "tempstream";
-
-const showFirstRowIds = (function* () {
-	let i = 0;
-	while (true) {
-		yield i++;
-		if (i == 999999999) {
-			i = 0;
-		}
-	}
-})();
-
-function min_container_width(columns: number, column_width: number, gap: number) {
-	return columns * column_width + (columns - 1) * gap;
-}
-
-export async function showFirstRow({
-	items,
-	min_column_width_px = 250,
-	column_gap_px = 10,
-	row_gap_px = column_gap_px,
-	make_show_more_button = () => (
-		<span class="show-first-row__default-button">Show more</span>
-	),
-	make_show_less_button = () => (
-		<span class="show-first-row__default-button">Show less</span>
-	),
-	add_button_to_content = (content, show_more_button, show_less_button) => (
-		<>
-			{content}
-			{show_more_button}
-			{show_less_button}
-		</>
-	),
-	classes = [],
-	how_many_rows = () => 1,
-}: {
-	items: FlatTemplatable[];
-	min_column_width_px?: number;
-	make_show_more_button?: () => JSX.Element;
-	make_show_less_button?: () => JSX.Element;
-	column_gap_px?: number;
-	row_gap_px?: number;
-	add_button_to_content?: (
-		content: JSX.Element,
-		show_more_button: JSX.Element,
-		show_less_button: JSX.Element
-	) => JSX.Element;
-	classes?: classNames.ArgumentArray;
-	how_many_rows?: (columns_count: number) => number;
-}): Promise<string> {
-	const id = showFirstRowIds.next().value;
-	const checkbox_id = "show-first-row__checkbox--" + id;
-	return (
-		<div
-			class={[
-				"show-first-row",
-				`show-first-row--id-${id}`,
-				`show-first-row--items-count-${items.length}`,
-				...classes,
-			]}
-			style={`--min-column-width: ${min_column_width_px}px; --items-count: ${items.length}; --column-gap: ${column_gap_px}px`}
-		>
-			{[1, 2, 3, 4, 5, 6, 7, 8, 9]
-				.reverse()
-				.map((columns) => {
-					const rows = how_many_rows(columns);
-					return /* HTML */ `<style>
-						@container (min-width: ${min_container_width(
-							columns,
-							min_column_width_px,
-							column_gap_px
-						) + 1}px) and  (max-width: ${min_container_width(
-							columns + 1,
-							min_column_width_px,
-							column_gap_px
-						)}px) {
-							.show-first-row--id-${id} {
-								&:not(
-									:has(
-										.show-first-row__items
-											> *:nth-child(${columns * rows + 1})
-									)
-								) {
-									.show-first-row__button {
-										display: none;
-									}
-								}
-
-								.show-first-row__checkbox:not(:checked)
-									+ .show-first-row__items {
-									grid-template-rows: ${"auto ".repeat(rows)} repeat(
-											calc(var(--items-count) - ${rows}),
-											0px
-										);
-
-									& > * {
-										margin-bottom: ${row_gap_px}px !important;
-										&:nth-child(n + ${columns * rows + 1}) {
-											opacity: 0;
-											pointer-events: none;
-										}
-									}
-
-									margin-bottom: -${row_gap_px}px !important;
-								}
-							}
-						}
-					</style>`;
-				})
-				.join("\n")}
-			<input
-				class="show-first-row__checkbox"
-				autocomplete="off"
-				type="checkbox"
-				id={checkbox_id}
-				style="display: none"
-			/>
-			{add_button_to_content(
-				<div class={["show-first-row__items"]}>{items}</div>,
-				<label
-					for={checkbox_id}
-					class={["show-first-row__button", "show-first-row__show-more-button"]}
-				>
-					{make_show_more_button()}
-				</label>,
-				<label
-					for={checkbox_id}
-					class={["show-first-row__button", "show-first-row__show-less-button"]}
-				>
-					{make_show_less_button()}
-				</label>
-			)}
-		</div>
-	);
-}

src/back/routes/demos/show-first-row.css

@@ -0,0 +1,4 @@
+.show-first-row .show-first-row__default-button {
+	background-color: var(--color-brand-accent);
+	color: var(--color-brand-text-on-accent);
+}

src/back/routes/demos/show-first-row.page.tsx

@@ -2,14 +2,14 @@ import type { Context } from "koa";
 import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
 import html from "../../html.js";
-import { showFirstRow } from "../common/show-first-row/show-first-row.js";
+import { showFirstRow } from "@sealcode/show-first-row";
 
 export const actionName = "ShowFirstRowDemo";
 
 function makeBoxStyle() {
 	return `width: 100%; max-width: 200px; height: ${
 		100 + Math.random() * 100
-	}px; background-color: lime; text-align: center;  color: #0000009e;  font-size: 40px;  padding-top: 20px;  box-sizing: border-box;`;
+	}px; background-color: var(--color-brand-accent2); text-align: center;  color: #0000009e;  font-size: 40px;  padding-top: 20px;  box-sizing: border-box;`;
 }
 
 export default new (class ShowFirstRowDemoPage extends Page {

src/front/controllers.ts

@@ -49,6 +49,9 @@ application.register("submit-on-input", SubmitOnInput);
 import { default as Toast } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/toast.stimulus.js";
 application.register("toast", Toast);
 
+import { default as PasswordGenerateButton } from "./../../node_modules/@sealcode/sealgen/src/controllers/password-generate-button.stimulus.js";
+application.register("password-generate-button", PasswordGenerateButton);
+
 import { default as TableAddButton } from "./../../node_modules/@sealcode/sealgen/src/controllers/table-add-button.stimulus.js";
 application.register("table-add-button", TableAddButton);