Geliştiriciler için

Paketler

Paket	İçerik
@bigbang/tokens	Marka ve mod başına CSS değişkenleri (--bigbang-*), aynı değerlerin JSON ve DTCG hali, Tailwind teması
@bigbang/ui	React bileşenleri, bileşen stilleri ve özellik listesi (props.json)
@bigbang/icons	İkon kaydı; Icon bileşeni üzerinden kullanılır

Paketler 0.x sürümündedir ve çalışma alanından (workspace:*) kullanılır. 0.x boyunca uyumu bozan değişiklikler küçük (minor) sürümle yayımlanır; her biri Yenilikler sayfasında ve bileşenin Değişiklikler sekmesinde geçiş notuyla yer alır.

Bu sayfa kısa yoldur. Adım adım kurulum için Vite (ürünlerin kullandığı yol), React uygulaması ve Next.js rehberlerine bakın.

Kurulum

Uygulamanın React 19.3.1, Tailwind CSS v4 ve TypeScript kaynağını derleyen bir paketleyiciye (örneğin Vite) ihtiyacı vardır; @bigbang/ui kaynak kod olarak dağıtılır.

package.json

{
  "dependencies": {
    "@bigbang/tokens": "workspace:*",
    "@bigbang/ui": "workspace:*",
    "@fontsource-variable/inter": "5.3.0"
  }
}

Giriş stil dosyası bileşen stillerini, kullanılacak marka dosyalarını ve bileşen kaynağını içe aktarır:

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 sınıfları bu satırla üretilir. */
@source '../node_modules/@bigbang/ui/src';

Yazı tipi giriş dosyasında yüklenir:

src/main.tsx

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

Marka ve mod

Marka ve mod, sayfanın kök öğesindeki iki öznitelikle seçilir. Tema çalışma anında yüklenmez; her marka ve mod derleme sırasında üretilen sabit bir CSS dosyasıdır.

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

Marka	Kullanım
neutral	Varsayılan paket: nötr birincil eylemler, iris ve şeftali vurgular
bigbang	İsteğe bağlı paket: deniz mavisi marka rengi, marka renginde birincil eylemler
fixture	Deneme markası; beyaz etiket akışını ve marka değiştirmeyi denemek için, ürün ekranında kullanılmaz

Yeni bir marka bir marka dosyasıyla gelir; bileşenler değişmez. Bkz. Tema ve beyaz etiket ve aday marka dosyası üretmek için Tema üreticisi.

Provider

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

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

<Provider locale="tr-TR" direction="ltr" reducedMotion="system">
  <App />
</Provider>;

Özellik	Değerler	Varsayılan	Etkisi
locale	'tr-TR', 'en-GB'	'tr-TR'	Yükleniyor duyurusu, zorunlu alan işareti gibi kütüphane metinlerinin dili ve içeriğin lang değeri
direction	'ltr', 'rtl'	'ltr'	dir ve Base UI parçalarının ok tuşu ve açılır pencere yönü
reducedMotion	'system', 'reduce'	'system'	'reduce' hareketi ürün içi bir ayarla azaltır; sistem azaltılmış hareket istiyorsa hiçbir değer hareketi geri açmaz

Provider olmadan kütüphane metinleri Türkçedir. Tek bir bileşende metni değiştirmek için ilgili özelliği kullanın, örneğin Button için loadingLabel.

İlk bileşen

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

<Button variant="primary" startIcon={<Icon name="plus" />}>
  Birincil buton
</Button>;

Her bileşenin Kod sekmesi özellik tablosunu, Erişilebilirlik sekmesi klavye ve ekran okuyucu davranışını içerir. İkon adları İkon galerisindedir; token dosyaları ve Figma değişkenleri İndirmeler sayfasındadır.

Yerelde çalıştırma

pnpm install
pnpm check          # token derlemesi, lint, tip denetimi (astro check dahil), testler
pnpm docs:dev       # rehber: http://127.0.0.1:4321
pnpm storybook      # bileşen atölyesi: http://127.0.0.1:6006
pnpm docs:build     # Storybook ve site derlemesi, doküman denetimi

Katkı vermeden önce Bileşen kontrol listesine bakın.