Skip to content

FlowDrop UI Components

Reusable Single Directory Components (SDC) and CSS design tokens for the FlowDrop admin dashboard and interfaces.

Overview

The flowdrop_ui_components module provides a library of reusable Drupal Single Directory Components (SDC) and CSS design tokens that deliver a consistent visual language across all FlowDrop admin pages. This is a foundational module with no FlowDrop dependencies — it is depended upon by the core flowdrop module.

The module also provides an endpoint configuration service used by the Svelte-based workflow editor and playground to discover API endpoints.

Dependencies

None. This is a base module with no FlowDrop dependencies.

Configuration

Endpoint Configuration

The FlowDropEndpointConfigService provides centralized endpoint configuration for the JavaScript-based UI components (workflow editor, playground). It assembles the API endpoint URLs that the frontend needs to communicate with the backend.

Tips and Tricks

Available SDC Components

Component Description
flowdrop-logo FlowDrop logo rendering
stat-card Statistics display card for dashboard metrics
status-badge Status indicator badge (active, disabled, experimental)
action-link Clickable navigation cards with icon and description
content-card Rich content cards for displaying entity summaries
page-header Page header with title, description, and action buttons
search-toolbar Search input with view toggle (list/grid)
button Styled button component matching FlowDrop design
grid Responsive grid layout for card arrangements

CSS Libraries

Library Description
design-tokens Core design system tokens — colors, spacing, typography, shadows
theme-layer Component-specific CSS custom properties
fullscreen-layout Immersive fullscreen layout for the editor and playground

Using Components in Custom Modules

FlowDrop SDC components can be used in any Twig template:

{{ include('flowdrop_ui_components:stat-card', {
  label: 'Active Workflows',
  value: workflow_count,
  icon: 'mdi:sitemap',
}) }}

Svelte UI Build

The module includes the Vite build output for the Svelte-based workflow editor and playground. See lib/flowdrop/vite.config.ts in the module source for details on the build configuration.

Developer API

Services

Service ID Class Description
flowdrop_ui_components.endpoint_config FlowDropEndpointConfigService Provides API endpoint URLs for the JavaScript frontend

References