Frontend Components Documentation

Version: 1.0.0 | Astro + Svelte

Architecture

Framework: Astro (SSG + Islands)
UI Components: Svelte 4
Styling: Tailwind CSS 3
State: Svelte stores
i18n: Custom solution (FR, NL, EN)

Key Components

Authentication

LoginForm.svelte

Location: frontend/src/components/auth/LoginForm.svelte
Props: None
Emits: login event with credentials
Uses: authStore for JWT management

Buildings

BuildingList.svelte

Location: frontend/src/components/buildings/BuildingList.svelte
Props: buildings: Building[]
Features: Search, filter, pagination

BuildingCreateModal.svelte

Location: frontend/src/components/buildings/BuildingCreateModal.svelte
Props: open: boolean
Emits: create, close

Units

UnitOwners.svelte

Location: frontend/src/components/UnitOwners.svelte
Props: unitId: string
Features: Multi-owner management, quote-part validation

Stores

authStore

// frontend/src/lib/stores/authStore.ts
export const authStore = writable<AuthState>({
  isAuthenticated: false,
  user: null,
  token: null,
  activeRole: null
});

Styling Conventions

<button class="btn btn-primary">
  <!-- Tailwind utilities -->
</button>

Storybook Setup (Planned)

npm install --save-dev @storybook/svelte
npx storybook init

Version: 1.0.0