@object-ui/app-shell 3.3.0 → 3.3.2

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
-  "homepage": "https://www.objectui.org",
+  "homepage": "https://www.objectui.org/docs/layout/app-shell",
   "repository": {
     "type": "git",
-    "url": "https://github.com/objectstack-ai/objectui.git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
     "directory": "packages/app-shell"
   },
   "bugs": {
@@ -24,22 +24,70 @@
     }
   },
   "dependencies": {
-    "@object-ui/core": "3.3.0",
-    "@object-ui/fields": "3.3.0",
-    "@object-ui/layout": "3.3.0",
-    "@object-ui/react": "3.3.0",
-    "@object-ui/types": "3.3.0",
-    "@object-ui/components": "3.3.0"
+    "lucide-react": "^0.544.0",
+    "sonner": "^2.0.7",
+    "@object-ui/auth": "3.3.2",
+    "@object-ui/collaboration": "3.3.2",
+    "@object-ui/components": "3.3.2",
+    "@object-ui/core": "3.3.2",
+    "@object-ui/data-objectstack": "3.3.2",
+    "@object-ui/fields": "3.3.2",
+    "@object-ui/i18n": "3.3.2",
+    "@object-ui/layout": "3.3.2",
+    "@object-ui/permissions": "3.3.2",
+    "@object-ui/react": "3.3.2",
+    "@object-ui/types": "3.3.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0",
+    "@object-ui/plugin-calendar": "3.3.2",
+    "@object-ui/plugin-charts": "3.3.2",
+    "@object-ui/plugin-chatbot": "3.3.2",
+    "@object-ui/plugin-dashboard": "3.3.2",
+    "@object-ui/plugin-designer": "3.3.2",
+    "@object-ui/plugin-detail": "3.3.2",
+    "@object-ui/plugin-form": "3.3.2",
+    "@object-ui/plugin-grid": "3.3.2",
+    "@object-ui/plugin-kanban": "3.3.2",
+    "@object-ui/plugin-list": "3.3.2",
+    "@object-ui/plugin-report": "3.3.2",
+    "@object-ui/plugin-view": "3.3.2"
   },
   "devDependencies": {
+    "@types/node": "^25.6.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "typescript": "^6.0.2"
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "react-router-dom": "^7.14.2",
+    "sonner": "^2.0.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10"
   },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "app-shell",
+    "renderer",
+    "application-shell"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "tsc",
     "test": "vitest run",

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @object-ui/app-shell@3.3.0 build /home/runner/work/objectui/objectui/packages/app-shell
-> tsc
-

package/src/components/AppShell.tsx

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-import type { AppShellProps } from '../types';
-
-/**
- * AppShell - Minimal layout container
- *
- * Provides basic application structure without routing or console-specific logic.
- * Third-party systems can customize or replace this with their own layout.
- */
-export function AppShell({
-  sidebar,
-  header,
-  footer,
-  children,
-  className = '',
-}: AppShellProps): ReactNode {
-  return (
-    <div className={`app-shell flex h-screen flex-col ${className}`}>
-      {header && <div className="app-shell-header">{header}</div>}
-      <div className="app-shell-body flex flex-1 overflow-hidden">
-        {sidebar && (
-          <div className="app-shell-sidebar border-r">{sidebar}</div>
-        )}
-        <main className="app-shell-main flex-1 overflow-auto">
-          {children}
-        </main>
-      </div>
-      {footer && <div className="app-shell-footer">{footer}</div>}
-    </div>
-  );
-}

package/src/components/DashboardRenderer.tsx

@@ -1,36 +0,0 @@
-import { SchemaRendererProvider } from '@object-ui/react';
-import type { DashboardRendererProps } from '../types';
-
-/**
- * DashboardRenderer - Renders dashboard layouts from schema
- *
- * Framework-agnostic component that renders a dashboard based on JSON schema.
- * Delegates to registered dashboard plugins.
- */
-export function DashboardRenderer({
-  schema,
-  dataSource,
-  dashboardName,
-}: DashboardRendererProps) {
-  if (!schema) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="text-muted-foreground">No dashboard schema provided</div>
-      </div>
-    );
-  }
-
-  return (
-    <SchemaRendererProvider dataSource={dataSource}>
-      <div className="dashboard-renderer h-full p-4">
-        <h1 className="mb-4 text-2xl font-bold">
-          {schema.title || dashboardName || 'Dashboard'}
-        </h1>
-        {/* TODO: Integrate with actual SchemaRenderer for dashboard */}
-        <div className="text-muted-foreground">
-          Dashboard rendering: {schema.title || dashboardName}
-        </div>
-      </div>
-    </SchemaRendererProvider>
-  );
-}

package/src/components/FormRenderer.tsx

