---
title: Proje Yapısı
description: Kod modu projesindeki dosya ve klasörler.
icon: FolderTree
---

`ikas theme init` komutuyla oluşturulan proje, Preact tabanlı bir bileşen geliştirme ortamı sunar. Aşağıda projedeki dosya ve klasörlerin görevleri listelenmiştir.

## Klasör yapısı

```
my-theme/
├── .cursor/
│   └── mcp.json                       # Cursor için ikas MCP yapılandırması
├── .cursorrules                       # Cursor kuralları
├── .gitignore
├── .mcp.json                          # Genel MCP yapılandırması
├── CLAUDE.md                          # Claude için proje rehberi
├── README.md
├── ikas.config.json                   # Otomatik yönetilen bileşen kayıt yapılandırması
├── package.json
├── pnpm-lock.yaml                     # pnpm ile kurulduysa (npm ile kurulduysa package-lock.json)
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── components/
    │   ├── <Bileşen>/
    │   │   ├── components/             # Bileşene özel alt bileşenler
    │   │   │   └── <AltBileşen>/
    │   │   │       ├── index.tsx
    │   │   │       └── styles.css
    │   │   ├── index.tsx               # Preact bileşen kodu
    │   │   ├── styles.css              # Bileşene özel CSS
    │   │   └── types.ts                # Otomatik üretilir
    │   └── index.ts                    # Otomatik üretilir
    ├── hooks/                          # Tema geneli paylaşılan Preact hook'ları
    │   └── useExample.ts
    ├── sub-components/                 # Tema geneli paylaşılan alt bileşenler
    │   └── <AltBileşen>/
    │       ├── index.tsx
    │       └── styles.css
    ├── utils/                          # Tema geneli yardımcı fonksiyonlar
    │   └── example.ts
    ├── global-types.ts                 # Otomatik üretilir
    ├── global.css                      # Tema geneli CSS
    └── ikas-component-utils.d.ts       # Otomatik üretilir
```

## Manuel olarak düzenlenebilen dosyalar

Geliştirme yaparken aşağıdaki dosyalarda doğrudan değişiklik yapabilirsiniz:

- **`src/components/<Bileşen>/index.tsx`** — Bileşenin Preact kodu burada yazılır.
- **`src/components/<Bileşen>/styles.css`** — Bileşene özel stiller.
- **`src/components/<Bileşen>/components/`** — Yalnızca o bileşen içinde kullanılacak alt bileşenler için açılan opsiyonel klasör. Her alt bileşenin kendi `index.tsx` ve `styles.css` dosyaları olabilir.
- **`src/hooks/`** — Tema genelinde paylaşılan Preact hook'larını barındırır.
- **`src/sub-components/`** — Tema genelinde paylaşılan alt bileşenler. Birden fazla bileşende kullanılan UI parçaları (buton, modal, kart vb.) burada tutulur.
- **`src/utils/`** — Tema genelinde paylaşılan yardımcı fonksiyonlar.
- **`src/global.css`** — Tema genelinde geçerli olan ortak stiller.

## Otomatik yönetilen dosyalar

<Callout type="warning" title="Otomatik yönetilen dosyalar">
Aşağıdaki dosyalar sistem ile bağlantılı olarak otomatik üretilir ve **kesinlikle düzenlenmemelidir**:

- `ikas.config.json`
- `src/global-types.ts`
- `src/ikas-component-utils.d.ts`
- `src/components/<Bileşen>/types.ts`
- `src/components/index.ts`

Bu dosyalarla ilgili güncellemeleri her zaman AI asistanınıza bırakmanız önerilir; manuel müdahale tutarsızlığa ve derleme hatasına yol açabilir.
</Callout>