@sealcode/sealgen 0.17.5 → 0.17.7

package/@types/src/add-verbose-crud.d.ts

@@ -0,0 +1,3 @@
+export declare function addVerboseCRUD(params: Partial<{
+    [key in "collection" | "url"]: string;
+}>, app_directory?: string): Promise<void>;

package/@types/src/templates/shared/collection-list.d.ts

@@ -12,5 +12,5 @@ declare const default_hooks: {
     post_import_js: string;
     render_item: (collection_name: string) => string;
 };
-export declare function collectionListTemplate(collection_name: string, action_name: string, newfilefullpath: string, _hooks?: Partial<typeof default_hooks>): Promise<string>;
+export declare function collectionListTemplate(collection_name: string, action_name: string, _: string, _hooks?: Partial<typeof default_hooks>): Promise<string>;
 export {};

package/@types/src/templates/shared/shared-crud-form-fields.d.ts

@@ -30,11 +30,11 @@ export type FieldHandlerResult = {
     fallback_value_sealious: string;
     main_value_sealious: string;
 };
-export type FieldHandler<Defaults extends Partial<FieldHandlerResult>, Result extends Partial<FieldHandlerResult>> = (collection_name: string, field: ExtractedFieldInfo, importPath: (path: string) => string, defaults: Defaults) => Promise<Result>;
+export type FieldHandler<Defaults extends Partial<FieldHandlerResult>, Result extends Partial<FieldHandlerResult>> = (collection_name: string, field: ExtractedFieldInfo, importPath: (path: string) => string, defaults: Defaults, fields_var?: string) => Promise<Result>;
 export declare const field_handlers: Record<Exclude<string, "default">, FieldHandler<FieldHandlerResult, Partial<FieldHandlerResult>> | undefined> & {
     default: FieldHandler<Record<string, never>, FieldHandlerResult>;
 };
