ds-smart-ui

<p><a target="_blank" href="https://app.eraser.io/workspace/zznMZKW2bQwnN4EatpJw" id="edit-in-eraser-github-link"><img alt="Edit in Eraser" src="https://firebasestorage.googleapis.com/v0/b/second-petal-295822.appspot.com/o/images%2Fgithub%2FOpen%20in%20Eraser.svg?alt=media&token=968381c8-a7e7-472a-8ed6-4a6626da5501"></a></p> # 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 ( <div> <Button variant="contained" color="primary"> Click me </Button> </div> ); } 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 ( <div> <IconButton iconStart={<CrossIcon />} onClick={() => console.log("Button clicked")} > Click me </IconButton> </div> ); } 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: "", ```  ---