Responsive Blade Component Sözleşmesi

Proje: Okul Platform · Hub: Okul Platform — Conventions

Responsive (Tailwind v4 + Alpine) sayfa grubunda parça parça tekrar kullanılabilir component geliştirme yaklaşımı. resources/views/responsive/components/ altında 10+ partial ve bir README.md var. Her component plug-and-play çalışsın diye parent Alpine component’in uygulaması gereken state + method sözleşmesi doc-block’ta yazılır.

Sözleşme formu

Her component dosyası üst kısmında Blade yorum bloku:

{{--
  <Component açıklaması>
 
  Beklediği Alpine state: formOpen, selectedCount, form, formErrors
  Beklediği method'lar: closeForm(), submitForm(), onModalKeydown($event)
  $refs.modal
 
  Props:
    $titleId (string, default 'lead-form-title')
    $submitLabelExpr (string, default `...`)
--}}
@php
    $titleId = $titleId ?? 'lead-form-title';
@endphp
<div ...></div>

İlkeler

• İsim sözleşmesi — parent Alpine component canAdvance(), isLastStep() gibi standart metod isimleri sağlar; component body’sinde bu isimler hard-coded.
• Prop ile yalnız varyasyon — farklı sayfalarda aynı component’in mikro farkı (buton metni, dinamik label expr) prop ile geçilir; state/method kontratı değişmez.
• Default’lar PHP bloğunda — $x = $x ?? 'default' pattern’ı her partial başında.
• x-for içinde include OK — <template x-for="s in list"><include /></template> çalışır; component s.* erişebilir.

Ne zaman component’e bölmelisin

• 2+ sayfada aynı blok tekrarlanıyor → hemen böl.
• Blok 50+ satırsa ve mantığı izole ise → tek sayfada bile component’e al.
• Parent-özgün iş mantığı varsa → inline bırak (ör. finder’ın “Seçimleriniz” accordion’ı tek yerde kullanıldı, inline kaldı).

Related

• 2026-04-15-banner-config-pattern — db-driven toggle, component prop’larıyla benzer pattern
• 2026-04-15-blade-template-literal-gotcha — component içinde template literal tehlikesi