wip(storybook): run storybook in nix derivation

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")
     '');
 }

pkgs/clan-app/ui.nix

@@ -4,8 +4,10 @@
   importNpmLock,
   clan-ts-api,
   fonts,
+  ps,
+  playwright-driver,
 }:
-buildNpmPackage (_finalAttrs: {
+buildNpmPackage (finalAttrs: {
   pname = "clan-app-ui";
   version = "0.0.1";
   nodejs = nodejs_22;
@@ -32,36 +34,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
+      '';
+    };
+  };
 })

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": {

pkgs/clan-app/ui/src/components/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { Button, ButtonProps } from "./Button";
 import { Component } from "solid-js";
-import { expect, fn, waitFor, within } from "storybook/test";
+import { expect, fn, within } from "storybook/test";
 import { StoryContext } from "@kachurun/storybook-solid-vite";
 
 const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;

pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx

@@ -11,17 +11,10 @@ import { Button } from "../Button/Button";
 const meta: Meta<ModalProps> = {
   title: "Components/Modal",
   component: Modal,
-};
-
-export default meta;
-
-type Story = StoryObj<TagProps>;
-
-export const Default: Story = {
-  args: {
-    title: "Example Modal",
-    onClose: fn(),
-    children: (
+  render: (args: ModalProps) => (
+    <Modal
+      {...args}
+      children={
         <form class="flex flex-col gap-5">
           <Fieldset legend="General">
             {(props: FieldsetFieldProps) => (
@@ -44,7 +37,10 @@ export const Default: Story = {
                   {...props}
                   label="Bio"
                   size="s"
-                input={{ placeholder: "Tell us a bit about yourself", rows: 8 }}
+                  input={{
+                    placeholder: "Tell us a bit about yourself",
+                    rows: 8,
+                  }}
                 />
                 <Checkbox
                   {...props}
@@ -65,6 +61,18 @@ export const Default: Story = {
             </Button>
           </div>
         </form>
+      }
+    />
   ),
+};
+
+export default meta;
+
+type Story = StoryObj<TagProps>;
+
+export const Default: Story = {
+  args: {
+    title: "Example Modal",
+    onClose: fn(),
   },
 };

pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx

@@ -7,11 +7,9 @@ import {
 } from "@solidjs/router";
 import { Sidebar } from "@/src/components/Sidebar/Sidebar";
 import { Suspense } from "solid-js";
-import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 import { addClanURI, resetStore } from "@/src/stores/clan";
 import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
 import { encodeBase64 } from "@/src/hooks/clan";
-import { ApiClientProvider } from "@/src/hooks/ApiClient";
 import {
   ApiCall,
   OperationArgs,

pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx

@@ -14,6 +14,7 @@ import { splitProps } from "solid-js";
 import { Typography } from "@/src/components/Typography/Typography";
 import { MachineTags } from "@/src/components/Form/MachineTags";
 import { setValue } from "@modular-forms/solid";
+import { StoryContext } from "@kachurun/storybook-solid-vite";
 
 type Story = StoryObj<SidebarPaneProps>;
 
@@ -30,6 +31,13 @@ const profiles = {
 const meta: Meta<SidebarPaneProps> = {
   title: "Components/SidebarPane",
   component: SidebarPane,
+  decorators: [
+    (
+        Story: StoryObj<SidebarPaneProps>,
+        context: StoryContext<SidebarPaneProps>,
+      ) =>
+      () => <Story {...context.args} />,
+  ],
 };
 
 export default meta;
@@ -40,7 +48,13 @@ export const Default: Story = {
     onClose: () => {
       console.log("closing");
     },
-    children: (
+  },
+  // We have to provide children within a custom render function to ensure we aren't creating any reactivity outside the
+  // solid-js scope.
+  render: (args: SidebarPaneProps) => (
+    <SidebarPane
+      {...args}
+      children={
         <>
           <SidebarSectionForm
             title="General"
@@ -167,6 +181,7 @@ export const Default: Story = {
             </Typography>
           </SidebarSection>
         </>
+      }
+    />
   ),
-  },
 };

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { Toolbar, ToolbarProps } from "@/src/components/Toolbar/Toolbar";
-import { Divider } from "@/src/components/Divider/Divider";
 import { ToolbarButton } from "./ToolbarButton";
 
 const meta: Meta<ToolbarProps> = {
@@ -13,43 +12,14 @@ export default meta;
 type Story = StoryObj<ToolbarProps>;
 
 export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <ToolbarButton
-          name="select"
-          icon="Cursor"
-          description="Select my thing"
-        />
-        <ToolbarButton
-          name="new-machine"
-          icon="NewMachine"
-          description="Select this thing"
-        />
-        <Divider orientation="vertical" />
-        <ToolbarButton
-          name="modules"
-          icon="Modules"
-          selected={true}
-          description="Add service"
-        />
-        <ToolbarButton name="ai" icon="AI" description="Call your AI Manager" />
-      </>
-    ),
-  },
-};
-
-export const WithTooltip: Story = {
+  // We have to specify children inside a render function to avoid issues with reactivity outside a solid-js context.
   // @ts-expect-error: args in storybook is not typed correctly. This is a storybook issue.
   render: (args) => (
     <div class="flex h-[80vh]">
       <div class="mt-auto">
-        <Toolbar {...args} />
-      </div>
-    </div>
-  ),
-  args: {
-    children: (
+        <Toolbar
+          {...args}
+          children={
             <>
               <ToolbarButton name="select" icon="Cursor" description="Select" />
 
@@ -68,6 +38,9 @@ export const WithTooltip: Story = {
 
               <ToolbarButton name="ai" icon="AI" description="Select" />
             </>
+          }
+        />
+      </div>
+    </div>
   ),
-  },
 };

pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { Tooltip, TooltipProps } from "@/src/components/Tooltip/Tooltip";
 import { Typography } from "@/src/components/Typography/Typography";
-import { Button } from "@/src/components/Button/Button";
 
 const meta: Meta<TooltipProps> = {
   title: "Components/Tooltip",
@@ -13,6 +12,23 @@ const meta: Meta<TooltipProps> = {
       </div>
     ),
   ],
+  render: (args: TooltipProps) => (
+    <div class="p-16">
+      <Tooltip
+        {...args}
+        children={
+          <Typography
+            hierarchy="body"
+            size="xs"
+            inverted={true}
+            weight="medium"
+          >
+            Your Clan is being created
+          </Typography>
+        }
+      />
+    </div>
+  ),
 };
 
 export default meta;
@@ -23,12 +39,6 @@ export const Default: Story = {
   args: {
     placement: "top",
     inverted: false,
-    trigger: <Button hierarchy="primary">Trigger</Button>,
-    children: (
-      <Typography hierarchy="body" size="xs" inverted={true} weight="medium">
-        Your Clan is being created
-      </Typography>
-    ),
   },
 };
 

pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx

@@ -1,7 +1,6 @@
 import { getStepStore, useStepper } from "@/src/hooks/stepper";
 import {
   createForm,
-  getError,
   SubmitHandler,
   valiForm,
 } from "@modular-forms/solid";

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,
                   },
                 },
               ],