Aula UI Library

Modern glassmorphism tabanlı React component library. 32+ bileşen ile modern ve şık kullanıcı arayüzleri oluşturun.

✨ Özellikler

• 🎨 Glassmorphism Design - Modern cam efekti tasarımı
• 🌙 Dark/Light Theme - Otomatik tema desteği
• 📱 Responsive - Mobil uyumlu bileşenler
• 🎯 TypeScript - Tam tip desteği
• 🌳 Tree Shakeable - Sadece kullandığınız bileşenleri paketleyin
• ♿ Accessible - WCAG uyumlu
• ⚡ Lazy Loading - Opsiyonel bağımlılıklar dinamik olarak yüklenir

📦 Kurulum

npm install @aliugurlafci/aula-lib
# veya
yarn add @aliugurlafci/aula-lib
# veya
pnpm add @aliugurlafci/aula-lib

Gerekli Peer Dependencies

npm install react react-dom

Opsiyonel Peer Dependencies

Belirli özellikleri kullanmak için ek paketler gerekebilir:

| Paket | Özellik | Kurulum | |-------|---------|---------| | tailwindcss@4 | Tailwind CSS entegrasyonu | npm install tailwindcss@4 | | xlsx | Excel export (GlassTable) | npm install xlsx | | jspdf + jspdf-autotable | PDF export (GlassTable) | npm install jspdf jspdf-autotable | | hls.js | HLS streaming (GlassVideoPlayer) | npm install hls.js | | dashjs | DASH streaming (GlassVideoPlayer) | npm install dashjs | | react-hook-form + zod | Form validation (GlassForm) | npm install react-hook-form @hookform/resolvers zod |

Not: Opsiyonel bağımlılıklar sadece ilgili özellik kullanıldığında dinamik olarak yüklenir. Yüklü değilse, fallback davranışı devreye girer veya kullanıcıya bilgi veren hata mesajı gösterilir.

🚀 Hızlı Başlangıç

1. Tailwind CSS v4 Kurulumu (Önerilen)

⚠️ Önemli: Bu kütüphane Tailwind CSS v4 gerektirir. v3 kullanıyorsanız önce upgrade edin.

tailwind.config.js dosyanıza preset ekleyin:

