@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/hooks/presentation/solid/elements/useImageUpload.ts

@@ -0,0 +1,66 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useImageUpload(
+	options: { maxSize?: number; maxWidth?: number; maxHeight?: number } = {},
+): {
+	preview: Accessor<string | null>;
+	compressed: Accessor<string | null>;
+	load: (file: File) => void;
+	compress: () => void;
+	clear: () => void;
+} {
+	const { maxWidth = 1920, maxHeight = 1080 } = options;
+	const [preview, setPreview] = createSignal<string | null>(null);
+	const [compressed, setCompressed] = createSignal<string | null>(null);
+
+	const load = (file: File): void => {
+		if (!file.type.startsWith("image/")) {
+			return;
+		}
+
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			setPreview(event.target?.result as string);
+		};
+		reader.readAsDataURL(file);
+	};
+
+	const compress = (): void => {
+		const currentPreview = preview();
+		if (!currentPreview) {
+			return;
+		}
+
+		const img = new Image();
+		img.onload = (): void => {
+			const canvas = document.createElement("canvas");
+			let { width, height } = img;
+
+			if (width > maxWidth) {
+				height = (height * maxWidth) / width;
+				width = maxWidth;
+			}
+			if (height > maxHeight) {
+				width = (width * maxHeight) / height;
+				height = maxHeight;
+			}
+
+			canvas.width = width;
+			canvas.height = height;
+
+			const ctx = canvas.getContext("2d");
+			if (ctx) {
+				ctx.drawImage(img, 0, 0, width, height);
+				setCompressed(canvas.toDataURL("image/jpeg", 0.8));
+			}
+		};
+		img.src = currentPreview;
+	};
+
+	const clear = (): void => {
+		setPreview(null);
+		setCompressed(null);
+	};
+
+	return { preview, compressed, load, compress, clear };
+}

package/src/hooks/presentation/solid/elements/useInfiniteScroll.ts

@@ -0,0 +1,52 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+import { INFINITE_SCROLL_CONFIG } from "#hooks/adapters/config";
+
+export function useInfiniteScroll(
+	onLoadMore: () => Promise<void>,
+	options: {
+		distance?: number;
+		direction?: "top" | "bottom";
+	} = {},
+): {
+	isLoading: Accessor<boolean>;
+} {
+	const {
+		distance = INFINITE_SCROLL_CONFIG.DEFAULT_DISTANCE,
+		direction = "bottom",
+	} = options;
+	const [isLoading, setIsLoading] = createSignal(false);
+
+	const onScroll = async (): Promise<void> => {
+		if (isLoading()) {
+			return;
+		}
+
+		const scrollTop = window.scrollY || document.documentElement.scrollTop;
+		const scrollHeight = document.documentElement.scrollHeight;
+		const clientHeight = window.innerHeight;
+
+		let shouldLoad = false;
+
+		if (direction === "bottom") {
+			shouldLoad = scrollTop + clientHeight >= scrollHeight - distance;
+		} else {
+			shouldLoad = scrollTop <= distance;
+		}
+
+		if (shouldLoad) {
+			setIsLoading(true);
+			await onLoadMore();
+			setIsLoading(false);
+		}
+	};
+
+	onMount(() => {
+		window.addEventListener("scroll", onScroll, { passive: true });
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("scroll", onScroll);
+	});
+
+	return { isLoading };
+}

package/src/hooks/presentation/solid/elements/useIntersectionAdvanced.ts

@@ -0,0 +1,43 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useIntersectionAdvanced(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: IntersectionObserverInit = {},
+): {
+	isVisible: Accessor<boolean>;
+	ratio: Accessor<number>;
+	stop: () => void;
+} {
+	const [isVisible, setIsVisible] = createSignal(false);
+	const [ratio, setRatio] = createSignal(0);
+	let observer: IntersectionObserver | null = null;
+
+	const stop = (): void => {
+		if (observer) {
+			observer.disconnect();
+			observer = null;
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (!el) {
+			return;
+		}
+
+		observer = new IntersectionObserver(([entry]) => {
+			if (entry) {
+				setIsVisible(entry.isIntersecting);
+				setRatio(entry.intersectionRatio);
+			}
+		}, options);
+
+		observer.observe(el);
+	});
+
+	onCleanup(() => {
+		stop();
+	});
+
+	return { isVisible, ratio, stop };
+}

package/src/hooks/presentation/solid/elements/useIntersectionObserver.ts

