@sealcode/sealgen 0.18.5 → 0.18.6

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/esbuild-plugins/rewrite-asset-imports.js

@@ -1,6 +1,7 @@
 import { promises as fs } from "fs";
 import { extname, resolve } from "node:path";
 import { embeddable_file_extensions } from "../embeddable-file-extensions.js";
+import { compile } from "@sealcode/tempstream-esbuild";
 const rewrite_asset_imports_plugin = (project_dir) => ({
   name: "sealgen-rewrite-asset-imports",
   setup(build) {
@@ -30,6 +31,9 @@ const rewrite_asset_imports_plugin = (project_dir) => ({
           return replaced;
         }
       );
+      if (extname(args.path) === ".tsx") {
+        contents = compile(contents, args.path);
+      }
       return {
         contents,
         loader: extname(args.path) === ".tsx" ? "tsx" : "ts"

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.6",
 	"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",
@@ -61,6 +62,7 @@
 	"dependencies": {
 		"@koa/router": "^12.0.1",
 		"@sealcode/file-manager": "^1.0.2",
+		"@sealcode/tempstream-esbuild": "^0.1.0",
 		"@sealcode/ts-predicates": "^0.4.3",
 		"chokidar": "^3.6.0",
 		"colord": "^2.9.3",
@@ -82,6 +84,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/esbuild-plugins/rewrite-asset-imports.ts

@@ -2,6 +2,7 @@ import { promises as fs } from "fs";
 import { extname, resolve } from "node:path";
 import { embeddable_file_extensions } from "../embeddable-file-extensions.js";
 import { PluginBuild } from "esbuild";
+import { compile } from "@sealcode/tempstream-esbuild";
 
 export const rewrite_asset_imports_plugin = (project_dir: string) => ({
 	name: "sealgen-rewrite-asset-imports",
@@ -33,6 +34,9 @@ export const rewrite_asset_imports_plugin = (project_dir: string) => ({
 				}
 			);
 
+			if (extname(args.path) === ".tsx") {
+				contents = compile(contents, args.path);
+			}
 			return {
 				contents,
 				loader: extname(args.path) === ".tsx" ? "tsx" : "ts",

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/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" ? "↑" : "↓")) ||