From c638df8ed9eeae4a42ca3a81d9aa8c752710455b Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Thu, 2 Oct 2025 11:06:51 +0100
Subject: [PATCH] wip(storybook): run storybook in nix derivation

---
 pkgs/clan-app/ui.nix                          |   2 -
 .../src/components/Button/Button.stories.tsx  |   2 +-
 .../ui/src/components/Modal/Modal.stories.tsx |  98 ++++---
 .../components/Sidebar/Sidebar.stories.tsx    |   2 -
 .../Sidebar/SidebarPane.stories.tsx           | 259 +++++++++---------
 .../components/Toolbar/Toolbar.stories.tsx    |  75 ++---
 .../components/Tooltip/Tooltip.stories.tsx    |  24 +-
 .../InstallMachine/steps/createInstaller.tsx  |   1 -
 8 files changed, 232 insertions(+), 231 deletions(-)

diff --git a/pkgs/clan-app/ui.nix b/pkgs/clan-app/ui.nix
index f2fc535ed..d121f1dd6 100644
--- a/pkgs/clan-app/ui.nix
+++ b/pkgs/clan-app/ui.nix
@@ -6,8 +6,6 @@
   fonts,
   ps,
   playwright-driver,
-  wget,
-  strace,
 }:
 buildNpmPackage (finalAttrs: {
   pname = "clan-app-ui";
diff --git a/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx b/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx
index a16f03467..234ead19a 100644
--- a/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx
+++ b/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;
diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx
index d83c3abcb..b39510639 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx
@@ -11,6 +11,59 @@ import { Button } from "../Button/Button";
 const meta: Meta<ModalProps> = {
   title: "Components/Modal",
   component: Modal,
+  render: (args: ModalProps) => (
+    <Modal
+      {...args}
+      children={
+        <form class="flex flex-col gap-5">
+          <Fieldset legend="General">
+            {(props: FieldsetFieldProps) => (
+              <>
+                <TextInput
+                  {...props}
+                  label="First Name"
+                  size="s"
+                  required={true}
+                  input={{ placeholder: "Ron" }}
+                />
+                <TextInput
+                  {...props}
+                  label="Last Name"
+                  size="s"
+                  required={true}
+                  input={{ placeholder: "Burgundy" }}
+                />
+                <TextArea
+                  {...props}
+                  label="Bio"
+                  size="s"
+                  input={{
+                    placeholder: "Tell us a bit about yourself",
+                    rows: 8,
+                  }}
+                />
+                <Checkbox
+                  {...props}
+                  size="s"
+                  label="Accept Terms"
+                  required={true}
+                />
+              </>
+            )}
+          </Fieldset>
+
+          <div class="flex w-full items-center justify-end gap-4">
+            <Button size="s" hierarchy="secondary" onClick={close}>
+              Cancel
+            </Button>
+            <Button size="s" type="submit" hierarchy="primary" onClick={close}>
+              Save
+            </Button>
+          </div>
+        </form>
+      }
+    />
+  ),
 };
 
 export default meta;
@@ -21,50 +74,5 @@ export const Default: Story = {
   args: {
     title: "Example Modal",
     onClose: fn(),
-    children: (
-      <form class="flex flex-col gap-5">
-        <Fieldset legend="General">
-          {(props: FieldsetFieldProps) => (
-            <>
-              <TextInput
-                {...props}
-                label="First Name"
-                size="s"
-                required={true}
-                input={{ placeholder: "Ron" }}
-              />
-              <TextInput
-                {...props}
-                label="Last Name"
-                size="s"
-                required={true}
-                input={{ placeholder: "Burgundy" }}
-              />
-              <TextArea
-                {...props}
-                label="Bio"
-                size="s"
-                input={{ placeholder: "Tell us a bit about yourself", rows: 8 }}
-              />
-              <Checkbox
-                {...props}
-                size="s"
-                label="Accept Terms"
-                required={true}
-              />
-            </>
-          )}
-        </Fieldset>
-
-        <div class="flex w-full items-center justify-end gap-4">
-          <Button size="s" hierarchy="secondary" onClick={close}>
-            Cancel
-          </Button>
-          <Button size="s" type="submit" hierarchy="primary" onClick={close}>
-            Save
-          </Button>
-        </div>
-      </form>
-    ),
   },
 };
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx
index 568ef3594..8db303f48 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx
+++ b/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,
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx
index 8c0b638c1..b198ae6a9 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx
+++ b/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,133 +48,140 @@ export const Default: Story = {
     onClose: () => {
       console.log("closing");
     },
-    children: (
-      <>
-        <SidebarSectionForm
-          title="General"
-          schema={v.object({
-            firstName: v.pipe(
-              v.string(),
-              v.nonEmpty("Please enter a first name."),
-            ),
-            lastName: v.pipe(
-              v.string(),
-              v.nonEmpty("Please enter a last name."),
-            ),
-            bio: v.string(),
-            shareProfile: v.optional(v.boolean()),
-          })}
-          initialValues={profiles.ron}
-          onSubmit={async () => {
-            console.log("saving general");
-          }}
-        >
-          {({ editing, Field }) => (
-            <div class="flex flex-col gap-3">
-              <Field name="firstName">
-                {(field, input) => (
-                  <TextInput
-                    {...field}
-                    size="s"
-                    inverted
-                    label="First Name"
-                    value={field.value}
-                    required
-                    readOnly={!editing}
-                    orientation="horizontal"
-                    input={input}
-                  />
-                )}
-              </Field>
-              <Divider />
-              <Field name="lastName">
-                {(field, input) => (
-                  <TextInput
-                    {...field}
-                    size="s"
-                    inverted
-                    label="Last Name"
-                    value={field.value}
-                    required
-                    readOnly={!editing}
-                    orientation="horizontal"
-                    input={input}
-                  />
-                )}
-              </Field>
-              <Divider />
-              <Field name="bio">
-                {(field, input) => (
-                  <TextArea
-                    {...field}
-                    value={field.value}
-                    size="s"
-                    label="Bio"
-                    inverted
-                    readOnly={!editing}
-                    orientation="horizontal"
-                    input={{ ...input, rows: 4 }}
-                  />
-                )}
-              </Field>
-              <Field name="shareProfile" type="boolean">
-                {(field, input) => {
-                  return (
-                    <Checkbox
-                      {...splitProps(field, ["value"])[1]}
-                      defaultChecked={field.value}
+  },
+  // 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"
+            schema={v.object({
+              firstName: v.pipe(
+                v.string(),
+                v.nonEmpty("Please enter a first name."),
+              ),
+              lastName: v.pipe(
+                v.string(),
+                v.nonEmpty("Please enter a last name."),
+              ),
+              bio: v.string(),
+              shareProfile: v.optional(v.boolean()),
+            })}
+            initialValues={profiles.ron}
+            onSubmit={async () => {
+              console.log("saving general");
+            }}
+          >
+            {({ editing, Field }) => (
+              <div class="flex flex-col gap-3">
+                <Field name="firstName">
+                  {(field, input) => (
+                    <TextInput
+                      {...field}
                       size="s"
-                      label="Share"
                       inverted
+                      label="First Name"
+                      value={field.value}
+                      required
                       readOnly={!editing}
                       orientation="horizontal"
                       input={input}
                     />
-                  );
-                }}
-              </Field>
-            </div>
-          )}
-        </SidebarSectionForm>
-        <SidebarSectionForm
-          title="Tags"
-          schema={v.object({
-            tags: v.pipe(v.array(v.string()), v.nonEmpty()),
-          })}
-          initialValues={profiles.ron}
-          onSubmit={async (values) => {
-            console.log("saving tags", values);
-          }}
-        >
-          {({ editing, Field, formStore }) => (
-            <Field name="tags" type="string[]">
-              {(field, props) => (
-                <MachineTags
-                  {...splitProps(field, ["value"])[1]}
-                  size="s"
-                  onChange={(newVal) => {
-                    // Workaround for now, until we manage to use native events
-                    setValue(formStore, field.name, newVal);
+                  )}
+                </Field>
+                <Divider />
+                <Field name="lastName">
+                  {(field, input) => (
+                    <TextInput
+                      {...field}
+                      size="s"
+                      inverted
+                      label="Last Name"
+                      value={field.value}
+                      required
+                      readOnly={!editing}
+                      orientation="horizontal"
+                      input={input}
+                    />
+                  )}
+                </Field>
+                <Divider />
+                <Field name="bio">
+                  {(field, input) => (
+                    <TextArea
+                      {...field}
+                      value={field.value}
+                      size="s"
+                      label="Bio"
+                      inverted
+                      readOnly={!editing}
+                      orientation="horizontal"
+                      input={{ ...input, rows: 4 }}
+                    />
+                  )}
+                </Field>
+                <Field name="shareProfile" type="boolean">
+                  {(field, input) => {
+                    return (
+                      <Checkbox
+                        {...splitProps(field, ["value"])[1]}
+                        defaultChecked={field.value}
+                        size="s"
+                        label="Share"
+                        inverted
+                        readOnly={!editing}
+                        orientation="horizontal"
+                        input={input}
+                      />
+                    );
                   }}
-                  inverted
-                  required
-                  readOnly={!editing}
-                  orientation="horizontal"
-                  defaultValue={field.value}
-                />
-              )}
-            </Field>
-          )}
-        </SidebarSectionForm>
-        <SidebarSection title="Simple">
-          <Typography tag="h2" hierarchy="title" size="m" inverted>
-            Static Content
-          </Typography>
-          <Typography hierarchy="label" size="s" inverted>
-            This is a non-form section with static content
-          </Typography>
-        </SidebarSection>
-      </>
-    ),
-  },
+                </Field>
+              </div>
+            )}
+          </SidebarSectionForm>
+          <SidebarSectionForm
+            title="Tags"
+            schema={v.object({
+              tags: v.pipe(v.array(v.string()), v.nonEmpty()),
+            })}
+            initialValues={profiles.ron}
+            onSubmit={async (values) => {
+              console.log("saving tags", values);
+            }}
+          >
+            {({ editing, Field, formStore }) => (
+              <Field name="tags" type="string[]">
+                {(field, props) => (
+                  <MachineTags
+                    {...splitProps(field, ["value"])[1]}
+                    size="s"
+                    onChange={(newVal) => {
+                      // Workaround for now, until we manage to use native events
+                      setValue(formStore, field.name, newVal);
+                    }}
+                    inverted
+                    required
+                    readOnly={!editing}
+                    orientation="horizontal"
+                    defaultValue={field.value}
+                  />
+                )}
+              </Field>
+            )}
+          </SidebarSectionForm>
+          <SidebarSection title="Simple">
+            <Typography tag="h2" hierarchy="title" size="m" inverted>
+              Static Content
+            </Typography>
+            <Typography hierarchy="label" size="s" inverted>
+              This is a non-form section with static content
+            </Typography>
+          </SidebarSection>
+        </>
+      }
+    />
+  ),
 };
