@herca/rn-kit 0.1.0 → 0.1.1
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 +124 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,33 +1,142 @@
|
|
|
1
|
-
# @herca/
|
|
1
|
+
# @herca/ui-kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
UI Kit untuk pengembangan aplikasi internal **HerCa**.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Kit ini dirancang untuk mempercepat proses pengembangan antarmuka pengguna dengan pendekatan minimal terhadap penggunaan `style` manual. Beberapa komponen dibuat **fix dan konsisten** agar tampilan aplikasi memiliki nuansa yang seragam.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
```
|
|
7
|
+
> **Catatan:** Jika menggunakan UI Kit ini, **tidak disarankan untuk menambahkan style atau melakukan kustomisasi manual**.
|
|
8
|
+
> Untuk kebutuhan kustomisasi, gunakan konfigurasi `Theme` yang telah disediakan.
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
---
|
|
12
11
|
|
|
12
|
+
## ❌ Contoh Penggunaan yang Tidak Disarankan
|
|
13
13
|
|
|
14
14
|
```js
|
|
15
|
-
import {
|
|
15
|
+
import { View, Text, StyleSheet } from 'react-native';
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
return (
|
|
18
|
+
<View style={styles.container}>
|
|
19
|
+
<Text style={styles.text}>
|
|
20
|
+
Hello World
|
|
21
|
+
</Text>
|
|
22
|
+
</View>
|
|
23
|
+
);
|
|
18
24
|
|
|
19
|
-
const
|
|
25
|
+
const styles = StyleSheet.create({
|
|
26
|
+
container: {
|
|
27
|
+
padding: 10,
|
|
28
|
+
textAlign: 'center',
|
|
29
|
+
},
|
|
30
|
+
text: {
|
|
31
|
+
fontSize: 10,
|
|
32
|
+
fontWeight: 'bold',
|
|
33
|
+
},
|
|
34
|
+
});
|
|
20
35
|
```
|
|
21
36
|
|
|
37
|
+
## ✅ Contoh Penggunaan yang Disarankan
|
|
38
|
+
|
|
39
|
+
```js
|
|
40
|
+
import { Container, Center, Typography } from '@herca/ui-kit';
|
|
22
41
|
|
|
23
|
-
|
|
42
|
+
return (
|
|
43
|
+
<Container>
|
|
44
|
+
<Center>
|
|
45
|
+
<Typography variant="t2" weight="bold">
|
|
46
|
+
Hello World
|
|
47
|
+
</Typography>
|
|
48
|
+
</Center>
|
|
49
|
+
</Container>
|
|
50
|
+
);
|
|
51
|
+
```
|
|
24
52
|
|
|
25
|
-
|
|
53
|
+
---
|
|
26
54
|
|
|
27
|
-
##
|
|
55
|
+
## 📦 Instalasi
|
|
28
56
|
|
|
29
|
-
|
|
57
|
+
```bash
|
|
58
|
+
npm install @herca/ui-kit
|
|
59
|
+
```
|
|
30
60
|
|
|
31
61
|
---
|
|
32
62
|
|
|
33
|
-
|
|
63
|
+
## 🚀 Penggunaan
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
import { Button } from '@herca/ui-kit';
|
|
67
|
+
|
|
68
|
+
<Button title="Click Me" />
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## 📚 Komponen Tersedia
|
|
74
|
+
|
|
75
|
+
### 🔹 1. Input / Form Components
|
|
76
|
+
|
|
77
|
+
Komponen untuk mengumpulkan input dari pengguna.
|
|
78
|
+
|
|
79
|
+
- [Checkbox](./src/Checkbox/README.md)
|
|
80
|
+
- [Chip-(Select)](./src/Chip/README.md)
|
|
81
|
+
- [DatePicker](./src/DatePicker/README.md)
|
|
82
|
+
- [DropDown](./src/DropDown/README.md)
|
|
83
|
+
- [Input](./src/Input/README.md)
|
|
84
|
+
- [Input Password](./src/InputPassword/README.md)
|
|
85
|
+
- [Radio Button](./src/RadioButton/README.md)
|
|
86
|
+
- [Select](./src/Select/README.md)
|
|
87
|
+
- [Switch](./src/Switch/README.md)
|
|
88
|
+
- [TextArea](./src/TextArea/README.md)
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
### 🔹 2. Overlay
|
|
93
|
+
|
|
94
|
+
Komponen yang muncul di atas konten utama untuk interaksi sementara.
|
|
95
|
+
|
|
96
|
+
- [Bottom Sheet](./src/BottomSheet/README.md)
|
|
97
|
+
- [Modal](./src/Modal/README.md)
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
### 🔹 3. Disclosure / Navigation Components
|
|
102
|
+
|
|
103
|
+
Komponen untuk menyembunyikan atau menampilkan konten.
|
|
104
|
+
|
|
105
|
+
- [Accordion](./src/Accordion/README.md)
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
### 🔹 4. Feedback
|
|
110
|
+
|
|
111
|
+
Komponen untuk memberikan umpan balik atau informasi kepada pengguna.
|
|
112
|
+
|
|
113
|
+
- [Alert](./src/Alert/README.md)
|
|
114
|
+
- [Badge](./src/Badge/README.md)
|
|
115
|
+
- [Toast](./src/Toast/README.md)
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### 🔹 5. Data Display
|
|
120
|
+
|
|
121
|
+
Komponen untuk menampilkan informasi atau elemen visual.
|
|
122
|
+
|
|
123
|
+
- [Avatar](./src/Avatar/README_AVATAR.md)
|
|
124
|
+
- [AvatarGroup](./src/Alert/README_AVATARGROUP.md)
|
|
125
|
+
- [Calendar](./src/Calendar/README.md)
|
|
126
|
+
- [Color](./src/Color/README.md)
|
|
127
|
+
- [Card](./src/Card/README.md)
|
|
128
|
+
- [Drawing](./src/Drawing/README.md)
|
|
129
|
+
- [List](./src/List/README.md)
|
|
130
|
+
- [Typography](./src/Typography/README.md)
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
## 🤝 Kontribusi
|
|
135
|
+
|
|
136
|
+
Silakan baca panduan kontribusi pada [CONTRIBUTING.md](CONTRIBUTING.md) untuk mengetahui alur pengembangan dan kontribusi pada proyek ini.
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## 📄 Lisensi
|
|
141
|
+
|
|
142
|
+
MIT License
|