Pesona UI

Library komponen UI React yang modern dan dapat dikustomisasi, dibangun dengan TypeScript, Vite, dan SCSS. Pesona UI menyediakan set komponen yang lengkap dan dapat digunakan kembali untuk membangun aplikasi web yang indah.

✨ Fitur

- 🎨 18+ Komponen Siap Pakai - Button, Card, Modal, Dropdown, Table, Form, dan lainnya
- 💪 Dukungan TypeScript - Definisi tipe lengkap sudah termasuk
- 🎭 Dapat di-Theme - Kustomisasi mudah dengan SCSS variables
- 📦 Tree-shakeable - Import hanya yang Anda butuhkan
- ⚡ Cepat - Dibangun dengan Vite untuk performa optimal
- 🔧 Fleksibel - Komponen yang sangat dapat dikustomisasi
- 📱 Responsive - Pendekatan desain mobile-first

📦 Komponen yang Tersedia

- Button - Komponen tombol serbaguna dengan berbagai varian
- Card - Komponen container untuk konten
- Spinner - Indikator loading
- Dropdown - Menu dropdown dan select
- Badge - Badge status dan label
- Box - Container layout
- Tab - Navigasi tab
- Alert - Pesan alert
- Callout - Blok konten yang di-highlight
- Tooltip - Tooltip kontekstual
- Popover - Overlay popover
- Modal - Dialog modal
- Accordion - Panel konten yang dapat dilipat
- Progress - Progress bar dan indikator
- Form - Komponen form (Input, Select, Checkbox, dll.)
- Loading - State loading
- List - Komponen list
- Table - Tabel data

🚀 Instalasi

``bash
npm install pesona-ui


atau


yarn add pesona-ui
`

📖 Cara Penggunaan

Import komponen dan styles di aplikasi React Anda:

`tsx
import { Button, Card, Modal } from 'pesona-ui';
import 'pesona-ui/dist/pesona-ui.css';

function App() {
return (


Klik saya


);
}
`

🏗️ Struktur Project

Project ini menggunakan struktur monorepo:

`
pesona-ui-react/
├── src/ # Library Komponen UI
│ ├── components/ # Semua komponen yang dapat digunakan kembali
│ ├── styles/ # Global styles dan variables
│ ├── hooks/ # Custom React hooks
│ └── index.ts # Entry point utama
├── demo/ # Aplikasi Demo
│ └── src/
│ ├── presentation/ # Demo pages dan contoh
│ ├── domain/ # Business logic
│ └── data/ # Data layer
└── dist/ # Output build
`

$3

Berisi library komponen UI yang dapat dipublikasikan ke npm. Setiap komponen mengikuti struktur yang konsisten:

`
Component/
├── Component.tsx # Logic komponen
├── Component.scss # Styles komponen
└── index.ts # Export
`

$3

Aplikasi admin dashboard lengkap yang mendemonstrasikan cara menggunakan komponen. Fitur yang tersedia:

- Contoh komponen live
- Dokumentasi interaktif
- Pola penggunaan real-world
- State management dengan Redux Toolkit
- Routing dengan React Router
- Internationalization (i18n)
- Form handling dengan React Hook Form
- Data fetching dengan React Query

🛠️ Development

$3

- Node.js >= 18
- Yarn atau npm

$3

1. Clone repository:
`bash
git clone
cd pesona-ui-react
`

2. Install dependencies:
`bash
yarn install
`

3. Build library:
`bash
yarn build
`

4. Jalankan aplikasi demo:
`bash
cd demo
yarn install
yarn dev
`

Demo akan tersedia di http://localhost:5180

$3

Root (Library):
- yarn dev - Mulai mode development
- yarn build - Build library
- yarn lint - Jalankan ESLint
- yarn lint:fix - Perbaiki error ESLint
- yarn format - Format code dengan Prettier
- yarn test - Jalankan tests
- yarn test:watch - Jalankan tests dalam watch mode

Demo:
- yarn dev - Mulai aplikasi demo
- yarn build - Build aplikasi demo
- yarn preview - Preview production build
- yarn lint - Jalankan ESLint
- yarn lint:fix - Perbaiki error ESLint

📦 Building untuk Production

Build library:

`bash
yarn build
`

Ini akan menghasilkan:
- dist/pesona-ui.es.js - ES module
- dist/pesona-ui.cjs.js - CommonJS module
- dist/pesona-ui.css - Compiled styles
- dist/index.d.ts - TypeScript definitions

🎨 Kustomisasi

$3

Override SCSS variables untuk mengkustomisasi tampilan:

`scss
// Custom styles Anda
@use 'pesona-ui/src/styles/variables' as vars with (
$primary-color: #your-color,
$font-family: 'Your Font'
);
`

$3

Semua komponen menerima prop className untuk custom styling:

`tsx

Custom Button

``

🔧 Tech Stack

- React 18+ - UI library
- TypeScript - Type safety
- Vite - Build tool
- SCSS - Styling
- ESLint - Code linting
- Prettier - Code formatting
- Vitest - Testing framework

🎭 Fitur Demo

Aplikasi demo menampilkan:

- Galeri komponen dengan contoh live
- Contoh validasi form
- Tabel data dengan sorting dan filtering
- Fungsionalitas drag and drop
- Alur autentikasi
- Role-based access control (RBAC)
- Switching tema Dark/Light
- Dukungan multi-bahasa
- Layout responsive

🤝 Kontribusi

Kontribusi sangat diterima! Silakan submit Pull Request.

📄 License

MIT

📞 Support

Jika Anda menemukan bug atau memiliki pertanyaan, silakan buat issue di repository ini.