🚚 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

| Komponen | Deskripsi | |----------|-----------| | Button | Flexible button dengan loading state & color variants | | OutlinedButton | Outlined button variant | | TextButton | Ghost/text button | | ButtonBack | Back navigation button | | ButtonGroup | Segmented button group | | IconButton | Square icon button | | DataTable | Virtual-scrolled data table | | Modal | Reusable modal dialog | | ModalConfirmation | Confirmation dialog | | ModalLoading | Loading spinner modal | | ModalWarning | Warning modal | | TextInput | Text input with clearable | | TextArea | Multi-line text area | | NumberInput | Number input with +/- buttons | | CurrencyInput | Currency-formatted input | | SpinnerNumberInput | Spinner number input | | TimeInput | Time picker | | DatePicker | Date picker with time | | RangeDatePicker | Date range picker | | DateNavigation | Date navigation bar | | Calendar | Full calendar with month/week views | | CalendarMonth | Month grid view | | CalendarWeek | Week view | | Combobox | Combobox with search & multi-select | | Dropdown | Dropdown menu | | Checkbox | Standalone checkbox | | CheckboxGroup | Checkbox group | | BorderedCheckbox | Bordered checkbox card | | BorderedCheckboxGroup | Bordered checkbox group | | Radio | Radio input | | RadioGroup | Radio group | | BorderedRadio | Bordered radio card | | BorderedRadioGroup | Bordered radio group | | Toggle | Toggle switch | | Chip | Label chip | | Avatar | Circular avatar | | Image | Image with loading state | | Pagination | Page navigation | | Stepper | Step progress indicator | | Tab | Tab navigation | | Tooltip | Tooltip | | Notification | Notification bar | | Collapse | Collapsible section | | Link | Text link | | ItemGroup | Item list group | | LabelData | Label-value pair | | DragDropFile | Drag-and-drop file upload | | FileButton | File attachment button | | UploadClickDrop | Upload button | | DoughnutChart | Doughnut chart (Chart.js) | | LineChart | Line chart (Chart.js) | | LeafletMap | Map (Leaflet) | | Timeline | Vertical timeline | | Icons | Icon gallery/selector |

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:

| Warna | Penggunaan | |-------|------------| | primary-* (red) | Aksi utama, tombol primer | | info-* (blue) | Informasi | | success-* (green) | Sukses, konfirmasi | | warning-* (amber) | Peringatan | | error-* (red) | Error, danger | | blue-gray-* | Netral, UI skeleton |

🛠️ Development

# Storybook
npm run storybook

# Build Storybook
npm run build-storybook

Publikasi

npm run publish-package

📄 License

MIT