@hoddy-ui/core 1.0.0 → 1.0.2

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.
Files changed (2) hide show
  1. package/README.md +331 -0
  2. package/package.json +11 -6
package/README.md ADDED
@@ -0,0 +1,331 @@
1
+ # @hoddy-ui/core
2
+
3
+ Hoddy UI is a versatile UI component and theming library for React Native and Expo. It follows the Hoddy UI design guidelines, which are a tweak of Material Design. The library provides a collection of reusable components and a customizable theming system to simplify and accelerate the development of mobile applications.
4
+
5
+ ## Installation
6
+
7
+ To install Hoddy UI, use npm or yarn:
8
+
9
+ **npm:**
10
+
11
+ ```sh
12
+ npm install @hoddy-ui/core
13
+ ```
14
+
15
+ **yarn:**
16
+
17
+ ```sh
18
+ yarn add @hoddy-ui/core
19
+ ```
20
+
21
+ Hoddy UI has the following peer dependencies, make sure to install them as well:
22
+
23
+ ```json
24
+ "@expo/vector-icons": "^13.0.0",
25
+ "@react-native-async-storage/async-storage": "^1.18.1",
26
+ "@react-navigation/native": "^6.1.6",
27
+ "expo-navigation-bar": "^2.1.1",
28
+ "expo-system-ui": "^2.2.1",
29
+ "react": "^18.2.0",
30
+ "react-native": "^0.71.8",
31
+ "react-native-safe-area-context": "^4.5.3",
32
+ "react-native-size-matters": "^0.4.0"
33
+ ```
34
+
35
+ ## Enabling dark mode
36
+
37
+ To take advantage of the dark mode feature, add the UIProvider component to the root of your app
38
+
39
+ ```javascript
40
+ import { UIThemeProvider } from "hoddy-ui/core";
41
+
42
+ function App() {
43
+ return (
44
+ <UIThemeProvider>
45
+ <Component />
46
+ </UIThemeProvider>
47
+ );
48
+ }
49
+ ```
50
+
51
+ ## Usage
52
+
53
+ Here's a quick example of how to use Hoddy UI in your React Native or Expo project:
54
+
55
+ ```javascript
56
+ import React from "react";
57
+ import { View } from "react-native";
58
+ import { Button, Typography } from "@hoddy-ui/core";
59
+
60
+ const HomeScreen = () => {
61
+ return (
62
+ <View>
63
+ <Typography>Welcome to Hoddy UI!</Typography>
64
+ <Button title="Click me" onPress={() => console.log("Button pressed!")} />
65
+ </View>
66
+ );
67
+ };
68
+
69
+ export default HomeScreen;
70
+ ```
71
+
72
+ ## Components
73
+
74
+ Hoddy UI provides the following components for building your UI:
75
+
76
+ - [AdaptiveStatusBar](#adaptivestatusbar)
77
+ - [Avatar](#avatar)
78
+ - [AlertX](#alertx)
79
+ - [Button](#button)
80
+ - [FlashMessage](#flashmessage)
81
+ - [FormWrapper](#formwrapper)
82
+ - [Grid](#grid)
83
+ - [GridItem](#griditem)
84
+ - [IconButton](#iconbutton)
85
+ - [LinkButton](#linkbutton)
86
+ - [List](#list)
87
+ - [ListItem](#listitem)
88
+ - [ListItemText](#listitemtext)
89
+ - [Locator](#locator)
90
+ - [Popup](#popup)
91
+ - [SafeAreaView](#safeareaview)
92
+ - [Spinner](#spinner)
93
+ - [TextField](#textfield)
94
+ - [TextField2](#textfield2)
95
+ - [Typography](#typography)
96
+
97
+ ## Component API Reference
98
+
99
+ ### AdaptiveStatusBar
100
+
101
+ A component that adapts the status bar color based on the theme.
102
+
103
+ **Props:**
104
+
105
+ | Prop | Type | Default | Description |
106
+ | --------------- | ------ | --------------- | ----------------------------------------------------------------------------------------- |
107
+ | barStyle | string | "light-content" | The style of the status bar. Possible values: "default", "light-content", "dark-content". |
108
+ | backgroundColor | string | Theme-dependent | The background color of the status bar. |
109
+
110
+ Example usage:
111
+
112
+ ```jsx
113
+ import { AdaptiveStatusBar } from "@hoddy-ui/core";
114
+
115
+ const App = () => {
116
+ return (
117
+ <>
118
+ <AdaptiveStatusBar />
119
+ {/* Rest of the app */}
120
+ </>
121
+ );
122
+ };
123
+ ```
124
+
125
+ ### Avatar
126
+
127
+ A component for displaying user avatars.
128
+
129
+ **Props:**
130
+
131
+ | Prop | Type | Default | Description |
132
+ | ------- | ------- | ------- | ------------------------------------- |
133
+ | image | number | - | The source of the avatar image. |
134
+ | size | number | 40 | The size of the avatar in pixels. |
135
+ | rounded | boolean | false | Whether the avatar should be rounded. |
136
+
137
+ ### AlertX
138
+
139
+ A customizable alert component.
140
+
141
+ **Props:**
142
+
143
+ | Prop | Type | Default | Description |
144
+ | ------- | ------ | --------- | --------------------------------------------------------------------------------- |
145
+ | title | string | - | The title of the alert. |
146
+ | message | string | - | The message/content of the alert. |
147
+ | type | string | "default" | The type of the alert. Possible values: "default", "success", "error", "warning". |
148
+
149
+ ### Button
150
+
151
+ A customizable button component.
152
+
153
+ **Props:**
154
+
155
+ | Prop | Type | Default | Description |
156
+ | ------- | -------- | ------- | ------------------------------------------ |
157
+ | title | string | - | The text to display on the button. |
158
+ | onPress | function | - | The function to be called on button press. |
159
+
160
+ ### FlashMessage
161
+
162
+ A component for displaying flash messages.
163
+
164
+ **Props:**
165
+
166
+ | Prop | Type | Default | Description |
167
+ | -------- | ------- | --------- | ----------------------------------------------------------------------------------------- |
168
+ | message | string | - | The message/content of the flash message. |
169
+ | type | string | "default" | The type of the flash message. Possible values: "default", "success", "error", "warning". |
170
+ | duration | number | 3000 | The duration in milliseconds that the flash message should be displayed. |
171
+ | autoHide | boolean | true | Whether the flash message should auto-hide after the specified duration. |
172
+
173
+ ### FormWrapper
174
+
175
+ A wrapper component for form fields.
176
+
177
+ **Props:**
178
+
179
+ | Prop | Type | Default | Description |
180
+ | -------- | ---- | ------- | ----------------------------------------- |
181
+ | children | node | - | The form fields/components to be wrapped. |
182
+
183
+ ### Grid
184
+
185
+ A flexible grid component for arranging child elements.
186
+
187
+ **Props:**
188
+
189
+ | Prop | Type | Default | Description |
190
+ | ---------- | ------ | ------- | ---------------------------------------------- |
191
+ | children | node | - | The child elements to be rendered in the grid. |
192
+ | numColumns | number | 2 | The number of columns in the grid. |
193
+ | spacing | number | 10 | The spacing between grid items in pixels. |
194
+
195
+ ### GridItem
196
+
197
+ A component representing an item in the Grid component.
198
+
199
+ **Props:**
200
+
201
+ | Prop | Type | Default | Description |
202
+ | -------- | ---- | ------- | ----------------------------- |
203
+ | children | node | - | The content of the grid item. |
204
+
205
+ ### IconButton
206
+
207
+ A button component with an icon.
208
+
209
+ **Props:**
210
+
211
+ | Prop | Type | Default | Description |
212
+ | ------- | -------- | ------- | ------------------------------------------ |
213
+ | icon | string | - | The name of the icon to display. |
214
+ | onPress | function | - | The function to be called on button press. |
215
+
216
+ ### LinkButton
217
+
218
+ A button component that navigates to a specified URL.
219
+
220
+ **Props:**
221
+
222
+ | Prop | Type | Default | Description |
223
+ | ----- | ------ | ------- | --------------------------------------- |
224
+ | title | string | - | The text to display on the button. |
225
+ | url | string | - | The URL to navigate to on button press. |
226
+
227
+ ### List
228
+
229
+ A component for rendering lists.
230
+
231
+ **Props:**
232
+
233
+ | Prop | Type | Default | Description |
234
+ | -------- | ---- | ------- | ------------------------------ |
235
+ | children | node | - | The list items to be rendered. |
236
+
237
+ ### ListItem
238
+
239
+ A component representing an item in the List component.
240
+
241
+ **Props:**
242
+
243
+ | Prop | Type | Default | Description |
244
+ | -------- | ---- | ------- | ----------------------------- |
245
+ | children | node | - | The content of the list item. |
246
+
247
+ ### ListItemText
248
+
249
+ A component representing the text content of a ListItem.
250
+
251
+ **Props:**
252
+
253
+ | Prop | Type | Default | Description |
254
+ | -------- | ---- | ------- | ------------------------ |
255
+ | children | node | - | The text to be rendered. |
256
+
257
+ ### Locator
258
+
259
+ A component for displaying a location marker on a map.
260
+
261
+ **Props:**
262
+
263
+ | Prop | Type | Default | Description |
264
+ | --------- | ------ | ------- | ------------------------------ |
265
+ | latitude | number | - | The latitude of the location. |
266
+ | longitude | number | - | The longitude of the location. |
267
+
268
+ ### Popup
269
+
270
+ A customizable popup component.
271
+
272
+ **Props:**
273
+
274
+ | Prop | Type | Default | Description |
275
+ | ------- | -------- | ------- | --------------------------------------------------- |
276
+ | title | string | - | The title of the popup. |
277
+ | onClose | function | - | The function to be called when the popup is closed. |
278
+
279
+ ### SafeAreaView
280
+
281
+ A component that renders content within the safe area boundaries of the device.
282
+
283
+ **Props:**
284
+
285
+ | Prop | Type | Default | Description |
286
+ | -------- | ---- | ------- | --------------------------- |
287
+ | children | node | - | The content to be rendered. |
288
+
289
+ ### Spinner
290
+
291
+ A component for displaying a loading spinner.
292
+
293
+ **Props:**
294
+
295
+ | Prop | Type | Default | Description |
296
+ | ----- | ------ | --------------- | ----------------------------------------------------------- |
297
+ | size | string | "small" | The size of the spinner. Possible values: "small", "large". |
298
+ | color | string | Theme-dependent | The color of the spinner. |
299
+
300
+ ### TextField
301
+
302
+ A component for text input.
303
+
304
+ **Props:**
305
+
306
+ | Prop | Type | Default | Description |
307
+ | ----------- | ------ | ------- | ----------------------------------- |
308
+ | label | string | - | The label for the text input. |
309
+ | placeholder | string | - | The placeholder text for the input. |
310
+
311
+ ### TextField2
312
+
313
+ Another component for text input.
314
+
315
+ **Props:**
316
+
317
+ | Prop | Type | Default | Description |
318
+ | ----------- | ------ | ------- | ----------------------------------- |
319
+ | label | string | - | The label for the text input. |
320
+ | placeholder | string | - | The placeholder text for the input. |
321
+
322
+ ### Typography
323
+
324
+ A component for displaying text with different styles.
325
+
326
+ **Props:**
327
+
328
+ | Prop | Type | Default | Description |
329
+ | -------- | ------ | ------- | ---------------------------------------------------------------------------------------------------- |
330
+ | variant | string | "body" | The style variant of the text. Possible values: "heading", "title", "subheading", "body", "caption". |
331
+ | children | node | - | The text content to be rendered. |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hoddy-ui/core",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Core rich react native components written in typescript",
5
5
  "main": "index.ts",
6
6
  "repository": {
@@ -15,18 +15,23 @@
15
15
  "@expo/vector-icons": "^13.0.0",
16
16
  "@react-native-async-storage/async-storage": "^1.18.1",
17
17
  "@react-navigation/native": "^6.1.6",
18
+ "@types/react": "^18.2.6",
19
+ "@types/react-native": "^0.72.0",
18
20
  "expo-navigation-bar": "^2.1.1",
19
21
  "expo-system-ui": "^2.2.1",
20
22
  "react": "^18.2.0",
21
23
  "react-native": "^0.71.8",
22
24
  "react-native-safe-area-context": "^4.5.3",
23
- "react-native-size-matters": "^0.4.0"
24
- },
25
- "devDependencies": {
26
- "@types/react": "^18.2.6",
27
- "@types/react-native": "^0.72.0",
25
+ "react-native-size-matters": "^0.4.0",
28
26
  "typescript": "^5.0.4"
29
27
  },
28
+ "keywords": [
29
+ "react-native",
30
+ "react-native-component",
31
+ "hui",
32
+ "hoddy-ui",
33
+ "kinghoddy"
34
+ ],
30
35
  "dependencies": {},
31
36
  "publishConfig": {
32
37
  "access": "public"