Skip to content

Commit 70387dd

Browse files
hetmannhetmann
authored
Dev (#5)
* DEV: updated README with Expo info * 0.0.2 * Added homepage + keywords * DEV: added components, utils, default theme, NO tests * DEV: added unit tests * DEV: added tests for Input & Text, updates for components: Block, Input, Text * DEV: added tests for Input & Text, updates for components: Block, Input, Text
1 parent cc01e46 commit 70387dd

15 files changed

+774
-76
lines changed

‎jest.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// For a detailed explanation regarding each configuration property, visit:
2+
// https://jestjs.io/docs/en/configuration.html
3+
4+
module.exports = {
5+
preset: "react-native",
6+
collectCoverage: true,
7+
coveragePathIgnorePatterns: ["node_modules", "src/utils"],
8+
moduleDirectories: ["node_modules"],
9+
transform: {
10+
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
11+
},
12+
setupFiles: ["<rootDir>/jest.setup.js"],
13+
moduleFileExtensions: ["js", "jsx"],
14+
transformIgnorePatterns: []
15+
};

‎jest.setup.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Enzyme from "enzyme";
2+
import Adapter from "enzyme-adapter-react-16";
3+
4+
Enzyme.configure({ adapter: new Adapter() });

‎package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,23 @@
1313
"author": "React-UI-Kit <[email protected]> (https://react-ui-kit.com)",
1414
"license": "MIT",
1515
"scripts": {
16-
"lint": "eslint src"
16+
"lint": "eslint src",
17+
"test": "jest"
1718
},
1819
"dependencies": {
1920
"expo": "^32.0.0",
2021
"react": "16.5.0",
2122
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
2223
},
2324
"devDependencies": {
25+
"enzyme": "^3.9.0",
26+
"enzyme-adapter-react-16": "^1.13.2",
2427
"eslint": "^5.16.0",
2528
"eslint-config-universe": "^1.0.7",
26-
"prettier": "^1.17.1"
29+
"jest": "^24.8.0",
30+
"prettier": "^1.17.1",
31+
"react-dom": "^16.8.6",
32+
"react-test-renderer": "^16.8.6"
2733
},
2834
"eslintConfig": {
2935
"extends": "universe/native"

‎src/Block.js

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { PureComponent } from "react";
22
import { StyleSheet, View, Animated } from "react-native";
33

4-
import * as expoTheme from "./theme";
4+
import expoTheme from "./theme";
55
import { getMargins, getPaddings, mergeTheme } from "./utils";
66

77
class Block extends PureComponent {
@@ -18,7 +18,19 @@ class Block extends PureComponent {
1818
bottom,
1919
card,
2020
shadow,
21+
// colors
2122
color,
23+
primary,
24+
secondary,
25+
tertiary,
26+
black,
27+
white,
28+
gray,
29+
alert,
30+
warning,
31+
success,
32+
info,
33+
// positioning
2234
space,
2335
padding,
2436
margin,
@@ -57,16 +69,17 @@ class Block extends PureComponent {
5769
space && { justifyContent: `space-${space}` },
5870
card && { borderRadius: SIZES.border },
5971
radius && { borderRadius: radius },
60-
color === "primary" && { backgroundColor: COLORS.primary },
61-
color === "secondary" && { backgroundColor: COLORS.secondary },
62-
color === "tertiary" && { backgroundColor: COLORS.tertiary },
63-
color === "black" && { backgroundColor: COLORS.black },
64-
color === "white" && { backgroundColor: COLORS.white },
65-
color === "gray" && { backgroundColor: COLORS.gray },
66-
color === "alert" && { backgroundColor: COLORS.alert },
67-
color === "warning" && { backgroundColor: COLORS.warning },
68-
color === "success" && { backgroundColor: COLORS.success },
69-
color === "info" && { backgroundColor: COLORS.info },
72+
// color shortcuts
73+
primary && { backgroundColor: COLORS.primary },
74+
secondary && { backgroundColor: COLORS.secondary },
75+
tertiary && { backgroundColor: COLORS.tertiary },
76+
black && { backgroundColor: COLORS.black },
77+
white && { backgroundColor: COLORS.white },
78+
gray && { backgroundColor: COLORS.gray },
79+
alert && { backgroundColor: COLORS.alert },
80+
warning && { backgroundColor: COLORS.warning },
81+
success && { backgroundColor: COLORS.success },
82+
info && { backgroundColor: COLORS.info },
7083
color && { backgroundColor: color }, // custom backgroundColor
7184
style // rewrite predefined styles
7285
]);
@@ -88,7 +101,6 @@ class Block extends PureComponent {
88101
}
89102

90103
Block.defaultProps = {
91-
theme: null,
92104
flex: 1,
93105
row: false,
94106
column: false,
@@ -107,7 +119,8 @@ Block.defaultProps = {
107119
radius: null,
108120
wrap: false,
109121
animated: false,
110-
style: {}
122+
style: {},
123+
theme: {}
111124
};
112125

113126
export default Block;

‎src/Button.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from "react";
22
import { StyleSheet, TouchableOpacity } from "react-native";
33

4-
import * as expoTheme from "./theme";
4+
import expoTheme from "./theme";
55
import { rgba, mergeTheme } from "./utils";
66

77
class Button extends Component {
@@ -28,10 +28,10 @@ class Button extends Component {
2828
...props
2929
} = this.props;
3030

31-
const { SIZES, COLORS } = mergeTheme(expoTheme, theme);
31+
const { SIZES, COLORS } = mergeTheme({ ...expoTheme }, theme);
3232

3333
const buttonStyles = StyleSheet.flatten([
34-
({
34+
{
3535
height: SIZES.base * 2.75,
3636
borderRadius: SIZES.border * 2,
3737
backgroundColor: COLORS.primary,
@@ -55,14 +55,12 @@ class Button extends Component {
5555
borderColor: COLORS.primary,
5656
backgroundColor: "transparent"
5757
},
58-
style)
58+
style
5959
]);
6060

6161
if (disabled) {
6262
const backgroundColor = StyleSheet.flatten(buttonStyles).backgroundColor;
63-
buttonStyles.push({
64-
backgroundColor: rgba(backgroundColor, 0.5)
65-
});
63+
buttonStyles.backgroundColor = rgba(backgroundColor, 0.5);
6664
}
6765

6866
return (
@@ -93,7 +91,7 @@ Button.defaultProps = {
9391
warning: false,
9492
success: false,
9593
info: false,
96-
theme: null,
94+
theme: {},
9795
style: {}
9896
};
9997

‎src/Card.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { PureComponent } from "react";
22
import { StyleSheet } from "react-native";
33

4-
import Block from "./Block";
5-
import * as expoTheme from "./theme";
64
import { rgba, mergeTheme } from "./utils";
5+
import expoTheme from "./theme";
6+
7+
import Block from "./Block";
78

89
class Card extends PureComponent {
910
render() {
@@ -19,7 +20,7 @@ class Card extends PureComponent {
1920
...props
2021
} = this.props;
2122

22-
const { SIZES, COLORS } = mergeTheme(expoTheme, theme);
23+
const { SIZES, COLORS } = mergeTheme({ ...expoTheme }, theme);
2324

2425
const cardStyles = StyleSheet.flatten([
2526
shadow && {
@@ -54,7 +55,7 @@ Card.defaultProps = {
5455
padding: null,
5556
shadow: false,
5657
outlined: false,
57-
theme: null,
58+
theme: {},
5859
style: {}
5960
};
6061

‎src/Input.js

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { PureComponent } from "react";
22
import { StyleSheet, TextInput } from "react-native";
33

4-
import Block from "./Block";
5-
6-
import * as expoTheme from "./theme";
4+
import expoTheme from "./theme";
75
import { rgba, mergeTheme } from "./utils";
86

97
class Input extends PureComponent {
@@ -30,24 +28,6 @@ class Input extends PureComponent {
3028
}
3129
}
3230

33-
handleTextStyles() {
34-
const { theme, style } = this.props;
35-
const { SIZES, COLORS } = mergeTheme(expoTheme, theme);
36-
37-
return StyleSheet.flatten([
38-
{
39-
borderWidth: 1,
40-
height: SIZES.base * 5.5,
41-
borderRadius: SIZES.border,
42-
borderColor: rgba(COLORS.black, 0.8),
43-
paddingHorizontal: SIZES.base,
44-
paddingVertical: SIZES.base,
45-
fontSize: SIZES.font
46-
},
47-
style
48-
]);
49-
}
50-
5131
onChange(value) {
5232
const { onChange, onValidation } = this.props;
5333
const isValid = this.handleValidation(value);
@@ -73,24 +53,35 @@ class Input extends PureComponent {
7353
}
7454

7555
render() {
76-
const { placeholder, children, flex, ...props } = this.props;
77-
const textStyles = this.handleTextStyles();
56+
const { placeholder, children, theme, style, ...props } = this.props;
57+
const { SIZES, COLORS } = mergeTheme({ ...expoTheme }, theme);
58+
59+
const textStyles = StyleSheet.flatten([
60+
{
61+
borderWidth: 1,
62+
height: SIZES.base * 5.5,
63+
borderRadius: SIZES.border,
64+
borderColor: rgba(COLORS.black, 0.8),
65+
paddingHorizontal: SIZES.base,
66+
paddingVertical: SIZES.base,
67+
fontSize: SIZES.font
68+
},
69+
style
70+
]);
7871

7972
return (
80-
<Block flex={flex}>
81-
<TextInput
82-
style={textStyles}
83-
autoCorrect={false}
84-
autoCapitalize="none"
85-
placeholder={placeholder}
86-
value={this.state.value}
87-
onFocus={event => this.onFocus(event)}
88-
onBlur={event => this.onBlur(event)}
89-
onChange={value => this.onChange(value)}
90-
{...props}>
91-
{children}
92-
</TextInput>
93-
</Block>
73+
<TextInput
74+
style={textStyles}
75+
autoCorrect={false}
76+
autoCapitalize="none"
77+
placeholder={placeholder}
78+
value={this.state.value}
79+
onFocus={event => this.onFocus(event)}
80+
onBlur={event => this.onBlur(event)}
81+
onChange={value => this.onChange(value)}
82+
{...props}>
83+
{children}
84+
</TextInput>
9485
);
9586
}
9687
}
@@ -103,7 +94,7 @@ Input.defaultProps = {
10394
onChange: null,
10495
onValidation: null,
10596
placeholder: null,
106-
theme: null,
97+
theme: {},
10798
style: {}
10899
};
109100

‎src/Text.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from "react";
22
import { Text, StyleSheet } from "react-native";
33

4-
import * as expoTheme from "./theme";
4+
import expoTheme from "./theme";
55
import { mergeTheme } from "./utils";
66

77
class Typography extends Component {
@@ -46,7 +46,7 @@ class Typography extends Component {
4646
...props
4747
} = this.props;
4848

49-
const { SIZES, COLORS, FONTS } = mergeTheme(expoTheme, theme);
49+
const { SIZES, COLORS, FONTS } = mergeTheme({ ...expoTheme }, theme);
5050

5151
const textStyles = StyleSheet.flatten([
5252
{
@@ -73,7 +73,6 @@ class Typography extends Component {
7373
light && { fontWeight: "300" },
7474
center && styles.center,
7575
right && styles.right,
76-
color && { color },
7776
// color shortcuts
7877
primary && { color: COLORS.primary },
7978
secondary && { color: COLORS.secondary },
@@ -85,6 +84,7 @@ class Typography extends Component {
8584
warning && { color: COLORS.warning },
8685
success && { color: COLORS.success },
8786
info && { color: COLORS.info },
87+
color && { color },
8888
style // rewrite predefined styles
8989
]);
9090

@@ -130,7 +130,7 @@ Typography.defaultProps = {
130130
warning: false,
131131
success: false,
132132
info: false,
133-
theme: null,
133+
theme: {},
134134
style: {}
135135
};
136136

0 commit comments

Comments
 (0)