// tailwind.config.js
module.exports = {
  presets: [require('@aliugurlafci/aula-lib/tailwind.preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@aliugurlafci/aula-lib/dist/**/*.{js,mjs}',
  ],
}

2. CSS Import

// app.tsx veya main.tsx
import '@aliugurlafci/aula-lib/styles.css'

3. Bileşenleri Kullanın

import { GlassButton, GlassCard, GlassInput } from '@aliugurlafci/aula-lib'

function App() {
  return (
    <GlassCard title="Hoş Geldiniz">
      <GlassInput placeholder="Adınızı girin" />
      <GlassButton variant="primary">Gönder</GlassButton>
    </GlassCard>
  )
}

4. Next.js App Router ile Kullanım

Server Component'ları için ayrı import kullanın:

// Server Components için
import { GlassCard, GlassButton, GlassBadge } from '@aliugurlafci/aula-lib/server'

// Client Components için
import { GlassInput, GlassModal, GlassTable } from '@aliugurlafci/aula-lib/client'

// veya tüm bileşenler (client)
import { ... } from '@aliugurlafci/aula-lib'

🔧 Providers & Hooks

ThemeProvider

Tema yönetimi için uygulamanızı ThemeProvider ile sarın.

import { ThemeProvider } from '@aliugurlafci/aula-lib'

function App() {
  return (
    <ThemeProvider defaultTheme="light" storageKey="my-app-theme">
      <YourApp />
    </ThemeProvider>
  )
}

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | children | ReactNode | - | Alt bileşenler | | defaultTheme | "light" \| "dark" | "light" | Başlangıç teması | | storageKey | string | "glass-ui-theme" | localStorage anahtarı |

useGlassTheme

Tema durumunu okumak ve değiştirmek için kullanılır.

import { useGlassTheme } from '@aliugurlafci/aula-lib'

function ThemeToggle() {
  const { themeVariant, setTheme, toggleTheme } = useGlassTheme()
  
  return (
    <div>
      <p>Aktif tema: {themeVariant}</p>
      <button onClick={toggleTheme}>Tema Değiştir</button>
      <button onClick={() => setTheme('dark')}>Karanlık Mod</button>
    </div>
  )
}

Dönen Değerler

| Değer | Tip | Açıklama | |-------|-----|----------| | theme | GlassTheme | Aktif tema objesi (renkler, stiller) | | themeVariant | "light" \| "dark" | Aktif tema adı | | setTheme | (variant: ThemeVariant) => void | Temayı değiştirir | | toggleTheme | () => void | Temalar arasında geçiş yapar |

useGlassStyle

Dinamik glass stilleri oluşturmak için kullanılır.

import { useGlassStyle } from '@aliugurlafci/aula-lib'

function CustomGlassComponent() {
  const { baseStyle, hoverStyle, getGlassClasses, theme } = useGlassStyle({
    blur: 'lg',
    shadow: 'md',
    bordered: true,
    hoverable: true
  })
  
  return (
    <div style={baseStyle} className={getGlassClasses('my-custom-class')}>
      Custom glass bileşen
    </div>
  )
}

Options

| Option | Tip | Varsayılan | Açıklama | |--------|-----|------------|----------| | blur | "none" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" | "md" | Blur yoğunluğu | | shadow | "none" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Gölge yoğunluğu | | bordered | boolean | true | Kenarlık göster | | hoverable | boolean | false | Hover efekti aktif |

📚 Core Bileşenler

GlassButton

Glass efektli buton bileşeni.

import { GlassButton } from '@aliugurlafci/aula-lib'

<GlassButton buttonType="primary" size="large">
  Kaydet
</GlassButton>

<GlassButton buttonType="dashed" danger loading>
  Siliniyor...
</GlassButton>

<GlassButton icon={<SearchIcon />} shape="circle" />

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | buttonType | "default" \| "primary" \| "dashed" \| "text" \| "link" | "default" | Buton stili | | size | "small" \| "middle" \| "large" | "middle" | Buton boyutu | | variant | ThemeVariant | - | Tema varyantı | | blur | BlurSize | "md" | Blur yoğunluğu | | shadow | ShadowSize | "md" | Gölge yoğunluğu | | bordered | boolean | true | Kenarlık göster | | icon | ReactNode | - | Sol ikon | | iconRight | ReactNode | - | Sağ ikon | | loading | boolean | false | Yükleniyor durumu | | danger | boolean | false | Tehlike stili | | ghost | boolean | false | Transparan arkaplan | | block | boolean | false | Tam genişlik | | shape | "default" \| "circle" \| "round" | "default" | Buton şekli |

GlassCard

Glass efektli kart bileşeni.

import { GlassCard } from '@aliugurlafci/aula-lib'

<GlassCard 
  title="Başlık"
  extra={<a href="#">Daha Fazla</a>}
  hoverable
  actions={[<EditIcon />, <DeleteIcon />]}
>
  Kart içeriği
</GlassCard>

<GlassCard cover={<img src="/image.jpg" alt="Cover" />} loading>
  Yükleniyor...
</GlassCard>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | title | ReactNode | - | Kart başlığı | | extra | ReactNode | - | Sağ üst köşe içerik | | cover | ReactNode | - | Üst kapak görseli | | actions | ReactNode[] | - | Alt aksiyon butonları | | hoverable | boolean | false | Hover efekti | | loading | boolean | false | Skeleton göster | | size | "default" \| "small" | "default" | Kart boyutu | | variant | ThemeVariant | - | Tema varyantı | | blur | BlurSize | - | Blur yoğunluğu | | shadow | ShadowSize | - | Gölge yoğunluğu | | bordered | boolean | true | Kenarlık göster |

GlassAvatar

Kullanıcı avatar bileşeni.

import { GlassAvatar, GlassAvatarGroup } from '@aliugurlafci/aula-lib'

<GlassAvatar src="/user.jpg" size="large" />

<GlassAvatar icon={<UserIcon />} shape="square" />

<GlassAvatar>AB</GlassAvatar>

<GlassAvatarGroup max={{ count: 3 }}>
  <GlassAvatar src="/user1.jpg" />
  <GlassAvatar src="/user2.jpg" />
  <GlassAvatar src="/user3.jpg" />
  <GlassAvatar src="/user4.jpg" />
</GlassAvatarGroup>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | src | string | - | Resim URL'i | | size | number \| "small" \| "default" \| "large" | "default" | Avatar boyutu | | shape | "circle" \| "square" | "circle" | Avatar şekli | | icon | ReactNode | - | İkon (resim yoksa) | | alt | string | - | Alternatif metin | | gap | number | - | Metin içerik boşluğu | | onError | () => boolean \| void | - | Hata handler |

GlassBadge

Sayaç ve durum göstergesi.

import { GlassBadge, GlassBadgeRibbon } from '@aliugurlafci/aula-lib'

<GlassBadge count={5}>
  <GlassButton>Mesajlar</GlassButton>
</GlassBadge>

<GlassBadge dot status="processing">
  <GlassAvatar src="/user.jpg" />
</GlassBadge>

<GlassBadge count={99} overflowCount={50} />

<GlassBadgeRibbon text="İndirim" color="red">
  <GlassCard>İçerik</GlassCard>
</GlassBadgeRibbon>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | count | ReactNode | - | Gösterilecek sayı | | dot | boolean | false | Nokta göster | | overflowCount | number | 99 | Max görünen sayı | | showZero | boolean | false | Sıfırı göster | | status | "success" \| "processing" \| "default" \| "error" \| "warning" | - | Durum rengi | | color | string | - | Özel renk | | offset | [number, number] | - | Pozisyon offset | | size | "default" \| "small" | "default" | Badge boyutu | | text | ReactNode | - | Durum metni |

GlassFloatingButton

Yüzen aksiyon butonu.

import { GlassFloatingButton } from '@aliugurlafci/aula-lib'

<GlassFloatingButton 
  icon={<PlusIcon />}
  position="bottom-right"
  onClick={() => console.log('Tıklandı')}
/>

📝 Data Entry Bileşenleri

GlassInput

Glass efektli metin giriş alanı.

import { GlassInput, GlassTextArea } from '@aliugurlafci/aula-lib'

<GlassInput 
  label="E-posta"
  placeholder="[email protected]"
  prefix={<MailIcon />}
  allowClear
/>

<GlassInput 
  status="error"
  error="Geçersiz e-posta adresi"
/>

<GlassInput 
  addonBefore="https://"
  addonAfter=".com"
/>

<GlassTextArea 
  label="Açıklama"
  autoSize={{ minRows: 3, maxRows: 6 }}
  showCount
  maxLength={500}
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | label | ReactNode | - | Etiket | | size | "small" \| "middle" \| "large" | "middle" | Boyut | | status | "error" \| "warning" | - | Doğrulama durumu | | inputVariant | "outlined" \| "borderless" \| "filled" | "outlined" | Görsel varyant | | allowClear | boolean | false | Temizle butonu | | prefix | ReactNode | - | Sol içerik | | suffix | ReactNode | - | Sağ içerik | | addonBefore | ReactNode | - | Sol eklenti | | addonAfter | ReactNode | - | Sağ eklenti | | showCount | boolean | false | Karakter sayacı | | error | string | - | Hata mesajı |

GlassSelect

Seçim kutusu bileşeni.

import { GlassSelect } from '@aliugurlafci/aula-lib'

<GlassSelect
  label="Şehir"
  placeholder="Şehir seçin"
  options={[
    { label: 'İstanbul', value: 'istanbul' },
    { label: 'Ankara', value: 'ankara' },
    { label: 'İzmir', value: 'izmir' }
  ]}
  showSearch
  allowClear
/>

<GlassSelect
  mode="multiple"
  placeholder="Etiketler"
  maxTagCount={3}
  options={tags}
/>

<GlassSelect
  mode="tags"
  placeholder="Yeni etiket ekle"
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | options | GlassSelectOption[] | - | Seçenek listesi | | mode | "single" \| "multiple" \| "tags" | "single" | Seçim modu | | value | string \| number \| (string \| number)[] | - | Seçili değer | | placeholder | ReactNode | - | Placeholder | | allowClear | boolean | false | Temizle butonu | | showSearch | boolean | false | Arama kutusu | | filterOption | boolean \| Function | - | Filtreleme fonksiyonu | | loading | boolean | false | Yükleniyor durumu | | maxCount | number | - | Max seçim sayısı | | maxTagCount | number \| "responsive" | - | Max tag görüntüsü | | size | "small" \| "middle" \| "large" | "middle" | Boyut | | status | "error" \| "warning" | - | Doğrulama durumu | | disabled | boolean | false | Devre dışı | | label | ReactNode | - | Etiket | | error | string | - | Hata mesajı |

GlassSwitch

Toggle switch bileşeni.

import { GlassSwitch } from '@aliugurlafci/aula-lib'

<GlassSwitch 
  checked={enabled}
  onChange={setEnabled}
/>

<GlassSwitch 
  checkedChildren="Açık"
  unCheckedChildren="Kapalı"
/>

GlassDatePicker

Tarih seçici bileşeni.

import { GlassDatePicker } from '@aliugurlafci/aula-lib'

<GlassDatePicker 
  label="Doğum Tarihi"
  placeholder="Tarih seçin"
  onChange={(date) => console.log(date)}
/>

GlassColorPicker

Renk seçici bileşeni.

import { GlassColorPicker } from '@aliugurlafci/aula-lib'

<GlassColorPicker 
  value="#3b82f6"
  onChange={(color) => console.log(color)}
/>

GlassNumberInput

Sayı giriş bileşeni.

import { GlassNumberInput } from '@aliugurlafci/aula-lib'

<GlassNumberInput 
  label="Miktar"
  min={0}
  max={100}
  step={5}
/>

GlassTransfer

Transfer listesi bileşeni.

import { GlassTransfer } from '@aliugurlafci/aula-lib'

<GlassTransfer
  dataSource={items}
  targetKeys={selectedKeys}
  onChange={setSelectedKeys}
  titles={['Mevcut', 'Seçili']}
  render={(item) => item.title}
/>

📊 Data Display Bileşenleri

GlassTable

Gelişmiş tablo bileşeni.

import { GlassTable } from '@aliugurlafci/aula-lib'

const columns = [
  { title: 'Ad', dataIndex: 'name', sorter: true },
  { title: 'Yaş', dataIndex: 'age', sorter: (a, b) => a.age - b.age },
  { 
    title: 'Durum', 
    dataIndex: 'status',
    filters: [
      { text: 'Aktif', value: 'active' },
      { text: 'Pasif', value: 'inactive' }
    ]
  },
  {
    title: 'İşlem',
    render: (_, record) => <button onClick={() => edit(record)}>Düzenle</button>
  }
]

<GlassTable
  dataSource={data}
  columns={columns}
  rowSelection={{
    type: 'checkbox',
    onChange: (keys, rows) => console.log(keys, rows)
  }}
  pagination={{ pageSize: 10 }}
  toolbar={{
    search: true,
    columnChooser: true,
    density: true,
    export: {
      formats: ['csv', 'excel', 'pdf'],
      filename: 'rapor'
    }
  }}
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | dataSource | T[] | - | Veri kaynağı | | columns | GlassColumnType<T>[] | - | Kolon tanımları | | rowKey | string \| ((record: T) => string) | "id" | Satır key'i | | rowSelection | GlassRowSelection<T> | - | Satır seçimi config | | pagination | GlassTablePaginationConfig \| false | - | Sayfalama config | | loading | boolean | false | Yükleniyor durumu | | bordered | boolean | false | Kenarlık göster | | size | "large" \| "middle" \| "small" | "middle" | Tablo boyutu | | showHeader | boolean | true | Header göster | | sticky | boolean \| { offsetHeader?: number } | - | Sticky header | | expandable | GlassExpandable<T> | - | Genişletilebilir satırlar | | toolbar | GlassTableToolbarConfig<T> | - | Araç çubuğu config | | onChange | Function | - | Değişiklik callback |

Toolbar Config

toolbar={{
  search: true | { placeholder: 'Ara...', onSearch: (v) => {} },
  columnChooser: true,
  filters: true,
  density: true,
  fullScreen: true,
  refresh: true | { onRefresh: async () => {} },
  export: {
    formats: ['csv', 'json', 'excel', 'pdf'],
    filename: 'export',
    onExport: (format, data) => {}
  },
  import: { onImport: (data) => {} },
  actions: <CustomActions />,
  position: 'top' | 'bottom' | 'both'
}}

Not: Excel export için xlsx, PDF export için jspdf ve jspdf-autotable paketleri gereklidir.

GlassImage

Resim bileşeni.

import { GlassImage } from '@aliugurlafci/aula-lib'

<GlassImage 
  src="/photo.jpg"
  alt="Fotoğraf"
  preview
/>

GlassSkeleton

Yükleme iskeleti bileşeni.

import { GlassSkeleton } from '@aliugurlafci/aula-lib'

<GlassSkeleton active paragraph={{ rows: 4 }} />

<GlassSkeleton.Avatar active />
<GlassSkeleton.Button active />
<GlassSkeleton.Input active />

GlassStatistics

İstatistik kartları.

import { GlassStatistics } from '@aliugurlafci/aula-lib'

<GlassStatistics
  title="Toplam Satış"
  value={112893}
  precision={2}
  prefix="₺"
  valueStyle={{ color: '#3f8600' }}
/>

<GlassStatistics
  title="Aktif Kullanıcılar"
  value={1128}
  suffix="kişi"
/>

GlassTimeline

Zaman çizelgesi bileşeni.

import { GlassTimeline } from '@aliugurlafci/aula-lib'

<GlassTimeline
  items={[
    { children: 'Sipariş oluşturuldu', color: 'green' },
    { children: 'Ödeme alındı', color: 'green' },
    { children: 'Kargoya verildi', color: 'blue' },
    { children: 'Teslim edildi', color: 'gray', dot: <CheckIcon /> }
  ]}
/>

GlassTreeView

Ağaç görünümü bileşeni.

import { GlassTreeView } from '@aliugurlafci/aula-lib'

<GlassTreeView
  treeData={[
    {
      key: '1',
      title: 'Klasör 1',
      children: [
        { key: '1-1', title: 'Dosya 1' },
        { key: '1-2', title: 'Dosya 2' }
      ]
    }
  ]}
  checkable
  defaultExpandAll
/>

🧭 Navigation Bileşenleri

GlassTabs

Sekme bileşeni.

import { GlassTabs } from '@aliugurlafci/aula-lib'

<GlassTabs
  items={[
    { key: 'profile', label: 'Profil', children: <ProfilePage /> },
    { key: 'settings', label: 'Ayarlar', icon: <SettingsIcon />, children: <SettingsPage /> },
    { key: 'notifications', label: 'Bildirimler', disabled: true }
  ]}
  defaultActiveKey="profile"
  onChange={(key) => console.log(key)}
/>

<GlassTabs
  type="card"
  tabPosition="left"
  items={items}
/>

<GlassTabs
  type="editable-card"
  onEdit={(targetKey, action) => {
    if (action === 'add') addTab()
    else removeTab(targetKey)
  }}
  items={items}
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | items | GlassTabItem[] | - | Sekme öğeleri | | activeKey | string | - | Aktif sekme key'i | | defaultActiveKey | string | - | Varsayılan aktif sekme | | tabPosition | "top" \| "right" \| "bottom" \| "left" | "top" | Sekme pozisyonu | | type | "line" \| "card" \| "editable-card" | "line" | Sekme tipi | | size | "small" \| "middle" \| "large" | "middle" | Boyut | | centered | boolean | false | Ortalanmış sekmeler | | animated | boolean \| object | true | Animasyon | | tabBarExtraContent | ReactNode \| object | - | Ekstra içerik | | onChange | (activeKey: string) => void | - | Değişim callback | | onEdit | Function | - | Düzenleme callback |

GlassNavbar

Navigasyon çubuğu.

import { GlassNavbar } from '@aliugurlafci/aula-lib'

<GlassNavbar
  logo={<Logo />}
  items={[
    { key: 'home', label: 'Ana Sayfa', href: '/' },
    { key: 'about', label: 'Hakkında', href: '/about' },
    { 
      key: 'services', 
      label: 'Hizmetler',
      children: [
        { key: 'web', label: 'Web Geliştirme' },
        { key: 'mobile', label: 'Mobil Uygulama' }
      ]
    }
  ]}
  extra={<UserMenu />}
/>

GlassMenu

Menü bileşeni.

import { GlassMenu } from '@aliugurlafci/aula-lib'

<GlassMenu
  mode="vertical"
  items={[
    { key: 'dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
    { key: 'users', label: 'Kullanıcılar', icon: <UsersIcon /> },
    { type: 'divider' },
    { key: 'settings', label: 'Ayarlar', icon: <SettingsIcon /> }
  ]}
  selectedKeys={['dashboard']}
/>

GlassDropdown

Açılır menü bileşeni.

import { GlassDropdown } from '@aliugurlafci/aula-lib'

<GlassDropdown
  menu={{
    items: [
      { key: 'edit', label: 'Düzenle' },
      { key: 'delete', label: 'Sil', danger: true }
    ],
    onClick: ({ key }) => console.log(key)
  }}
  trigger={['click']}
>
  <GlassButton>İşlemler</GlassButton>
</GlassDropdown>

💬 Feedback Bileşenleri

GlassAlert

Uyarı mesajı bileşeni.

import { GlassAlert } from '@aliugurlafci/aula-lib'

<GlassAlert
  type="success"
  message="Başarılı!"
  description="İşlem tamamlandı."
  showIcon
  closable
/>

<GlassAlert
  type="error"
  message="Hata"
  description="Bir sorun oluştu."
  action={<GlassButton size="small">Tekrar Dene</GlassButton>}
/>

<GlassAlert banner type="warning" message="Dikkat!" />

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | type | "success" \| "error" \| "info" \| "warning" | "info" | Alert tipi | | message | ReactNode | - | Başlık mesajı | | description | ReactNode | - | Detay açıklama | | icon | ReactNode | - | Özel ikon | | showIcon | boolean | false | İkon göster | | closable | boolean | false | Kapatılabilir | | closeIcon | ReactNode | - | Özel kapatma ikonu | | banner | boolean | false | Banner stili | | action | ReactNode | - | Aksiyon butonu | | onClose | (e: MouseEvent) => void | - | Kapatma callback | | afterClose | () => void | - | Kapandıktan sonra callback |

GlassMessage

Bildirim mesajları.

import { GlassMessage } from '@aliugurlafci/aula-lib'

GlassMessage.success('İşlem başarılı!')
GlassMessage.error('Bir hata oluştu')
GlassMessage.warning('Dikkat!')
GlassMessage.info('Bilgi mesajı')
GlassMessage.loading('Yükleniyor...')

GlassPopover

Popover bileşeni.

import { GlassPopover } from '@aliugurlafci/aula-lib'

<GlassPopover
  title="Detaylar"
  content={<div>Popover içeriği</div>}
  trigger="click"
>
  <GlassButton>Tıkla</GlassButton>
</GlassPopover>

📐 Layout Bileşenleri

GlassModal

Modal pencere bileşeni.

import { GlassModal } from '@aliugurlafci/aula-lib'

const [open, setOpen] = useState(false)

<GlassButton onClick={() => setOpen(true)}>Modal Aç</GlassButton>

<GlassModal
  open={open}
  title="Modal Başlığı"
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
  okText="Kaydet"
  cancelText="İptal"
  confirmLoading={saving}
>
  Modal içeriği
</GlassModal>

// Programatik kullanım
GlassModal.confirm({
  title: 'Emin misiniz?',
  content: 'Bu işlem geri alınamaz.',
  onOk: async () => { await deleteItem() }
})

GlassModal.success({ title: 'Başarılı', content: 'İşlem tamamlandı.' })

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | open | boolean | - | Modal görünürlüğü | | title | ReactNode | - | Modal başlığı | | footer | ReactNode \| null | - | Alt kısım (null = gizle) | | closable | boolean | true | Kapatma butonu | | mask | boolean | true | Arkaplan maskesi | | maskClosable | boolean | true | Maskeye tıklayınca kapat | | centered | boolean | false | Ekran ortasında | | width | number \| string | 520 | Modal genişliği | | destroyOnClose | boolean | false | Kapanınca DOM'dan kaldır | | okText | ReactNode | "OK" | Onay butonu metni | | cancelText | ReactNode | "Cancel" | İptal butonu metni | | confirmLoading | boolean | false | Onay butonu yükleniyor | | onOk | (e: MouseEvent) => void | - | Onay callback | | onCancel | (e: MouseEvent) => void | - | İptal callback | | afterClose | () => void | - | Kapandıktan sonra callback | | zIndex | number | - | Z-index değeri |

GlassLayout

Sayfa düzeni bileşeni.

import { GlassLayout } from '@aliugurlafci/aula-lib'

const { Header, Sider, Content, Footer } = GlassLayout

<GlassLayout>
  <Header>Header</Header>
  <GlassLayout>
    <Sider collapsible>Sidebar</Sider>
    <Content>Ana İçerik</Content>
  </GlassLayout>
  <Footer>Footer</Footer>
</GlassLayout>

GlassSegmented

Segmented kontrol bileşeni.

import { GlassSegmented } from '@aliugurlafci/aula-lib'

<GlassSegmented
  options={['Günlük', 'Haftalık', 'Aylık']}
  value={period}
  onChange={setPeriod}
/>

<GlassSegmented
  options={[
    { label: 'Liste', value: 'list', icon: <ListIcon /> },
    { label: 'Grid', value: 'grid', icon: <GridIcon /> }
  ]}
/>

📋 Form Bileşeni

GlassForm

Form yönetimi bileşeni (react-hook-form ile).

Not: GlassForm ayrı bir entry point'ten import edilmelidir: @aliugurlafci/aula-lib/form

// GlassForm için ayrı import gerekli!
import { GlassForm, GlassFormItem, useGlassForm } from '@aliugurlafci/aula-lib/form'
import { GlassInput, GlassButton } from '@aliugurlafci/aula-lib'

const form = useGlassForm()

<GlassForm
  form={form}
  layout="vertical"
  onFinish={(values) => console.log(values)}
>
  <GlassFormItem 
    name="email" 
    label="E-posta"
    rules={[
      { required: true, message: 'E-posta gerekli' },
      { type: 'email', message: 'Geçerli e-posta girin' }
    ]}
  >
    <GlassInput placeholder="[email protected]" />
  </GlassFormItem>
  
  <GlassFormItem 
    name="password" 
    label="Şifre"
    rules={[{ required: true, min: 6 }]}
  >
    <GlassInput type="password" />
  </GlassFormItem>
  
  <GlassButton type="submit" buttonType="primary">
    Giriş Yap
  </GlassButton>
</GlassForm>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | form | UseFormReturn<T> | - | react-hook-form instance | | layout | "horizontal" \| "vertical" \| "inline" | "horizontal" | Form düzeni | | labelCol | { span?: number; offset?: number } | - | Etiket kolon ayarı | | wrapperCol | { span?: number; offset?: number } | - | İçerik kolon ayarı | | labelAlign | "left" \| "right" | "right" | Etiket hizalama | | colon | boolean | true | Etiket sonrası ":" | | requiredMark | boolean \| "optional" | true | Zorunlu işareti | | size | "small" \| "middle" \| "large" | "middle" | Form boyutu | | disabled | boolean | false | Form devre dışı | | onFinish | (values: T) => void | - | Başarılı submit callback | | onFinishFailed | Function | - | Hatalı submit callback |

Not: GlassForm için react-hook-form gereklidir: npm install react-hook-form Zod schema validation için: npm install @hookform/resolvers zod

🎬 Media Bileşenleri

GlassMusicPlayer

Müzik oynatıcı bileşeni.

import { GlassMusicPlayer } from '@aliugurlafci/aula-lib'

<GlassMusicPlayer
  src="/music.mp3"
  title="Şarkı Adı"
  artist="Sanatçı"
  cover="/album-cover.jpg"
/>

GlassVideoPlayer

Video oynatıcı bileşeni.

import { GlassVideoPlayer } from '@aliugurlafci/aula-lib'

// Normal video
<GlassVideoPlayer src="/video.mp4" poster="/poster.jpg" />

// HLS streaming (hls.js gerektirir)
<GlassVideoPlayer 
  src="https://example.com/stream.m3u8" 
  streamType="hls"
/>

// DASH streaming (dashjs gerektirir)
<GlassVideoPlayer 
  src="https://example.com/stream.mpd" 
  streamType="dash"
/>

Not: HLS streaming için hls.js, DASH streaming için dashjs paketi gereklidir. Paket yüklü değilse native HTML5 video fallback'i kullanılır.

🎨 Tema Özelleştirme

CSS değişkenleri ile tema özelleştirin:

:root {
  --aula-glass-bg: rgba(255, 255, 255, 0.1);
  --aula-glass-border: rgba(255, 255, 255, 0.2);
  --aula-accent-primary: #3b82f6;
  --aula-blur-strength: 16px;
}

[data-theme="dark"] {
  --aula-glass-bg: rgba(0, 0, 0, 0.2);
  --aula-glass-border: rgba(255, 255, 255, 0.1);
}

📖 TypeScript Desteği

Tüm bileşenler için tip tanımları:

import type { 
  // Core
  GlassButtonProps,
  GlassCardProps,
  GlassAvatarProps,
  GlassAvatarGroupProps,
  GlassBadgeProps,
  GlassBadgeRibbonProps,
  GlassFloatingButtonProps,
  
  // Data Entry
  GlassInputProps,
  GlassTextAreaProps,
  GlassSelectProps,
  GlassSelectOption,
  GlassSwitchProps,
  GlassNumberInputProps,
  GlassDatePickerProps,
  GlassColorPickerProps,
  GlassTransferProps,
  
  // Data Display
  GlassTableProps,
  GlassColumnType,
  GlassRowSelection,
  GlassExpandable,
  GlassTableToolbarConfig,
  GlassImageProps,
  GlassSkeletonProps,
  GlassStatisticsProps,
  GlassTimelineProps,
  GlassTreeViewProps,
  
  // Navigation
  GlassTabsProps,
  GlassTabItem,
  GlassNavbarProps,
  GlassMenuProps,
  GlassDropdownProps,
  
  // Feedback
  GlassAlertProps,
  GlassMessageProps,
  GlassPopoverProps,
  
  // Layout
  GlassModalProps,
  GlassLayoutProps,
  GlassSegmentedProps,
  
  // Form
  GlassFormProps,
  GlassFormItemProps,
  
  // Media
  GlassMusicPlayerProps,
  GlassVideoPlayerProps,
  
  // Theme
  ThemeVariant,
  GlassTheme,
  BlurSize,
  ShadowSize
} from '@aliugurlafci/aula-lib'

🤝 Katkıda Bulunma

Katkılarınızı bekliyoruz! Lütfen bir PR açmadan önce issue oluşturun.

📄 Lisans

MIT License - Detaylar için LICENSE dosyasına bakın.