feat: add AppShell and MetricWidget components with registration in ComponentRegistry

Author: hotlong

packages/layout/src/AppShell.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarInset,
+  Sidebar
+} from '@object-ui/components';
+import { cn } from '@object-ui/components';
+
+export interface AppShellProps {
+  sidebar?: React.ReactNode;
+  navbar?: React.ReactNode; // Top navbar content
+  children: React.ReactNode;
+  className?: string;
+  defaultOpen?: boolean;
+}
+
+export function AppShell({
+  sidebar,
+  navbar,
+  children,
+  className,
+  defaultOpen = true,
+}: AppShellProps) {
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      {sidebar}
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <div className="w-px h-4 bg-border mx-2" />
+          {navbar}
+        </header>
+        <main className={cn("flex-1 overflow-auto p-4 md:p-6", className)}>
+          {children}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

packages/layout/src/index.ts

@@ -3,4 +3,24 @@
  * Copyright (c) 2024-present ObjectStack Inc.
  */
 
+import { ComponentRegistry } from '@object-ui/core';
+
 export * from './PageHeader';
+export * from './AppShell';
+
+import { PageHeader } from './PageHeader';
+import { AppShell } from './AppShell';
+
+ComponentRegistry.register('page-header', PageHeader, {
+    label: 'Page Header',
+    category: 'Layout',
+    inputs: [
+        { name: 'title', type: 'string' },
+        { name: 'description', type: 'string' }
+    ]
+});
+
+ComponentRegistry.register('app-shell', AppShell, {
+    label: 'App Shell',
+    category: 'Layout',
+});

packages/plugin-dashboard/package.json

@@ -25,6 +25,7 @@
     "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",
     "clsx": "^2.1.0",
+    "lucide-react": "^0.563.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.2.1"

packages/plugin-dashboard/src/MetricWidget.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@object-ui/components';
+import { cn } from '@object-ui/components';
+import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from 'lucide-react';
+
+export interface MetricWidgetProps {
+  label: string;
+  value: string | number;
+  trend?: {
+    value: number;
+    label?: string;
+    direction?: 'up' | 'down' | 'neutral';
+  };
+  icon?: React.ReactNode;
+  className?: string;
+  description?: string;
+}
+
+export const MetricWidget = ({
+  label,
+  value,
+  trend,
+  icon,
+  className,
+  description,
+  ...props
+}: MetricWidgetProps) => {
+  return (
+    <Card className={cn("h-full", className)} {...props}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">
+          {label}
+        </CardTitle>
+        {icon && <div className="h-4 w-4 text-muted-foreground">{icon}</div>}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {(trend || description) && (
+          <p className="text-xs text-muted-foreground flex items-center mt-1">
+            {trend && (
+              <span className={cn(
+                "flex items-center mr-2",
+                trend.direction === 'up' && "text-green-500",
+                trend.direction === 'down' && "text-red-500",
+                trend.direction === 'neutral' && "text-yellow-500"
+              )}>
+                {trend.direction === 'up' && <ArrowUpIcon className="h-3 w-3 mr-1" />}
+                {trend.direction === 'down' && <ArrowDownIcon className="h-3 w-3 mr-1" />}
+                {trend.direction === 'neutral' && <MinusIcon className="h-3 w-3 mr-1" />}
+                {trend.value}%
+              </span>
+            )}
+            {description || trend?.label}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

packages/plugin-dashboard/src/index.tsx

@@ -8,8 +8,9 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import { DashboardRenderer } from './DashboardRenderer';
+import { MetricWidget } from './MetricWidget';
 
-export { DashboardRenderer };
+export { DashboardRenderer, MetricWidget };
 
 // Register dashboard component
 ComponentRegistry.register(
@@ -30,3 +31,17 @@ ComponentRegistry.register(
     }
   }
 );
+
+// Register metric component
+ComponentRegistry.register(
+  'metric',
+  MetricWidget,
+  {
+    label: 'Metric Card',
+    category: 'Dashboard',
+    inputs: [
+        { name: 'label', type: 'string', label: 'Label' },
+        { name: 'value', type: 'string', label: 'Value' },
+    ]
+  }
+);

packages/plugin-dashboard/tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist",
-    "rootDir": "./src",
     "declaration": true,
     "declarationMap": true,
     "composite": true,

packages/plugin-dashboard/vite.config.ts

@@ -26,7 +26,8 @@ export default defineConfig({
         '@object-ui/react',
         '@object-ui/types',
         'tailwind-merge',
-        'clsx'
+        'clsx',
+        'lucide-react'
       ],
       output: {
         globals: {