@@ -1,71 +0,0 @@
-import { SchemaRendererProvider } from '@object-ui/react';
-import type { FormRendererProps } from '../types';
-
-/**
- * FormRenderer - Renders forms (modal or inline)
- *
- * Framework-agnostic component that renders a form based on schema.
- * Handles both create and edit modes.
- */
-export function FormRenderer({
-  schema,
-  dataSource,
-  mode = 'create',
-  recordId,
-  onSuccess,
-  onCancel,
-  objectDef,
-}: FormRendererProps) {
-  if (!schema) {
-    return (
-      <div className="flex items-center justify-center p-4">
-        <div className="text-muted-foreground">No form schema provided</div>
-      </div>
-    );
-  }
-
-  const handleSubmit = async (data: any) => {
-    try {
-      if (mode === 'create' && objectDef) {
-        const result = await dataSource.create(objectDef.name, data);
-        onSuccess?.(result);
-      } else if (mode === 'edit' && recordId && objectDef) {
-        const result = await dataSource.update(objectDef.name, recordId, data);
-        onSuccess?.(result);
-      }
-    } catch (error) {
-      console.error('Form submission error:', error);
-    }
-  };
-
-  return (
-    <SchemaRendererProvider dataSource={dataSource}>
-      <div className="form-renderer p-4">
-        <h2 className="mb-4 text-xl font-semibold">
-          {schema.title || (mode === 'create' ? 'Create Record' : 'Edit Record')}
-        </h2>
-        {/* TODO: Integrate with actual form renderer */}
-        <div className="text-muted-foreground">
-          Form rendering in {mode} mode
-          {recordId && ` for record ${recordId}`}
-        </div>
-        <div className="mt-4 flex gap-2">
-          <button
-            onClick={() => handleSubmit({})}
-            className="rounded bg-primary px-4 py-2 text-primary-foreground"
-          >
-            Save
-          </button>
-          {onCancel && (
-            <button
-              onClick={onCancel}
-              className="rounded border px-4 py-2"
-            >
-              Cancel
-            </button>
-          )}
-        </div>
-      </div>
-    </SchemaRendererProvider>
-  );
-}

package/src/components/ObjectRenderer.tsx

@@ -1,122 +0,0 @@
-import { useState, useEffect } from 'react';
-import { SchemaRendererProvider } from '@object-ui/react';
-import type { ObjectRendererProps } from '../types';
-
-/**
- * ObjectRenderer - Renders object views (Grid, Kanban, List, etc.)
- *
- * Framework-agnostic component that renders an object view based on schema.
- * Supports all view types registered in the ComponentRegistry.
- */
-export function ObjectRenderer({
-  objectName,
-  viewId,
-  dataSource,
-  onRecordClick: _onRecordClick,
-  onEdit: _onEdit,
-  objectDef: externalObjectDef,
-  refreshKey = 0,
-}: ObjectRendererProps) {
-  const [objectDef, setObjectDef] = useState(externalObjectDef);
-  const [loading, setLoading] = useState(!externalObjectDef);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (externalObjectDef) {
-      setObjectDef(externalObjectDef);
-      setLoading(false);
-      return;
-    }
-
-    // Fetch object metadata if not provided
-    if (dataSource.getMetadata) {
-      setLoading(true);
-      dataSource
-        .getMetadata()
-        .then((metadata: any) => {
-          const obj = metadata.objects?.find(
-            (o: any) => o.name === objectName
-          );
-          if (obj) {
-            setObjectDef(obj);
-            setError(null);
-          } else {
-            setError(`Object "${objectName}" not found`);
-          }
-        })
-        .catch((err: Error) => {
-          setError(err.message);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    } else {
-      setError('Data source does not support metadata fetching');
-      setLoading(false);
-    }
-  }, [objectName, dataSource, externalObjectDef]);
-
-  if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="text-muted-foreground">Loading...</div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="text-destructive">Error: {error}</div>
-      </div>
-    );
-  }
-
-  if (!objectDef) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="text-muted-foreground">
-          Object definition not found
-        </div>
-      </div>
-    );
-  }
-
-  // Build view schema
-  const viewSchema = buildObjectViewSchema(objectDef, viewId);
-
-  return (
-    <SchemaRendererProvider dataSource={dataSource}>
-      <div className="object-renderer h-full" key={refreshKey}>
-        {/* Render using SchemaRenderer from @object-ui/react */}
-        {/* The actual implementation will delegate to registered view plugins */}
-        <div className="h-full p-4">
-          <h1 className="mb-4 text-2xl font-bold">
-            {objectDef.label || objectDef.name}
-          </h1>
-          {/* TODO: Integrate with actual SchemaRenderer once available */}
-          <div className="text-muted-foreground">
-            View rendering for {objectName} (viewId: {viewId || 'default'})
-          </div>
-        </div>
-      </div>
-    </SchemaRendererProvider>
-  );
-}
-
-/**
- * Helper to build view schema from object definition
- */
-function buildObjectViewSchema(objectDef: any, viewId?: string) {
-  // Find the requested view or use default
-  const view = viewId
-    ? objectDef.views?.find((v: any) => v.id === viewId || v.name === viewId)
-    : objectDef.views?.[0];
-
-  return {
-    type: view?.type || 'grid',
-    objectName: objectDef.name,
-    viewId: view?.id,
-    ...view,
-  };
-}

