feat(arayüz): Tailwind + shadcn/ui tasarım sistemi, tema ve biçimlendirme
- Tailwind v4 + shadcn/ui (Radix), Inter yazı tipi (yerel) - Tasarım token'ları: 4 ana grup (renk körlüğüne uygun) ve durum renkleri, WCAG AA - Aydınlık / Karanlık / Sistem teması (ilk açılışta parlama yok) - lib/format.ts: para (1.250,00 ₺), miktar, yüzde, tarih (GG.AA.YYYY), tutar ayrıştırma - Vitest: 22 biçimlendirme testi; npm test artık frontend'i de çalıştırır - Butonlar mobil dokunma alanına (≥44 px) göre büyütüldü Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -55,12 +55,14 @@ npm run db:up # yerel MongoDB (Docker)
|
||||
npm run db:down
|
||||
npm run db:seed
|
||||
npm run db:reset # kakeibo_dev + artık kakeibo_test_* veritabanlarını siler
|
||||
npm test # backend: birim + entegrasyon (yerel MongoDB açık olmalı)
|
||||
npm test # backend (cargo test, MongoDB açık olmalı) + frontend (vitest)
|
||||
npm run lint # clippy + oxlint
|
||||
```
|
||||
- `npm run dev` öncesinde DB otomatik başlar (`predev`).
|
||||
- Yerel MongoDB host portu **27020** (27017 sistem mongod, 27018/27019 diğer projeler).
|
||||
- Frontend lint: **oxlint** (Vite şablonu varsayılanı; ESLint yerine).
|
||||
- Frontend lint: **oxlint** (Vite şablonu varsayılanı; ESLint yerine). `components/ui/**` shadcn dosyaları.
|
||||
- Frontend: Tailwind v4 (`src/index.css` token'ları), shadcn/ui (style `radix-nova`, `cn` paketi), `@/` → `src/`. Renkler: `bg-needs`/`text-needs-fg`/`bg-needs-soft` (wants, culture, unexpected aynı), `text-income`/`text-expense`/`text-warning`. Tutarlarda `money` sınıfı. Butonlar ≥44 px (shadcn boyutları büyütüldü).
|
||||
- Grup tanımları: `lib/groups.ts`; tema: `lib/theme.tsx` (+ `index.html` içindeki ilk-boya betiği); biçimlendirme: `lib/format.ts`.
|
||||
- API örnekleri: `backend/api.http`
|
||||
- Backend = lib (`src/lib.rs`) + bin (`src/main.rs`). Entegrasyon testleri `backend/tests/` (her test geçici `kakeibo_test_<uuid>` DB, `tests/common` yardımcıları).
|
||||
- Hane izolasyonu: hane kimliği yalnızca `AuthUser.household_id`'den; sorgular `scope(hid)` ile başlar; başka hane → 404.
|
||||
|
||||
+8
-2
@@ -1,7 +1,7 @@
|
||||
# 🧠 Proje Hafızası
|
||||
|
||||
## ▶️ Sıradaki Adım
|
||||
**Faz 2 – Başlangıç:** Faz 2 planını sun (Tailwind + shadcn/ui kurulumu, tasarım token'ları, tema, logo/ikonlar, layout + navigasyon, giriş/kayıt ekranları, `lib/format.ts`, `lib/api.ts`), onay al.
|
||||
**Faz 2 – Adım 2:** Logo + uygulama ikonu (SVG, defter + yen/para teması), favicon, PWA ikonları (192/512, maskable), Apple touch icon. PNG üretimi için araç seçimi (rsvg-convert / sharp).
|
||||
|
||||
## 📌 Alınan Kararlar
|
||||
- Sürüm kontrolü: Gitea (`https://gitea.ta1sph.info/suphicakir/kakeibo.git`), dal `main`.
|
||||
@@ -19,7 +19,10 @@
|
||||
- `AuthUser` her istekte DB'den kullanıcıyı doğrular (silinen kullanıcı → 401, rol DB'den). Owner-only işlemler: `auth.require_owner()?`.
|
||||
- Davet: 8 karakter (31 harflik okunaklı alfabe), 7 gün, tek kullanım; `find_one_and_update` ile atomik claim, kayıt transaction'ı içinde.
|
||||
- Kategoriler/ödeme türleri: tüm üyeler yönetir; silme yok (pasife alma); grup sonradan değişmez; ad grup içinde benzersiz (büyük/küçük harf duyarsız, pasifler dahil); PATCH'te `version` → iyimser kilit (409); sıralama tam liste ister.
|
||||
- Sürümler: Rust 1.99.1 (edition 2024), Axum 0.8, React 19, Vite 8, TypeScript 7.
|
||||
- Tasarım: ana renk indigo (`oklch(0.42 0.13 268)`), grup renkleri Okabe-Ito (needs #0072b2, wants #cc79a7, culture #009e73, unexpected #d55e00), *-fg tonları AA (açık ≥5.0, koyu ≥9) hesaplanarak doğrulandı. Gelir #15803d, gider #c62828, uyarı #b45309.
|
||||
- Tema seçimi localStorage (`kakeibo-theme`), yalnızca cihaz kolaylığı; ileride `users.preferences.theme` ile senkron olabilir.
|
||||
- `parseMoney`: virgül varsa ondalık; virgül yoksa son noktadan sonra 1–2 rakam → ondalık ("1.25" = 1,25 ₺; "1.250" = 1250 ₺).
|
||||
- Sürümler: Rust 1.99.1 (edition 2024), Axum 0.8, React 19, Vite 8, TypeScript 7, Tailwind 4.3, shadcn 4.23, Vitest 5.
|
||||
|
||||
## ❓ Açık Konular
|
||||
- Üye çıkarma / rol değiştirme / sahipliği devretme henüz yok (Ayarlar ekranıyla birlikte, Faz 2+).
|
||||
@@ -43,3 +46,6 @@
|
||||
- **Adım 3:** Kimlik doğrulama: `auth/` (password argon2id + spawn_blocking, jwt, limiter, session cookie + `AuthUser` extractor), `extract.rs` (`ValidJson` = JSON + validator, Türkçe 400), `services/account.rs` (kayıt tek transaction: hane + owner + 13 kategori + 4 ödeme türü), `services/seed.rs`, `routes/auth.rs` (register/login/logout/me). Yeni crate'ler: argon2, jsonwebtoken, axum-extra(cookie), validator, time. 11 birim testi; 13 senaryo curl ile, rollback DB'de doğrulandı.
|
||||
- **Adım 4:** `AuthUser` DB doğrulaması + `require_owner`, `services/invite.rs` (create/list_active/revoke/claim), kayıt davet koduyla `member` olarak katılma (`services/account.rs` yeniden düzenlendi), `routes/household.rs` (GET /household, invites GET/POST/DELETE). 13 birim testi; 15 senaryo e2e (izolasyon 404, member 403, kod tekrar kullanımı, rollback) geçti.
|
||||
- **Adım 5:** `models/group.rs`, `services/catalog.rs` (kategori + ödeme türü ortak: list/create/update/reorder), `routes/catalog.rs`. Backend lib+bin'e ayrıldı (`AppState::new`). Entegrasyon testleri: `tests/isolation.rs` (3), `tests/catalog.rs` (4) — toplam 22 test. İzolasyon testi, kasıtlı açık eklenerek doğrulandı (yakaladı). `db:reset` artık test DB'lerini de siler. Dev-deps: tower, http-body-util. **Faz 1 tamamlandı.**
|
||||
|
||||
### 2026-11-12 — Faz 2
|
||||
- **Adım 1:** Tailwind v4 (@tailwindcss/vite), shadcn init (radix, preset nova; `cn` paketi = shadcn'in clsx+tailwind-merge yerine geçeni, incelendi), Inter (@fontsource-variable, çevrimdışı). `index.css`: grup + durum token'ları, odak halkası, `money` utility, reduced-motion. `lib/format.ts` (+22 vitest), `lib/theme.tsx`, `lib/groups.ts`, `components/theme-toggle.tsx`. Butonlar 44/48 px'e büyütüldü. Geçici önizleme ekranı (App.tsx), 375 px headless ekran görüntüsüyle iki temada kontrol edildi.
|
||||
|
||||
@@ -30,3 +30,10 @@
|
||||
- ✅ 3. Kimlik doğrulama: kayıt (+ hane + örnek kategori/ödeme türü), giriş, çıkış, `me`; argon2 + JWT cookie + rate limit
|
||||
- ✅ 4. Hane izolasyonu (middleware), üye davet kodu
|
||||
- ✅ 5. Kategori ve ödeme türü uç noktaları + hane izolasyonu testleri, `api.http`
|
||||
|
||||
## Faz 2 Adımları
|
||||
- ✅ 1. Tailwind v4 + shadcn/ui (radix, nova), tasarım token'ları (4 grup + durum renkleri, AA doğrulandı), Inter, tema (aydınlık/karanlık/sistem), `lib/format.ts` + Vitest
|
||||
- ⏳ 2. Logo ve uygulama ikonu (SVG), favicon, PWA/Apple ikonları
|
||||
- ⏳ 3. `lib/api.ts`, TanStack Query, ts-rs tip üretimi, oturum durumu
|
||||
- ⏳ 4. Router (react-router), korumalı sayfalar, layout: mobil alt menü / masaüstü sol menü
|
||||
- ⏳ 5. Giriş / kayıt ekranları (react-hook-form + zod, beni hatırla, davet kodu), arayüz metinleri tek dosyada
|
||||
|
||||
+22
-3
@@ -1,8 +1,27 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"plugins": [
|
||||
"react",
|
||||
"typescript",
|
||||
"oxc"
|
||||
],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
"react/only-export-components": [
|
||||
"warn",
|
||||
{
|
||||
"allowConstantExport": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"src/components/ui/**"
|
||||
],
|
||||
"rules": {
|
||||
"react/only-export-components": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "radix-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
+10
-2
@@ -2,9 +2,17 @@
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>Kakeibo</title>
|
||||
<!-- Tema: React yüklenmeden önce uygulanır → ilk açılışta "beyaz parlama" olmaz (lib/theme.tsx ile aynı mantık) -->
|
||||
<script>
|
||||
try {
|
||||
var t = localStorage.getItem('kakeibo-theme')
|
||||
if (t === 'dark' || ((!t || t === 'system') && matchMedia('(prefers-color-scheme: dark)').matches))
|
||||
document.documentElement.classList.add('dark')
|
||||
} catch (e) {}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Generated
+5236
-60
File diff suppressed because it is too large
Load Diff
+15
-3
@@ -7,11 +7,22 @@
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "oxlint",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/inter": "^5.3.0",
|
||||
"@tailwindcss/vite": "^4.3.5",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"cn": "^0.5.2",
|
||||
"lucide-react": "^1.72.0",
|
||||
"radix-ui": "^1.8.1",
|
||||
"react": "^19.3.1",
|
||||
"react-dom": "^19.3.1"
|
||||
"react-dom": "^19.3.1",
|
||||
"shadcn": "^4.23.0",
|
||||
"tailwindcss": "^4.3.5",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.19.2",
|
||||
@@ -20,6 +31,7 @@
|
||||
"@vitejs/plugin-react": "^6.1.2",
|
||||
"oxlint": "^1.90.0",
|
||||
"typescript": "~7.0.2",
|
||||
"vite": "^8.3.6"
|
||||
"vite": "^8.3.6",
|
||||
"vitest": "^5.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
+82
-10
@@ -1,12 +1,18 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Plus } from 'lucide-react'
|
||||
import { ThemeToggle } from '@/components/theme-toggle'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { formatDate, formatMoney, formatQuantity, toIsoDate } from '@/lib/format'
|
||||
import { GROUPS } from '@/lib/groups'
|
||||
|
||||
type Health = { status: string; version: string }
|
||||
type Health = { status: string; db: string; version: string }
|
||||
|
||||
// Faz 0 geçici ekranı: frontend ↔ backend bağlantısını doğrular.
|
||||
// Faz 2'de gerçek tasarım sistemi ve layout ile değiştirilecek.
|
||||
// Faz 2 – Adım 1 geçici ekranı: tasarım sistemi önizlemesi.
|
||||
// Adım 4'te gerçek layout ve sayfalarla değiştirilecek.
|
||||
export default function App() {
|
||||
const [health, setHealth] = useState<Health | null>(null)
|
||||
const [error, setError] = useState(false)
|
||||
const [today] = useState(() => toIsoDate(new Date()))
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/health')
|
||||
@@ -16,14 +22,80 @@ export default function App() {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<main className="placeholder">
|
||||
<h1>📒 Kakeibo</h1>
|
||||
<p>Kişisel Ev Finans Defteri</p>
|
||||
<p className="status">
|
||||
{error && '🔴 Backend\'e ulaşılamadı'}
|
||||
{!error && !health && '⏳ Backend kontrol ediliyor…'}
|
||||
{health && `🟢 Backend çalışıyor (v${health.version})`}
|
||||
<main className="mx-auto flex max-w-3xl flex-col gap-8 px-4 py-8">
|
||||
<header className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">📒 Kakeibo</h1>
|
||||
<p className="text-muted-foreground">Tasarım sistemi önizlemesi</p>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</header>
|
||||
|
||||
<p className="text-sm">
|
||||
{error && <span className="text-expense">● Backend'e ulaşılamadı</span>}
|
||||
{!error && !health && <span className="text-muted-foreground">● Backend kontrol ediliyor…</span>}
|
||||
{health && (
|
||||
<span className="text-income">
|
||||
● Backend çalışıyor (v{health.version}, DB: {health.db})
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-xl font-semibold">Ana gruplar</h2>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{GROUPS.map((g) => (
|
||||
<div key={g.code} className={`rounded-xl p-4 ${g.className.soft}`}>
|
||||
<div className={`flex items-center gap-2 font-semibold ${g.className.text}`}>
|
||||
<span aria-hidden>{g.emoji}</span>
|
||||
{g.label}
|
||||
</div>
|
||||
<div className="mt-3 h-2 overflow-hidden rounded-full bg-background/60">
|
||||
<div className={`h-full w-2/3 rounded-full ${g.className.fill}`} />
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-muted-foreground">{g.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-xl font-semibold">Tutarlar ve durum renkleri</h2>
|
||||
<div className="divide-y rounded-xl border bg-card">
|
||||
{[
|
||||
['Gelir', formatMoney(4_500_000, 'TRY', { signed: true }), 'text-income'],
|
||||
['Gider', formatMoney(-125_000), 'text-expense'],
|
||||
['Bütçenin %85\'i kullanıldı', formatMoney(85_000), 'text-warning'],
|
||||
['Euro', formatMoney(30_000, 'EUR'), ''],
|
||||
['Dolar', formatMoney(15_000, 'USD'), ''],
|
||||
['Gram altın', formatQuantity(12_500_000, 'gr'), ''],
|
||||
['Bugün', formatDate(today), ''],
|
||||
].map(([label, value, color]) => (
|
||||
<div key={label} className="flex items-center justify-between px-4 py-3">
|
||||
<span>{label}</span>
|
||||
<span className={`money font-medium ${color}`}>{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-xl font-semibold">Butonlar</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="lg">
|
||||
<Plus /> Harcama Ekle
|
||||
</Button>
|
||||
<Button size="lg" variant="secondary">
|
||||
İkincil
|
||||
</Button>
|
||||
<Button size="lg" variant="outline">
|
||||
Çerçeveli
|
||||
</Button>
|
||||
<Button size="lg" variant="destructive">
|
||||
Sil
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Monitor, Moon, Sun } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useTheme, type Theme } from '@/lib/theme'
|
||||
|
||||
const OPTIONS: { value: Theme; label: string; icon: typeof Sun }[] = [
|
||||
{ value: 'light', label: 'Aydınlık', icon: Sun },
|
||||
{ value: 'dark', label: 'Karanlık', icon: Moon },
|
||||
{ value: 'system', label: 'Sistem', icon: Monitor },
|
||||
]
|
||||
|
||||
/** Aydınlık / Karanlık / Sistem seçici (radyo grubu gibi davranır, klavyeyle gezilebilir). */
|
||||
export function ThemeToggle({ className }: { className?: string }) {
|
||||
const { theme, setTheme } = useTheme()
|
||||
return (
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label="Tema"
|
||||
className={cn('inline-flex rounded-lg border bg-muted p-1', className)}
|
||||
>
|
||||
{OPTIONS.map(({ value, label, icon: Icon }) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={theme === value}
|
||||
onClick={() => setTheme(value)}
|
||||
className={cn(
|
||||
'inline-flex min-h-11 min-w-11 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors',
|
||||
theme === value && 'bg-background text-foreground shadow-sm',
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" aria-hidden />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "cn"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
// Kakeibo: mobile-first — dokunma alanı en az 44×44 px (KAKEIBO_PROMPT §9)
|
||||
default:
|
||||
"h-11 gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-9 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-12 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
|
||||
icon: "size-11",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-9 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-12",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
+202
-30
@@ -1,37 +1,209 @@
|
||||
/* Faz 0 geçici stil. Faz 2'de TailwindCSS ile değiştirilecek. */
|
||||
:root {
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
color-scheme: light dark;
|
||||
background: #fafaf9;
|
||||
color: #1c1917;
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/inter";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: 'Inter Variable', system-ui, sans-serif;
|
||||
|
||||
/* Kakeibo: 4 ana grup + durum renkleri (aşağıdaki :root / .dark değişkenlerinden) */
|
||||
--color-needs: var(--needs);
|
||||
--color-needs-fg: var(--needs-fg);
|
||||
--color-needs-soft: var(--needs-soft);
|
||||
--color-wants: var(--wants);
|
||||
--color-wants-fg: var(--wants-fg);
|
||||
--color-wants-soft: var(--wants-soft);
|
||||
--color-culture: var(--culture);
|
||||
--color-culture-fg: var(--culture-fg);
|
||||
--color-culture-soft: var(--culture-soft);
|
||||
--color-unexpected: var(--unexpected);
|
||||
--color-unexpected-fg: var(--unexpected-fg);
|
||||
--color-unexpected-soft: var(--unexpected-soft);
|
||||
--color-income: var(--income);
|
||||
--color-expense: var(--expense);
|
||||
--color-warning: var(--warning);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
background: #1c1917;
|
||||
color: #f5f5f4;
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.42 0.13 268); /* ai-iro: Japon indigosu */
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.55 0.13 268);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
|
||||
/* 4 ana grup — Okabe-Ito (renk körlüğüne uygun) paletinden.
|
||||
*: çubuk/dolgu · *-fg: yazı (WCAG AA ≥ 4.5:1) · *-soft: zemin */
|
||||
--needs: #0072b2;
|
||||
--needs-fg: #005a8c;
|
||||
--needs-soft: #e6f1f8;
|
||||
--wants: #cc79a7;
|
||||
--wants-fg: #9c3f72;
|
||||
--wants-soft: #f9eef4;
|
||||
--culture: #009e73;
|
||||
--culture-fg: #00714f;
|
||||
--culture-soft: #e5f5f0;
|
||||
--unexpected: #d55e00;
|
||||
--unexpected-fg: #a84a00;
|
||||
--unexpected-soft: #fbefe5;
|
||||
|
||||
/* Durum: gelir/olumlu · gider/aşım · uyarı (yazı olarak AA uyumlu) */
|
||||
--income: #15803d;
|
||||
--expense: #c62828;
|
||||
--warning: #b45309;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.72 0.12 268);
|
||||
--primary-foreground: oklch(0.18 0.03 268);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.62 0.12 268);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
|
||||
/* Koyu zeminde daha açık tonlar (kontrast için) */
|
||||
--needs: #3a9fdb;
|
||||
--needs-fg: #7cc3f0;
|
||||
--needs-soft: #10283a;
|
||||
--wants: #d98fb8;
|
||||
--wants-fg: #ecb6d4;
|
||||
--wants-soft: #35202c;
|
||||
--culture: #1fbf8f;
|
||||
--culture-fg: #6fdcb9;
|
||||
--culture-soft: #0c2e25;
|
||||
--unexpected: #f07a24;
|
||||
--unexpected-fg: #f8a96b;
|
||||
--unexpected-soft: #3a2010;
|
||||
|
||||
--income: #4ade80;
|
||||
--expense: #f87171;
|
||||
--warning: #fbbf24;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
font-size: 16px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
/* Görünür odak halkası (klavye ile gezinme) */
|
||||
:focus-visible {
|
||||
@apply outline-2 outline-offset-2 outline-ring;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
gap: 0.25rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.placeholder h1 {
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 1.5rem;
|
||||
/* Tutarlar: rakamlar alt alta hizalı */
|
||||
@utility money {
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Hareket azaltma tercihine saygı */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import {
|
||||
formatDate,
|
||||
formatMoney,
|
||||
formatNumber,
|
||||
formatPercent,
|
||||
formatQuantity,
|
||||
parseMoney,
|
||||
toIsoDate,
|
||||
} from './format'
|
||||
|
||||
describe('formatMoney', () => {
|
||||
it('kuruşu Türkçe biçimde, para birimi sağda ve boşluklu yazar', () => {
|
||||
expect(formatMoney(125000)).toBe('1.250,00 ₺')
|
||||
expect(formatMoney(30000, 'EUR')).toBe('300,00 €')
|
||||
expect(formatMoney(15000, 'USD')).toBe('150,00 $')
|
||||
expect(formatMoney(0)).toBe('0,00 ₺')
|
||||
expect(formatMoney(5)).toBe('0,05 ₺')
|
||||
expect(formatMoney(123456789)).toBe('1.234.567,89 ₺')
|
||||
})
|
||||
|
||||
it('negatif ve işaretli', () => {
|
||||
expect(formatMoney(-125000)).toBe('-1.250,00 ₺')
|
||||
expect(formatMoney(125000, 'TRY', { signed: true })).toBe('+1.250,00 ₺')
|
||||
expect(formatMoney(-500, 'TRY', { signed: true })).toBe('-5,00 ₺')
|
||||
})
|
||||
})
|
||||
|
||||
describe('diğer biçimler', () => {
|
||||
it('miktar, sayı, yüzde', () => {
|
||||
expect(formatQuantity(12_500_000, 'gr')).toBe('12,50 gr')
|
||||
expect(formatQuantity(1_234_567, 'gr', 3)).toBe('1,235 gr')
|
||||
expect(formatNumber(1250.5)).toBe('1.250,50')
|
||||
expect(formatPercent(0.123)).toBe('%12,3')
|
||||
})
|
||||
|
||||
it('tarih GG.AA.YYYY', () => {
|
||||
expect(formatDate('2026-12-09')).toBe('09.12.2026')
|
||||
expect(formatDate(new Date(2027, 0, 1))).toBe('01.01.2027')
|
||||
expect(toIsoDate(new Date(2026, 11, 9))).toBe('2026-12-09')
|
||||
})
|
||||
})
|
||||
|
||||
describe('parseMoney', () => {
|
||||
it.each([
|
||||
['1250', 125000],
|
||||
['1.250', 125000],
|
||||
['1250,5', 125050],
|
||||
['1.250,50', 125050],
|
||||
['1250.50', 125050], // telefon klavyesindeki nokta
|
||||
['1250.5', 125050],
|
||||
[' 1.250,00 ₺ ', 125000],
|
||||
[',99', 99],
|
||||
['0,1', 10],
|
||||
['1.234.567,89', 123456789],
|
||||
['-45,5', -4550],
|
||||
])('%s → %i kuruş', (input, expected) => {
|
||||
expect(parseMoney(input)).toBe(expected)
|
||||
})
|
||||
|
||||
it.each(['', 'abc', '1,2,3', '12,345', '1.250,5.0', '₺'])('geçersiz: "%s"', (input) => {
|
||||
expect(parseMoney(input)).toBeNull()
|
||||
})
|
||||
|
||||
it('kayan nokta hatası yok (0,1 + 0,2 gibi değerler tam)', () => {
|
||||
expect(parseMoney('0,29')).toBe(29)
|
||||
expect(parseMoney('19,99')).toBe(1999)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* Tüm sayı / para / tarih biçimlendirmesi buradan yapılır (KAKEIBO_PROMPT §9).
|
||||
*
|
||||
* - Para: backend'den **kuruş cinsinden tamsayı** gelir → `1.250,00 ₺`
|
||||
* (para birimi rakamın sağında, arada bir boşluk)
|
||||
* - Miktar (altın, döviz): milyonda bir birim (`_e6`) → `12,50 gr`
|
||||
* - Tarih: `GG.AA.YYYY`
|
||||
*/
|
||||
|
||||
export type CurrencyCode = 'TRY' | 'USD' | 'EUR' | 'XAU_GRAM'
|
||||
|
||||
const CURRENCY_SUFFIX: Record<CurrencyCode, string> = {
|
||||
TRY: '₺',
|
||||
USD: '$',
|
||||
EUR: '€',
|
||||
XAU_GRAM: 'gr',
|
||||
}
|
||||
|
||||
const numberFormats = new Map<number, Intl.NumberFormat>()
|
||||
function numberFormat(decimals: number): Intl.NumberFormat {
|
||||
let f = numberFormats.get(decimals)
|
||||
if (!f) {
|
||||
f = new Intl.NumberFormat('tr-TR', {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
})
|
||||
numberFormats.set(decimals, f)
|
||||
}
|
||||
return f
|
||||
}
|
||||
|
||||
/** Ondalıklı sayıyı Türkçe biçimler: `1250.5` → `1.250,50` */
|
||||
export function formatNumber(value: number, decimals = 2): string {
|
||||
return numberFormat(decimals).format(value)
|
||||
}
|
||||
|
||||
/** Kuruş → `1.250,00 ₺`. `signed: true` ise pozitiflere `+` eklenir. */
|
||||
export function formatMoney(
|
||||
kurus: number,
|
||||
currency: CurrencyCode = 'TRY',
|
||||
options: { signed?: boolean } = {},
|
||||
): string {
|
||||
const text = `${formatNumber(kurus / 100)} ${CURRENCY_SUFFIX[currency]}`
|
||||
return options.signed && kurus > 0 ? `+${text}` : text
|
||||
}
|
||||
|
||||
/** Milyonda bir birim → `12,50 gr` (altın, döviz miktarı) */
|
||||
export function formatQuantity(e6: number, unit: string, decimals = 2): string {
|
||||
return `${formatNumber(e6 / 1_000_000, decimals)} ${unit}`
|
||||
}
|
||||
|
||||
/** Yüzde: `0.123` → `%12,3` (Türkçede % işareti başta) */
|
||||
export function formatPercent(ratio: number, decimals = 1): string {
|
||||
return `%${formatNumber(ratio * 100, decimals)}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Kullanıcının yazdığı tutarı kuruşa çevirir. Geçersizse `null`.
|
||||
*
|
||||
* Kabul edilenler: `1250` · `1.250` · `1250,5` · `1.250,50` · `1250.50` (telefon klavyesi)
|
||||
* Kural: virgül varsa ondalık ayırıcıdır, noktalar binliktir.
|
||||
* Virgül yoksa ve son noktadan sonra 1–2 rakam varsa o nokta ondalıktır.
|
||||
* Float hatası olmasın diye hesap metin üzerinden yapılır.
|
||||
*/
|
||||
export function parseMoney(input: string): number | null {
|
||||
let s = input.replace(/[\s₺]/g, '')
|
||||
if (!s) return null
|
||||
|
||||
let negative = false
|
||||
if (s.startsWith('-')) {
|
||||
negative = true
|
||||
s = s.slice(1)
|
||||
}
|
||||
|
||||
let intPart: string
|
||||
let fracPart = ''
|
||||
if (s.includes(',')) {
|
||||
const parts = s.split(',')
|
||||
if (parts.length !== 2) return null
|
||||
intPart = parts[0].replace(/\./g, '')
|
||||
fracPart = parts[1]
|
||||
} else {
|
||||
const m = /^(.*)\.(\d{1,2})$/.exec(s)
|
||||
if (m && !m[1].includes('.')) {
|
||||
intPart = m[1]
|
||||
fracPart = m[2]
|
||||
} else {
|
||||
intPart = s.replace(/\./g, '')
|
||||
}
|
||||
}
|
||||
|
||||
if (intPart === '') intPart = '0'
|
||||
if (!/^\d+$/.test(intPart) || !/^\d{0,2}$/.test(fracPart)) return null
|
||||
|
||||
const kurus = Number(intPart) * 100 + Number(fracPart.padEnd(2, '0'))
|
||||
if (!Number.isSafeInteger(kurus)) return null
|
||||
return negative ? -kurus : kurus
|
||||
}
|
||||
|
||||
/** `"2026-12-09"` veya ISO zaman damgası → `09.12.2026` */
|
||||
export function formatDate(value: string | Date): string {
|
||||
if (typeof value === 'string') {
|
||||
const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
|
||||
if (m) return `${m[3]}.${m[2]}.${m[1]}`
|
||||
value = new Date(value)
|
||||
}
|
||||
const dd = String(value.getDate()).padStart(2, '0')
|
||||
const mm = String(value.getMonth() + 1).padStart(2, '0')
|
||||
return `${dd}.${mm}.${value.getFullYear()}`
|
||||
}
|
||||
|
||||
/** Yerel tarih → `"2026-12-09"` (backend'in takvim tarihi biçimi) */
|
||||
export function toIsoDate(date: Date): string {
|
||||
const mm = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const dd = String(date.getDate()).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${mm}-${dd}`
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* 4 sabit ana grup (backend `models/group.rs` ile aynı kodlar).
|
||||
* Renk asla tek başına anlam taşımaz: her zaman emoji/ikon + etiketle birlikte kullanılır.
|
||||
*/
|
||||
import { BookOpen, House, ShoppingBag, Zap, type LucideIcon } from 'lucide-react'
|
||||
|
||||
export type GroupCode = 'needs' | 'wants' | 'culture' | 'unexpected'
|
||||
|
||||
export type GroupMeta = {
|
||||
code: GroupCode
|
||||
label: string
|
||||
emoji: string
|
||||
icon: LucideIcon
|
||||
description: string
|
||||
/** Tailwind sınıfları (index.css'teki token'lardan) */
|
||||
className: {
|
||||
/** dolgu: çubuk, nokta */
|
||||
fill: string
|
||||
/** yazı (AA kontrast) */
|
||||
text: string
|
||||
/** yumuşak zemin */
|
||||
soft: string
|
||||
}
|
||||
}
|
||||
|
||||
export const GROUPS: readonly GroupMeta[] = [
|
||||
{
|
||||
code: 'needs',
|
||||
label: 'Zorunlu',
|
||||
emoji: '🏠',
|
||||
icon: House,
|
||||
description: 'Temel ihtiyaçlar: market, fatura, ulaşım',
|
||||
className: { fill: 'bg-needs', text: 'text-needs-fg', soft: 'bg-needs-soft' },
|
||||
},
|
||||
{
|
||||
code: 'wants',
|
||||
label: 'İstek',
|
||||
emoji: '🛍️',
|
||||
icon: ShoppingBag,
|
||||
description: 'Arzular: dışarıda yemek, alışveriş',
|
||||
className: { fill: 'bg-wants', text: 'text-wants-fg', soft: 'bg-wants-soft' },
|
||||
},
|
||||
{
|
||||
code: 'culture',
|
||||
label: 'Kültürel',
|
||||
emoji: '📚',
|
||||
icon: BookOpen,
|
||||
description: 'Kitap, eğitim, sinema, konser',
|
||||
className: { fill: 'bg-culture', text: 'text-culture-fg', soft: 'bg-culture-soft' },
|
||||
},
|
||||
{
|
||||
code: 'unexpected',
|
||||
label: 'Beklenmeyen',
|
||||
emoji: '⚡',
|
||||
icon: Zap,
|
||||
description: 'Öngörülmeyen: tamir, sağlık, hediye',
|
||||
className: {
|
||||
fill: 'bg-unexpected',
|
||||
text: 'text-unexpected-fg',
|
||||
soft: 'bg-unexpected-soft',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
export function group(code: GroupCode): GroupMeta {
|
||||
return GROUPS.find((g) => g.code === code)!
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Aydınlık / Karanlık / Sistem teması.
|
||||
*
|
||||
* Seçim tarayıcıda saklanır (yalnızca bu cihaz için bir kolaylık).
|
||||
* İlk boyamada "beyaz parlama" olmasın diye aynı mantık `index.html` içinde de çalışır.
|
||||
*/
|
||||
import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react'
|
||||
|
||||
export type Theme = 'light' | 'dark' | 'system'
|
||||
|
||||
const STORAGE_KEY = 'kakeibo-theme'
|
||||
const media = () => window.matchMedia('(prefers-color-scheme: dark)')
|
||||
|
||||
function readStored(): Theme {
|
||||
try {
|
||||
const v = localStorage.getItem(STORAGE_KEY)
|
||||
if (v === 'light' || v === 'dark' || v === 'system') return v
|
||||
} catch {
|
||||
/* gizli sekme vb. — varsayılan kullanılır */
|
||||
}
|
||||
return 'system'
|
||||
}
|
||||
|
||||
function apply(theme: Theme) {
|
||||
const dark = theme === 'dark' || (theme === 'system' && media().matches)
|
||||
document.documentElement.classList.toggle('dark', dark)
|
||||
document.documentElement.style.colorScheme = dark ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
type ThemeContextValue = { theme: Theme; setTheme: (t: Theme) => void }
|
||||
const ThemeContext = createContext<ThemeContextValue | null>(null)
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [theme, setThemeState] = useState<Theme>(readStored)
|
||||
|
||||
useEffect(() => {
|
||||
apply(theme)
|
||||
if (theme !== 'system') return
|
||||
// Sistem teması değişirse (ör. akşam otomatik koyu mod) anında uygula
|
||||
const m = media()
|
||||
const onChange = () => apply('system')
|
||||
m.addEventListener('change', onChange)
|
||||
return () => m.removeEventListener('change', onChange)
|
||||
}, [theme])
|
||||
|
||||
const setTheme = useCallback((t: Theme) => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, t)
|
||||
} catch {
|
||||
/* saklanamazsa yalnızca bu oturumda geçerli olur */
|
||||
}
|
||||
setThemeState(t)
|
||||
}, [])
|
||||
|
||||
return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>
|
||||
}
|
||||
|
||||
// oxlint-disable-next-line react/only-export-components -- hook, provider ile aynı dosyada
|
||||
export function useTheme(): ThemeContextValue {
|
||||
const ctx = useContext(ThemeContext)
|
||||
if (!ctx) throw new Error('useTheme, ThemeProvider içinde kullanılmalı')
|
||||
return ctx
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { cn } from "cn"
|
||||
@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { ThemeProvider } from '@/lib/theme'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* "@/..." → src/... */
|
||||
"paths": { "@/*": ["./src/*"] },
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
{
|
||||
"files": [],
|
||||
"compilerOptions": {
|
||||
"paths": { "@/*": ["./src/*"] }
|
||||
},
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
import path from 'node:path'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
// "@/lib/format" → src/lib/format
|
||||
alias: { '@': path.resolve(import.meta.dirname, './src') },
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
strictPort: true,
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@
|
||||
"db:down": "docker compose -f docker-compose.dev.yml stop",
|
||||
"db:seed": "echo 'Seed betiği Faz 1-4 arasında eklenecek.'",
|
||||
"db:reset": "docker exec kakeibo-mongo mongosh --quiet --eval \"db.getSiblingDB('kakeibo_dev').dropDatabase(); db.adminCommand({listDatabases:1}).databases.filter(d => d.name.startsWith('kakeibo_test_')).forEach(d => db.getSiblingDB(d.name).dropDatabase()); print('kakeibo_dev ve test veritabanları sıfırlandı.')\"",
|
||||
"test": "cd backend && cargo test",
|
||||
"test": "cd backend && cargo test && cd .. && npm --prefix frontend test",
|
||||
"lint": "cd backend && cargo clippy && cd .. && npm --prefix frontend run lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Reference in New Issue
Block a user