@jalvin/ui 2.0.30 → 2.0.32
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
|
2
2
|
import { renderHook, act } from "@testing-library/react";
|
|
3
|
-
import
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { calculateWindowSizeClass, WindowSizeClassProvider } from "@jalvin/runtime";
|
|
4
5
|
function setWindowSize(width, height) {
|
|
5
6
|
Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: width });
|
|
6
7
|
Object.defineProperty(window, "innerHeight", { writable: true, configurable: true, value: height });
|
|
@@ -8,6 +9,8 @@ function setWindowSize(width, height) {
|
|
|
8
9
|
function fireResize() {
|
|
9
10
|
window.dispatchEvent(new Event("resize"));
|
|
10
11
|
}
|
|
12
|
+
/** Wraps the hook under test with WindowSizeClassProvider. */
|
|
13
|
+
const wrapper = ({ children }) => React.createElement(WindowSizeClassProvider, null, children);
|
|
11
14
|
describe("calculateWindowSizeClass", () => {
|
|
12
15
|
beforeEach(() => {
|
|
13
16
|
setWindowSize(1280, 800);
|
|
@@ -18,53 +21,53 @@ describe("calculateWindowSizeClass", () => {
|
|
|
18
21
|
// ── initial class from window size ─────────────────────────────────────────
|
|
19
22
|
it("returns Compact/Medium for a phone-sized window (360×640)", () => {
|
|
20
23
|
setWindowSize(360, 640);
|
|
21
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
24
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
22
25
|
expect(result.current.widthSizeClass).toBe("Compact");
|
|
23
26
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
24
27
|
});
|
|
25
|
-
it("returns
|
|
28
|
+
it("returns Medium/Compact for a landscape phone (667×375)", () => {
|
|
26
29
|
setWindowSize(667, 375);
|
|
27
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
30
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
28
31
|
expect(result.current.widthSizeClass).toBe("Medium");
|
|
29
32
|
expect(result.current.heightSizeClass).toBe("Compact");
|
|
30
33
|
});
|
|
31
|
-
it("returns Medium/
|
|
34
|
+
it("returns Medium/Expanded for a tablet-sized window (768×1024)", () => {
|
|
32
35
|
setWindowSize(768, 1024);
|
|
33
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
36
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
34
37
|
expect(result.current.widthSizeClass).toBe("Medium");
|
|
35
38
|
expect(result.current.heightSizeClass).toBe("Expanded");
|
|
36
39
|
});
|
|
37
|
-
it("returns Expanded/
|
|
40
|
+
it("returns Expanded/Medium for a desktop window (1280×800)", () => {
|
|
38
41
|
setWindowSize(1280, 800);
|
|
39
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
42
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
40
43
|
expect(result.current.widthSizeClass).toBe("Expanded");
|
|
41
44
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
42
45
|
});
|
|
43
46
|
// ── class boundaries ───────────────────────────────────────────────────────
|
|
44
47
|
it("width at exactly 600 is Medium", () => {
|
|
45
48
|
setWindowSize(600, 800);
|
|
46
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
49
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
47
50
|
expect(result.current.widthSizeClass).toBe("Medium");
|
|
48
51
|
});
|
|
49
52
|
it("width at exactly 840 is Expanded", () => {
|
|
50
53
|
setWindowSize(840, 800);
|
|
51
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
54
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
52
55
|
expect(result.current.widthSizeClass).toBe("Expanded");
|
|
53
56
|
});
|
|
54
57
|
it("height at exactly 480 is Medium", () => {
|
|
55
58
|
setWindowSize(400, 480);
|
|
56
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
59
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
57
60
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
58
61
|
});
|
|
59
62
|
it("height at exactly 900 is Expanded", () => {
|
|
60
63
|
setWindowSize(400, 900);
|
|
61
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
64
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
62
65
|
expect(result.current.heightSizeClass).toBe("Expanded");
|
|
63
66
|
});
|
|
64
67
|
// ── reactivity on resize ───────────────────────────────────────────────────
|
|
65
68
|
it("updates widthSizeClass when window crosses a breakpoint", () => {
|
|
66
69
|
setWindowSize(400, 800); // Compact
|
|
67
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
70
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
68
71
|
expect(result.current.widthSizeClass).toBe("Compact");
|
|
69
72
|
act(() => {
|
|
70
73
|
setWindowSize(700, 800); // Medium
|
|
@@ -79,7 +82,7 @@ describe("calculateWindowSizeClass", () => {
|
|
|
79
82
|
});
|
|
80
83
|
it("updates heightSizeClass when window crosses a breakpoint", () => {
|
|
81
84
|
setWindowSize(800, 400); // Compact height
|
|
82
|
-
const { result } = renderHook(() => calculateWindowSizeClass());
|
|
85
|
+
const { result } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
83
86
|
expect(result.current.heightSizeClass).toBe("Compact");
|
|
84
87
|
act(() => {
|
|
85
88
|
setWindowSize(800, 700); // Medium height
|
|
@@ -87,25 +90,50 @@ describe("calculateWindowSizeClass", () => {
|
|
|
87
90
|
});
|
|
88
91
|
expect(result.current.heightSizeClass).toBe("Medium");
|
|
89
92
|
});
|
|
90
|
-
it("does not re-render when resize stays within the same class", () => {
|
|
93
|
+
it("does not re-render consumers when resize stays within the same class", () => {
|
|
91
94
|
setWindowSize(400, 800);
|
|
92
95
|
let renderCount = 0;
|
|
93
96
|
const { result } = renderHook(() => {
|
|
94
97
|
renderCount++;
|
|
95
98
|
return calculateWindowSizeClass();
|
|
96
|
-
});
|
|
99
|
+
}, { wrapper });
|
|
97
100
|
const baseRenders = renderCount;
|
|
98
101
|
act(() => {
|
|
99
|
-
setWindowSize(450, 800); // still Compact
|
|
102
|
+
setWindowSize(450, 800); // still Compact — no class change
|
|
100
103
|
fireResize();
|
|
101
104
|
});
|
|
102
105
|
expect(result.current.widthSizeClass).toBe("Compact");
|
|
103
|
-
expect(renderCount).toBe(baseRenders);
|
|
106
|
+
expect(renderCount).toBe(baseRenders);
|
|
107
|
+
});
|
|
108
|
+
// ── single listener (regression for multi-consumer crash) ─────────────────
|
|
109
|
+
it("registers only ONE resize listener even when multiple consumers call the hook", () => {
|
|
110
|
+
const addSpy = vi.spyOn(window, "addEventListener");
|
|
111
|
+
setWindowSize(1280, 800);
|
|
112
|
+
// Two independent hooks, both under the same provider.
|
|
113
|
+
renderHook(() => {
|
|
114
|
+
calculateWindowSizeClass(); // consumer 1
|
|
115
|
+
calculateWindowSizeClass(); // consumer 2
|
|
116
|
+
}, { wrapper });
|
|
117
|
+
const resizeListenerCount = addSpy.mock.calls.filter(([event]) => event === "resize").length;
|
|
118
|
+
expect(resizeListenerCount).toBe(1);
|
|
119
|
+
});
|
|
120
|
+
it("both consumers see the same updated class after a single resize event", () => {
|
|
121
|
+
setWindowSize(400, 800); // Compact
|
|
122
|
+
const { result } = renderHook(() => ({
|
|
123
|
+
a: calculateWindowSizeClass(),
|
|
124
|
+
b: calculateWindowSizeClass(),
|
|
125
|
+
}), { wrapper });
|
|
126
|
+
act(() => {
|
|
127
|
+
setWindowSize(1280, 800); // Expanded
|
|
128
|
+
fireResize();
|
|
129
|
+
});
|
|
130
|
+
expect(result.current.a.widthSizeClass).toBe("Expanded");
|
|
131
|
+
expect(result.current.b.widthSizeClass).toBe("Expanded");
|
|
104
132
|
});
|
|
105
133
|
// ── cleanup ────────────────────────────────────────────────────────────────
|
|
106
|
-
it("removes the resize listener
|
|
134
|
+
it("removes the resize listener when the provider unmounts", () => {
|
|
107
135
|
const removeSpy = vi.spyOn(window, "removeEventListener");
|
|
108
|
-
const { unmount } = renderHook(() => calculateWindowSizeClass());
|
|
136
|
+
const { unmount } = renderHook(() => calculateWindowSizeClass(), { wrapper });
|
|
109
137
|
unmount();
|
|
110
138
|
expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function));
|
|
111
139
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"windowsizeclass.test.js","sourceRoot":"","sources":["../../src/__tests__/windowsizeclass.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"windowsizeclass.test.js","sourceRoot":"","sources":["../../src/__tests__/windowsizeclass.test.ts"],"names":[],"mappings":"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"}
|
package/dist/layout.d.ts
CHANGED
|
@@ -7,22 +7,25 @@ export interface ColumnProps {
|
|
|
7
7
|
spacing?: number;
|
|
8
8
|
verticalArrangement?: Arrangement;
|
|
9
9
|
horizontalAlignment?: Alignment;
|
|
10
|
+
children?: React.ReactNode[];
|
|
10
11
|
}
|
|
11
12
|
/** Vertical flex container. */
|
|
12
|
-
export declare function Column({ modifier, spacing, verticalArrangement, horizontalAlignment }: ColumnProps
|
|
13
|
+
export declare function Column({ modifier, spacing, verticalArrangement, horizontalAlignment, children }: ColumnProps): React.ReactElement;
|
|
13
14
|
export interface RowProps {
|
|
14
15
|
modifier?: Modifier;
|
|
15
16
|
spacing?: number;
|
|
16
17
|
horizontalArrangement?: Arrangement;
|
|
17
18
|
verticalAlignment?: Alignment;
|
|
18
19
|
wrap?: boolean;
|
|
20
|
+
children?: React.ReactNode[];
|
|
19
21
|
}
|
|
20
22
|
/** Horizontal flex container. */
|
|
21
|
-
export declare function Row({ modifier, spacing, horizontalArrangement, verticalAlignment, wrap }: RowProps
|
|
23
|
+
export declare function Row({ modifier, spacing, horizontalArrangement, verticalAlignment, wrap, children }: RowProps): React.ReactElement;
|
|
22
24
|
export interface BoxProps {
|
|
23
25
|
modifier?: Modifier;
|
|
24
26
|
contentAlignment?: "topStart" | "topCenter" | "topEnd" | "centerStart" | "center" | "centerEnd" | "bottomStart" | "bottomCenter" | "bottomEnd";
|
|
27
|
+
children?: React.ReactNode[];
|
|
25
28
|
}
|
|
26
29
|
/** Positioned container. */
|
|
27
|
-
export declare function Box({ modifier, contentAlignment }: BoxProps
|
|
30
|
+
export declare function Box({ modifier, contentAlignment, children }: BoxProps): React.ReactElement;
|
|
28
31
|
//# sourceMappingURL=layout.d.ts.map
|
package/dist/layout.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,CAAC;AAsBtG,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,CAAC;AAsBtG,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B;AAED,+BAA+B;AAC/B,wBAAgB,MAAM,CACpB,EAAE,QAAQ,EAAE,OAAO,EAAE,mBAA6B,EAAE,mBAA6B,EAAE,QAAQ,EAAE,EAAE,WAAW,GACzG,KAAK,CAAC,YAAY,CAapB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B;AAED,iCAAiC;AACjC,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAA+B,EAAE,iBAA4B,EAAE,IAAY,EAAE,QAAQ,EAAE,EAAE,QAAQ,GACrH,KAAK,CAAC,YAAY,CAcpB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,gBAAgB,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,WAAW,CAAC;IAC/I,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B;AAED,4BAA4B;AAC5B,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,gBAA6B,EAAE,QAAQ,EAAE,EAAE,QAAQ,GAC9D,KAAK,CAAC,YAAY,CAapB"}
|
package/dist/layout.js
CHANGED
|
@@ -18,7 +18,7 @@ function alignmentToAlign(a) {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
/** Vertical flex container. */
|
|
21
|
-
export function Column({ modifier, spacing, verticalArrangement = "start", horizontalAlignment = "start"
|
|
21
|
+
export function Column({ modifier, spacing, verticalArrangement = "start", horizontalAlignment = "start", children }) {
|
|
22
22
|
const modProps = modifier?.toProps() ?? {};
|
|
23
23
|
return React.createElement("div", {
|
|
24
24
|
...modProps,
|
|
@@ -33,7 +33,7 @@ export function Column({ modifier, spacing, verticalArrangement = "start", horiz
|
|
|
33
33
|
}, ...(children ?? []));
|
|
34
34
|
}
|
|
35
35
|
/** Horizontal flex container. */
|
|
36
|
-
export function Row({ modifier, spacing, horizontalArrangement = "start", verticalAlignment = "center", wrap = false
|
|
36
|
+
export function Row({ modifier, spacing, horizontalArrangement = "start", verticalAlignment = "center", wrap = false, children }) {
|
|
37
37
|
const modProps = modifier?.toProps() ?? {};
|
|
38
38
|
return React.createElement("div", {
|
|
39
39
|
...modProps,
|
|
@@ -49,7 +49,7 @@ export function Row({ modifier, spacing, horizontalArrangement = "start", vertic
|
|
|
49
49
|
}, ...(children ?? []));
|
|
50
50
|
}
|
|
51
51
|
/** Positioned container. */
|
|
52
|
-
export function Box({ modifier, contentAlignment = "topStart"
|
|
52
|
+
export function Box({ modifier, contentAlignment = "topStart", children }) {
|
|
53
53
|
const modProps = modifier?.toProps() ?? {};
|
|
54
54
|
const isCentered = contentAlignment === "center";
|
|
55
55
|
return React.createElement("div", {
|
package/dist/layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,SAAS,oBAAoB,CAAC,CAAc;IAC1C,QAAQ,CAAC,EAAE,CAAC;QACV,KAAK,OAAO,CAAC,CAAQ,OAAO,YAAY,CAAC;QACzC,KAAK,QAAQ,CAAC,CAAO,OAAO,QAAQ,CAAC;QACrC,KAAK,KAAK,CAAC,CAAU,OAAO,UAAU,CAAC;QACvC,KAAK,cAAc,CAAC,CAAC,OAAO,eAAe,CAAC;QAC5C,KAAK,aAAa,CAAC,CAAE,OAAO,cAAc,CAAC;QAC3C,KAAK,aAAa,CAAC,CAAE,OAAO,cAAc,CAAC;IAC7C,CAAC;AACH,CAAC;AAED,SAAS,gBAAgB,CAAC,CAAY;IACpC,QAAQ,CAAC,EAAE,CAAC;QACV,KAAK,OAAO,CAAC,CAAG,OAAO,YAAY,CAAC;QACpC,KAAK,QAAQ,CAAC,CAAE,OAAO,QAAQ,CAAC;QAChC,KAAK,KAAK,CAAC,CAAK,OAAO,UAAU,CAAC;QAClC,KAAK,SAAS,CAAC,CAAC,OAAO,SAAS,CAAC;IACnC,CAAC;AACH,CAAC;
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jalvin/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.32",
|
|
4
4
|
"description": "Jalvin UI — Compose-style component library (Column, Row, Box, Button, Text, …)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"react": "^19.2.5",
|
|
30
30
|
"typescript": "^5.4.0",
|
|
31
31
|
"vitest": "^2.1.9",
|
|
32
|
-
"@jalvin/runtime": "2.0.
|
|
32
|
+
"@jalvin/runtime": "2.0.32"
|
|
33
33
|
},
|
|
34
34
|
"scripts": {
|
|
35
35
|
"build": "tsc -p tsconfig.json",
|