Add placeholder renderers for protocol components

Introduces a PlaceholderRenderer and a registerPlaceholders function to provide visual placeholders for protocol-defined components (e.g., view:grid, action:button, widget:metric) in the component registry. Updates the CRM app example to use these placeholders for unimplemented components, improving developer experience and schema prototyping.

Author: hotlong

examples/crm-app/src/App.tsx

@@ -5,11 +5,13 @@ import { SchemaRendererProvider, SchemaRenderer, useRenderer } from '@object-ui/
 import { registerFields } from '@object-ui/fields';
 import { registerLayout } from '@object-ui/layout';
 import '@object-ui/plugin-dashboard'; // Auto-register dashboard
+import { registerPlaceholders } from '@object-ui/components';
 import { SidebarNav } from './components/SidebarNav';
 
 // 1. Register components from packages (The "Controls Repository")
 registerFields();
 registerLayout();
+registerPlaceholders(); // Register missing components as placeholders
 
 // 2. Define Mock Data (In a real app, this comes from an API)
 const mockData = {
@@ -56,9 +58,13 @@ const dashboardSchema = {
     {
       id: "w4",
       layout: { w: 3, h: 2 },
-      title: "Recent Activity",
+      title: "Recent Activity (Kanban Placeholder)",
       component: {
-         type: "text", props: { value: "Activity list would go here...", className: "text-gray-500" } 
+         type: "view:kanban", 
+         props: { 
+            columns: ["Todo", "In Progress", "Done"],
+            data: [{id: 1, title: "Task 1", status: "Todo"}]
+         } 
       }
     }
   ]
@@ -77,7 +83,7 @@ const contactsSchema = {
       },
       children: [
         { 
-          type: "button", 
+          type: "action:button", 
           props: { label: "Add Contact", variant: "default" },
           events: { onClick: [{ action: "navigate", params: { url: "/contacts/new" } }] } 
         }
@@ -88,7 +94,7 @@ const contactsSchema = {
       className: "mt-6",
       children: [
         {
-          type: "table", // Note: We need to implement 'table' in plugins soon
+          type: "view:grid", 
           bind: "contacts", 
           props: {
             columns: [
@@ -99,6 +105,15 @@ const contactsSchema = {
           }
         }
       ]
+    },
+    {
+        type: "view:map",
+        props: {
+            lat: 34.05,
+            lng: -118.25,
+            zoom: 10
+        },
+        className: "mt-4 h-64"
     }
   ]
 };

packages/components/src/index.ts

@@ -15,6 +15,9 @@ import './renderers';
 export { cn } from './lib/utils';
 export { renderChildren } from './lib/utils';
 
+// Export placeholder registration
+export { registerPlaceholders } from './renderers/placeholders';
+
 // Export raw Shadcn UI components
 export * from './ui';
 

packages/components/src/renderers/placeholders.tsx

@@ -0,0 +1,106 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { cn } from '../lib/utils';
+import { Box, FileQuestion } from 'lucide-react';
+
+export const PlaceholderRenderer = ({ schema, className, ...props }: any) => {
+  const type = schema.type;
+  const isView = type.startsWith('view:');
+  const isWidget = type.startsWith('widget:');
+  const isField = type.startsWith('field:');
+
+  return (
+    <div className={cn(
+      "flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg bg-muted/30 transition-colors hover:bg-muted/50",
+      isView && "border-blue-300 bg-blue-50/50 min-h-[200px]",
+      isWidget && "border-purple-300 bg-purple-50/50 min-h-[150px]",
+      isField && "border-yellow-300 bg-yellow-50/50 p-2 min-h-[40px] flex-row gap-2 justify-start",
+      className
+    )}>
+      <div className={cn("flex items-center gap-2 text-muted-foreground", isField && "text-sm")}>
+        {isField ? <Box className="h-4 w-4" /> : <FileQuestion className="h-8 w-8 mb-2 opacity-50" />}
+        <div className="flex flex-col items-center text-center">
+             <span className="font-mono font-medium text-foreground">{type}</span>
+             {!isField && <span className="text-xs">Component Placeholder</span>}
+        </div>
+      </div>
+      {schema.props && !isField && (
+        <div className="mt-4 w-full text-xs text-muted-foreground bg-background/50 p-2 rounded overflow-hidden">
+            <div className="opacity-70">Properties:</div>
+            <pre className="mt-1 truncate">{JSON.stringify(schema.props, null, 0)}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// List of all protocol-defined components that need placeholders
+const PROTOCOL_COMPONENTS = [
+  // 1. Views (List)
+  'view:grid', 'view:kanban', 'view:map', 'view:calendar', 'view:gantt', 
+  'view:timeline', 'view:gallery', 'view:spreadsheet',
+  
+  // 2. Views (Form)
+  'view:simple', 'view:wizard', 'view:tabbed', 'view:drawer', 'view:modal', 'view:split',
+
+  // 3. Fields (Textual)
+  'field:text', 'field:textarea', 'field:password', 'field:email', 'field:url', 'field:phone',
+  
+  // 4. Fields (Rich)
+  'field:markdown', 'field:html', 'field:code',
+
+  // 5. Fields (Numeric)
+  'field:number', 'field:currency', 'field:percent', 'field:slider',
+
+  // 6. Fields (Selection)
+  'field:boolean', 'field:checkboxes', 'field:select', 'field:multiselect', 'field:radio',
+
+  // 7. Fields (Date/Time)
+  'field:date', 'field:datetime', 'field:time', 'field:duration',
+
+  // 8. Fields (Relational)
+  'field:lookup', 'field:master_detail', 'field:tree',
+
+  // 9. Fields (Media)
+  'field:image', 'field:file', 'field:video', 'field:audio', 'field:avatar',
+
+  // 10. Fields (Visual)
+  'field:color', 'field:rating', 'field:signature', 'field:qrcode', 'field:progress',
+
+  // 11. Fields (Structure)
+  'field:json', 'field:address', 'field:location',
+
+  // 12. Page Components
+  'page:footer', 'page:tabs', 'page:accordion', 'page:card', 'page:sidebar',
+  'record:details', 'record:highlights', 'record:related_list', 'record:activity', 
+  'record:chatter', 'record:path',
+  'app:launcher', 'nav:menu', 'nav:breadcrumb',
+  'global:search', 'global:notifications', 'user:profile',
+
+  // 13. Dashboard Widgets
+  'widget:metric', 'widget:bar', 'widget:line', 'widget:pie', 'widget:funnel', 
+  'widget:radar', 'widget:scatter', 'widget:heatmap', 'widget:pivot', 'widget:table', 'widget:text', 'widget:image',
+
+  // 14. Smart Actions
+  'action:button', 'action:group', 'action:menu', 'action:icon',
+
+  // 15. AI
+  'ai:chat_window', 'ai:input', 'ai:suggestion', 'ai:feedback'
+];
+
+export function registerPlaceholders() {
+    PROTOCOL_COMPONENTS.forEach(type => {
+        // Only register if not already registered (to avoid overwriting real implementations)
+        if (!ComponentRegistry.get(type)) {
+            ComponentRegistry.register(type, PlaceholderRenderer);
+        }
+    });
+}