@@ -0,0 +1,40 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useIntersectionObserver(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: IntersectionObserverInit = {},
+): {
+	isVisible: Accessor<boolean>;
+	stop: () => void;
+} {
+	const [isVisible, setIsVisible] = createSignal(false);
+	let observer: IntersectionObserver | null = null;
+
+	const stop = (): void => {
+		if (observer) {
+			observer.disconnect();
+			observer = null;
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (!el) {
+			return;
+		}
+
+		observer = new IntersectionObserver(([entry]) => {
+			if (entry) {
+				setIsVisible(entry.isIntersecting);
+			}
+		}, options);
+
+		observer.observe(el);
+	});
+
+	onCleanup(() => {
+		stop();
+	});
+
+	return { isVisible, stop };
+}

package/src/hooks/presentation/solid/elements/useLayout.ts

@@ -0,0 +1,47 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useLayout(): {
+	width: Accessor<number>;
+	height: Accessor<number>;
+	scrollbarWidth: Accessor<number>;
+	scrollbarHeight: Accessor<number>;
+} {
+	const [width, setWidth] = createSignal(window.innerWidth);
+	const [height, setHeight] = createSignal(window.innerHeight);
+	const [scrollbarWidth, setScrollbarWidth] = createSignal(0);
+	const [scrollbarHeight, setScrollbarHeight] = createSignal(0);
+
+	const measureScrollbar = (): void => {
+		const outer = document.createElement("div");
+		outer.style.visibility = "hidden";
+		outer.style.overflow = "scroll";
+		outer.style.position = "absolute";
+		outer.style.top = "-9999px";
+		document.body.appendChild(outer);
+
+		const inner = document.createElement("div");
+		outer.appendChild(inner);
+
+		setScrollbarWidth(outer.offsetWidth - inner.offsetWidth);
+		setScrollbarHeight(outer.offsetHeight - inner.offsetHeight);
+
+		document.body.removeChild(outer);
+	};
+
+	const handleResize = (): void => {
+		setWidth(window.innerWidth);
+		setHeight(window.innerHeight);
+		measureScrollbar();
+	};
+
+	onMount(() => {
+		window.addEventListener("resize", handleResize);
+		measureScrollbar();
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("resize", handleResize);
+	});
+
+	return { width, height, scrollbarWidth, scrollbarHeight };
+}

package/src/hooks/presentation/solid/elements/useLongPress.ts

@@ -0,0 +1,54 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useLongPress(
+	target: Accessor<HTMLElement | null | undefined>,
+	callback: () => void,
+	options: {
+		delay?: number;
+	} = {},
+): {
+	isLongPressing: Accessor<boolean>;
+} {
+	const { delay = 500 } = options;
+	const [isLongPressing, setIsLongPressing] = createSignal(false);
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	const start = (): void => {
+		timeout = setTimeout(() => {
+			setIsLongPressing(true);
+			callback();
+		}, delay);
+	};
+
+	const cancel = (): void => {
+		if (timeout) {
+			clearTimeout(timeout);
+			timeout = null;
+		}
+		setIsLongPressing(false);
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			el.addEventListener("mousedown", start);
+			el.addEventListener("touchstart", start);
+			el.addEventListener("mouseup", cancel);
+			el.addEventListener("mouseleave", cancel);
+			el.addEventListener("touchend", cancel);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (el) {
+			el.removeEventListener("mousedown", start);
+			el.removeEventListener("touchstart", start);
+			el.removeEventListener("mouseup", cancel);
+			el.removeEventListener("mouseleave", cancel);
+			el.removeEventListener("touchend", cancel);
+		}
+	});
+
+	return { isLongPressing };
+}

package/src/hooks/presentation/solid/elements/useMagicKeys.ts

