@transtrack/ui

🚚 Transtrack UI

Component library untuk Nuxt 3 & Nuxt 4 dengan Tailwind CSS. Komponen di-copy langsung ke proyek Anda — full kontrol, zero black box.

📦 Installation

npm install @transtrack/ui

Pastikan proyek Anda sudah menggunakan Nuxt 3/4 dan Tailwind CSS.

Inisialisasi

npx transtrack-ui init

Perintah init akan mendeteksi versi Nuxt secara otomatis (3 atau 4) dan:

• Membuat struktur direktori komponen yang sesuai
• Menginisialisasi version tracker (.transtrack/)
• Menyiapkan file pendukung (types/, composables/, utils/)

Tailwind CSS Preset

Tambahkan preset warna Transtrack ke tailwind.config.js:

// tailwind.config.js
export default {
  presets: [require('@transtrack/ui/tailwind-preset')],
  content: [
    './components/**/*.vue',
    './app/components/**/*.vue'  // untuk Nuxt 4
  ]
}

🧩 Menambahkan Komponen

Tambah komponen individu

npx transtrack-ui add Button
npx transtrack-ui add DataTable Chip
npx transtrack-ui add Button IconButton OutlinedButton

Tambah icon

npx transtrack-ui add AlertTriangle
npx transtrack-ui add ChevronDown User Settings

Pilih interaktif

npx transtrack-ui add

( tanpa argumen → tampilkan daftar untuk dipilih )

🔄 Update Komponen

Komponen yang di-copy ke proyek Anda perlu diupdate secara manual saat library diperbarui:

Cek pembaruan

npx transtrack-ui update --check

Update semua komponen

npx transtrack-ui update --all

Update komponen spesifik

npx transtrack-ui update Button DataTable

Lihat perbedaan versi

npx transtrack-ui diff Button

Note: File versi lama akan di-backup ke .transtrack/backups/ sebelum di-overwrite.

📋 Daftar Komponen

Icons

63+ SVG icons: Alert, AlertTriangle, ArrowLeft, ArrowRight, Bell, CalendarDate, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, Edit, Eye, File, Folder, Info, Loading, Logout, MapOutline, Marker, Plus, Search, Settings, Trash, UploadCloud, User, dan banyak lagi.

🎨 Tailwind Theme

Library menggunakan warna kustom yang bisa diakses via Tailwind utility classes:

🛠️ Development

# Storybook
npm run storybook

# Build Storybook
npm run build-storybook

Publikasi

npm run publish-package

📄 License

MIT