open-index/open-npm huggingface dataset:
npm package: @object-ui/plugin-chatbot
Description: Chatbot interface plugin for Object UI
Latest version: 3.1.5

# @object-ui/plugin-chatbot

Chatbot interface plugin for Object UI.

## Installation

```bash
npm install @object-ui/plugin-chatbot
```

## Usage

```tsx
import { Chatbot } from '@object-ui/plugin-chatbot';

function App() {
  const [messages, setMessages] = useState([
    {
      id: '1',
      role: 'assistant',
      content: 'Hello! How can I help you today?'
    }
  ]);

  const handleSend = (content: string) => {
    const newMessage = {
      id: Date.now().toString(),
      role: 'user',
      content
    };
    setMessages([...messages, newMessage]);
  };

  return (
    <Chatbot
      messages={messages}
      onSendMessage={handleSend}
      placeholder="Type your message..."
    />
  );
}
```

## Schema-Driven Usage

This plugin automatically registers with ObjectUI's component registry when imported:

```tsx
import '@object-ui/plugin-chatbot';

const schema = {
  component: 'chatbot',
  messages: [
    { id: '1', role: 'assistant', content: 'Hello!' }
  ],
  placeholder: 'Type your message...',
  autoResponse: true
};
```

## License

MIT © ObjectStack Inc.
npm package: @object-ui/plugin-designer
Description: Visual designer plugin for Object UI with page, data model, process, and report designers plus collaborative editing.
Latest version: 3.1.5

# @object-ui/plugin-designer

Visual designers for Object UI — page, data model, process, and report designers with collaboration support.

## Features

- 🎨 **Page Designer** - Drag-and-drop page builder with component tree
- 🗄️ **Data Model Designer** - Entity-relationship diagram editor with auto-layout
- ⚙️ **Process Designer** - BPMN-style process flow editor with minimap
- 📝 **Report Designer** - Visual report layout builder with sections
- 🤝 **Collaboration Provider** - Real-time multi-user editing with connection status
- ↩️ **Undo/Redo** - Full undo/redo history via `useUndoRedo`
- 📋 **Clipboard** - Copy/paste support via `useClipboard`
- 🔲 **Multi-Select** - Bulk selection via `useMultiSelect`
- 🔍 **Canvas Pan/Zoom** - Smooth pan and zoom via `useCanvasPanZoom`
- 🗺️ **Minimap** - Overview minimap for large canvases
- 📦 **Auto-registered** - Components register with `ComponentRegistry` on import

## Installation

```bash
npm install @object-ui/plugin-designer
```

**Peer Dependencies:**
- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0
- `@object-ui/core`

## Quick Start

```tsx
import {
  PageDesigner,
  DataModelDesigner,
  CollaborationProvider,
} from '@object-ui/plugin-designer';

function DesignerApp() {
  return (
    <CollaborationProvider>
      <PageDesigner
        components={componentList}
        showComponentTree
        undoRedo
      />
    </CollaborationProvider>
  );
}
```

## API

### PageDesigner

Drag-and-drop page layout builder:

```tsx
<PageDesigner
  canvas={canvasConfig}
  components={componentList}
  showComponentTree
  undoRedo
  readOnly={false}
/>
```

### DataModelDesigner

Entity-relationship diagram editor:

```tsx
<DataModelDesigner entities={entities} relationships={relationships} autoLayout />
```

### ProcessDesigner

BPMN-style process flow editor:

```tsx
<ProcessDesigner
  processName="Order Approval"
  nodes={nodes}
  edges={edges}
  showMinimap
  showToolbar
/>
```

### ReportDesigner

Visual report layout builder:

```tsx
<ReportDesigner reportName="Sales Report" objectName="Order" sections={sections} />
```

### CollaborationProvider / ConnectionStatusIndicator

Multi-user real-time editing support:

```tsx
<CollaborationProvider>
  <ConnectionStatusIndicator />
  <PageDesigner ... />
</CollaborationProvider>
```

### Shared Hooks

```tsx
import {
  useUndoRedo,
  useClipboard,
  useMultiSelect,
  useCanvasPanZoom,
  useConfirmDialog,
} from '@object-ui/plugin-designer';

const { undo, redo, canUndo, canRedo } = useUndoRedo();
const { copy, paste, cut } = useClipboard();
const { selected, select, selectAll, clearSelection } = useMultiSelect();
const { zoom, pan, resetView } = useCanvasPanZoom();
```

