@sealcode/sealgen 0.18.5 → 0.18.7

package/@types/forms/controls/single-reference.d.ts

@@ -1,4 +1,4 @@
-import SealiousSingleReference from "sealious/@types/src/app/base-chips/field-types/single-reference.js";
+import SealiousSingleReference from "sealious/@types/app/base-chips/field-types/single-reference.js";
 import { CollectionField } from "../fields/collection-field.js";
 import { DropdownOptions, FreeformDropdown } from "./dropdown.js";
 import { Collection, CollectionItem } from "sealious";

package/@types/src/page/list.d.ts

@@ -36,7 +36,7 @@ export declare abstract class ListPage<ItemType, F extends typeof BaseListPageFi
     private renderPageButton;
     getFilterValues(ctx: Context): Promise<Record<string, unknown>>;
     getSort(ctx: Context): Promise<ListSort | null>;
-    makeSortLink(ctx: Context, field: string, order: "asc" | "desc"): string;
+    makeSortLink(ctx: Context, field: string, order: "asc" | "desc" | null): string;
     renderFilters(ctx: Context): Promise<FlatTemplatable>;
     renderHeading(ctx: Context, field: string, label?: string): Promise<FlatTemplatable>;
     getDefaultSort(_: Context): ListSort | null;

package/lib/builders/colors-builder.js

@@ -3,6 +3,7 @@ import tempfile from "tempfile";
 import { promises as fs } from "fs";
 import { resolve } from "path";
 import { colord } from "colord";
+import { hex } from "wcag-contrast";
 import { formatWithPrettier } from "../utils/prettier.js";
 import { Builder } from "./builder.js";
 import { exec } from "../utils/exec.js";
@@ -130,16 +131,31 @@ class ColorsBuilder extends Builder {
 			}`,
       "css"
     );
+    function colorCodeFind(color_varibale_name) {
+      const parts = color_varibale_name.split("-").slice(2);
+      const colorGroup = parts[1];
+      const colorName = parts.slice(2).join("-").replace(/\)$/, "");
+      const colorCode = color_groups[colorGroup]?.[colorName]?.color;
+      return colorCode;
+    }
     function makeDemoPair(fg, bg, text, classname = "") {
+      let roundedContrast = "";
+      if (fg !== "") {
+        const fg_code = colorCodeFind(fg);
+        const bg_code = colorCodeFind(bg);
+        const contrast = hex(fg_code, bg_code);
+        roundedContrast = Math.round(contrast).toString();
+      }
       return (
         /* HTML */
         ` <div
 				class="pair ${classname}"
 				data-fg="${fg}"
 				data-bg="${bg}"
-				style="background-color: ${bg}; color: ${fg}"
+				style="background-color: ${bg}; color: ${fg}; display: flex; justify-content: space-between;"
 			>
 				<span>${text}</span>
