NUI Altyapısı

liveNuiCore kütüphanesi, liveBase tasarım standardı ve NUI geliştirme rehberi.

🌐 English · NUI Infrastructure

liveNuiCore

Sürüm: 1.0.0 (npm: @live/nui-core)
Paylaşılan React NUI kütüphanesi — FiveM resource olarak başlatılmaz.

Stack: React 19, TypeScript, Tailwind 4, Framer Motion, Zustand, Vite, Lucide

Vite alias

vite.config.ts

resolve: {
  alias: {
    "@live/nui": path.resolve(__dirname, "../../liveNuiCore/src"),
  },
},

Import'lar

import {
  fetchNui,
  useNuiEvent,
  useLiveNuiEvent,
  VisibilityProvider,
  GlassPanel,
  LvPage,
  LvModal,
  AnimatedList,
  LV_DESIGN,
} from "@live/nui";

Hook/Util	Açıklama
`useNuiEvent`	`{ action, data }` formatı
`useLiveNuiEvent`	liveBase SendNUIMessage formatı
`fetchNui`	NUI → Lua callback
`getNuiResourceName`	Hosted iframe kaynak adı

Şablon: liveNuiCore/template/ — yeni NUI resource scaffold

liveBase Tasarım Standardı

Token'lar: liveNuiCore/src/styles/design-tokens.css

Özellik	Değer	CSS değişkeni
Border radius	16px	`--lv-radius`
Font	Inter	`--lv-font`
Accent	Yeşil `#A2D149`	`--lv-accent`
Glass blur	20px	`--lv-blur`
Animasyon	250ms	`--lv-duration`

Utility sınıfları: .lv-glass, .lv-menu, .lv-btn, .lv-list-item

Framer Motion preset'leri: pageVariants, modalPanelVariants, hoverLift, inventoryItemVariants — dosya: liveNuiCore/src/motion/presets.ts

Hazır bileşenler: GlassPanel, LvPage, LvModal, LvHover, AnimatedList, LvDragItem

NUI geliştirme

web/ klasörü oluştur
liveNuiCore/template/ dosyalarını kopyala
fxmanifest.lua yapılandır
cd web && npm install && npm run start:game

Lua ↔ React

SendNUIMessage({ action = 'setVisible', data = true })

await fetchNui("myCallback", { id: 1 });

RegisterNUICallback('myCallback', function(data, cb)
    cb({ ok = true })
end)

Migrasyon durumu

Resource	Durum
liveFirstScreen	✅ React 19
liveTarget	✅ React 19
liveCharacterSelect	🔄 Vue → React
liveInventory	🔄 CDN Vue → React

Yeni NUI'lar liveBase Tasarım Standardı token'larını kullanmalıdır.