afrikit-mobile 1.0.6 β 1.0.12
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 +112 -0
- package/package.json +5 -3
package/README.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
|
|
2
|
+
# Afrikit Mobile
|
|
3
|
+
|
|
4
|
+
### A mobile design system for React Native using Expo, built to streamline UI consistency.
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Welcome to **Afrikit Mobile**! A design system for React Native and Expo projects, providing a cohesive set of UI components and utilities.
|
|
10
|
+
|
|
11
|
+
## π Installation
|
|
12
|
+
|
|
13
|
+
Install Afrikit Mobile into your project by running:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install afrikit-mobile
|
|
17
|
+
# or if you prefer yarn
|
|
18
|
+
yarn add afrikit-mobile
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
This will automatically install all the required dependencies, including Expo, Nativewind, and Tailwind.
|
|
22
|
+
|
|
23
|
+
## π¨ Usage
|
|
24
|
+
|
|
25
|
+
Afrikit Mobile exports various ready-to-use components. Hereβs an example of using one of them:
|
|
26
|
+
|
|
27
|
+
### Floating Button Example
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// App.tsx
|
|
31
|
+
import React from 'react';
|
|
32
|
+
import { FloatingButton } from 'afrikit-mobile';
|
|
33
|
+
|
|
34
|
+
const App = () => {
|
|
35
|
+
return (
|
|
36
|
+
<FloatingButton onPress={() => console.log('Pressed')} backgroundColor="blue" />
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export default App;
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Components List:
|
|
44
|
+
|
|
45
|
+
Afrikit Mobile provides multiple components:
|
|
46
|
+
|
|
47
|
+
- **FloatingButton**: A floating action button with a default icon and customizable color.
|
|
48
|
+
- **IconButton**: A button displaying an icon with configurable properties.
|
|
49
|
+
- **TopBarTitle**: A title component for the top bar, with multiple styles.
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { FloatingButton, IconButton, TopBarTitle } from 'afrikit-mobile';
|
|
53
|
+
|
|
54
|
+
const App = () => {
|
|
55
|
+
return (
|
|
56
|
+
<>
|
|
57
|
+
<TopBarTitle title="Welcome to Afrikit" />
|
|
58
|
+
<FloatingButton onPress={() => console.log('Pressed')} backgroundColor="red" />
|
|
59
|
+
<IconButton onPress={() => alert('Icon clicked!')} icon="star" />
|
|
60
|
+
</>
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export default App;
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## π οΈ Extending Tailwind
|
|
68
|
+
|
|
69
|
+
Afrikit Mobile integrates seamlessly with Tailwind for styling. You can extend your Tailwind config as needed:
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
// tailwind.config.js
|
|
73
|
+
const afrikitConfig = require('afrikit-mobile/tailwind.config');
|
|
74
|
+
|
|
75
|
+
module.exports = {
|
|
76
|
+
...afrikitConfig,
|
|
77
|
+
theme: {
|
|
78
|
+
extend: {
|
|
79
|
+
colors: {
|
|
80
|
+
primary: '#FF6B6B', // Custom color
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Afrikit also includes custom tokens for colors, spacing, and border radii, which are already added to the theme. Use them like this:
|
|
88
|
+
|
|
89
|
+
```js
|
|
90
|
+
theme: {
|
|
91
|
+
colors: {
|
|
92
|
+
...afrikitConfig.theme.colors, // Add Afrikit colors
|
|
93
|
+
},
|
|
94
|
+
spacing: {
|
|
95
|
+
...afrikitConfig.theme.spacing, // Add Afrikit spacing tokens
|
|
96
|
+
},
|
|
97
|
+
borderRadius: {
|
|
98
|
+
...afrikitConfig.theme.borderRadius, // Add Afrikit's border radius tokens
|
|
99
|
+
},
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## π§βπ» Contributing
|
|
104
|
+
|
|
105
|
+
Got ideas for improvements or found a bug? Submit an issue or open a pull request in the [GitHub repo](https://github.com/AfrinvestOptimus/afrikit).
|
|
106
|
+
|
|
107
|
+
## π License
|
|
108
|
+
|
|
109
|
+
This project is licensed under the MIT License. See the [LICENSE.md](LICENSE.md) file for more details.
|
|
110
|
+
|
|
111
|
+
## π Final Words
|
|
112
|
+
Afrikit Mobile is here to save your time, improve your app's UI, and bring consistency to your design workflow. Now, get back to doing what you do best: building awesome apps, and leave the design heavy-lifting to us! πͺ
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "afrikit-mobile",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -11,12 +11,14 @@
|
|
|
11
11
|
"android": "expo start --android",
|
|
12
12
|
"ios": "expo start --ios",
|
|
13
13
|
"web": "expo start --web",
|
|
14
|
-
"build": "tsc && tsc-alias"
|
|
14
|
+
"build": "tsc && tsc-alias",
|
|
15
|
+
"prepublishOnly": "yarn build"
|
|
15
16
|
},
|
|
16
17
|
"dependencies": {
|
|
17
18
|
"@expo-google-fonts/manrope": "^0.2.3",
|
|
18
19
|
"@gorhom/bottom-sheet": "^4.6.4",
|
|
19
20
|
"@react-native-community/datetimepicker": "^8.2.0",
|
|
21
|
+
"afrikit-shared": "1.0.7",
|
|
20
22
|
"expo": "~51.0.28",
|
|
21
23
|
"expo-font": "~12.0.9",
|
|
22
24
|
"expo-status-bar": "~1.12.1",
|
|
@@ -53,5 +55,5 @@
|
|
|
53
55
|
"publishConfig": {
|
|
54
56
|
"access": "public"
|
|
55
57
|
},
|
|
56
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "bdc056aaf9ab503ec3a07c240a15aad326cc114b"
|
|
57
59
|
}
|