@busflow/ui-domain
Heavy, domain-specific components isolated from ui-core to prevent large dependencies (PDF.js, canvas libraries) from leaking into lightweight consumer apps like app-booking or app-wallet.
Reference Documents
- [frontend-architecture.md](file:///Users/julianbruning/Projekte/busflow/busflow/docs/2-areas/architecture/frontend.md) — Package boundaries
- [config-tailwind](file:///Users/julianbruning/Projekte/busflow/busflow/packages/config-tailwind/README.md) — Visual identity, design tokens
- [guidelines.md](file:///Users/julianbruning/Projekte/busflow/busflow/docs/2-areas/process/guidelines.md) — Documentation standards
Package Rules
- Isolated from
ui-core— separate dependency tree - May include heavy third-party libraries
- Shares
@busflow/config-tailwindtokens for visual consistency - Same authoring conventions as
ui-core(see its README)
Component Inventory
| Component | Dependencies | Used By | Description |
|---|---|---|---|
SeatMap | Canvas / SVG rendering | app-booking, app-admin | Interactive visual seat selection for buses |
PdfVisualizer | PDF.js | app-admin | PDF rendering for "Magic Upload" tour plan parsing |
TripCard | — | app-wallet, app-admin | Rich trip summary with status, dates, passengers |
TicketQr | QR code generator | app-wallet, app-driver | Digital ticket with QR code for check-in scan |
PassengerList | — | app-driver, app-admin | Live passenger manifest with check-in states |
ScheduleTimeline | — | app-admin | Visual timeline for fleet/route scheduling |
ThemeProvider | @busflow/ui-core | All apps | Renderless wrapper applying role theme + color mode classes on <html> |
ThemeToggle | @busflow/ui-core | workspace, passenger | Light/Dark/System dropdown toggle. Auto-hides when dark mode is unsupported |
useTheme() | — | All apps | Composable to access the injected theme context (via ThemeProvider) |
Consumer Matrix
| App | Components Used |
|---|---|
app-admin | All (SeatMap, PdfVisualizer, TripCard, PassengerList, ScheduleTimeline, ThemeProvider, ThemeToggle) |
app-booking | SeatMap, ThemeProvider |
app-wallet | TripCard, TicketQr, ThemeProvider |
app-driver | TicketQr, PassengerList, ThemeProvider |
app-landing / app-marketing | None |
File Structure
text
packages/ui-domain/
├── src/
│ ├── components/
│ │ ├── PassengerList/
│ │ │ ├── PassengerList.vue
│ │ │ ├── PassengerList.story.vue
│ │ │ └── index.ts
│ │ ├── PdfVisualizer/
│ │ │ ├── PdfVisualizer.vue
│ │ │ ├── PdfVisualizer.story.vue
│ │ │ └── index.ts
│ │ ├── ScheduleTimeline/
│ │ │ ├── ScheduleTimeline.vue
│ │ │ ├── ScheduleTimeline.story.vue
│ │ │ └── index.ts
│ │ ├── SeatMap/
│ │ │ ├── SeatMap.vue
│ │ │ ├── SeatMap.story.vue
│ │ │ └── index.ts
│ │ ├── ThemeProvider/
│ │ │ ├── ThemeProvider.vue
│ │ │ ├── ThemeToggle.vue
│ │ │ ├── ThemeToggle.story.vue
│ │ │ ├── themeRegistry.ts
│ │ │ ├── useTheme.ts
│ │ │ └── index.ts
│ │ ├── TicketQr/
│ │ │ ├── TicketQr.vue
│ │ │ ├── TicketQr.story.vue
│ │ │ └── index.ts
│ │ ├── TripCard/
│ │ │ ├── TripCard.vue
│ │ │ ├── TripCard.story.vue
│ │ │ └── index.ts
│ └── index.ts
├── package.json
├── tsconfig.json
└── README.mdUsage
vue
<script setup lang="ts">
import { SeatMap } from '@busflow/ui-domain'
</script>
<template>
<SeatMap
:layout="busLayout"
:selected-seats="selectedSeats"
@seat-select="onSeatSelect"
/>
</template>