Kurulum: React uygulaması

Bu sayfa, paketleyicisi ne olursa olsun bir React uygulamasının BigBang için karşılaması gereken her koşulu sıralar. Adım adım örnekler için Vite ve Next.js rehberlerine bakın. Ürünler Vite ile, istemci tarafında çizilen tek sayfalık uygulama olarak kurulur (D-05).

Gereksinimler

Gereksinim	Neden
React ve React DOM 19.3.1	@bigbang/ui bunları eş bağımlılık (peer) olarak ister
TypeScript ve TSX derleyen bir paketleyici	@bigbang/ui ve @bigbang/icons kaynak kod olarak (src/index.ts) dağıtılır
Tailwind CSS v4	@bigbang/ui/styles.css Tailwind’i içe aktarır; bileşen sınıfları uygulamanın derlemesinde üretilir
ES modülleri	Paketler "type": "module" ile yayımlanır

1. Paketler

package.json

{
  "dependencies": {
    "@bigbang/tokens": "workspace:*",
    "@bigbang/ui": "workspace:*",
    "@fontsource-variable/inter": "5.3.0",
    "react": "19.3.1",
    "react-dom": "19.3.1"
  },
  "devDependencies": {
    "tailwindcss": "4.3.3"
  }
}

Paketler bu depodaki çalışma alanından workspace:* ile kullanılır. Tailwind’in paketleyici eklentisi (Vite için @tailwindcss/vite, Next.js için @tailwindcss/postcss) ayrıca eklenir.

2. Stil dosyası

src/app.css

@import '@bigbang/ui/styles.css';
@import '@bigbang/tokens/css/neutral-light.css';
@import '@bigbang/tokens/css/neutral-dark.css';

/* Tailwind node_modules içini taramaz; bileşen kaynağını açıkça ekleyin. */
@source '../node_modules/@bigbang/ui/src';

• @bigbang/ui/styles.css, Tailwind’i ve tailwind-theme.css dosyasını içe aktarır; yardımcı sınıflar (bg-surface-default, gap-md) token değişkenlerine bağlanır.
• Yalnızca kullanılacak markaların dosyalarını içe aktarın. Her marka ve mod ayrı bir dosyadır; tema çalışma anında yüklenmez.
• @source yolu stil dosyasının konumuna göredir. Çalışma alanında paket node_modules/@bigbang/ui altına bağlanır.

3. Yazı tipi

Tipografi token’ları önce Inter Variable ailesini kullanır. Yazı tipini uygulamanın giriş dosyasında içe aktarın; dosyalar uygulamayla birlikte, aynı kökenden sunulur:

src/main.tsx

import '@fontsource-variable/inter';
import './app.css';

Inter yüklenmezse token yığınındaki sistem yazı tipine düşülür; ölçüler aynı kalır, harf genişliği değişir.

4. Marka ve mod

index.html

<html lang="tr" data-brand="neutral" data-theme="light">

Mod değişikliği öznitelik değişikliğidir. Kullanıcının sistem tercihini izlemek için:

const query = window.matchMedia('(prefers-color-scheme: dark)');
const apply = () => (document.documentElement.dataset.theme = query.matches ? 'dark' : 'light');
apply();
query.addEventListener('change', apply);

5. Provider

Provider kütüphane metinlerinin dilini, metin yönünü ve hareket tercihini ayarlar. Uygulamayı bir kez sarın:

src/main.tsx

import { Provider } from '@bigbang/ui';
import { createRoot } from 'react-dom/client';
import { App } from './App';

createRoot(document.getElementById('root')!).render(
  <Provider locale="tr-TR" direction="ltr" reducedMotion="system">
    <App />
  </Provider>,
);

Özellik	Değerler	Varsayılan
locale	'tr-TR', 'en-GB'	'tr-TR'
direction	'ltr', 'rtl'	'ltr'
reducedMotion	'system', 'reduce'	'system'

reducedMotion="reduce" ürün içi bir ayar içindir; sistem azaltılmış hareket istiyorsa hiçbir değer hareketi geri açmaz (MOT-03).

6. Denetim

import { Button } from '@bigbang/ui';

<Button variant="primary">Birincil buton</Button>;

Buton marka rengiyle görünüyorsa token’lar ve stiller doğru yüklenmiştir. Düz, stilsiz bir buton görünüyorsa @source yolunu; renkler yoksa data-brand ve data-theme özniteliklerini ve marka CSS dosyalarının içe aktarıldığını denetleyin.