@herca/rn-kit 0.1.4 → 0.1.6
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 +5 -2
- package/lib/module/Accordion/README.md +14 -6
- package/lib/module/Alert/README.md +1 -1
- package/lib/module/List/README.md +49 -0
- package/lib/module/Modal/Modal.js +1 -1
- package/lib/module/Modal/Modal.js.map +1 -1
- package/lib/module/Modal/README.md +39 -0
- package/lib/module/Step/README.md +91 -0
- package/lib/module/Timeline/README.md +80 -0
- package/lib/module/Toast/README.md +71 -0
- package/lib/module/Ui/README_CARD.md +76 -0
- package/lib/module/Ui/README_CONTAINER.md +26 -0
- package/lib/module/index.js +0 -1
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/Accordion/README.md +14 -6
- package/src/Alert/README.md +1 -1
- package/src/List/README.md +49 -0
- package/src/Modal/Modal.tsx +2 -2
- package/src/Modal/README.md +39 -0
- package/src/Step/README.md +91 -0
- package/src/Timeline/README.md +80 -0
- package/src/Toast/README.md +71 -0
- package/src/Ui/README_CARD.md +76 -0
- package/src/Ui/README_CONTAINER.md +26 -0
- package/src/index.tsx +0 -1
- package/lib/module/SwitchButton/SwitchButton.js +0 -8
- package/lib/module/SwitchButton/SwitchButton.js.map +0 -1
- package/lib/module/TextArea/TextArea.js +0 -2
- package/lib/module/TextArea/TextArea.js.map +0 -1
- package/lib/typescript/src/SwitchButton/SwitchButton.d.ts +0 -2
- package/lib/typescript/src/SwitchButton/SwitchButton.d.ts.map +0 -1
- package/lib/typescript/src/TextArea/TextArea.d.ts +0 -1
- package/lib/typescript/src/TextArea/TextArea.d.ts.map +0 -1
- package/src/SwitchButton/SwitchButton.tsx +0 -5
- package/src/TextArea/TextArea.tsx +0 -0
- /package/lib/module/Input/{Input.md → README_INPUT.md} +0 -0
- /package/src/Input/{Input.md → README_INPUT.md} +0 -0
package/README.md
CHANGED
|
@@ -88,7 +88,8 @@ import { Button } from '@herca/rn-kit';
|
|
|
88
88
|
|
|
89
89
|
Komponen untuk mengumpulkan input dari pengguna.
|
|
90
90
|
|
|
91
|
-
- [Checkbox](./src/Checkbox/
|
|
91
|
+
- [Checkbox](./src/Checkbox/README_CHECKBOX.md)
|
|
92
|
+
- [Checkbox](./src/Checkbox/README_CHECKBOXLIST.md)
|
|
92
93
|
- [Chip-(Select)](./src/Chip/README.md)
|
|
93
94
|
- [DatePicker](./src/DatePicker/README.md)
|
|
94
95
|
- [DropDown](./src/DropDown/README.md)
|
|
@@ -115,6 +116,7 @@ Komponen yang muncul di atas konten utama untuk interaksi sementara.
|
|
|
115
116
|
Komponen untuk menyembunyikan atau menampilkan konten.
|
|
116
117
|
|
|
117
118
|
- [Accordion](./src/Accordion/README.md)
|
|
119
|
+
- [Step](./src/Step/README.md)
|
|
118
120
|
|
|
119
121
|
---
|
|
120
122
|
|
|
@@ -136,9 +138,10 @@ Komponen untuk menampilkan informasi atau elemen visual.
|
|
|
136
138
|
- [AvatarGroup](./src/Alert/README_AVATARGROUP.md)
|
|
137
139
|
- [Calendar](./src/Calendar/README.md)
|
|
138
140
|
- [Color](./src/Color/README.md)
|
|
139
|
-
- [Card](./src/
|
|
141
|
+
- [Card](./src/Ui/README_CARD.md)
|
|
140
142
|
- [Drawing](./src/Drawing/README.md)
|
|
141
143
|
- [List](./src/List/README.md)
|
|
144
|
+
- [Timeline](./src/Timeline/README.md)
|
|
142
145
|
- [Typography](./src/Typography/README.md)
|
|
143
146
|
|
|
144
147
|
---
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# 📂 Accordion
|
|
2
2
|
|
|
3
3
|
Komponen **Accordion** digunakan untuk menyembunyikan atau menampilkan konten secara dinamis. Biasanya digunakan untuk struktur seperti FAQ atau daftar konten bertingkat.
|
|
4
|
-
|
|
4
|
+
<img src="../../assets/doc/Accordion/Accordion.gif" alt="Deskripsi Alt" width="200" />
|
|
5
5
|
|
|
6
6
|
## 📦 USAGE
|
|
7
7
|
|
|
@@ -32,12 +32,20 @@ export default function FAQSection() {
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
## Props
|
|
35
|
+
### Accordion
|
|
36
|
+
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
37
|
+
| -------------- | --------------------------- | ----- | ------- | ------------------------------------------------------------------------------- |
|
|
38
|
+
| `children` | `ReactNode` | ✅ | - | Isi Accordion, harus terdiri dari satu atau beberapa `AccordionItem`. |
|
|
39
|
+
| `renderHeader` | `ReactNode \| null` | ❌ | `null` | Komponen untuk menampilkan header. Biasanya berupa `Text` atau komponen kustom. |
|
|
40
|
+
| `isOpen` | `boolean` | ❌ | `true` | Menentukan apakah Accordion terbuka saat pertama kali dirender. |
|
|
41
|
+
| `onCollapse` | `(isOpen: boolean) => void` | ❌ | - | Callback saat status terbuka/tutup berubah. |
|
|
42
|
+
|
|
43
|
+
### AccordionItem
|
|
44
|
+
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
45
|
+
| ---------- | ----------- | ----- | ------- | --------------------------------------------------------------- |
|
|
46
|
+
| `children` | `ReactNode` | ✅ | - | Konten yang akan ditampilkan saat Accordion dibuka. |
|
|
47
|
+
| `index` | `number` | ❌ | - | Untuk pengendalian item tertentu jika diperlukan secara manual. |
|
|
35
48
|
|
|
36
|
-
| props name | mandatory | types | default |
|
|
37
|
-
| -------------------- | --------- | ------- | -------------------------------------------------------- |
|
|
38
|
-
| header | | ReactNode | false |
|
|
39
|
-
| isOpen | | boolean | true |
|
|
40
|
-
| onCollapse | | (isOpen: boolean) => void | true | |
|
|
41
49
|
|
|
42
50
|
## Note
|
|
43
51
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# 📢 Alert Component
|
|
2
2
|
|
|
3
3
|
Komponen `Alert` digunakan untuk menampilkan pesan notifikasi dengan ikon, judul, dan pesan yang dapat dikustomisasi warnanya sesuai konteks (seperti *success*, *info*, *warning*, dll).
|
|
4
|
+
<img src="../../assets/doc/Alert/Alert.png" alt="Deskripsi Alt" width="200" />
|
|
4
5
|
|
|
5
|
-
|
|
6
6
|
## ✨ Fitur
|
|
7
7
|
|
|
8
8
|
- Menampilkan ikon notifikasi
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# 📋 List & ListItem
|
|
2
|
+
List menyajikan kumpulan elemen secara vertikal dengan tampilan kartu (border & radius), sedangkan ListItem mewakili baris individual yang dapat bersifat statis ataupun interaktif (dapat ditekan).
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
## 📦 Contoh Penggunaan
|
|
6
|
+
``` tsx
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { Text } from 'react-native';
|
|
9
|
+
import List from '@herca/rn-kit/List';
|
|
10
|
+
import ListItem from '@herca/rn-kit/List/ListItem';
|
|
11
|
+
|
|
12
|
+
export default function SettingMenu() {
|
|
13
|
+
const handleProfile = () => console.log('Go to Profile');
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<List>
|
|
17
|
+
<ListItem onPress={handleProfile}>
|
|
18
|
+
<Text>Profil</Text>
|
|
19
|
+
</ListItem>
|
|
20
|
+
|
|
21
|
+
<ListItem onPress={() => console.log('Go to Notifications')}>
|
|
22
|
+
<Text>Notifikasi</Text>
|
|
23
|
+
</ListItem>
|
|
24
|
+
|
|
25
|
+
<ListItem>
|
|
26
|
+
<Text>Tentang Aplikasi</Text>
|
|
27
|
+
</ListItem>
|
|
28
|
+
</List>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 🧩 API Reference
|
|
35
|
+
|
|
36
|
+
### List
|
|
37
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
38
|
+
| ---------- | ----------- | ----- | ------- | ------------------------------ |
|
|
39
|
+
| `children` | `ReactNode` | ✅ | — | Satu atau beberapa `ListItem`. |
|
|
40
|
+
| `style` | `ViewStyle` | ❌ | — | Gaya tambahan untuk container. |
|
|
41
|
+
|
|
42
|
+
### ListItem
|
|
43
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
44
|
+
| ---------- | ---------------------- | ----- | ------- | ------------------------------------------------------------------------- |
|
|
45
|
+
| `children` | `ReactNode` | ✅ | — | Konten baris, bebas teks, ikon, atau komponen lain. |
|
|
46
|
+
| `onPress` | `() => void` | ❌ | — | Jika diisi, baris menjadi dapat diklik (`TouchableOpacity`). |
|
|
47
|
+
| `style` | `StyleProp<ViewStyle>` | ❌ | — | Gaya tambahan untuk baris. |
|
|
48
|
+
| `isLast` | `boolean` | 🚫 | — | Diisi otomatis oleh `List` untuk menghapus border bawah pada baris akhir. |
|
|
49
|
+
| `index` | `number` | 🚫 | — | Tidak digunakan—disediakan untuk extensibility. |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","showModal","spring","toValue","useNativeDriver","damping","stiffness","start","hideModal","setTimeout","handleBackdropPress","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","hitSlop","top","bottom","left","right","contentContainer","create","flex","justifyContent","alignItems","position","height","borderRadius","overflow","select","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","zIndex","padding"],"sourceRoot":"../../../src","sources":["Modal/Modal.tsx"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","showModal","spring","toValue","useNativeDriver","damping","stiffness","start","hideModal","setTimeout","handleBackdropPress","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","hitSlop","top","bottom","left","right","contentContainer","create","flex","justifyContent","alignItems","position","height","borderRadius","overflow","select","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","zIndex","padding"],"sourceRoot":"../../../src","sources":["Modal/Modal.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# 🧊 ModalPopUp
|
|
2
|
+
ModalPopUp adalah komponen modal animasi dengan skala, dukungan backdrop, tombol close opsional, dan fleksibilitas ukuran serta gaya. Cocok untuk dialog, form, atau konfirmasi.
|
|
3
|
+
|
|
4
|
+
### 📦 Contoh Penggunaan
|
|
5
|
+
```tsx
|
|
6
|
+
import React, { useState } from 'react';
|
|
7
|
+
import { Text, Button } from 'react-native';
|
|
8
|
+
import ModalPopUp from '@herca/rn-kit/ModalPopUp';
|
|
9
|
+
|
|
10
|
+
export default function ExampleModal() {
|
|
11
|
+
const [visible, setVisible] = useState(false);
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<Button title="Buka Modal" onPress={() => setVisible(true)} />
|
|
16
|
+
<ModalPopUp isOpen={visible} onClose={() => setVisible(false)}>
|
|
17
|
+
<Text style={{ fontSize: 18 }}>Ini adalah isi modal</Text>
|
|
18
|
+
</ModalPopUp>
|
|
19
|
+
</>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 🧩 API Reference
|
|
26
|
+
|
|
27
|
+
| Prop | Type | Default | Keterangan |
|
|
28
|
+
| ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------- |
|
|
29
|
+
| `isOpen` | `boolean` | — | Status untuk membuka/tutup modal. |
|
|
30
|
+
| `onClose` | `(isOpen?: boolean) => void` | `undefined` | Callback saat modal ditutup (baik via backdrop atau tombol close). |
|
|
31
|
+
| `children` | `ReactNode` | — | Konten utama modal. |
|
|
32
|
+
| `backdrop` | `boolean` | `true` | Apakah backdrop gelap ditampilkan di belakang modal. |
|
|
33
|
+
| `closable` | `boolean` | `true` | Apakah tombol close (lingkaran kecil di kanan atas) ditampilkan. |
|
|
34
|
+
| `onRequestClose` | `() => void` | `undefined` | Callback khusus saat backdrop ditekan (jika ingin override behavior). |
|
|
35
|
+
| `bgColor` | `string` | `"#fff"` | Warna latar belakang modal. |
|
|
36
|
+
| `width` | `DimensionValue` | `"90%"` | Lebar modal. Bisa `px`, `%`, atau nilai `number`. |
|
|
37
|
+
| `height` | `DimensionValue` | `undefined` | Tinggi modal (opsional, gunakan scroll jika tidak cukup). |
|
|
38
|
+
| `containerStyle` | `ViewStyle` | `undefined` | Gaya tambahan untuk wrapper container (pusat layar). |
|
|
39
|
+
| `modalStyle` | `ViewStyle` | `undefined` | Gaya tambahan untuk modal box. |
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# 🪜 Step & StepItem
|
|
2
|
+
Komponen Step menampilkan alur proses bertahap (wizard / progress indicator) dengan header horizontal yang dapat digeser, serta area konten untuk setiap langkah.
|
|
3
|
+
Setiap titik/langkah diwakili oleh StepItem.
|
|
4
|
+
|
|
5
|
+
## 📦 Contoh Penggunaan
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React, { useState } from 'react';
|
|
9
|
+
import { View, Text } from 'react-native';
|
|
10
|
+
import Step from '@herca/rn-kit/Step';
|
|
11
|
+
import StepItem from '@herca/rn-kit/Step/StepItem';
|
|
12
|
+
|
|
13
|
+
export default function CheckoutWizard() {
|
|
14
|
+
const [currentStep, setCurrentStep] = useState(0);
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<Step current={currentStep} onChangeStep={(i) => setCurrentStep(i)}>
|
|
18
|
+
{/* Header & konten otomatis dipasangkan berdasarkan urutan */}
|
|
19
|
+
<StepItem title="Alamat">
|
|
20
|
+
<Text>Form Alamat Pengiriman</Text>
|
|
21
|
+
</StepItem>
|
|
22
|
+
|
|
23
|
+
<StepItem title="Pembayaran">
|
|
24
|
+
<Text>Metode Pembayaran</Text>
|
|
25
|
+
</StepItem>
|
|
26
|
+
|
|
27
|
+
<StepItem title="Konfirmasi">
|
|
28
|
+
<Text>Ringkasan & Konfirmasi Pesanan</Text>
|
|
29
|
+
</StepItem>
|
|
30
|
+
</Step>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
## 🧩 API Reference
|
|
36
|
+
|
|
37
|
+
### Step
|
|
38
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
39
|
+
| -------------- | -------------------------------------- | ----- | ------- | --------------------------------------------------------------------------- |
|
|
40
|
+
| `children` | `ReactElement<StepItemProps>` \| array | ✅ | — | Satu atau beberapa `StepItem`. |
|
|
41
|
+
| `current` | `number` | ✅ | — | Indeks langkah aktif (dimulai dari `0`). |
|
|
42
|
+
| `onChangeStep` | `(activeIndex: number) => void` | ✅ | — | Callback yang dipicu setiap kali nilai `current` berubah di dalam komponen. |
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### StepItem
|
|
46
|
+
|
|
47
|
+
Digunakan dua kali:
|
|
48
|
+
|
|
49
|
+
Sebagai header (ikon lingkaran + garis) – otomatis di‐render oleh Step.
|
|
50
|
+
|
|
51
|
+
Sebagai konten – ditampilkan bila index-nya sama dengan current.
|
|
52
|
+
|
|
53
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
54
|
+
| ---------- | ------------------------------------------------------------- | ----- | ----------- | ------------------------------------------------------------------ |
|
|
55
|
+
| `children` | `ReactNode` | ✅ | — | Konten yang muncul ketika langkah ini aktif. |
|
|
56
|
+
| `color` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌ | `'primary'` | Warna lingkaran & garis pada header. |
|
|
57
|
+
| `title` | `string` | ❌ | `''` | (Opsional) Judul untuk ditampilkan di header (bisa dikustom lagi). |
|
|
58
|
+
|
|
59
|
+
## ⚙️ Cara Kerja
|
|
60
|
+
|
|
61
|
+
1. Header Scrollable
|
|
62
|
+
|
|
63
|
+
- Lebar setiap header item fix (stepWidth = 100).
|
|
64
|
+
|
|
65
|
+
- Jika total lebar < perangkat, item otomatis di-center; jika lebih, bisa digeser horizontal.
|
|
66
|
+
|
|
67
|
+
- Ketika current berubah, ScrollView.scrollTo() memastikan item aktif selalu di tengah layar.
|
|
68
|
+
|
|
69
|
+
2. Lingkaran Status
|
|
70
|
+
|
|
71
|
+
- isActive → lingkaran berwarna solid (Color.info[500]).
|
|
72
|
+
|
|
73
|
+
- isCompleted (index < current) → gaya sama dengan aktif (bisa diubah jika ingin beda).
|
|
74
|
+
|
|
75
|
+
- Item terakhir otomatis tanpa garis setelah lingkaran.
|
|
76
|
+
|
|
77
|
+
3. Konten
|
|
78
|
+
|
|
79
|
+
- Hanya langkah aktif yang dirender di area konten (childrenArray[current]).
|
|
80
|
+
|
|
81
|
+
- Jika konten berupa FlatList, properti nestedScrollEnabled diaktifkan agar scrolling mulus di nested list.
|
|
82
|
+
|
|
83
|
+
## 💡 Tips & Praktik Terbaik
|
|
84
|
+
|
|
85
|
+
| Kebutuhan | Saran Implementasi |
|
|
86
|
+
| ------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
87
|
+
| **Navigasi Manual** | Ubah state `current` dari luar (`setCurrentStep`). |
|
|
88
|
+
| **Validasi Tiap Langkah** | Jalankan pengecekan sebelum menaikkan `current`; mis. pastikan form valid. |
|
|
89
|
+
| **Kustom Warna/Ikon** | Edit `COLOR_MAP` atau tambahkan prop `icon` pada `StepItem` jika ingin ikon berbeda di bullet. |
|
|
90
|
+
| **Langkah Dinamis** | Karena `children` berupa array, Anda bisa `.filter()` atau `.slice()` sebelum mem-pass ke `<Step>`. |
|
|
91
|
+
| **Tema Gelap** | Sesuaikan `Color.info[500]`, `Color.info[50]`, dll. |
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# 🗂️ Timeline & TimelineItem
|
|
2
|
+
Timeline menampilkan rangkaian peristiwa secara vertikal—mirip “stepper” atau “activity feed”.
|
|
3
|
+
Setiap node diwakili oleh TimelineItem yang menampilkan titik (bullet icon) dan garis vertikal terhubung.
|
|
4
|
+
|
|
5
|
+
## Contoh Penggunaan
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { Text } from 'react-native';
|
|
10
|
+
import Timeline from '@herca/rn-kit/Timeline';
|
|
11
|
+
import TimelineItem from '@herca/rn-kit/Timeline/TimelineItem';
|
|
12
|
+
|
|
13
|
+
export default function OrderHistory() {
|
|
14
|
+
return (
|
|
15
|
+
<Timeline>
|
|
16
|
+
<TimelineItem color="success">
|
|
17
|
+
<Text>Pesanan dibuat • 10 Jan 2025</Text>
|
|
18
|
+
</TimelineItem>
|
|
19
|
+
|
|
20
|
+
<TimelineItem color="primary">
|
|
21
|
+
<Text>Dikemas • 11 Jan 2025</Text>
|
|
22
|
+
</TimelineItem>
|
|
23
|
+
|
|
24
|
+
<TimelineItem color="warning">
|
|
25
|
+
<Text>Dalam pengiriman • 12 Jan 2025</Text>
|
|
26
|
+
</TimelineItem>
|
|
27
|
+
|
|
28
|
+
<TimelineItem color="danger">
|
|
29
|
+
<Text>Gagal diterima • 14 Jan 2025</Text>
|
|
30
|
+
</TimelineItem>
|
|
31
|
+
</Timeline>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Props
|
|
38
|
+
|
|
39
|
+
### Timeline
|
|
40
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
41
|
+
| ---------- | ----------- | ----- | ------- | ---------------------------------- |
|
|
42
|
+
| `children` | `ReactNode` | ✅ | — | Satu atau beberapa `TimelineItem`. |
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### TimelineItem
|
|
46
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
47
|
+
| ---------- | ------------------------------------------------------------- | ----- | ----------- | ----------------------------------------------------- |
|
|
48
|
+
| `children` | `ReactNode` | ✅ | — | Konten untuk node timeline: teks, ikon tambahan, dsb. |
|
|
49
|
+
| `color` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌ | `'primary'` | Skema warna titik (`RadioButton`) dan garis vertikal. |
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
## ⚙️ Cara Kerja
|
|
53
|
+
|
|
54
|
+
1. Bullet & Line
|
|
55
|
+
|
|
56
|
+
- Bullet dirender dengan komponen Icon (name="RadioButton") memakai warna dari color.
|
|
57
|
+
|
|
58
|
+
- Garis vertikal (borderLeftWidth: 1) menggunakan borderStyle: 'dashed'. Tingginya dihitung secara dinamis (contentHeight - 20) agar garis mulai tepat di bawah bullet.
|
|
59
|
+
|
|
60
|
+
2. Penghitungan Tinggi
|
|
61
|
+
|
|
62
|
+
- onLayout pada wrapper konten mengukur tinggi aktual item.
|
|
63
|
+
|
|
64
|
+
- Hasil pengukuran dipakai untuk menyesuaikan panjang garis, menjaga visual konsisten meskipun konten memiliki tinggi berbeda.
|
|
65
|
+
|
|
66
|
+
3. Layout
|
|
67
|
+
|
|
68
|
+
- Komponen dibangun dengan flexDirection: 'row', bullet di kiri, konten di kanan (flex: 1).
|
|
69
|
+
|
|
70
|
+
- Margin horizontal (marginRight: 8) menjaga jarak antara bullet dan konten.
|
|
71
|
+
|
|
72
|
+
## 💡 Tips Penggunaan
|
|
73
|
+
- Item Terakhir Tanpa Garis
|
|
74
|
+
Bila ingin menghilangkan garis pada item terakhir, buat prop opsional mis. isLast dan kondisikan tinggi garis menjadi 0.
|
|
75
|
+
|
|
76
|
+
- Interaktif
|
|
77
|
+
Anda bebas menambahkan tombol, TouchableOpacity, atau ikon status di dalam children.
|
|
78
|
+
|
|
79
|
+
- Kustomisasi Warna
|
|
80
|
+
Untuk warna tambahan, update COLOR_MAP dan tipe ColorKey pada TimelineItem.
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# 🌐 ToastProvider & useToast()
|
|
2
|
+
ToastProvider adalah context global untuk menampilkan notifikasi Toast dari bagian manapun dalam aplikasi Anda. Digunakan bersama dengan hook useToast() untuk memanggil toast secara imperatif.
|
|
3
|
+
|
|
4
|
+
## ⚙️ Setup
|
|
5
|
+
1. Bungkus aplikasi Anda dengan ToastProvider
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { ToastProvider } from '@herca/rn-kit';
|
|
10
|
+
|
|
11
|
+
export default function App() {
|
|
12
|
+
return (
|
|
13
|
+
<ToastProvider>
|
|
14
|
+
{/* Seluruh aplikasi Anda */}
|
|
15
|
+
</ToastProvider>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
2. Gunakan useToast() di dalam komponen
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import React from 'react';
|
|
26
|
+
import { Button } from '@herca/rn-kit';
|
|
27
|
+
import { useToast } from '@herca/rn-kit';
|
|
28
|
+
|
|
29
|
+
export default function Dashboard() {
|
|
30
|
+
const toast = useToast();
|
|
31
|
+
|
|
32
|
+
const handleSuccess = () => {
|
|
33
|
+
toast.show('Data berhasil disimpan', {
|
|
34
|
+
color: 'success',
|
|
35
|
+
icon: 'CheckCircle',
|
|
36
|
+
duration: 4000,
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
return <Button title="Simpan" onPress={handleSuccess} />;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 🧩 API Reference
|
|
46
|
+
### ✅ ToastProvider
|
|
47
|
+
Menyediakan context global toast. Harus membungkus komponen root Anda.
|
|
48
|
+
|
|
49
|
+
| Prop | Type | Required | Description |
|
|
50
|
+
| ---------- | ----------- | -------- | --------------------------------- |
|
|
51
|
+
| `children` | `ReactNode` | ✅ | Semua komponen di dalam aplikasi. |
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### useToast() Hook
|
|
55
|
+
| Function | Type |
|
|
56
|
+
| ------------------------- | --------------------------------------------------- |
|
|
57
|
+
| `show(message, options?)` | `(message: string, options?: ToastOptions) => void` |
|
|
58
|
+
|
|
59
|
+
### ToastOptions
|
|
60
|
+
| Option | Type | Default | Description |
|
|
61
|
+
| ---------- | ------------------ | ------------------ | ---------------------------------- |
|
|
62
|
+
| `color` | `ColorVariantType` | `'default'` | Warna latar belakang dan teks. |
|
|
63
|
+
| `icon` | `IconNameProps` | `'ExlamationMark'` | Ikon di samping pesan. |
|
|
64
|
+
| `duration` | `number` (ms) | `3000` | Waktu tampil Toast sebelum hilang. |
|
|
65
|
+
|
|
66
|
+
## ❗ Error Handling
|
|
67
|
+
Error: useToast must be used within a ToastProvider
|
|
68
|
+
```tsx
|
|
69
|
+
Error: useToast must be used within a ToastProvider
|
|
70
|
+
|
|
71
|
+
```
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# 🃏 Card
|
|
2
|
+
|
|
3
|
+
Komponen Card digunakan sebagai wadah tampilan (container) dengan desain yang konsisten seperti border, padding, dan optional background (warna atau gambar). Cocok digunakan untuk membungkus informasi atau konten secara visual terstruktur.
|
|
4
|
+
|
|
5
|
+
## Contoh Penggunaan
|
|
6
|
+
|
|
7
|
+
``` tsx
|
|
8
|
+
import { Card, Color, Container, Typography } from '@herca/rn-kit';
|
|
9
|
+
import { View } from 'react-native';
|
|
10
|
+
|
|
11
|
+
export default function CardScreen() {
|
|
12
|
+
return (
|
|
13
|
+
<View>
|
|
14
|
+
<Container>
|
|
15
|
+
<Typography variant="h4" weight="semibold">
|
|
16
|
+
Default
|
|
17
|
+
</Typography>
|
|
18
|
+
<Card>
|
|
19
|
+
<Typography color={Color.gray[800]} weight="bold">
|
|
20
|
+
What is Lorem Ipsum?
|
|
21
|
+
</Typography>
|
|
22
|
+
<Typography color={Color.gray[800]}>
|
|
23
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
24
|
+
industry. Lorem Ipsum has been the industry's standard dummy text
|
|
25
|
+
ever since the 1500s, when an unknown printer took a galley of type
|
|
26
|
+
and scrambled it to make a type specimen book. It has survived not
|
|
27
|
+
only five centuries, but also the leap into electronic typesetting,
|
|
28
|
+
remaining essentially unchanged.
|
|
29
|
+
</Typography>
|
|
30
|
+
</Card>
|
|
31
|
+
<Typography variant="h4" weight="semibold">
|
|
32
|
+
Background Image
|
|
33
|
+
</Typography>
|
|
34
|
+
<Card backgroundImage={require('../assets/sp_banner.png')}>
|
|
35
|
+
<Typography color={Color.base.white100} weight="bold">
|
|
36
|
+
What is Lorem Ipsum?
|
|
37
|
+
</Typography>
|
|
38
|
+
<Typography color={Color.base.white100}>
|
|
39
|
+
Lorem Ipsum is simply dummy text of
|
|
40
|
+
</Typography>
|
|
41
|
+
</Card>
|
|
42
|
+
<Typography variant="h4" weight="semibold">
|
|
43
|
+
Background Color
|
|
44
|
+
</Typography>
|
|
45
|
+
<Card backgroundColor={Color.primary[1000]}>
|
|
46
|
+
<Typography color={Color.base.white100} weight="bold">
|
|
47
|
+
What is Lorem Ipsum?
|
|
48
|
+
</Typography>
|
|
49
|
+
<Typography color={Color.base.white100}>
|
|
50
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
51
|
+
industry. Lorem Ipsum has been the industry's standard dummy text
|
|
52
|
+
ever since the 1500s,
|
|
53
|
+
</Typography>
|
|
54
|
+
</Card>
|
|
55
|
+
</Container>
|
|
56
|
+
</View>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Props
|
|
63
|
+
|
|
64
|
+
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
65
|
+
| ----------------- | ----------------------------- | ----- | ------- | ---------------------------------------------------- |
|
|
66
|
+
| `children` | `ReactNode` | ✅ | - | Komponen atau konten di dalam Card. |
|
|
67
|
+
| `style` | `StyleProp<ViewStyle>` | ❌ | - | Gaya tambahan untuk Card (padding, margin, dsb). |
|
|
68
|
+
| `backgroundImage` | `ImageSourcePropType` (`any`) | ❌ | - | Gambar latar belakang menggunakan `ImageBackground`. |
|
|
69
|
+
| `backgroundColor` | `string` | ❌ | `#fff` | Warna latar belakang Card. |
|
|
70
|
+
|
|
71
|
+
## Catatan
|
|
72
|
+
- Saat backgroundImage digunakan, ImageBackground akan membungkus children dan otomatis mengikuti styling dari Card.
|
|
73
|
+
|
|
74
|
+
- Jika Anda ingin menambahkan padding pada konten dalam Card, pastikan Anda menambahkannya di level children atau buat pembungkus tambahan jika padding default tidak cukup.
|
|
75
|
+
|
|
76
|
+
- Kompatibel dengan semua komponen React Native seperti Text, Image, TouchableOpacity, dll.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# 📦 Container
|
|
2
|
+
Komponen Container adalah pembungkus layout umum yang memberikan padding horizontal dan vertikal secara konsisten untuk konten di dalamnya. Cocok digunakan untuk membungkus seluruh tampilan atau bagian utama dari layar.
|
|
3
|
+
|
|
4
|
+
## 📐 Contoh Penggunaan
|
|
5
|
+
|
|
6
|
+
```tsx
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { Text } from 'react-native';
|
|
9
|
+
import Container from '@herca/rn-kit/Container';
|
|
10
|
+
|
|
11
|
+
export default function HomeScreen() {
|
|
12
|
+
return (
|
|
13
|
+
<Container>
|
|
14
|
+
<Text>Selamat datang di aplikasi kami!</Text>
|
|
15
|
+
</Container>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## props
|
|
23
|
+
| Prop | Tipe | Wajib | Default | Deskripsi |
|
|
24
|
+
| ---------- | ---------------------- | ----- | ------- | ------------------------------------------------------------ |
|
|
25
|
+
| `children` | `ReactNode` | ✅ | - | Komponen atau tampilan yang dibungkus di dalam container. |
|
|
26
|
+
| `style` | `StyleProp<ViewStyle>` | ❌ | - | Tambahan gaya jika ingin menimpa atau menambah gaya default. |
|
package/lib/module/index.js
CHANGED
|
@@ -30,7 +30,6 @@ export { default as Switch } from "./Input/Switch.js";
|
|
|
30
30
|
export { default as CheckBox } from "./CheckBox/CheckBox.js";
|
|
31
31
|
export { default as CheckBoxList } from "./CheckBox/CheckBoxList.js";
|
|
32
32
|
export { default as RadioButton } from "./RadioButton/RadioButton.js";
|
|
33
|
-
export { default as SwitchButton } from "./SwitchButton/SwitchButton.js";
|
|
34
33
|
export { default as Icon } from "./Icon/Icon.js";
|
|
35
34
|
export { default as Modal } from "./Modal/Modal.js";
|
|
36
35
|
export { default as Label } from "./Label/Label.js";
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","
|
|
1
|
+
{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","Icon","Modal","Label","List","ListItem","Loading","Avatar","AvatarGroup","Badge","Alert","Timeline","TimelineItem","Theme","Provider","useFooter","Drawing","Calendar","DatePicker","YearPicker","MonthPicker","TimePicker","Step","StepItem","Toast","TextArea","ToastProvider","useToast"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -28,7 +28,6 @@ export { default as Switch } from './Input/Switch';
|
|
|
28
28
|
export { default as CheckBox } from './CheckBox/CheckBox';
|
|
29
29
|
export { default as CheckBoxList } from './CheckBox/CheckBoxList';
|
|
30
30
|
export { default as RadioButton } from './RadioButton/RadioButton';
|
|
31
|
-
export { default as SwitchButton } from './SwitchButton/SwitchButton';
|
|
32
31
|
export { default as Icon } from './Icon/Icon';
|
|
33
32
|
export { default as Modal } from './Modal/Modal';
|
|
34
33
|
export { default as Label } from './Label/Label';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,YAAY,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@herca/rn-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "React Native UI Kit",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -52,9 +52,9 @@
|
|
|
52
52
|
"author": "metcore <metcore2@gmail.com> (https://github.com/metcore)",
|
|
53
53
|
"license": "MIT",
|
|
54
54
|
"bugs": {
|
|
55
|
-
"url": "https://github.com/metcore/
|
|
55
|
+
"url": "https://github.com/metcore/rn-kit/issues"
|
|
56
56
|
},
|
|
57
|
-
"homepage": "https://github.com/metcore/
|
|
57
|
+
"homepage": "https://github.com/metcore/rn-kit#readme",
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"registry": "https://registry.npmjs.org/"
|
|
60
60
|
},
|
package/src/Accordion/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# 📂 Accordion
|
|
2
2
|
|
|
3
3
|
Komponen **Accordion** digunakan untuk menyembunyikan atau menampilkan konten secara dinamis. Biasanya digunakan untuk struktur seperti FAQ atau daftar konten bertingkat.
|
|
4
|
-
|
|
4
|
+
<img src="../../assets/doc/Accordion/Accordion.gif" alt="Deskripsi Alt" width="200" />
|
|
5
5
|
|
|
6
6
|
## 📦 USAGE
|
|
7
7
|
|
|
@@ -32,12 +32,20 @@ export default function FAQSection() {
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
## Props
|
|
35
|
+
### Accordion
|
|
36
|
+
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
37
|
+
| -------------- | --------------------------- | ----- | ------- | ------------------------------------------------------------------------------- |
|
|
38
|
+
| `children` | `ReactNode` | ✅ | - | Isi Accordion, harus terdiri dari satu atau beberapa `AccordionItem`. |
|
|
39
|
+
| `renderHeader` | `ReactNode \| null` | ❌ | `null` | Komponen untuk menampilkan header. Biasanya berupa `Text` atau komponen kustom. |
|
|
40
|
+
| `isOpen` | `boolean` | ❌ | `true` | Menentukan apakah Accordion terbuka saat pertama kali dirender. |
|
|
41
|
+
| `onCollapse` | `(isOpen: boolean) => void` | ❌ | - | Callback saat status terbuka/tutup berubah. |
|
|
42
|
+
|
|
43
|
+
### AccordionItem
|
|
44
|
+
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
45
|
+
| ---------- | ----------- | ----- | ------- | --------------------------------------------------------------- |
|
|
46
|
+
| `children` | `ReactNode` | ✅ | - | Konten yang akan ditampilkan saat Accordion dibuka. |
|
|
47
|
+
| `index` | `number` | ❌ | - | Untuk pengendalian item tertentu jika diperlukan secara manual. |
|
|
35
48
|
|
|
36
|
-
| props name | mandatory | types | default |
|
|
37
|
-
| -------------------- | --------- | ------- | -------------------------------------------------------- |
|
|
38
|
-
| header | | ReactNode | false |
|
|
39
|
-
| isOpen | | boolean | true |
|
|
40
|
-
| onCollapse | | (isOpen: boolean) => void | true | |
|
|
41
49
|
|
|
42
50
|
## Note
|
|
43
51
|
|
package/src/Alert/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# 📢 Alert Component
|
|
2
2
|
|
|
3
3
|
Komponen `Alert` digunakan untuk menampilkan pesan notifikasi dengan ikon, judul, dan pesan yang dapat dikustomisasi warnanya sesuai konteks (seperti *success*, *info*, *warning*, dll).
|
|
4
|
+
<img src="../../assets/doc/Alert/Alert.png" alt="Deskripsi Alt" width="200" />
|
|
4
5
|
|
|
5
|
-
|
|
6
6
|
## ✨ Fitur
|
|
7
7
|
|
|
8
8
|
- Menampilkan ikon notifikasi
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# 📋 List & ListItem
|
|
2
|
+
List menyajikan kumpulan elemen secara vertikal dengan tampilan kartu (border & radius), sedangkan ListItem mewakili baris individual yang dapat bersifat statis ataupun interaktif (dapat ditekan).
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
## 📦 Contoh Penggunaan
|
|
6
|
+
``` tsx
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { Text } from 'react-native';
|
|
9
|
+
import List from '@herca/rn-kit/List';
|
|
10
|
+
import ListItem from '@herca/rn-kit/List/ListItem';
|
|
11
|
+
|
|
12
|
+
export default function SettingMenu() {
|
|
13
|
+
const handleProfile = () => console.log('Go to Profile');
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<List>
|
|
17
|
+
<ListItem onPress={handleProfile}>
|
|
18
|
+
<Text>Profil</Text>
|
|
19
|
+
</ListItem>
|
|
20
|
+
|
|
21
|
+
<ListItem onPress={() => console.log('Go to Notifications')}>
|
|
22
|
+
<Text>Notifikasi</Text>
|
|
23
|
+
</ListItem>
|
|
24
|
+
|
|
25
|
+
<ListItem>
|
|
26
|
+
<Text>Tentang Aplikasi</Text>
|
|
27
|
+
</ListItem>
|
|
28
|
+
</List>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 🧩 API Reference
|
|
35
|
+
|
|
36
|
+
### List
|
|
37
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
38
|
+
| ---------- | ----------- | ----- | ------- | ------------------------------ |
|
|
39
|
+
| `children` | `ReactNode` | ✅ | — | Satu atau beberapa `ListItem`. |
|
|
40
|
+
| `style` | `ViewStyle` | ❌ | — | Gaya tambahan untuk container. |
|
|
41
|
+
|
|
42
|
+
### ListItem
|
|
43
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
44
|
+
| ---------- | ---------------------- | ----- | ------- | ------------------------------------------------------------------------- |
|
|
45
|
+
| `children` | `ReactNode` | ✅ | — | Konten baris, bebas teks, ikon, atau komponen lain. |
|
|
46
|
+
| `onPress` | `() => void` | ❌ | — | Jika diisi, baris menjadi dapat diklik (`TouchableOpacity`). |
|
|
47
|
+
| `style` | `StyleProp<ViewStyle>` | ❌ | — | Gaya tambahan untuk baris. |
|
|
48
|
+
| `isLast` | `boolean` | 🚫 | — | Diisi otomatis oleh `List` untuk menghapus border bawah pada baris akhir. |
|
|
49
|
+
| `index` | `number` | 🚫 | — | Tidak digunakan—disediakan untuk extensibility. |
|
package/src/Modal/Modal.tsx
CHANGED
|
@@ -20,7 +20,7 @@ interface ModalPopUpProps {
|
|
|
20
20
|
onRequestClose?: () => void;
|
|
21
21
|
bgColor?: string;
|
|
22
22
|
width?: DimensionValue;
|
|
23
|
-
height?: DimensionValue;
|
|
23
|
+
height?: DimensionValue;
|
|
24
24
|
containerStyle?: ViewStyle;
|
|
25
25
|
modalStyle?: ViewStyle;
|
|
26
26
|
}
|
|
@@ -172,7 +172,7 @@ const styles = StyleSheet.create({
|
|
|
172
172
|
backgroundColor: '#ccc',
|
|
173
173
|
},
|
|
174
174
|
contentContainer: {
|
|
175
|
-
padding: 16,
|
|
175
|
+
padding: 16,
|
|
176
176
|
},
|
|
177
177
|
});
|
|
178
178
|
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# 🧊 ModalPopUp
|
|
2
|
+
ModalPopUp adalah komponen modal animasi dengan skala, dukungan backdrop, tombol close opsional, dan fleksibilitas ukuran serta gaya. Cocok untuk dialog, form, atau konfirmasi.
|
|
3
|
+
|
|
4
|
+
### 📦 Contoh Penggunaan
|
|
5
|
+
```tsx
|
|
6
|
+
import React, { useState } from 'react';
|
|
7
|
+
import { Text, Button } from 'react-native';
|
|
8
|
+
import ModalPopUp from '@herca/rn-kit/ModalPopUp';
|
|
9
|
+
|
|
10
|
+
export default function ExampleModal() {
|
|
11
|
+
const [visible, setVisible] = useState(false);
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<Button title="Buka Modal" onPress={() => setVisible(true)} />
|
|
16
|
+
<ModalPopUp isOpen={visible} onClose={() => setVisible(false)}>
|
|
17
|
+
<Text style={{ fontSize: 18 }}>Ini adalah isi modal</Text>
|
|
18
|
+
</ModalPopUp>
|
|
19
|
+
</>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 🧩 API Reference
|
|
26
|
+
|
|
27
|
+
| Prop | Type | Default | Keterangan |
|
|
28
|
+
| ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------- |
|
|
29
|
+
| `isOpen` | `boolean` | — | Status untuk membuka/tutup modal. |
|
|
30
|
+
| `onClose` | `(isOpen?: boolean) => void` | `undefined` | Callback saat modal ditutup (baik via backdrop atau tombol close). |
|
|
31
|
+
| `children` | `ReactNode` | — | Konten utama modal. |
|
|
32
|
+
| `backdrop` | `boolean` | `true` | Apakah backdrop gelap ditampilkan di belakang modal. |
|
|
33
|
+
| `closable` | `boolean` | `true` | Apakah tombol close (lingkaran kecil di kanan atas) ditampilkan. |
|
|
34
|
+
| `onRequestClose` | `() => void` | `undefined` | Callback khusus saat backdrop ditekan (jika ingin override behavior). |
|
|
35
|
+
| `bgColor` | `string` | `"#fff"` | Warna latar belakang modal. |
|
|
36
|
+
| `width` | `DimensionValue` | `"90%"` | Lebar modal. Bisa `px`, `%`, atau nilai `number`. |
|
|
37
|
+
| `height` | `DimensionValue` | `undefined` | Tinggi modal (opsional, gunakan scroll jika tidak cukup). |
|
|
38
|
+
| `containerStyle` | `ViewStyle` | `undefined` | Gaya tambahan untuk wrapper container (pusat layar). |
|
|
39
|
+
| `modalStyle` | `ViewStyle` | `undefined` | Gaya tambahan untuk modal box. |
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# 🪜 Step & StepItem
|
|
2
|
+
Komponen Step menampilkan alur proses bertahap (wizard / progress indicator) dengan header horizontal yang dapat digeser, serta area konten untuk setiap langkah.
|
|
3
|
+
Setiap titik/langkah diwakili oleh StepItem.
|
|
4
|
+
|
|
5
|
+
## 📦 Contoh Penggunaan
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React, { useState } from 'react';
|
|
9
|
+
import { View, Text } from 'react-native';
|
|
10
|
+
import Step from '@herca/rn-kit/Step';
|
|
11
|
+
import StepItem from '@herca/rn-kit/Step/StepItem';
|
|
12
|
+
|
|
13
|
+
export default function CheckoutWizard() {
|
|
14
|
+
const [currentStep, setCurrentStep] = useState(0);
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<Step current={currentStep} onChangeStep={(i) => setCurrentStep(i)}>
|
|
18
|
+
{/* Header & konten otomatis dipasangkan berdasarkan urutan */}
|
|
19
|
+
<StepItem title="Alamat">
|
|
20
|
+
<Text>Form Alamat Pengiriman</Text>
|
|
21
|
+
</StepItem>
|
|
22
|
+
|
|
23
|
+
<StepItem title="Pembayaran">
|
|
24
|
+
<Text>Metode Pembayaran</Text>
|
|
25
|
+
</StepItem>
|
|
26
|
+
|
|
27
|
+
<StepItem title="Konfirmasi">
|
|
28
|
+
<Text>Ringkasan & Konfirmasi Pesanan</Text>
|
|
29
|
+
</StepItem>
|
|
30
|
+
</Step>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
## 🧩 API Reference
|
|
36
|
+
|
|
37
|
+
### Step
|
|
38
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
39
|
+
| -------------- | -------------------------------------- | ----- | ------- | --------------------------------------------------------------------------- |
|
|
40
|
+
| `children` | `ReactElement<StepItemProps>` \| array | ✅ | — | Satu atau beberapa `StepItem`. |
|
|
41
|
+
| `current` | `number` | ✅ | — | Indeks langkah aktif (dimulai dari `0`). |
|
|
42
|
+
| `onChangeStep` | `(activeIndex: number) => void` | ✅ | — | Callback yang dipicu setiap kali nilai `current` berubah di dalam komponen. |
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### StepItem
|
|
46
|
+
|
|
47
|
+
Digunakan dua kali:
|
|
48
|
+
|
|
49
|
+
Sebagai header (ikon lingkaran + garis) – otomatis di‐render oleh Step.
|
|
50
|
+
|
|
51
|
+
Sebagai konten – ditampilkan bila index-nya sama dengan current.
|
|
52
|
+
|
|
53
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
54
|
+
| ---------- | ------------------------------------------------------------- | ----- | ----------- | ------------------------------------------------------------------ |
|
|
55
|
+
| `children` | `ReactNode` | ✅ | — | Konten yang muncul ketika langkah ini aktif. |
|
|
56
|
+
| `color` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌ | `'primary'` | Warna lingkaran & garis pada header. |
|
|
57
|
+
| `title` | `string` | ❌ | `''` | (Opsional) Judul untuk ditampilkan di header (bisa dikustom lagi). |
|
|
58
|
+
|
|
59
|
+
## ⚙️ Cara Kerja
|
|
60
|
+
|
|
61
|
+
1. Header Scrollable
|
|
62
|
+
|
|
63
|
+
- Lebar setiap header item fix (stepWidth = 100).
|
|
64
|
+
|
|
65
|
+
- Jika total lebar < perangkat, item otomatis di-center; jika lebih, bisa digeser horizontal.
|
|
66
|
+
|
|
67
|
+
- Ketika current berubah, ScrollView.scrollTo() memastikan item aktif selalu di tengah layar.
|
|
68
|
+
|
|
69
|
+
2. Lingkaran Status
|
|
70
|
+
|
|
71
|
+
- isActive → lingkaran berwarna solid (Color.info[500]).
|
|
72
|
+
|
|
73
|
+
- isCompleted (index < current) → gaya sama dengan aktif (bisa diubah jika ingin beda).
|
|
74
|
+
|
|
75
|
+
- Item terakhir otomatis tanpa garis setelah lingkaran.
|
|
76
|
+
|
|
77
|
+
3. Konten
|
|
78
|
+
|
|
79
|
+
- Hanya langkah aktif yang dirender di area konten (childrenArray[current]).
|
|
80
|
+
|
|
81
|
+
- Jika konten berupa FlatList, properti nestedScrollEnabled diaktifkan agar scrolling mulus di nested list.
|
|
82
|
+
|
|
83
|
+
## 💡 Tips & Praktik Terbaik
|
|
84
|
+
|
|
85
|
+
| Kebutuhan | Saran Implementasi |
|
|
86
|
+
| ------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
87
|
+
| **Navigasi Manual** | Ubah state `current` dari luar (`setCurrentStep`). |
|
|
88
|
+
| **Validasi Tiap Langkah** | Jalankan pengecekan sebelum menaikkan `current`; mis. pastikan form valid. |
|
|
89
|
+
| **Kustom Warna/Ikon** | Edit `COLOR_MAP` atau tambahkan prop `icon` pada `StepItem` jika ingin ikon berbeda di bullet. |
|
|
90
|
+
| **Langkah Dinamis** | Karena `children` berupa array, Anda bisa `.filter()` atau `.slice()` sebelum mem-pass ke `<Step>`. |
|
|
91
|
+
| **Tema Gelap** | Sesuaikan `Color.info[500]`, `Color.info[50]`, dll. |
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# 🗂️ Timeline & TimelineItem
|
|
2
|
+
Timeline menampilkan rangkaian peristiwa secara vertikal—mirip “stepper” atau “activity feed”.
|
|
3
|
+
Setiap node diwakili oleh TimelineItem yang menampilkan titik (bullet icon) dan garis vertikal terhubung.
|
|
4
|
+
|
|
5
|
+
## Contoh Penggunaan
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { Text } from 'react-native';
|
|
10
|
+
import Timeline from '@herca/rn-kit/Timeline';
|
|
11
|
+
import TimelineItem from '@herca/rn-kit/Timeline/TimelineItem';
|
|
12
|
+
|
|
13
|
+
export default function OrderHistory() {
|
|
14
|
+
return (
|
|
15
|
+
<Timeline>
|
|
16
|
+
<TimelineItem color="success">
|
|
17
|
+
<Text>Pesanan dibuat • 10 Jan 2025</Text>
|
|
18
|
+
</TimelineItem>
|
|
19
|
+
|
|
20
|
+
<TimelineItem color="primary">
|
|
21
|
+
<Text>Dikemas • 11 Jan 2025</Text>
|
|
22
|
+
</TimelineItem>
|
|
23
|
+
|
|
24
|
+
<TimelineItem color="warning">
|
|
25
|
+
<Text>Dalam pengiriman • 12 Jan 2025</Text>
|
|
26
|
+
</TimelineItem>
|
|
27
|
+
|
|
28
|
+
<TimelineItem color="danger">
|
|
29
|
+
<Text>Gagal diterima • 14 Jan 2025</Text>
|
|
30
|
+
</TimelineItem>
|
|
31
|
+
</Timeline>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Props
|
|
38
|
+
|
|
39
|
+
### Timeline
|
|
40
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
41
|
+
| ---------- | ----------- | ----- | ------- | ---------------------------------- |
|
|
42
|
+
| `children` | `ReactNode` | ✅ | — | Satu atau beberapa `TimelineItem`. |
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### TimelineItem
|
|
46
|
+
| Prop | Type | Wajib | Default | Deskripsi |
|
|
47
|
+
| ---------- | ------------------------------------------------------------- | ----- | ----------- | ----------------------------------------------------- |
|
|
48
|
+
| `children` | `ReactNode` | ✅ | — | Konten untuk node timeline: teks, ikon tambahan, dsb. |
|
|
49
|
+
| `color` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌ | `'primary'` | Skema warna titik (`RadioButton`) dan garis vertikal. |
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
## ⚙️ Cara Kerja
|
|
53
|
+
|
|
54
|
+
1. Bullet & Line
|
|
55
|
+
|
|
56
|
+
- Bullet dirender dengan komponen Icon (name="RadioButton") memakai warna dari color.
|
|
57
|
+
|
|
58
|
+
- Garis vertikal (borderLeftWidth: 1) menggunakan borderStyle: 'dashed'. Tingginya dihitung secara dinamis (contentHeight - 20) agar garis mulai tepat di bawah bullet.
|
|
59
|
+
|
|
60
|
+
2. Penghitungan Tinggi
|
|
61
|
+
|
|
62
|
+
- onLayout pada wrapper konten mengukur tinggi aktual item.
|
|
63
|
+
|
|
64
|
+
- Hasil pengukuran dipakai untuk menyesuaikan panjang garis, menjaga visual konsisten meskipun konten memiliki tinggi berbeda.
|
|
65
|
+
|
|
66
|
+
3. Layout
|
|
67
|
+
|
|
68
|
+
- Komponen dibangun dengan flexDirection: 'row', bullet di kiri, konten di kanan (flex: 1).
|
|
69
|
+
|
|
70
|
+
- Margin horizontal (marginRight: 8) menjaga jarak antara bullet dan konten.
|
|
71
|
+
|
|
72
|
+
## 💡 Tips Penggunaan
|
|
73
|
+
- Item Terakhir Tanpa Garis
|
|
74
|
+
Bila ingin menghilangkan garis pada item terakhir, buat prop opsional mis. isLast dan kondisikan tinggi garis menjadi 0.
|
|
75
|
+
|
|
76
|
+
- Interaktif
|
|
77
|
+
Anda bebas menambahkan tombol, TouchableOpacity, atau ikon status di dalam children.
|
|
78
|
+
|
|
79
|
+
- Kustomisasi Warna
|
|
80
|
+
Untuk warna tambahan, update COLOR_MAP dan tipe ColorKey pada TimelineItem.
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# 🌐 ToastProvider & useToast()
|
|
2
|
+
ToastProvider adalah context global untuk menampilkan notifikasi Toast dari bagian manapun dalam aplikasi Anda. Digunakan bersama dengan hook useToast() untuk memanggil toast secara imperatif.
|
|
3
|
+
|
|
4
|
+
## ⚙️ Setup
|
|
5
|
+
1. Bungkus aplikasi Anda dengan ToastProvider
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { ToastProvider } from '@herca/rn-kit';
|
|
10
|
+
|
|
11
|
+
export default function App() {
|
|
12
|
+
return (
|
|
13
|
+
<ToastProvider>
|
|
14
|
+
{/* Seluruh aplikasi Anda */}
|
|
15
|
+
</ToastProvider>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
2. Gunakan useToast() di dalam komponen
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import React from 'react';
|
|
26
|
+
import { Button } from '@herca/rn-kit';
|
|
27
|
+
import { useToast } from '@herca/rn-kit';
|
|
28
|
+
|
|
29
|
+
export default function Dashboard() {
|
|
30
|
+
const toast = useToast();
|
|
31
|
+
|
|
32
|
+
const handleSuccess = () => {
|
|
33
|
+
toast.show('Data berhasil disimpan', {
|
|
34
|
+
color: 'success',
|
|
35
|
+
icon: 'CheckCircle',
|
|
36
|
+
duration: 4000,
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
return <Button title="Simpan" onPress={handleSuccess} />;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 🧩 API Reference
|
|
46
|
+
### ✅ ToastProvider
|
|
47
|
+
Menyediakan context global toast. Harus membungkus komponen root Anda.
|
|
48
|
+
|
|
49
|
+
| Prop | Type | Required | Description |
|
|
50
|
+
| ---------- | ----------- | -------- | --------------------------------- |
|
|
51
|
+
| `children` | `ReactNode` | ✅ | Semua komponen di dalam aplikasi. |
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### useToast() Hook
|
|
55
|
+
| Function | Type |
|
|
56
|
+
| ------------------------- | --------------------------------------------------- |
|
|
57
|
+
| `show(message, options?)` | `(message: string, options?: ToastOptions) => void` |
|
|
58
|
+
|
|
59
|
+
### ToastOptions
|
|
60
|
+
| Option | Type | Default | Description |
|
|
61
|
+
| ---------- | ------------------ | ------------------ | ---------------------------------- |
|
|
62
|
+
| `color` | `ColorVariantType` | `'default'` | Warna latar belakang dan teks. |
|
|
63
|
+
| `icon` | `IconNameProps` | `'ExlamationMark'` | Ikon di samping pesan. |
|
|
64
|
+
| `duration` | `number` (ms) | `3000` | Waktu tampil Toast sebelum hilang. |
|
|
65
|
+
|
|
66
|
+
## ❗ Error Handling
|
|
67
|
+
Error: useToast must be used within a ToastProvider
|
|
68
|
+
```tsx
|
|
69
|
+
Error: useToast must be used within a ToastProvider
|
|
70
|
+
|
|
71
|
+
```
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# 🃏 Card
|
|
2
|
+
|
|
3
|
+
Komponen Card digunakan sebagai wadah tampilan (container) dengan desain yang konsisten seperti border, padding, dan optional background (warna atau gambar). Cocok digunakan untuk membungkus informasi atau konten secara visual terstruktur.
|
|
4
|
+
|
|
5
|
+
## Contoh Penggunaan
|
|
6
|
+
|
|
7
|
+
``` tsx
|
|
8
|
+
import { Card, Color, Container, Typography } from '@herca/rn-kit';
|
|
9
|
+
import { View } from 'react-native';
|
|
10
|
+
|
|
11
|
+
export default function CardScreen() {
|
|
12
|
+
return (
|
|
13
|
+
<View>
|
|
14
|
+
<Container>
|
|
15
|
+
<Typography variant="h4" weight="semibold">
|
|
16
|
+
Default
|
|
17
|
+
</Typography>
|
|
18
|
+
<Card>
|
|
19
|
+
<Typography color={Color.gray[800]} weight="bold">
|
|
20
|
+
What is Lorem Ipsum?
|
|
21
|
+
</Typography>
|
|
22
|
+
<Typography color={Color.gray[800]}>
|
|
23
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
24
|
+
industry. Lorem Ipsum has been the industry's standard dummy text
|
|
25
|
+
ever since the 1500s, when an unknown printer took a galley of type
|
|
26
|
+
and scrambled it to make a type specimen book. It has survived not
|
|
27
|
+
only five centuries, but also the leap into electronic typesetting,
|
|
28
|
+
remaining essentially unchanged.
|
|
29
|
+
</Typography>
|
|
30
|
+
</Card>
|
|
31
|
+
<Typography variant="h4" weight="semibold">
|
|
32
|
+
Background Image
|
|
33
|
+
</Typography>
|
|
34
|
+
<Card backgroundImage={require('../assets/sp_banner.png')}>
|
|
35
|
+
<Typography color={Color.base.white100} weight="bold">
|
|
36
|
+
What is Lorem Ipsum?
|
|
37
|
+
</Typography>
|
|
38
|
+
<Typography color={Color.base.white100}>
|
|
39
|
+
Lorem Ipsum is simply dummy text of
|
|
40
|
+
</Typography>
|
|
41
|
+
</Card>
|
|
42
|
+
<Typography variant="h4" weight="semibold">
|
|
43
|
+
Background Color
|
|
44
|
+
</Typography>
|
|
45
|
+
<Card backgroundColor={Color.primary[1000]}>
|
|
46
|
+
<Typography color={Color.base.white100} weight="bold">
|
|
47
|
+
What is Lorem Ipsum?
|
|
48
|
+
</Typography>
|
|
49
|
+
<Typography color={Color.base.white100}>
|
|
50
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
51
|
+
industry. Lorem Ipsum has been the industry's standard dummy text
|
|
52
|
+
ever since the 1500s,
|
|
53
|
+
</Typography>
|
|
54
|
+
</Card>
|
|
55
|
+
</Container>
|
|
56
|
+
</View>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Props
|
|
63
|
+
|
|
64
|
+
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
65
|
+
| ----------------- | ----------------------------- | ----- | ------- | ---------------------------------------------------- |
|
|
66
|
+
| `children` | `ReactNode` | ✅ | - | Komponen atau konten di dalam Card. |
|
|
67
|
+
| `style` | `StyleProp<ViewStyle>` | ❌ | - | Gaya tambahan untuk Card (padding, margin, dsb). |
|
|
68
|
+
| `backgroundImage` | `ImageSourcePropType` (`any`) | ❌ | - | Gambar latar belakang menggunakan `ImageBackground`. |
|
|
69
|
+
| `backgroundColor` | `string` | ❌ | `#fff` | Warna latar belakang Card. |
|
|
70
|
+
|
|
71
|
+
## Catatan
|
|
72
|
+
- Saat backgroundImage digunakan, ImageBackground akan membungkus children dan otomatis mengikuti styling dari Card.
|
|
73
|
+
|
|
74
|
+
- Jika Anda ingin menambahkan padding pada konten dalam Card, pastikan Anda menambahkannya di level children atau buat pembungkus tambahan jika padding default tidak cukup.
|
|
75
|
+
|
|
76
|
+
- Kompatibel dengan semua komponen React Native seperti Text, Image, TouchableOpacity, dll.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# 📦 Container
|
|
2
|
+
Komponen Container adalah pembungkus layout umum yang memberikan padding horizontal dan vertikal secara konsisten untuk konten di dalamnya. Cocok digunakan untuk membungkus seluruh tampilan atau bagian utama dari layar.
|
|
3
|
+
|
|
4
|
+
## 📐 Contoh Penggunaan
|
|
5
|
+
|
|
6
|
+
```tsx
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { Text } from 'react-native';
|
|
9
|
+
import Container from '@herca/rn-kit/Container';
|
|
10
|
+
|
|
11
|
+
export default function HomeScreen() {
|
|
12
|
+
return (
|
|
13
|
+
<Container>
|
|
14
|
+
<Text>Selamat datang di aplikasi kami!</Text>
|
|
15
|
+
</Container>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## props
|
|
23
|
+
| Prop | Tipe | Wajib | Default | Deskripsi |
|
|
24
|
+
| ---------- | ---------------------- | ----- | ------- | ------------------------------------------------------------ |
|
|
25
|
+
| `children` | `ReactNode` | ✅ | - | Komponen atau tampilan yang dibungkus di dalam container. |
|
|
26
|
+
| `style` | `StyleProp<ViewStyle>` | ❌ | - | Tambahan gaya jika ingin menimpa atau menambah gaya default. |
|
package/src/index.tsx
CHANGED
|
@@ -37,7 +37,6 @@ export { default as Switch } from './Input/Switch';
|
|
|
37
37
|
export { default as CheckBox } from './CheckBox/CheckBox';
|
|
38
38
|
export { default as CheckBoxList } from './CheckBox/CheckBoxList';
|
|
39
39
|
export { default as RadioButton } from './RadioButton/RadioButton';
|
|
40
|
-
export { default as SwitchButton } from './SwitchButton/SwitchButton';
|
|
41
40
|
export { default as Icon } from './Icon/Icon';
|
|
42
41
|
export { default as Modal } from './Modal/Modal';
|
|
43
42
|
export { default as Label } from './Label/Label';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["View","jsx","_jsx","SwitchButton"],"sourceRoot":"../../../src","sources":["SwitchButton/SwitchButton.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,eAAe,SAASC,YAAYA,CAAA,EAAG;EACrC,oBAAOD,IAAA,CAACF,IAAI,IAAO,CAAC;AACtB","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["TextArea/TextArea.tsx"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SwitchButton.d.ts","sourceRoot":"","sources":["../../../../src/SwitchButton/SwitchButton.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAEnC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=TextArea.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/TextArea/TextArea.tsx"],"names":[],"mappings":""}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|