feat(ui): support dask mode

numerique-gouv · Oct 4, 2024 · 529936e · 529936e
1 parent ae42d45
commit 529936e
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 0 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/~/app/layout/package.json b/packages/~/app/layout/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@~/app.core": "workspace:*",
     "@~/app.middleware": "workspace:*",
+    "@~/app.ui": "workspace:*",
     "@~/app.urls": "workspace:*",
     "hono": "4.6.3",
     "nprogress": "0.2.0"

diff --git a/packages/~/app/layout/src/root.ts b/packages/~/app/layout/src/root.ts
@@ -1,6 +1,7 @@
 //
 
 import type { App_Context } from "@~/app.middleware/context";
+import { set_prefers_color_scheme } from "@~/app.ui/scheme/scripts";
 import { html } from "hono/html";
 import type { PropsWithChildren } from "hono/jsx";
 import { useRequestContext } from "hono/jsx-renderer";
@@ -14,6 +15,7 @@ export function Root_Layout({ children }: PropsWithChildren) {
 
   return html`
     <html
+      _=${set_prefers_color_scheme}
       lang="fr"
       data-fr-scheme="system"
       hx-ext="${[

diff --git a/packages/~/app/ui/package.json b/packages/~/app/ui/package.json
@@ -34,6 +34,9 @@
     "./quote": {
       "default": "./src/quote/index.ts"
     },
+    "./scheme/scripts": {
+      "default": "./src/scheme/scripts/index.ts"
+    },
     "./table": {
       "default": "./src/table/index.ts"
     },

diff --git a/packages/~/app/ui/src/scheme/scripts/index.ts b/packages/~/app/ui/src/scheme/scripts/index.ts
@@ -0,0 +1,3 @@
+//
+
+export { set_prefers_color_scheme } from "./prefers_color_scheme";
diff --git a/packages/~/app/ui/src/scheme/scripts/prefers_color_scheme.test.ts b/packages/~/app/ui/src/scheme/scripts/prefers_color_scheme.test.ts
@@ -0,0 +1,26 @@
+//
+
+import { expect, test } from "bun:test";
+import "htmx.org";
+import _hyperscript from "hyperscript.org";
+import { set_prefers_color_scheme } from "./prefers_color_scheme";
+
+//
+
+test("set_prefers_color_scheme", () => {
+  document.body.innerHTML = `
+  <html _="${set_prefers_color_scheme}" ></html>
+  `;
+
+  _hyperscript.processNode(document.body);
+
+  //
+
+  const html = document.querySelector("html")!;
+  expect(html.outerHTML).toEqual("My html");
+  // expect(button.getAttribute("disabled")).toBeNull();
+  // button.click();
+  // expect(button.getAttribute("disabled")).toBe("true");
+  // button.dispatchEvent(new Event("htmx:afterOnLoad"));
+  // expect(button.getAttribute("disabled")).toBeNull();
+});
diff --git a/packages/~/app/ui/src/scheme/scripts/prefers_color_scheme.ts b/packages/~/app/ui/src/scheme/scripts/prefers_color_scheme.ts
@@ -0,0 +1,41 @@
+//
+
+//
+// Inspired by https://github.com/GouvernementFR/dsfr/blob/fe9d66b4ccaa7c3a3c0cb07eca69ddd6787965c4/src/scheme/script/scheme/scheme-boot.js#L14
+//
+
+export const set_prefers_color_scheme = `
+-- from https://github.com/sqwxl/harfang/blob/afb20cbc60c9eb44d2ce0501a7f754afc7395915/app/templates/partials/theme_toggle.html#L59C33-L84C1
+def nextTheme()
+  set currentTheme to localStorage.theme
+  set prefersDark to window.matchMedia("(prefers-color-scheme: dark)").matches
+
+  if prefersDark
+      -- auto(dark) -> light -> dark
+      if no currentTheme
+          return "light"
+      else if currentTheme is "light"
+          return "dark"
+      else
+          return null
+      end
+  else
+      -- auto(light) -> dark -> light
+      if no currentTheme
+          return "dark"
+      else if currentTheme is "dark"
+          return "light"
+      else
+          return null
+      end
+  end
+end
+
+on load
+  set theme to nextTheme()
+  if no theme
+      call localStorage.removeItem("theme")
+  else
+      set localStorage.theme to theme
+  end
+`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		//

		export { set_prefers_color_scheme } from "./prefers_color_scheme";