From b482b81278c6a59e404f20f24177913804c15247 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 23 Jan 2026 10:44:53 +0000 Subject: [PATCH 1/3] Initial plan From 8bd10e02f28f5627c65f63e1c8be19b85cb704d5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 23 Jan 2026 10:57:35 +0000 Subject: [PATCH 2/3] docs: add documentation for 19 missing ObjectUI components Created comprehensive MDX documentation files for: Basic Components (2): - div.mdx - General container element - span.mdx - Inline container element Form Components (3): - calendar.mdx - Date selection component (moved from data-display) - file-upload.mdx - File upload with drag-and-drop - toggle.mdx - Two-state toggle button (moved from disclosure) Data Display (2): - statistic.mdx - Statistical value display with trends - tree-view.mdx - Hierarchical tree structure Layout (2): - page.mdx - Full-page container with title/description - semantic.mdx - Semantic HTML5 elements (header, nav, main, etc.) Feedback (1): - toaster.mdx - Toast notification container Complex (8): - data-table.mdx - Enterprise data table with sorting/filtering - calendar-view.mdx - Full calendar view (moved from data-display) - timeline.mdx - Chronological timeline display (moved from data-display) - carousel.mdx - Slideshow component (moved from data-display) - scroll-area.mdx - Scrollable container (moved from layout) - resizable.mdx - Resizable panels (moved from layout) - filter-builder.mdx - Visual query builder - chatbot.mdx - Interactive chat interface Navigation (1): - header-bar.mdx - Application header with breadcrumbs Also updated all meta.json files to include new components in navigation and reorganized components into appropriate categories. --- docs/components/basic/div.mdx | 133 +++++++++ docs/components/basic/meta.json | 4 +- docs/components/basic/span.mdx | 146 ++++++++++ docs/components/complex/calendar-view.mdx | 246 +++++++++++++++++ docs/components/complex/carousel.mdx | 208 ++++++++++++++ docs/components/complex/chatbot.mdx | 254 +++++++++++++++++ docs/components/complex/data-table.mdx | 199 +++++++++++++ docs/components/complex/filter-builder.mdx | 218 +++++++++++++++ docs/components/complex/meta.json | 10 +- docs/components/complex/resizable.mdx | 307 +++++++++++++++++++++ docs/components/complex/scroll-area.mdx | 217 +++++++++++++++ docs/components/complex/timeline.mdx | 265 ++++++++++++++++++ docs/components/data-display/calendar.mdx | 70 ----- docs/components/data-display/carousel.mdx | 96 ------- docs/components/data-display/meta.json | 5 +- docs/components/data-display/statistic.mdx | 192 +++++++++++++ docs/components/data-display/timeline.mdx | 80 ------ docs/components/data-display/tree-view.mdx | 206 ++++++++++++++ docs/components/disclosure/meta.json | 1 - docs/components/disclosure/toggle.mdx | 111 -------- docs/components/feedback/meta.json | 3 +- docs/components/feedback/toaster.mdx | 125 +++++++++ docs/components/form/calendar.mdx | 107 +++++++ docs/components/form/file-upload.mdx | 148 ++++++++++ docs/components/form/meta.json | 5 +- docs/components/form/toggle.mdx | 187 +++++++++++++ docs/components/layout/meta.json | 4 +- docs/components/layout/page.mdx | 188 +++++++++++++ docs/components/layout/resizable.mdx | 78 ------ docs/components/layout/scroll-area.mdx | 59 ---- docs/components/layout/semantic.mdx | 248 +++++++++++++++++ docs/components/meta.json | 1 + docs/components/navigation/header-bar.mdx | 145 ++++++++++ docs/components/navigation/meta.json | 6 + 34 files changed, 3768 insertions(+), 504 deletions(-) create mode 100644 docs/components/basic/div.mdx create mode 100644 docs/components/basic/span.mdx create mode 100644 docs/components/complex/calendar-view.mdx create mode 100644 docs/components/complex/carousel.mdx create mode 100644 docs/components/complex/chatbot.mdx create mode 100644 docs/components/complex/data-table.mdx create mode 100644 docs/components/complex/filter-builder.mdx create mode 100644 docs/components/complex/resizable.mdx create mode 100644 docs/components/complex/scroll-area.mdx create mode 100644 docs/components/complex/timeline.mdx delete mode 100644 docs/components/data-display/calendar.mdx delete mode 100644 docs/components/data-display/carousel.mdx create mode 100644 docs/components/data-display/statistic.mdx delete mode 100644 docs/components/data-display/timeline.mdx create mode 100644 docs/components/data-display/tree-view.mdx delete mode 100644 docs/components/disclosure/toggle.mdx create mode 100644 docs/components/feedback/toaster.mdx create mode 100644 docs/components/form/calendar.mdx create mode 100644 docs/components/form/file-upload.mdx create mode 100644 docs/components/form/toggle.mdx create mode 100644 docs/components/layout/page.mdx delete mode 100644 docs/components/layout/resizable.mdx delete mode 100644 docs/components/layout/scroll-area.mdx create mode 100644 docs/components/layout/semantic.mdx create mode 100644 docs/components/navigation/header-bar.mdx create mode 100644 docs/components/navigation/meta.json diff --git a/docs/components/basic/div.mdx b/docs/components/basic/div.mdx new file mode 100644 index 000000000..5d1f3effc --- /dev/null +++ b/docs/components/basic/div.mdx @@ -0,0 +1,133 @@ +--- +title: "Div" +description: "Generic container element for grouping and laying out content" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Div component is a versatile container element that wraps content and provides structure. It's the basic building block for creating layouts and organizing components. + +## Basic Usage + + + +## With Multiple Children + + + +## Layout Examples + + + + + + +## Schema + +```typescript +interface DivSchema { + type: 'div'; + + // Content + children?: SchemaNode | SchemaNode[]; // Child components + body?: SchemaNode[]; // Alternative content prop + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Card Layout + + + +### Nested Containers + + diff --git a/docs/components/basic/meta.json b/docs/components/basic/meta.json index a0a95cec5..0992ea16b 100644 --- a/docs/components/basic/meta.json +++ b/docs/components/basic/meta.json @@ -9,6 +9,8 @@ "button-group", "pagination", "navigation-menu", - "sidebar" + "sidebar", + "div", + "span" ] } diff --git a/docs/components/basic/span.mdx b/docs/components/basic/span.mdx new file mode 100644 index 000000000..d63d2bf66 --- /dev/null +++ b/docs/components/basic/span.mdx @@ -0,0 +1,146 @@ +--- +title: "Span" +description: "Inline container for styling and wrapping inline text content" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Span component is an inline container used for wrapping and styling portions of text without breaking the flow of content. + +## Basic Usage + + + +## Text Styling + + + + + + +## Inline Elements + + + +## Schema + +```typescript +interface SpanSchema { + type: 'span'; + + // Content + value?: string; // Text content + children?: SchemaNode | SchemaNode[]; // Child components + body?: SchemaNode | SchemaNode[]; // Alternative content prop + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Status Indicators + + + +### Text Emphasis + + diff --git a/docs/components/complex/calendar-view.mdx b/docs/components/complex/calendar-view.mdx new file mode 100644 index 000000000..cbeb290bb --- /dev/null +++ b/docs/components/complex/calendar-view.mdx @@ -0,0 +1,246 @@ +--- +title: "Calendar View" +description: "Full-featured calendar for displaying and managing events in month, week, or day views" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Calendar View component provides an Airtable-style calendar for visualizing records as events with support for different view modes. + +## Basic Usage + + + +## Schema + +```typescript +interface CalendarEvent { + id: string | number; // Unique event identifier + title: string; // Event title + start: Date | string; // Event start date/time + end?: Date | string; // Event end date/time (optional) + allDay?: boolean; // All-day event flag + color?: string; // Event color + data?: any; // Additional event data +} + +interface CalendarViewSchema { + type: 'calendar-view'; + + // Data + data: Record[]; // Records to display as events + + // Field mapping (map record fields to event properties) + titleField?: string; // Field for event title (default: 'title') + startDateField?: string; // Field for start date (default: 'start') + endDateField?: string; // Field for end date (default: 'end') + allDayField?: string; // Field for all-day flag (default: 'allDay') + colorField?: string; // Field for color (default: 'color') + + // Color mapping + colorMapping?: Record; // Map field values to colors + + // View configuration + view?: 'month' | 'week' | 'day'; // Calendar view mode (default: 'month') + currentDate?: string | Date; // Initial calendar date + + // Features + allowCreate?: boolean; // Allow creating events by clicking dates + + // Events + onEventClick?: (event: any) => void; // Event click handler + onDateClick?: (date: Date) => void; // Date click handler + onViewChange?: (view: string) => void; // View change handler + onNavigate?: (date: Date) => void; // Navigation handler + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Project Timeline + + + +### Employee Schedule + + + +### Marketing Campaign + + + +## Features + +- **Multiple Views**: Switch between month, week, and day views +- **Event Creation**: Click dates to create new events (when enabled) +- **Event Interaction**: Click events to view details or trigger actions +- **Color Coding**: Automatically map data fields to event colors +- **Field Mapping**: Flexible mapping of your data to calendar events +- **Responsive**: Adapts to different screen sizes diff --git a/docs/components/complex/carousel.mdx b/docs/components/complex/carousel.mdx new file mode 100644 index 000000000..eb641ec8b --- /dev/null +++ b/docs/components/complex/carousel.mdx @@ -0,0 +1,208 @@ +--- +title: "Carousel" +description: "Slideshow component for cycling through content" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Carousel component displays content in a slideshow format with navigation controls. + +## Basic Usage + + + +## Without Arrows + + + +## Schema + +```typescript +interface CarouselSchema { + type: 'carousel'; + + // Configuration + orientation?: 'horizontal' | 'vertical'; // Carousel direction (default: 'horizontal') + showArrows?: boolean; // Show navigation arrows (default: true) + + // Items + items: SchemaNode[][]; // Array of slides (each slide is an array of components) + + // Options + opts?: { + loop?: boolean; // Enable infinite loop + align?: 'start' | 'center' | 'end'; // Slide alignment + }; + + // Styling + className?: string; // Container CSS classes + itemClassName?: string; // Individual slide CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Image Gallery + + + +### Product Showcase + + + +### Testimonials + + diff --git a/docs/components/complex/chatbot.mdx b/docs/components/complex/chatbot.mdx new file mode 100644 index 000000000..80e9485a2 --- /dev/null +++ b/docs/components/complex/chatbot.mdx @@ -0,0 +1,254 @@ +--- +title: "Chatbot" +description: "Interactive chat interface with message history and auto-response" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Chatbot component provides a full-featured chat interface with message history, avatars, timestamps, and customizable appearance. + +## Basic Usage + + + +## With Timestamps + + + +## Custom Avatars + + + +## Schema + +```typescript +interface ChatMessage { + id: string; // Unique message identifier + role: 'user' | 'assistant'; // Message sender role + content: string; // Message text content + timestamp?: string; // Message timestamp + avatar?: string; // Avatar image URL + avatarFallback?: string; // Avatar fallback text +} + +interface ChatbotSchema { + type: 'chatbot'; + + // Messages + messages?: ChatMessage[]; // Initial chat messages + + // Configuration + placeholder?: string; // Input placeholder (default: 'Type your message...') + showTimestamp?: boolean; // Show message timestamps (default: false) + disabled?: boolean; // Disable input (default: false) + maxHeight?: string; // Maximum chat height (default: '500px') + + // Avatars + userAvatarUrl?: string; // User avatar image URL + userAvatarFallback?: string; // User avatar fallback text (default: 'You') + assistantAvatarUrl?: string; // Assistant avatar image URL + assistantAvatarFallback?: string; // Assistant avatar fallback text (default: 'AI') + + // Auto-response (demo feature) + autoResponse?: boolean; // Enable auto-response (default: false) + autoResponseText?: string; // Auto-response message text + autoResponseDelay?: number; // Auto-response delay in ms (default: 1000) + + // Events + onSend?: (content: string, messages: ChatMessage[]) => void; // Send handler + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Customer Support + + + +### Product Assistant + + + +### Full Example + + + +## Features + +- **Message History**: Persistent conversation thread +- **User Input**: Text input with send button +- **Avatars**: Customizable user and assistant avatars +- **Timestamps**: Optional message timestamps +- **Auto-scroll**: Automatically scrolls to latest message +- **Auto-response**: Demo mode with automatic replies +- **Event Callbacks**: Hook into message send events +- **Responsive**: Adapts to different screen sizes + +## Use Cases + +- **Customer Support**: Live chat support interface +- **AI Assistants**: Chatbot and virtual assistant UIs +- **Help Centers**: Interactive help and documentation +- **Product Guides**: Guided product tours +- **FAQ Systems**: Interactive question answering diff --git a/docs/components/complex/data-table.mdx b/docs/components/complex/data-table.mdx new file mode 100644 index 000000000..18675d77c --- /dev/null +++ b/docs/components/complex/data-table.mdx @@ -0,0 +1,199 @@ +--- +title: "Data Table" +description: "Enterprise-grade data table with sorting, filtering, pagination, and row actions" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Data Table component provides comprehensive table functionality inspired by Airtable, including multi-column sorting, search, pagination, row selection, and export capabilities. + +## Basic Usage + + + +## With All Features + + + +## Schema + +```typescript +interface TableColumn { + header: string; // Column header text + accessorKey: string; // Data property key + width?: string; // Column width (e.g., '100px', '20%') + sortable?: boolean; // Enable sorting for this column +} + +interface DataTableSchema { + type: 'data-table'; + + // Structure + columns: TableColumn[]; // Column definitions + data: Record[]; // Table data + caption?: string; // Table caption + + // Features + pagination?: boolean; // Enable pagination (default: true) + pageSize?: number; // Items per page (default: 10) + searchable?: boolean; // Enable search (default: true) + selectable?: boolean; // Enable row selection (default: false) + sortable?: boolean; // Enable sorting (default: true) + exportable?: boolean; // Enable CSV export (default: false) + rowActions?: boolean; // Show edit/delete buttons (default: false) + + // Advanced features + resizableColumns?: boolean; // Allow column resizing (default: true) + reorderableColumns?: boolean; // Allow column reordering (default: true) + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Product Inventory + + + +### User Management + + + +### Sales Report + + + +## Features + +The Data Table component provides: + +- **Sorting**: Click column headers to sort (ascending/descending/none) +- **Search**: Real-time search across all columns +- **Pagination**: Navigate through large datasets +- **Selection**: Select multiple rows with checkboxes +- **Export**: Download table data as CSV +- **Row Actions**: Built-in edit and delete buttons +- **Resizable Columns**: Drag column borders to resize +- **Column Reordering**: Drag columns to reorder diff --git a/docs/components/complex/filter-builder.mdx b/docs/components/complex/filter-builder.mdx new file mode 100644 index 000000000..a70cb6ee7 --- /dev/null +++ b/docs/components/complex/filter-builder.mdx @@ -0,0 +1,218 @@ +--- +title: "Filter Builder" +description: "Visual query builder for constructing complex filter conditions" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Filter Builder component provides a visual interface for creating complex filter queries with support for nested conditions and multiple operators. + +## Basic Usage + + + +## With Initial Conditions + + + +## Schema + +```typescript +interface FilterField { + value: string; // Field identifier + label: string; // Display label + type?: 'text' | 'number' | 'date' | 'boolean'; // Field type +} + +interface FilterCondition { + id: string; // Condition identifier + field: string; // Field to filter on + operator: string; // Comparison operator + value: any; // Filter value +} + +interface FilterGroup { + id: string; // Group identifier + logic: 'and' | 'or'; // Logic operator (AND/OR) + conditions: (FilterCondition | FilterGroup)[]; // Conditions or nested groups +} + +interface FilterBuilderSchema { + type: 'filter-builder'; + + // Required + name: string; // Field name for form submission + fields: FilterField[]; // Available fields for filtering + + // Configuration + label?: string; // Component label + value?: FilterGroup; // Initial/controlled filter value + allowGroups?: boolean; // Allow nested groups (default: true) + maxDepth?: number; // Maximum nesting depth (default: 3) + + // Events + onChange?: (filter: FilterGroup) => void; // Change handler + + // Styling + className?: string; // Tailwind CSS classes + wrapperClass?: string; // Wrapper container classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Product Filters + + + +### User Query Builder + + + +### Advanced Query + + + +## Supported Operators + +The Filter Builder supports various comparison operators based on field type: + +- **Text fields**: equals, not equals, contains, starts with, ends with +- **Number fields**: equals, not equals, greater than, less than, between +- **Date fields**: equals, before, after, between +- **Boolean fields**: is true, is false + +## Use Cases + +- **Search interfaces**: Build advanced search forms +- **Data filtering**: Filter large datasets in tables +- **Report generation**: Create custom report criteria +- **Query builders**: Visual SQL/NoSQL query construction +- **Access control**: Define permission rules diff --git a/docs/components/complex/meta.json b/docs/components/complex/meta.json index 3b8b8be67..a32c82f1a 100644 --- a/docs/components/complex/meta.json +++ b/docs/components/complex/meta.json @@ -1,6 +1,14 @@ { "title": "Complex", "pages": [ - "table" + "table", + "data-table", + "calendar-view", + "timeline", + "carousel", + "scroll-area", + "resizable", + "filter-builder", + "chatbot" ] } diff --git a/docs/components/complex/resizable.mdx b/docs/components/complex/resizable.mdx new file mode 100644 index 000000000..a10982020 --- /dev/null +++ b/docs/components/complex/resizable.mdx @@ -0,0 +1,307 @@ +--- +title: "Resizable" +description: "Resizable panel groups with draggable handles" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Resizable component creates adjustable panel layouts with draggable handles, perfect for split views and customizable interfaces. + +## Basic Usage + + + +## Vertical Layout + + + +## Three Panels + + + +## Schema + +```typescript +interface ResizablePanel { + defaultSize: number; // Initial size percentage + minSize?: number; // Minimum size percentage + maxSize?: number; // Maximum size percentage + content: SchemaNode | SchemaNode[]; // Panel content +} + +interface ResizableSchema { + type: 'resizable'; + + // Configuration + direction?: 'horizontal' | 'vertical'; // Panel direction (default: 'horizontal') + minHeight?: string; // Minimum container height + withHandle?: boolean; // Show handle icons (default: true) + + // Panels + panels: ResizablePanel[]; // Array of panel configurations + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Code Editor Layout + + + +### Dashboard Layout + + + +### Mail Client + + diff --git a/docs/components/complex/scroll-area.mdx b/docs/components/complex/scroll-area.mdx new file mode 100644 index 000000000..558dc471d --- /dev/null +++ b/docs/components/complex/scroll-area.mdx @@ -0,0 +1,217 @@ +--- +title: "Scroll Area" +description: "Customizable scrollable container with styled scrollbars" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Scroll Area component provides a scrollable container with styled scrollbars that match your design system. + +## Basic Usage + + + +## Horizontal Scroll + + ({ + type: 'div', + className: 'w-40 h-32 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center', + children: [{ type: 'text', content: `Item ${i + 1}` }] + })) + } + ] + }} + title="Horizontal Scroll" +/> + +## Custom Heights + + + ({ + type: 'text', + content: `Line ${i + 1}`, + className: 'block' + })) + } + ] + }} + title="Short (150px)" + /> + ({ + type: 'text', + content: `Line ${i + 1}`, + className: 'block' + })) + } + ] + }} + title="Tall (300px)" + /> + + +## Schema + +```typescript +interface ScrollAreaSchema { + type: 'scroll-area'; + + // Dimensions + height?: string; // Container height (e.g., '200px', '50vh') + width?: string; // Container width (default: '100%') + + // Configuration + orientation?: 'vertical' | 'horizontal' | 'both'; // Scroll direction (default: 'vertical') + + // Content + content?: SchemaNode | SchemaNode[]; // Scrollable content + children?: SchemaNode | SchemaNode[]; // Alternative content prop + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Message List + + ({ + type: 'div', + className: 'flex gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100', + children: [ + { + type: 'div', + className: 'w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold flex-shrink-0', + children: [{ type: 'text', content: String.fromCharCode(65 + (i % 26)) }] + }, + { + type: 'div', + className: 'flex-1', + children: [ + { type: 'text', content: `User ${i + 1}`, className: 'font-semibold block' }, + { type: 'text', content: 'This is a sample message...', className: 'text-sm text-muted-foreground block' } + ] + } + ] + })) + } + ] + }} + title="Chat Messages" +/> + +### File List + + ({ + type: 'div', + className: 'p-3 hover:bg-slate-50 cursor-pointer flex items-center gap-3', + children: [ + { type: 'text', content: '📄', className: 'text-2xl' }, + { + type: 'div', + children: [ + { type: 'text', content: `document_${i + 1}.pdf`, className: 'block font-medium' }, + { type: 'text', content: `${Math.floor(Math.random() * 500)}KB`, className: 'text-xs text-muted-foreground block' } + ] + } + ] + })) + } + ] + }} + title="Document Browser" +/> + +### Code Block + + f.toUpperCase());\n}\n\nconst result = example();`, + className: 'whitespace-pre block' + } + ] + } + ] + }} + title="Code Preview" +/> diff --git a/docs/components/complex/timeline.mdx b/docs/components/complex/timeline.mdx new file mode 100644 index 000000000..25408d06a --- /dev/null +++ b/docs/components/complex/timeline.mdx @@ -0,0 +1,265 @@ +--- +title: "Timeline" +description: "Display events in chronological order with vertical, horizontal, or Gantt chart layouts" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Timeline component visualizes events in chronological order, supporting multiple layout variants including vertical lists, horizontal sequences, and Gantt-style project timelines. + +## Basic Usage (Vertical) + + + +## Horizontal Layout + + + +## With Icons + + + +## Schema + +```typescript +interface TimelineItem { + time?: string; // Item timestamp/date + title?: string; // Item title + description?: string; // Item description + content?: SchemaNode | SchemaNode[]; // Additional content + icon?: string; // Icon or emoji + variant?: 'default' | 'success' | 'warning' | 'error'; // Marker variant + className?: string; // Item CSS classes +} + +interface TimelineSchema { + type: 'timeline'; + + // Layout + variant?: 'vertical' | 'horizontal' | 'gantt'; // Timeline layout (default: 'vertical') + + // Items + items: TimelineItem[]; // Timeline items + + // Date formatting + dateFormat?: 'short' | 'long' | string; // Date display format (default: 'short') + + // Gantt-specific (when variant='gantt') + minDate?: string; // Gantt chart start date + maxDate?: string; // Gantt chart end date + timeScale?: 'day' | 'week' | 'month'; // Gantt time scale + + // Events + onItemClick?: (item: any) => void; // Item click handler + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Order History + + + +### Project Milestones + + + +### Changelog + + diff --git a/docs/components/data-display/calendar.mdx b/docs/components/data-display/calendar.mdx deleted file mode 100644 index bd8963913..000000000 --- a/docs/components/data-display/calendar.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: "Calendar" -description: "Display and select dates in a calendar view" ---- - -import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; - -The Calendar component displays a calendar for date selection. - -## Basic Usage - - - -## Multiple Selection - - - -## Date Range - - - -## Schema - -```typescript -interface CalendarSchema { - type: 'calendar'; - mode?: 'single' | 'multiple' | 'range'; - selected?: Date | Date[] | { from: Date; to: Date }; - - // Events - onSelect?: string | ActionConfig; - - // States - disabled?: boolean | Date[]; // Disabled dates - - // Styling - className?: string; -} -``` - -## Examples - -### With Disabled Dates - - diff --git a/docs/components/data-display/carousel.mdx b/docs/components/data-display/carousel.mdx deleted file mode 100644 index 8b347b6e7..000000000 --- a/docs/components/data-display/carousel.mdx +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: "Carousel" -description: "Slideshow component for cycling through content" ---- - -import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; - -The Carousel component displays content in a slideshow format with navigation controls. - -## Basic Usage - - - -## Auto-play - - - -## Schema - -```typescript -interface CarouselSchema { - type: 'carousel'; - items: ComponentSchema[]; // Carousel slides - autoPlay?: boolean; // Auto-advance slides - interval?: number; // Auto-play interval (ms) - loop?: boolean; // Loop back to start - showControls?: boolean; // Show prev/next buttons - showIndicators?: boolean; // Show dot indicators - className?: string; -} -``` - -## Examples - -### Image Gallery - - ({ - type: 'aspect-ratio', - ratio: 16/9, - content: { - type: 'image', - src: `https://picsum.photos/800/450?random=${i}`, - alt: `Image ${i + 1}` - } - })) - }} - title="Image Gallery" -/> diff --git a/docs/components/data-display/meta.json b/docs/components/data-display/meta.json index 40459a02e..64822d678 100644 --- a/docs/components/data-display/meta.json +++ b/docs/components/data-display/meta.json @@ -6,9 +6,8 @@ "alert", "list", "breadcrumb", - "calendar", - "carousel", "kbd", - "timeline" + "statistic", + "tree-view" ] } diff --git a/docs/components/data-display/statistic.mdx b/docs/components/data-display/statistic.mdx new file mode 100644 index 000000000..9f0261ef5 --- /dev/null +++ b/docs/components/data-display/statistic.mdx @@ -0,0 +1,192 @@ +--- +title: "Statistic" +description: "Display key metrics and statistical values with trend indicators" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Statistic component displays numerical data and key metrics with optional labels, descriptions, and trend indicators. + +## Basic Usage + + + +## With Trend Indicators + + + + + + + +## With Descriptions + + + +## Schema + +```typescript +interface StatisticSchema { + type: 'statistic'; + + // Content + label?: string; // Label/title of the statistic + value: string | number; // Main value to display + description?: string; // Additional description text + icon?: string; // Optional icon name + + // Trend indicator + trend?: 'up' | 'down' | 'neutral'; // Trend direction + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Dashboard Metrics + + + +### Sales Dashboard + + + +### Simple Stats Row + + diff --git a/docs/components/data-display/timeline.mdx b/docs/components/data-display/timeline.mdx deleted file mode 100644 index 166268a4f..000000000 --- a/docs/components/data-display/timeline.mdx +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: "Timeline" -description: "Display events in chronological order" ---- - -import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; - -The Timeline component displays events in chronological order with a vertical line. - -## Basic Usage - - - -## With Icons - - - -## Schema - -```typescript -interface TimelineItem { - title: string; - description?: string; - date?: string; - icon?: string; -} - -interface TimelineSchema { - type: 'timeline'; - items: TimelineItem[]; // Timeline events - className?: string; -} -``` diff --git a/docs/components/data-display/tree-view.mdx b/docs/components/data-display/tree-view.mdx new file mode 100644 index 000000000..c44ec4bf1 --- /dev/null +++ b/docs/components/data-display/tree-view.mdx @@ -0,0 +1,206 @@ +--- +title: "Tree View" +description: "Hierarchical tree structure for displaying nested data" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Tree View component displays hierarchical data in an expandable tree structure, perfect for file explorers, organizational charts, and nested navigation. + +## Basic Usage + + + +## Nested Structure + + + +## Schema + +```typescript +interface TreeNode { + id: string; // Unique node identifier + label: string; // Node label text + icon?: string; // Icon name ('folder' or 'file') + children?: TreeNode[]; // Child nodes + data?: any; // Additional node data +} + +interface TreeViewSchema { + type: 'tree-view'; + + // Data + data?: TreeNode[]; // Tree data (alias for nodes) + nodes?: TreeNode[]; // Tree nodes + title?: string; // Tree title + + // Selection + defaultExpandedIds?: string[]; // Default expanded node IDs + defaultSelectedIds?: string[]; // Default selected node IDs + expandedIds?: string[]; // Controlled expanded node IDs + selectedIds?: string[]; // Controlled selected node IDs + multiSelect?: boolean; // Enable multi-selection (default: false) + + // Appearance + showLines?: boolean; // Show connecting lines (default: true) + + // Events + onSelectChange?: (selectedIds: string[]) => void; // Selection change handler + onExpandChange?: (expandedIds: string[]) => void; // Expand change handler + onNodeClick?: (node: TreeNode) => void; // Node click handler + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Organization Chart + + + +### Navigation Menu + + diff --git a/docs/components/disclosure/meta.json b/docs/components/disclosure/meta.json index 060414ee8..0c021b56d 100644 --- a/docs/components/disclosure/meta.json +++ b/docs/components/disclosure/meta.json @@ -3,7 +3,6 @@ "pages": [ "accordion", "collapsible", - "toggle", "toggle-group" ] } diff --git a/docs/components/disclosure/toggle.mdx b/docs/components/disclosure/toggle.mdx deleted file mode 100644 index 3963b7f7a..000000000 --- a/docs/components/disclosure/toggle.mdx +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: "Toggle" -description: "A two-state button that can be on or off" ---- - -import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; - -The Toggle component is a two-state button that can be toggled on or off. - -## Basic Usage - - - -## Variants - - - - - - -## Sizes - - - - - - - -## Schema - -```typescript -interface ToggleSchema { - type: 'toggle'; - label?: string; // Toggle label - icon?: string; // Lucide icon name - variant?: 'default' | 'outline'; - size?: 'sm' | 'default' | 'lg'; - pressed?: boolean; // Toggle state - - // Events - onPressedChange?: string | ActionConfig; - - // States - disabled?: boolean; - - // Styling - className?: string; -} -``` - -## Examples - -### Text Formatting Toolbar - - diff --git a/docs/components/feedback/meta.json b/docs/components/feedback/meta.json index c0f19aea7..7145611d4 100644 --- a/docs/components/feedback/meta.json +++ b/docs/components/feedback/meta.json @@ -7,6 +7,7 @@ "spinner", "empty", "toast", - "sonner" + "sonner", + "toaster" ] } diff --git a/docs/components/feedback/toaster.mdx b/docs/components/feedback/toaster.mdx new file mode 100644 index 000000000..0d917e417 --- /dev/null +++ b/docs/components/feedback/toaster.mdx @@ -0,0 +1,125 @@ +--- +title: "Toaster" +description: "Container for displaying toast notifications" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Toaster component provides a container for toast notifications. It should be placed once at the root level of your application to enable toast functionality. + +## Basic Usage + +The Toaster component is typically added to your app's layout and doesn't require configuration: + + + +## Providers + +ObjectUI supports two toast providers: + + + + + + +## Schema + +```typescript +interface ToasterSchema { + type: 'toaster'; + + // Configuration + provider?: 'default' | 'sonner'; // Toast provider (default: 'default') + position?: 'top-left' | 'top-center' | 'top-right' | + 'bottom-left' | 'bottom-center' | 'bottom-right'; // Toast position + limit?: number; // Maximum number of toasts (default: 5) + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### In App Layout + +```typescript +{ + type: 'div', + className: 'min-h-screen', + children: [ + // Your app content + { type: 'page', title: 'Dashboard', body: [...] }, + + // Toaster at root level + { type: 'toaster', provider: 'sonner' } + ] +} +``` + +### Usage with Toast Actions + +The Toaster component works in conjunction with Toast components to display notifications. Once the Toaster is mounted, you can trigger toasts programmatically or via Toast components: + + + +### Configuration + + + +## Notes + +- Place the Toaster component once in your app's root layout +- The `default` provider uses the standard Shadcn/UI toast system +- The `sonner` provider uses Sonner for more advanced toast features +- Toast notifications are triggered separately using toast functions or Toast components +- The Toaster manages the positioning and lifecycle of all toasts diff --git a/docs/components/form/calendar.mdx b/docs/components/form/calendar.mdx new file mode 100644 index 000000000..1cae87248 --- /dev/null +++ b/docs/components/form/calendar.mdx @@ -0,0 +1,107 @@ +--- +title: "Calendar" +description: "Date selection component with single, multiple, and range modes" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Calendar component allows users to select dates in various modes including single date, multiple dates, or date ranges. + +## Basic Usage + + + +## Selection Modes + + + + + + +## Multiple Selection + + + +## Schema + +```typescript +interface CalendarSchema { + type: 'calendar'; + + // Selection + mode?: 'single' | 'multiple' | 'range'; // Selection mode (default: 'single') + defaultValue?: Date | Date[]; // Default selected date(s) + value?: Date | Date[]; // Controlled selected date(s) + + // Constraints + minDate?: Date | string; // Minimum selectable date + maxDate?: Date | string; // Maximum selectable date + disabled?: boolean; // Whether calendar is disabled + + // Events + onChange?: (date: Date | Date[] | undefined) => void; // Date change handler + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### In a Form + + + +### With Custom Styling + + diff --git a/docs/components/form/file-upload.mdx b/docs/components/form/file-upload.mdx new file mode 100644 index 000000000..e90fcf0c1 --- /dev/null +++ b/docs/components/form/file-upload.mdx @@ -0,0 +1,148 @@ +--- +title: "File Upload" +description: "Modern file upload component with drag-and-drop support" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The File Upload component provides a futuristic interface for uploading files with visual feedback, progress indication, and multiple file support. + +## Basic Usage + + + +## Single vs Multiple + + + + + + +## File Type Restrictions + + + +## Schema + +```typescript +interface FileUploadSchema { + type: 'file-upload'; + + // Required + id: string; // Field identifier + + // Configuration + name?: string; // Field name for form submission + label?: string; // Label text + buttonText?: string; // Upload button text + + // File constraints + accept?: string; // Accepted file types (e.g., 'image/*', '.pdf,.doc') + multiple?: boolean; // Allow multiple files (default: false) + maxSize?: number; // Maximum file size in bytes + maxFiles?: number; // Maximum number of files (for multiple) + + // States + disabled?: boolean; // Whether field is disabled + + // Help text + description?: string; // Help text or description + error?: string; // Error message + + // Styling + className?: string; // Tailwind CSS classes + wrapperClass?: string; // Wrapper container classes + + // Base properties + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Document Upload + + + +### Profile Picture + + + +### Full Example + + diff --git a/docs/components/form/meta.json b/docs/components/form/meta.json index e83fe7126..52b243d2c 100644 --- a/docs/components/form/meta.json +++ b/docs/components/form/meta.json @@ -14,6 +14,9 @@ "date-picker", "input-otp", "command", - "form" + "form", + "calendar", + "file-upload", + "toggle" ] } diff --git a/docs/components/form/toggle.mdx b/docs/components/form/toggle.mdx new file mode 100644 index 000000000..52d25113e --- /dev/null +++ b/docs/components/form/toggle.mdx @@ -0,0 +1,187 @@ +--- +title: "Toggle" +description: "Two-state button for toggling options on and off" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Toggle component is a button that can be toggled between on and off states, useful for settings and preferences. + +## Basic Usage + + + +## Variants + + + + + + +## Sizes + + + +## States + + + + + + +## Schema + +```typescript +interface ToggleSchema { + type: 'toggle'; + + // Content + label?: string; // Toggle label text + children?: SchemaNode | SchemaNode[]; // Alternative content + + // State + defaultPressed?: boolean; // Default pressed state + pressed?: boolean; // Controlled pressed state + disabled?: boolean; // Whether toggle is disabled + + // Appearance + variant?: 'default' | 'outline'; // Toggle variant (default: 'default') + size?: 'default' | 'sm' | 'lg'; // Toggle size (default: 'default') + + // Events + onChange?: (pressed: boolean) => void; // Change handler + + // Accessibility + ariaLabel?: string; // Accessible label + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### With Icons + + + +### In a Settings Panel + + + +### Toolbar Toggles + + diff --git a/docs/components/layout/meta.json b/docs/components/layout/meta.json index 8cb6a1da0..c209629ad 100644 --- a/docs/components/layout/meta.json +++ b/docs/components/layout/meta.json @@ -8,7 +8,7 @@ "stack", "tabs", "aspect-ratio", - "scroll-area", - "resizable" + "page", + "semantic" ] } diff --git a/docs/components/layout/page.mdx b/docs/components/layout/page.mdx new file mode 100644 index 000000000..97f6983f4 --- /dev/null +++ b/docs/components/layout/page.mdx @@ -0,0 +1,188 @@ +--- +title: "Page" +description: "Full-page container with title, description, and content sections" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Page component provides a standardized full-page layout with built-in support for titles, descriptions, and organized content sections. + +## Basic Usage + + + +## With Title and Description + + + +## Schema + +```typescript +interface PageSchema { + type: 'page'; + + // Header + title?: string; // Page title + icon?: string; // Page icon (Lucide icon name) + description?: string; // Page description + + // Content + body?: SchemaNode[]; // Main content array + children?: SchemaNode | SchemaNode[]; // Alternative content prop + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Dashboard Page + + + +### Settings Page + + + +### Content Page + + diff --git a/docs/components/layout/resizable.mdx b/docs/components/layout/resizable.mdx deleted file mode 100644 index f2e205554..000000000 --- a/docs/components/layout/resizable.mdx +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: "Resizable" -description: "Resizable panel groups with draggable handles" ---- - -import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; - -The Resizable component allows users to resize panels by dragging handles between them. - -## Basic Usage - - - -## Vertical Layout - - - -## Schema - -```typescript -interface ResizablePanel { - defaultSize?: number; // Default size (percentage) - minSize?: number; // Minimum size - maxSize?: number; // Maximum size - content: ComponentSchema; // Panel content -} - -interface ResizableSchema { - type: 'resizable'; - direction: 'horizontal' | 'vertical'; - panels: ResizablePanel[]; // Panels to display - className?: string; -} -``` diff --git a/docs/components/layout/scroll-area.mdx b/docs/components/layout/scroll-area.mdx deleted file mode 100644 index 03e527d13..000000000 --- a/docs/components/layout/scroll-area.mdx +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: "Scroll Area" -description: "Styled scrollable container with custom scrollbars" ---- - -import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; - -The Scroll Area component provides a scrollable container with customized scrollbars. - -## Basic Usage - - ({ - type: 'text', - value: `Item ${i + 1}` - })) - } - }} - title="Vertical Scroll" -/> - -## Horizontal Scroll - - ({ - type: 'badge', - text: `Tag ${i + 1}` - })) - } - }} - title="Horizontal Scroll" -/> - -## Schema - -```typescript -interface ScrollAreaSchema { - type: 'scroll-area'; - content: ComponentSchema; // Scrollable content - height?: string; // Container height - width?: string; // Container width - orientation?: 'vertical' | 'horizontal'; - className?: string; -} -``` diff --git a/docs/components/layout/semantic.mdx b/docs/components/layout/semantic.mdx new file mode 100644 index 000000000..e1aa8dc52 --- /dev/null +++ b/docs/components/layout/semantic.mdx @@ -0,0 +1,248 @@ +--- +title: "Semantic" +description: "Semantic HTML5 elements for structured content (header, nav, main, aside, section, article, footer)" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +Semantic components provide HTML5 semantic elements that give meaning to the structure of web content, improving accessibility and SEO. + +## Available Elements + +ObjectUI provides semantic wrappers for these HTML5 elements: +- `header` - Page or section header +- `nav` - Navigation section +- `main` - Main content area +- `aside` - Sidebar or complementary content +- `section` - Thematic grouping of content +- `article` - Self-contained content +- `footer` - Page or section footer + +## Basic Usage + + + +## Header + + + +## Navigation + + + +## Section and Article + + + + + + +## Aside and Footer + + + + + + +## Schema + +```typescript +// All semantic elements share the same schema structure +interface SemanticSchema { + type: 'header' | 'nav' | 'main' | 'aside' | 'section' | 'article' | 'footer'; + + // Content + children?: SchemaNode | SchemaNode[]; // Child components + body?: SchemaNode[]; // Alternative content prop + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Page Layout + + + +### Blog Post + + diff --git a/docs/components/meta.json b/docs/components/meta.json index 58510a9bc..975888293 100644 --- a/docs/components/meta.json +++ b/docs/components/meta.json @@ -9,6 +9,7 @@ "feedback", "overlay", "disclosure", + "navigation", "complex" ] } diff --git a/docs/components/navigation/header-bar.mdx b/docs/components/navigation/header-bar.mdx new file mode 100644 index 000000000..0b56fe502 --- /dev/null +++ b/docs/components/navigation/header-bar.mdx @@ -0,0 +1,145 @@ +--- +title: "Header Bar" +description: "Application header with sidebar trigger and breadcrumb navigation" +--- + +import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo'; + +The Header Bar component provides a standard application header with sidebar trigger button and breadcrumb navigation. + +## Basic Usage + + + +## With Multiple Breadcrumbs + + + +## Schema + +```typescript +interface Breadcrumb { + label: string; // Breadcrumb text + href?: string; // Link URL (optional for last item) +} + +interface HeaderBarSchema { + type: 'header-bar'; + + // Breadcrumbs + crumbs?: Breadcrumb[]; // Breadcrumb items + + // Styling + className?: string; // Tailwind CSS classes + + // Base properties + id?: string; + visible?: boolean | string; + testId?: string; +} +``` + +## Examples + +### Application Header + + + +### Settings Navigation + + + +### Admin Panel + + + +## Usage Notes + +- The Header Bar component includes a sidebar trigger button that works with the Sidebar component +- The last breadcrumb item is typically rendered as plain text (current page) +- All other breadcrumb items should have an `href` to enable navigation +- The component has a fixed height of 64px (`h-16`) +- Includes a vertical separator between the sidebar trigger and breadcrumbs + +## Integration + +This component is designed to work with the sidebar layout pattern: + +```typescript +{ + type: 'div', + children: [ + { type: 'sidebar', /* sidebar config */ }, + { + type: 'div', + className: 'flex-1', + children: [ + { + type: 'header-bar', + crumbs: [ + { label: 'Home', href: '#' }, + { label: 'Current' } + ] + }, + { + type: 'main', + className: 'p-6', + children: [ + // Main content + ] + } + ] + } + ] +} +``` diff --git a/docs/components/navigation/meta.json b/docs/components/navigation/meta.json new file mode 100644 index 000000000..9117a04b9 --- /dev/null +++ b/docs/components/navigation/meta.json @@ -0,0 +1,6 @@ +{ + "title": "Navigation", + "pages": [ + "header-bar" + ] +} From 0cb016113a36a4b24ec606bb4a5321fff678b6ef Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 23 Jan 2026 11:02:46 +0000 Subject: [PATCH 3/3] Add complete documentation for all 76 components with proper navigation structure Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com> --- apps/site/source.config.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/site/source.config.ts b/apps/site/source.config.ts index d7dcfab00..4e48aaf08 100644 --- a/apps/site/source.config.ts +++ b/apps/site/source.config.ts @@ -9,7 +9,13 @@ export const { docs, meta } = defineDocs({ '!**/node_modules/**', '!**/.vitepress/**', '!**/dist/**', - '!**/.*/**', + '!**/.*/**', + '!**/COMPONENT_MAPPING_GUIDE.md', + '!**/COMPONENT_NAMING_CONVENTIONS.md', + '!**/DEVELOPMENT_ROADMAP_2026.md', + '!**/EVALUATION_INDEX.md', + '!**/OBJECTSTACK_COMPONENT_EVALUATION.md', + '!**/OBJECTSTACK_COMPONENT_EVALUATION_EN.md', ], }, });