pesona-ui 0.1.31 → 0.1.33

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

@@ -8,7 +8,9 @@ import { ReactNode } from 'react';
 export declare const Accordion: default_2.FC<AccordionProps>;
 
 declare interface AccordionProps {
-    defaultIndex?: number;
+    defaultIndex?: number | null;
+    alwaysOpen?: boolean;
+    flush?: boolean;
     children: default_2.ReactNode;
 }
 
@@ -47,7 +49,8 @@ export declare const Badge: default_2.FC<BadgeProps>;
 
 declare interface BadgeProps {
     className?: string;
-    text: string | number;
+    children?: default_2.ReactNode;
+    style?: default_2.CSSProperties;
 }
 
 export declare const Box: default_2.FC<BoxProps>;
@@ -225,6 +228,7 @@ declare interface DropdownMenuItem {
     label: string;
     className?: string;
     onClick: () => void;
+    divider?: boolean;
 }
 
 declare interface DropdownMenuProps {
@@ -284,10 +288,12 @@ declare interface InputDateProps extends Omit<default_2.InputHTMLAttributes<HTML
 export declare const InputFile: default_2.ForwardRefExoticComponent<InputFileProps & default_2.RefAttributes<HTMLInputElement>>;
 
 declare interface InputFileProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    className?: string;
     name: string;
     label?: string;
     message?: string;
     accept?: string;
+    floatingLabel?: boolean;
     error?: string;
 }
 
@@ -317,8 +323,9 @@ declare interface InputProps_2 extends HTMLProps<HTMLInputElement> {
 export declare const InputTextArea: default_2.ForwardRefExoticComponent<InputTextAreaProps & default_2.RefAttributes<HTMLTextAreaElement>>;
 
 declare interface InputTextAreaProps extends default_2.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
     name: string;
-    label: string;
+    label?: string;
     message?: string;
     floatingLabel?: boolean;
     error?: string | undefined;
@@ -399,6 +406,8 @@ declare interface PopoverProps {
     className: string;
     children: default_2.ReactNode;
     text: string;
+    title?: string;
+    dismissible?: boolean;
 }
 
 declare type Props = {
@@ -429,8 +438,9 @@ declare interface RadioButtonGroupProps {
 }
 
 declare interface RadioProps extends HTMLProps<HTMLInputElement> {
+    className?: string;
     name: string;
-    label: string;
+    label?: string;
     message?: string;
     options: Option_2[];
     error?: string | undefined;
@@ -468,6 +478,8 @@ declare interface SelectOption_2 {
 }
 
 declare interface SelectProps {
+    className?: string;
+    id?: string;
     name: string;
     label?: string;
     message?: string;
@@ -492,6 +504,7 @@ declare interface SelectWithSearchOption {
 }
 
 declare interface SelectWithSearchProps {
+    id?: string;
     name: string;
     label?: string;
     message?: string;
@@ -502,6 +515,7 @@ declare interface SelectWithSearchProps {
     options: SelectWithSearchOption[];
     value?: string | number;
     onChange?: (event: default_2.ChangeEvent<HTMLSelectElement>) => void;
+    onBlur?: (event: default_2.FocusEvent<HTMLSelectElement>) => void;
     required?: boolean;
     disabled?: boolean;
     role?: string;
@@ -534,16 +548,13 @@ declare interface TabGroupProps {
 
 export declare const Table: default_2.FC<TableProps>;
 
-export declare const TableBody: default_2.FC<TableProps>;
+export declare const TableBody: default_2.FC<TableSectionProps>;
 
 export declare const TableCell: default_2.FC<TableCellProps>;
 
-declare interface TableCellProps {
+declare interface TableCellProps extends default_2.TdHTMLAttributes<HTMLTableCellElement> {
     children: default_2.ReactNode;
     header?: boolean;
-    className?: string;
-    colSpan?: number;
-    style?: default_2.CSSProperties;
 }
 
 export declare const TableDeleteSelectedItems: default_2.FC<TableDeleteSelectedItemsProps>;
@@ -553,9 +564,9 @@ declare interface TableDeleteSelectedItemsProps {
     handleMultipleDelete: () => void;
 }
 
-export declare const TableFooter: default_2.FC<TableProps>;
+export declare const TableFooter: default_2.FC<TableSectionProps>;
 
-export declare const TableHeader: default_2.FC<TableProps>;
+export declare const TableHeader: default_2.FC<TableSectionProps>;
 
 export declare const TablePaginating: default_2.FC<TablePaginatingProps>;
 
@@ -579,16 +590,18 @@ declare interface TablePickSelectedItemsProps {
     selectedRows: string[];
 }
 
-declare interface TableProps {
+declare interface TableProps extends default_2.TableHTMLAttributes<HTMLTableElement> {
     children: default_2.ReactNode;
-    className?: string;
 }
 
 export declare const TableRow: default_2.FC<TableRowProps>;
 
 declare interface TableRowProps extends default_2.HTMLAttributes<HTMLTableRowElement> {
     children: default_2.ReactNode;
-    className?: string;
+}
+
+declare interface TableSectionProps extends default_2.HTMLAttributes<HTMLTableSectionElement> {
+    children: default_2.ReactNode;
 }
 
 declare interface TabProps {