Skip to content

Commit 4bb080e

Browse files
chrisrzhouchrisrzhou
committed
refactor: update deps (fix tests/code)
1 parent 094011e commit 4bb080e

23 files changed

+149
-99
lines changed

‎cypress/fixtures/default-system.js

+2
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ const system = {
1111
variants: {},
1212
},
1313
theme: {
14+
backgrounds: {},
1415
animations: {},
1516
borders: {},
1617
borderStyles: {},
1718
borderWidths: {},
1819
colors: {},
20+
filters: {},
1921
fontFamilies: {},
2022
fontSizes: {},
2123
fontWeights: {},

‎cypress/tests/components/text.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('Text', () => {
4141
{wordBreak: 'break-all'},
4242
{wordSpacing: '4.2px'},
4343
];
44-
fontProps.forEach((props) => {
44+
for (const props of fontProps) {
4545
const [propName, propValue] = Object.entries(props)[0];
4646
const cssPropertyName = decamelizeCssProperty(propName);
4747
describe(propName, () => {
@@ -54,7 +54,7 @@ describe('Text', () => {
5454
cy.get('#test').should('have.css', cssPropertyName, propValue);
5555
});
5656
});
57-
});
57+
}
5858

5959
describe('variant', () => {
6060
it('should use the variant style defined in system.styles.typography.variants', () => {

‎cypress/tests/system/load/config/element-shorthand-props-mapping.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ describe('config.elementShorthandPropsMapping', () => {
8080
padding: ['p'],
8181
},
8282
};
83-
[Element, Icon, Layout, Text].forEach((Component) => {
83+
for (const Component of [Element, Icon, Layout, Text]) {
8484
mountWithSystem(
8585
<Component id="test" color="rgb(255, 0, 0)" m="42px" p="24px">
8686
Component
@@ -92,6 +92,6 @@ describe('config.elementShorthandPropsMapping', () => {
9292
.should('have.css', 'color', 'rgb(255, 0, 0)')
9393
.should('have.css', 'margin', '42px')
9494
.should('have.css', 'padding', '24px');
95-
});
95+
}
9696
});
9797
});

‎cypress/tests/system/load/config/element-styles.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('config.elementStyles', () => {
4545
});
4646

4747
it('should apply elementStyles for all UI components', () => {
48-
[Element, Icon, Layout, Text].forEach((Component) => {
48+
for (const Component of [Element, Icon, Layout, Text]) {
4949
mountWithSystem(
5050
<Component disabled id="test" fontSize="42px">
5151
Component
@@ -58,6 +58,6 @@ describe('config.elementStyles', () => {
5858
.should('have.css', 'background-color', 'rgb(225, 225, 225)')
5959
.should('have.css', 'opacity', '0.3')
6060
.should('have.css', 'font-size', '42px');
61-
});
61+
}
6262
});
6363
});

‎cypress/tests/system/load/config/responsive-css-properties.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ describe('config.responsiveCssProperties', () => {
4848
});
4949

5050
it('should apply responsive style value on specified responsive CSS properties', () => {
51-
viewportWidths.forEach((viewportWidth, i) => {
51+
for (const [i, viewportWidth] of viewportWidths.entries()) {
5252
mountWithSystem(
5353
<Element id="test" styles={responsiveStyles}>
5454
Element
@@ -68,12 +68,12 @@ describe('config.responsiveCssProperties', () => {
6868
// Unregistered and non-responsive styles
6969
.should('have.css', 'color', responsiveStyles.color)
7070
.should('have.css', 'margin', responsiveStyles.margin[2]);
71-
});
71+
}
7272
});
7373

7474
it('should apply responsive style value on specified responsive CSS properties for all UI components', () => {
75-
[Element, Icon, Layout, Text].forEach((Component) => {
76-
viewportWidths.forEach((viewportWidth, i) => {
75+
for (const Component of [Element, Icon, Layout, Text]) {
76+
for (const [i, viewportWidth] of viewportWidths.entries()) {
7777
mountWithSystem(
7878
<Component id="test" styles={responsiveStyles}>
7979
Element
@@ -93,7 +93,7 @@ describe('config.responsiveCssProperties', () => {
9393
// Unregistered and non-responsive styles
9494
.should('have.css', 'color', responsiveStyles.color)
9595
.should('have.css', 'margin', responsiveStyles.margin[2]);
96-
});
97-
});
96+
}
97+
}
9898
});
9999
});

‎cypress/tests/system/styles/breakpoints.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ describe('styles.breakpoints', () => {
4242
});
4343

4444
it('should apply responsive style value on specified responsive CSS properties for all UI components', () => {
45-
[Element, Icon, Layout, Text].forEach((Component) => {
46-
viewportWidths.forEach((viewportWidth, i) => {
45+
for (const Component of [Element, Icon, Layout, Text]) {
46+
for (const [i, viewportWidth] of viewportWidths.entries()) {
4747
mountWithSystem(
4848
<Component id="test" styles={responsiveStyles}>
4949
Element
@@ -63,7 +63,7 @@ describe('styles.breakpoints', () => {
6363
// Unregistered and non-responsive styles
6464
.should('have.css', 'color', responsiveStyles.color)
6565
.should('have.css', 'margin', responsiveStyles.margin[2]);
66-
});
67-
});
66+
}
67+
}
6868
});
6969
});

‎cypress/tests/system/styles/variants.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const system = {
1818

1919
describe('styles.variants', () => {
2020
it('should apply variant style via Element, Icon, Layout element', () => {
21-
[Element, Icon, Layout].forEach((Component) => {
21+
for (const Component of [Element, Icon, Layout]) {
2222
mountWithSystem(
2323
<Component id="test" variant="Container.primary">
2424
Component
@@ -28,6 +28,6 @@ describe('styles.variants', () => {
2828
cy.get('#test')
2929
.should('have.css', 'margin', '42px')
3030
.should('have.css', 'padding', '42px');
31-
});
31+
}
3232
});
3333
});

‎cypress/tests/system/theme/css-property-values.js

+16-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {themeMapping} from 'uinix-theme';
2+
import {defaultThemeSpec} from 'uinix-theme';
33

44
import {Element} from '../../../../index.js';
55
import {decamelizeCssProperty, mountWithSystem} from '../../../utils/index.js';
@@ -9,6 +9,10 @@ const system = {
99
animations: {
1010
default: '2s ease-in-out 0s infinite normal none running none',
1111
},
12+
backgrounds: {
13+
default:
14+
'rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(255, 0, 0), rgb(0, 0, 255)) repeat scroll 0% 0% / auto padding-box border-box',
15+
},
1216
borders: {
1317
default: '1px solid rgb(255, 0, 0)',
1418
},
@@ -21,6 +25,9 @@ const system = {
2125
colors: {
2226
default: 'rgb(0, 0, 255)',
2327
},
28+
filters: {
29+
default: 'blur(5px)',
30+
},
2431
fontFamilies: {
2532
default: 'impact',
2633
},
@@ -75,10 +82,13 @@ const defaultStyle = {
7582
};
7683

7784
describe('CSS property values', () => {
78-
Object.entries(themeMapping).forEach(([themeProperty, cssProperties]) => {
85+
for (const [themeProperty, cssProperties] of Object.entries(
86+
defaultThemeSpec,
87+
)) {
7988
describe(themeProperty, () => {
80-
cssProperties.forEach((cssProperty) => {
81-
it(`should apply ${cssProperty} styles accessed via theme.${themeProperty}.default`, () => {
89+
for (const cssProperty of cssProperties) {
90+
it.only(`should apply ${cssProperty} styles accessed via theme.${themeProperty}.default`, () => {
91+
console.log(cssProperty);
8292
const styles = {
8393
...defaultStyle,
8494
[cssProperty]: 'default',
@@ -101,7 +111,7 @@ describe('CSS property values', () => {
101111
expectedValue,
102112
);
103113
});
104-
});
114+
}
105115
});
106-
});
116+
}
107117
});

‎cypress/tests/system/theme/nested-values.js

+22-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {themeMapping} from 'uinix-theme';
2+
import {defaultThemeSpec} from 'uinix-theme';
33

44
import {Element} from '../../../../index.js';
55
import {decamelizeCssProperty, mountWithSystem} from '../../../utils/index.js';
@@ -13,6 +13,14 @@ const system = {
1313
},
1414
},
1515
},
16+
backgrounds: {
17+
nested: {
18+
nested: {
19+
default:
20+
'rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(255, 0, 0), rgb(0, 0, 255)) repeat scroll 0% 0% / auto padding-box border-box',
21+
},
22+
},
23+
},
1624
borders: {
1725
nested: {
1826
nested: {
@@ -41,6 +49,13 @@ const system = {
4149
},
4250
},
4351
},
52+
filters: {
53+
nested: {
54+
nested: {
55+
default: 'blur(5px)',
56+
},
57+
},
58+
},
4459
fontFamilies: {
4560
nested: {
4661
nested: {
@@ -151,9 +166,11 @@ const defaultStyle = {
151166
};
152167

153168
describe('Nested values', () => {
154-
Object.entries(themeMapping).forEach(([themeProperty, cssProperties]) => {
169+
for (const [themeProperty, cssProperties] of Object.entries(
170+
defaultThemeSpec,
171+
)) {
155172
describe(themeProperty, () => {
156-
cssProperties.forEach((cssProperty) => {
173+
for (const cssProperty of cssProperties) {
157174
it(`should apply ${cssProperty} styles accessed via theme.${themeProperty}.nested.nested.default`, () => {
158175
const styles = {
159176
...defaultStyle,
@@ -177,7 +194,7 @@ describe('Nested values', () => {
177194
expectedValue,
178195
);
179196
});
180-
});
197+
}
181198
});
182-
});
199+
}
183200
});

‎lib/components/icon.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {filter} from 'uinix-fp';
1+
import {filterEntries} from 'uinix-fp';
22

33
import {useIcon} from '../system/hooks.js';
44
import {mergeStyles} from '../util/merge-styles.js';
@@ -70,7 +70,7 @@ const Icon = (props) => {
7070

7171
const iconSvg = useIcon(icon);
7272

73-
const style = filter((x) => x !== undefined)({
73+
const style = filterEntries(([_k, v]) => v !== undefined)({
7474
alignItems: 'center',
7575
background: 'none',
7676
border: 'none',

‎lib/components/layout.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {filter} from 'uinix-fp';
1+
import {filterEntries} from 'uinix-fp';
22

33
import {mergeStyles} from '../util/merge-styles.js';
44
import {Element} from './element.js';
@@ -83,7 +83,7 @@ const Layout = (props) => {
8383
...restProps
8484
} = props;
8585

86-
const style = filter((x) => x !== undefined)({
86+
const style = filterEntries(([_k, v]) => v !== undefined)({
8787
alignItems: align,
8888
alignSelf,
8989
display: inline ? 'inline-flex' : 'flex',

‎lib/components/text.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {filter} from 'uinix-fp';
1+
import {filterEntries} from 'uinix-fp';
22

33
import {useTypographyVariant} from '../system/hooks.js';
44
import {mergeStyles} from '../util/merge-styles.js';
@@ -96,7 +96,7 @@ const Text = (props) => {
9696
...restProps
9797
} = props;
9898

99-
const style = filter((x) => x !== undefined)({
99+
const style = filterEntries(([_k, v]) => v !== undefined)({
100100
fontFamily,
101101
fontSize,
102102
fontStyle,

‎lib/renderer/create-renderer.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ const createRenderer = (system, config) => {
6464
*/
6565
const renderFontFaces = (props) => {
6666
const {fontFaces, renderer} = props;
67-
Object.entries(fontFaces).forEach(([fontFamily, fontFace]) => {
67+
for (const [fontFamily, fontFace] of Object.entries(fontFaces)) {
6868
const {src, ...fontProps} = fontFace;
6969
renderer.renderFont(fontFamily, src, fontProps);
70-
});
70+
}
7171
};
7272

7373
/**
@@ -83,7 +83,7 @@ const renderFontFaces = (props) => {
8383
* @returns {void}
8484
*/
8585
const renderGlobalStyles = ({globalStyles, renderer, theme}) => {
86-
Object.entries(globalStyles).forEach(([selector, style]) => {
86+
for (const [selector, style] of Object.entries(globalStyles)) {
8787
/** @type {Plugin[]} */
8888
let plugins = [];
8989
// @ts-ignore: workaround to access renderer internals
@@ -96,5 +96,5 @@ const renderGlobalStyles = ({globalStyles, renderer, theme}) => {
9696
);
9797
// @ts-ignore
9898
renderer.renderStatic(processedStyle, selector);
99-
});
99+
}
100100
};

‎lib/renderer/plugin-theme-value.js

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import {isPlainObject, props} from 'uinix-fp';
2-
import {themeMapping} from 'uinix-theme';
1+
import {isPlainObject} from 'uinix-fp';
2+
import {defaultThemeSpec} from 'uinix-theme';
3+
4+
import {props} from '../util/props.js';
35

46
export {themeValue};
57
export {resolveThemeValues as _resolveThemeValues};
68

79
/**
810
* @typedef {import('fela').IStyle} IStyle
9-
* @typedef {import('uinix-theme').ThemeMapping} UinixThemeThemeMapping
11+
* @typedef {import('uinix-theme').ThemeSpec} UinixThemeThemeMapping
1012
* @typedef {import('../types.js').AnyProps} AnyProps
1113
* @typedef {import('../types.js').StyleObject} StyleObject
1214
* @typedef {import('../types.js').SystemTheme} SystemTheme
@@ -50,9 +52,9 @@ const themeValue = () => (style, _type, _renderer, props) =>
5052
*/
5153
const resolveThemeValues = (style, theme) => {
5254
const NEGATIVE_REGEXP = /^\s*-/;
53-
const mapping = createThemeMapping(themeMapping);
55+
const mapping = createThemeMapping(defaultThemeSpec);
5456

55-
Object.entries(style).forEach(([property, styleValue]) => {
57+
for (let [property, styleValue] of Object.entries(style)) {
5658
const resolveThemeValue = mapping[property];
5759
if (resolveThemeValue) {
5860
const isNegative = NEGATIVE_REGEXP.test(styleValue);
@@ -73,7 +75,7 @@ const resolveThemeValues = (style, theme) => {
7375
// @ts-ignore: we CAN access from IStyle
7476
style[property] = resolveThemeValues(style[property], theme);
7577
}
76-
});
78+
}
7779

7880
return style;
7981
};
@@ -92,9 +94,10 @@ const createThemeMapping = (themeMapping) => {
9294
const initialAcc = {};
9395
return Object.entries(themeMapping).reduce(
9496
(acc, [themeProperty, cssProperties]) => {
95-
cssProperties.forEach((cssProperty) => {
97+
for (const cssProperty of cssProperties) {
9698
acc[cssProperty] = props(themeProperty);
97-
});
99+
}
100+
98101
return acc;
99102
},
100103
initialAcc,

‎lib/system/hooks.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {props} from 'uinix-fp';
2-
31
import {parseSvgElement} from '../util/parse-svg-element.js';
2+
import {props} from '../util/props.js';
43
import {getStore} from './load.js';
54

65
export {

‎lib/util/merge-class-names.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {filter} from 'uinix-fp';
1+
import {filter, isTruthy} from 'uinix-fp';
22

33
export {mergeClassNames};
44

@@ -12,4 +12,4 @@ export {mergeClassNames};
1212
* @returns {string | undefined}
1313
*/
1414
const mergeClassNames = (classNames) =>
15-
filter()(classNames).join(' ') || undefined;
15+
filter(isTruthy)(classNames).join(' ') || undefined;

0 commit comments

Comments
 (0)