Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 65 additions & 17 deletions packages/plugin-designer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,28 @@ npm install @object-ui/plugin-designer
## Quick Start

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

const collaboration: CollaborationConfig = {
enabled: true,
roomId: 'landing-page',
showCursors: true,
};

const componentList: DesignerComponent[] = [
{
id: 'headline',
type: 'text',
label: 'Headline',
position: { x: 0, y: 0, width: 480, height: 48 },
props: { value: 'Welcome' },
},
];

function DesignerApp() {
return (
<CollaborationProvider>
<CollaborationProvider config={collaboration}>
<PageDesigner
components={componentList}
showComponentTree
Expand All @@ -56,54 +69,86 @@ function DesignerApp() {
Drag-and-drop page layout builder:

```tsx
import { PageDesigner } from '@object-ui/plugin-designer';
import type { DesignerCanvasConfig, DesignerComponent } from '@object-ui/types';

declare const canvasConfig: DesignerCanvasConfig;
declare const componentList: DesignerComponent[];

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

### DataModelDesigner

Entity-relationship diagram editor:

```tsx
<DataModelDesigner entities={entities} relationships={relationships} autoLayout />
import { DataModelDesigner } from '@object-ui/plugin-designer';
import type { DataModelEntity, DataModelRelationship } from '@object-ui/types';

declare const entities: DataModelEntity[];
declare const relationships: DataModelRelationship[];

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

### ProcessDesigner

BPMN-style process flow editor:

```tsx
import { ProcessDesigner } from '@object-ui/plugin-designer';
import type { BPMNEdge, BPMNNode } from '@object-ui/types';

declare const nodes: BPMNNode[];
declare const edges: BPMNEdge[];

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

### ReportDesigner

Visual report layout builder:

```tsx
<ReportDesigner reportName="Sales Report" objectName="Order" sections={sections} />
import { ReportDesigner } from '@object-ui/plugin-designer';
import type { ReportDesignerSection } from '@object-ui/types';

declare const sections: ReportDesignerSection[];

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

### CollaborationProvider / ConnectionStatusIndicator

Multi-user real-time editing support:

```tsx
<CollaborationProvider>
import {
CollaborationProvider,
ConnectionStatusIndicator,
PageDesigner,
} from '@object-ui/plugin-designer';
import type { CollaborationConfig } from '@object-ui/types';

declare const collaboration: CollaborationConfig;

<CollaborationProvider config={collaboration}>
<ConnectionStatusIndicator />
<PageDesigner ... />
</CollaborationProvider>
<PageDesigner showComponentTree undoRedo />
</CollaborationProvider>;
```

### Shared Hooks
Expand All @@ -117,10 +162,13 @@ import {
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();
import type { DesignerComponent } from '@object-ui/types';

const { undo, redo, canUndo, canRedo } = useUndoRedo<DesignerComponent[]>([]);
const { clipboard, copy, paste, hasContent } = useClipboard<DesignerComponent>();
const { selectedIds, selectOne, selectMany, clearSelection } = useMultiSelect();
const { zoom, panOffset, zoomIn, zoomOut, resetZoom } = useCanvasPanZoom();
const { confirm, isOpen } = useConfirmDialog();
```

### Shared Components
Expand Down
2 changes: 0 additions & 2 deletions scripts/check-doc-snippet-types.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -733,8 +733,6 @@ const UNGATED_DOCS = {
'6 parse diagnostic(s) — blocks fenced `ts` that are bare object literals or elided bodies',
'packages/plugin-chatbot/README.md':
'5 undefined-name diagnostic(s) — blocks continue an earlier block, or use ambient names the page never defines; 1 unresolved-module diagnostic(s); plus TS17000x1 TS2322x1 — candidate real defects, un-triaged',
'packages/plugin-designer/README.md':
'2 parse diagnostic(s) — blocks fenced `ts` that are bare object literals or elided bodies; 12 undefined-name diagnostic(s) — blocks continue an earlier block, or use ambient names the page never defines; plus TS2339x6 TS2554x1 TS2741x1 — candidate real defects, un-triaged',
'packages/plugin-detail/README.md':
'5 parse diagnostic(s) — blocks fenced `ts` that are bare object literals or elided bodies; 15 undefined-name diagnostic(s) — blocks continue an earlier block, or use ambient names the page never defines',
'packages/plugin-editor/README.md':
Expand Down
Loading