diff --git a/packages/components/shadcn-components.json b/packages/components/shadcn-components.json index c6460cd0b..560a6d366 100644 --- a/packages/components/shadcn-components.json +++ b/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", diff --git a/packages/components/src/__tests__/complex-disclosure-renderers.test.tsx b/packages/components/src/__tests__/complex-disclosure-renderers.test.tsx index 9db428faa..0ce135353 100644 --- a/packages/components/src/__tests__/complex-disclosure-renderers.test.tsx +++ b/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'); diff --git a/packages/components/src/renderers/complex/index.ts b/packages/components/src/renderers/complex/index.ts index 5f6e6eac2..2da3a766c 100644 --- a/packages/components/src/renderers/complex/index.ts +++ b/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'; diff --git a/packages/components/src/ui/index.ts b/packages/components/src/ui/index.ts index d944826a5..539db867f 100644 --- a/packages/components/src/ui/index.ts +++ b/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'; diff --git a/packages/plugin-calendar-view/README.md b/packages/plugin-calendar-view/README.md new file mode 100644 index 000000000..32b946ef1 --- /dev/null +++ b/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 ( + 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 diff --git a/packages/plugin-calendar-view/package.json b/packages/plugin-calendar-view/package.json new file mode 100644 index 000000000..6602babce --- /dev/null +++ b/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" + } +} diff --git a/packages/components/src/ui/calendar-view.tsx b/packages/plugin-calendar-view/src/index.tsx similarity index 98% rename from packages/components/src/ui/calendar-view.tsx rename to packages/plugin-calendar-view/src/index.tsx index 7b3c9778f..58ca0933a 100644 --- a/packages/components/src/ui/calendar-view.tsx +++ b/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'; diff --git a/packages/components/src/renderers/complex/calendar-view.tsx b/packages/plugin-calendar-view/src/renderer.tsx similarity index 96% rename from packages/components/src/renderers/complex/calendar-view.tsx rename to packages/plugin-calendar-view/src/renderer.tsx index 6266d8c2e..5ee30b09b 100644 --- a/packages/components/src/renderers/complex/calendar-view.tsx +++ b/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 (