### Shared Components

```tsx
import { ConfirmDialog, Minimap, PropertyEditor, VersionHistory } from '@object-ui/plugin-designer';
```

## License

MIT
npm package: @object-ui/plugin-editor
Description: Rich text editor plugin for Object UI, powered by Monaco Editor
Latest version: 3.1.5

# Plugin Editor - Lazy-Loaded Monaco Editor

A lazy-loaded code editor component for Object UI based on Monaco Editor.

## Features

- **Internal Lazy Loading**: The Monaco Editor is loaded on-demand using `React.lazy()` and `Suspense`
- **Zero Configuration**: Just import the package and use `type: 'code-editor'` in your schema
- **Automatic Registration**: Components auto-register with the ComponentRegistry
- **Skeleton Loading**: Shows a skeleton while Monaco loads

## Installation

```bash
pnpm add @object-ui/plugin-editor
```

## Usage

### Automatic Registration (Side-Effect Import)

```typescript
// In your app entry point (e.g., App.tsx or main.tsx)
import '@object-ui/plugin-editor';

// Now you can use code-editor type in your schemas
const schema = {
  type: 'code-editor',
  value: 'console.log("Hello, World!");',
  language: 'javascript',
  theme: 'vs-dark',
  height: '400px'
};
```

### Manual Integration

```typescript
import { editorComponents } from '@object-ui/plugin-editor';
import { ComponentRegistry } from '@object-ui/core';

// Manually register if needed
Object.entries(editorComponents).forEach(([type, component]) => {
  ComponentRegistry.register(type, component);
});
```

### TypeScript Support

The plugin exports TypeScript types for full type safety:

```typescript
import type { CodeEditorSchema } from '@object-ui/plugin-editor';

const schema: CodeEditorSchema = {
  type: 'code-editor',
  value: 'console.log("Hello, World!");',
  language: 'javascript',
  theme: 'vs-dark',
  height: '400px'
};
```

## Schema API

```typescript
{
  type: 'code-editor',
  value?: string,              // Code content
  language?: string,           // 'javascript' | 'typescript' | 'python' | 'json' | 'html' | 'css'
  theme?: 'vs-dark' | 'light', // Editor theme
  height?: string,             // e.g., '400px'
  readOnly?: boolean,          // Read-only mode
  className?: string           // Tailwind classes
}
```

## Lazy Loading Architecture

The plugin uses a two-file pattern for optimal code splitting:

1. **`MonacoImpl.tsx`**: Contains the actual Monaco Editor import (heavy)
2. **`index.tsx`**: Entry point with `React.lazy()` wrapper (light)

When bundled, Vite automatically creates separate chunks:
- `index.js` (~200 bytes) - The entry point
- `MonacoImpl-xxx.js` (~15-20 KB) - The lazy-loaded implementation

The Monaco Editor library is only downloaded when a `code-editor` component is actually rendered, not on initial page load.

## Build Output Example

```
dist/index.js                 0.19 kB  # Entry point
dist/MonacoImpl-DCiwKyYW.js  19.42 kB  # Lazy chunk (loaded on demand)
dist/index.umd.cjs           30.37 kB  # UMD bundle
```

## Development

```bash
# Build the plugin
pnpm build

# The package will generate proper ESM and UMD builds with lazy loading preserved
```
npm package: @object-ui/plugin-list
Description: ListView plugin for Object UI - unified view component with view type switching
Latest version: 3.1.5

# @object-ui/plugin-list

ListView plugin for ObjectUI - A unified view component with view type switching, filtering, sorting, and view configuration persistence.

## Features

- **View Type Switching**: Switch between Grid, List, Kanban, Calendar, and Chart views
- **View Persistence**: Automatically saves user's view preference
- **Integrated Search**: Full-text search across records
- **Filtering**: Advanced filter UI (expandable filter panel)
- **Sorting**: Sort by any field, toggle ascending/descending
- **Flexible Configuration**: Configure available view types per object
- **Custom Templates**: Support for custom view options per view type

## Installation

