@widergy/mobile-ui 1.8.3 → 1.9.0
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/CHANGELOG.md +7 -0
- package/lib/components/UTIcon/README.md +63 -0
- package/lib/components/UTIcon/index.js +21 -0
- package/lib/index.js +1 -0
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [1.9.0](https://github.com/widergy/mobile-ui/compare/v1.8.3...v1.9.0) (2024-05-17)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* uticon ([#284](https://github.com/widergy/mobile-ui/issues/284)) ([b71c18f](https://github.com/widergy/mobile-ui/commit/b71c18f09f8e5e5937674da4587dd5b7cd5d6de7))
|
|
7
|
+
|
|
1
8
|
## [1.8.3](https://github.com/widergy/mobile-ui/compare/v1.8.2...v1.8.3) (2024-05-15)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# UTIcon
|
|
2
|
+
|
|
3
|
+
### Description
|
|
4
|
+
|
|
5
|
+
Icon component using Tabler Icons library.
|
|
6
|
+
|
|
7
|
+
### UX/UI Icon Lists
|
|
8
|
+
- [Figma](https://www.figma.com/file/upiqGm1l10mBTbV9gn35Fh/Icons---Stylesheet?type=design&node-id=3-5&mode=design)
|
|
9
|
+
- [Zeroheight](https://zeroheight.com/6d447f9f5/p/87aa21-resources)
|
|
10
|
+
|
|
11
|
+
### Name
|
|
12
|
+
|
|
13
|
+
Icon names must be PascalCase.
|
|
14
|
+
|
|
15
|
+
Usually, icon names are a convertion from figma's or zeroheight's snake_case to PascalCase, adding `Icon` as a prefix.
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
Figma: truck-delivery
|
|
19
|
+
UTIcon: IconTruckDelivery
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Sometimes icons will be called {icon-name}-old. In these cases, usually, the icon name is made in the same way already explained, but subtracting the
|
|
23
|
+
`-old` suffix.
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
Figma: chevron-right-old
|
|
27
|
+
UTIcon: IconChevronRight
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Exceptions may exists to these rules.
|
|
31
|
+
|
|
32
|
+
### Color
|
|
33
|
+
|
|
34
|
+
Android always requires a color value, so the prop defaults to black.
|
|
35
|
+
|
|
36
|
+
### Props
|
|
37
|
+
|
|
38
|
+
| Name | Description |Default |
|
|
39
|
+
| --------- | ----------------------------------- | ------- |
|
|
40
|
+
| color | The icon color | 'black' |
|
|
41
|
+
| name | The name of the icon in TablerIcons | ------- |
|
|
42
|
+
| size | The icon size | ------- |
|
|
43
|
+
| style | The style to be aplied to the Icon | ------- |
|
|
44
|
+
|
|
45
|
+
### Usage
|
|
46
|
+
|
|
47
|
+
```javascript
|
|
48
|
+
import { UTIcon } from '@widergy/mobile-ui';
|
|
49
|
+
import { View } from 'react-native';
|
|
50
|
+
import React from 'react';
|
|
51
|
+
|
|
52
|
+
import styles from './styles';
|
|
53
|
+
|
|
54
|
+
const MyComponent = () => {
|
|
55
|
+
return (
|
|
56
|
+
<View>
|
|
57
|
+
<UTIcon color="skyBlue" name="IconTruckDelivery" size={48} style={styles.iconStyle} />
|
|
58
|
+
</View>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export default MyComponent;
|
|
63
|
+
```
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import * as TablerIcons from '@tabler/icons-react-native';
|
|
3
|
+
import { number, string } from 'prop-types';
|
|
4
|
+
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
|
5
|
+
|
|
6
|
+
const UTIcon = ({ color = 'black', name, size, style }) => {
|
|
7
|
+
const IconComponent = TablerIcons[name];
|
|
8
|
+
|
|
9
|
+
if (!IconComponent) return null;
|
|
10
|
+
|
|
11
|
+
return <IconComponent color={color} size={size} style={style} />;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
UTIcon.propTypes = {
|
|
15
|
+
color: string,
|
|
16
|
+
name: string,
|
|
17
|
+
size: number,
|
|
18
|
+
style: ViewPropTypes.style
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export default UTIcon;
|
package/lib/index.js
CHANGED
|
@@ -27,6 +27,7 @@ export { default as UTPasswordField } from './components/UTPasswordField';
|
|
|
27
27
|
export { default as Icon } from './components/Icon';
|
|
28
28
|
export { default as ImageIcon } from './components/ImageIcon';
|
|
29
29
|
export { default as SeparatorBar } from './components/SeparatorBar';
|
|
30
|
+
export { default as UTIcon } from './components/UTIcon';
|
|
30
31
|
// Library Components
|
|
31
32
|
export { default as AvatarImage } from './components/AvatarImage';
|
|
32
33
|
export { default as Carousel } from './components/Carousel';
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@widergy/mobile-ui",
|
|
3
3
|
"description": "Widergy Mobile Components",
|
|
4
4
|
"author": "widergy",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.9.0",
|
|
6
6
|
"repository": "https://github.com/widergy/mobile-ui.git",
|
|
7
7
|
"main": "lib/index.js",
|
|
8
8
|
"files": [
|
|
@@ -35,16 +35,17 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@react-navigation/native": "^6.1.9",
|
|
38
|
+
"@tabler/icons-react-native": "^3.3.0",
|
|
38
39
|
"@widergy/web-utils": "^2.0.0",
|
|
39
40
|
"core-js": "3",
|
|
40
41
|
"deprecated-react-native-prop-types": "^4.2.1",
|
|
41
42
|
"lodash": "^4.17.21",
|
|
42
43
|
"numeral": "^2.0.6",
|
|
43
44
|
"pdf-lib": "^1.17.1",
|
|
45
|
+
"react-native-collapsible": "^1.6.1",
|
|
44
46
|
"react-native-markdown-display": "^7.0.0-alpha.2",
|
|
45
47
|
"react-native-modal": "^13.0.1",
|
|
46
|
-
"react-native-pager-view": "^6.2.1"
|
|
47
|
-
"react-native-collapsible": "^1.6.1"
|
|
48
|
+
"react-native-pager-view": "^6.2.1"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
50
51
|
"@babel/cli": "^7.22.10",
|