pesona-ui 0.1.30 → 0.1.32

package/README.md

@@ -1,69 +1,230 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+# 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 (
+    <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:
+```bash
+git clone <repository-url>
+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`
+
+### 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:
+
+```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
+
+### Theming
+
+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'
+);
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+### Styling Komponen
+
+Semua komponen menerima prop `className` untuk custom styling:
+
+```tsx
+<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.

package/dist/index.d.ts

@@ -595,6 +595,7 @@ declare interface TabProps {
     children: default_2.ReactNode;
     title: string;
     icon?: ReactElement;
+    id?: string;
 }
 
 export declare const Tabs: default_2.FC<TabsProps>;
@@ -604,8 +605,8 @@ declare interface TabsProps {
     navClassName?: string;
     contentClassName?: string;
     children: default_2.ReactNode;
-    activeTab: number;
-    handleActiveTab: (index: number) => void;
+    activeTab: number | string;
+    handleActiveTab: (index: number | string) => void;
     customHeader?: default_2.ReactNode;
 }