fix: resolve all TypeScript errors in web app

apps/web/src/components/widgets/WidgetGrid.tsx

@@ -5,13 +5,17 @@
 
 import { useCallback, useMemo } from "react";
 import GridLayout from "react-grid-layout";
-import type { Layout } from "react-grid-layout";
+import type { Layout, LayoutItem } from "react-grid-layout";
 import type { WidgetPlacement } from "@mosaic/shared";
-import { cn } from "@mosaic/ui/lib/utils";
 import { getWidgetByName } from "./WidgetRegistry";
 import { BaseWidget } from "./BaseWidget";
 import "react-grid-layout/css/styles.css";
 
+// Simple classnames utility
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
 export interface WidgetGridProps {
   layout: WidgetPlacement[];
   onLayoutChange: (layout: WidgetPlacement[]) => void;
@@ -28,41 +32,51 @@ export function WidgetGrid({
   className,
 }: WidgetGridProps) {
   // Convert WidgetPlacement to react-grid-layout Layout format
-  const gridLayout: Layout[] = useMemo(
+  const gridLayout: Layout = useMemo(
     () =>
-      layout.map((item) => ({
-        i: item.i,
-        x: item.x,
-        y: item.y,
-        w: item.w,
-        h: item.h,
-        minW: item.minW,
-        maxW: item.maxW,
-        minH: item.minH,
-        maxH: item.maxH,
-        static: !isEditing || item.static,
-        isDraggable: isEditing && (item.isDraggable !== false),
-        isResizable: isEditing && (item.isResizable !== false),
-      })),
+      layout.map((item): LayoutItem => {
+        const layoutItem: LayoutItem = {
+          i: item.i,
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+          static: !isEditing || (item.static ?? false),
+          isDraggable: isEditing && (item.isDraggable !== false),
+          isResizable: isEditing && (item.isResizable !== false),
+        };
+        
+        if (item.minW !== undefined) layoutItem.minW = item.minW;
+        if (item.maxW !== undefined) layoutItem.maxW = item.maxW;
+        if (item.minH !== undefined) layoutItem.minH = item.minH;
+        if (item.maxH !== undefined) layoutItem.maxH = item.maxH;
+        
+        return layoutItem;
+      }),
     [layout, isEditing]
   );
 
   const handleLayoutChange = useCallback(
-    (newLayout: Layout[]) => {
-      const updatedLayout: WidgetPlacement[] = newLayout.map((item) => ({
-        i: item.i,
-        x: item.x,
-        y: item.y,
-        w: item.w,
-        h: item.h,
-        minW: item.minW,
-        maxW: item.maxW,
-        minH: item.minH,
-        maxH: item.maxH,
-        static: item.static,
-        isDraggable: item.isDraggable,
-        isResizable: item.isResizable,
-      }));
+    (newLayout: Layout) => {
+      const updatedLayout: WidgetPlacement[] = newLayout.map((item): WidgetPlacement => {
+        const placement: WidgetPlacement = {
+          i: item.i,
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+        };
+        
+        if (item.minW !== undefined) placement.minW = item.minW;
+        if (item.maxW !== undefined) placement.maxW = item.maxW;
+        if (item.minH !== undefined) placement.minH = item.minH;
+        if (item.maxH !== undefined) placement.maxH = item.maxH;
+        if (item.static !== undefined) placement.static = item.static;
+        if (item.isDraggable !== undefined) placement.isDraggable = item.isDraggable;
+        if (item.isResizable !== undefined) placement.isResizable = item.isResizable;
+        
+        return placement;
+      });
       onLayoutChange(updatedLayout);
     },
     [onLayoutChange]
@@ -97,24 +111,30 @@ export function WidgetGrid({
         className="layout"
         layout={gridLayout}
         onLayoutChange={handleLayoutChange}
-        cols={12}
-        rowHeight={100}
         width={1200}
-        isDraggable={isEditing}
-        isResizable={isEditing}
-        compactType="vertical"
-        preventCollision={false}
+        gridConfig={{
+          cols: 12,
+          rowHeight: 100,
+        }}
+        dragConfig={{
+          enabled: isEditing,
+        }}
+        resizeConfig={{
+          enabled: isEditing,
+        }}
         data-testid="grid-layout"
       >
         {layout.map((item) => {
           // Extract widget type from widget ID (format: "WidgetType-uuid")
-          const widgetType = item.i.split("-")[0];
+          const widgetType = item.i.split("-")[0]!;
           const widgetDef = getWidgetByName(widgetType);
 
           if (!widgetDef) {
             return (
               <div key={item.i} data-testid={`widget-${item.i}`}>
-                <BaseWidget id={item.i} title="Unknown Widget" error="Widget not found" />
+                <BaseWidget id={item.i} title="Unknown Widget" error="Widget not found">
+                  <div />
+                </BaseWidget>
               </div>
             );
           }
@@ -127,12 +147,9 @@ export function WidgetGrid({
                 id={item.i}
                 title={widgetDef.displayName}
                 description={widgetDef.description}
-                onEdit={isEditing ? undefined : undefined} // TODO: Implement edit
-                onRemove={
-                  isEditing && onRemoveWidget
-                    ? () => handleRemoveWidget(item.i)
-                    : undefined
-                }
+                {...(isEditing && onRemoveWidget && {
+                  onRemove: () => handleRemoveWidget(item.i),
+                })}
               >
                 <WidgetComponent id={item.i} />
               </BaseWidget>