@variocube/app-ui 1.15.0 → 1.16.0

package/src/data-table/useDataTableStorage.ts

@@ -1,43 +1,98 @@
-import {useStorage} from "../storage";
 import {SortDirection} from "@mui/material";
 import {useCallback} from "react";
+import {StorageType, useStorage} from "../storage";
 import {DataTablePage} from "./DataTable";
 
 export interface DataTableStorage {
-    pageIndex?: number;
-    pageSize?: number;
-    sortField?: string;
-    sortDirection?: SortDirection;
+	pageIndex?: number;
+	pageSize?: number;
+	sortField?: string;
+	sortDirection?: SortDirection;
 }
 
-export function useDataTableStorage(key: string, defaults?: DataTableStorage) {
-    const [storage, setStorage] = useStorage<DataTableStorage>(key, {
-        pageIndex: 0,
-        pageSize: 10,
-        sortDirection: "asc",
-        ...defaults,
-    });
-
-    const onPageChange = useCallback(({pageSize, pageIndex}: DataTablePage) => {
-        setStorage({...storage, pageSize, pageIndex});
-    }, [storage]);
-
-    const onSort = useCallback((field: string) => {
-        if (storage.sortField == field) {
-            setStorage({...storage, sortDirection: storage.sortDirection == "desc" ? "asc" : "desc" });
-        }
-        else {
-            setStorage({
-                ...storage,
-                sortDirection: "asc",
-                sortField: field,
-            });
-        }
-    }, [storage]);
-
-    return {
-        ...storage,
-        onPageChange,
-        onSort,
-    }
-}
+export interface DataTableStorageOptions {
+	defaults?: DataTableStorage;
+	storageType?: StorageType;
+}
+
+type UseDataTableStorageResult = DataTableStorage & {
+	onPageChange: (page: DataTablePage) => void;
+	onSort: (field: string) => void;
+};
+
+function isDataTableStorageOptions(value: unknown): value is DataTableStorageOptions {
+	return typeof value === "object" && value !== null && ("defaults" in value || "storageType" in value);
+}
+
+/**
+ * Hook for persisting DataTable state to browser storage.
+ *
+ * @example
+ * // Default - uses localStorage
+ * const tableState = useDataTableStorage("my-table");
+ *
+ * @example
+ * // With defaults (backwards compatible)
+ * const tableState = useDataTableStorage("my-table", { pageSize: 25 });
+ *
+ * @example
+ * // With sessionStorage
+ * const tableState = useDataTableStorage("my-table", "session");
+ *
+ * @example
+ * // With both defaults and storageType
+ * const tableState = useDataTableStorage("my-table", { defaults: { pageSize: 25 }, storageType: "session" });
+ */
+export function useDataTableStorage(key: string): UseDataTableStorageResult;
+export function useDataTableStorage(key: string, storageType: StorageType): UseDataTableStorageResult;
+export function useDataTableStorage(key: string, defaults: DataTableStorage): UseDataTableStorageResult;
+export function useDataTableStorage(key: string, options: DataTableStorageOptions): UseDataTableStorageResult;
+export function useDataTableStorage(
+	key: string,
+	optionsOrDefaultsOrType?: StorageType | DataTableStorage | DataTableStorageOptions,
+): UseDataTableStorageResult {
+	// Normalize parameters
+	let defaults: DataTableStorage = {};
+	let storageType: StorageType | undefined;
+
+	if (typeof optionsOrDefaultsOrType === "string") {
+		// It's a StorageType
+		storageType = optionsOrDefaultsOrType;
+	} else if (isDataTableStorageOptions(optionsOrDefaultsOrType)) {
+		// It's DataTableStorageOptions
+		defaults = optionsOrDefaultsOrType.defaults ?? {};
+		storageType = optionsOrDefaultsOrType.storageType;
+	} else if (optionsOrDefaultsOrType) {
+		// It's DataTableStorage (backwards compat)
+		defaults = optionsOrDefaultsOrType;
+	}
+
+	const [storage, setStorage] = useStorage<DataTableStorage>(key, {
+		pageIndex: 0,
+		pageSize: 10,
+		sortDirection: "asc",
+		...defaults,
+	}, storageType);
+
+	const onPageChange = useCallback(({pageSize, pageIndex}: DataTablePage) => {
+		setStorage({...storage, pageSize, pageIndex});
+	}, [storage, setStorage]);
+
+	const onSort = useCallback((field: string) => {
+		if (storage.sortField == field) {
+			setStorage({...storage, sortDirection: storage.sortDirection == "desc" ? "asc" : "desc"});
+		} else {
+			setStorage({
+				...storage,
+				sortDirection: "asc",
+				sortField: field,
+			});
+		}
+	}, [storage, setStorage]);
+
+	return {
+		...storage,
+		onPageChange,
+		onSort,
+	};
+}

