Component Library

Achidemy projesinde 60+ paylaşılan React bileşeni bulunur. Bileşenler iki ana kaynakta organize edilmiştir:

1. registry/components/ui/ — Polaris-flat tasarım sistemine uygun, semantic token kullanan modern bileşenler (tercih edilen)
2. app/components/ — Eski bileşenler ve domain-specific componentler

Registry Components (Polaris-flat)

Polaris-flat tasarım sistemine uygun bileşenler. Bu bileşenler @registry/components/ui/ path alias’ı ile import edilir ve semantic color token’ları kullanır (bg-surface-container-lowest, text-on-surface, border-outline-variant vb.).

Import Yolu

// Tercih edilen import yolu
import { Button } from "@registry/components/ui/button";
import { Card, CardContent, CardHeader } from "@registry/components/ui/card";
import { Input } from "@registry/components/ui/input";

Registry UI Componentleri

Component	Dosya	Açıklama
Button	button.tsx	Variant’lar: default, secondary, destructive, ghost. Polaris-flat renk token’ları.
Input	input.tsx	Form input alanı, semantic border/focus stilleri
Textarea	textarea.tsx	Çok satırlı metin alanı
Select	select.tsx	Dropdown seçim bileşeni (Radix UI)
Dialog	dialog.tsx	Modal dialog (Radix UI), DialogHeader, DialogTitle, DialogDescription
Tabs	tabs.tsx	Sekme bileşeni (Radix UI)
Accordion	accordion.tsx	Açılır/kapanır bölüm (Radix UI)
Card	card.tsx	Kart bileşeni: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
Label	label.tsx	Form label bileşeni
Checkbox	checkbox.tsx	Checkbox input (Radix UI)
Switch	switch.tsx	Toggle switch, mavi aktif/beyaz pasif tema
Badge	badge.tsx	Etiket/badge: default, secondary, destructive, outline variant’ları
Slider	slider.tsx	Slider input (Radix UI)
EmptyState	empty-state.tsx	Empty state bileşeni (ikon + başlık + açıklama + aksiyonlar). Detay: EmptyState
Pagination	pagination.tsx	Sayfalama bileşeni
Carousel	carousel.tsx	Carousel/slider (Embla Carousel)
Avatar	avatar.tsx	Kullanıcı avatar bileşeni (Radix UI)
Table	table.tsx	Tablo bileşeni: Table, TableHeader, TableBody, TableRow, TableCell
Skeleton	skeleton.tsx	Loading skeleton bileşeni
Alert	alert.tsx	Alert/uyarı bileşeni
Toast	toast.tsx	Toast bildirimleri (Radix UI)
Code Editor	code-editor.tsx	Monaco Editor wrapper

Polaris-flat Kullanım Örneği

import { Button } from "@registry/components/ui/button";
import { Card, CardContent, CardHeader } from "@registry/components/ui/card";
import { Badge } from "@registry/components/ui/badge";

<Card className="shadow-none border-outline-variant">
  <CardHeader className="bg-surface-container-low border-b border-outline-variant">
    <h2 className="text-on-surface font-semibold">Başlık</h2>
    <Badge variant="outline" className="text-primary bg-secondary-container">
      Aktif
    </Badge>
  </CardHeader>
  <CardContent className="p-6">
    <p className="text-on-surface-variant">İçerik</p>
    <Button className="mt-4">Kaydet</Button>
  </CardContent>
</Card>

---

Legacy UI Primitives (app/components/ui/)

Eski Radix UI tabanlı bileşenler. Yeni geliştirmelerde @registry/components/ui/ tercih edilmelidir.

Component	Dosya	Açıklama
Button	ui/button.tsx	Çoklu variant ve size desteği
Input	ui/input.tsx	Form input alanı
Textarea	ui/textarea.tsx	Çok satırlı metin alanı
Select	ui/select.tsx	Dropdown seçim bileşeni (Radix UI)
Dialog	ui/dialog.tsx	Modal dialog (Radix UI)
Tabs	ui/tabs.tsx	Sekme bileşeni (Radix UI)
Accordion	ui/accordion.tsx	Açılır/kapanır bölüm (Radix UI)
Card	ui/card.tsx	Kart bileşeni
Label	ui/label.tsx	Form label bileşeni
Checkbox	ui/checkbox.tsx	Checkbox input
Switch	ui/switch.tsx	Toggle switch
Badge	ui/badge.tsx	Etiket/badge bileşeni
Slider	ui/slider.tsx	Slider input
Pagination	ui/pagination.tsx	Sayfalama bileşeni
Carousel	ui/carousel.tsx	Carousel/slider bileşeni
Code Editor	ui/code-editor.tsx	Monaco Editor wrapper

Eski Import Yolu (uyumluluk için):

