Shared UI Components
Relevant source files
The following files were used as context for generating this wiki page:
- Packages/SharedUI/Sources/SharedUI/Components/Cards/SubscriptionCard.swift
- Packages/SharedUI/Sources/SharedUI/Components/Rows/SubscriptionRow.swift
- Features/AnalyticsFeature/Sources/AnalyticsFeature/Views/Analytics/AnalyticsView.swift
- Features/CalendarFeature/Sources/CalendarFeature/Views/Calendar/CalendarView.swift
- Features/CategoriesFeature/Sources/CategoriesFeature/Views/CategoryDetail/CategoryDetailView.swift
- Features/ExpensesFeature/Sources/ExpensesFeature/Views/SubscriptionDetail/SubscriptionDetailView.swift
- README.md
Shared UI Components in the Trackurr project constitute a centralized library of reusable SwiftUI views and design patterns located within the SharedUI package. This module provides the visual building blocks used across various feature modules (Expenses, Analytics, Calendar, and Categories) to ensure a consistent native iOS experience and adhere to a unified design system.
The components are designed to be composable and state-driven, often consuming domain models such as Subscription, Category, and UpcomingRenewal. They handle visual logic including icon rendering (symbols, emojis, and brands), currency formatting via MoneyText, and complex data visualizations like the MonthlySpendingBarChart.
Sources: README.md:46-56, Packages/SharedUI/Sources/SharedUI/Components/Rows/SubscriptionRow.swift
Component Architecture
The UI architecture follows a modular pattern where the SharedUI package serves as the foundational layer for all feature-specific views. Components are typically categorized into Cards, Rows, and Specialized Views.
Visual Representation of Component Hierarchy
The following diagram illustrates how shared components are integrated into feature-specific views.
The diagram shows the relationship between feature-level views and the shared library components.
Sources: Features/AnalyticsFeature/Sources/AnalyticsFeature/Views/Analytics/AnalyticsView.swift:105-117, Features/CalendarFeature/Sources/CalendarFeature/Views/Calendar/CalendarView.swift:142-148
Core Component Types
Subscription and Category Displays
The project utilizes distinct styles for displaying subscription data based on the context (e.g., list vs. grid).
- SubscriptionRow: A standard list-item view used in lists. It typically displays the subscription name, billing cycle, and amount.
- SubscriptionCard / UpcomingSubscriptionCard: A more prominent, card-based layout used in the Analytics dashboard and horizontal scrollers.
- CategoryDetailView Components: Specialized headers and icons for categories, utilizing
Circlefills and grouped icon logic.
| Component | Usage Context | Key Visual Elements |
|---|---|---|
SubscriptionRow | General lists | Name, billing cycle, amount |
SubscriptionCard | Horizontal scrollers | Brand/Category icon, name, amount |
RectangleIconView | General UI | Customizable icon with background shape |
MoneyText | Everywhere | Formatted currency amount |
Sources: Features/CategoriesFeature/Sources/CategoriesFeature/Views/CategoryDetail/CategoryDetailView.swift:51-118, Features/AnalyticsFeature/Sources/AnalyticsFeature/Views/Analytics/AnalyticsView.swift:273-285
Icon Rendering Logic
A critical shared utility is the rendering of Icon types. Icons in the system can be SF Symbols, Emojis, Brand images, or Base64 data.
Group {
switch viewModel.category.icon {
case let .symbol(name):
Image(systemName: name)
.foregroundStyle(viewModel.category.color.color)
case let .emoji(emoji):
Text(emoji)
case let .brand(name):
Image(name)
.resizable()
.scaledToFit()
.frame(width: 32, height: 32)
case .base64:
PlaceholderIcon()
}
}
Data Visualization
The project includes complex visualization components used primarily in the AnalyticsFeature and ExpensesFeature.
Monthly Spending Bar Chart
The MonthlySpendingBarChart is a state-aware component that visualizes spending trends. It accepts a MonthlySpendingBarChartContext containing an array of MonthlySpending objects and an average spending value.
- Animation: Supports bar growth animations.
- Interactivity: Supports selection of specific bars to trigger month-specific breakdowns in parent views.
- Contextual Styling: Colors can be overridden by specific subscription or category colors.
Sources: Features/AnalyticsFeature/Sources/AnalyticsFeature/Views/Analytics/AnalyticsView.swift:105-123, Features/ExpensesFeature/Sources/ExpensesFeature/Views/SubscriptionDetail/SubscriptionDetailView.swift:158-166
Payment Timeline
Used in the SubscriptionDetailView, the PaymentTimelineView provides a chronological view of past and upcoming billing events.
The flow represents how subscription date properties are transformed into a visual timeline.
Sources: Features/ExpensesFeature/Sources/ExpensesFeature/Views/SubscriptionDetail/SubscriptionDetailView.swift:139-148
Design System Extensions
The SharedUI module extends standard SwiftUI types to provide a consistent spacing and color language, often referred to as .ds (Design System).
- Spacing: Standardized increments like
.ds.xs,.ds.md,.ds.lg, and.ds.xl. - Typography: Custom font styles such as
.ds.title,.ds.headline, and.ds.caption. - Colors: Semantic colors like
Color.ds.tertiaryFill,Color.ds.accent, and category-specific hex mappings.
Sources: Features/AnalyticsFeature/Sources/AnalyticsFeature/Views/Analytics/AnalyticsView.swift:125-130, Features/ExpensesFeature/Sources/ExpensesFeature/Views/SubscriptionDetail/SubscriptionDetailView.swift:76-90
Conclusion
Shared UI Components serve as the core visual framework for Trackurr. By centralizing logic for icons, currency, and charts, the module allows feature developers to focus on data orchestration while maintaining a high-quality, native iOS look and feel. The extensive use of domain-driven components ensures that changes to the data model (like new billing cycles or icon types) propagate consistently across the entire application.