wip(storybook): run storybook in nix derivation

pkgs/clan-app/ui.nix

@@ -6,8 +6,6 @@
   fonts,
   ps,
   playwright-driver,
-  wget,
-  strace,
 }:
 buildNpmPackage (finalAttrs: {
   pname = "clan-app-ui";

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,
-};
+  render: (args: ModalProps) => (
-
+    <Modal
-export default meta;
+      {...args}
-
+      children={
-type Story = StoryObj<TagProps>;
-
-export const Default: Story = {
-  args: {
-    title: "Example Modal",
-    onClose: fn(),
-    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: {
+  // We have to specify children inside a render function to avoid issues with reactivity outside a solid-js context.
-    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 = {
   // @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
-      </div>
+          {...args}
-    </div>
+          children={
-  ),
-  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";