```bash
pnpm add @object-ui/plugin-list
```

## Usage

### Basic Example

```tsx
import { ListView } from '@object-ui/plugin-list';

function ContactsView() {
  return (
    <ListView
      schema={{
        type: 'list-view',
        objectName: 'contacts',
        viewType: 'grid',
        fields: ['name', 'email', 'phone', 'company'],
        sort: [{ field: 'name', order: 'asc' }],
      }}
    />
  );
}
```

### With Multiple View Types

```tsx
<ListView
  schema={{
    type: 'list-view',
    objectName: 'deals',
    viewType: 'kanban',
    fields: ['name', 'amount', 'stage', 'close_date'],
    options: {
      kanban: {
        groupField: 'stage',
        titleField: 'name',
      },
      calendar: {
        startDateField: 'close_date',
        titleField: 'name',
      },
      chart: {
        chartType: 'bar',
        xAxisField: 'stage',
        yAxisFields: ['amount'],
      }
    }
  }}
/>
```

### With Callbacks

```tsx
<ListView
  schema={{
    type: 'list-view',
    objectName: 'tasks',
    fields: ['title', 'status', 'priority'],
  }}
  onViewChange={(view) => console.log('View changed to:', view)}
  onSearchChange={(search) => console.log('Search:', search)}
  onSortChange={(sort) => console.log('Sort:', sort)}
  onFilterChange={(filters) => console.log('Filters:', filters)}
/>
```

## Schema

The ListView component accepts a `ListViewSchema`:

```typescript
interface ListViewSchema {
  type: 'list-view';
  objectName: string;
  viewType?: 'grid' | 'kanban' | 'calendar' | 'gantt' | 'map' | 'chart';
  fields?: string[];
  filters?: Array<any[] | string>;
  sort?: Array<{ field: string; order: 'asc' | 'desc' }>;
  options?: {
    grid?: Record<string, any>;
    list?: Record<string, any>;
    kanban?: {
      groupField: string;
      titleField?: string;
      cardFields?: string[];
    };
    calendar?: {
      startDateField: string;
      endDateField?: string;
      titleField: string;
    };
    chart?: {
      chartType: 'bar' | 'line' | 'pie' | 'area';
      xAxisField: string;
      yAxisFields: string[];
    };
  };
}
```

## View Persistence

The ListView automatically persists the user's view type preference in localStorage using the key `listview-{objectName}-view`.

## License

MIT
npm package: @object-ui/plugin-object
Description: ObjectQL plugin for Object UI - Object Table and Object Form components
Author: Object UI Team
Latest version: 0.3.0

# @object-ui/plugin-object

ObjectQL plugin for Object UI, providing seamless integration with ObjectQL backends through auto-generated components.

## Features

- **ObjectTable**: A specialized table component that automatically fetches and displays data from ObjectQL objects
- **ObjectForm**: A smart form component that generates forms from ObjectQL object schemas

## Installation

```bash
npm install @object-ui/plugin-object @object-ui/data-objectql
```

## Usage

### ObjectTable

```tsx
import { ObjectTable } from '@object-ui/plugin-object';
import { ObjectQLDataSource } from '@object-ui/data-objectql';

const dataSource = new ObjectQLDataSource({
  baseUrl: 'https://api.example.com',
  token: 'your-auth-token'
});

function UsersTable() {
  return (
    <ObjectTable 
      schema={{
        type: 'object-table',
        objectName: 'users'
      }}
      dataSource={dataSource}
    />
  );
}
```

### ObjectForm

```tsx
import { ObjectForm } from '@object-ui/plugin-object';
import { ObjectQLDataSource } from '@object-ui/data-objectql';

const dataSource = new ObjectQLDataSource({
  baseUrl: 'https://api.example.com',
  token: 'your-auth-token'
});

function UserForm() {
  return (
    <ObjectForm 
      schema={{
        type: 'object-form',
        objectName: 'users',
        mode: 'create',
        onSuccess: (data) => console.log('Created:', data)
      }}
      dataSource={dataSource}
    />
  );
}
```

## Schema Integration

Both components automatically integrate with ObjectQL's schema system to:
- Display appropriate field types
- Apply field-level permissions
- Validate data according to schema rules
- Handle relationships between objects

## License

MIT