diff --git a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx b/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx
index 9c7dd47fd..1f11be750 100644
--- a/pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx
+++ b/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,61 +12,35 @@ 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} />
+        <Toolbar
+          {...args}
+          children={
+            <>
+              <ToolbarButton name="select" icon="Cursor" description="Select" />
+
+              <ToolbarButton
+                name="new-machine"
+                icon="NewMachine"
+                description="Select"
+              />
+
+              <ToolbarButton
+                name="modules"
+                icon="Modules"
+                selected={true}
+                description="Select"
+              />
+
+              <ToolbarButton name="ai" icon="AI" description="Select" />
+            </>
+          }
+        />
       </div>
     </div>
   ),
-  args: {
-    children: (
-      <>
-        <ToolbarButton name="select" icon="Cursor" description="Select" />
-
-        <ToolbarButton
-          name="new-machine"
-          icon="NewMachine"
-          description="Select"
-        />
-
-        <ToolbarButton
-          name="modules"
-          icon="Modules"
-          selected={true}
-          description="Select"
-        />
-
-        <ToolbarButton name="ai" icon="AI" description="Select" />
-      </>
-    ),
-  },
 };
diff --git a/pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx b/pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx
index 98fbf9a22..027ed7f52 100644
--- a/pkgs/clan-app/ui/src/components/Tooltip/Tooltip.stories.tsx
+++ b/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>
-    ),
   },
 };
 
diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx
index 88971563e..5b9cd01b0 100644
--- a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/createInstaller.tsx
+++ b/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";