Add and restructure component documentation

Introduces detailed documentation for all component categories under docs/components, including new markdown files for basic, charts, data-display, feedback, form, kanban, layout, markdown, navigation, and overlay components. Updates the VitePress config to organize the sidebar and navigation for the new structure. Refactors the API docs to reference new component docs. Enhances the input renderer to support more props and validation. Updates type definitions for TableSchema (footer), CardSchema (body/children), and ResizableSchema (minHeight, withHandle).

Author: hotlong

docs/.vitepress/config.mts

@@ -14,7 +14,7 @@ export default defineConfig({
 
     nav: [
       { text: 'Guide', link: '/guide/introduction' },
-      { text: 'Components', link: '/components/form' },
+      { text: 'Components', link: '/components/' },
       { 
         text: 'Reference',
         items: [
@@ -118,11 +118,41 @@ export default defineConfig({
 
       '/components/': [
         {
-          text: 'Component Examples',
+          text: 'Overview',
           items: [
-            { text: 'Form Component', link: '/components/form' },
+            { text: 'Component Index', link: '/components/' }
+          ]
+        },
+        {
+          text: 'General',
+          items: [
+            { text: 'Basic Components', link: '/components/basic' },
+            { text: 'Layout Components', link: '/components/layout' }
+          ]
+        },
+        {
+          text: 'Data Entry',
+          items: [
+            { text: 'Form Components', link: '/components/form' }
+          ]
+        },
+        {
+          text: 'Data Display',
+          items: [
+            { text: 'Data Display', link: '/components/data-display' },
+            { text: 'Charts', link: '/components/charts' },
+            { text: 'Kanban', link: '/components/kanban' },
             { text: 'Calendar View', link: '/components/calendar-view' }
           ]
+        },
+        {
+          text: 'Interaction',
+          items: [
+            { text: 'Navigation', link: '/components/navigation' },
+            { text: 'Feedback', link: '/components/feedback' },
+            { text: 'Overlay', link: '/components/overlay' },
+            { text: 'Markdown', link: '/components/markdown' }
+          ]
         }
       ],
 

docs/api/components.md

@@ -18,98 +18,20 @@ import { registerDefaultRenderers } from '@object-ui/components'
 registerDefaultRenderers()
 ```
 
-Or register individual components:
+## Component Reference
 
-```tsx
-import { Button, Input, Form } from '@object-ui/components'
-import { registerRenderer } from '@object-ui/react'
-
-registerRenderer('button', Button)
-registerRenderer('input', Input)
-registerRenderer('form', Form)
-```
-
-## Component List
-
-### Form Components
-
-- `input` - Text input field
-- `textarea` - Multi-line text input
-- `select` - Dropdown select
-- `checkbox` - Checkbox input
-- `radio` - Radio button
-- `date-picker` - Date selection
-- `file-upload` - File upload
-
-### Data Display
-
-- `table` - Data table with sorting/pagination
-- `list` - List view
-- `card` - Card container
-- `tree` - Tree view
-
-### Layout
-
-- `grid` - Grid layout
-- `flex` - Flexbox layout
-- `container` - Container wrapper
-- `tabs` - Tab navigation
-
-### Feedback
-
-- `alert` - Alert messages
-- `toast` - Toast notifications
-- `dialog` - Modal dialog
-- `loading` - Loading indicators
-
-## Customization
-
-### Styling
-
-All components accept Tailwind classes:
-
-```json
-{
-  "type": "button",
-  "className": "bg-blue-500 hover:bg-blue-700 text-white"
-}
-```
-
-### Extending Components
-
-Create custom components:
-
-```tsx
-import { Button } from '@object-ui/components'
-
-function CustomButton(props) {
-  return (
-    <Button
-      {...props}
-      className={`custom-styles ${props.className}`}
-    />
-  )
-}
-
-registerRenderer('custom-button', CustomButton)
-```
-
-## Theming
-
-Apply themes to all components:
-
-```tsx
-import { ThemeProvider } from '@object-ui/components'
-
-<ThemeProvider theme="dark">
-  <SchemaRenderer schema={schema} />
-</ThemeProvider>
-```
+Detailed documentation for each component category:
 
-## API Reference
+*   [Layout Components](../components/layout.md) (Grid, Card, Container, etc.)
+*   [Basic Components](../components/basic.md) (Text, Image, Icon, HTML)
+*   [Form Components](../components/form.md) (Input, Select, Checkbox, Form, etc.)
+*   [Data Display](../components/data-display.md) (Table, List, Tag, Tree, etc.)
+*   [Navigation](../components/navigation.md) (Button, Link, Menu, etc.)
+*   [Feedback](../components/feedback.md) (Alert, Progress, Toast, etc.)
+*   [Overlay](../components/overlay.md) (Dialog, Drawer, Tooltip, etc.)
 
-Full component API documentation coming soon.
+## Plugins
 
-For now, see:
-- [GitHub Repository](https://github.com/objectql/objectui/tree/main/packages/components)
-- [Storybook](https://storybook.objectui.org) (coming soon)
+*   [Charts](../components/charts.md) (Bar, Line, Pie, etc.)
+*   [Kanban](../components/kanban.md) (Board View)
+*   [Markdown](../components/markdown.md) (Rich Text)

docs/components/basic.md

@@ -0,0 +1,57 @@
+# Basic Components
+
+Fundamental UI elements for displaying simple content.
+
+## Text `text`
+
+Displays text with standardized typography styles.
+
+```typescript
+interface TextSchema {
+  type: 'text';
+  value: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'lead' | 'large' | 'small' | 'muted';
+  align?: 'left' | 'center' | 'right' | 'justify';
+  color?: string; // Text color class
+}
+```
+
+## Html `html`
+
+Render raw HTML content safely.
+
+```typescript
+interface HtmlSchema {
+  type: 'html';
+  html: string; // The HTML string to render
+}
+```
+
+## Image `image`
+
+Displays an image with optional fallback.
+
+```typescript
+interface ImageSchema {
+  type: 'image';
+  src: string;
+  alt?: string;
+  width?: number | string;
+  height?: number | string;
+  fallback?: string; // URL for fallback image
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+```
+
+## Icon `icon`
+
+Displays an icon from the Lucide library.
+
+```typescript
+interface IconSchema {
+  type: 'icon';
+  name: string; // Lucide icon name (kebab-case)
+  size?: number | 'sm' | 'md' | 'lg' | 'xl';
+  color?: string;
+}
+```

docs/components/charts.md

@@ -0,0 +1,69 @@
+# Chart Components
+
+Visualizations for data analytics.
+
+## Bar Chart `bar-chart`
+
+Vertical or horizontal bar chart.
+
+```typescript
+interface BarChartSchema {
+  type: 'bar-chart';
+  data: any[]; // Or bound via context
+  categories: string[]; // Fields to plot as bars (e.g. ["sales", "profit"])
+  index: string; // Field for X-axis (e.g. "month")
+  colors?: string[]; // Array of color codes or CSS variables
+  valueFormatter?: string; // Function name to format values
+  yAxisWidth?: number;
+  layout?: 'vertical' | 'horizontal';
+  stack?: boolean; // Stacked bars
+}
+```
+
+## Line Chart `line-chart`
+
+Line chart for trends over time.
+
+```typescript
+interface LineChartSchema {
+  type: 'line-chart';
+  data: any[];
+  categories: string[];
+  index: string;
+  colors?: string[];
+  valueFormatter?: string;
+  yAxisWidth?: number;
+  curveType?: 'monotone' | 'linear' | 'step'; // Curve interpolation
+}
+```
+
+## Pie Chart `pie-chart`
+
+Circular chart for part-to-whole comparison.
+
+```typescript
+interface PieChartSchema {
+  type: 'pie-chart';
+  data: any[];
+  category: string; // Field for segment names
+  value: string; // Field for segment values
+  colors?: string[];
+  valueFormatter?: string;
+  donut?: boolean; // Donut style
+}
+```
+
+## Area Chart `area-chart`
+
+Area chart for filled trends.
+
+```typescript
+interface AreaChartSchema {
+  type: 'area-chart';
+  data: any[];
+  categories: string[];
+  index: string;
+  colors?: string[];
+  stack?: boolean;
+}
+```