package/src/date-pickers/PlainAdapterCommon.ts

@@ -1,125 +1,123 @@
-import {Now, PlainDate, PlainDateTime} from "../temporal";
 import {Unit} from "@date-io/core/IUtils";
+import {Now, PlainDate, PlainDateTime} from "../temporal";
 import {durationToUnit, TemporalAdapter} from "./TemporalAdapter";
 
 export class PlainAdapterCommon<T extends PlainDate | PlainDateTime> extends TemporalAdapter<T> {
-
-    startOfYear(value: T): T {
-        return value.with({day: 1, month: 1}) as T;
-    }
-
-    endOfYear(value: T): T {
-        return value.with({day: 31, month: 12}) as T;
-    }
-
-    startOfMonth(value: T): T {
-        return value.with({day: 1}) as T;
-    }
-
-    endOfMonth(value: T): T {
-        return value.add({months: 1})
-            .with({day: 1})
-            .subtract({days: 1}) as T;
-    }
-
-    startOfWeek(value: T): T {
-        return value.subtract({days: value.dayOfWeek - 1}) as T;
-    }
-
-    endOfWeek(value: T): T {
-        return value.add({days: 7 - value.dayOfWeek}) as T;
-    }
-
-    getNextMonth(value: T): T {
-        return value.add({months: 1}) as T;
-    }
-
-    getPreviousMonth(value: T): T {
-        return value.subtract({months: 1}) as T;
-    }
-
-    isBefore(value: T, comparing: T): boolean {
-        return PlainDateTime.compare(value, comparing) < 0;
-    }
-
-    isAfter(value: T, comparing: T): boolean {
-        return PlainDateTime.compare(value, comparing) > 0;
-    }
-
-    isSameDay(value: T, comparing: T): boolean {
-        return PlainDate.compare(value, comparing) == 0;
-    }
-
-    isSameMonth(value: T, comparing: T): boolean {
-        return value.toPlainYearMonth().equals(comparing.toPlainYearMonth());
-    }
-
-    isSameYear(value: T, comparing: T): boolean {
-        return value.year == comparing.year;
-    }
-
-    isWithinRange(value: T, [start, end]: [T, T]): boolean {
-        return !this.isBefore(value, start) && !this.isAfter(value, end);
-    }
-
-    isBeforeDay(value: T, comparing: T): boolean {
-        return PlainDate.compare(value, comparing) < 0;
-    }
-
-    isAfterDay(value: T, comparing: T): boolean {
-        return PlainDate.compare(value, comparing) > 0;
-    }
-
-    isBeforeYear(value: T, comparing: T): boolean {
-        return value.year < comparing.year;
-    }
-
-    isAfterYear(value: T, comparing: T): boolean {
-        return value.year > comparing.year;
-    }
-
-    getMonth(value: T): number {
-        return value.month;
-    }
-
-    getDaysInMonth(value: T): number {
-        return value.daysInMonth;
-    }
-
-    getYear(value: T): number {
-        return value.year;
-    }
-
-    getWeekdays(): string[] {
-        const today = Now.plainDateISO();
-        const startOfWeek = today.subtract({days: today.dayOfWeek - 1});
-        return [...Array(7).keys()]
-            .map(index => this.formats.weekday.format(startOfWeek.add({days: index})));
-    }
-
-    getMonthArray(value: T): T[] {
-        return [...Array(12).keys()]
-            .map(index => value.with({day: 1, month: index + 1}) as T);
-    }
-
-    getWeekArray(date: T): T[][] {
-        const start = this.startOfWeek(this.startOfMonth(date));
-        const end = this.endOfWeek(this.endOfMonth(date));
-        const weeks = (start.until(end).total("days") + 1) / 7;
-        return [...Array(weeks).keys()].map(weekIndex => {
-            const weekStart = start.add({weeks: weekIndex});
-            return [...Array(7).keys()]
-                .map(index => weekStart.add({days: index}) as T);
-        });
-    }
-
-    getYearRange(start: T, end: T): T[] {
-        return [...Array(end.year - start.year).keys()]
-            .map(yearIndex => start.add({years: yearIndex}) as T);
-    }
-
-    getDiff(value: T, comparing: T | string, unit?: Unit) {
-        return durationToUnit(value.until(comparing), unit);
-    }
+	startOfYear(value: T): T {
+		return value.with({day: 1, month: 1}) as T;
+	}
+
+	endOfYear(value: T): T {
+		return value.with({day: 31, month: 12}) as T;
+	}
+
+	startOfMonth(value: T): T {
+		return value.with({day: 1}) as T;
+	}
+
+	endOfMonth(value: T): T {
+		return value.add({months: 1})
+			.with({day: 1})
+			.subtract({days: 1}) as T;
+	}
+
+	startOfWeek(value: T): T {
+		return value.subtract({days: value.dayOfWeek - 1}) as T;
+	}
+
+	endOfWeek(value: T): T {
+		return value.add({days: 7 - value.dayOfWeek}) as T;
+	}
+
+	getNextMonth(value: T): T {
+		return value.add({months: 1}) as T;
+	}
+
+	getPreviousMonth(value: T): T {
+		return value.subtract({months: 1}) as T;
+	}
+
+	isBefore(value: T, comparing: T): boolean {
+		return PlainDateTime.compare(value, comparing) < 0;
+	}
+
+	isAfter(value: T, comparing: T): boolean {
+		return PlainDateTime.compare(value, comparing) > 0;
+	}
+
+	isSameDay(value: T, comparing: T): boolean {
+		return PlainDate.compare(value, comparing) == 0;
+	}
+
+	isSameMonth(value: T, comparing: T): boolean {
+		return value.toPlainYearMonth().equals(comparing.toPlainYearMonth());
+	}
+
+	isSameYear(value: T, comparing: T): boolean {
+		return value.year == comparing.year;
+	}
+
+	isWithinRange(value: T, [start, end]: [T, T]): boolean {
+		return !this.isBefore(value, start) && !this.isAfter(value, end);
+	}
+
+	isBeforeDay(value: T, comparing: T): boolean {
+		return PlainDate.compare(value, comparing) < 0;
+	}
+
+	isAfterDay(value: T, comparing: T): boolean {
+		return PlainDate.compare(value, comparing) > 0;
+	}
+
+	isBeforeYear(value: T, comparing: T): boolean {
+		return value.year < comparing.year;
+	}
+
+	isAfterYear(value: T, comparing: T): boolean {
+		return value.year > comparing.year;
+	}
+
+	getMonth(value: T): number {
+		return value.month;
+	}
+
+	getDaysInMonth(value: T): number {
+		return value.daysInMonth;
+	}
+
+	getYear(value: T): number {
+		return value.year;
+	}
+
+	getWeekdays(): string[] {
+		const today = Now.plainDateISO();
+		const startOfWeek = today.subtract({days: today.dayOfWeek - 1});
+		return [...Array(7).keys()]
+			.map(index => this.formats.weekday.format(startOfWeek.add({days: index})));
+	}
+
+	getMonthArray(value: T): T[] {
+		return [...Array(12).keys()]
+			.map(index => value.with({day: 1, month: index + 1}) as T);
+	}
+
+	getWeekArray(date: T): T[][] {
+		const start = this.startOfWeek(this.startOfMonth(date));
+		const end = this.endOfWeek(this.endOfMonth(date));
+		const weeks = (start.until(end).total("days") + 1) / 7;
+		return [...Array(weeks).keys()].map(weekIndex => {
+			const weekStart = start.add({weeks: weekIndex});
+			return [...Array(7).keys()]
+				.map(index => weekStart.add({days: index}) as T);
+		});
+	}
+
+	getYearRange(start: T, end: T): T[] {
+		return [...Array(end.year - start.year).keys()]
+			.map(yearIndex => start.add({years: yearIndex}) as T);
+	}
+
+	getDiff(value: T, comparing: T | string, unit?: Unit) {
+		return durationToUnit(value.until(comparing), unit);
+	}
 }
