66 lines
3.3 KiB
Markdown
66 lines
3.3 KiB
Markdown
# Phase 3 UI Implementation Notes
|
||
|
||
> Tarihsel not: Bu belgede uygulanan internal UI yönü 2026-07-16 tarihli ADR-0006 ile supersede edilmiştir. İleriye dönük hedef Poyraz UI v3'ü tek genel UI sistemi olarak kullanmaktır. Buradaki internal primitive ve shell'ler geçiş/baseline kodu olarak değerlendirilmelidir.
|
||
|
||
## Kapsam
|
||
|
||
Bu fazda Poyraz UI tamamen package seviyesinde kaldırılmadı. Mevcut feature sayfaları hâlâ Poyraz component import ediyor ve Faz 4-6 sırasında veri/UI birlikte taşınacak. Faz 3 uygulaması yeni internal primitive setini, auth shell'i ve dashboard/portal shell'i Poyraz import sınırından ayırır.
|
||
|
||
## Eklenen primitive seti
|
||
|
||
- `components/ui/button.tsx`: `Button` ve accessible `IconButton`.
|
||
- `components/ui/input.tsx`: `Input` ve `Textarea`.
|
||
- `components/ui/field.tsx`: `Label` ve `Field` description/error yapısı.
|
||
- `components/ui/card.tsx`: temel card yüzeyleri.
|
||
- `components/ui/skeleton.tsx`: layout ölçüsünü koruyan skeleton.
|
||
- `components/ui/toast.tsx`: live-region tabanlı basit toaster.
|
||
|
||
## Shell değişiklikleri
|
||
|
||
- `components/layout/app-shell.tsx` dashboard ve portal için ortak responsive shell oldu.
|
||
- Dashboard shell ve portal shell doğrudan Poyraz import etmiyor.
|
||
- Account menüsü Escape, dışarı tıklama ve focus return davranışına sahip.
|
||
- Mobile sidebar route değişiminde kapanıyor.
|
||
- Skip link ana içeriğe keyboard erişimi sağlıyor.
|
||
|
||
## Token kararı
|
||
|
||
- `app/globals.css` artık `--poyraz-*` token tanımlamıyor.
|
||
- Tailwind v4 theme mapping semantik tokenlardan geliyor.
|
||
- Eski feature sayfaları için `background`, `primary`, `muted`, `border` gibi legacy class adları semantik tokenlara bağlı tutuldu.
|
||
- Dark mode bu fazda desteklenmiyor; light-only karar korunuyor.
|
||
|
||
## Boundary kontrolü
|
||
|
||
`npm run phase3:ui-boundary` aşağıdaki alanlarda `poyraz-ui` importu ve `--poyraz` token kullanımını engeller:
|
||
|
||
- root layout/global CSS
|
||
- auth ekranları
|
||
- dashboard/portal shell
|
||
- internal UI primitive'leri
|
||
- sidebar config dosyaları
|
||
|
||
## Poyraz component mapping
|
||
|
||
| Eski kullanım | Yeni hedef |
|
||
| --- | --- |
|
||
| `poyraz-ui/atoms` `Button` | `components/ui/button` `Button` |
|
||
| `poyraz-ui/atoms` `Input` | `components/ui/input` `Input` |
|
||
| `poyraz-ui/atoms` `Textarea` | `components/ui/input` `Textarea` |
|
||
| `poyraz-ui/atoms` `Label` | `components/ui/field` `Label` veya `Field` |
|
||
| `poyraz-ui/atoms` `Card`, `CardContent` | `components/ui/card` |
|
||
| `poyraz-ui/atoms` `Badge` | Faz 4 core UI icinde `components/ui/badge` |
|
||
| `poyraz-ui/molecules` `DropdownMenu` | Shell icin internal `AccountMenu`; feature'lar icin `components/ui/dropdown-menu` |
|
||
| `poyraz-ui/molecules` `Dialog` | `components/ui/dialog` |
|
||
| `poyraz-ui/molecules` `Select` | `components/ui/select` |
|
||
| `poyraz-ui/molecules` `Tabs` | Faz 4 ihtiyacinda `components/ui/tabs` |
|
||
| `poyraz-ui/molecules` `toast` | `components/ui/toast` `showToast` veya `hooks/use-toast` |
|
||
| `poyraz-ui/organisms` `Sidebar*` | `components/layout/app-shell` |
|
||
| `poyraz-ui/atoms` `Typography` | Semantik HTML ve token tabanli typography class'lari |
|
||
|
||
## Kalan işler
|
||
|
||
- Feature sayfalarındaki Poyraz importları Faz 4-6 feature rewrite sırasında kaldırılacak.
|
||
- Tam viewport screenshot ve keyboard/contrast matrisi Playwright kurulumu ile ayrıca kapatılmalı.
|
||
- Dialog/select/tabs gibi daha karmaşık primitive'ler feature ihtiyaçları netleşince internal API ile eklenecek.
|