package/src/components/PageRenderer.tsx

@@ -1,28 +0,0 @@
-import type { PageRendererProps } from '../types';
-
-/**
- * PageRenderer - Renders custom page schemas
- *
- * Framework-agnostic component that renders a page based on JSON schema.
- */
-export function PageRenderer({ schema, pageName }: PageRendererProps) {
-  if (!schema) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="text-muted-foreground">No page schema provided</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="page-renderer h-full p-4">
-      <h1 className="mb-4 text-2xl font-bold">
-        {schema.title || pageName || 'Page'}
-      </h1>
-      {/* TODO: Integrate with actual SchemaRenderer for page */}
-      <div className="text-muted-foreground">
-        Page rendering: {schema.title || pageName}
-      </div>
-    </div>
-  );
-}

package/src/index.ts

@@ -1,20 +0,0 @@
-/**
- * @object-ui/app-shell
- *
- * Minimal Application Shell for ObjectUI
- * Framework-agnostic rendering engine for third-party integration
- */
-
-export { AppShell } from './components/AppShell';
-export { ObjectRenderer } from './components/ObjectRenderer';
-export { DashboardRenderer } from './components/DashboardRenderer';
-export { PageRenderer } from './components/PageRenderer';
-export { FormRenderer } from './components/FormRenderer';
-
-export type {
-  AppShellProps,
-  ObjectRendererProps,
-  DashboardRendererProps,
-  PageRendererProps,
-  FormRendererProps,
-} from './types';

package/src/types.ts

@@ -1,78 +0,0 @@
-import type { ReactNode } from 'react';
-
-/**
- * Generic data source interface
- * Third-party systems can implement this to connect their own backends
- */
-export interface DataSource {
-  find(objectName: string, params?: any): Promise<any>;
-  findOne(objectName: string, id: string, params?: any): Promise<any>;
-  create(objectName: string, data: any): Promise<any>;
-  update(objectName: string, id: string, data: any): Promise<any>;
-  delete(objectName: string, id: string): Promise<void>;
-  getMetadata?(): Promise<any>;
-  [key: string]: any; // Allow additional methods
-}
-
-export interface AppShellProps {
-  /** Sidebar component (optional) */
-  sidebar?: ReactNode;
-  /** Header component (optional) */
-  header?: ReactNode;
-  /** Footer component (optional) */
-  footer?: ReactNode;
-  /** Main content */
-  children: ReactNode;
-  /** Custom className */
-  className?: string;
-}
-
-export interface ObjectRendererProps {
-  /** Object API name */
-  objectName: string;
-  /** View ID (optional) */
-  viewId?: string;
-  /** Data source for CRUD operations */
-  dataSource: DataSource;
-  /** Callback when a record is clicked */
-  onRecordClick?: (record: any) => void;
-  /** Callback when edit is triggered */
-  onEdit?: (record: any) => void;
-  /** Object metadata (optional, will fetch if not provided) */
-  objectDef?: any;
-  /** Refresh key to force re-render */
-  refreshKey?: number;
-}
-
-export interface DashboardRendererProps {
-  /** Dashboard schema */
-  schema: any;
-  /** Data source for widgets */
-  dataSource: DataSource;
-  /** Dashboard name */
-  dashboardName?: string;
-}
-
-export interface PageRendererProps {
-  /** Page schema */
-  schema: any;
-  /** Page name */
-  pageName?: string;
-}
-
-export interface FormRendererProps {
-  /** Form schema */
-  schema: any;
-  /** Data source for form submission */
-  dataSource: DataSource;
-  /** Form mode */
-  mode?: 'create' | 'edit';
-  /** Record ID (for edit mode) */
-  recordId?: string;
-  /** Success callback */
-  onSuccess?: (result: any) => void;
-  /** Cancel callback */
-  onCancel?: () => void;
-  /** Object definition */
-  objectDef?: any;
-}

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "jsx": "react-jsx",
-    "lib": ["ES2020", "DOM"],
-    "noEmit": false,
-    "declaration": true,
-    "composite": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"],
-  "references": [
-    { "path": "../types" },
-    { "path": "../core" },
-    { "path": "../react" },
-    { "path": "../components" }
-  ]
-}