feat: add DashboardRenderer component and related types for dashboard functionality

Author: hotlong

packages/components/src/renderers/complex/dashboard.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
+import type { DashboardSchema } from '@object-ui/types';
+import { SchemaRenderer } from '@object-ui/react';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utils';
+
+const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    const columns = schema.columns || 3;
+    const gap = schema.gap || 4;
+
+    return (
+      <div 
+        ref={ref} 
+        className={cn("grid", className)} 
+        style={{
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gap: gap * 4 // Assuming tailwind scale
+        }}
+        {...props}
+      >
+        {schema.widgets?.map((widget) => (
+            <div 
+                key={widget.id} 
+                className={cn("border rounded-lg p-4 bg-card text-card-foreground shadow-sm")}
+                style={widget.layout ? {
+                    gridColumn: `span ${widget.layout.w}`,
+                    gridRow: `span ${widget.layout.h}`
+                }: undefined}
+            >
+                {widget.title && <h3 className="font-semibold mb-2">{widget.title}</h3>}
+                <SchemaRenderer schema={widget.component} />
+            </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+ComponentRegistry.register(
+  'dashboard',
+  DashboardRenderer,
+  {
+    label: 'Dashboard',
+    category: 'Complex',
+    icon: 'layout-dashboard',
+    inputs: [
+      { name: 'columns', type: 'number', label: 'Columns', defaultValue: 3 },
+      { name: 'gap', type: 'number', label: 'Gap', defaultValue: 4 },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+        columns: 3,
+        widgets: []
+    }
+  }
+);

packages/components/src/renderers/complex/index.ts

@@ -12,5 +12,6 @@ import './scroll-area';
 import './resizable';
 import './table';
 import './data-table';
+import './dashboard';
 
 

packages/components/src/renderers/disclosure/toggle-group.tsx

@@ -21,10 +21,10 @@ ComponentRegistry.register('toggle-group',
 
     return (
       <ToggleGroup 
-        type={schema.selectionType || 'single'}
+        type={(schema.selectionType || 'single') as any}
         variant={schema.variant}
         size={schema.size}
-        value={schema.value}
+        value={schema.value as any}
         className={schema.className} 
         {...toggleGroupProps}
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

packages/components/src/renderers/feedback/sonner.tsx

@@ -26,7 +26,7 @@ ComponentRegistry.register('sonner',
     };
 
     return (
-      <Button onClick={showToast} variant={schema.buttonVariant} className={schema.className}>
+      <Button onClick={showToast} variant={schema.buttonVariant} className={schema.className} {...props}>
         {schema.buttonLabel || 'Show Toast'}
       </Button>
     );

packages/core/src/index.ts

@@ -10,7 +10,6 @@ export * from './types';
 export * from './registry/Registry';
 export * from './validation/schema-validator';
 export * from './builder/schema-builder';
-export * from './adapters';
 export * from './utils/filter-converter';
 // export * from './data-scope'; // TODO
 // export * from './evaluator'; // TODO

packages/types/src/complex.ts

@@ -491,6 +491,36 @@ export interface ChatbotSchema extends BaseSchema {
   height?: string | number;
 }
 
+/**
+ * Dashboard Widget Layout
+ */
+export interface DashboardWidgetLayout {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/**
+ * Dashboard Widget
+ */
+export interface DashboardWidgetSchema {
+  id: string;
+  title?: string;
+  component: SchemaNode;
+  layout?: DashboardWidgetLayout;
+}
+
+/**
+ * Dashboard Schema
+ */
+export interface DashboardSchema extends BaseSchema {
+  type: 'dashboard';
+  columns?: number;
+  gap?: number;
+  widgets: DashboardWidgetSchema[];
+}
+
 /**
  * Union type of all complex schemas
  */

packages/types/src/index.ts

@@ -91,6 +91,7 @@ export type {
   ScrollAreaSchema,
   ResizableSchema,
   ResizablePanel,
+  AspectRatioSchema,
   LayoutSchema,
   PageSchema,
 } from './layout';
@@ -108,15 +109,17 @@ export type {
   RadioGroupSchema,
   RadioOption,
   SwitchSchema,
-  ToggleSchema,
   SliderSchema,
   FileUploadSchema,
   DatePickerSchema,
   CalendarSchema,
-  InputOTPSchema,
   ValidationRule,
   FieldCondition,
   FormField,
+  ComboboxSchema,
+  CommandSchema,
+  InputOTPSchema,
+  ToggleSchema,
   FormSchema,
   LabelSchema,
   FormComponentSchema,
@@ -142,6 +145,7 @@ export type {
   ChartSchema,
   TimelineEvent,
   TimelineSchema,
+  KbdSchema,
   HtmlSchema,
   StatisticSchema,
   DataDisplaySchema,
@@ -151,10 +155,13 @@ export type {
 // Feedback Components - Status & Progress Indication
 // ============================================================================
 export type {
+  SpinnerSchema,
   LoadingSchema,
   ProgressSchema,
   SkeletonSchema,
   ToastSchema,
+  EmptySchema,
+  SonnerSchema,
   ToasterSchema,
   FeedbackSchema,
 } from './feedback';
@@ -164,6 +171,7 @@ export type {
 // ============================================================================
 export type {
   AccordionItem,
+  ToggleGroupSchema,
   AccordionSchema,
   CollapsibleSchema,
   DisclosureSchema,
@@ -183,6 +191,7 @@ export type {
   TooltipSchema,
   HoverCardSchema,
   MenuItem,
+  MenubarSchema,
   DropdownMenuSchema,
   ContextMenuSchema,
   OverlaySchema,
@@ -197,8 +206,10 @@ export type {
   SidebarSchema,
   BreadcrumbItem,
   BreadcrumbSchema,
-  PaginationSchema,
+  ButtonGroupSchema,
+  NavigationMenuSchema,
   NavigationSchema,
+  PaginationSchema,
 } from './navigation';
 
 // ============================================================================
@@ -218,6 +229,9 @@ export type {
   FilterField,
   CarouselItem,
   CarouselSchema,
+  DashboardWidgetLayout,
+  DashboardWidgetSchema,
+  DashboardSchema,
   ChatMessage,
   ChatbotSchema,
   ComplexSchema,
@@ -268,6 +282,12 @@ export type {
   GanttConfig,
   SortConfig,
   // Component schemas
+  ObjectMapSchema,
+  ObjectGanttSchema,
+  ObjectCalendarSchema,
+  ObjectKanbanSchema,
+  ObjectChartSchema,
+  ListViewSchema,
   ObjectGridSchema,
   ObjectFormSchema,
   ObjectViewSchema,