@variocube/app-ui 1.15.0 → 1.16.0

package/src/logo/VCAppLogo.tsx

@@ -1,28 +1,30 @@
 import {Box, BoxProps} from "@mui/material";
-import {VCLogoIcon} from "./VCLogoIcon";
 import React from "react";
+import {VCLogoIcon} from "./VCLogoIcon";
 
 interface VCAppLogoProps extends BoxProps {
-    appName?: string;
+	appName?: string;
 }
 
 export function VCAppLogo({appName, ...props}: VCAppLogoProps) {
-    return (
-        <Box {...props}>
-            <Box sx={{display: "flex", flexFlow: "row nowrap", alignItems: "center"}}>
-                <VCLogoIcon width="auto" height="32" display="block"/>
-                {appName && (
-                    <Box sx={{
-                        lineHeight: 1,
-                        fontSize: "20px",
-                        fontWeight: 900,
-                        textTransform: "uppercase",
-                        marginLeft: "8px",
-                    }}>
-                        {appName}
-                    </Box>
-                )}
-            </Box>
-        </Box>
-    )
+	return (
+		<Box {...props}>
+			<Box sx={{display: "flex", flexFlow: "row nowrap", alignItems: "center"}}>
+				<VCLogoIcon width="auto" height="32" display="block" />
+				{appName && (
+					<Box
+						sx={{
+							lineHeight: 1,
+							fontSize: "20px",
+							fontWeight: 900,
+							textTransform: "uppercase",
+							marginLeft: "8px",
+						}}
+					>
+						{appName}
+					</Box>
+				)}
+			</Box>
+		</Box>
+	);
 }

package/src/logo/index.tsx

@@ -1,4 +1,4 @@
-export * from "./VCLogoIcon";
-export * from "./VCLogo";
-export * from "./VCAppLogo";
 export * from "./Logo";
+export * from "./VCAppLogo";
+export * from "./VCLogo";
+export * from "./VCLogoIcon";

package/src/splash/index.tsx

@@ -2,33 +2,33 @@ import React, {FunctionComponentElement} from "react";
 import ReactDOM from "react-dom";
 
 export function render(element: FunctionComponentElement<any> | Array<FunctionComponentElement<any>>) {
-    try {
-        ReactDOM.render(element, document.querySelector("#react-root"), removeSplash);
-    }
-    catch (error) {
-        // show the error using the class defined in the template
-        // this can obviously be improved
-        ReactDOM.render((
-            <div className="splash-error">
-                <h1>Failed to load application</h1>
-                <p>
-                    An error occurred while loading the application.
-                    Please make sure you are using a current browser version.
-                </p>
-            </div>
-        ), document.body);
-    }
+	try {
+		ReactDOM.render(element, document.querySelector("#react-root"), removeSplash);
+	} catch (error) {
+		// show the error using the class defined in the template
+		// this can obviously be improved
+		ReactDOM.render(
+			<div className="splash-error">
+				<h1>Failed to load application</h1>
+				<p>
+					An error occurred while loading the application. Please make sure you are using a current browser
+					version.
+				</p>
+			</div>,
+			document.body,
+		);
+	}
 }
 
 export async function removeSplash() {
-    // wait for fonts to become ready
-    if (document.fonts) {
-        await document.fonts.ready;
-    }
+	// wait for fonts to become ready
+	if (document.fonts) {
+		await document.fonts.ready;
+	}
 
-    const preloader = document.querySelector("#splash");
-    if (preloader) {
-        preloader.classList.add("fadeout");
-        setTimeout(() => preloader.parentNode?.removeChild(preloader), 500);
-    }
+	const preloader = document.querySelector("#splash");
+	if (preloader) {
+		preloader.classList.add("fadeout");
+		setTimeout(() => preloader.parentNode?.removeChild(preloader), 500);
+	}
 }

package/src/storage/MemoryStorage.ts