-

package/src/date-pickers/PlainDateAdapter.spec.ts

@@ -2,49 +2,47 @@ import {PlainDate} from "../temporal";
 import {PlainDateAdapter} from "./PlainDateAdapter";
 
 describe("PlainDateAdapter", () => {
-
-    const adapter = new PlainDateAdapter({locale: "de"});
-
-    test("isSameDay", () => {
-        expect(adapter.isSameDay(new PlainDate(2022, 5, 30), new PlainDate(2022, 5, 30))).toBe(true);
-        expect(adapter.isSameDay(new PlainDate(2022, 4, 30), new PlainDate(2022, 5, 30))).toBe(false);
-    });
-
-    test("isSameYear", () => {
-        expect(adapter.isSameYear(new PlainDate(2022, 5, 30), new PlainDate(2022, 5, 30))).toBe(true);
-        expect(adapter.isSameYear(new PlainDate(2022, 4, 30), new PlainDate(2022, 5, 30))).toBe(true);
-        expect(adapter.isSameYear(new PlainDate(2020, 4, 30), new PlainDate(2022, 5, 30))).toBe(false);
-    });
-
-    test("startOfWeek", () => {
-        const startOfWeek = adapter.startOfWeek(new PlainDate(2022, 5, 31));
-        expect(startOfWeek.year).toBe(2022);
-        expect(startOfWeek.month).toBe(5);
-        expect(startOfWeek.day).toBe(30);
-    });
-
-    test("endOfWeek", () => {
-        const startOfWeek = adapter.endOfWeek(new PlainDate(2022, 5, 31));
-        expect(startOfWeek.year).toBe(2022);
-        expect(startOfWeek.month).toBe(6);
-        expect(startOfWeek.day).toBe(5);
-    });
-
-    test("getYearRange", () => {
-        const range = adapter.getYearRange(PlainDate.from("2020-05-05"), PlainDate.from("2025-05-05"));
-        expect(range).toHaveLength(5);
-    });
-
-    test("getWeekArray", () => {
-        const weekArray = adapter.getWeekArray(new PlainDate(2022, 5, 30));
-        expect(weekArray).toHaveLength(6);
-        expect(weekArray[0][0].toString()).toBe("2022-04-25"); // monday of first week
-        expect(weekArray[5][6].toString()).toBe("2022-06-05"); // sunday of last week
-    });
-
-    test("getYearRange", () => {
-        const yearRange = adapter.getYearRange(new PlainDate(1995, 1, 1), new PlainDate(2020, 1, 1));
-        expect(yearRange).toHaveLength(25);
-    })
-
-});
+	const adapter = new PlainDateAdapter({locale: "de"});
+
+	test("isSameDay", () => {
+		expect(adapter.isSameDay(new PlainDate(2022, 5, 30), new PlainDate(2022, 5, 30))).toBe(true);
+		expect(adapter.isSameDay(new PlainDate(2022, 4, 30), new PlainDate(2022, 5, 30))).toBe(false);
+	});
+
+	test("isSameYear", () => {
+		expect(adapter.isSameYear(new PlainDate(2022, 5, 30), new PlainDate(2022, 5, 30))).toBe(true);
+		expect(adapter.isSameYear(new PlainDate(2022, 4, 30), new PlainDate(2022, 5, 30))).toBe(true);
+		expect(adapter.isSameYear(new PlainDate(2020, 4, 30), new PlainDate(2022, 5, 30))).toBe(false);
+	});
+
+	test("startOfWeek", () => {
+		const startOfWeek = adapter.startOfWeek(new PlainDate(2022, 5, 31));
+		expect(startOfWeek.year).toBe(2022);
+		expect(startOfWeek.month).toBe(5);
+		expect(startOfWeek.day).toBe(30);
+	});
+
+	test("endOfWeek", () => {
+		const startOfWeek = adapter.endOfWeek(new PlainDate(2022, 5, 31));
+		expect(startOfWeek.year).toBe(2022);
+		expect(startOfWeek.month).toBe(6);
+		expect(startOfWeek.day).toBe(5);
+	});
+
+	test("getYearRange", () => {
+		const range = adapter.getYearRange(PlainDate.from("2020-05-05"), PlainDate.from("2025-05-05"));
+		expect(range).toHaveLength(5);
+	});
+
+	test("getWeekArray", () => {
+		const weekArray = adapter.getWeekArray(new PlainDate(2022, 5, 30));
+		expect(weekArray).toHaveLength(6);
+		expect(weekArray[0][0].toString()).toBe("2022-04-25"); // monday of first week
+		expect(weekArray[5][6].toString()).toBe("2022-06-05"); // sunday of last week
+	});
+
+	test("getYearRange", () => {
+		const yearRange = adapter.getYearRange(new PlainDate(1995, 1, 1), new PlainDate(2020, 1, 1));
+		expect(yearRange).toHaveLength(25);
+	});
+});