From ec269a48f3822d5ab033006c9cf6e20965a4da5a Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Wed, 1 Oct 2025 10:48:53 +0100
Subject: [PATCH] wip(storybook): run storybook in nix derivation

---
 pkgs/clan-app/shell.nix           |  4 +-
 pkgs/clan-app/ui.nix              | 72 +++++++++++++++++--------------
 pkgs/clan-app/ui/package.json     |  4 +-
 pkgs/clan-app/ui/vitest.config.ts |  7 ++-
 4 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/pkgs/clan-app/shell.nix b/pkgs/clan-app/shell.nix
index 215d6cb97..822c23aa6 100644
--- a/pkgs/clan-app/shell.nix
+++ b/pkgs/clan-app/shell.nix
@@ -121,7 +121,7 @@ mkShell {
           withFirefox = false;
           withWebkit = true;
           withChromium = false;
-          withChromiumHeadlessShell = false;
+          withChromiumHeadlessShell = true;
         }
       }
 
@@ -134,6 +134,6 @@ mkShell {
       # this helps us avoid having to update the playwright js dependency everytime we update nixpkgs and vice versa
       # see vitest.config.js for corresponding launch configuration
 
-      export PLAYWRIGHT_WEBKIT_EXECUTABLE=$(find -L "$PLAYWRIGHT_BROWSERS_PATH" -type f -name "pw_run.sh")
+      export PLAYWRIGHT_CHROMIUM_EXECUTABLE=$(find -L "$PLAYWRIGHT_BROWSERS_PATH" -type f -name "headless_shell")
     '');
 }
diff --git a/pkgs/clan-app/ui.nix b/pkgs/clan-app/ui.nix
index 54da0b06d..f2fc535ed 100644
--- a/pkgs/clan-app/ui.nix
+++ b/pkgs/clan-app/ui.nix
@@ -4,8 +4,12 @@
   importNpmLock,
   clan-ts-api,
   fonts,
+  ps,
+  playwright-driver,
+  wget,
+  strace,
 }:
-buildNpmPackage (_finalAttrs: {
+buildNpmPackage (finalAttrs: {
   pname = "clan-app-ui";
   version = "0.0.1";
   nodejs = nodejs_22;
@@ -32,36 +36,38 @@ buildNpmPackage (_finalAttrs: {
   # todo figure out why this fails only inside of Nix
   # Something about passing orientation in any of the Form stories is causing the browser to crash
   # `npm run test-storybook-static` works fine in the devshell
-  #
-  #  passthru = rec {
-  #    storybook = buildNpmPackage {
-  #      pname = "${finalAttrs.pname}-storybook";
-  #      inherit (finalAttrs)
-  #        version
-  #        nodejs
-  #        src
-  #        npmDeps
-  #        npmConfigHook
-  #        preBuild
-  #        ;
-  #
-  #      nativeBuildInputs = finalAttrs.nativeBuildInputs ++ [
-  #        ps
-  #      ];
-  #
-  #      npmBuildScript = "test-storybook-static";
-  #
-  #      env = finalAttrs.env // {
-  #        PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = 1;
-  #        PLAYWRIGHT_BROWSERS_PATH = "${playwright-driver.browsers.override {
-  #          withChromiumHeadlessShell = true;
-  #        }}";
-  #        PLAYWRIGHT_HOST_PLATFORM_OVERRIDE = "ubuntu-24.04";
-  #      };
-  #
-  #      postBuild = ''
-  #        mv storybook-static $out
-  #      '';
-  #    };
-  #  };
+
+  passthru = rec {
+    storybook = buildNpmPackage {
+      pname = "${finalAttrs.pname}-storybook";
+      inherit (finalAttrs)
+        version
+        nodejs
+        src
+        npmDeps
+        npmConfigHook
+        ;
+
+      nativeBuildInputs = finalAttrs.nativeBuildInputs ++ [
+        ps
+      ];
+
+      npmBuildScript = "test-storybook-static";
+
+      env = {
+        PLAYWRIGHT_BROWSERS_PATH = "${playwright-driver.browsers.override {
+          withChromiumHeadlessShell = true;
+        }}";
+        PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS = true;
+      };
+
+      preBuild = finalAttrs.preBuild + ''
+        export PLAYWRIGHT_CHROMIUM_EXECUTABLE=$(find -L "$PLAYWRIGHT_BROWSERS_PATH" -type f -name "headless_shell")
+      '';
+
+      postBuild = ''
+        mv storybook-static $out
+      '';
+    };
+  };
 })
diff --git a/pkgs/clan-app/ui/package.json b/pkgs/clan-app/ui/package.json
index 603fa00eb..ea3b13955 100644
--- a/pkgs/clan-app/ui/package.json
+++ b/pkgs/clan-app/ui/package.json
@@ -16,9 +16,9 @@
     "knip": "knip --fix",
     "storybook-build": "storybook build",
     "storybook-dev": "storybook dev -p 6006",
-    "test-storybook": "vitest run --project storybook",
+    "test-storybook": "vitest run --project storybook --reporter verbose",
     "test-storybook-update-snapshots": "vitest run --project storybook --update",
-    "test-storybook-static": "npm run storybook-build && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006 --silent' 'wait-on tcp:127.0.0.1:6006 && npm run test-storybook'"
+    "test-storybook-static": "npm run storybook-build && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static -a 127.0.0.1 -p 6006 --silent' 'wait-on tcp:127.0.0.1:6006 && npm run test-storybook'"
   },
   "license": "MIT",
   "devDependencies": {
diff --git a/pkgs/clan-app/ui/vitest.config.ts b/pkgs/clan-app/ui/vitest.config.ts
index ea912c4a6..aa6cdd835 100644
--- a/pkgs/clan-app/ui/vitest.config.ts
+++ b/pkgs/clan-app/ui/vitest.config.ts
@@ -13,6 +13,8 @@ const dirname =
 
 import viteConfig from "./vite.config";
 
+const browser = process.env.BROWSER || "chromium";
+
 export default mergeConfig(
   viteConfig,
   defineConfig({
@@ -42,9 +44,10 @@ export default mergeConfig(
               provider: "playwright",
               instances: [
                 {
-                  browser: "webkit",
+                  browser: "chromium",
                   launch: {
-                    executablePath: process.env.PLAYWRIGHT_WEBKIT_EXECUTABLE,
+                    // we specify this explicitly to avoid the version matching that playwright tries to do
+                    executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,
                   },
                 },
               ],