Kullanıcılar

Projene ekle

Komut yalnızca modülü kurar; sayfa senin kararın. Seçimlerine göre prompt ve sayfa kodu hazırlanır.

ViraStack Start projeme users modülünü ekle.

1. Proje kökünde `npx virastack add users` komutunu çalıştır. Bu komut yalnızca `src/features/users` klasörünü ve paketleri kurar, sayfa oluşturmaz. Çakışma hatası alırsan hiçbir dosyayı silme, durumu bana bildir.
2. Projenin Next.js kullandığını `package.json` ve klasör yapısından doğrula. Uyuşmuyorsa dur ve bana sor.
3. `src/app/users/page.tsx` dosyasını aşağıdaki kodla oluştur. Dosya zaten varsa üzerine yazma, `UsersDirectory` bileşenini var olan sayfaya ekle.

```tsx
import { Suspense } from "react"

import { UsersDirectory } from "@/features/users/components/UsersDirectory"
import { UsersDirectorySkeleton } from "@/features/users/components/UsersDirectorySkeleton"

export default function Page() {
  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-6 sm:px-6">
      <Suspense fallback={<UsersDirectorySkeleton />}>
        <UsersDirectory />
      </Suspense>
    </main>
  )
}
```

4. API adresimi verdiysem adresi Next.js'te `NEXT_PUBLIC_API_URL`, TanStack Start'ta `VITE_API_URL` değişkenine yaz. Yanıt biçimi farklıysa `src/features/users` içinde gereken yerleri uyarla.
5. Projenin paket yöneticisiyle `typecheck`, `test` ve `lint:ci` script'lerini çalıştır, sonucu bildir.

Modülde neler var?

• Kullanıcı listesinde TanStack Query ile API isteği atılır, Zod ile yanıt doğrulanır.
• Arama ve sayfalamada URL state kullanılır: Next.js projelerinde nuqs, TanStack Start projelerinde validateSearch. Aramaya debounce uygulanır.
• Ekleme ve düzenleme aynı formu kullanır; form tablodaki alanları içerir. React Hook Form ve Zod ile doğrulanır, POST veya PUT isteği gönderir.
• Satır işlemleri shadcn/ui kullanır: detay ve düzenleme popup'ta açılır, silme önce onay ister, sonra DELETE isteği gönderir.
• Ekran durumları shadcn/ui ile hazır gelir: yükleme, hata ve boş liste.
• Testlerde Vitest, Testing Library ve MSW kullanılır; 6 test dosyası hazır gelir.

Projene neler iner?

Yukarıdaki seçimlerine göre npx virastack add users şu dosyaları projene ekler.

Sayfa oluşturulmaz; modülü yukarıdaki adımlarla kendi sayfana eklersin.

Nasıl kullanırsın?

Kendi API'ne geçiş

.env.local dosyasında, Next.js kullanıyorsan NEXT_PUBLIC_API_URL, TanStack Start kullanıyorsan VITE_API_URL değerine kendi API adresini yaz. Yanıtın farklıysa şu yerleri uyarla: api, schemas, constants, to-user-body, UsersTable, UserForm ve testler.

Kod artık senin

Modül projene kopyalanır, bir pakete bağlı kalmazsın. İstediğin gibi değiştirirsin; istemezsen npx virastack remove users ile kaldırırsın.