Components

The component architecture has two layers: the @dtx/ui shared library (reusable across projects) and portal feature components (app-specific).

---

@dtx/ui — Base Components

Built on React Aria Components for accessibility. Styled with Tailwind CSS and class-variance-authority (CVA).

Buttons & Badges

Component	Variants	Key Props
Button	primary secondary tertiary link-gray link-color + destructive variants	size: sm|md|lg|xl, isLoading, iconLeading, iconTrailing
CloseButton	—	size, onPress
ButtonGroup	—	Groups multiple ButtonGroupItem components
Badge	12 colors	type: pill-color|color|modern, size: sm|md|lg
BadgeWithDot	—	Status indicator with colored dot
BadgeWithIcon	—	iconLeading, iconTrailing
BadgeIcon	—	Icon-only circular badge

Badge Colors: gray brand error warning success gray-blue blue-light blue indigo purple pink orange

Form Inputs

Component	Key Props
Input	label, hint, size: sm|md, icon, tooltip, shortcut, isInvalid, isRequired
TextArea	label, hint, isInvalid, isRequired
Select	items: SelectItemType[], selectedKey, onSelectionChange, placeholder
Checkbox	isSelected, onChange, isIndeterminate
Toggle	isSelected, onChange
Slider	min, max, value, onChange
Label	Standard label props
HintText	isInvalid — renders below inputs

Layout & Display

Component	Purpose
Card	Generic card container
Avatar	User avatar with image or initials
Dropdown	Dropdown menu with trigger
Form	Form wrapper

---

@dtx/ui — Application Components

Data Display

Component	Purpose
DataTable / TableCard	React Aria table with sorting, selection, row actions
Tabs / TabList / Tab / TabPanel	Tabbed content switching
Pagination* (5 variants)	Page, minimal, card, button group styles
Breadcrumbs	Navigation breadcrumbs
EmptyState	Empty state placeholder
LoadingIndicator	Spinner/loading
Progress	Progress bar/circle

Overlays & Feedback

Component	Purpose
Modal / ModalOverlay	React Aria modal dialogs
Dialog / DialogTrigger	Dialog content wrapper
ConfirmDialog / useConfirm()	Confirmation with hook
Toaster	Toast notifications via Sonner
Alert (AlertFloating)	Floating alert banners
CommandMenu	Command palette (Cmd+K)

Specialized

Component	Purpose
Calendar	Calendar widget
DatePicker / DateRangePicker	Date selection
FileUpload	Drag-and-drop file upload
SectionHeaders	Section heading components
NavItemBase	Sidebar navigation item
NavAccountCard	User profile card

Charts (Recharts)

Chart Type	Usage
Line / Area	Time-series metrics, throughput
Bar	Log level distribution
Pie	Proportional data
Radar	Multi-dimension comparison
Progress circles	Completion indicators
Activity gauges	Activity metrics

---

Portal Shared Components

Layout Components

Component	File	Purpose
Layout	shared/layout/Layout.tsx	Main app shell (sidebar + header + content area)
PageLayout	shared/PageLayout.tsx	Standard page wrapper (title, subtitle, action buttons)
PageHeader	shared/PageHeader.tsx	Page title + subtitle + action button
Sidebar	shared/sidebar/Sidebar.tsx	Collapsible sidebar with section groups
Header	shared/header/Header.tsx	Top bar with search and notifications
SearchCommandMenu	shared/header/SearchCommandMenu.tsx	Cmd+K search
DynamicBreadcrumbs	shared/header/DynamicBreadcrumbs.tsx	Auto-generated breadcrumbs
ErrorBoundary	shared/ErrorBoundary.tsx	React error boundary
NotFoundPage	shared/NotFoundPage.tsx	404 page

Visual Designer System

The designer system is shared across Pipeline, Connector, and Workflow builders:

Auto-layout: Uses @dagrejs/dagre for DAG auto-layout (smartLayout.ts, autoLayout.ts).

Dynamic Form Renderer

FormRenderer generates forms dynamically from JSON-schema operator configs. Supports 20+ field types:

Category	Field Types
Basic	TextField, TextAreaField, SelectField, CheckboxField, ToggleField, PasswordField, ReadonlyField
Collections	TagsField, KeyValueField, RadioCardsField, BadgeField, GroupField
Schema-aware	SchemaSelectorField, SchemaTableField, TopicSelectorField, PoolSelectorField
Mapping	MappingConfigField, MappingTableField, InputFieldSelectorField, LookupFieldSelectorField
Advanced	ApiCombobox, GeneratorSelectorField, PreviewRunnerField

---

Feature Components

Pipeline Designer

Component	Purpose
PipelineDesigner	Full-screen pipeline builder page
PipelinesListPage	Pipeline list with status badges
CompilationProgressModal	Tracks compile progress
SaveProgressModal	Auto-save status
ValidationErrorModal	Validation error display
PipelineObservabilityPanel	Real-time pipeline logs/records

Schema Registry

Component	Purpose
SchemaListPage	Schema list with filters
CreateSchemaWizard	3-step wizard: BasicInfo → SchemaEditor → Review
SchemaFieldTable	Field editor with PII tagging
FieldEditorDialog	Individual field editing
Detail tabs: OverviewTab, FieldsTab, SchemaTab, VersionsTab, SettingsTab

Approval Workflow

Component	Purpose
WorkflowDesigner	Full-screen visual workflow builder
WorkflowCanvas	XYFlow canvas with workflow-specific nodes
NodePalette	11 draggable node types
PropertyPanel	Selected node configuration
TaskInbox	Filterable task list with claim/complete actions

Workflow Node Types: StartNode, EndNode, ApprovalNode, ConditionNode, ParallelSplitNode, ParallelJoinNode, NotificationNode, TimerNode, ScriptNode, RejectNode, LoopNode

Synthetic Data Generator

Component	Purpose
CreateGeneratorWizard	5-step wizard for SDG creation
FieldMappingEditor	Configure field-level generation strategies
Destination forms	KafkaDestinationForm, PostgresDestinationForm, DragonflyDestinationForm, FileDestinationForm, DatabaseDestinationForm, RestApiDestinationForm
ThroughputChart	Real-time generation throughput (Recharts)
LiveMetricsPanel	Live generation metrics

---

Form Handling Pattern

Stack: React Hook Form 7.65 + Zod 3.24 + @hookform/resolvers

// Multi-step wizard pattern using useFormContext
const { control, formState: { errors } } = useFormContext<GeneratorRequest>();

<Controller
  name="name"
  control={control}
  render={({ field }) => (
    <Input
      label="Generator Name"
      isRequired
      isInvalid={!!errors.name}
      {...field}
    />
  )}
/>

Pattern: useForm() with zodResolver at wizard level, useFormContext() in step components.