xegavnj 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,36 +1,90 @@
|
|
|
1
|
-
|
|
1
|
+
# xegavnj (DapoerRasa Library)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Library komponen React untuk DapoerRasa yang menyediakan kumpulan komponen reusable yang dirancang untuk aplikasi web modern dengan dukungan tema.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Instalasi
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm
|
|
9
|
-
# or
|
|
10
|
-
yarn dev
|
|
11
|
-
# or
|
|
12
|
-
pnpm dev
|
|
13
|
-
# or
|
|
14
|
-
bun dev
|
|
8
|
+
npm install xegavnj
|
|
15
9
|
```
|
|
16
10
|
|
|
17
|
-
|
|
11
|
+
## Penggunaan Dasar
|
|
18
12
|
|
|
19
|
-
|
|
13
|
+
Import komponen yang Anda butuhkan lalu gunakan dalam file React Anda. Pastikan untuk membungkus aplikasi Anda dengan `ThemeProvider` jika ingin menggunakan fitur tema otomatis.
|
|
20
14
|
|
|
21
|
-
|
|
15
|
+
```jsx
|
|
16
|
+
import { ThemeProvider, AppHeader, Button } from "xegavnj";
|
|
22
17
|
|
|
23
|
-
|
|
18
|
+
export default function App() {
|
|
19
|
+
return (
|
|
20
|
+
<ThemeProvider>
|
|
21
|
+
<AppHeader variant="primary" logo="DapoerRasa" />
|
|
22
|
+
<main style={{ padding: '2rem' }}>
|
|
23
|
+
<h1>Selamat Datang</h1>
|
|
24
|
+
<Button label="Klik Saya" onClick={() => alert('Halo!')} />
|
|
25
|
+
</main>
|
|
26
|
+
</ThemeProvider>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Komponen & Varian
|
|
32
|
+
|
|
33
|
+
### Button
|
|
34
|
+
Komponen tombol yang dapat disesuaikan sepenuhnya.
|
|
35
|
+
|
|
36
|
+
**Props:**
|
|
37
|
+
- `label`: Teks tombol.
|
|
38
|
+
- `bg`: Warna background.
|
|
39
|
+
- `icon`: Komponen icon (dari lucide-react).
|
|
40
|
+
- `variant`: (Custom melalui props style seperti bg, border).
|
|
41
|
+
|
|
42
|
+
### Card
|
|
43
|
+
Komponen kartu untuk menampilkan konten.
|
|
44
|
+
|
|
45
|
+
**Varian (`variant`):**
|
|
46
|
+
- `basic`: Kartu teks sederhana dengan border atas berwarna.
|
|
47
|
+
- `image`: Kartu dengan gambar di atas.
|
|
48
|
+
- `horizontal`: Kartu layout mendatar (gambar di kiri, konten di kanan).
|
|
49
|
+
|
|
50
|
+
**Props:**
|
|
51
|
+
- `title`, `description`, `image`, `buttonLabel`, `meta`.
|
|
52
|
+
|
|
53
|
+
### AppHeader
|
|
54
|
+
Header navigasi responsif.
|
|
55
|
+
|
|
56
|
+
**Varian (`variant`):**
|
|
57
|
+
- `primary`: Background solid (ungu), menu di kanan.
|
|
58
|
+
- `centered`: Logo besar di tengah, menu di bawahnya.
|
|
59
|
+
- `split`: Gradient background, menu dan tombol CTA terpisah.
|
|
60
|
+
|
|
61
|
+
**Props:**
|
|
62
|
+
- `logo`: Teks logo.
|
|
63
|
+
- `menuItems`: Array object `{ label, href }`.
|
|
64
|
+
- `showThemeToggle`: Boolean untuk menampilkan tombol ganti tema.
|
|
24
65
|
|
|
25
|
-
|
|
66
|
+
### AppSidebar
|
|
67
|
+
Sidebar navigasi untuk dashboard atau dokumentasi.
|
|
26
68
|
|
|
27
|
-
|
|
28
|
-
-
|
|
69
|
+
**Varian (`variant`):**
|
|
70
|
+
- `default`: List menu vertikal standar.
|
|
71
|
+
- `grouped`: Menu dikelompokkan berdasarkan kategori.
|
|
72
|
+
- `floating`: Sidebar melayang dengan sudut membulat.
|
|
29
73
|
|
|
30
|
-
|
|
74
|
+
**Props:**
|
|
75
|
+
- `title`: Judul sidebar.
|
|
76
|
+
- `items`: Array menu item.
|
|
77
|
+
- `groups`: Array group untuk varian grouped.
|
|
31
78
|
|
|
32
|
-
|
|
79
|
+
### AppFooter
|
|
80
|
+
Footer halaman.
|
|
33
81
|
|
|
34
|
-
|
|
82
|
+
**Varian (`variant`):**
|
|
83
|
+
- `primary`: Footer sederhana centered.
|
|
84
|
+
- `dark`: Background gelap dengan dukungan ikon sosmed.
|
|
85
|
+
- `split`: Layout terpisah untuk link tambahan.
|
|
35
86
|
|
|
36
|
-
|
|
87
|
+
**Props:**
|
|
88
|
+
- `copyright`: Teks hak cipta.
|
|
89
|
+
- `socials`: Boolean untuk ikon sosmed (hanya varian dark).
|
|
90
|
+
- `links`: Array link tambahan (hanya varian split).
|