-export declare function getFieldHandler(collection_name: string, field: ExtractedFieldInfo, importPath: (path: string) => string): Promise<{
+export declare function getFieldHandler(collection_name: string, field: ExtractedFieldInfo, importPath: (path: string) => string, fields_var?: string): Promise<{
     imports: Partial<{
         shared: string;
         edit: string;

package/lib/add-crud.js

@@ -3,15 +3,16 @@ import { escape_url_params } from "./utils/escape-url-params.js";
 import prompts from "prompts";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 import { listCollections } from "./utils/list-collections.js";
-import { collectionListTemplate } from "./templates/shared/collection-list.js";
+import {
+  makeDefaultDisplayFields,
+  makeDefaultFilterFields
+} from "./templates/shared/collection-list.js";
 import { writeFile } from "./utils/write-file.js";
-import { importPath } from "./utils/import-path.js";
-import { sharedCrudFormFields } from "./templates/shared/shared-crud-form-fields.js";
+import { extractCollectionClassname } from "./generate-collections.js";
+import extract_fields_from_collection from "./utils/extract-fields-from-collection.js";
+import { getFieldHandler } from "./templates/shared/shared-crud-form-fields.js";
 import { generateRoutes } from "./generate-routes.js";
-import { createItemFormTemplate } from "./templates/shared/collection-create-form.js";
-import { editItemFormTemplate } from "./templates/shared/collection-edit-form.js";
-import { askItemDeleteTemplate } from "./templates/shared/confirm-item-delete.js";
-import { itemDeleteTemplate } from "./templates/shared/item-delete.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 async function addCRUD(params, app_directory = process.cwd()) {
   const target_locreq = _locreq(app_directory);
   prompts.override(params);
@@ -28,7 +29,7 @@ async function addCRUD(params, app_directory = process.cwd()) {
     {
       type: "text",
       name: "url",
-      message: "Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
+      message: "Enter a full absolute path for the new route (for example: /admin/users/): ",
       validate: (s) => s.trim()[0] == "/" ? true : "Should start with a '/'",
       initial: function(_, { collection }) {
         return "/" + toKebabCase(collection);
@@ -37,92 +38,88 @@ async function addCRUD(params, app_directory = process.cwd()) {
   ]);
   const collection_name = response.collection;
   const url = response.url;
-  const list_action_name = toPascalCase(collection_name) + "CRUDList";
-  const create_action_name = toPascalCase(collection_name) + "CRUDCreate";
-  const edit_action_name = toPascalCase(collection_name) + "CRUDEdit";
-  const delete_ask_action_name = toPascalCase(collection_name) + "CRUDDeleteAsk";
-  const delete_action_name = toPascalCase(collection_name) + "CRUDDelete";
   const list_path = target_locreq.resolve(
-    `src/back/routes/${escape_url_params(url)}.list.tsx`
+    `src/back/routes/${escape_url_params(url)}/index.page.ts`
   );
-  const list_content = await collectionListTemplate(
-    collection_name,
-    list_action_name,
-    list_path,
-    {
-      post_import_js: `import { ${create_action_name}URL, ${edit_action_name}URL, ${delete_ask_action_name}URL } from "${importPath(
-        list_path,
-        "src/back/routes/urls.ts"
-      )}";`,
-      post_header_html: `<a href={${create_action_name}URL}> Create </a>`,
-      render_item: (collection_name2) => `	async renderItem(ctx: Context, item: CollectionItem<typeof ${toPascalCase(
-        collection_name2
-      )}>) {
-					   return <tr>
-						   {displayFields.map(({ field, format }) => {
-							   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-							   const value = item.get(field as any);
-							   return <td>{format ? format(value, item) : value}</td>;
-						   })}
-                           <td><div class="sealious-list__actions">
-                               <a href={${edit_action_name}URL(item.id)}>Edit</a>
-                               <a href={${delete_ask_action_name}URL(item.id)}>Delete</a>
-                               </div>
-                           </td>
-					   </tr>;
-				   }`
-    }
-  );
-  await writeFile(list_path, list_content);
-  const fields_path = target_locreq.resolve(
-    `src/back/routes/${escape_url_params(url)}/shared.ts`
-  );
-  const fields_content = await sharedCrudFormFields(
-    collection_name,
-    fields_path
-  );
-  await writeFile(fields_path, fields_content);
-  const create_path = target_locreq.resolve(
-    `src/back/routes/${escape_url_params(url)}/create.form.ts`
-  );
-  const create_content = await createItemFormTemplate(
-    create_action_name,
-    create_path,
-    collection_name,
-    list_action_name
-  );
-  await writeFile(create_path, create_content);
-  const edit_path = target_locreq.resolve(
-    `src/back/routes/${escape_url_params(url)}/[id]/edit.form.ts`
-  );
-  const edit_content = await editItemFormTemplate(
-    edit_action_name,
-    edit_path,
-    collection_name,
-    list_action_name
-  );
-  await writeFile(edit_path, edit_content);
-  const delete_ask_path = target_locreq.resolve(
-    `src/back/routes/${escape_url_params(url)}/[id]/delete-ask.page.tsx`
-  );
-  const delete_ask_content = await askItemDeleteTemplate(
-    delete_ask_action_name,
-    collection_name,
-    delete_ask_path,
-    list_action_name,
-    delete_action_name
-  );
-  await writeFile(delete_ask_path, delete_ask_content);
-  const delete_path = target_locreq.resolve(
-    `src/back/routes/${escape_url_params(url)}/[id]/delete.page.tsx`
-  );
-  const delete_content = await itemDeleteTemplate(
-    delete_action_name,
-    collection_name,
-    delete_ask_path,
-    list_action_name
+  const [uppercase_collection, collection_fields] = await Promise.all([
+    extractCollectionClassname(
+      target_locreq.resolve(
+        "src/back/collections/" + collection_name + ".ts"
+      )
+    ),
+    extract_fields_from_collection(collection_name)
+  ]);
+  const field_handler_results = await Promise.all(
+    collection_fields.map(async (field) => {
+      return getFieldHandler(
+        collection_name,
+        field,
+        (p) => p,
+        "edit_fields"
+      );
+    })
   );
-  await writeFile(delete_path, delete_content);
+  const list_content = `import { CRUD } from "@sealcode/crud-ui";
+import type { CollectionItem } from "sealious";
+import type { ListFilterRender } from "@sealcode/sealgen";
+import { Controls, DefaultListFilters, Fields } from "@sealcode/sealgen";
+import { ${toPascalCase(
+    collection_name
+  )} } from "src/back/collections/collections.js";
+import html from "src/back/html.js";
+
+export const actionName = "${toPascalCase(collection_name)}CRUD";
+
+const edit_fields = <const>
+{
+	${field_handler_results.filter(({ hide_field }) => !hide_field).map(({ field }) => field).filter((e) => e != "").join(",\n")}
+};
+
+
+const edit_controls = [
+	${field_handler_results.filter(({ hide_control }) => !hide_control).map(({ controls }) => controls).filter((e) => e != "").join(",\n")}
+]
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const fields_for_display = [
+${makeDefaultDisplayFields(collection_fields)}
+] as {
+	field: keyof (typeof ${toPascalCase(collection_name)})["fields"];
+	label: string;
+	format?: (value: unknown, item: CollectionItem<typeof ${toPascalCase(
+    collection_name
+  )}>) => string | Promise<string>;
+}[];
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const fields_for_filters = [
+     ${makeDefaultFilterFields(collection_fields)}
+] as {
+	field: keyof (typeof ${uppercase_collection})["fields"];
+	render?: ListFilterRender;
+	prepareValue?: (filter_value: unknown)=>unknown; // set this function to change what filter value is passed to Sealious
+}[];
+
+export default new CRUD({
+	collection: ${toPascalCase(collection_name)},
+	nice_collection_name: "${toPascalCase(collection_name)}",
+	fields_for_display,
+	fields_for_filters,
+	html,
+	list_title: "${toPascalCase(collection_name)} list",
+	edit_title: "Edit",
+	edit_button_text: "Edit",
+	delete_button_text: "Delete",
+	back_to_list_button_text: "\u2190 Back to ${toPascalCase(collection_name)} list",
+	edit_fields,
+	edit_controls,
+	form_value_to_sealious_value: {},
+	sealious_value_to_form_value: {},
+	post_edit: async () => {},
+	post_create: async () => {},
+});
+`;
+  await writeFile(list_path, await formatWithPrettier(list_content));
   await generateRoutes();
 }
 export {

package/lib/add-verbose-crud.js

@@ -0,0 +1,131 @@
+import _locreq from "locreq";
+import { escape_url_params } from "./utils/escape-url-params.js";
+import prompts from "prompts";
+import { toKebabCase, toPascalCase } from "js-convert-case";
+import { listCollections } from "./utils/list-collections.js";
+import { collectionListTemplate } from "./templates/shared/collection-list.js";
+import { writeFile } from "./utils/write-file.js";
+import { importPath } from "./utils/import-path.js";
+import { sharedCrudFormFields } from "./templates/shared/shared-crud-form-fields.js";
+import { generateRoutes } from "./generate-routes.js";
+import { createItemFormTemplate } from "./templates/shared/collection-create-form.js";
+import { editItemFormTemplate } from "./templates/shared/collection-edit-form.js";
+import { askItemDeleteTemplate } from "./templates/shared/confirm-item-delete.js";
+import { itemDeleteTemplate } from "./templates/shared/item-delete.js";
+async function addVerboseCRUD(params, app_directory = process.cwd()) {
+  const target_locreq = _locreq(app_directory);
+  prompts.override(params);
+  const response = await prompts([
+    {
+      type: "autocomplete",
+      name: "collection",
+      message: "Which sealious collection do you like to add CRUD forms for?",
+      choices: (await listCollections()).map((collection) => ({
+        title: collection,
+        value: collection
+      }))
+    },
+    {
+      type: "text",
+      name: "url",
+      message: "Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
+      validate: (s) => s.trim()[0] == "/" ? true : "Should start with a '/'",
+      initial: function(_, { collection }) {
+        return "/" + toKebabCase(collection);
+      }
+    }
+  ]);
+  const collection_name = response.collection;
+  const url = response.url;
+  const list_action_name = toPascalCase(collection_name) + "CRUDList";
+  const create_action_name = toPascalCase(collection_name) + "CRUDCreate";
+  const edit_action_name = toPascalCase(collection_name) + "CRUDEdit";
+  const delete_ask_action_name = toPascalCase(collection_name) + "CRUDDeleteAsk";
+  const delete_action_name = toPascalCase(collection_name) + "CRUDDelete";
+  const list_path = target_locreq.resolve(
+    `src/back/routes/${escape_url_params(url)}/index.list.tsx`
+  );
+  const list_content = await collectionListTemplate(
+    collection_name,
+    list_action_name,
+    list_path,
+    {
+      post_import_js: `import { ${create_action_name}URL, ${edit_action_name}URL, ${delete_ask_action_name}URL } from "${importPath(
+        list_path,
+        "src/back/routes/urls.ts"
+      )}";`,
+      post_header_html: `<a href={${create_action_name}URL}> Create </a>`,
+      render_item: (collection_name2) => `	async renderItem(ctx: Context, item: CollectionItem<typeof ${toPascalCase(
+        collection_name2
+      )}>) {
+					   return <tr>
+						   {displayFields.map(({ field, format }) => {
+							   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+							   const value = item.get(field as any);
+							   return <td>{format ? format(value, item) : value}</td>;
+						   })}
+                           <td><div class="sealious-list__actions">
+                               <a href={${edit_action_name}URL(item.id)}>Edit</a>
+                               <a href={${delete_ask_action_name}URL(item.id)}>Delete</a>
+                               </div>
+                           </td>
+					   </tr>;
+				   }`
+    }
+  );
+  await writeFile(list_path, list_content);
+  const fields_path = target_locreq.resolve(
+    `src/back/routes/${escape_url_params(url)}/shared.ts`
+  );
+  const fields_content = await sharedCrudFormFields(
+    collection_name,
+    fields_path
+  );
+  await writeFile(fields_path, fields_content);
+  const create_path = target_locreq.resolve(
+    `src/back/routes/${escape_url_params(url)}/create.form.ts`
+  );
+  const create_content = await createItemFormTemplate(
+    create_action_name,
+    create_path,
+    collection_name,
+    list_action_name
+  );
+  await writeFile(create_path, create_content);
+  const edit_path = target_locreq.resolve(
+    `src/back/routes/${escape_url_params(url)}/[id]/edit.form.ts`
+  );
+  const edit_content = await editItemFormTemplate(
+    edit_action_name,
+    edit_path,
+    collection_name,
+    list_action_name
+  );
+  await writeFile(edit_path, edit_content);
+  const delete_ask_path = target_locreq.resolve(
+    `src/back/routes/${escape_url_params(url)}/[id]/delete-ask.page.tsx`
+  );
+  const delete_ask_content = await askItemDeleteTemplate(
+    delete_ask_action_name,
+    collection_name,
+    delete_ask_path,
+    list_action_name,
+    delete_action_name
+  );
+  await writeFile(delete_ask_path, delete_ask_content);
+  const delete_path = target_locreq.resolve(
+    `src/back/routes/${escape_url_params(url)}/[id]/delete.page.tsx`
+  );
+  const delete_content = await itemDeleteTemplate(
+    delete_action_name,
+    collection_name,
+    delete_ask_path,
+    list_action_name
+  );
+  await writeFile(delete_path, delete_content);
+  await generateRoutes();
+}
+export {
+  addVerboseCRUD
+};
+//# sourceMappingURL=add-verbose-crud.js.map

package/lib/cli.js

@@ -9,10 +9,12 @@ import { generateRoutes } from "./generate-routes.js";
 import { makeEnv } from "./make-env.js";
 import yargs from "yargs/yargs";
 import { getFonts } from "./get-fonts.js";
+import { addVerboseCRUD } from "./add-verbose-crud.js";
 import { addCRUD } from "./add-crud.js";
 const actions = {
   "add-collection": addCollection,
   "add-route": addRoute,
+  "add-verbose-crud": addVerboseCRUD,
   "add-crud": addCRUD,
   "generate-collections": generateCollections,
   "generate-components": generateComponents,

package/lib/forms/controls/file.test.js

@@ -60,18 +60,10 @@ describe("file-control", () => {
       browser = await getBrowser();
       const context = await browser.newContext();
       page = await context.newPage();
-      let screenshot = true;
-      (async function() {
-        while (screenshot) {
-          await page.screenshot({ path: "/home/kuba/Downloads/" + Date.now() + ".png" });
-          await sleep(100);
-        }
-      })();
       await page.goto(`http://localhost:${port}`);
       await page.getByRole("button", { name: "Wy\u015Blij" }).click();
       await sleep(100);
       assert(submit_called, "Submit not called - something prevented submit on click?");
-      screenshot = false;
     });
   }).timeout(1e4);
 });

package/lib/forms/controls/single-reference.test.js

@@ -13,7 +13,7 @@ describe("single-reference.test", () => {
   after(async () => {
     await page.close();
   });
-  it("creates minimal sealious app and adds a simple route that works", async function() {
+  it("creates minimal sealious app and adds form using single-reference field that works", async function() {
     const test_app = await RealAppTest.init();
     await test_app.addFile(
       "src/back/collections/articles.ts",

package/lib/templates/form.js

@@ -35,7 +35,7 @@ const defaults = {
 	    	return { canAccess: true, message: "" };
 	    }`,
   render: `async render(ctx: Context, data: FormData, show_field_errors: boolean) {
-		return html(ctx, "Form", await super.render(ctx, data, show_field_errors));
+		return html({ctx, title: "Form", description: "", body: await super.render(ctx, data, show_field_errors)});
 	}`,
   get_initial_values: "",
   other_methods: ""

package/lib/templates/page.js

@@ -4,7 +4,7 @@ async function pageTemplate(action_name, newfilefullpath) {
   return `import type { Context } from "koa";
 import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
-import html from "${rel("src/back/html.js")}";
+import html from "src/back/html.js";
 
 export const actionName = "${action_name}";
 

package/lib/templates/shared/collection-list.js

@@ -1,16 +1,15 @@
 import { extractCollectionClassname } from "../../generate-collections.js";
 import extract_fields_from_collection from "../../utils/extract-fields-from-collection.js";
 import _locreq from "locreq";
-import { curryImportPath } from "../../utils/import-path.js";
 import { DefaultListFilters } from "../../page/default-list-filters.js";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 import { formatWithPrettier } from "../../utils/prettier.js";
 const target_locreq = _locreq(process.cwd());
-function fieldImport({ type }, importPath) {
+function fieldImport({ type }) {
   if (type == "image") {
     return `
 		import type { FilePointer } from "@sealcode/file-manager";
-		import { imageRouter } from "${importPath("src/back/image-router.js")}";
+		import { imageRouter } from ""src/back/image-router.js";
 	    `;
   }
   return "";
@@ -73,7 +72,7 @@ const default_hooks = {
 		</tr>;
     }`
 };
-async function collectionListTemplate(collection_name, action_name, newfilefullpath, _hooks = {}) {
+async function collectionListTemplate(collection_name, action_name, _, _hooks = {}) {
   const hooks = { ...default_hooks, ..._hooks };
   const [uppercase_collection, collection_fields] = await Promise.all([
     extractCollectionClassname(
@@ -83,20 +82,15 @@ async function collectionListTemplate(collection_name, action_name, newfilefullp
     ),
     extract_fields_from_collection(collection_name)
   ]);
-  const importPath = curryImportPath(newfilefullpath);
   const field_import_string = Array.from(
-    new Set(
-      collection_fields.map((field) => fieldImport(field, importPath))
-    )
+    new Set(collection_fields.map((field) => fieldImport(field)))
   ).join("\n");
   const result = `import type { Context } from "koa";
 import type { CollectionItem } from "sealious";
 import type { FlatTemplatable, Templatable } from "tempstream";
 import { TempstreamJSX, tempstream } from "tempstream";
-import { ${uppercase_collection} } from "${importPath(
-    target_locreq.resolve("src/back/collections/collections.ts")
-  )}";
-import html from "${importPath(target_locreq.resolve("src/back/html.ts"))}";
+import { ${uppercase_collection} } from "src/back/collections/collections.js";
+import html from "src/back/html.js";
 import type { ListFilterRender } from "@sealcode/sealgen";
 import {
 	SealiousItemListPage,
@@ -203,16 +197,17 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 	}
 
 	async render(ctx: Context) {
-		return html(
+		return html({
 			ctx,
-			"${action_name}",
-			<div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
+			title: "${action_name}",
+            description: "",
+			body: <div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
 				${hooks.pre_header_html}
 				<h2>${action_name} List</h2>
 				${hooks.post_header_html}
 				{super.render(ctx)}
 			</div>
-		);
+		});
 	}
 
 })(${uppercase_collection});

package/lib/templates/shared/handlers/default.js

@@ -1,9 +1,8 @@
 import { toPascalCase } from "js-convert-case";
-const default_handler = async (collection_name, { name, is_readonly, is_required }) => {
+const default_handler = async (collection_name, { name, is_readonly, is_required }, _, __, fields_var = `${toPascalCase(collection_name)}FormFields`) => {
   const required_s = `${toPascalCase(
     collection_name
   )}.fields.${name}.required`;
-  const fields_var = `${toPascalCase(collection_name)}FormFields`;
   const fallback_value_initial = `""`;
   const fallback_value_sealious = `""`;
   const main_value_initial = `item.get("${name}")`;

package/lib/templates/shared/shared-crud-form-fields.js

@@ -30,12 +30,13 @@ const field_handlers = {
   "structured-array": structured_array_handler,
   "single-reference": single_reference_handler
 };
-async function getFieldHandler(collection_name, field, importPath) {
+async function getFieldHandler(collection_name, field, importPath, fields_var) {
   const defaults = await field_handlers.default(
     collection_name,
     field,
     importPath,
-    {}
+    {},
+    fields_var
   );
   const result = {
     ...defaults,
@@ -43,7 +44,8 @@ async function getFieldHandler(collection_name, field, importPath) {
       collection_name,
       field,
       importPath,
-      defaults
+      defaults,
+      fields_var
     ) || {}
   };
   const result_initial_value_edit = result.initial_value_edit;

package/lib/test_utils/test-on-real-app.js

@@ -10,7 +10,7 @@ import { module_dirname } from "../utils/module-dirname.js";
 import EventEmitter from "events";
 const locreq = _locreq(module_dirname(import.meta.url));
 const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
-const sealious_minimal_commit = "b0d5bf5";
+const sealious_minimal_commit = "833e70c";
 class RealAppTest {
   constructor() {
     this.emitter = new EventEmitter();

package/package.json

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

package/src/add-crud.ts

@@ -3,15 +3,16 @@ import { escape_url_params } from "./utils/escape-url-params.js";
 import prompts from "prompts";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 import { listCollections } from "./utils/list-collections.js";
-import { collectionListTemplate } from "./templates/shared/collection-list.js";
+import {
+	makeDefaultDisplayFields,
+	makeDefaultFilterFields,
+} from "./templates/shared/collection-list.js";
 import { writeFile } from "./utils/write-file.js";
-import { importPath } from "./utils/import-path.js";
-import { sharedCrudFormFields } from "./templates/shared/shared-crud-form-fields.js";
+import { extractCollectionClassname } from "./generate-collections.js";
+import extract_fields_from_collection from "./utils/extract-fields-from-collection.js";
+import { getFieldHandler } from "./templates/shared/shared-crud-form-fields.js";
 import { generateRoutes } from "./generate-routes.js";
-import { createItemFormTemplate } from "./templates/shared/collection-create-form.js";
-import { editItemFormTemplate } from "./templates/shared/collection-edit-form.js";
-import { askItemDeleteTemplate } from "./templates/shared/confirm-item-delete.js";
-import { itemDeleteTemplate } from "./templates/shared/item-delete.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 
 export async function addCRUD(
 	params: Partial<{ [key in "collection" | "url"]: string }>,
@@ -36,7 +37,7 @@ export async function addCRUD(
 			type: "text",
 			name: "url",
 			message:
-				"Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
+				"Enter a full absolute path for the new route (for example: /admin/users/): ",
 			validate: (s: string) =>
 				s.trim()[0] == "/" ? true : "Should start with a '/'",
 			initial: function (_, { collection }: { collection: string }) {
@@ -47,107 +48,100 @@ export async function addCRUD(
 
 	const collection_name = response.collection as string;
 	const url = response.url as string;
-	const list_action_name = toPascalCase(collection_name) + "CRUDList";
-	const create_action_name = toPascalCase(collection_name) + "CRUDCreate";
-	const edit_action_name = toPascalCase(collection_name) + "CRUDEdit";
-	const delete_ask_action_name =
-		toPascalCase(collection_name) + "CRUDDeleteAsk";
-	const delete_action_name = toPascalCase(collection_name) + "CRUDDelete";
 
 	/* create the list endpoint */
 	const list_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}.list.tsx`
+		`src/back/routes/${escape_url_params(url)}/index.page.ts`
 	);
-	const list_content = await collectionListTemplate(
-		collection_name,
-		list_action_name,
-		list_path,
-		{
-			post_import_js: `import { ${create_action_name}URL, ${edit_action_name}URL, ${delete_ask_action_name}URL } from "${importPath(
-				list_path,
-				"src/back/routes/urls.ts"
-			)}";`,
-			post_header_html: `<a href={${create_action_name}URL}> Create </a>`,
-			render_item: (
-				collection_name: string
-			) => `	async renderItem(ctx: Context, item: CollectionItem<typeof ${toPascalCase(
-				collection_name
-			)}>) {
-					   return <tr>
-						   {displayFields.map(({ field, format }) => {
-							   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-							   const value = item.get(field as any);
-							   return <td>{format ? format(value, item) : value}</td>;
-						   })}
-                           <td><div class="sealious-list__actions">
-                               <a href={${edit_action_name}URL(item.id)}>Edit</a>
-                               <a href={${delete_ask_action_name}URL(item.id)}>Delete</a>
-                               </div>
-                           </td>
-					   </tr>;
-				   }`,
-		}
-	);
-	await writeFile(list_path, list_content);
+	const [uppercase_collection, collection_fields] = await Promise.all([
+		extractCollectionClassname(
+			target_locreq.resolve(
+				"src/back/collections/" + collection_name + ".ts"
+			)
+		),
+		extract_fields_from_collection(collection_name),
+	]);
 
-	/* create the shared fields file */
-	const fields_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}/shared.ts`
-	);
-	const fields_content = await sharedCrudFormFields(
-		collection_name,
-		fields_path
+	const field_handler_results = await Promise.all(
+		collection_fields.map(async (field) => {
+			return getFieldHandler(
+				collection_name,
+				field,
+				(p) => p,
+				"edit_fields"
+			);
+		})
 	);
-	await writeFile(fields_path, fields_content);
 
-	/* create the create endpoint */
-	const create_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}/create.form.ts`
-	);
-	const create_content = await createItemFormTemplate(
-		create_action_name,
-		create_path,
-		collection_name,
-		list_action_name
-	);
-	await writeFile(create_path, create_content);
+	const list_content = `import { CRUD } from "@sealcode/crud-ui";
+import type { CollectionItem } from "sealious";
+import type { ListFilterRender } from "@sealcode/sealgen";
+import { Controls, DefaultListFilters, Fields } from "@sealcode/sealgen";
+import { ${toPascalCase(
+		collection_name
+	)} } from "src/back/collections/collections.js";
+import html from "src/back/html.js";
 
-	/* create the edit endpoint */
-	const edit_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}/[id]/edit.form.ts`
-	);
-	const edit_content = await editItemFormTemplate(
-		edit_action_name,
-		edit_path,
-		collection_name,
-		list_action_name
-	);
-	await writeFile(edit_path, edit_content);
+export const actionName = "${toPascalCase(collection_name)}CRUD";
 
-	/* create the confirm delete endpoint */
-	const delete_ask_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}/[id]/delete-ask.page.tsx`
-	);
-	const delete_ask_content = await askItemDeleteTemplate(
-		delete_ask_action_name,
-		collection_name,
-		delete_ask_path,
-		list_action_name,
-		delete_action_name
-	);
-	await writeFile(delete_ask_path, delete_ask_content);
+const edit_fields = <const>
+{
+	${field_handler_results
+		.filter(({ hide_field }) => !hide_field)
+		.map(({ field }) => field)
+		.filter((e) => e != "")
+		.join(",\n")}
+};
 
-	/* create the actual delete endpoint */
-	const delete_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}/[id]/delete.page.tsx`
-	);
-	const delete_content = await itemDeleteTemplate(
-		delete_action_name,
-		collection_name,
-		delete_ask_path,
-		list_action_name
-	);
-	await writeFile(delete_path, delete_content);
+
+const edit_controls = [
+	${field_handler_results
+		.filter(({ hide_control }) => !hide_control)
+		.map(({ controls }) => controls)
+		.filter((e) => e != "")
+		.join(",\n")}
+]
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const fields_for_display = [
+${makeDefaultDisplayFields(collection_fields)}
+] as {
+	field: keyof (typeof ${toPascalCase(collection_name)})["fields"];
+	label: string;
+	format?: (value: unknown, item: CollectionItem<typeof ${toPascalCase(
+		collection_name
+	)}>) => string | Promise<string>;
+}[];
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const fields_for_filters = [
+     ${makeDefaultFilterFields(collection_fields)}
+] as {
+	field: keyof (typeof ${uppercase_collection})["fields"];
+	render?: ListFilterRender;
+	prepareValue?: (filter_value: unknown)=>unknown; // set this function to change what filter value is passed to Sealious
+}[];
+
+export default new CRUD({
+	collection: ${toPascalCase(collection_name)},
+	nice_collection_name: "${toPascalCase(collection_name)}",
+	fields_for_display,
+	fields_for_filters,
+	html,
+	list_title: "${toPascalCase(collection_name)} list",
+	edit_title: "Edit",
+	edit_button_text: "Edit",
+	delete_button_text: "Delete",
+	back_to_list_button_text: "← Back to ${toPascalCase(collection_name)} list",
+	edit_fields,
+	edit_controls,
+	form_value_to_sealious_value: {},
+	sealious_value_to_form_value: {},
+	post_edit: async () => {},
+	post_create: async () => {},
+});
+`;
+	await writeFile(list_path, await formatWithPrettier(list_content));
 
 	await generateRoutes();
 }

package/src/add-verbose-crud.ts

@@ -0,0 +1,153 @@
+import _locreq from "locreq";
+import { escape_url_params } from "./utils/escape-url-params.js";
+import prompts from "prompts";
+import { toKebabCase, toPascalCase } from "js-convert-case";
+import { listCollections } from "./utils/list-collections.js";
+import { collectionListTemplate } from "./templates/shared/collection-list.js";
+import { writeFile } from "./utils/write-file.js";
+import { importPath } from "./utils/import-path.js";
+import { sharedCrudFormFields } from "./templates/shared/shared-crud-form-fields.js";
+import { generateRoutes } from "./generate-routes.js";
+import { createItemFormTemplate } from "./templates/shared/collection-create-form.js";
+import { editItemFormTemplate } from "./templates/shared/collection-edit-form.js";
+import { askItemDeleteTemplate } from "./templates/shared/confirm-item-delete.js";
+import { itemDeleteTemplate } from "./templates/shared/item-delete.js";
+
+export async function addVerboseCRUD(
+	params: Partial<{ [key in "collection" | "url"]: string }>,
+	app_directory: string = process.cwd()
+) {
+	const target_locreq = _locreq(app_directory);
+	prompts.override(params);
+	const response = await prompts([
+		{
+			type: "autocomplete",
+			name: "collection",
+			message:
+				"Which sealious collection do you like to add CRUD forms for?",
+			choices: (
+				await listCollections()
+			).map((collection) => ({
+				title: collection,
+				value: collection,
+			})),
+		},
+		{
+			type: "text",
+			name: "url",
+			message:
+				"Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
+			validate: (s: string) =>
+				s.trim()[0] == "/" ? true : "Should start with a '/'",
+			initial: function (_, { collection }: { collection: string }) {
+				return "/" + toKebabCase(collection);
+			},
+		},
+	]);
+
+	const collection_name = response.collection as string;
+	const url = response.url as string;
+	const list_action_name = toPascalCase(collection_name) + "CRUDList";
+	const create_action_name = toPascalCase(collection_name) + "CRUDCreate";
+	const edit_action_name = toPascalCase(collection_name) + "CRUDEdit";
+	const delete_ask_action_name =
+		toPascalCase(collection_name) + "CRUDDeleteAsk";
+	const delete_action_name = toPascalCase(collection_name) + "CRUDDelete";
+
+	/* create the list endpoint */
+	const list_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/index.list.tsx`
+	);
+	const list_content = await collectionListTemplate(
+		collection_name,
+		list_action_name,
+		list_path,
+		{
+			post_import_js: `import { ${create_action_name}URL, ${edit_action_name}URL, ${delete_ask_action_name}URL } from "${importPath(
+				list_path,
+				"src/back/routes/urls.ts"
+			)}";`,
+			post_header_html: `<a href={${create_action_name}URL}> Create </a>`,
+			render_item: (
+				collection_name: string
+			) => `	async renderItem(ctx: Context, item: CollectionItem<typeof ${toPascalCase(
+				collection_name
+			)}>) {
+					   return <tr>
+						   {displayFields.map(({ field, format }) => {
+							   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+							   const value = item.get(field as any);
+							   return <td>{format ? format(value, item) : value}</td>;
+						   })}
+                           <td><div class="sealious-list__actions">
+                               <a href={${edit_action_name}URL(item.id)}>Edit</a>
+                               <a href={${delete_ask_action_name}URL(item.id)}>Delete</a>
+                               </div>
+                           </td>
+					   </tr>;
+				   }`,
+		}
+	);
+	await writeFile(list_path, list_content);
+
+	/* create the shared fields file */
+	const fields_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/shared.ts`
+	);
+	const fields_content = await sharedCrudFormFields(
+		collection_name,
+		fields_path
+	);
+	await writeFile(fields_path, fields_content);
+
+	/* create the create endpoint */
+	const create_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/create.form.ts`
+	);
+	const create_content = await createItemFormTemplate(
+		create_action_name,
+		create_path,
+		collection_name,
+		list_action_name
+	);
+	await writeFile(create_path, create_content);
+
+	/* create the edit endpoint */
+	const edit_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/edit.form.ts`
+	);
+	const edit_content = await editItemFormTemplate(
+		edit_action_name,
+		edit_path,
+		collection_name,
+		list_action_name
+	);
+	await writeFile(edit_path, edit_content);
+
+	/* create the confirm delete endpoint */
+	const delete_ask_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/delete-ask.page.tsx`
+	);
+	const delete_ask_content = await askItemDeleteTemplate(
+		delete_ask_action_name,
+		collection_name,
+		delete_ask_path,
+		list_action_name,
+		delete_action_name
+	);
+	await writeFile(delete_ask_path, delete_ask_content);
+
+	/* create the actual delete endpoint */
+	const delete_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/delete.page.tsx`
+	);
+	const delete_content = await itemDeleteTemplate(
+		delete_action_name,
+		collection_name,
+		delete_ask_path,
+		list_action_name
+	);
+	await writeFile(delete_path, delete_content);
+
+	await generateRoutes();
+}

package/src/cli.ts

@@ -9,6 +9,7 @@ import { generateRoutes } from "./generate-routes.js";
 import { makeEnv } from "./make-env.js";
 import yargs from "yargs/yargs";
 import { getFonts } from "./get-fonts.js";
+import { addVerboseCRUD } from "./add-verbose-crud.js";
 import { addCRUD } from "./add-crud.js";
 
 const actions: Record<
@@ -17,6 +18,7 @@ const actions: Record<
 > = {
 	"add-collection": addCollection,
 	"add-route": addRoute,
+	"add-verbose-crud": addVerboseCRUD,
 	"add-crud": addCRUD,
 	"generate-collections": generateCollections,
 	"generate-components": generateComponents,

package/src/forms/controls/file.test.ts

@@ -69,19 +69,11 @@ describe("file-control", () => {
 			browser = await getBrowser();
 			const context = await browser.newContext();
 			page = await context.newPage();
-			let screenshot = true;
-			(async function () {
-				while (screenshot) {
-					await page.screenshot({ path: "/home/kuba/Downloads/" + Date.now() + ".png" });
-					await sleep(100);
-				}
-			})();
 			await page.goto(`http://localhost:${port}`);
 
 			await page.getByRole("button", { name: "Wyślij" }).click();
 			await sleep(100);
 			assert(submit_called, "Submit not called - something prevented submit on click?");
-			screenshot = false;
 		});
 	}).timeout(10000);
 });