@@ -1,21 +1,28 @@
+export class MemoryStorage implements Storage {
+	private readonly data = new Map<string, string>();
 
-export class MemoryStorage {
+	get length(): number {
+		return this.data.size;
+	}
 
-    private readonly data = new Map<string, string>();
+	key(index: number): string | null {
+		const keys = Array.from(this.data.keys());
+		return keys[index] ?? null;
+	}
 
-    getItem(key: string) {
-        return this.data.get(key);
-    }
+	getItem(key: string): string | null {
+		return this.data.get(key) ?? null;
+	}
 
-    setItem(key: string, value: string) {
-        return this.data.set(key, value);
-    }
+	setItem(key: string, value: string): void {
+		this.data.set(key, value);
+	}
 
-    removeItem(key: string) {
-        return this.data.delete(key);
-    }
+	removeItem(key: string): void {
+		this.data.delete(key);
+	}
 
-    clear() {
-        return this.data.clear();
-    }
-}
+	clear(): void {
+		this.data.clear();
+	}
+}

package/src/storage/index.ts

@@ -1,2 +1,3 @@
-export * from "./useStorage";
 export * from "./storage";
+export type { StorageType } from "./types";
+export * from "./useStorage";

package/src/storage/storage.spec.ts

@@ -0,0 +1,184 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {storage} from "./storage";
+
+describe("StorageWrapper", () => {
+	beforeEach(() => {
+		localStorage.clear();
+		sessionStorage.clear();
+	});
+
+	describe("read/write with storage type", () => {
+		test("writes to localStorage by default", () => {
+			storage.write("test-key", "value");
+			expect(localStorage.getItem("test-key")).toBe("value");
+			expect(sessionStorage.getItem("test-key")).toBeNull();
+		});
+
+		test("writes to localStorage when explicitly specified", () => {
+			storage.write("test-key", "value", "local");
+			expect(localStorage.getItem("test-key")).toBe("value");
+			expect(sessionStorage.getItem("test-key")).toBeNull();
+		});
+
+		test("writes to sessionStorage when specified", () => {
+			storage.write("test-key", "value", "session");
+			expect(sessionStorage.getItem("test-key")).toBe("value");
+			expect(localStorage.getItem("test-key")).toBeNull();
+		});
+
+		test("reads from correct storage area by default (local)", () => {
+			localStorage.setItem("key1", "local-value");
+			sessionStorage.setItem("key1", "session-value");
+
+			expect(storage.read("key1")).toBe("local-value");
+		});
+
+		test("reads from localStorage when explicitly specified", () => {
+			localStorage.setItem("key1", "local-value");
+			sessionStorage.setItem("key1", "session-value");
+
+			expect(storage.read("key1", "local")).toBe("local-value");
+		});
+
+		test("reads from sessionStorage when specified", () => {
+			localStorage.setItem("key1", "local-value");
+			sessionStorage.setItem("key1", "session-value");
+
+			expect(storage.read("key1", "session")).toBe("session-value");
+		});
+
+		test("returns null for non-existent keys", () => {
+			expect(storage.read("non-existent")).toBeNull();
+			expect(storage.read("non-existent", "local")).toBeNull();
+			expect(storage.read("non-existent", "session")).toBeNull();
+		});
+	});
+
+	describe("delete with storage type", () => {
+		test("deletes from localStorage by default", () => {
+			localStorage.setItem("key", "local");
+			sessionStorage.setItem("key", "session");
+
+			storage.delete("key");
+			expect(localStorage.getItem("key")).toBeNull();
+			expect(sessionStorage.getItem("key")).toBe("session");
+		});
+
+		test("deletes from localStorage when explicitly specified", () => {
+			localStorage.setItem("key", "local");
+			sessionStorage.setItem("key", "session");
+
+			storage.delete("key", "local");
+			expect(localStorage.getItem("key")).toBeNull();
+			expect(sessionStorage.getItem("key")).toBe("session");
+		});
+
+		test("deletes from sessionStorage when specified", () => {
+			localStorage.setItem("key", "local");
+			sessionStorage.setItem("key", "session");
+
+			storage.delete("key", "session");
+			expect(localStorage.getItem("key")).toBe("local");
+			expect(sessionStorage.getItem("key")).toBeNull();
+		});
+	});
+
+	describe("storage isolation", () => {
+		test("local and session storage are isolated", () => {
+			storage.write("shared-key", "local-value", "local");
+			storage.write("shared-key", "session-value", "session");
+
+			expect(storage.read("shared-key", "local")).toBe("local-value");
+			expect(storage.read("shared-key", "session")).toBe("session-value");
+		});
+
+		test("deleting from one storage does not affect the other", () => {
+			storage.write("shared-key", "local-value", "local");
+			storage.write("shared-key", "session-value", "session");
+
+			storage.delete("shared-key", "local");
+
+			expect(storage.read("shared-key", "local")).toBeNull();
+			expect(storage.read("shared-key", "session")).toBe("session-value");
+		});
+	});
+
+	describe("write with undefined value removes key", () => {
+		test("removes key when writing undefined to localStorage", () => {
+			storage.write("key", "value", "local");
+			expect(storage.read("key", "local")).toBe("value");
+
+			storage.write("key", undefined, "local");
+			expect(storage.read("key", "local")).toBeNull();
+		});
+
+		test("removes key when writing undefined to sessionStorage", () => {
+			storage.write("key", "value", "session");
+			expect(storage.read("key", "session")).toBe("value");
+
+			storage.write("key", undefined, "session");
+			expect(storage.read("key", "session")).toBeNull();
+		});
+	});
+
+	describe("change listeners", () => {
+		test("notifies listeners on write", () => {
+			const listener = jest.fn();
+			storage.addChangeListener("key", listener);
+
+			storage.write("key", "value");
+			expect(listener).toHaveBeenCalledWith(null, "value");
+
+			storage.removeChangeListener("key", listener);
+		});
+
+		test("notifies listeners on delete", () => {
+			storage.write("key", "value");
+
+			const listener = jest.fn();
+			storage.addChangeListener("key", listener);
+
+			storage.delete("key");
+			expect(listener).toHaveBeenCalledWith("value", undefined);
+
+			storage.removeChangeListener("key", listener);
+		});
+
+		test("notifies listeners on update", () => {
+			storage.write("key", "old-value");
+
+			const listener = jest.fn();
+			storage.addChangeListener("key", listener);
+
+			storage.write("key", "new-value");
+			expect(listener).toHaveBeenCalledWith("old-value", "new-value");
+
+			storage.removeChangeListener("key", listener);
+		});
+
+		test("does not notify after listener removal", () => {
+			const listener = jest.fn();
+			storage.addChangeListener("key", listener);
+			storage.removeChangeListener("key", listener);
+
+			storage.write("key", "value");
+			expect(listener).not.toHaveBeenCalled();
+		});
+
+		test("notifies listeners for different storage types", () => {
+			const listener = jest.fn();
+			storage.addChangeListener("key", listener);
+
+			storage.write("key", "local-value", "local");
+			expect(listener).toHaveBeenCalledWith(null, "local-value");
+
+			storage.write("key", "session-value", "session");
+			expect(listener).toHaveBeenCalledWith(null, "session-value");
+
+			storage.removeChangeListener("key", listener);
+		});
+	});
+});