import { Button } from '~/components/ui/button';
import { Input } from '~/components/ui/input';
import { Dialog, DialogContent, DialogTrigger } from '~/components/ui/dialog';

---

2. Instructor Components (app/components/instructor/)

Eğitmen paneli için özel bileşenler:

Component	Açıklama
InstructorSidebar	Eğitmen paneli yan menü (kurslar, ödemeler, mesajlar, performans)
AcademySidebar	Academy paneli yan menü (dashboard, ayarlar, öğrenciler, builder)
AcademySetupGuide	Academy kurulum rehberi (4 adımlı interaktif rehber, ilerleme takibi)
CourseEditSidebar	Kurs düzenleme adımları sidebar’ı
QuizAndCodingEditor	Quiz ve kodlama egzersizi editörü (geniş UI, Udemy tarzı)
QuizEditorModal	Quiz düzenleme modal’ı (soru ekleme/düzenleme)
CodeEditor	Monaco Editor tabanlı kod editörü
TestCaseManager	Test case yönetimi (coding exercises için)
RichTextEditor	TipTap tabanlı zengin metin editörü
CourseGoalsEditor	Kurs hedefleri editörü (dnd-kit ile sürükle-bırak)
DirectVideoUploader	Bunny TUS protokolü ile doğrudan video yükleme (resumable upload)
PerformanceReviewsCharts	Recharts ile performans grafikleri
VideoTranscodingStatusBar	Bunny video işleme durumu göstergesi

Kullanım:

import InstructorSidebar from '~/components/instructor/InstructorSidebar';
import { QuizAndCodingEditor } from '~/components/instructor/QuizAndCodingEditor';

<InstructorSidebar />

---

3. Learning Components (app/components/learn/)

Öğrenci öğrenme deneyimi bileşenleri:

Component	Açıklama
CodingWorkspace	Kodlama egzersizi çalışma alanı (Monaco Editor + test sonuçları)
QuizPlayer	Quiz oynatıcı (soru-cevap, çoktan seçmeli)

Kullanım:

import { CodingWorkspace } from '~/components/learn/CodingWorkspace';

<CodingWorkspace
  exercise={exercise}
  courseId={courseId}
  onComplete={() => {/* egzersiz tamamlandı */}}
/>

---

4. Course Components (app/components/courses/ ve app/components/)

Kurs sayfaları ve keşfet sayfaları için bileşenler:

Component	Dosya	Açıklama
CourseCard	app/components/CourseCard.tsx	Kurs kartı (thumbnail, başlık, fiyat, rating); grid görünümü.
CourseHorizontalCard	app/components/CourseHorizontalCard.tsx	Yatay kurs kartı; liste görünümü ve öne çıkan carousel.
CourseSelection	app/components/CourseSelection.tsx	Kategori bazlı kurs seçimi (tabs ile).
FilterSidebar	app/components/courses/FilterSidebar.tsx	Kurs filtreleme sidebar’ı (seviye, dil, süre, fiyat, puan).
BeginnerRecommendationsSection	app/components/courses/BeginnerRecommendationsSection.tsx	Başlangıç için önerilen kurslar (Popüler / Yeni sekmeleri, grid).
FeaturedCoursesSection	app/components/courses/FeaturedCoursesSection.tsx	Öne çıkan kurslar carousel (1 kart/slide, yatay kart, klavye desteği).
PopularTopicsSection	app/components/courses/PopularTopicsSection.tsx	Popüler konular (5x2 grid, kurs sayısına göre sıralı, konu linkleri).
PopularInstructorsSection	app/components/courses/PopularInstructorsSection.tsx	Popüler eğitmenler (kartlar, public profile link, öğrenci sayısı, eğitmen puanı).
CourseReviews	app/components/courses/CourseReviews.tsx	Kurs yorumları listesi.
CourseReviewModal	app/components/courses/CourseReviewModal.tsx	Yorum yazma modal’ı.
CourseNotes	app/components/courses/CourseNotes.tsx	Kurs notları bileşeni.
CourseQA	app/components/courses/CourseQA.tsx	Soru-cevap bileşeni (video timestamp ile).
CourseSkeleton	app/components/courses/CourseSkeleton.tsx	Loading skeleton (kurs kartları için).

Keşfet bölümleri (BeginnerRecommendations, Featured, PopularTopics, PopularInstructors) hem courses.index hem courses.all route’larında “Başlangıç için önerilen kurslar”ın altında sırayla kullanılır. Detay için Kurs Keşfet ve Arama sayfasına bakın.

---

5. Pricing Components (app/components/pricing/)

Fiyatlandırma bileşenleri:

Component	Açıklama
PricingPlans	Abonelik planları (aylık/yıllık)
PricingFaq	Fiyatlandırma SSS

