@object-ui/components 0.3.0

package/docs/FilterBuilder.md

@@ -0,0 +1,268 @@
+# Filter Builder Component
+
+An Airtable-like filter builder component for building complex query conditions in Object UI.
+
+## Overview
+
+The Filter Builder component provides a user-friendly interface for creating and managing filter conditions. It supports:
+
+- ✅ Dynamic add/remove filter conditions
+- ✅ Field selection from configurable list
+- ✅ Type-aware operators (text, number, boolean, date, select)
+- ✅ AND/OR logic toggling
+- ✅ Clear all filters button
+- ✅ Date picker support for date fields
+- ✅ Dropdown support for select fields
+- ✅ Schema-driven configuration
+- ✅ Tailwind CSS styled with Shadcn UI components
+
+## Usage
+
+### Basic Example
+
+```typescript
+{
+  type: 'filter-builder',
+  name: 'userFilters',
+  label: 'User Filters',
+  fields: [
+    { value: 'name', label: 'Name', type: 'text' },
+    { value: 'email', label: 'Email', type: 'text' },
+    { value: 'age', label: 'Age', type: 'number' },
+    { value: 'status', label: 'Status', type: 'text' }
+  ],
+  value: {
+    id: 'root',
+    logic: 'and',
+    conditions: [
+      {
+        id: 'cond-1',
+        field: 'status',
+        operator: 'equals',
+        value: 'active'
+      }
+    ]
+  }
+}
+```
+
+### With Select Fields
+
+```typescript
+{
+  type: 'filter-builder',
+  name: 'productFilters',
+  label: 'Product Filters',
+  fields: [
+    { value: 'name', label: 'Product Name', type: 'text' },
+    { value: 'price', label: 'Price', type: 'number' },
+    { 
+      value: 'category', 
+      label: 'Category', 
+      type: 'select',
+      options: [
+        { value: 'electronics', label: 'Electronics' },
+        { value: 'clothing', label: 'Clothing' },
+        { value: 'food', label: 'Food' }
+      ]
+    },
+    { value: 'inStock', label: 'In Stock', type: 'boolean' }
+  ],
+  value: {
+    id: 'root',
+    logic: 'and',
+    conditions: []
+  }
+}
+```
+
+### With Date Fields
+
+```typescript
+{
+  type: 'filter-builder',
+  name: 'orderFilters',
+  label: 'Order Filters',
+  fields: [
+    { value: 'orderId', label: 'Order ID', type: 'text' },
+    { value: 'amount', label: 'Amount', type: 'number' },
+    { value: 'orderDate', label: 'Order Date', type: 'date' },
+    { value: 'shipped', label: 'Shipped', type: 'boolean' }
+  ],
+  showClearAll: true
+}
+```
+
+## Props
+
+### Schema Properties
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `type` | `string` | ✅ | Must be `'filter-builder'` |
+| `name` | `string` | ✅ | Form field name for the filter value |
+| `label` | `string` | ❌ | Label displayed above the filter builder |
+| `fields` | `Field[]` | ✅ | Array of available fields for filtering |
+| `value` | `FilterGroup` | ❌ | Initial filter configuration |
+| `showClearAll` | `boolean` | ❌ | Show "Clear all" button (default: true) |
+
+### Field Type
+
+```typescript
+interface Field {
+  value: string;    // Field identifier
+  label: string;    // Display label
+  type?: string;    // Field type: 'text' | 'number' | 'boolean' | 'date' | 'select'
+  options?: Array<{ value: string; label: string }> // For select fields
+}
+```
+
+### FilterGroup Type
+
+```typescript
+interface FilterGroup {
+  id: string;                    // Group identifier
+  logic: 'and' | 'or';          // Logic operator
+  conditions: FilterCondition[]; // Array of conditions
+}
+
+interface FilterCondition {
+  id: string;                    // Condition identifier
+  field: string;                 // Field value
+  operator: string;              // Operator (see below)
+  value: string | number | boolean; // Filter value
+}
+```
+
+## Operators
+
+The available operators change based on the field type:
+
+### Text Fields
+- `equals` - Equals
+- `notEquals` - Does not equal
+- `contains` - Contains
+- `notContains` - Does not contain
+- `isEmpty` - Is empty
+- `isNotEmpty` - Is not empty
+
+### Number Fields
+- `equals` - Equals
+- `notEquals` - Does not equal
+- `greaterThan` - Greater than
+- `lessThan` - Less than
+- `greaterOrEqual` - Greater than or equal
+- `lessOrEqual` - Less than or equal
+- `isEmpty` - Is empty
+- `isNotEmpty` - Is not empty
+
+### Boolean Fields
+- `equals` - Equals
+- `notEquals` - Does not equal
+
+### Date Fields
+- `equals` - Equals
+- `notEquals` - Does not equal
+- `before` - Before
+- `after` - After
+- `between` - Between
+- `isEmpty` - Is empty
+- `isNotEmpty` - Is not empty
+
+### Select Fields
+- `equals` - Equals
+- `notEquals` - Does not equal
+- `in` - In
+- `notIn` - Not in
+- `isEmpty` - Is empty
+- `isNotEmpty` - Is not empty
+
+## Events
+
+The component emits change events when the filter configuration is modified:
+
+```typescript
+{
+  target: {
+    name: 'filters',
+    value: {
+      id: 'root',
+      logic: 'and',
+      conditions: [...]
+    }
+  }
+}
+```
+
+## Demo
+
+To see the filter builder in action:
+
+```bash
+pnpm --filter prototype dev
+# Visit http://localhost:5173/?demo=filter-builder
+```
+
+## Styling
+
+The component is fully styled with Tailwind CSS and follows the Object UI design system. All Shadcn UI components are used for consistent look and feel.
+
+You can customize the appearance using the `className` prop or by overriding Tailwind classes.
+
+## Integration
+
+The Filter Builder integrates seamlessly with Object UI's schema system and can be used in:
+
+- Forms
+- Data tables
+- Search interfaces
+- Admin panels
+- Dashboard filters
+
+## Example in Context
+
+```typescript
+const pageSchema = {
+  type: 'page',
+  title: 'User Management',
+  body: [
+    {
+      type: 'card',
+      body: [
+        {
+          type: 'filter-builder',
+          name: 'userFilters',
+          label: 'Filter Users',
+          fields: [
+            { value: 'name', label: 'Name', type: 'text' },
+            { value: 'email', label: 'Email', type: 'text' },
+            { value: 'age', label: 'Age', type: 'number' },
+            { value: 'department', label: 'Department', type: 'text' },
+            { value: 'active', label: 'Active', type: 'boolean' }
+          ]
+        }
+      ]
+    },
+    {
+      type: 'table',
+      // table configuration...
+    }
+  ]
+};
+```
+
+## Technical Details
+
+- Built with React 18+ hooks
+- Uses Radix UI primitives (Select, Popover)
+- Type-safe with TypeScript
+- Accessible keyboard navigation
+- Responsive design
+
+## Browser Support
+
+Works in all modern browsers that support:
+- ES6+
+- CSS Grid
+- Flexbox
+- crypto.randomUUID()