@@ -0,0 +1,60 @@
+import {
+	type Accessor,
+	createMemo,
+	createSignal,
+	onCleanup,
+	onMount,
+} from "solid-js";
+
+export function useMagicKeys(
+	target?: Accessor<HTMLElement | null | undefined>,
+): {
+	current: Accessor<Set<string>>;
+	ctrl: Accessor<boolean>;
+	shift: Accessor<boolean>;
+	alt: Accessor<boolean>;
+	meta: Accessor<boolean>;
+} {
+	const [current, setCurrent] = createSignal(new Set<string>());
+
+	const onKeyDown = (event: KeyboardEvent): void => {
+		setCurrent((prev) => new Set(prev).add(event.key));
+	};
+
+	const onKeyUp = (event: KeyboardEvent): void => {
+		setCurrent((prev) => {
+			const next = new Set(prev);
+			next.delete(event.key);
+			return next;
+		});
+	};
+
+	onMount(() => {
+		const el = target?.();
+		if (el) {
+			el.addEventListener("keydown", onKeyDown);
+			el.addEventListener("keyup", onKeyUp);
+		} else {
+			window.addEventListener("keydown", onKeyDown);
+			window.addEventListener("keyup", onKeyUp);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target?.();
+		if (el) {
+			el.removeEventListener("keydown", onKeyDown);
+			el.removeEventListener("keyup", onKeyUp);
+		} else {
+			window.removeEventListener("keydown", onKeyDown);
+			window.removeEventListener("keyup", onKeyUp);
+		}
+	});
+
+	const ctrl = createMemo(() => current().has("Control"));
+	const shift = createMemo(() => current().has("Shift"));
+	const alt = createMemo(() => current().has("Alt"));
+	const meta = createMemo(() => current().has("Meta"));
+
+	return { current, ctrl, shift, alt, meta };
+}

package/src/hooks/presentation/solid/elements/useMediaQuery.ts

@@ -0,0 +1,24 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useMediaQuery(query: string): {
+	matches: Accessor<boolean>;
+} {
+	const [matches, setMatches] = createSignal(false);
+
+	onMount(() => {
+		const mediaQuery = window.matchMedia(query);
+		setMatches(mediaQuery.matches);
+
+		const handleChange = (e: MediaQueryListEvent): void => {
+			setMatches(e.matches);
+		};
+
+		mediaQuery.addEventListener("change", handleChange);
+
+		onCleanup(() => {
+			mediaQuery.removeEventListener("change", handleChange);
+		});
+	});
+
+	return { matches };
+}

package/src/hooks/presentation/solid/elements/useModal.ts

@@ -0,0 +1,24 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useModal(): {
+	isOpen: Accessor<boolean>;
+	open: () => void;
+	close: () => void;
+	toggle: () => void;
+} {
+	const [isOpen, setIsOpen] = createSignal(false);
+
+	const open = (): void => {
+		setIsOpen(true);
+	};
+
+	const close = (): void => {
+		setIsOpen(false);
+	};
+
+	const toggle = (): void => {
+		setIsOpen((prev) => !prev);
+	};
+
+	return { isOpen, open, close, toggle };
+}

package/src/hooks/presentation/solid/elements/useMouse.ts

@@ -0,0 +1,51 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useMouse(target?: Accessor<HTMLElement | null | undefined>): {
+	x: Accessor<number>;
+	y: Accessor<number>;
+	sourceType: Accessor<"mouse" | "touch" | null>;
+} {
+	const [x, setX] = createSignal(0);
+	const [y, setY] = createSignal(0);
+	const [sourceType, setSourceType] = createSignal<"mouse" | "touch" | null>(
+		null,
+	);
+
+	const onMouseMove = (event: MouseEvent): void => {
+		setX(event.clientX);
+		setY(event.clientY);
+		setSourceType("mouse");
+	};
+
+	const onTouchMove = (event: TouchEvent): void => {
+		if (event.touches[0]) {
+			setX(event.touches[0].clientX);
+			setY(event.touches[0].clientY);
+		}
+		setSourceType("touch");
+	};
+
+	onMount(() => {
+		const el = target?.();
+		if (el) {
+			el.addEventListener("mousemove", onMouseMove);
+			el.addEventListener("touchmove", onTouchMove);
+		} else {
+			window.addEventListener("mousemove", onMouseMove);
+			window.addEventListener("touchmove", onTouchMove);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target?.();
+		if (el) {
+			el.removeEventListener("mousemove", onMouseMove);
+			el.removeEventListener("touchmove", onTouchMove);
+		} else {
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("touchmove", onTouchMove);
+		}
+	});
+
+	return { x, y, sourceType };
+}

package/src/hooks/presentation/solid/elements/useMutationObserver.ts

@@ -0,0 +1,38 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useMutationObserver(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: MutationObserverInit = {},
+): {
+	mutations: Accessor<MutationRecord[]>;
+	stop: () => void;
+} {
+	const [mutations, setMutations] = createSignal<MutationRecord[]>([]);
+	let observer: MutationObserver | null = null;
+
+	const stop = (): void => {
+		if (observer) {
+			observer.disconnect();
+			observer = null;
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (!el) {
+			return;
+		}
+
+		observer = new MutationObserver((records) => {
+			setMutations(records);
+		});
+
+		observer.observe(el, options);
+	});
+
+	onCleanup(() => {
+		stop();
+	});
+
+	return { mutations, stop };
+}

package/src/hooks/presentation/solid/elements/useOnClickOutside.ts

@@ -0,0 +1,25 @@
+import { type Accessor, onCleanup, onMount } from "solid-js";
+
+export function onClickOutside(
+	target: Accessor<HTMLElement | null | undefined>,
+	callback: () => void,
+): void {
+	const onClick = (event: MouseEvent): void => {
+		const el = target();
+		if (!el) {
+			return;
+		}
+
+		if (!el.contains(event.target as Node)) {
+			callback();
+		}
+	};
+
+	onMount(() => {
+		window.addEventListener("click", onClick);
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("click", onClick);
+	});
+}

package/src/hooks/presentation/solid/elements/useOnKeyStroke.ts

@@ -0,0 +1,33 @@
+import { type Accessor, onCleanup, onMount } from "solid-js";
+
+export function onKeyStroke(
+	key: string | string[],
+	callback: (event: KeyboardEvent) => void,
+	target?: Accessor<HTMLElement | null | undefined>,
+): void {
+	const keys = Array.isArray(key) ? key : [key];
+
+	const onKeyDown = (event: KeyboardEvent): void => {
+		if (keys.includes(event.key)) {
+			callback(event);
+		}
+	};
+
+	onMount(() => {
+		const el = target?.();
+		if (el) {
+			el.addEventListener("keydown", onKeyDown);
+		} else {
+			window.addEventListener("keydown", onKeyDown);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target?.();
+		if (el) {
+			el.removeEventListener("keydown", onKeyDown);
+		} else {
+			window.removeEventListener("keydown", onKeyDown);
+		}
+	});
+}

package/src/hooks/presentation/solid/elements/useParallax.ts

@@ -0,0 +1,34 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useParallax(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: {
+		speed?: number;
+	} = {},
+): {
+	transform: Accessor<string>;
+} {
+	const { speed = 0.5 } = options;
+	const [transform, setTransform] = createSignal("translateY(0px)");
+
+	const handleScroll = (): void => {
+		const el = target();
+		if (!el) {
+			return;
+		}
+
+		const scrollY = window.scrollY;
+		const offset = scrollY * speed;
+		setTransform(`translateY(${offset}px)`);
+	};
+
+	onMount(() => {
+		window.addEventListener("scroll", handleScroll, { passive: true });
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("scroll", handleScroll);
+	});
+
+	return { transform };
+}

package/src/hooks/presentation/solid/elements/usePerformanceObserver.ts

@@ -0,0 +1,30 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function usePerformanceObserver(options: PerformanceObserverInit = {}): {
+	entries: Accessor<PerformanceEntry[]>;
+	stop: () => void;
+} {
+	const [entries, setEntries] = createSignal<PerformanceEntry[]>([]);
+	let observer: PerformanceObserver | null = null;
+
+	const stop = (): void => {
+		if (observer) {
+			observer.disconnect();
+			observer = null;
+		}
+	};
+
+	onMount(() => {
+		observer = new PerformanceObserver((list) => {
+			setEntries(list.getEntries());
+		});
+
+		observer.observe(options);
+	});
+
+	onCleanup(() => {
+		stop();
+	});
+
+	return { entries, stop };
+}

package/src/hooks/presentation/solid/elements/usePinch.ts

@@ -0,0 +1,61 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function usePinch(target: Accessor<HTMLElement | null | undefined>): {
+	scale: Accessor<number>;
+	distance: Accessor<number>;
+} {
+	const [scale, setScale] = createSignal(1);
+	const [distance, setDistance] = createSignal(0);
+	let initialDistance = 0;
+	let initialScale = 1;
+
+	const handleTouchStart = (event: TouchEvent): void => {
+		if (event.touches.length === 2 && event.touches[0] && event.touches[1]) {
+			initialDistance = Math.hypot(
+				event.touches[0].clientX - event.touches[1].clientX,
+				event.touches[0].clientY - event.touches[1].clientY,
+			);
+			initialScale = scale();
+		}
+	};
+
+	const handleTouchMove = (event: TouchEvent): void => {
+		if (
+			event.touches.length === 2 &&
+			initialDistance > 0 &&
+			event.touches[0] &&
+			event.touches[1]
+		) {
+			const currentDistance = Math.hypot(
+				event.touches[0].clientX - event.touches[1].clientX,
+				event.touches[0].clientY - event.touches[1].clientY,
+			);
+			setDistance(currentDistance);
+			setScale(initialScale * (currentDistance / initialDistance));
+		}
+	};
+
+	const handleTouchEnd = (): void => {
+		initialDistance = 0;
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			el.addEventListener("touchstart", handleTouchStart);
+			el.addEventListener("touchmove", handleTouchMove);
+			el.addEventListener("touchend", handleTouchEnd);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (el) {
+			el.removeEventListener("touchstart", handleTouchStart);
+			el.removeEventListener("touchmove", handleTouchMove);
+			el.removeEventListener("touchend", handleTouchEnd);
+		}
+	});
+
+	return { scale, distance };
+}