Merge pull request #418 from objectstack-ai/copilot/fix-ci-build-and-test-another-one

Author: hotlong

packages/permissions/src/store.ts

@@ -36,7 +36,8 @@ export function createPermissionStore(config: {
   userRoles: string[];
   user?: { id: string; [key: string]: unknown };
 }): PermissionStore {
-  let { roles, permissions, userRoles, user } = config;
+  const { roles, user } = config;
+  let { permissions, userRoles } = config;
 
   return {
     check: (object, action, record) =>

packages/permissions/src/useFieldPermissions.ts

@@ -7,7 +7,6 @@
  */
 
 import { useMemo } from 'react';
-import type { FieldLevelPermission } from '@object-ui/types';
 import { usePermissions } from './usePermissions';
 
 /**

packages/permissions/src/usePermissions.ts

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useContext, useCallback } from 'react';
+import { useContext } from 'react';
 import type { PermissionAction, PermissionCheckResult } from '@object-ui/types';
 import { PermCtx, type PermissionContextValue } from './PermissionContext';
 

packages/plugin-dashboard/src/DashboardGridLayout.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { Responsive, WidthProvider, Layout as RGLLayout } from 'react-grid-layout';
+import { ResponsiveGridLayout, useContainerWidth, type LayoutItem as RGLLayout, type Layout, type ResponsiveLayouts } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
 import { Edit, GripVertical, Save, X } from 'lucide-react';
 import { SchemaRenderer } from '@object-ui/react';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
 const CHART_COLORS = [
   'hsl(var(--chart-1))',
   'hsl(var(--chart-2))',
@@ -29,6 +27,7 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   onLayoutChange,
   persistLayoutKey = 'dashboard-layout',
 }) => {
+  const { width, containerRef, mounted } = useContainerWidth();
   const [editMode, setEditMode] = React.useState(false);
   const [layouts, setLayouts] = React.useState<{ lg: RGLLayout[] }>(() => {
     // Try to load saved layout
@@ -56,9 +55,9 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   });
 
   const handleLayoutChange = React.useCallback(
-    (layout: RGLLayout[], allLayouts: { lg: RGLLayout[] }) => {
-      setLayouts(allLayouts);
-      onLayoutChange?.(layout);
+    (layout: Layout, allLayouts: ResponsiveLayouts) => {
+      setLayouts(allLayouts as { lg: RGLLayout[] });
+      onLayoutChange?.(layout as RGLLayout[]);
     },
     [onLayoutChange]
   );
@@ -122,7 +121,7 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   }, []);
 
   return (
-    <div className={cn("w-full", className)} data-testid="grid-layout">
+    <div ref={containerRef} className={cn("w-full", className)} data-testid="grid-layout">
       <div className="mb-4 flex items-center justify-between">
         <h2 className="text-2xl font-bold">{schema.title || 'Dashboard'}</h2>
         <div className="flex gap-2">
@@ -149,62 +148,64 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
         </div>
       </div>
 
-      <ResponsiveGridLayout
-        className="layout"
-        layouts={layouts}
-        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        rowHeight={60}
-        isDraggable={editMode}
-        isResizable={editMode}
-        onLayoutChange={handleLayoutChange}
-        draggableHandle=".drag-handle"
-      >
-        {schema.widgets?.map((widget, index) => {
-          const widgetId = widget.id || `widget-${index}`;
-          const componentSchema = getComponentSchema(widget);
-          const isSelfContained = (widget as any).type === 'metric';
+      {mounted && (
+        <ResponsiveGridLayout
+          className="layout"
+          width={width}
+          layouts={layouts}
+          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+          rowHeight={60}
+          dragConfig={{ enabled: editMode, handle: ".drag-handle" }}
+          resizeConfig={{ enabled: editMode }}
+          onLayoutChange={handleLayoutChange}
+        >
+          {schema.widgets?.map((widget, index) => {
+            const widgetId = widget.id || `widget-${index}`;
+            const componentSchema = getComponentSchema(widget);
+            const isSelfContained = (widget as any).type === 'metric';
 
-          return (
-            <div key={widgetId} className="h-full">
-              {isSelfContained ? (
-                <div className="h-full w-full relative">
-                  {editMode && (
-                    <div className="drag-handle absolute top-2 right-2 z-10 cursor-move p-1 bg-background/80 rounded border border-border">
-                      <GripVertical className="h-4 w-4" />
-                    </div>
-                  )}
-                  <SchemaRenderer schema={componentSchema} className="h-full w-full" />
-                </div>
-              ) : (
-                <Card className={cn(
-                  "h-full overflow-hidden border-border/50 shadow-sm transition-all",
-                  "bg-card/50 backdrop-blur-sm",
-                  editMode && "ring-2 ring-primary/20"
-                )}>
-                  {widget.title && (
-                    <CardHeader className="pb-2 border-b border-border/40 bg-muted/20 flex flex-row items-center justify-between">
-                      <CardTitle className="text-base font-medium tracking-tight truncate" title={widget.title}>
-                        {widget.title}
-                      </CardTitle>
-                      {editMode && (
-                        <div className="drag-handle cursor-move p-1 hover:bg-muted/40 rounded">
-                          <GripVertical className="h-4 w-4" />
-                        </div>
-                      )}
-                    </CardHeader>
-                  )}
-                  <CardContent className="p-0 h-full">
-                    <div className={cn("h-full w-full overflow-auto", !widget.title ? "p-4" : "p-4")}>
-                      <SchemaRenderer schema={componentSchema} />
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-          );
-        })}
-      </ResponsiveGridLayout>
+            return (
+              <div key={widgetId} className="h-full">
+                {isSelfContained ? (
+                  <div className="h-full w-full relative">
+                    {editMode && (
+                      <div className="drag-handle absolute top-2 right-2 z-10 cursor-move p-1 bg-background/80 rounded border border-border">
+                        <GripVertical className="h-4 w-4" />
+                      </div>
+                    )}
+                    <SchemaRenderer schema={componentSchema} className="h-full w-full" />
+                  </div>
+                ) : (
+                  <Card className={cn(
+                    "h-full overflow-hidden border-border/50 shadow-sm transition-all",
+                    "bg-card/50 backdrop-blur-sm",
+                    editMode && "ring-2 ring-primary/20"
+                  )}>
+                    {widget.title && (
+                      <CardHeader className="pb-2 border-b border-border/40 bg-muted/20 flex flex-row items-center justify-between">
+                        <CardTitle className="text-base font-medium tracking-tight truncate" title={widget.title}>
+                          {widget.title}
+                        </CardTitle>
+                        {editMode && (
+                          <div className="drag-handle cursor-move p-1 hover:bg-muted/40 rounded">
+                            <GripVertical className="h-4 w-4" />
+                          </div>
+                        )}
+                      </CardHeader>
+                    )}
+                    <CardContent className="p-0 h-full">
+                      <div className={cn("h-full w-full overflow-auto p-4")}>
+                        <SchemaRenderer schema={componentSchema} />
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            );
+          })}
+        </ResponsiveGridLayout>
+      )}
     </div>
   );
 };

packages/plugin-designer/src/CollaborationProvider.tsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
 import type { CollaborationConfig, CollaborationPresence, CollaborationOperation } from '@object-ui/types';
 
 export interface CollaborationContextValue {
@@ -48,31 +48,20 @@ export function CollaborationProvider({
   onOperation,
   children,
 }: CollaborationProviderProps) {
-  const [users, setUsers] = useState<CollaborationPresence[]>([]);
-  const [isConnected, setIsConnected] = useState(false);
-
-  // Add current user to presence list
-  useEffect(() => {
-    if (!config.enabled || !user) return;
-
-    const currentUser: CollaborationPresence = {
+  const users = useMemo<CollaborationPresence[]>(() => {
+    if (!config.enabled || !user) return [];
+    return [{
       userId: user.id,
       userName: user.name,
       avatar: user.avatar,
       color: generateColor(user.id),
-      status: 'active',
+      status: 'active' as const,
       lastActivity: new Date().toISOString(),
-    };
-
-    setUsers([currentUser]);
-    setIsConnected(true);
-
-    return () => {
-      setIsConnected(false);
-      setUsers([]);
-    };
+    }];
   }, [config.enabled, user]);
 
+  const isConnected = config.enabled && !!user;
+
   const sendOperation = useCallback(
     (operation: Omit<CollaborationOperation, 'id' | 'timestamp' | 'version'>) => {
       if (!isConnected || !user) return;

packages/plugin-designer/src/PageDesigner.tsx

@@ -57,7 +57,7 @@ export function PageDesigner({
 }: PageDesignerProps) {
   const [components, setComponents] = useState<DesignerComponent[]>(initialComponents);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [zoom, setZoom] = useState(canvas.zoom ?? 1);
+  const [zoom, _setZoom] = useState(canvas.zoom ?? 1);
 
   const selectedComponent = useMemo(
     () => components.find((c) => c.id === selectedId),

packages/plugin-designer/src/ProcessDesigner.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState, useCallback } from 'react';
 import type { BPMNNode, BPMNEdge, BPMNLane, DesignerCanvasConfig } from '@object-ui/types';
-import { Play, Square, Diamond, Plus, Trash2, GitBranch } from 'lucide-react';
+import { Play, Square, Diamond, Trash2, GitBranch } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';