Komponenten

Alle Client-Komponenten werden aus @5minds/processcube_app_sdk/client importiert und müssen in Dateien mit 'use client' verwendet werden.

Übersicht

Komponente	Beschreibung
BPMNViewer	BPMN-Diagramm-Rendering mit Overlays und Markern
ProcessInstanceInspector	Interaktive Prozessinstanz-Ansicht mit Token-Inspektion
DynamicUi	Dynamischer Formular-Builder aus UserTask-Schemas
ProcessModelInspector	Prozessmodell mit Heatmap-Visualisierung
DocumentationViewer	Markdown-Dokumentation mit Syntax-Highlighting
SplitterLayout	Größenveränderbares Panel-Layout
DropdownMenu	Dropdown-Menü (Headless UI)
RemoteUserTask	iFrame-basierte Remote User Task (Common)

CSS: Alle Komponenten laden ihr Stylesheet automatisch. Ein manueller CSS-Import ist nicht nötig.

Import-Pfade


// Client-Komponenten
import {
  BPMNViewerNextJS,
  ProcessInstanceInspectorNextJS,
  DynamicUi,
  SplitterLayout,
  DropdownMenu,
  DocumentationViewer,
} from '@5minds/processcube_app_sdk/client';
 
// Common-Komponente (Client + Server)
import { RemoteUserTask } from '@5minds/processcube_app_sdk';

CSS

Komponenten-CSS wird automatisch geladen — beim Import einer Komponente wird das zugehörige Stylesheet vom Consumer-Bundler mit aufgelöst. Ein manueller CSS-Import ist nicht nötig.

Falls die Tailwind-Basisstyles (Resets, Utilities) separat benötigt werden:


// app/layout.tsx
import '@5minds/processcube_app_sdk/client/styles';

Client vs. Server Components

Die SDK-Komponenten sind Client Components. Kombiniere sie mit Server Components für optimale Performance:

app/tasks/page.tsx


import { getWaitingUserTasks } from '@5minds/processcube_app_sdk/server';
import { TaskItem } from './task-item'; // Client Component
 
export default async function TasksPage() {
  // Server-Side Daten laden
  const { userTasks } = await getWaitingUserTasks();
 
  return (
    <div>
      <h1>Meine Aufgaben</h1>
      {userTasks.map((task) => (
        <TaskItem key={task.flowNodeInstanceId} task={task} />
      ))}
    </div>
  );
}