Fix Storybook for TileLayout (#81)

Fix typing of memoized TileLayout component, fix broken Vite config,
upgrade Storybook to latest.

frontend/faraday/lib/TileLayout.stories.tsx

@@ -8,7 +8,7 @@ import { TileLayout } from "./TileLayout.jsx";
 import { useState } from "react";
 import { newLayoutTreeStateAtom, useLayoutTreeStateReducerAtom } from "./layoutAtom.js";
 import { newLayoutNode } from "./layoutNode.js";
-import { LayoutTreeActionType, LayoutTreeInsertNodeAction } from "./model.js";
+import { LayoutTreeActionType, LayoutTreeInsertNodeAction, WritableLayoutTreeStateAtom } from "./model.js";
 import "./tilelayout.stories.less";
 import { FlexDirection } from "./utils.js";
 
@@ -26,17 +26,20 @@ const meta = {
                 name: "Hello world!",
             })
         ),
-        renderContent: (
-            data: TestData,
-            _ready: boolean,
-            _onClose: () => void,
-            dragHandleRef: React.RefObject<HTMLDivElement>
-        ) => (
-            <div ref={dragHandleRef} className="test-content" style={{ width: "100%", height: "100%" }}>
-                {renderTestData(data)}
-            </div>
-        ),
-        renderPreview: renderTestData,
+        contents: {
+            renderContent: (
+                data: TestData,
+                _ready: boolean,
+                _onClose: () => void,
+                dragHandleRef: React.RefObject<HTMLDivElement>
+            ) => (
+                <div ref={dragHandleRef} className="test-content" style={{ width: "100%", height: "100%" }}>
+                    {renderTestData(data)}
+                </div>
+            ),
+            renderPreview: renderTestData,
+            tabId: "",
+        },
     },
     component: TileLayout<TestData>,
     // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
@@ -114,7 +117,10 @@ export const AddNode: Story = {
                 <div>
                     <button onClick={dispatchAddNode}>Add node</button>
                 </div>
-                <TileLayout layoutTreeStateAtom={addNodeAtom} renderContent={renderTestData} />
+                <TileLayout
+                    layoutTreeStateAtom={addNodeAtom as WritableLayoutTreeStateAtom<TestData>}
+                    contents={meta.args.contents}
+                />
             </div>
         );
     },

frontend/faraday/lib/TileLayout.tsx

@@ -63,7 +63,7 @@ export interface TileLayoutContents<T> {
     /**
      * tabId this TileLayout is associated with
      */
-    tabId: string;
+    tabId?: string;
 }
 
 export interface TileLayoutProps<T> {
@@ -87,7 +87,7 @@ export interface TileLayoutProps<T> {
 const DragPreviewWidth = 300;
 const DragPreviewHeight = 300;
 
-export const TileLayout = React.memo(<T,>({ layoutTreeStateAtom, contents, getCursorPoint }: TileLayoutProps<T>) => {
+function TileLayoutComponent<T>({ layoutTreeStateAtom, contents, getCursorPoint }: TileLayoutProps<T>) {
     const overlayContainerRef = useRef<HTMLDivElement>(null);
     const displayContainerRef = useRef<HTMLDivElement>(null);
 
@@ -293,7 +293,9 @@ export const TileLayout = React.memo(<T,>({ layoutTreeStateAtom, contents, getCu
             </div>
         </Suspense>
     );
-});
+}
+
+export const TileLayout = React.memo(TileLayoutComponent) as typeof TileLayoutComponent;
 
 interface DisplayNodesWrapperProps<T> {
     /**