From cce7265fb1fe91ea1bb0aeec118f021722af8a36 Mon Sep 17 00:00:00 2001 From: poyrazavsever Date: Thu, 15 Jul 2027 10:00:00 +0300 Subject: [PATCH] docs: define self-hosted v3 migration baseline --- docs/poyraz-ui-ai-consumer-guide.md | 2723 +++++++++++++++++ .../neta-self-hosted-v3-master-plan.md | 1028 +++++++ docs/self-hosted-redesign/phase-0-adrs.md | 100 +- docs/self-hosted-redesign/phase-0-baseline.md | 644 ++-- .../phase-0-data-mapping.md | 34 +- docs/self-hosted-redesign/phase-0-fixtures.md | 12 +- .../phase-0-regression-and-spike.md | 11 +- docs/self-hosted-redesign/phase-3-ui.md | 2 + 8 files changed, 4252 insertions(+), 302 deletions(-) create mode 100644 docs/poyraz-ui-ai-consumer-guide.md create mode 100644 docs/self-hosted-redesign/neta-self-hosted-v3-master-plan.md diff --git a/docs/poyraz-ui-ai-consumer-guide.md b/docs/poyraz-ui-ai-consumer-guide.md new file mode 100644 index 0000000..3740ce7 --- /dev/null +++ b/docs/poyraz-ui-ai-consumer-guide.md @@ -0,0 +1,2723 @@ +# Poyraz UI — AI Consumer Guide + +Bu doküman, `poyraz-ui` paketini başka bir React/Next.js projesinde kullanmak isteyen bir geliştiricinin veya bir AI kod asistanının doğrudan okuyup doğru kararlar verebilmesi için hazırlanmıştır. + +Amaç: Bir projede UI geliştirirken AI’a bu dosyayı verip “poyraz-ui kullanarak bu ekranı oluştur” dediğinizde, AI’ın doğru import path’lerini, doğru componentleri, doğru variantları, doğru tema yaklaşımını ve doğru tasarım dilini uygulaması. + +Referans paket: `poyraz-ui@3.0.2` + +--- + +## 1. AI için kısa talimat + +Eğer bu dokümanı bir AI’a vereceksen, aşağıdaki bölümü prompt’un başına koyabilirsin: + +```md +Bu projede UI için poyraz-ui kullan. + +Kurallar: +- React componentleri için `poyraz-ui/atoms`, `poyraz-ui/molecules`, `poyraz-ui/organisms` import path’lerini kullan. +- Global CSS’e `@import "poyraz-ui/preset.css";` eklenmiş kabul et; ekli değilse ekle. +- Gereksiz custom CSS yazma. Önce component variantlarını, radius/size/surface/appearance/effect prop’larını ve Tailwind utility classlarını kullan. +- Tasarım dili: minimal, soft, hafif rounded, clean border, mümkün olduğunda gölgesiz, dark-mode uyumlu, semantic token bazlı. +- Buttonlarda varsayılan hover motion için mümkünse `effect="swap"` kullan. Shine/fill/border-draw efektlerini yalnızca bilinçli vurgu için kullan. +- Form, overlay, dropdown, dialog, sheet, tabs, tooltip gibi davranışlı componentlerde poyraz-ui molecule componentlerini kullan; kendi headless implementation’ını yazma. +- Layout seviyesinde Navbar, Sidebar, Footer, AnnouncementBar ve DataTable gerekiyorsa `poyraz-ui/organisms` kullan. +- Componentleri erişilebilir şekilde kur: label/input ilişkisi, keyboard navigation, focus ring, aria-label, dialog title gibi gereklilikleri koru. +``` + +--- + +## 2. Poyraz UI nedir? + +Poyraz UI; React, Tailwind CSS v4 ve Radix UI temelli, minimal ve soft-glass tasarım diline sahip bir component sistemidir. + +Temel karakter: + +- Compact ve minimal görünüm +- Clean border ağırlıklı yüzeyler +- Gölge kullanımını minimumda tutan sade tasarım +- Hafif rounded köşeler +- Glass, soft, solid yüzey seçenekleri +- Semantic token sistemi +- Dark mode uyumu +- Radix tabanlı erişilebilir primitives +- Shadcn mantığına yakın source registry desteği +- Npm paketi olarak merkezi kullanım +- Atomic Design yapısı: + - Atoms + - Molecules + - Organisms + - Blocks/templates + +--- + +## 3. Dağıtım modeli + +Poyraz UI iki farklı kullanım modelini destekler. + +### 3.1. Npm package kullanımı + +Merkezi versiyon yönetimi, hızlı kurulum ve paket importları için kullanılır. + +```bash +pnpm add poyraz-ui@3 +``` + +```tsx +import { Button, Card, Input } from "poyraz-ui/atoms"; +import { Dialog, Tabs } from "poyraz-ui/molecules"; +import { Navbar } from "poyraz-ui/organisms"; +``` + +Bu modelde component kaynak kodu projenize kopyalanmaz. Paket güncellendikçe componentler merkezi olarak güncellenir. + +### 3.2. Source registry kullanımı + +Shadcn tarzı “component’i projeye kopyala, sahiplen ve özelleştir” modeli için kullanılır. + +`components.json` içine registry namespace eklenir: + +```json +{ + "registries": { + "@poyraz": "https://ui.poyrazavsever.com/r/{name}.json" + } +} +``` + +Örnek component ekleme: + +```bash +pnpm dlx shadcn@latest add @poyraz/button +``` + +Bu yaklaşımda component, projenizin configured `aliases.ui` klasörüne kopyalanır. Çok derin özelleştirme gerekiyorsa bu model tercih edilir. + +AI’a tavsiye: + +- Proje hızlıca UI geliştirecekse npm package kullan. +- Componentin kodu projede değiştirilecekse registry/source copy kullan. +- Kullanıcı “shadcn gibi kopyalansın” derse source registry modelini öner. + +--- + +## 4. Kurulum + +### 4.1. Paket kurulumu + +```bash +pnpm add poyraz-ui@3 +``` + +Alternatifler: + +```bash +npm install poyraz-ui@3 +yarn add poyraz-ui@3 +``` + +### 4.2. Peer dependencies + +Zorunlu: + +```json +{ + "react": ">=18", + "react-dom": ">=18", + "tailwindcss": ">=4" +} +``` + +Opsiyonel: + +- `react-hook-form` — `Form` molecule için +- `@hookform/resolvers` — schema resolver için +- `zod` — form validation için +- `reactive-switcher` — hazır theme objectleriyle dinamik tema için +- `mermaid` — `Mermaid` molecule için + +### 4.3. CSS kurulumu + +Root global CSS dosyasına ekle: + +```css +@import "tailwindcss"; +@import "poyraz-ui/preset.css"; +``` + +Next.js App Router örneği: + +```tsx +// app/layout.tsx +import "./globals.css"; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +`poyraz-ui/preset.css` şunları sağlar: + +- Semantic color token bridge +- Typography tokenları +- Radius/token mapping +- Motion keyframe ve animation utility’leri +- Dark mode uyumlu CSS variable altyapısı +- Componentlerin beklediği base CSS layer + +Bu import yoksa componentler görsel olarak eksik, renksiz veya animasyonsuz görünebilir. + +--- + +## 5. Import stratejisi + +Önerilen import path’leri: + +```tsx +import { Button, Card, Input } from "poyraz-ui/atoms"; +import { Dialog, DropdownMenu, Tabs } from "poyraz-ui/molecules"; +import { Navbar, Sidebar, Footer } from "poyraz-ui/organisms"; +``` + +Ana barrel de kullanılabilir: + +```tsx +import { Button, Dialog, Navbar } from "poyraz-ui"; +``` + +Fakat AI için öneri: + +- Atom seviyesindeki componentleri `poyraz-ui/atoms` üzerinden import et. +- Molecule seviyesindeki componentleri `poyraz-ui/molecules` üzerinden import et. +- Layout ve büyük section componentlerini `poyraz-ui/organisms` üzerinden import et. +- Theme objectleri gerekiyorsa `poyraz-ui/themes` kullan. + +Theme import: + +```tsx +import { poyrazLightTheme, poyrazDarkTheme, poyrazThemes } from "poyraz-ui/themes"; +``` + +Utility: + +```tsx +import { cn } from "poyraz-ui"; +``` + +--- + +## 6. Tasarım dili + +Poyraz UI’ın ana tasarım dili: + +- Minimal +- Soft +- Hafif rounded +- Clean border +- Glassy ama abartısız +- Gölgesiz veya çok düşük gölgeli +- Semantic token bazlı +- Form elemanlarında net focus ring +- Overlaylerde kontrollü blur/surface +- Dark mode’da kontrastı koruyan yüzeyler + +AI tasarım kararları: + +- Büyük gölgelerden kaçın. +- Gereksiz custom border override yazma. +- Kartlarda öncelikle `variant="default"`, `variant="glass"`, `variant="soft"` veya `variant="outline"` kullan. +- Buttonlarda vurgu CTA için `variant="default"`; ikincil CTA için `variant="secondary"`, `variant="outline"` veya `variant="glass"` kullan. +- Radius için genellikle `radius="sm"` veya `radius="md"` tercih et. +- Çok pill/rounded istenmedikçe `radius="full"` kullanma. +- Interactive hover için önce componentin kendi variant/effect prop’larını kullan. + +--- + +## 7. Tema ve token sistemi + +Poyraz UI componentleri semantic Tailwind utility’leri ve CSS variable’ları üzerinden çalışır. + +Sık kullanılan semantic utility’ler: + +```txt +bg-background +bg-card +bg-muted +bg-primary +text-foreground +text-muted-foreground +text-primary +border-border +ring-ring +``` + +Custom tema yapılacaksa genellikle global CSS’te `--poyraz-*` variable’ları override edilir. + +Örnek: + +```css +:root { + --poyraz-primary: #dc2626; + --poyraz-radius-md: 0.625rem; +} + +.dark { + --poyraz-background: #09090b; + --poyraz-foreground: #fafafa; +} +``` + +AI için kural: + +- Hard-coded renkleri minimumda tut. +- `#dc2626` gibi brand renkleri yalnızca gerçekten brand vurgusu gerekiyorsa kullan. +- Önce `primary`, `muted`, `border`, `foreground`, `card` tokenlarını kullan. + +--- + +## 8. Motion sistemi + +Poyraz UI motion sistemi CSS-only yaklaşımı tercih eder. + +Button effect’leri: + +```tsx + + + + + +``` + +Button effect prop değerleri: + +```ts +type ButtonEffect = "none" | "shine" | "fill" | "swap" | "border-draw"; +type ButtonFillDirection = "right" | "left" | "up" | "down"; +type ButtonSwapTarget = "icon" | "label" | "both"; +``` + +AI için motion kuralı: + +- Standart CTA için `effect="swap"` kullan. +- Shine efektini premium/brand vurgu için kullan. +- Fill efektini güçlü hover dolum istenirse kullan. +- Border-draw efektini outline butonlarda dekoratif vurgu için kullan. +- Hareketleri erişilebilir tut; animasyonla bilgi verme. + +Swap anatomy için önerilen yapı: + +```tsx +import { Button, ButtonIcon, ButtonLabel } from "poyraz-ui/atoms"; + + +``` + +Not: + +- `asChild` kullanımı bazı durumlarda özel children yapılarıyla effect anatomy’sini bozabilir. +- Swap effect’in net çalışması için `ButtonLabel` ve `ButtonIcon` doğrudan `Button` içinde kullanılmalıdır. + +--- + +## 9. Atoms + +Atoms, en küçük ve temel UI yapı taşlarıdır. + +### 9.1. Button + +Import: + +```tsx +import { Button, ButtonIcon, ButtonLabel } from "poyraz-ui/atoms"; +``` + +Kullanım: + +```tsx + + + + + +``` + +Variantlar: + +```txt +default +secondary +outline +glass +destructive +soft +ghost +link +``` + +Size: + +```txt +xs +sm +default +lg +icon-sm +icon +icon-lg +``` + +Radius: + +```txt +none +xs +sm +md +lg +xl +2xl +full +``` + +Effect: + +```txt +none +shine +fill +swap +border-draw +``` + +AI önerisi: + +- Primary CTA: `variant="default" effect="swap"` +- Secondary CTA: `variant="secondary" effect="swap"` +- Icon-only: `size="icon"` ve mutlaka `aria-label` +- Loading durumunda `loading` prop kullan. + +--- + +### 9.2. Badge + +Import: + +```tsx +import { Badge } from "poyraz-ui/atoms"; +``` + +Kullanım: + +```tsx +Yeni +Beta +Aktif +``` + +Variantlar: + +```txt +default +secondary +outline +glass +info +success +warning +destructive +``` + +Size: + +```txt +sm +default +lg +``` + +Radius: + +```txt +sm +md +full +``` + +AI önerisi: + +- Durum göstergelerinde `success`, `warning`, `destructive`, `info` +- Kategori etiketlerinde `outline` veya `secondary` +- Premium/soft yüzeylerde `glass` + +--- + +### 9.3. Avatar + +Import: + +```tsx +import { Avatar, AvatarImage, AvatarFallback } from "poyraz-ui/atoms"; +``` + +Kullanım: + +```tsx + + + PA + +``` + +Size: + +```txt +xs +sm +default +lg +xl +``` + +Radius: + +```txt +sm +md +lg +full +``` + +AI önerisi: + +- Kullanıcı profilinde `radius="full"` +- Kurumsal logo/avatar gridlerinde `radius="md"` veya `radius="lg"` + +--- + +### 9.4. Card + +Import: + +```tsx +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, + CardFooter, + CardAction, + CardImage, +} from "poyraz-ui/atoms"; +``` + +Kullanım: + +```tsx + + + Başlık + Açıklama metni + + + İçerik + + + Footer + + +``` + +Variantlar: + +```txt +default +outline +glass +soft +ghost +elevated +interactive +bordered +highlight +``` + +Radius: + +```txt +none +md +lg +xl +2xl +``` + +AI önerisi: + +- Genel layout kartı: `variant="default"` +- Cam efektli dashboard: `variant="glass"` +- Subtle info yüzeyi: `variant="soft"` +- Clickable kart: `variant="interactive"` +- Gölge istenmiyorsa `elevated` kullanma. + +--- + +### 9.5. Card variants + +Import: + +```tsx +import { + BasicContentCard, + ImageContentCard, + HorizontalCard, + ProfileCard, + StatisticCard, + PricingPlanCard, + FeatureCard, + GlassCard, + InteractiveCard, + ExpandableCard, +} from "poyraz-ui/atoms"; +``` + +Kullanım amaçları: + +- `BasicContentCard`: başlık, açıklama, aksiyon butonu +- `ImageContentCard`: üstte görsel, altta içerik +- `HorizontalCard`: solda görsel, sağda içerik +- `ProfileCard`: avatar, isim, rol, bio, sosyal aksiyonlar +- `StatisticCard`: KPI/metrik kartı +- `PricingPlanCard`: fiyat planı +- `FeatureCard`: ikon + özellik başlığı + açıklama +- `GlassCard`: glass yüzey kartı +- `InteractiveCard`: hover/interaction odaklı kart +- `ExpandableCard`: açılır/kapanır içerik kartı + +AI önerisi: + +- Landing page feature grid için `FeatureCard` +- Dashboard KPI için `StatisticCard` +- Pricing ekranı için `PricingPlanCard` +- Portfolio kişi kartı için `ProfileCard` + +--- + +### 9.6. Input + +Import: + +```tsx +import { Input, InputGroup, InputGroupAddon } from "poyraz-ui/atoms"; +``` + +Kullanım: + +```tsx + + + + @ + + +``` + +Field variantları: + +```txt +default +glass +soft +``` + +Radius: + +```txt +none +sm +md +lg +xl +full +``` + +AI önerisi: + +- Normal form alanı: `variant="default"` +- Cam yüzeylerde: `variant="glass"` +- Hafif arka planlı alanlarda: `variant="soft"` +- Icon prefix/suffix için `InputGroup` + `InputGroupAddon` + +--- + +### 9.7. Form Fields + +Import: + +```tsx +import { + NumberInput, + MaskedInput, + SearchInput, + PhoneInput, + PasswordInput, + UrlInput, + applyInputMask, +} from "poyraz-ui/atoms"; +``` + +Kullanım: + +```tsx + console.log(value)} /> + + console.log(formatted, raw)} +/> + + console.log(absoluteUrl)} +/> + + + + console.log(formatted, raw)} +/> +``` + +AI önerisi: + +- Search box için custom input yazma; `SearchInput` +- Telefon için `PhoneInput` +- URL için `UrlInput` +- Şifre için `PasswordInput` +- Basit maskeler için `MaskedInput` + +--- + +### 9.8. Textarea + +Import: + +```tsx +import { Textarea } from "poyraz-ui/atoms"; +``` + +Kullanım: + +```tsx +