@herca/rn-kit 0.1.14 → 0.1.15
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 +1 -0
- package/lib/module/Drawing/README.md +27 -2
- package/lib/module/Icon/README.md +73 -0
- package/package.json +27 -17
- package/src/Drawing/README.md +27 -2
- package/src/Icon/README.md +73 -0
package/README.md
CHANGED
|
@@ -163,6 +163,7 @@ Komponen untuk menampilkan informasi atau elemen visual.
|
|
|
163
163
|
- [Devider](./src/Ui/README_DEVIDER.md)
|
|
164
164
|
- [Drawing](./src/Drawing/README.md)
|
|
165
165
|
- [Footer](./src/Ui/README_FOOTER.md)
|
|
166
|
+
- [Icon](./src/Icon/README.md)
|
|
166
167
|
- [List](./src/List/README.md)
|
|
167
168
|
- [Timeline](./src/Timeline/README.md)
|
|
168
169
|
- [Typography](./src/Typography/README.md)
|
|
@@ -1,6 +1,31 @@
|
|
|
1
|
-
# 📅 Drawing
|
|
1
|
+
# 📅 Drawing Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Komponen untuk menggambar tanda tangan atau coretan bebas menggunakan kanvas berbasis webview.
|
|
4
|
+
|
|
5
|
+
## 🚀 Instalasi
|
|
6
|
+
|
|
7
|
+
Komponen ini menggunakan:
|
|
8
|
+
|
|
9
|
+
- [`react-native-signature-canvas`](https://www.npmjs.com/package/react-native-signature-canvas)
|
|
10
|
+
- [`react-native-webview`](https://github.com/react-native-webview/react-native-webview)
|
|
11
|
+
|
|
12
|
+
### 📦 Install Dependency
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
# Menggunakan yarn
|
|
16
|
+
yarn add react-native-signature-canvas
|
|
17
|
+
yarn add react-native-webview
|
|
18
|
+
|
|
19
|
+
# Menggunakan npm
|
|
20
|
+
npm install --save react-native-signature-canvas
|
|
21
|
+
npm install --save react-native-webview
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
### 🔗 Instalasi Pod (iOS)
|
|
25
|
+
```bash
|
|
26
|
+
cd ios && pod install
|
|
27
|
+
```
|
|
28
|
+
## ✍️ Contoh Penggunaan
|
|
4
29
|
|
|
5
30
|
```tsx
|
|
6
31
|
import React, { useState } from 'react';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# 📦 Icon Library
|
|
2
|
+
|
|
3
|
+
Kumpulan icon siap pakai untuk digunakan di proyek Anda.
|
|
4
|
+
|
|
5
|
+
## 🚀 Instalasi
|
|
6
|
+
|
|
7
|
+
Install dependecy terlebih dahulu:
|
|
8
|
+
> Komponen ini mengguankan SVG [react-native-svg](https://www.npmjs.com/package/react-native-svg). Jadi anda harus menginstall package tersebut didalam project anda
|
|
9
|
+
|
|
10
|
+
- Install library
|
|
11
|
+
```bash
|
|
12
|
+
# dengan npm
|
|
13
|
+
npm install react-native-svg
|
|
14
|
+
# atau yarn
|
|
15
|
+
yarn add react-native-svg
|
|
16
|
+
```
|
|
17
|
+
- Link native (IOS)
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
cd ios && pod install
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## 📦 Penggunaan
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Icon } from '@herca/rn-kit';
|
|
27
|
+
|
|
28
|
+
export default function App() {
|
|
29
|
+
return (
|
|
30
|
+
<View style={{ flexDirection: 'row' }}>
|
|
31
|
+
<Icon name="Filter" size={15} color={Color.gray[600]} />
|
|
32
|
+
</View>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Props
|
|
39
|
+
| Prop | Tipe | Default | Deskripsi |
|
|
40
|
+
| ------- | ------ | ------- | ------------------------ |
|
|
41
|
+
| `name` | string | null | Jenis Icon |
|
|
42
|
+
| `size` | number | 24 | Ukuran icon dalam piksel |
|
|
43
|
+
| `color` | string | "#000" | Warna icon |
|
|
44
|
+
| `style` | object | `{}` | Gaya tambahan (optional) |
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
## Daftar Icon
|
|
48
|
+
|
|
49
|
+
- AirPlane
|
|
50
|
+
- ArrowBackAlt
|
|
51
|
+
- ArrowDown
|
|
52
|
+
- ArrowForwardAlt
|
|
53
|
+
- ArrowLeft
|
|
54
|
+
- ArrowRight
|
|
55
|
+
- ArrowUp
|
|
56
|
+
- Camera
|
|
57
|
+
- Calendar
|
|
58
|
+
- Check
|
|
59
|
+
- Document
|
|
60
|
+
- Download
|
|
61
|
+
- Eye
|
|
62
|
+
- EyeOpen
|
|
63
|
+
- ExclamationMark
|
|
64
|
+
- Filter
|
|
65
|
+
- Home
|
|
66
|
+
- Image
|
|
67
|
+
- Pdf
|
|
68
|
+
- RadioButton
|
|
69
|
+
- Search
|
|
70
|
+
- StickyNote
|
|
71
|
+
- Times
|
|
72
|
+
- User
|
|
73
|
+
- x-circle
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@herca/rn-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.15",
|
|
4
4
|
"description": "React Native UI Kit",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -82,11 +82,35 @@
|
|
|
82
82
|
"react-native-builder-bob": "^0.40.8",
|
|
83
83
|
"release-it": "^17.10.0",
|
|
84
84
|
"turbo": "^1.10.7",
|
|
85
|
-
"typescript": "^5.8.3"
|
|
85
|
+
"typescript": "^5.8.3",
|
|
86
|
+
"@react-native-documents/picker": "^10.1.3",
|
|
87
|
+
"@react-native-documents/viewer": "^1.0.1",
|
|
88
|
+
"@react-navigation/native": "^7.1.14",
|
|
89
|
+
"react-native-blob-util": "^0.22.2",
|
|
90
|
+
"react-native-image-picker": "^8.2.1",
|
|
91
|
+
"react-native-pager-view": "^6.8.1",
|
|
92
|
+
"react-native-pdf": "^6.7.7",
|
|
93
|
+
"react-native-safe-area-context": "^5.5.1",
|
|
94
|
+
"react-native-screens": "^4.11.1",
|
|
95
|
+
"react-native-signature-canvas": "^5.0.1",
|
|
96
|
+
"react-native-svg": "^15.12.0",
|
|
97
|
+
"react-native-webview": "^13.15.0"
|
|
86
98
|
},
|
|
87
99
|
"peerDependencies": {
|
|
88
100
|
"react": "*",
|
|
89
|
-
"react-native": "*"
|
|
101
|
+
"react-native": "*",
|
|
102
|
+
"@react-native-documents/picker": "^10.1.3",
|
|
103
|
+
"@react-native-documents/viewer": "^1.0.1",
|
|
104
|
+
"@react-navigation/native": "^7.1.14",
|
|
105
|
+
"react-native-blob-util": "^0.22.2",
|
|
106
|
+
"react-native-image-picker": "^8.2.1",
|
|
107
|
+
"react-native-pager-view": "^6.8.1",
|
|
108
|
+
"react-native-pdf": "^6.7.7",
|
|
109
|
+
"react-native-safe-area-context": "^5.5.1",
|
|
110
|
+
"react-native-screens": "^4.11.1",
|
|
111
|
+
"react-native-signature-canvas": "^5.0.1",
|
|
112
|
+
"react-native-svg": "^15.12.0",
|
|
113
|
+
"react-native-webview": "^13.15.0"
|
|
90
114
|
},
|
|
91
115
|
"workspaces": [
|
|
92
116
|
"example"
|
|
@@ -160,19 +184,5 @@
|
|
|
160
184
|
"languages": "kotlin-objc",
|
|
161
185
|
"type": "turbo-module",
|
|
162
186
|
"version": "0.51.1"
|
|
163
|
-
},
|
|
164
|
-
"dependencies": {
|
|
165
|
-
"@react-native-documents/picker": "^10.1.3",
|
|
166
|
-
"@react-native-documents/viewer": "^1.0.1",
|
|
167
|
-
"@react-navigation/native": "^7.1.14",
|
|
168
|
-
"react-native-blob-util": "^0.22.2",
|
|
169
|
-
"react-native-image-picker": "^8.2.1",
|
|
170
|
-
"react-native-pager-view": "^6.8.1",
|
|
171
|
-
"react-native-pdf": "^6.7.7",
|
|
172
|
-
"react-native-safe-area-context": "^5.5.1",
|
|
173
|
-
"react-native-screens": "^4.11.1",
|
|
174
|
-
"react-native-signature-canvas": "^5.0.1",
|
|
175
|
-
"react-native-svg": "^15.12.0",
|
|
176
|
-
"react-native-webview": "^13.15.0"
|
|
177
187
|
}
|
|
178
188
|
}
|
package/src/Drawing/README.md
CHANGED
|
@@ -1,6 +1,31 @@
|
|
|
1
|
-
# 📅 Drawing
|
|
1
|
+
# 📅 Drawing Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Komponen untuk menggambar tanda tangan atau coretan bebas menggunakan kanvas berbasis webview.
|
|
4
|
+
|
|
5
|
+
## 🚀 Instalasi
|
|
6
|
+
|
|
7
|
+
Komponen ini menggunakan:
|
|
8
|
+
|
|
9
|
+
- [`react-native-signature-canvas`](https://www.npmjs.com/package/react-native-signature-canvas)
|
|
10
|
+
- [`react-native-webview`](https://github.com/react-native-webview/react-native-webview)
|
|
11
|
+
|
|
12
|
+
### 📦 Install Dependency
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
# Menggunakan yarn
|
|
16
|
+
yarn add react-native-signature-canvas
|
|
17
|
+
yarn add react-native-webview
|
|
18
|
+
|
|
19
|
+
# Menggunakan npm
|
|
20
|
+
npm install --save react-native-signature-canvas
|
|
21
|
+
npm install --save react-native-webview
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
### 🔗 Instalasi Pod (iOS)
|
|
25
|
+
```bash
|
|
26
|
+
cd ios && pod install
|
|
27
|
+
```
|
|
28
|
+
## ✍️ Contoh Penggunaan
|
|
4
29
|
|
|
5
30
|
```tsx
|
|
6
31
|
import React, { useState } from 'react';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# 📦 Icon Library
|
|
2
|
+
|
|
3
|
+
Kumpulan icon siap pakai untuk digunakan di proyek Anda.
|
|
4
|
+
|
|
5
|
+
## 🚀 Instalasi
|
|
6
|
+
|
|
7
|
+
Install dependecy terlebih dahulu:
|
|
8
|
+
> Komponen ini mengguankan SVG [react-native-svg](https://www.npmjs.com/package/react-native-svg). Jadi anda harus menginstall package tersebut didalam project anda
|
|
9
|
+
|
|
10
|
+
- Install library
|
|
11
|
+
```bash
|
|
12
|
+
# dengan npm
|
|
13
|
+
npm install react-native-svg
|
|
14
|
+
# atau yarn
|
|
15
|
+
yarn add react-native-svg
|
|
16
|
+
```
|
|
17
|
+
- Link native (IOS)
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
cd ios && pod install
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## 📦 Penggunaan
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Icon } from '@herca/rn-kit';
|
|
27
|
+
|
|
28
|
+
export default function App() {
|
|
29
|
+
return (
|
|
30
|
+
<View style={{ flexDirection: 'row' }}>
|
|
31
|
+
<Icon name="Filter" size={15} color={Color.gray[600]} />
|
|
32
|
+
</View>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Props
|
|
39
|
+
| Prop | Tipe | Default | Deskripsi |
|
|
40
|
+
| ------- | ------ | ------- | ------------------------ |
|
|
41
|
+
| `name` | string | null | Jenis Icon |
|
|
42
|
+
| `size` | number | 24 | Ukuran icon dalam piksel |
|
|
43
|
+
| `color` | string | "#000" | Warna icon |
|
|
44
|
+
| `style` | object | `{}` | Gaya tambahan (optional) |
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
## Daftar Icon
|
|
48
|
+
|
|
49
|
+
- AirPlane
|
|
50
|
+
- ArrowBackAlt
|
|
51
|
+
- ArrowDown
|
|
52
|
+
- ArrowForwardAlt
|
|
53
|
+
- ArrowLeft
|
|
54
|
+
- ArrowRight
|
|
55
|
+
- ArrowUp
|
|
56
|
+
- Camera
|
|
57
|
+
- Calendar
|
|
58
|
+
- Check
|
|
59
|
+
- Document
|
|
60
|
+
- Download
|
|
61
|
+
- Eye
|
|
62
|
+
- EyeOpen
|
|
63
|
+
- ExclamationMark
|
|
64
|
+
- Filter
|
|
65
|
+
- Home
|
|
66
|
+
- Image
|
|
67
|
+
- Pdf
|
|
68
|
+
- RadioButton
|
|
69
|
+
- Search
|
|
70
|
+
- StickyNote
|
|
71
|
+
- Times
|
|
72
|
+
- User
|
|
73
|
+
- x-circle
|