# 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](flowdrop.md) 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:

```twig
{{ 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

- [flowdrop](flowdrop.md) — depends on this module for dashboard UI
- [flowdrop_playground](flowdrop_playground.md) — uses UI components and the endpoint config
