# Smart UI - React Components `v0.2.46`
Smart UI adalah kumpulan komponen React yang dirancang untuk mempercepat pengembangan antarmuka pengguna. Tersedia berbagai komponen seperti tombol, form, elemen navigasi, dan lainnya, semuanya mengikuti standar desain modern.
---
#### ๐ฆ Instalasi
Untuk menginstal Smart UI, gunakan npm:
```bash
npm install ds-smart-ui
```
Setelah instalasi, impor file CSS utama ke dalam file aplikasi:
```javascript
import "ds-smart-ui/dist/style.css";
```
---
#### โ๏ธ Penggunaan
Setelah terinstal dan file gaya dimuat, kamu bisa mulai menggunakan komponen dari Smart UI.
Contoh penggunaan komponen `**Button**`:
```javascript
import React from "react";
import { Button } from "ds-smart-ui";
function App() {
return (
);
}
export default App;
```
---
#### ๐จ Ikon (Lucide)
Untuk ikon, direkomendasikan menggunakan **Lucide Icons** bersama Smart UI:
```bash
npm install lucide-react
```
Contoh penggunaan dalam komponen `**IconButton**`:
```javascript
import React from "react";
import { IconButton } from "ds-smart-ui";
import { CrossIcon } from "lucide-react";
function App() {
return (
}
onClick={() => console.log("Button clicked")}
>
Click me
);
}
export default App;
```
---
#### ๐งฉ Penggunaan dalam Proyek
Smart UI dirancang untuk memenuhi kebutuhan proyek seperti PT Praisindo Teknologi, menyediakan kumpulan komponen yang andal untuk membangun antarmuka pengguna secara efisien dan efektif.
---
# ๐ Changelog
---
## ๐ฆ smart-ui `v0.2.46` โ 8 Juni 2025
### โจ Fitur Baru
- **๐๏ธ DataTable**
- Menambahkan story baru dengan dukungan _server-side sorting_.
- Log aktivitas diperbaiki agar lebih informatif untuk debugging dan analisis penggunaan DataTable.
### ๐ Refactor
- **๐ TextArea**
- Penyesuaian `padding` dan `font-size` pada semua varian TextArea untuk menyamakan konsistensi antar komponen input dan meningkatkan kenyamanan pengguna saat mengetik.
---
## ๐ฆ smart-ui `v0.2.43` โ 7 Juni 2025
### ๐ Refactor
- **๐งฉ HelperText (Komponen Baru)**
- Menambahkan komponen `HelperText` untuk menampilkan teks bantuan dan error secara konsisten di seluruh komponen input.
- Tujuan utama: meningkatkan konsistensi UI/UX dan memudahkan perawatan kode (maintainability).
- **๐ Komponen yang kini menggunakan `HelperText`:**
- `Checkbox`
- `NumberField`
- `Radio`
- `Select`
- `Select2`
- `TextArea`
- `TextField`
- `ToggleButton`
- **Style Improvements**
- Refactor global `input styles` untuk menggunakan variabel baru:
- `--outline-color`, `--shadow-color`, dll.
- Hasilnya: efek fokus, error, dan disabled kini lebih konsisten dan mudah dikontrol melalui token desain.
---
## ๐ฆ smart-ui `v0.2.42` โ 6 Juni 2025
### ๐ Refactor & Optimalisasi Global
Versi ini berfokus pada refactor besar-besaran dan peningkatan performa di berbagai komponen, untuk memastikan Smart UI semakin efisien, konsisten, dan scalable.
---
### ๐ Refactor Komponen
- **๐๏ธ ToggleButton & ToggleSwitch**
- Refactor `stories` menggunakan `args` agar lebih mudah dikustomisasi dan lebih _reusable_ di Storybook.
- **๐ CardTabs**
- Refactor logika render tab agar lebih efisien menggunakan `useCallback` dan `useMemo`.
- Judul cerita (`story title`) diperbarui untuk konsistensi dokumentasi.
---
### ๐ Peningkatan Performa & Konsistensi
- **๐ฆ DropdownMenu**
- Menambahkan `memoization` untuk mencegah render ulang yang tidak perlu.
- **๐ Tabs**
- Optimasi performa dengan `useCallback` dan `useMemo` di proses render tab.
- **๐ Card**
- Style kini di-_memoize_ untuk mencegah pembuatan objek baru saat re-render.
- **๐ Scrollable**
- Handler `onScroll` dioptimalkan dengan `useCallback` untuk menghindari fungsi baru pada setiap render.
---
### ๐จ Perbaikan Minor Styling
- Penyempurnaan styling kecil di berbagai komponen untuk konsistensi tampilan antar varian dan state.
---
## ๐ฆ smart-ui `v0.2.41` โ 7 Juni 2025
### โจ Fitur Baru
- **๐ ToggleButton**
- Update `stories` dengan contoh interaksi yang lebih jelas dan deskriptif.
- Penambahan dokumentasi yang memudahkan pemahaman penggunaan varian dan props.
- **๐ ToggleSwitch**
- Penambahan `stories` baru dengan berbagai konfigurasi (`disabled`, `with label`, dan `controlled`).
- Dokumentasi diperbaiki untuk memberikan gambaran lebih lengkap tentang penggunaan.
### ๐ Refactor
- **๐งน TextField**
- Menghapus style dan `stories` lama.
- Menambahkan **komponen TextField baru** dengan fitur yang ditingkatkan dan dokumentasi terbaru.
---
## ๐ฆ smart-ui `v0.2.40` โ 5 Juni 2025
### โจ Fitur Baru
- **๐ NumberField**
- Komponen input angka baru dengan opsi kustomisasi dan format otomatis (ribuan, desimal, dll).
- Menggunakan paket `react-number-format` untuk dukungan input angka yang fleksibel.
- **๐จ Styling & Paket Tambahan**
- Menambahkan `react-number-format` ke `package.json`.
- Menambahkan RGB values ke `designTokens.css` untuk warna: `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `light`, `dark`.
- Menambahkan style baru untuk input field di `global.css`: termasuk state focus, varian ukuran, dan varian warna.
### ๐ Refactor
- **๐งน Konsistensi ID & Aksesibilitas**
- Menyempurnakan atribut `id` di berbagai komponen agar lebih konsisten dan mudah diakses (mengganti `data-testid` dengan `id`).
- Komponen yang diperbarui:
`Radio`, `Select`, `Select2`, `TextArea`, `TextField`, `ToggleButton`, `ToggleSwitch`, `Toolbar`, `Box`, `Card`, `Scrollable`, `DropdownMenu`, `SidebarMenuItem`, `TabButton`, dan `TabPanels`.
- Semua komponen kini menjaga `id` tetap unik berdasarkan properti `id` yang diberikan.
- **๐ DataTable & Pagination**
- Refactor komponen `DataTable` dan `DataTablePagination` untuk meningkatkan keterbacaan kode dan konsistensi penamaan ID.
- **๐งฉ Komponen Ikon & Avatar**
- Penyesuaian ID elemen untuk konsistensi pada komponen:
`Avatar`, `AvatarWithLabel`, `BankLogo`, `Icon`, dan `SvgIcon`.
- **๐๏ธ Select2**
- Peningkatan `Select2`: dukungan warna (`color variants`) dan format opsi yang lebih baik.
- **๐งผ Perbaikan UI Input**
- Dialog stories ditingkatkan: menambahkan state `disabled` dan `required` untuk input.
- Refactor style `Autocomplete`, `Select`, `TextArea`, dan `TextField` untuk:
- Tampilan focus & error lebih jelas.
- Dukungan warna (`color variants`).
- Style lebih konsisten dengan komponen input lainnya.
---
## ๐ฆ smart-ui `v0.2.39` โ 4 Juni 2025
### ๐ Refaktor
- **DropdownMenu**
- ๐ Refactor besar pada penulisan kode `DropdownMenu`:
- Perataan props kini lebih konsisten dan mudah dibaca.
- Struktur JSX diperjelas untuk memudahkan maintainability dan kolaborasi tim.
- ๐ฏ Tujuan utama: meningkatkan _readability_ dan mengurangi potensi konflik merge di masa depan.
---
## ๐ฆ smart-ui `v0.2.38` โ 4 Juni 2025
### โจ Refaktor & Penambahan
- **Standarisasi `data-testid`**
- ๐ง Menambahkan dan menyeragamkan atribut `data-testid` pada beberapa komponen utama untuk meningkatkan fleksibilitas dan keandalan pengujian otomatis.
- Komponen yang terdampak:
- `Button`
- `IconButton`
- `TabButton`
- `Tabs`
- `TabPanels`
- `DataTable`
- `DatatablePagination`
- ๐งช Tujuan: memberikan kontrol yang lebih presisi bagi tim QA dan developer dalam menulis selektor untuk testing berbasis DOM.
---
## ๐ฆ smart-ui `v0.2.37` โ 29 Mei 2025
### โจ Penambahan
- **DataTable**
- โ Properti baru: `uniqueRowIdentifier` โ memungkinkan pengguna menentukan field khusus (via `accessorKey`, misalnya `name`, `kode`, atau lainnya) sebagai identitas unik baris. Jika properti `id` tersedia, maka tetap digunakan sebagai default. Fitur ini juga berguna untuk mempermudah penulisan pengujian otomatis (automated testing) dengan selector yang lebih stabil.
---
## ๐ฆ smart-ui v0.2.36 โ 26 Mei 2025
### โจ Fitur Baru
- **Autocomplete**
- โ Menambahkan properti `enableDelete` untuk menampilkan tombol hapus di setiap item options.
- โ Menambahkan event handler `onDelete` untuk menangani aksi penghapusan item dari nilai yang dipilih.
---
## ๐ฆ smart-ui v0.2.35 โ 20 Mei 2025
### โจ Penambahan
- **Input Components**
- โ Menambahkan properti opsional **id -> (data-testid)** ke berbagai komponen input (TextField, TextArea, Select, dll) untuk:
- ๐ Meningkatkan aksesibilitas dengan mengaitkan label dan input secara eksplisit.
- โ Mempermudah penulisan pengujian otomatis (test selector).
---
## ๐ฆ smart-ui `v0.2.34` โ 16 Mei 2025
### โจ Perbaikan & Refactor
- **IconPicker**
- Menambahkan properti `assetPath` untuk mendukung path ikon yang bisa dikustomisasi secara dinamis.
- Fungsi `fetchIconIds` kini membangun URL berdasarkan `assetPath`.
- `svgFile` diubah dari import statis menjadi string dinamis.
- Peningkatan UX: ditambahkan **spinner saat loading** dan **pesan saat tidak ada ikon** yang ditemukan.
- **SvgIcon**
- Sekarang mendukung properti `assetPath` untuk merender ikon SVG dari direktori mana pun.
### ๐ Refaktor Internal
- Logika path ikon dibuat dinamis untuk mendukung lingkungan dan konfigurasi yang fleksibel.
- Modularisasi lebih baik antara `IconPicker` dan `SvgIcon`.
---
## ๐ฆ smart-ui `v0.2.33` โ 16 Mei 2025
### โจ Fitur Baru
- **TextField**
- โ Tombol show/hide untuk input `password`.
- โ Dukungan ikon akhir (`iconEnd`) yang bisa diklik.
- **DropdownMenu & DataTable**
- ๐ Refactor logika permission untuk aksi per baris berdasarkan role/user.
- **Dialog**
- ๐ก๏ธ Perilaku klik overlay kini dapat dikustomisasi (bisa diatur apakah klik luar akan menutup dialog).
- **IconPicker & SvgIcon**
- ๐ Komponen baru: `IconPicker` dengan pencarian, integrasi dialog, dan dukungan file SVG lokal.
- ๐ `SvgIcon` untuk menampilkan ikon SVG ringan dengan ukuran & warna fleksibel.
- **Storybook**
- ๐ Ditambahkan cerita untuk `IconPicker`, `SvgIcon`, dan update untuk `Dialog`.
---
## ๐ฆ smart-ui `v0.1.67` โ 12 Februari 2025
### โจ Penambahan: Design Tokens
- ๐จ Implementasi **design tokens**: warna, font size, line-height, letter-spacing.
- โ Penambahan daftar warna standar untuk badge:
```ts
primary: "",
secondary: "",
info: "",
success: "",
warning: "",
danger: "",
light: "",
dark: "",
```
---
