react-native-unistyles 1.0.0-beta.6 → 1.0.0-rc.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +6 -588
- package/lib/commonjs/createUnistyles.js +0 -9
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/utils/index.js +43 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/module/createUnistyles.js +0 -9
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/utils/index.js +2 -1
- package/lib/module/utils/index.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +1 -5
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +2 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/package.json +13 -10
- package/src/__tests__/createUnistyles.spec.tsx +158 -0
- package/src/createUnistyles.ts +0 -10
- package/src/utils/index.ts +9 -1
- package/lib/commonjs/utils/breakpoints.spec.js +0 -154
- package/lib/commonjs/utils/breakpoints.spec.js.map +0 -1
- package/lib/commonjs/utils/mediaQueries.spec.js +0 -220
- package/lib/commonjs/utils/mediaQueries.spec.js.map +0 -1
- package/lib/commonjs/utils/styles.spec.js +0 -174
- package/lib/commonjs/utils/styles.spec.js.map +0 -1
- package/lib/module/utils/breakpoints.spec.js +0 -152
- package/lib/module/utils/breakpoints.spec.js.map +0 -1
- package/lib/module/utils/mediaQueries.spec.js +0 -218
- package/lib/module/utils/mediaQueries.spec.js.map +0 -1
- package/lib/module/utils/styles.spec.js +0 -172
- package/lib/module/utils/styles.spec.js.map +0 -1
- package/lib/typescript/src/utils/breakpoints.spec.d.ts +0 -2
- package/lib/typescript/src/utils/breakpoints.spec.d.ts.map +0 -1
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts +0 -2
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts.map +0 -1
- package/lib/typescript/src/utils/styles.spec.d.ts +0 -2
- package/lib/typescript/src/utils/styles.spec.d.ts.map +0 -1
@@ -1,218 +0,0 @@
|
|
1
|
-
import { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
|
2
|
-
describe('utils', () => {
|
3
|
-
describe('extractValues', () => {
|
4
|
-
it('should correctly extract a width with both bounds', () => {
|
5
|
-
const mediaQuery = 'w[100, 600]';
|
6
|
-
expect(extractValues(mediaQuery)).toEqual([100, 600]);
|
7
|
-
});
|
8
|
-
it('should correctly extract a width with lower bound equal to 0', () => {
|
9
|
-
const mediaQuery = 'w[0, 400]';
|
10
|
-
expect(extractValues(mediaQuery)).toEqual([0, 400]);
|
11
|
-
});
|
12
|
-
it('should correctly extract a height with single value', () => {
|
13
|
-
const mediaQuery = 'h[700]';
|
14
|
-
expect(extractValues(mediaQuery)).toEqual([700]);
|
15
|
-
});
|
16
|
-
it('should correctly extract a height with lower bound equal to 0', () => {
|
17
|
-
const mediaQuery = 'h[0,]';
|
18
|
-
expect(extractValues(mediaQuery)).toEqual([0]);
|
19
|
-
});
|
20
|
-
it('should correctly extract a width with no lower bound', () => {
|
21
|
-
const mediaQuery = 'w[,100]';
|
22
|
-
expect(extractValues(mediaQuery)).toEqual([0, 100]);
|
23
|
-
});
|
24
|
-
});
|
25
|
-
describe('isWithinTheWidth', () => {
|
26
|
-
it('should return true if the screen width is within the media query', () => {
|
27
|
-
const pairs = [{
|
28
|
-
width: 200,
|
29
|
-
query: 'w[120]'
|
30
|
-
}, {
|
31
|
-
width: 100,
|
32
|
-
query: 'w[,500]'
|
33
|
-
}, {
|
34
|
-
width: 0,
|
35
|
-
query: 'w[,500]'
|
36
|
-
}, {
|
37
|
-
width: 300,
|
38
|
-
query: 'w[300,500]'
|
39
|
-
}];
|
40
|
-
pairs.forEach(_ref => {
|
41
|
-
let {
|
42
|
-
width,
|
43
|
-
query
|
44
|
-
} = _ref;
|
45
|
-
expect(isWithinTheWidth(query, width)).toEqual(true);
|
46
|
-
});
|
47
|
-
});
|
48
|
-
it('should return false if the screen width is outside the media query', () => {
|
49
|
-
const pairs = [{
|
50
|
-
width: 120,
|
51
|
-
query: 'w[200]'
|
52
|
-
}, {
|
53
|
-
width: 501,
|
54
|
-
query: 'w[,500]'
|
55
|
-
}, {
|
56
|
-
width: 700,
|
57
|
-
query: 'w[200,500]'
|
58
|
-
}];
|
59
|
-
pairs.forEach(_ref2 => {
|
60
|
-
let {
|
61
|
-
width,
|
62
|
-
query
|
63
|
-
} = _ref2;
|
64
|
-
expect(isWithinTheWidth(query, width)).toEqual(false);
|
65
|
-
});
|
66
|
-
});
|
67
|
-
});
|
68
|
-
describe('isWithinTheHeight', () => {
|
69
|
-
it('should return true if the screen height is within the media query', () => {
|
70
|
-
const pairs = [{
|
71
|
-
height: 200,
|
72
|
-
query: 'h[120]'
|
73
|
-
}, {
|
74
|
-
height: 100,
|
75
|
-
query: 'h[,500]'
|
76
|
-
}, {
|
77
|
-
height: 0,
|
78
|
-
query: 'h[,500]'
|
79
|
-
}, {
|
80
|
-
height: 300,
|
81
|
-
query: 'h[300,500]'
|
82
|
-
}];
|
83
|
-
pairs.forEach(_ref3 => {
|
84
|
-
let {
|
85
|
-
height,
|
86
|
-
query
|
87
|
-
} = _ref3;
|
88
|
-
expect(isWithinTheHeight(query, height)).toEqual(true);
|
89
|
-
});
|
90
|
-
});
|
91
|
-
it('should return false if the screen height is outside the media query', () => {
|
92
|
-
const pairs = [{
|
93
|
-
height: 120,
|
94
|
-
query: 'h[200]'
|
95
|
-
}, {
|
96
|
-
height: 501,
|
97
|
-
query: 'h[,500]'
|
98
|
-
}, {
|
99
|
-
height: 700,
|
100
|
-
query: 'h[200,500]'
|
101
|
-
}];
|
102
|
-
pairs.forEach(_ref4 => {
|
103
|
-
let {
|
104
|
-
height,
|
105
|
-
query
|
106
|
-
} = _ref4;
|
107
|
-
expect(isWithinTheHeight(query, height)).toEqual(false);
|
108
|
-
});
|
109
|
-
});
|
110
|
-
});
|
111
|
-
describe('isWithinTheWidthAndHeight', () => {
|
112
|
-
it('should return true if the screen width and height are within the media query', () => {
|
113
|
-
const pairs = [{
|
114
|
-
screenSize: {
|
115
|
-
width: 200,
|
116
|
-
height: 600
|
117
|
-
},
|
118
|
-
query: 'w[, 200]:h[600]'
|
119
|
-
}, {
|
120
|
-
screenSize: {
|
121
|
-
width: 200,
|
122
|
-
height: 600
|
123
|
-
},
|
124
|
-
query: 'w[110]:h[400]'
|
125
|
-
}, {
|
126
|
-
screenSize: {
|
127
|
-
width: 400,
|
128
|
-
height: 800
|
129
|
-
},
|
130
|
-
query: 'w[400, 800]:h[400, 800]'
|
131
|
-
}];
|
132
|
-
pairs.forEach(_ref5 => {
|
133
|
-
let {
|
134
|
-
screenSize,
|
135
|
-
query
|
136
|
-
} = _ref5;
|
137
|
-
expect(isWithinTheWidthAndHeight(query, screenSize)).toEqual(true);
|
138
|
-
});
|
139
|
-
});
|
140
|
-
it('should return false if the screen width and height are outside the media query', () => {
|
141
|
-
const pairs = [{
|
142
|
-
screenSize: {
|
143
|
-
width: 200,
|
144
|
-
height: 600
|
145
|
-
},
|
146
|
-
query: 'w[, 220]:h[620]'
|
147
|
-
}, {
|
148
|
-
screenSize: {
|
149
|
-
width: 200,
|
150
|
-
height: 600
|
151
|
-
},
|
152
|
-
query: 'w[290]:h[400]'
|
153
|
-
}, {
|
154
|
-
screenSize: {
|
155
|
-
width: 400,
|
156
|
-
height: 800
|
157
|
-
},
|
158
|
-
query: 'w[, 800]:h[, 700]'
|
159
|
-
}];
|
160
|
-
pairs.forEach(_ref6 => {
|
161
|
-
let {
|
162
|
-
screenSize,
|
163
|
-
query
|
164
|
-
} = _ref6;
|
165
|
-
expect(isWithinTheWidthAndHeight(query, screenSize)).toEqual(false);
|
166
|
-
});
|
167
|
-
});
|
168
|
-
});
|
169
|
-
describe('isMediaQuery', () => {
|
170
|
-
it('should detect correct media queries', () => {
|
171
|
-
const correctMediaQueries = [':w[100]', ':w[100, 200]', ':w[, 300]', ':h[200]', ':h[0, 500]', ':h[, 750]', ':w[100]:h[200]', ':h[100]:w[200]', ':h[100, 200]:w[,400]', ':w[200]:h[200, 400]'];
|
172
|
-
correctMediaQueries.forEach(query => {
|
173
|
-
expect(isMediaQuery(query)).toEqual(true);
|
174
|
-
});
|
175
|
-
});
|
176
|
-
it('should detect incorrect media queries', () => {
|
177
|
-
const incorrectMediaQueries = [':w100]', ':w[100, 200', ':p[, 300]', ':&[200]', ':h[0 500]', ':h[p, 750]', ':w[0]:l[200]', ':[100]:w[200]', ':h(100, 200):w[400]', ':w[2OO]:h[200, 400]', '', 'x', '>300', ']]w200[[', ':w[ 100]', ':w[ , 300]', ':w[ , 200]:h[ 200 , 400]'];
|
178
|
-
incorrectMediaQueries.forEach(query => {
|
179
|
-
expect(isMediaQuery(query)).toEqual(false);
|
180
|
-
});
|
181
|
-
});
|
182
|
-
});
|
183
|
-
describe('getKeyForCustomMediaQuery', () => {
|
184
|
-
it('should return a key for string value based on media query', () => {
|
185
|
-
const mediaQueries = [['w[,200]', 'orange'], ['w[300, 400]', 'pink'], ['w[500, 600]', 'red']];
|
186
|
-
const screenSize = {
|
187
|
-
width: 300,
|
188
|
-
height: 700
|
189
|
-
};
|
190
|
-
expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual('w[300, 400]');
|
191
|
-
});
|
192
|
-
it('should return a key for number value based on media query', () => {
|
193
|
-
const mediaQueries = [['w[,200]', 200], ['w[250]', 300]];
|
194
|
-
const screenSize = {
|
195
|
-
width: 300,
|
196
|
-
height: 700
|
197
|
-
};
|
198
|
-
expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual('w[250]');
|
199
|
-
});
|
200
|
-
it('should return undefined for no match', () => {
|
201
|
-
const mediaQueries = [['w[,400]', 'green'], ['w[500, 999]', 'olive'], ['w[1000]', 'red']];
|
202
|
-
const screenSize = {
|
203
|
-
width: 450,
|
204
|
-
height: 1000
|
205
|
-
};
|
206
|
-
expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual(undefined);
|
207
|
-
});
|
208
|
-
it('should handle correctly complex media queries', () => {
|
209
|
-
const mediaQueries = [['w[,300]:h[200,700]', 200], ['w[250]:h[701]', 300], ['w[200]', 500]];
|
210
|
-
const screenSize = {
|
211
|
-
width: 300,
|
212
|
-
height: 700
|
213
|
-
};
|
214
|
-
expect(getKeyForCustomMediaQuery(mediaQueries, screenSize)).toEqual('w[,300]:h[200,700]');
|
215
|
-
});
|
216
|
-
});
|
217
|
-
});
|
218
|
-
//# sourceMappingURL=mediaQueries.spec.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["extractValues","getKeyForCustomMediaQuery","isMediaQuery","isWithinTheHeight","isWithinTheWidth","isWithinTheWidthAndHeight","describe","it","mediaQuery","expect","toEqual","pairs","width","query","forEach","_ref","_ref2","height","_ref3","_ref4","screenSize","_ref5","_ref6","correctMediaQueries","incorrectMediaQueries","mediaQueries","undefined"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.spec.ts"],"mappings":"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"}
|
@@ -1,172 +0,0 @@
|
|
1
|
-
import { parseStyle, proxifyFunction } from './styles';
|
2
|
-
describe('styles', () => {
|
3
|
-
describe('proxifyFunction', () => {
|
4
|
-
it('should parse style for dynamic function', () => {
|
5
|
-
const screenSize = {
|
6
|
-
width: 400,
|
7
|
-
height: 800
|
8
|
-
};
|
9
|
-
const breakpoint = 'sm';
|
10
|
-
const breakpoints = {
|
11
|
-
xs: 0,
|
12
|
-
sm: 400,
|
13
|
-
md: 800
|
14
|
-
};
|
15
|
-
const breakpointPairs = Object.entries(breakpoints);
|
16
|
-
const dynamicFunction = isEven => ({
|
17
|
-
backgroundColor: {
|
18
|
-
sm: isEven ? 'green' : 'red',
|
19
|
-
md: isEven ? 'orange' : 'pink'
|
20
|
-
}
|
21
|
-
});
|
22
|
-
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpointPairs)(true)).toEqual({
|
23
|
-
backgroundColor: 'green'
|
24
|
-
});
|
25
|
-
});
|
26
|
-
it('should return proxified function for custom media query', () => {
|
27
|
-
const screenSize = {
|
28
|
-
width: 400,
|
29
|
-
height: 800
|
30
|
-
};
|
31
|
-
const breakpoint = 'sm';
|
32
|
-
const breakpoints = {
|
33
|
-
xs: 0,
|
34
|
-
sm: 400,
|
35
|
-
md: 800
|
36
|
-
};
|
37
|
-
const breakpointPairs = Object.entries(breakpoints);
|
38
|
-
const dynamicFunction = isEven => ({
|
39
|
-
backgroundColor: {
|
40
|
-
':w[,399]': isEven ? 'green' : 'red',
|
41
|
-
':w[400]': isEven ? 'orange' : 'pink'
|
42
|
-
}
|
43
|
-
});
|
44
|
-
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpointPairs)(false)).toEqual({
|
45
|
-
backgroundColor: 'pink'
|
46
|
-
});
|
47
|
-
});
|
48
|
-
it('should return same function for no breakpoints nor media queries', () => {
|
49
|
-
const screenSize = {
|
50
|
-
width: 400,
|
51
|
-
height: 800
|
52
|
-
};
|
53
|
-
const breakpoint = 'sm';
|
54
|
-
const breakpoints = {
|
55
|
-
xs: 0,
|
56
|
-
sm: 400,
|
57
|
-
md: 800
|
58
|
-
};
|
59
|
-
const breakpointPairs = Object.entries(breakpoints);
|
60
|
-
const dynamicFunction = isEven => ({
|
61
|
-
backgroundColor: isEven ? 'pink' : 'purple'
|
62
|
-
});
|
63
|
-
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpointPairs)(false)).toEqual({
|
64
|
-
backgroundColor: 'purple'
|
65
|
-
});
|
66
|
-
});
|
67
|
-
});
|
68
|
-
describe('parseStyle', () => {
|
69
|
-
it('should correctly parse styles', () => {
|
70
|
-
const screenSize = {
|
71
|
-
width: 400,
|
72
|
-
height: 800
|
73
|
-
};
|
74
|
-
const breakpoint = 'sm';
|
75
|
-
const breakpoints = {
|
76
|
-
xs: 0,
|
77
|
-
sm: 400,
|
78
|
-
md: 800
|
79
|
-
};
|
80
|
-
const breakpointPairs = Object.entries(breakpoints);
|
81
|
-
const style = {
|
82
|
-
fontSize: {
|
83
|
-
sm: 12,
|
84
|
-
md: 20
|
85
|
-
},
|
86
|
-
backgroundColor: {
|
87
|
-
xs: 'pink',
|
88
|
-
md: 'orange'
|
89
|
-
},
|
90
|
-
fontWeight: 'bold'
|
91
|
-
};
|
92
|
-
const parsedStyles = parseStyle(style, breakpoint, screenSize, breakpointPairs);
|
93
|
-
expect(parsedStyles).toEqual({
|
94
|
-
fontSize: 12,
|
95
|
-
backgroundColor: 'pink',
|
96
|
-
fontWeight: 'bold'
|
97
|
-
});
|
98
|
-
});
|
99
|
-
it('should correctly parse transform styles', () => {
|
100
|
-
const screenSize = {
|
101
|
-
width: 400,
|
102
|
-
height: 800
|
103
|
-
};
|
104
|
-
const breakpoint = 'sm';
|
105
|
-
const breakpoints = {
|
106
|
-
xs: 0,
|
107
|
-
sm: 400,
|
108
|
-
md: 800
|
109
|
-
};
|
110
|
-
const breakpointPairs = Object.entries(breakpoints);
|
111
|
-
const style = {
|
112
|
-
transform: [{
|
113
|
-
translateX: {
|
114
|
-
sm: 120,
|
115
|
-
md: 200
|
116
|
-
},
|
117
|
-
translateY: 200
|
118
|
-
}]
|
119
|
-
};
|
120
|
-
const parsedStyles = parseStyle(style, breakpoint, screenSize, breakpointPairs);
|
121
|
-
expect(parsedStyles).toEqual({
|
122
|
-
transform: [{
|
123
|
-
translateX: 120,
|
124
|
-
translateY: 200
|
125
|
-
}]
|
126
|
-
});
|
127
|
-
});
|
128
|
-
it('should correctly parse shadowOffset styles', () => {
|
129
|
-
const screenSize = {
|
130
|
-
width: 400,
|
131
|
-
height: 800
|
132
|
-
};
|
133
|
-
const breakpoint = 'sm';
|
134
|
-
const breakpoints = {
|
135
|
-
xs: 0,
|
136
|
-
sm: 400,
|
137
|
-
md: 800
|
138
|
-
};
|
139
|
-
const breakpointPairs = Object.entries(breakpoints);
|
140
|
-
const style = {
|
141
|
-
shadowOffset: {
|
142
|
-
width: 0,
|
143
|
-
height: 4
|
144
|
-
}
|
145
|
-
};
|
146
|
-
const styleWithBreakpoints = {
|
147
|
-
shadowOffset: {
|
148
|
-
width: 0,
|
149
|
-
height: {
|
150
|
-
sm: 10,
|
151
|
-
md: 20
|
152
|
-
}
|
153
|
-
}
|
154
|
-
};
|
155
|
-
const parsedStyles = parseStyle(style, breakpoint, screenSize, breakpointPairs);
|
156
|
-
const parsedStylesWithBreakpoints = parseStyle(styleWithBreakpoints, breakpoint, screenSize, breakpointPairs);
|
157
|
-
expect(parsedStyles).toEqual({
|
158
|
-
shadowOffset: {
|
159
|
-
width: 0,
|
160
|
-
height: 4
|
161
|
-
}
|
162
|
-
});
|
163
|
-
expect(parsedStylesWithBreakpoints).toEqual({
|
164
|
-
shadowOffset: {
|
165
|
-
width: 0,
|
166
|
-
height: 10
|
167
|
-
}
|
168
|
-
});
|
169
|
-
});
|
170
|
-
});
|
171
|
-
});
|
172
|
-
//# sourceMappingURL=styles.spec.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","breakpointPairs","Object","entries","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight","parsedStyles","transform","translateX","translateY","shadowOffset","styleWithBreakpoints","parsedStylesWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"breakpoints.spec.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.spec.ts"],"names":[],"mappings":""}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"mediaQueries.spec.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.spec.ts"],"names":[],"mappings":""}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"styles.spec.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.spec.ts"],"names":[],"mappings":""}
|