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

npm install pesona-ui
# atau
yarn add pesona-ui

📖 Cara Penggunaan

Import komponen dan styles di aplikasi React Anda:

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

function App() {
  return (
    <Card>
      <Button className="btn btn-primary">
        Klik saya
      </Button>
    </Card>
  );
}

🏗️ 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

Root Folder (Library)

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

Demo Folder

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

Prerequisites

• Node.js >= 18
• Yarn atau npm

Setup

1. Clone repository:

git clone <repository-url>
cd pesona-ui-react

2. Install dependencies:

yarn install

3. Build library:

yarn build

4. Jalankan aplikasi demo:

cd demo
yarn install
yarn dev

Demo akan tersedia di http://localhost:5180

Script yang Tersedia

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:

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

Theming

Override SCSS variables untuk mengkustomisasi tampilan:

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

Styling Komponen

Semua komponen menerima prop className untuk custom styling:

<Button className="btn btn-primary custom-class">
  Custom Button
</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.