package/src/storage/storage.ts

@@ -1,4 +1,5 @@
 import {MemoryStorage} from "./MemoryStorage";
+import {StorageType} from "./types";
 
 const TEST_KEY = "__check_storage_supported";
 
@@ -15,26 +16,44 @@ function isSupported(storage?: Storage) {
 	}
 }
 
-function findSupportedStorage() {
-	return [window.localStorage, window.sessionStorage].find(isSupported)
-		|| new MemoryStorage();
+function getStorageArea(type: StorageType): Storage {
+	const preferred = type === "local" ? window.localStorage : window.sessionStorage;
+	const fallback = type === "local" ? window.sessionStorage : window.localStorage;
+
+	if (isSupported(preferred)) return preferred;
+	if (isSupported(fallback)) return fallback;
+	return new MemoryStorage();
 }
 
 type StorageChangeListener = (oldValue?: string, newValue?: string) => void;
 
 class StorageWrapper {
 	private readonly listeners = new Map<string, Set<StorageChangeListener>>();
-	private readonly storageArea = findSupportedStorage();
+	private readonly storageAreas = new Map<StorageType, Storage>();
 
 	constructor() {
+		// Initialize both storage areas
+		this.storageAreas.set("local", getStorageArea("local"));
+		this.storageAreas.set("session", getStorageArea("session"));
+
 		window.addEventListener("storage", event => {
 			const {storageArea, key, oldValue, newValue} = event;
-			if (storageArea == this.storageArea && key && oldValue != newValue) {
-				this.notifyChangeListener(key, oldValue || undefined, newValue || undefined);
+			// Check against both storage areas
+			if (key && oldValue != newValue) {
+				for (const area of this.storageAreas.values()) {
+					if (storageArea === area) {
+						this.notifyChangeListener(key, oldValue || undefined, newValue || undefined);
+						break;
+					}
+				}
 			}
 		});
 	}
 
+	private getArea(type?: StorageType): Storage {
+		return this.storageAreas.get(type ?? "local")!;
+	}
+
 	addChangeListener(key: string, listener: StorageChangeListener) {
 		this.getOrCreateListeners(key).add(listener);
 	}
@@ -43,13 +62,14 @@ class StorageWrapper {
 		this.getOrCreateListeners(key).delete(listener);
 	}
 
-	write(key: string, value?: string) {
-		const oldValue = this.read(key);
+	write(key: string, value?: string, type?: StorageType) {
+		const oldValue = this.read(key, type);
+		const area = this.getArea(type);
 		try {
 			if (value !== undefined) {
-				this.storageArea.setItem(key, value);
+				area.setItem(key, value);
 			} else {
-				this.storageArea.removeItem(key);
+				area.removeItem(key);
 			}
 			this.notifyChangeListener(key, oldValue, value);
 		} catch (error) {
@@ -57,19 +77,21 @@ class StorageWrapper {
 		}
 	}
 
-	delete(key: string) {
-		const oldValue = this.read(key);
+	delete(key: string, type?: StorageType) {
+		const oldValue = this.read(key, type);
+		const area = this.getArea(type);
 		try {
-			this.storageArea.removeItem(key);
+			area.removeItem(key);
 			this.notifyChangeListener(key, oldValue, undefined);
 		} catch (error) {
 			// ignore error
 		}
 	}
 
-	read(key: string) {
+	read(key: string, type?: StorageType) {
+		const area = this.getArea(type);
 		try {
-			return this.storageArea.getItem(key);
+			return area.getItem(key);
 		} catch (error) {
 			// ignore error
 			return null;

package/src/storage/types.ts

@@ -0,0 +1,6 @@
+/**
+ * The type of browser storage to use.
+ * - 'local': Uses localStorage (persists across browser sessions)
+ * - 'session': Uses sessionStorage (cleared when tab closes)
+ */
+export type StorageType = "local" | "session";

package/src/storage/useStorage.ts

@@ -1,13 +1,14 @@
 import {useCallback, useLayoutEffect, useMemo, useState} from "react";
 import {storage} from "./storage";
+import {StorageType} from "./types";
 
-export function useStorage<T>(key: string, defaultValue: T): [T, (newValue: T) => void] {
+export function useStorage<T>(key: string, defaultValue: T, storageType?: StorageType): [T, (newValue: T) => void] {
 	const defaultValueSerialized = useMemo(() => JSON.stringify(defaultValue), [defaultValue]);
 
 	const readStateFromStorage = useCallback(() => {
-		const storageValue = storage.read(key);
+		const storageValue = storage.read(key, storageType);
 		return storageValue ?? defaultValueSerialized;
-	}, [key, defaultValueSerialized]);
+	}, [key, defaultValueSerialized, storageType]);
 
 	const [value, setValue] = useState(readStateFromStorage);
 
@@ -25,11 +26,25 @@ export function useStorage<T>(key: string, defaultValue: T): [T, (newValue: T) =
 	const setTypedValue = useCallback((newValue: T) => {
 		const value = JSON.stringify(newValue);
 		if (value != defaultValueSerialized) {
-			storage.write(key, value);
+			storage.write(key, value, storageType);
 		} else {
-			storage.delete(key);
+			storage.delete(key, storageType);
 		}
-	}, [key, defaultValueSerialized]);
+	}, [key, defaultValueSerialized, storageType]);
 
 	return [typedValue, setTypedValue];
 }
+
+/**
+ * Convenience hook for localStorage. Equivalent to `useStorage(key, defaultValue, "local")`.
+ */
+export function useLocalStorage<T>(key: string, defaultValue: T): [T, (newValue: T) => void] {
+	return useStorage(key, defaultValue, "local");
+}
+
+/**
+ * Convenience hook for sessionStorage. Equivalent to `useStorage(key, defaultValue, "session")`.
+ */
+export function useSessionStorage<T>(key: string, defaultValue: T): [T, (newValue: T) => void] {
+	return useStorage(key, defaultValue, "session");
+}