calchat/docs/frontend-class-diagram.puml

@startuml "Frontend Klassendiagramm"

scale 0.9
skinparam dpi 600
skinparam backgroundColor #FFAB40

skinparam packageStyle rectangle
skinparam classAttributeIconSize 0
skinparam classFontSize 10
skinparam defaultFontSize 9
skinparam wrapWidth 100
skinparam nodesep 30
skinparam ranksep 30

top to bottom direction

title Frontend (Expo React Native)

' ===== SCREENS =====
package "Screens" #87CEEB {
    class LoginScreen
    class RegisterScreen
    class CalendarScreen
    class ChatScreen
    class SettingsScreen
    class EditEventScreen
    class EventDetailScreen
    class NoteScreen
}

' ===== COMPONENTS =====
package "Components" #FFA07A  {
    class AuthGuard
    class BaseBackground
    class Header
    class BaseButton
    class CardBase
    class ModalBase
    class EventCardBase
    class EventCard
    class ProposedEventCard
    class DeleteEventModal
    class ChatBubble
    class TypingIndicator
}

' ===== SERVICES =====
package "Services" #90EE90 {
    class ApiClient {
        +get()
        +post()
        +put()
        +delete()
    }
    class AuthService {
        +login()
        +register()
        +logout()
        +refresh()
    }
    class EventService {
        +getAll()
        +getById()
        +getByDateRange()
        +create()
        +update()
        +delete()
    }
    class ChatService {
        +sendMessage()
        +confirmEvent()
        +rejectEvent()
        +getConversations()
        +getConversation()
        +updateProposalEvent()
    }
    class CaldavConfigService {
        +getConfig()
        +saveConfig()
        +deleteConfig()
        +sync()
    }
}

' ===== STORES =====
package "Stores" #FFD700 {
    class AuthStore {
        ' +user
        ' +isAuthenticated
        ' +login()
        ' +logout()
        ' +loadStoredUser()
    }
    class EventsStore {
        ' +events
        ' +setEvents()
        ' +addEvent()
        ' +updateEvent()
        ' +deleteEvent()
    }
    class ChatStore {
        ' +messages
        ' +isWaitingForResponse
        ' +addMessage()
        ' +addMessages()
        ' +updateMessage()
        ' +clearMessages()
    }
    class ThemeStore {
        ' +theme
        ' +setTheme()
    }
}

' ===== MODELS =====
package "Models (shared)" #D3D3D3 {
    class User
    class CalendarEvent
    class ChatMessage
    class CaldavConfig
}

' ===== RELATIONSHIPS =====

' Screens -> Services
LoginScreen --> AuthService
CalendarScreen --> EventService
CalendarScreen --> CaldavConfigService
ChatScreen --> ChatService
NoteScreen --> EventService
EditEventScreen --> EventService
EditEventScreen --> ChatService
SettingsScreen --> CaldavConfigService

' Screens -> Components
CalendarScreen --> EventCard
ChatScreen --> ProposedEventCard
ChatScreen --> ChatBubble
ChatScreen --> TypingIndicator
EventCard --> EventCardBase
ProposedEventCard --> EventCardBase
EventCardBase --> CardBase
ModalBase --> CardBase
DeleteEventModal --> ModalBase

' Auth
AuthGuard --> AuthStore
AuthGuard --> CaldavConfigService
LoginScreen --> CaldavConfigService

' Services -> ApiClient
AuthService --> ApiClient
EventService --> ApiClient
ChatService --> ApiClient
CaldavConfigService --> ApiClient

' Services/Screens -> Stores
AuthService --> AuthStore
CalendarScreen --> EventsStore
ChatScreen --> ChatStore
SettingsScreen --> ThemeStore

@enduml