react-native-unistyles 1.0.0-beta.1
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/LICENSE +20 -0
- package/README.md +243 -0
- package/lib/commonjs/UnistylesTheme.js +21 -0
- package/lib/commonjs/UnistylesTheme.js.map +1 -0
- package/lib/commonjs/createUnistyles.js +52 -0
- package/lib/commonjs/createUnistyles.js.map +1 -0
- package/lib/commonjs/index.js +20 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/types.js +6 -0
- package/lib/commonjs/types.js.map +1 -0
- package/lib/commonjs/utils/breakpoints.js +139 -0
- package/lib/commonjs/utils/breakpoints.js.map +1 -0
- package/lib/commonjs/utils/breakpoints.spec.js +149 -0
- package/lib/commonjs/utils/breakpoints.spec.js.map +1 -0
- package/lib/commonjs/utils/common.js +11 -0
- package/lib/commonjs/utils/common.js.map +1 -0
- package/lib/commonjs/utils/index.js +32 -0
- package/lib/commonjs/utils/index.js.map +1 -0
- package/lib/commonjs/utils/mediaQueries.js +189 -0
- package/lib/commonjs/utils/mediaQueries.js.map +1 -0
- package/lib/commonjs/utils/mediaQueries.spec.js +220 -0
- package/lib/commonjs/utils/mediaQueries.spec.js.map +1 -0
- package/lib/commonjs/utils/styles.js +82 -0
- package/lib/commonjs/utils/styles.js.map +1 -0
- package/lib/commonjs/utils/styles.spec.js +98 -0
- package/lib/commonjs/utils/styles.spec.js.map +1 -0
- package/lib/module/UnistylesTheme.js +12 -0
- package/lib/module/UnistylesTheme.js.map +1 -0
- package/lib/module/createUnistyles.js +45 -0
- package/lib/module/createUnistyles.js.map +1 -0
- package/lib/module/index.js +3 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/types.js +2 -0
- package/lib/module/types.js.map +1 -0
- package/lib/module/utils/breakpoints.js +131 -0
- package/lib/module/utils/breakpoints.js.map +1 -0
- package/lib/module/utils/breakpoints.spec.js +147 -0
- package/lib/module/utils/breakpoints.spec.js.map +1 -0
- package/lib/module/utils/common.js +4 -0
- package/lib/module/utils/common.js.map +1 -0
- package/lib/module/utils/index.js +3 -0
- package/lib/module/utils/index.js.map +1 -0
- package/lib/module/utils/mediaQueries.js +176 -0
- package/lib/module/utils/mediaQueries.js.map +1 -0
- package/lib/module/utils/mediaQueries.spec.js +218 -0
- package/lib/module/utils/mediaQueries.spec.js.map +1 -0
- package/lib/module/utils/styles.js +75 -0
- package/lib/module/utils/styles.js.map +1 -0
- package/lib/module/utils/styles.spec.js +96 -0
- package/lib/module/utils/styles.spec.js.map +1 -0
- package/lib/typescript/src/UnistylesTheme.d.ts +9 -0
- package/lib/typescript/src/UnistylesTheme.d.ts.map +1 -0
- package/lib/typescript/src/createUnistyles.d.ts +9 -0
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +3 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/types.d.ts +27 -0
- package/lib/typescript/src/types.d.ts.map +1 -0
- package/lib/typescript/src/utils/breakpoints.d.ts +63 -0
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -0
- package/lib/typescript/src/utils/breakpoints.spec.d.ts +2 -0
- package/lib/typescript/src/utils/breakpoints.spec.d.ts.map +1 -0
- package/lib/typescript/src/utils/common.d.ts +2 -0
- package/lib/typescript/src/utils/common.d.ts.map +1 -0
- package/lib/typescript/src/utils/index.d.ts +3 -0
- package/lib/typescript/src/utils/index.d.ts.map +1 -0
- package/lib/typescript/src/utils/mediaQueries.d.ts +130 -0
- package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -0
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts +2 -0
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts.map +1 -0
- package/lib/typescript/src/utils/styles.d.ts +56 -0
- package/lib/typescript/src/utils/styles.d.ts.map +1 -0
- package/lib/typescript/src/utils/styles.spec.d.ts +2 -0
- package/lib/typescript/src/utils/styles.spec.d.ts.map +1 -0
- package/package.json +132 -0
- package/src/UnistylesTheme.tsx +17 -0
- package/src/createUnistyles.ts +56 -0
- package/src/index.ts +2 -0
- package/src/types.ts +52 -0
- package/src/utils/breakpoints.ts +140 -0
- package/src/utils/common.ts +3 -0
- package/src/utils/index.ts +2 -0
- package/src/utils/mediaQueries.ts +201 -0
- package/src/utils/styles.ts +95 -0
@@ -0,0 +1,176 @@
|
|
1
|
+
/**
|
2
|
+
* Extracts numeric values from a coded string.
|
3
|
+
*
|
4
|
+
* The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
|
5
|
+
* It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
|
6
|
+
*
|
7
|
+
* @param {string} codedValue - The input string to extract values from.
|
8
|
+
* @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
|
9
|
+
*
|
10
|
+
* @example
|
11
|
+
* extractValues("w[100,200]") // returns [100, 200]
|
12
|
+
* extractValues("h[300]") // returns [300]
|
13
|
+
* extractValues("h[,300]") // returns [0,300]
|
14
|
+
* extractValues("h[100,]") // returns [100]
|
15
|
+
*/
|
16
|
+
export const extractValues = codedValue => {
|
17
|
+
const [lh, rh] = codedValue.replace(/[wh[\]]/g, '').split(',');
|
18
|
+
return rh ? [Number(lh), Number(rh)] : [Number(lh)];
|
19
|
+
};
|
20
|
+
|
21
|
+
/**
|
22
|
+
* Determines if the given screen size matches the specified breakpoint query.
|
23
|
+
*
|
24
|
+
* The function checks if the screen size (width and/or height) falls within the range
|
25
|
+
* specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
|
26
|
+
* or both.
|
27
|
+
*
|
28
|
+
* @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
|
29
|
+
* @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
|
30
|
+
* @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
|
31
|
+
*
|
32
|
+
* @example
|
33
|
+
* const screenSize = { width: 150, height: 350 }
|
34
|
+
* isWithinBreakpoint('w[100,200]', screenSize) // returns true
|
35
|
+
* isWithinBreakpoint('h[400]', screenSize) // returns false
|
36
|
+
*/
|
37
|
+
export const isWithinBreakpoint = (query, screenSize) => {
|
38
|
+
if (query.includes('w') && query.includes('h')) {
|
39
|
+
return isWithinTheWidthAndHeight(query, screenSize);
|
40
|
+
}
|
41
|
+
if (query.charAt(0) === 'w') {
|
42
|
+
return isWithinTheWidth(query, screenSize.width);
|
43
|
+
}
|
44
|
+
if (query.charAt(0) === 'h') {
|
45
|
+
return isWithinTheHeight(query, screenSize.height);
|
46
|
+
}
|
47
|
+
return false;
|
48
|
+
};
|
49
|
+
|
50
|
+
/**
|
51
|
+
* Determines if the given width matches the specified width range in the query.
|
52
|
+
*
|
53
|
+
* The function checks if the provided width falls within the range specified by the query.
|
54
|
+
* The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
|
55
|
+
* it's treated as a minimum width.
|
56
|
+
*
|
57
|
+
* @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
|
58
|
+
* @param {number} width - The width to check against the query.
|
59
|
+
* @returns {boolean} True if the width matches the query range, false otherwise.
|
60
|
+
*
|
61
|
+
* @example
|
62
|
+
* isWithinTheWidth('w[100,200]', 150) // returns true
|
63
|
+
* isWithinTheWidth('w[100]', 50) // returns false
|
64
|
+
* isWithinTheWidth('w[100]', 150) // returns true
|
65
|
+
*/
|
66
|
+
export const isWithinTheWidth = (query, width) => {
|
67
|
+
const [minWidth, maxWidth] = extractValues(query);
|
68
|
+
if (maxWidth && width >= minWidth && width <= maxWidth) {
|
69
|
+
return true;
|
70
|
+
}
|
71
|
+
return !maxWidth && width >= minWidth;
|
72
|
+
};
|
73
|
+
|
74
|
+
/**
|
75
|
+
* Determines if the given height matches the specified height range in the query.
|
76
|
+
*
|
77
|
+
* The function checks if the provided height falls within the range specified by the query.
|
78
|
+
* The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
|
79
|
+
* it's treated as a minimum height.
|
80
|
+
*
|
81
|
+
* @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
|
82
|
+
* @param {number} height - The height to check against the query.
|
83
|
+
* @returns {boolean} True if the height matches the query range, false otherwise.
|
84
|
+
*
|
85
|
+
* @example
|
86
|
+
* isWithinTheHeight('h[100,200]', 150) // returns true
|
87
|
+
* isWithinTheHeight('h[100]', 50) // returns false
|
88
|
+
* isWithinTheHeight('h[100]', 150) // returns true
|
89
|
+
*/
|
90
|
+
export const isWithinTheHeight = (query, height) => {
|
91
|
+
const [minHeight, maxHeight] = extractValues(query);
|
92
|
+
if (maxHeight && height >= minHeight && height <= maxHeight) {
|
93
|
+
return true;
|
94
|
+
}
|
95
|
+
return !maxHeight && height >= minHeight;
|
96
|
+
};
|
97
|
+
|
98
|
+
/**
|
99
|
+
* Determines if the given screen size matches both the specified width and height ranges in the query.
|
100
|
+
*
|
101
|
+
* The function checks if the provided screen size (both width and height) falls within the ranges
|
102
|
+
* specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
|
103
|
+
*
|
104
|
+
* @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
|
105
|
+
* @param {ScreenSize} screenSize - The screen size to check against the query.
|
106
|
+
* @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
|
107
|
+
*
|
108
|
+
* @example
|
109
|
+
* const screenSize = { width: 150, height: 350 }
|
110
|
+
* isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
|
111
|
+
* isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
|
112
|
+
*/
|
113
|
+
export const isWithinTheWidthAndHeight = (query, screenSize) => {
|
114
|
+
const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(q, screenSize)).filter(Boolean);
|
115
|
+
return result.length === 2;
|
116
|
+
};
|
117
|
+
|
118
|
+
/**
|
119
|
+
* Checks if the given query string is a valid custom media query.
|
120
|
+
*
|
121
|
+
* The valid custom media query formats include:
|
122
|
+
* - :w[200]
|
123
|
+
* - :w[0, 200]
|
124
|
+
* - :w[, 300]
|
125
|
+
* - :h[200]
|
126
|
+
* - :h[0, 500]
|
127
|
+
* - :h[,200]
|
128
|
+
* - :w[100, 300]:h[200,500]
|
129
|
+
* - :h[200,500]:w[100, 300]
|
130
|
+
*
|
131
|
+
* @param {string} query - The query string to be checked.
|
132
|
+
* @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
|
133
|
+
* @example
|
134
|
+
*
|
135
|
+
* isMediaQuery(':w[200]') // true
|
136
|
+
* isMediaQuery(':w100]') // false
|
137
|
+
*/
|
138
|
+
export const isMediaQuery = query => {
|
139
|
+
const regex = /^(?:(:w\[\d*(?:,\s?\d+)?])?(:h\[\d*(?:,\s?\d+)?])?|(:h\[\d*(?:,\s?\d+)?])?(:w\[\d*(?:,\s?\d+)?])?)$/;
|
140
|
+
return query.length > 0 && regex.test(query);
|
141
|
+
};
|
142
|
+
|
143
|
+
/**
|
144
|
+
* Retrieves the first matching custom media query key based on the provided screen size.
|
145
|
+
*
|
146
|
+
* The function processes an array of media queries and returns the first query that matches
|
147
|
+
* the given screen size. The media queries can be in formats like:
|
148
|
+
* - w[200]
|
149
|
+
* - w[0, 200]
|
150
|
+
* - w[, 300]
|
151
|
+
* - h[200]
|
152
|
+
* - h[0, 500]
|
153
|
+
* - h[,200]
|
154
|
+
* - w[100, 300]:h[200,500]
|
155
|
+
* - h[200,500]:w[100, 300]
|
156
|
+
*
|
157
|
+
* @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
|
158
|
+
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
159
|
+
* @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
|
160
|
+
* @example
|
161
|
+
*
|
162
|
+
* const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
|
163
|
+
* const size = { width: 250, height: 400 }
|
164
|
+
* getKeyForCustomMediaQuery(queries, size) // ':w[200]
|
165
|
+
*/
|
166
|
+
export const getKeyForCustomMediaQuery = (mediaQueries, screenSize) => {
|
167
|
+
const [matchedQuery] = mediaQueries.flatMap(_ref => {
|
168
|
+
let [key] = _ref;
|
169
|
+
if (key.includes('w') && key.includes('h')) {
|
170
|
+
return isWithinBreakpoint(key, screenSize) ? key : undefined;
|
171
|
+
}
|
172
|
+
return key.split(':').filter(Boolean).map(query => isWithinBreakpoint(query, screenSize) ? key : undefined);
|
173
|
+
}).filter(Boolean);
|
174
|
+
return matchedQuery;
|
175
|
+
};
|
176
|
+
//# sourceMappingURL=mediaQueries.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["extractValues","codedValue","lh","rh","replace","split","Number","isWithinBreakpoint","query","screenSize","includes","isWithinTheWidthAndHeight","charAt","isWithinTheWidth","width","isWithinTheHeight","height","minWidth","maxWidth","minHeight","maxHeight","result","filter","Boolean","map","q","length","isMediaQuery","regex","test","getKeyForCustomMediaQuery","mediaQueries","matchedQuery","flatMap","_ref","key","undefined"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.ts"],"mappings":"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"}
|
@@ -0,0 +1,218 @@
|
|
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[['];
|
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
|
@@ -0,0 +1 @@
|
|
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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"}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import { getValueForBreakpoint } from './breakpoints';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Proxies a function to parse its return value for custom media queries or breakpoints.
|
5
|
+
*
|
6
|
+
* If the function's string representation contains a custom media query or a defined breakpoint,
|
7
|
+
* the returned function will be proxied to parse its return value based on the provided screen size and breakpoints.
|
8
|
+
* If neither is found, the original function is returned.
|
9
|
+
*
|
10
|
+
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
11
|
+
*
|
12
|
+
* @param {Function} fn - The function to be proxified.
|
13
|
+
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
14
|
+
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
15
|
+
* @param {B} breakpoints - An object representing the defined breakpoints.
|
16
|
+
*
|
17
|
+
* @returns {Function} Returns the proxified function or the original function if no custom media query or breakpoint is found in its string representation.
|
18
|
+
*
|
19
|
+
* @example
|
20
|
+
*
|
21
|
+
* const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
|
22
|
+
* const screenSize = { width: 250, height: 400 }
|
23
|
+
* const breakpoints = { sm: 300, md: 600 }
|
24
|
+
*
|
25
|
+
* const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
|
26
|
+
* proxifiedFunction() // parsed style based on screenSize and breakpoints
|
27
|
+
*/
|
28
|
+
export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => {
|
29
|
+
const stringifiedFunction = fn.toString();
|
30
|
+
const hasCustomMediaQuery = stringifiedFunction.includes(':w[') || stringifiedFunction.includes(':h[');
|
31
|
+
const hasBreakpoint = Object.keys(breakpoints).some(bp => stringifiedFunction.includes(bp));
|
32
|
+
if (!hasCustomMediaQuery && !hasBreakpoint) {
|
33
|
+
return fn;
|
34
|
+
}
|
35
|
+
return new Proxy(fn, {
|
36
|
+
apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
|
37
|
+
});
|
38
|
+
};
|
39
|
+
|
40
|
+
/**
|
41
|
+
* Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
|
42
|
+
*
|
43
|
+
* The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
|
44
|
+
* it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
|
45
|
+
*
|
46
|
+
* @template T - The type of the style object.
|
47
|
+
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
48
|
+
*
|
49
|
+
* @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
|
50
|
+
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
51
|
+
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
52
|
+
* @param {B} breakpoints - An object representing the defined breakpoints.
|
53
|
+
*
|
54
|
+
* @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
|
55
|
+
*
|
56
|
+
* @example
|
57
|
+
*
|
58
|
+
* const style = { fontSize: { sm: '12px', md: '16px' } }
|
59
|
+
* const screenSize = { width: 300, height: 400 }
|
60
|
+
* const breakpoints = { xs: 0, sm: 300, md: 600 }
|
61
|
+
*
|
62
|
+
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
63
|
+
* // { fontSize: '12px' }
|
64
|
+
*/
|
65
|
+
export const parseStyle = (style, breakpoint, screenSize, breakpoints) => Object.fromEntries(Object.entries(style).map(_ref => {
|
66
|
+
let [key, value] = _ref;
|
67
|
+
const isDynamicFunction = typeof value === 'function';
|
68
|
+
const isValidStyle = typeof value !== 'object' || key === 'transform';
|
69
|
+
if (isDynamicFunction || isValidStyle) {
|
70
|
+
return [key, value];
|
71
|
+
}
|
72
|
+
const valueWithBreakpoint = value;
|
73
|
+
return [key, getValueForBreakpoint(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
|
74
|
+
}));
|
75
|
+
//# sourceMappingURL=styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","stringifiedFunction","toString","hasCustomMediaQuery","includes","hasBreakpoint","Object","keys","some","bp","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","fromEntries","entries","map","_ref","key","value","isDynamicFunction","isValidStyle","valueWithBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH;EACX,MAAMC,mBAAmB,GAAGJ,EAAE,CAACK,QAAQ,CAAC,CAAC;EACzC,MAAMC,mBAAmB,GAAGF,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC,IAAIH,mBAAmB,CAACG,QAAQ,CAAC,KAAK,CAAC;EACtG,MAAMC,aAAa,GAAGC,MAAM,CACvBC,IAAI,CAACP,WAAW,CAAC,CACjBQ,IAAI,CAACC,EAAE,IAAIR,mBAAmB,CAACG,QAAQ,CAACK,EAAE,CAAC,CAAC;EAEjD,IAAI,CAACN,mBAAmB,IAAI,CAACE,aAAa,EAAE;IACxC,OAAOR,EAAE;EACb;EAEA,OAAO,IAAIa,KAAK,CAACb,EAAE,EAAE;IACjBc,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW;EAC5F,CAAC,CAAC;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMe,UAAU,GAAGA,CACtBC,KAA8B,EAC9BlB,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACbM,MAAM,CACNW,WAAW,CAACX,MAAM,CACdY,OAAO,CAACF,KAAK,CAAC,CACdG,GAAG,CAACC,IAAA,IAAkB;EAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;EACd,MAAMG,iBAAiB,GAAG,OAAOD,KAAK,KAAK,UAAU;EACrD,MAAME,YAAY,GAAG,OAAOF,KAAK,KAAK,QAAQ,IAAID,GAAG,KAAK,WAAW;EAErE,IAAIE,iBAAiB,IAAIC,YAAY,EAAE;IACnC,OAAO,CAACH,GAAG,EAAEC,KAAK,CAAC;EACvB;EAEA,MAAMG,mBAAmB,GAAGH,KAAkD;EAE9E,OAAO,CAACD,GAAG,EAAE1B,qBAAqB,CAAI8B,mBAAmB,EAAE3B,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;AACpG,CAAC,CACL,CAAC"}
|
@@ -0,0 +1,96 @@
|
|
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 dynamicFunction = isEven => ({
|
16
|
+
backgroundColor: {
|
17
|
+
sm: isEven ? 'green' : 'red',
|
18
|
+
md: isEven ? 'orange' : 'pink'
|
19
|
+
}
|
20
|
+
});
|
21
|
+
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpoints)(true)).toEqual({
|
22
|
+
backgroundColor: 'green'
|
23
|
+
});
|
24
|
+
});
|
25
|
+
it('should return proxified function for custom media query', () => {
|
26
|
+
const screenSize = {
|
27
|
+
width: 400,
|
28
|
+
height: 800
|
29
|
+
};
|
30
|
+
const breakpoint = 'sm';
|
31
|
+
const breakpoints = {
|
32
|
+
xs: 0,
|
33
|
+
sm: 400,
|
34
|
+
md: 800
|
35
|
+
};
|
36
|
+
const dynamicFunction = isEven => ({
|
37
|
+
backgroundColor: {
|
38
|
+
':w[,399]': isEven ? 'green' : 'red',
|
39
|
+
':w[400]': isEven ? 'orange' : 'pink'
|
40
|
+
}
|
41
|
+
});
|
42
|
+
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpoints)(false)).toEqual({
|
43
|
+
backgroundColor: 'pink'
|
44
|
+
});
|
45
|
+
});
|
46
|
+
it('should return same function for no breakpoints nor media queries', () => {
|
47
|
+
const screenSize = {
|
48
|
+
width: 400,
|
49
|
+
height: 800
|
50
|
+
};
|
51
|
+
const breakpoint = 'sm';
|
52
|
+
const breakpoints = {
|
53
|
+
xs: 0,
|
54
|
+
sm: 400,
|
55
|
+
md: 800
|
56
|
+
};
|
57
|
+
const dynamicFunction = isEven => ({
|
58
|
+
backgroundColor: isEven ? 'pink' : 'purple'
|
59
|
+
});
|
60
|
+
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpoints)(false)).toEqual({
|
61
|
+
backgroundColor: 'purple'
|
62
|
+
});
|
63
|
+
});
|
64
|
+
});
|
65
|
+
describe('parseStyle', () => {
|
66
|
+
it('should correctly parse styles', () => {
|
67
|
+
const screenSize = {
|
68
|
+
width: 400,
|
69
|
+
height: 800
|
70
|
+
};
|
71
|
+
const breakpoint = 'sm';
|
72
|
+
const breakpoints = {
|
73
|
+
xs: 0,
|
74
|
+
sm: 400,
|
75
|
+
md: 800
|
76
|
+
};
|
77
|
+
const style = {
|
78
|
+
fontSize: {
|
79
|
+
sm: 12,
|
80
|
+
md: 20
|
81
|
+
},
|
82
|
+
backgroundColor: {
|
83
|
+
xs: 'pink',
|
84
|
+
md: 'orange'
|
85
|
+
},
|
86
|
+
fontWeight: 'bold'
|
87
|
+
};
|
88
|
+
expect(parseStyle(style, breakpoint, screenSize, breakpoints)).toEqual({
|
89
|
+
fontSize: 12,
|
90
|
+
backgroundColor: 'pink',
|
91
|
+
fontWeight: 'bold'
|
92
|
+
});
|
93
|
+
});
|
94
|
+
});
|
95
|
+
});
|
96
|
+
//# sourceMappingURL=styles.spec.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { PropsWithChildren } from 'react';
|
3
|
+
interface UnistylesThemeProps extends PropsWithChildren {
|
4
|
+
theme: any;
|
5
|
+
}
|
6
|
+
export declare const UnistylesContext: React.Context<{}>;
|
7
|
+
export declare const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps>;
|
8
|
+
export {};
|
9
|
+
//# sourceMappingURL=UnistylesTheme.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"UnistylesTheme.d.ts","sourceRoot":"","sources":["../../../src/UnistylesTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,UAAU,mBAAoB,SAAQ,iBAAiB;IACnD,KAAK,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,gBAAgB,mBAAoB,CAAA;AAEjD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAOvE,CAAA"}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
|
2
|
+
export declare const createUnistyles: <B extends Record<string, number>, T = {}>(breakpoints: B) => {
|
3
|
+
createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => S;
|
4
|
+
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
|
5
|
+
theme: T;
|
6
|
+
styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
|
7
|
+
};
|
8
|
+
};
|
9
|
+
//# sourceMappingURL=createUnistyles.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAc,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI3H,eAAO,MAAM,eAAe;;;;;;CAiD3B,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
|