Extract calendar-view to plugin package

packages/components/shadcn-components.json

@@ -252,12 +252,14 @@
       "dependencies": ["button"]
     },
     "calendar-view": {
-      "description": "Custom ObjectUI component - Full calendar view",
-      "dependencies": ["calendar"]
+      "description": "Custom ObjectUI component - Full calendar view (moved to @object-ui/plugin-calendar-view)",
+      "dependencies": ["calendar"],
+      "movedToPlugin": "@object-ui/plugin-calendar-view"
     },
     "chatbot": {
-      "description": "Custom ObjectUI component - Chatbot interface",
-      "dependencies": ["card", "input", "button"]
+      "description": "Custom ObjectUI component - Chatbot interface (moved to @object-ui/plugin-chatbot)",
+      "dependencies": ["card", "input", "button"],
+      "movedToPlugin": "@object-ui/plugin-chatbot"
     },
     "combobox": {
       "description": "Custom ObjectUI component - Combo box (select + input)",
@@ -296,8 +298,9 @@
       "dependencies": []
     },
     "timeline": {
-      "description": "Custom ObjectUI component - Timeline component",
-      "dependencies": []
+      "description": "Custom ObjectUI component - Timeline component (moved to @object-ui/plugin-timeline)",
+      "dependencies": [],
+      "movedToPlugin": "@object-ui/plugin-timeline"
     },
     "toaster": {
       "description": "Custom ObjectUI component - Toast container",

packages/components/src/__tests__/complex-disclosure-renderers.test.tsx

@@ -224,29 +224,6 @@ describe('Complex Renderers - Display Issue Detection', () => {
     });
   });
 
-  describe('Calendar View Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('calendar-view');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render calendar view', () => {
-      const { container } = renderComponent({
-        type: 'calendar-view',
-        events: [
-          {
-            id: '1',
-            title: 'Event 1',
-            start: '2024-01-01',
-            end: '2024-01-01',
-          },
-        ],
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-
   describe('Table Renderer', () => {
     it('should be properly registered', () => {
       const validation = validateComponentRegistration('table');

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

@@ -6,7 +6,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './calendar-view';
 import './carousel';
 import './filter-builder';
 import './scroll-area';

packages/components/src/ui/index.ts

@@ -16,7 +16,6 @@ export * from './breadcrumb';
 export * from './button-group';
 export * from './button';
 export * from './calendar';
-export * from './calendar-view';
 export * from './card';
 export * from './carousel';
 export * from './checkbox';

packages/plugin-calendar-view/README.md

@@ -0,0 +1,49 @@
+# @object-ui/plugin-calendar-view
+
+Full-featured calendar view plugin for Object UI with month, week, and day views.
+
+## Installation
+
+```bash
+npm install @object-ui/plugin-calendar-view
+```
+
+## Usage
+
+```tsx
+import { CalendarView } from '@object-ui/plugin-calendar-view';
+
+const events = [
+  {
+    id: 1,
+    title: 'Team Meeting',
+    start: new Date(2024, 0, 15, 10, 0),
+    end: new Date(2024, 0, 15, 11, 0),
+  },
+  // ... more events
+];
+
+function App() {
+  return (
+    <CalendarView
+      events={events}
+      view="month"
+      onEventClick={(event) => console.log('Event clicked:', event)}
+      onDateClick={(date) => console.log('Date clicked:', date)}
+    />
+  );
+}
+```
+
+## Features
+
+- Month, week, and day views
+- Event handling and display
+- Customizable event colors
+- All-day and timed events
+- Responsive design
+- Built with Tailwind CSS and Shadcn UI
+
+## License
+
+MIT

packages/plugin-calendar-view/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@object-ui/plugin-calendar-view",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Calendar view plugin for Object UI",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-calendar-view"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@object-ui/components": "workspace:*",
+    "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*",
+    "lucide-react": "^0.468.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

packages/components/src/ui/calendar-view.tsx → packages/plugin-calendar-view/src/index.tsx

@@ -10,15 +10,7 @@
 
 import * as React from "react"
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
-import { cn } from "../lib/utils"
-import { Button } from "./button"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select"
+import { cn, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@object-ui/components"
 
 const DEFAULT_EVENT_COLOR = "bg-blue-500 text-white"
 
@@ -509,3 +501,6 @@ function DayView({ date, events, onEventClick }: DayViewProps) {
 }
 
 export { CalendarView }
+
+// Export renderer for ObjectUI schema integration
+export * from './renderer';

packages/components/src/renderers/complex/calendar-view.tsx → packages/plugin-calendar-view/src/renderer.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
-import { CalendarView } from '../../ui';
+import { CalendarView } from './index';
 import React from 'react';
 
 // Calendar View Renderer - Airtable-style calendar for displaying records as events
@@ -101,10 +101,14 @@ ComponentRegistry.register('calendar-view',
       }
     }, [onAction, schema]);
 
+    const validView = (schema.view && ['month', 'week', 'day'].includes(schema.view)) 
+      ? (schema.view as "month" | "week" | "day")
+      : 'month';
+
     return (
       <CalendarView
-        events={events as any[]}
-        view={(schema.view as any) || 'month'}
+        events={events}
+        view={validView}
         currentDate={schema.currentDate ? new Date(schema.currentDate) : undefined}
         onEventClick={handleEventClick}
         onDateClick={schema.allowCreate || schema.onDateClick ? handleDateClick : undefined}

packages/plugin-calendar-view/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "declarationMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}

packages/plugin-calendar-view/vite.config.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
+      skipDiagnostics: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginCalendarView',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react', 'lucide-react'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@object-ui/components': 'ObjectUIComponents',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
+          'lucide-react': 'LucideReact',
+        },
+      },
+    },
+  },
+});