@object-ui/plugin-map 0.3.1 → 2.0.0

package/dist/src/ObjectMap.d.ts

@@ -9,4 +9,5 @@ export interface ObjectMapProps {
     onDelete?: (record: any) => void;
 }
 export declare const ObjectMap: React.FC<ObjectMapProps>;
+export default ObjectMap;
 //# sourceMappingURL=ObjectMap.d.ts.map

package/dist/src/ObjectMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectMap.d.ts","sourceRoot":"","sources":["../../src/ObjectMap.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAE/E,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAgJD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2N9C,CAAC"}
+{"version":3,"file":"ObjectMap.d.ts","sourceRoot":"","sources":["../../src/ObjectMap.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAI/E,OAAO,kCAAkC,CAAC;AAY1C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAsKD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsQ9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/src/index.d.ts

@@ -1,4 +1,6 @@
+import { default as React } from 'react';
 import { ObjectMap, ObjectMapProps } from './ObjectMap';
 export { ObjectMap };
 export type { ObjectMapProps };
+export declare const ObjectMapRenderer: React.FC<any>;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC;AAG/B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAG3C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-map",
-  "version": "0.3.1",
+  "version": "2.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Map visualization plugin for Object UI",
@@ -24,20 +24,24 @@
     }
   },
   "dependencies": {
+    "@objectstack/spec": "^2.0.7",
     "lucide-react": "^0.563.0",
-    "@object-ui/components": "0.3.1",
-    "@object-ui/core": "0.3.1",
-    "@object-ui/react": "0.3.1",
-    "@object-ui/types": "0.3.1"
+    "maplibre-gl": "^5.17.0",
+    "react-map-gl": "^8.1.0",
+    "zod": "^4.3.6",
+    "@object-ui/components": "2.0.0",
+    "@object-ui/core": "2.0.0",
+    "@object-ui/react": "2.0.0",
+    "@object-ui/types": "2.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^5.1.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/ObjectMap.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ObjectMap } from './ObjectMap';
+import { DataSource } from '@object-ui/types';
+
+// Mock react-map-gl/maplibre components to check they are receiving the right props/children
+// without relying on real WebGL canvas rendering.
+vi.mock('react-map-gl/maplibre', () => ({
+  default: ({ children }: any) => <div aria-label="Map">{children}</div>,
+  Map: ({ children }: any) => <div aria-label="Map">{children}</div>,
+  NavigationControl: () => <div data-testid="nav-control" />,
+  Marker: ({ children, longitude, latitude, onClick }: any) => (
+      <div 
+        data-testid="map-marker" 
+        data-lat={latitude} 
+        data-lng={longitude}
+        onClick={onClick}
+      >
+        {children}
+      </div>
+  ),
+  Popup: ({ children }: any) => <div data-testid="map-popup">{children}</div>,
+}));
+
+const mockData = [
+  { id: '1', name: 'Loc 1', latitude: 40, longitude: -74 },
+  { id: '2', name: 'Loc 2', latitude: 41, longitude: -75 },
+];
+
+const mockDataSource: DataSource = {
+  find: vi.fn(),
+  findOne: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+  getObjectSchema: vi.fn(),
+};
+
+describe('ObjectMap', () => {
+    it('renders with static value provider', async () => {
+        const schema: any = {
+            type: 'map',
+            map: {
+                latitudeField: 'latitude',
+                longitudeField: 'longitude',
+                titleField: 'name'
+            },
+            data: {
+                provider: 'value',
+                items: mockData
+            }
+        };
+
+        render(<ObjectMap schema={schema} />);
+        
+        // Wait for loading to finish
+        await waitFor(() => {
+            expect(screen.queryByText('Loading map...')).toBeNull();
+        });
+
+        // Check if map is rendered
+        expect(screen.getByLabelText('Map')).toBeDefined();
+        
+        // Check if markers are rendered using testid from our mock
+        await waitFor(() => {
+            const markers = screen.getAllByTestId('map-marker');
+            expect(markers).toHaveLength(2);
+            // Verify coordinates of first marker
+            expect(markers[0]).toHaveAttribute('data-lat', '40');
+            expect(markers[0]).toHaveAttribute('data-lng', '-74');
+        });
+
+        // Check content inside marker (the emoji)
+        expect(screen.getAllByText('📍')).toHaveLength(2);
+    });
+
+    it('fetches data with object provider', async () => {
+        (mockDataSource.find as any).mockResolvedValue({ data: mockData });
+        
+        const schema: any = {
+            type: 'map',
+            map: {
+                latitudeField: 'latitude',
+                longitudeField: 'longitude',
+                titleField: 'name'
+            },
+            data: {
+                provider: 'object',
+                object: 'locations'
+            }
+        };
+
+        render(<ObjectMap schema={schema} dataSource={mockDataSource} />);
+
+        // Wait for loading to finish
+        await waitFor(() => {
+            expect(screen.queryByText('Loading map...')).toBeNull();
+        });
+        
+        // Verify dataSource.find was called
+        expect(mockDataSource.find).toHaveBeenCalledWith('locations', expect.anything());
+
+        // Check markers
+        await waitFor(() => {
+            const markers = screen.getAllByTestId('map-marker');
+            expect(markers).toHaveLength(2);
+        });
+    });
+});

package/src/ObjectMap.tsx

@@ -16,16 +16,26 @@
  * Features:
  * - Interactive map with markers
  * - Location-based data visualization
- * - Marker clustering (when many points)
  * - Popup/tooltip on marker click
  * - Works with object/api/value data providers
- * 
- * Note: This is a basic implementation. For production use, integrate with a
- * proper mapping library like Mapbox, Leaflet, or Google Maps.
  */
 
 import React, { useEffect, useState, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData } from '@object-ui/types';
+import { z } from 'zod';
+import Map, { NavigationControl, Marker, Popup } from 'react-map-gl/maplibre';
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+const MapConfigSchema = z.object({
+  latitudeField: z.string().optional(),
+  longitudeField: z.string().optional(),
+  locationField: z.string().optional(),
+  titleField: z.string().optional(),
+  descriptionField: z.string().optional(),
+  zoom: z.number().optional(),
+  center: z.tuple([z.number(), z.number()]).optional(),
+});
 
 export interface ObjectMapProps {
   schema: ObjectGridSchema;
@@ -108,15 +118,37 @@ function convertSortToQueryParams(sort: string | any[] | undefined): Record<stri
 /**
  * Helper to get map configuration from schema
  */
-function getMapConfig(schema: ObjectGridSchema): MapConfig {
+function getMapConfig(schema: ObjectGridSchema | any): MapConfig {
+  // 1. Check top-level properties (ObjectMapSchema style)
+  if (schema.locationField || schema.latitudeField) {
+      return {
+          locationField: schema.locationField,
+          latitudeField: schema.latitudeField,
+          longitudeField: schema.longitudeField,
+          titleField: schema.titleField || 'name',
+          descriptionField: schema.descriptionField,
+          zoom: schema.zoom,
+          center: schema.center
+      };
+  }
+
+  let config: MapConfig | null = null;
   // Check if schema has map configuration
   if (schema.filter && typeof schema.filter === 'object' && 'map' in schema.filter) {
-    return (schema.filter as any).map as MapConfig;
+    config = (schema.filter as any).map as MapConfig;
   }
   
   // For backward compatibility, check if schema has map config at root
-  if ((schema as any).map) {
-    return (schema as any).map as MapConfig;
+  else if ((schema as any).map) {
+    config = (schema as any).map as MapConfig;
+  }
+
+  if (config) {
+     const result = MapConfigSchema.safeParse(config);
+     if (!result.success) {
+       console.warn(`[ObjectMap] Invalid map configuration:`, result.error.format());
+     }
+     return config;
   }
   
   // Default configuration
@@ -183,14 +215,22 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   dataSource,
   className,
   onMarkerClick,
+  onEdit,
+  onDelete,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
-  const [selectedMarker, setSelectedMarker] = useState<string | null>(null);
+  const [selectedMarkerId, setSelectedMarkerId] = useState<string | null>(null);
 
-  const dataConfig = getDataConfig(schema);
+  const rawDataConfig = getDataConfig(schema);
+  // Memoize dataConfig using deep comparison to prevent infinite loops
+  const dataConfig = useMemo(() => {
+    return rawDataConfig;
+  }, [JSON.stringify(rawDataConfig)]);
+  
   const mapConfig = getMapConfig(schema);
   const hasInlineData = dataConfig?.provider === 'value';
 
@@ -200,6 +240,26 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
       try {
         setLoading(true);
         
+        // Prioritize data passed via props (from ListView)
+        if ((rest as any).data) { // Check props.data directly first
+             const passed = (rest as any).data;
+             if (Array.isArray(passed)) {
+                 setData(passed);
+                 setLoading(false);
+                 return;
+             }
+        }
+
+        // Check schema.data next
+        if ((schema as any).data) {
+             const passed = (schema as any).data;
+             if (Array.isArray(passed)) {
+                 setData(passed);
+                 setLoading(false);
+                 return;
+             }
+        }
+        
         if (hasInlineData && dataConfig?.provider === 'value') {
           setData(dataConfig.items as any[]);
           setLoading(false);
@@ -216,7 +276,18 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
             $filter: schema.filter,
             $orderby: convertSortToQueryParams(schema.sort),
           });
-          setData(result?.data || []);
+          
+          let items: any[] = [];
+          if (Array.isArray(result)) {
+            items = result;
+          } else if (result && typeof result === 'object') {
+             if (Array.isArray((result as any).data)) {
+                items = (result as any).data; 
+             } else if (Array.isArray((result as any).value)) {
+                items = (result as any).value;
+             }
+          }
+          setData(items);
         } else if (dataConfig?.provider === 'api') {
           console.warn('API provider not yet implemented for ObjectMap');
           setData([]);
@@ -257,57 +328,73 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   }, [schema.objectName, dataSource, hasInlineData, dataConfig]);
 
   // Transform data to map markers
-  const markers = useMemo(() => {
-    return data
+  const { markers, invalidCount } = useMemo(() => {
+    let invalid = 0;
+    const validMarkers = data
       .map((record, index) => {
         const coordinates = extractCoordinates(record, mapConfig);
-        if (!coordinates) return null;
+        if (!coordinates) {
+          invalid++;
+          return null;
+        }
 
         const title = mapConfig.titleField ? record[mapConfig.titleField] : 'Marker';
         const description = mapConfig.descriptionField ? record[mapConfig.descriptionField] : undefined;
 
+        // Ensure lat/lng are within valid ranges
+        const [lat, lng] = coordinates;
+        if (!isFinite(lat) || !isFinite(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+            invalid++;
+            return null;
+        }
+
         return {
           id: record.id || record._id || `marker-${index}`,
           title,
           description,
-          coordinates,
+          coordinates: [lng, lat] as [number, number], // maplibre uses [lng, lat]
           data: record,
         };
       })
       .filter((marker): marker is NonNullable<typeof marker> => marker !== null);
+
+    return { markers: validMarkers, invalidCount: invalid };
   }, [data, mapConfig]);
 
+  const selectedMarker = useMemo(() => 
+    markers.find(m => m.id === selectedMarkerId),
+  [markers, selectedMarkerId]);
+
   // Calculate map bounds
-  const bounds = useMemo(() => {
+  const initialViewState = useMemo(() => {
     if (!markers.length) {
       return {
-        center: mapConfig.center || [0, 0],
-        minLat: (mapConfig.center?.[0] || 0) - 0.1,
-        maxLat: (mapConfig.center?.[0] || 0) + 0.1,
-        minLng: (mapConfig.center?.[1] || 0) - 0.1,
-        maxLng: (mapConfig.center?.[1] || 0) + 0.1,
+        longitude: mapConfig.center?.[1] || 0,
+        latitude: mapConfig.center?.[0] || 0,
+        zoom: mapConfig.zoom || 2
       };
     }
 
-    const lats = markers.map(m => m.coordinates[0]);
-    const lngs = markers.map(m => m.coordinates[1]);
+    // Simple bounds calculation
+    const lngs = markers.map(m => m.coordinates[0]);
+    const lats = markers.map(m => m.coordinates[1]);
+    
+    const minLng = Math.min(...lngs);
+    const maxLng = Math.max(...lngs);
+    const minLat = Math.min(...lats);
+    const maxLat = Math.max(...lats);
 
     return {
-      center: [
-        (Math.min(...lats) + Math.max(...lats)) / 2,
-        (Math.min(...lngs) + Math.max(...lngs)) / 2,
-      ] as [number, number],
-      minLat: Math.min(...lats),
-      maxLat: Math.max(...lats),
-      minLng: Math.min(...lngs),
-      maxLng: Math.max(...lngs),
+      longitude: (minLng + maxLng) / 2,
+      latitude: (minLat + maxLat) / 2,
+      zoom: mapConfig.zoom || 3, // Auto-zoom logic could be improved here
     };
-  }, [markers, mapConfig.center]);
+  }, [markers, mapConfig]);
 
   if (loading) {
     return (
       <div className={className}>
-        <div className="flex items-center justify-center h-96 bg-muted rounded-lg">
+        <div className="flex items-center justify-center h-96 bg-muted rounded-lg border">
           <div className="text-muted-foreground">Loading map...</div>
         </div>
       </div>
@@ -317,7 +404,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   if (error) {
     return (
       <div className={className}>
-        <div className="flex items-center justify-center h-96 bg-muted rounded-lg">
+        <div className="flex items-center justify-center h-96 bg-muted rounded-lg border">
           <div className="text-destructive">Error: {error.message}</div>
         </div>
       </div>
@@ -326,75 +413,65 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
 
   return (
     <div className={className}>
-      <div className="relative border rounded-lg overflow-hidden bg-muted" style={{ height: '600px' }}>
-        {/* Placeholder map - in production, replace with actual map library */}
-        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-50 to-green-50 dark:from-blue-950 dark:to-green-950">
-          <div className="text-center">
-            <div className="text-4xl mb-2">🗺️</div>
-            <div className="text-sm text-muted-foreground mb-4">
-              Map Visualization (Placeholder)
-            </div>
-            <div className="text-xs text-muted-foreground max-w-md mx-auto">
-              This is a basic map placeholder. For production, integrate with Mapbox, Leaflet, or Google Maps.
-              <br />
-              <br />
-              <strong>Map Info:</strong>
-              <br />
-              Center: [{bounds.center[0].toFixed(4)}, {bounds.center[1].toFixed(4)}]
-              <br />
-              Markers: {markers.length}
-            </div>
-          </div>
+      {invalidCount > 0 && (
+        <div className="mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded">
+          {`${invalidCount} record${invalidCount !== 1 ? 's' : ''} with missing or invalid coordinates excluded from the map.`}
         </div>
-
-        {/* Marker List Overlay */}
-        <div className="absolute top-4 right-4 w-64 bg-background border rounded-lg shadow-lg max-h-96 overflow-y-auto">
-          <div className="p-3 border-b font-semibold bg-muted">
-            Locations ({markers.length})
-          </div>
-          {markers.length === 0 ? (
-            <div className="p-4 text-sm text-muted-foreground text-center">
-              No locations found with valid coordinates
-            </div>
-          ) : (
-            <div>
-              {markers.map(marker => (
-                <div
-                  key={marker.id}
-                  className={`p-3 border-b hover:bg-muted/50 cursor-pointer transition-colors ${
-                    selectedMarker === marker.id ? 'bg-muted' : ''
-                  }`}
-                  onClick={() => {
-                    setSelectedMarker(marker.id);
-                    onMarkerClick?.(marker.data);
-                  }}
+      )}
+      <div className="relative border rounded-lg overflow-hidden bg-muted" style={{ height: '600px', width: '100%' }}>
+         <Map
+            initialViewState={initialViewState}
+            style={{ width: '100%', height: '100%' }}
+            mapStyle="https://demotiles.maplibre.org/style.json"
+         >
+            <NavigationControl position="top-right" />
+            
+            {markers.map(marker => (
+                <Marker
+                    key={marker.id}
+                    longitude={marker.coordinates[0]}
+                    latitude={marker.coordinates[1]}
+                    anchor="bottom"
+                    onClick={(e) => {
+                        e.originalEvent.stopPropagation();
+                        setSelectedMarkerId(marker.id);
+                        onMarkerClick?.(marker.data);
+                    }}
                 >
-                  <div className="font-medium text-sm">{marker.title}</div>
-                  {marker.description && (
-                    <div className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                      {marker.description}
+                    <div className="text-2xl cursor-pointer hover:scale-110 transition-transform">
+                        📍
                     </div>
-                  )}
-                  <div className="text-xs text-muted-foreground mt-1">
-                    📍 {marker.coordinates[0].toFixed(4)}, {marker.coordinates[1].toFixed(4)}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+                </Marker>
+            ))}
 
-        {/* Legend */}
-        <div className="absolute bottom-4 left-4 bg-background border rounded-lg shadow-lg p-3">
-          <div className="text-xs font-semibold mb-2">Legend</div>
-          <div className="text-xs space-y-1">
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 rounded-full bg-blue-500" />
-              <span>Location Marker</span>
-            </div>
-          </div>
-        </div>
+            {selectedMarker && (
+                <Popup
+                    longitude={selectedMarker.coordinates[0]}
+                    latitude={selectedMarker.coordinates[1]}
+                    anchor="top"
+                    onClose={() => setSelectedMarkerId(null)}
+                    closeOnClick={false}
+                >
+                    <div className="p-2 min-w-[200px]">
+                        <h3 className="font-bold text-sm mb-1">{selectedMarker.title}</h3>
+                        {selectedMarker.description && (
+                            <p className="text-xs text-muted-foreground">{selectedMarker.description}</p>
+                        )}
+                        <div className="mt-2 text-xs flex gap-2">
+                             {onEdit && (
+                                <button className="text-blue-500 hover:underline" onClick={() => onEdit(selectedMarker.data)}>Edit</button>
+                             )}
+                             {onDelete && (
+                                <button className="text-red-500 hover:underline" onClick={() => onDelete(selectedMarker.data)}>Delete</button>
+                             )}
+                        </div>
+                    </div>
+                </Popup>
+            )}
+         </Map>
       </div>
     </div>
   );
 };
+
+export default ObjectMap;

package/src/index.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+// import { ComponentRegistry } from '@object-ui/core'; 
+// Use relative path to force same instance as verified by alias
+import { ObjectMapRenderer } from './index';
+// import { ComponentRegistry } from '@object-ui/core';
+
+// Mock dependencies
+vi.mock('@object-ui/react', () => ({
+  useSchemaContext: vi.fn(() => ({ dataSource: { type: 'mock-datasource' } })),
+}));
+
+vi.mock('./ObjectMap', () => ({
+  ObjectMap: ({ dataSource }: any) => (
+    <div data-testid="map-mock">
+        {dataSource ? `DataSource: ${dataSource.type}` : 'No DataSource'}
+    </div>
+  )
+}));
+
+describe('Plugin Map Registration', () => {
+  it('renderer passes dataSource from context', () => {
+    render(<ObjectMapRenderer schema={{}} />);
+    expect(screen.getByTestId('map-mock')).toHaveTextContent('DataSource: mock-datasource');
+  });
+});

package/src/index.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import { useSchemaContext } from '@object-ui/react';
 import { ObjectMap } from './ObjectMap';
 import type { ObjectMapProps } from './ObjectMap';
 
@@ -15,13 +16,26 @@ export { ObjectMap };
 export type { ObjectMapProps };
 
 // Register component
-const ObjectMapRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <ObjectMap schema={schema} dataSource={null as any} />;
+export const ObjectMapRenderer: React.FC<any> = ({ schema, ...props }) => {
+  const { dataSource } = useSchemaContext();
+  return <ObjectMap schema={schema} dataSource={dataSource} {...props} />;
 };
 
+console.log('Registering object-map...');
 ComponentRegistry.register('object-map', ObjectMapRenderer, {
+  namespace: 'plugin-map',
   label: 'Object Map',
-  category: 'plugin',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'map', type: 'object', label: 'Map Config', description: 'latitudeField, longitudeField, titleField' },
+  ],
+});
+
+ComponentRegistry.register('map', ObjectMapRenderer, {
+  namespace: 'view',
+  label: 'Map View',
+  category: 'view',
   inputs: [
     { name: 'objectName', type: 'string', label: 'Object Name', required: true },
     { name: 'map', type: 'object', label: 'Map Config', description: 'latitudeField, longitudeField, titleField' },

package/vite.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
+      '@object-ui/core': resolve(__dirname, '../core/src/index.ts'),
     },
   },
   build: {
@@ -47,4 +48,7 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    passWithNoTests: true,
+  },
 });

package/vitest.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});