Okul.com.tr — Eğitim Ekosistemi

OkulUp Component Architecture Kuralları

2 dakika okuma süresi

Proje: OkulUp · Hub: OkulUp — Conventions

Component Architecture Kuralları

Dosya Boyutu Limitleri (ZORUNLU)

  • Maksimum 100-150 satır/dosya
  • Maksimum 30-50 satır/function veya component
  • Limit aşıldıysa hemen component’lere ayır

Modül Yapısı Standardı

src/components/modules/{feature}/
├── {Feature}Card.tsx        # Liste item (~50 satır)
├── {Feature}List.tsx        # FlashList wrapper (~60 satır)
├── {Feature}DetailHeader.tsx # Detay header (~50 satır)
├── {Feature}FAB.tsx         # Create FAB (rol kontrollü, ~40 satır)
├── {Feature}Form.tsx        # Create/edit form (~80 satır)
├── {Feature}Schema.ts       # Zod validation schema
└── index.ts                 # Barrel exports

Screen dosyası (app/(tabs)/{feature}.tsx) sadece composition — ~80 satır

Module Bileşen Kullanımı

Mevcut modüller: dashboard, announcements, messages, chat, notifications, attendance, events, galleries, payments, tracking, profile, calendar, appointments, drawer, parent, meal-menus, users, assignments, document-requests, onboarding, schedule, reports, student, student-profile, bus-tracking, daily-overview, daily-tracking, settings

Layout Bileşenleri

  • AppHeader — avatar + notification badge + drawer toggle
  • Header — geri butonu + başlık (stack ekranlar için)
  • TabBar — custom bottom navigation (dinamik, rol tabanlı)
  • OfflineBanner — çevrimdışı uyarı

UI Bileşenleri (src/components/ui/)

Base primitives: Button, Input, Toast

Form Bileşenleri (src/components/forms/)

  • FormInput — label + error + helper text + focus state
  • FormTextArea — çok satırlı metin
  • FormSelect — dropdown seçim
  • FormDatePicker — tarih seçimi
  • FormNativeDatePicker — native date picker
  • FormTimePicker — saat seçimi

Styling Kuralı

GlueStack inline props kullanılır — NativeWind sınıfları component içinde değil.

// ✅ Doğru
<Box bg={colors.card} p="$4" borderRadius="$lg" />
// ❌ Yanlış
<Box className="bg-white p-4 rounded-lg" />

GlueStack spacing token’ları: $1=4px, $2=8px, $3=12px, $4=16px, $5=20px, $6=24px

Import Sırası

  1. React / React Native
  2. Third-party kütüphaneler
  3. Internal absolute imports (@/components, @/hooks, @/services)
  4. Relative imports (aynı modül)

Grafik Görünümü

Backlinkler