package/src/forms/controls/single-reference.test.ts

@@ -17,7 +17,7 @@ describe("single-reference.test", () => {
 		await page.close();
 	});
 
-	it("creates minimal sealious app and adds a simple route that works", async function () {
+	it("creates minimal sealious app and adds form using single-reference field that works", async function () {
 		const test_app = await RealAppTest.init();
 
 		// add possiblity to modify templates (form and collection) and create test case

package/src/templates/form.ts

@@ -36,7 +36,7 @@ const defaults = {
 	    	return { canAccess: true, message: "" };
 	    }`,
 	render: `async render(ctx: Context, data: FormData, show_field_errors: boolean) {
-		return html(ctx, "Form", await super.render(ctx, data, show_field_errors));
+		return html({ctx, title: "Form", description: "", body: await super.render(ctx, data, show_field_errors)});
 	}`,
 	get_initial_values: "",
 	other_methods: "",

package/src/templates/page.ts

@@ -7,7 +7,7 @@ export async function pageTemplate(
 	return `import type { Context } from "koa";
 import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
-import html from "${rel("src/back/html.js")}";
+import html from "src/back/html.js";
 
 export const actionName = "${action_name}";
 

package/src/templates/shared/collection-list.ts

@@ -3,20 +3,16 @@ import extract_fields_from_collection, {
 	ExtractedFieldInfo,
 } from "../../utils/extract-fields-from-collection.js";
 import _locreq from "locreq";
-import { curryImportPath } from "../../utils/import-path.js";
 import { DefaultListFilters } from "../../page/default-list-filters.js";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 import { formatWithPrettier } from "../../utils/prettier.js";
 const target_locreq = _locreq(process.cwd());
 
-function fieldImport(
-	{ type }: ExtractedFieldInfo,
-	importPath: (path: string) => string
-): string {
+function fieldImport({ type }: ExtractedFieldInfo): string {
 	if (type == "image") {
 		return `
 		import type { FilePointer } from "@sealcode/file-manager";
-		import { imageRouter } from "${importPath("src/back/image-router.js")}";
+		import { imageRouter } from ""src/back/image-router.js";
 	    `;
 	}
 	return "";
@@ -100,7 +96,7 @@ const default_hooks = {
 export async function collectionListTemplate(
 	collection_name: string,
 	action_name: string,
-	newfilefullpath: string,
+	_: string,
 	_hooks: Partial<typeof default_hooks> = {}
 ) {
 	const hooks = { ...default_hooks, ..._hooks };
@@ -112,22 +108,16 @@ export async function collectionListTemplate(
 		),
 		extract_fields_from_collection(collection_name),
 	]);
-	const importPath = curryImportPath(newfilefullpath);
-
 	const field_import_string = Array.from(
-		new Set(
-			collection_fields.map((field) => fieldImport(field, importPath))
-		)
+		new Set(collection_fields.map((field) => fieldImport(field)))
 	).join("\n");
 
 	const result = `import type { Context } from "koa";
 import type { CollectionItem } from "sealious";
 import type { FlatTemplatable, Templatable } from "tempstream";
 import { TempstreamJSX, tempstream } from "tempstream";
-import { ${uppercase_collection} } from "${importPath(
-		target_locreq.resolve("src/back/collections/collections.ts")
-	)}";
-import html from "${importPath(target_locreq.resolve("src/back/html.ts"))}";
+import { ${uppercase_collection} } from "src/back/collections/collections.js";
+import html from "src/back/html.js";
 import type { ListFilterRender } from "@sealcode/sealgen";
 import {
 	SealiousItemListPage,
@@ -234,16 +224,17 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 	}
 
 	async render(ctx: Context) {
-		return html(
+		return html({
 			ctx,
-			"${action_name}",
-			<div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
+			title: "${action_name}",
+            description: "",
+			body: <div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
 				${hooks.pre_header_html}
 				<h2>${action_name} List</h2>
 				${hooks.post_header_html}
 				{super.render(ctx)}
 			</div>
-		);
+		});
 	}
 
 })(${uppercase_collection});

package/src/templates/shared/handlers/default.ts

@@ -7,11 +7,16 @@ import {
 export const default_handler: FieldHandler<
 	Record<string, never>,
 	FieldHandlerResult
-> = async (collection_name, { name, is_readonly, is_required }) => {
+> = async (
+	collection_name,
+	{ name, is_readonly, is_required },
+	_,
+	__,
+	fields_var = `${toPascalCase(collection_name)}FormFields`
+) => {
 	const required_s = `${toPascalCase(
 		collection_name
 	)}.fields.${name}.required`;
-	const fields_var = `${toPascalCase(collection_name)}FormFields`;
 	const fallback_value_initial = `""`;
 	const fallback_value_sealious = `""`;
 

package/src/templates/shared/shared-crud-form-fields.ts

@@ -60,7 +60,8 @@ export type FieldHandler<
 	collection_name: string,
 	field: ExtractedFieldInfo,
 	importPath: (path: string) => string,
-	defaults: Defaults
+	defaults: Defaults,
+	fields_var?: string
 ) => Promise<Result>;
 
 export const field_handlers: Record<
@@ -86,13 +87,15 @@ export const field_handlers: Record<
 export async function getFieldHandler(
 	collection_name: string,
 	field: ExtractedFieldInfo,
-	importPath: (path: string) => string
+	importPath: (path: string) => string,
+	fields_var?: string
 ) {
 	const defaults = await field_handlers.default(
 		collection_name,
 		field,
 		importPath,
-		{}
+		{},
+		fields_var
 	);
 	const result = {
 		...defaults,
@@ -100,7 +103,8 @@ export async function getFieldHandler(
 			collection_name,
 			field,
 			importPath,
-			defaults
+			defaults,
+			fields_var
 		)) || {}),
 	};
 	const result_initial_value_edit = result.initial_value_edit;

package/src/test_utils/test-on-real-app.ts

@@ -15,7 +15,7 @@ const locreq = _locreq(module_dirname(import.meta.url));
 
 export const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
 
-const sealious_minimal_commit = "b0d5bf5";
+const sealious_minimal_commit = "833e70c";
 
 export class RealAppTest {
 	public node_pid: number;