package/metadata/Chart.component.yml

@@ -0,0 +1,30 @@
+name: Chart
+label: Chart
+description: Data visualization component based on Recharts/ECharts
+category: visualization
+version: 1.0.0
+framework: react
+
+props:
+  - name: type
+    type: string
+    enum: [bar, line, pie, area, radar]
+    required: true
+  - name: data
+    type: array
+    required: true
+  - name: series
+    type: array
+    description: Configuration for data series
+  - name: xAxis
+    type: object
+  - name: yAxis
+    type: object
+
+events:
+  - name: onClick
+    payload: "{ dataIndex: number, value: any }"
+
+features:
+  responsive: true
+  dark_mode: true

package/metadata/FilterBuilder.component.yml

@@ -0,0 +1,39 @@
+name: FilterBuilder
+label: Filter Builder
+description: Airtable-like filter builder for creating complex query conditions
+category: complex
+version: 1.0.0
+framework: react
+
+props:
+  - name: label
+    type: string
+    description: Label text displayed above the filter builder
+  - name: name
+    type: string
+    required: true
+    description: Form field name for the filter value
+  - name: fields
+    type: array
+    required: true
+    description: Available fields for filtering
+    schema:
+      - value: string
+      - label: string
+      - type: string
+  - name: value
+    type: object
+    description: Current filter configuration
+    schema:
+      - id: string
+      - logic: enum[and, or]
+      - conditions: array
+
+events:
+  - name: onChange
+    payload: "{ name: string, value: FilterGroup }"
+
+features:
+  dynamic_conditions: true
+  multiple_operators: true
+  field_type_aware: true