---

6. Teaching Components (app/components/teaching/)

Eğitmen ol sayfası bileşenleri:

Component	Açıklama
InstructorHero	Hero section
StepsSection	Adım adım rehber
ReasonsSection	Neden eğitmen ol? bölümü
StatsBar	İstatistik çubuğu
TestimonialCarousel	Müşteri yorumları carousel
InstructorSupport	Destek bölümü

---

7. Messaging Components (app/components/messages/)

Mesajlaşma bileşenleri:

Component	Açıklama
ChatInput	Mesaj giriş alanı (metin, görsel yükleme)

---

8. Shared Components

Genel kullanım bileşenleri:

Component	Açıklama
Navbar	Ana navigasyon çubuğu (dil seçimi, Algolia anlık arama, kullanıcı menüsü, kategori bar, sepet badge + hover dropdown). Misafir kullanıcı sepet sayısını guest_cart çerezinden okur; “Giriş Yap ve Öde” CTA’sı /:lang/login?intent=checkout ile gelir ve girişten sonra /:lang/cart’a dönerek merge tetiklenir. Detay: Kurs Keşfet ve Arama
Footer	Footer bileşeni (sosyal medya, dil seçici, linkler)
NotificationBell	Bildirim zili dropdown (okunmamış bildirimler, gerçek zamanlı güncelleme)
ErrorBoundary	React Error Boundary (hata yakalama)
CookieConsent	Çerez onayı bileşeni
HeroCarousel	Ana sayfa hero carousel (Embla Carousel)
CourseSelection	Kategori bazlı kurs seçimi (tabs ile)
SkillsSection	Yetenekler bölümü (carousel)
AISection	AI özellikleri tanıtım bölümü
PlansSection	Planlar bölümü
SkeletonLoaders	Loading skeleton bileşenleri

---

Component Patterns

1. Variant Pattern (CVA)

Kullanım: class-variance-authority ile variant yönetimi

ui/button.tsx

const buttonVariants = cva(
  "base-classes",
  {
    variants: {
      variant: {
        default: "...",
        destructive: "...",
      },
      size: {
        default: "...",
        sm: "...",
      },
    },
  }
);

<Button variant="destructive" size="sm">Sil</Button>

2. Radix UI Composition

Kullanım: Radix UI primitives ile erişilebilir bileşenler

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>...</Dialog.Trigger>
  <Dialog.Content>...</Dialog.Content>
</Dialog.Root>

3. i18n Entegrasyonu

Kullanım: react-i18next ile çoklu dil desteği

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  return <h1>{t('common.welcome')}</h1>;
}

4. Tailwind CSS Styling

Kullanım: Utility-first CSS ile stil yönetimi. Achidemy’de tercihen semantic token class’ları (bg-surface, text-on-surface, border-outline-variant vb.) ve @registry/components/ui bileşenleri kullanılır.

import { Card, CardContent, CardHeader } from "@registry/components/ui/card";
import { Badge } from "@registry/components/ui/badge";

<Card className="shadow-none border-outline-variant">
  <CardHeader className="bg-surface-container-low border-b border-outline-variant">
    <h3 className="text-on-surface font-semibold">Başlık</h3>
    <Badge variant="outline" className="text-primary bg-secondary-container">
      Durum
    </Badge>
  </CardHeader>
  <CardContent className="p-5 bg-surface-container-lowest text-on-surface-variant">
    Content
  </CardContent>
</Card>

---

Component Best Practices

1. Props Interface

interface ComponentProps {
  title: string;
  description?: string;
  onAction?: () => void;
}

export default function Component({ title, description, onAction }: ComponentProps) {
  // ...
}

2. Default Props

Component.defaultProps = {
  description: '',
  onAction: () => {},
};

3. Event Handlers

Naming: handle prefix kullanılır

const handleClick = () => {
  // ...
};

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  // ...
};

4. Accessibility

• ARIA labels: aria-label, aria-describedby
• Keyboard navigation: tabIndex, onKeyDown
• Focus management: focus-visible states

---

İlgili Dosyalar

• registry/components/ui/* — Polaris-flat UI componentleri (tercih edilen)
• app/components/ui/* — Legacy UI primitives
• app/components/instructor/* — Eğitmen bileşenleri
• app/components/learn/* — Öğrenme bileşenleri
• app/components/courses/* — Kurs bileşenleri
• app/lib/utils.ts — cn fonksiyonu (className merge)
• app/app.css — Global stil ve Polaris-flat token tanımları

Tasarım Sistemi: Polaris-flat Tasarım Sistemi
Shadcn UI: Shadcn UI Dokümantasyonu
Radix UI: Radix UI Dokümantasyonu
Tailwind CSS: Tailwind CSS Dokümantasyonu