Modüller

Modül neler kurar, sayfana nasıl gelir ve nasıl kaldırılır.

Modül nedir

Modül, src/features/<ad> içinde çalışan bir feature’dır: bileşenler, API fonksiyonları, hook’lar, şemalar ve testler, şablonla ve ViraStack AI kurallarıyla aynı yapıda.

Modüller dummy API veya dummy veriyle çalışır. Gerçek API’ni bağlamak ve yanıt modelini uyarlamak sana kalır.

Hazır modüller

Modül	Ne yapar
`users`	Arama, sayfalama, ekleme ve satır işlemleri içeren kullanıcı tablosu.
`checkout-address`	Seçili adres ekranda görünür; adres listeleme, ekleme ve düzenleme popup'ta yapılır. Teslimat ve fatura adresi ayrı seçilebilir.
`checkout-card`	Seçili kart ekranda görünür; kayıtlı kartlar popup'ta listelenir, yeni kart eklenir. Kart numarası ve CVV network'e çıkmaz, ödeme sağlayıcını tek noktadan bağlarsın.

Önizlemeleriyle tüm modüller modül kataloğunda.

Modül ekle

Start 2.0 veya üstüyle kurulan bir projenin kökünde çalıştır:

$ pnpm dlx virastack@latest add users

Modülün dosyaları src/features/<ad> içine gelir.
Eksik paketler ve components/ui bileşenleri kurulur.
i18n şablonlarında metinleri src/messages içine birleştirilir.
Aynı adlı dosya veya metin varsa hiçbir şey değişmez, CLI çakışmaları listeler.
Sayfa oluşturulmaz. Hangi sayfaya gireceğine sen karar verirsin.

Sayfana ekle

Kurulumdan sonra CLI import satırını ve modülün linkini yazar. O sayfada framework’ünü, i18n’i ve sayfa yolunu seç; AI kodlama aracın için prompt’u kopyala ya da manuel adımları izle.

Örnek: checkout sayfası

checkout-address ve checkout-card ayrı modüllerdir. İkisini de kur ve aynı sayfada göster:

$ pnpm dlx virastack@latest add checkout-address

$ pnpm dlx virastack@latest add checkout-card

Next.js: src/app/checkout/page.tsx

import { CheckoutAddress } from "@/features/checkout-address/components/CheckoutAddress"
import { CheckoutCard } from "@/features/checkout-card/components/CheckoutCard"

export default function CheckoutPage() {
  return (
    <main className="mx-auto flex w-full max-w-xl flex-col gap-8 px-6 py-12">
      <CheckoutAddress />
      <CheckoutCard />
    </main>
  )
}

TanStack Start: src/routes/checkout.tsx

import { createFileRoute } from "@tanstack/react-router"

import { CheckoutAddress } from "@/features/checkout-address/components/CheckoutAddress"
import { CheckoutCard } from "@/features/checkout-card/components/CheckoutCard"

export const Route = createFileRoute("/checkout")({
  component: RouteComponent
})

function RouteComponent() {
  return (
    <main className="mx-auto flex w-full max-w-xl flex-col gap-8 px-6 py-12">
      <CheckoutAddress />
      <CheckoutCard />
    </main>
  )
}

i18n şablonlarında dosya src/app/[locale]/checkout/page.tsx veya src/routes/{-$lang}/checkout.tsx olur; TanStack route’u /{-$lang}/checkout yazılır.

Feature’lar birbirini, paylaşılan klasörler de feature’ları import edemez; bu yüzden ikisini sayfa bağlar. Seçimleri sayfada bu hook’larla oku:

const { shipping, billing } = useCheckoutAddress()
const { card } = useCheckoutCard()

card token, banka, marka, son dört hane, son kullanma tarihi ve adı taşır; kart numarası ve CVV tarayıcıdan çıkmaz. Next.js’te hook’ları page.tsx yanındaki bir client component’te, TanStack Start’ta RouteComponent içinde çağır.

Modülü kaldır

$ pnpm dlx virastack@latest remove users

Modülün dosyalarını, boş kalan klasörlerini ve metinlerini siler. Paketler durur, çünkü başka kodlar da kullanıyor olabilir.

Bu dosyalardan değiştirdiklerin varsa önce listeler ve sorar. Script’te bunları da silmek için --yes ver; vermezsen hiçbir şey değişmez.

Yazdığın sayfa durur. Import’unu kendin kaldır.