package/metadata/GridLayout.component.yml

@@ -0,0 +1,27 @@
+name: GridLayout
+label: Grid Layout
+description: 12-column grid layout system
+category: layout
+version: 1.0.0
+framework: react
+
+props:
+  - name: columns
+    type: number
+    default: 12
+  - name: gap
+    type: string
+    default: md
+  - name: items
+    type: array
+    description: list of widgets to render in the grid
+    schema:
+      - x: number
+      - y: number
+      - w: number
+      - h: number
+      - component: object  # SchemaNode
+
+features:
+  responsive: true
+  drag_and_drop: true

package/metadata/Menu.component.yml

@@ -0,0 +1,31 @@
+name: Menu
+label: Navigation Menu
+description: Multi-level navigation menu for app shells
+category: navigation
+version: 1.0.0
+framework: react
+
+props:
+  - name: type
+    type: string
+    enum: [sidebar, topnav, context]
+    default: sidebar
+  - name: items
+    type: array
+    required: true
+    schema:
+      - name: string
+      - label: string
+      - icon: string
+      - path: string
+      - items: array # nested items
+  - name: collapsed
+    type: boolean
+    default: false
+
+events:
+  - name: onItemClick
+    payload: "{ item: MenuItem }"
+
+features:
+  router_integration: true

package/metadata/ObjectForm.component.yml

@@ -0,0 +1,34 @@
+name: ObjectForm
+label: Object Form
+description: Smart form for creating and editing object records
+category: data_entry
+version: 1.0.0
+framework: react
+
+props:
+  - name: object
+    type: string
+    required: true
+    description: The object API name
+  - name: recordId
+    type: string
+    description: The ID of the record to edit (optional, for create mode leave empty)
+  - name: layout
+    type: object
+    description: Form layout definition
+  - name: mode
+    type: string
+    enum: [read, edit, create]
+    default: edit
+
+events:
+  - name: onSubmit
+    payload: "{ data: any }"
+  - name: onSuccess
+    payload: "{ id: string, data: any }"
+  - name: onError
+    payload: "{ error: any }"
+
+features:
+  validation: true
+  auto_save: false

package/metadata/ObjectTable.component.yml

@@ -0,0 +1,41 @@
+name: ObjectTable
+label: Object Table
+description: Production-grade data table for displaying and managing object records
+category: data_display
+version: 1.0.0
+framework: react
+
+props:
+  - name: object
+    type: string
+    required: true
+    description: The object API name to display data for
+  - name: columns
+    type: array
+    description: Column configurations
+    schema:
+      - field: string
+      - label: string
+      - width: number
+  - name: filters
+    type: array
+    description: Default filters
+  - name: sortable
+    type: boolean
+    default: true
+  - name: paginated
+    type: boolean
+    default: true
+  - name: pageSize
+    type: number
+    default: 20
+
+events:
+  - name: onRowClick
+    payload: "{ row: any, index: number }"
+  - name: onSelectionChange
+    payload: "{ selectedIds: string[] }"
+
+features:
+  remote_data: true
+  virtual_scroll: true

package/metadata/Page.component.yml

@@ -0,0 +1,24 @@
+name: Page
+label: Page Container
+description: Root container for application pages
+category: layout
+version: 1.0.0
+framework: react
+
+props:
+  - name: title
+    type: string
+  - name: layout
+    type: string
+    enum: [default, full, blank]
+    default: default
+  - name: aside
+    type: object # SchemaNode
+    description: Sidebar content
+  - name: body
+    type: object # SchemaNode
+    description: Main content
+
+features:
+  seo: true
+  breadcrumbs: true

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@object-ui/components",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "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"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.469.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^4.4.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "pretest": "pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('components', () => {
+  it('should work', () => {
+    expect(true).toBe(true);
+  });
+});