+				<span>${roundedContrast}</span>
 			</div>`
       );
     }

package/lib/generate-routes.js

@@ -34,9 +34,21 @@ function generateURL(actionName, url) {
         ${actionName}URL.rawURL = "${encodeURI(url)}";`;
 }
 function sortRoutes(urls) {
-  return urls.sort(
-    ({ url: url1 }, { url: url2 }) => url1.includes(":") ? 1 : url2.includes(":") ? -1 : url1 < url2 ? -1 : 1
-  );
+  return urls.sort(({ url: url1 }, { url: url2 }) => {
+    const [segments1, segments2] = [url1, url2].map(
+      (url) => url.split("/")
+    );
+    if (segments1.length < segments2.length) {
+      return -1;
+    }
+    if (segments1.length > segments2.length) {
+      return 1;
+    }
+    const [encoded1, encoded2] = [url1, url2].map(
+      (url) => url.split("/").map((e) => e.startsWith(":") ? "1" : "0")
+    );
+    return encoded1 < encoded2 ? -1 : 1;
+  });
 }
 async function generateRoutes() {
   const files = await Promise.all(

package/lib/generate-routes.test.js

@@ -1,4 +1,4 @@
-import { generateURL } from "./generate-routes.js";
+import { generateURL, sortRoutes } from "./generate-routes.js";
 import * as prettier from "prettier";
 import { getPrettierConfig } from "./utils/prettier.js";
 import assert from "node:assert";
@@ -37,5 +37,29 @@ EditUserURL.rawURL = "/admin/u%C5%BCytkownicy/:id/edit/";`,
       )
     );
   });
+  it("sorts routes from most specific first to least specific last, considering directory structure", () => {
+    assert.deepStrictEqual(
+      sortRoutes(
+        [
+          "/home",
+          "/foo/:bar/:baz",
+          "/:param1/:param2/:param3",
+          "/foo/bar/baz",
+          "/foo/:bar",
+          "/:param1"
+        ].map((url) => ({
+          url
+        }))
+      ).map(({ url }) => url),
+      [
+        "/home",
+        "/:param1",
+        "/foo/:bar",
+        "/foo/bar/baz",
+        "/foo/:bar/:baz",
+        "/:param1/:param2/:param3"
+      ]
+    );
+  });
 });
 //# sourceMappingURL=generate-routes.test.js.map

package/lib/page/list.js

@@ -176,7 +176,7 @@ class ListPage extends Page {
     const order = current_order === "asc" ? "desc" : current_order === null ? "asc" : null;
     return (
       /* HTML */
-      `<th>
+      `<th data-field="${field}">
 			<a href="${this.makeSortLink(ctx, field, order)}"
 				>${label}
 				${current_order && (current_order == "asc" ? "\u2191" : "\u2193") || ""}</a

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.18.5",
+	"version": "0.18.7",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -36,6 +36,7 @@
 		"@types/prettier": "^2.7.0",
 		"@types/prompts": "^2.0.14",
 		"@types/recursive-readdir": "^2.2.4",
+		"@types/wcag-contrast": "^3.0.3",
 		"@types/ws": "^8.5.10",
 		"@types/yargs": "^17.0.32",
 		"@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -82,6 +83,7 @@
 		"tempfile": "^5.0.0",
 		"tempstream": "^0.4.6",
 		"tiny-glob": "^0.2.9",
+		"wcag-contrast": "^3.0.0",
 		"ws": "^8.16.0",
 		"yargs": "^17.6.2"
 	},

package/src/builders/colors-builder.ts

@@ -4,6 +4,7 @@ import tempfile from "tempfile";
 import { promises as fs } from "fs";
 import { resolve } from "path";
 import { colord } from "colord";
+import { hex } from "wcag-contrast";
 
 import { formatWithPrettier } from "../utils/prettier.js";
 
@@ -155,19 +156,37 @@ export class ColorsBuilder extends Builder {
 			"css"
 		);
 
+		function colorCodeFind(color_varibale_name: string) {
+			const parts = color_varibale_name.split("-").slice(2);
+			const colorGroup = parts[1];
+			const colorName = parts.slice(2).join("-").replace(/\)$/, "");
+			const colorCode = color_groups[colorGroup]?.[colorName]?.color;
+
+			return colorCode;
+		}
+
 		function makeDemoPair(
 			fg: string,
 			bg: string,
 			text: string,
 			classname = ""
 		) {
+			let roundedContrast = "";
+			if (fg !== "") {
+				const fg_code = colorCodeFind(fg);
+				const bg_code = colorCodeFind(bg);
+				const contrast = hex(fg_code, bg_code);
+				roundedContrast = Math.round(contrast).toString();
+			}
+
 			return /* HTML */ ` <div
 				class="pair ${classname}"
 				data-fg="${fg}"
 				data-bg="${bg}"
-				style="background-color: ${bg}; color: ${fg}"
+				style="background-color: ${bg}; color: ${fg}; display: flex; justify-content: space-between;"
 			>
 				<span>${text}</span>
+				<span>${roundedContrast}</span>
 			</div>`;
 		}
 

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

@@ -1,4 +1,4 @@
-import SealiousSingleReference from "sealious/@types/src/app/base-chips/field-types/single-reference.js";
+import SealiousSingleReference from "sealious/@types/app/base-chips/field-types/single-reference.js";
 import { CollectionField } from "../fields/collection-field.js";
 import { DropdownOptions, FreeformDropdown } from "./dropdown.js";
 import { Collection, CollectionItem } from "sealious";

package/src/generate-routes.test.ts

@@ -1,4 +1,4 @@
-import { generateURL } from "./generate-routes.js";
+import { generateURL, sortRoutes } from "./generate-routes.js";
 import * as prettier from "prettier";
 import { getPrettierConfig } from "./utils/prettier.js";
 import assert from "node:assert";
@@ -40,4 +40,29 @@ EditUserURL.rawURL = "/admin/u%C5%BCytkownicy/:id/edit/";`,
 			)
 		);
 	});
+
+	it("sorts routes from most specific first to least specific last, considering directory structure", () => {
+		assert.deepStrictEqual(
+			sortRoutes(
+				[
+					"/home",
+					"/foo/:bar/:baz",
+					"/:param1/:param2/:param3",
+					"/foo/bar/baz",
+					"/foo/:bar",
+					"/:param1",
+				].map((url) => ({
+					url,
+				}))
+			).map(({ url }: { url: string }) => url),
+			[
+				"/home",
+				"/:param1",
+				"/foo/:bar",
+				"/foo/bar/baz",
+				"/foo/:bar/:baz",
+				"/:param1/:param2/:param3",
+			]
+		);
+	});
 });

package/src/generate-routes.ts

@@ -48,15 +48,24 @@ export function generateURL(actionName: string, url: string) {
 }
 
 export function sortRoutes<T extends { url: string }>(urls: T[]): T[] {
-	return urls.sort(({ url: url1 }, { url: url2 }) =>
-		url1.includes(":") // make sure the parametrized ones come later, so the more concrete ones show up first. This is not a full solution, but works for single-parameter urls
-			? 1
-			: url2.includes(":")
-			? -1
-			: url1 < url2
-			? -1
-			: 1
-	);
+	return urls.sort(({ url: url1 }, { url: url2 }) => {
+		const [segments1, segments2] = [url1, url2].map((url) =>
+			url.split("/")
+		);
+		if (segments1.length < segments2.length) {
+			return -1;
+		}
+		if (segments1.length > segments2.length) {
+			return 1;
+		}
+		// if they are the same length, map each url to a string like 00010
+		// where "0" is for static (so should be sorted earlier, and "1" is for
+		// dynamic parts
+		const [encoded1, encoded2] = [url1, url2].map((url) =>
+			url.split("/").map((e) => (e.startsWith(":") ? "1" : "0"))
+		);
+		return encoded1 < encoded2 ? -1 : 1;
+	});
 }
 
 export async function generateRoutes(): Promise<void> {

package/src/page/list.ts

@@ -248,7 +248,7 @@ export abstract class ListPage<
 				: current_order === null
 				? "asc"
 				: null;
-		return /* HTML */ `<th>
+		return /* HTML */ `<th data-field="${field}">
 			<a href="${this.makeSortLink(ctx, field, order)}"
 				>${label}
 				${(current_order && (current_order == "asc" ? "↑" : "↓")) ||