@wrikka/solid-framework 0.0.0-stage → 0.15.0

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

@@ -0,0 +1,49 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useClick(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: {
+		onClick?: (event: MouseEvent) => void;
+		onDoubleClick?: (event: MouseEvent) => void;
+	} = {},
+): {
+	clicks: Accessor<number>;
+} {
+	const { onClick, onDoubleClick } = options;
+	const [clicks, setClicks] = createSignal(0);
+	let clickTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	const handleClick = (event: MouseEvent): void => {
+		if (onClick) {
+			onClick(event);
+		}
+
+		setClicks((prev) => prev + 1);
+
+		if (clickTimeout) {
+			clearTimeout(clickTimeout);
+		}
+		clickTimeout = setTimeout(() => {
+			if (clicks() === 2 && onDoubleClick) {
+				onDoubleClick(event);
+			}
+			setClicks(0);
+		}, 300);
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			el.addEventListener("click", handleClick);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (el) {
+			el.removeEventListener("click", handleClick);
+		}
+	});
+
+	return { clicks };
+}

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

@@ -0,0 +1,56 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useDrag(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: {
+		onDragStart?: (event: DragEvent) => void;
+		onDrag?: (event: DragEvent) => void;
+		onDragEnd?: (event: DragEvent) => void;
+	} = {},
+): {
+	isDragging: Accessor<boolean>;
+} {
+	const { onDragStart, onDrag, onDragEnd } = options;
+	const [isDragging, setIsDragging] = createSignal(false);
+
+	const handleDragStart = (event: DragEvent): void => {
+		setIsDragging(true);
+		if (onDragStart) {
+			onDragStart(event);
+		}
+	};
+
+	const handleDrag = (event: DragEvent): void => {
+		if (onDrag) {
+			onDrag(event);
+		}
+	};
+
+	const handleDragEnd = (event: DragEvent): void => {
+		setIsDragging(false);
+		if (onDragEnd) {
+			onDragEnd(event);
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			el.setAttribute("draggable", "true");
+			el.addEventListener("dragstart", handleDragStart);
+			el.addEventListener("drag", handleDrag);
+			el.addEventListener("dragend", handleDragEnd);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (el) {
+			el.removeEventListener("dragstart", handleDragStart);
+			el.removeEventListener("drag", handleDrag);
+			el.removeEventListener("dragend", handleDragEnd);
+		}
+	});
+
+	return { isDragging };
+}

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

@@ -0,0 +1,57 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useDraggable(
+	target: Accessor<HTMLElement | null | undefined>,
+): {
+	x: Accessor<number>;
+	y: Accessor<number>;
+	isDragging: Accessor<boolean>;
+} {
+	const [x, setX] = createSignal(0);
+	const [y, setY] = createSignal(0);
+	const [isDragging, setIsDragging] = createSignal(false);
+	let startX = 0;
+	let startY = 0;
+
+	const onMouseDown = (event: MouseEvent): void => {
+		setIsDragging(true);
+		startX = event.clientX - x();
+		startY = event.clientY - y();
+	};
+
+	const onMouseMove = (event: MouseEvent): void => {
+		if (!isDragging()) {
+			return;
+		}
+		setX(event.clientX - startX);
+		setY(event.clientY - startY);
+	};
+
+	const onMouseUp = (): void => {
+		setIsDragging(false);
+	};
+
+	onMount(() => {
+		const el = target();
+		if (!el) {
+			return;
+		}
+
+		el.addEventListener("mousedown", onMouseDown);
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseUp);
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (!el) {
+			return;
+		}
+
+		el.removeEventListener("mousedown", onMouseDown);
+		window.removeEventListener("mousemove", onMouseMove);
+		window.removeEventListener("mouseup", onMouseUp);
+	});
+
+	return { x, y, isDragging };
+}

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

@@ -0,0 +1,92 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useDraggableHandle(
+	_target: Accessor<HTMLElement | null | undefined>,
+	handle: Accessor<HTMLElement | null | undefined>,
+	options: {
+		axis?: "x" | "y" | "both";
+		bounds?: { left?: number; right?: number; top?: number; bottom?: number };
+	} = {},
+): {
+	position: Accessor<{ x: number; y: number }>;
+	isDragging: Accessor<boolean>;
+} {
+	const { axis = "both", bounds } = options;
+	const [position, setPosition] = createSignal({ x: 0, y: 0 });
+	const [isDragging, setIsDragging] = createSignal(false);
+	let startX = 0;
+	let startY = 0;
+	let initialX = 0;
+	let initialY = 0;
+
+	const handleMouseDown = (event: MouseEvent): void => {
+		setIsDragging(true);
+		startX = event.clientX;
+		startY = event.clientY;
+		initialX = position().x;
+		initialY = position().y;
+
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+	};
+
+	const handleMouseMove = (event: MouseEvent): void => {
+		if (!isDragging()) {
+			return;
+		}
+
+		const deltaX = event.clientX - startX;
+		const deltaY = event.clientY - startY;
+
+		let newX = initialX + deltaX;
+		let newY = initialY + deltaY;
+
+		if (axis === "x") {
+			newY = 0;
+		}
+		if (axis === "y") {
+			newX = 0;
+		}
+
+		if (bounds) {
+			if (bounds.left !== undefined) {
+				newX = Math.max(newX, bounds.left);
+			}
+			if (bounds.right !== undefined) {
+				newX = Math.min(newX, bounds.right);
+			}
+			if (bounds.top !== undefined) {
+				newY = Math.max(newY, bounds.top);
+			}
+			if (bounds.bottom !== undefined) {
+				newY = Math.min(newY, bounds.bottom);
+			}
+		}
+
+		setPosition({ x: newX, y: newY });
+	};
+
+	const handleMouseUp = (): void => {
+		setIsDragging(false);
+		document.removeEventListener("mousemove", handleMouseMove);
+		document.removeEventListener("mouseup", handleMouseUp);
+	};
+
+	onMount(() => {
+		const h = handle();
+		if (h) {
+			h.addEventListener("mousedown", handleMouseDown);
+		}
+	});
+
+	onCleanup(() => {
+		const h = handle();
+		if (h) {
+			h.removeEventListener("mousedown", handleMouseDown);
+		}
+		document.removeEventListener("mousemove", handleMouseMove);
+		document.removeEventListener("mouseup", handleMouseUp);
+	});
+
+	return { position, isDragging };
+}

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

@@ -0,0 +1,54 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useDrop(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: {
+		onDrop?: (event: DragEvent) => void;
+		onDragOver?: (event: DragEvent) => void;
+	} = {},
+): {
+	isOver: Accessor<boolean>;
+} {
+	const { onDrop, onDragOver } = options;
+	const [isOver, setIsOver] = createSignal(false);
+
+	const handleDragOver = (event: DragEvent): void => {
+		event.preventDefault();
+		setIsOver(true);
+		if (onDragOver) {
+			onDragOver(event);
+		}
+	};
+
+	const handleDragLeave = (): void => {
+		setIsOver(false);
+	};
+
+	const handleDrop = (event: DragEvent): void => {
+		event.preventDefault();
+		setIsOver(false);
+		if (onDrop) {
+			onDrop(event);
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			el.addEventListener("dragover", handleDragOver);
+			el.addEventListener("dragleave", handleDragLeave);
+			el.addEventListener("drop", handleDrop);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (el) {
+			el.removeEventListener("dragover", handleDragOver);
+			el.removeEventListener("dragleave", handleDragLeave);
+			el.removeEventListener("drop", handleDrop);
+		}
+	});
+
+	return { isOver };
+}

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

@@ -0,0 +1,67 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useDropZone(
+	target: Accessor<HTMLElement | null | undefined>,
+	options: {
+		accept?: string[];
+		multiple?: boolean;
+		onDrop?: (files: File[]) => void;
+	} = {},
+): {
+	isOver: Accessor<boolean>;
+	files: Accessor<File[]>;
+} {
+	const { accept, multiple = false, onDrop } = options;
+	const [isOver, setIsOver] = createSignal(false);
+	const [files, setFiles] = createSignal<File[]>([]);
+
+	const handleDragOver = (event: DragEvent): void => {
+		event.preventDefault();
+		setIsOver(true);
+	};
+
+	const handleDragLeave = (): void => {
+		setIsOver(false);
+	};
+
+	const handleDrop = (event: DragEvent): void => {
+		event.preventDefault();
+		setIsOver(false);
+
+		if (!event.dataTransfer) {
+			return;
+		}
+
+		const droppedFiles = Array.from(event.dataTransfer.files);
+
+		if (accept) {
+			setFiles(() => droppedFiles.filter((file) => accept.includes(file.type)));
+		} else {
+			setFiles(() => (multiple ? droppedFiles : droppedFiles.slice(0, 1)));
+		}
+
+		if (onDrop) {
+			onDrop(files());
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			el.addEventListener("dragover", handleDragOver);
+			el.addEventListener("dragleave", handleDragLeave);
+			el.addEventListener("drop", handleDrop);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (el) {
+			el.removeEventListener("dragover", handleDragOver);
+			el.removeEventListener("dragleave", handleDragLeave);
+			el.removeEventListener("drop", handleDrop);
+		}
+	});
+
+	return { isOver, files };
+}

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

@@ -0,0 +1,52 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useElementBounding(
+	target: Accessor<HTMLElement | null | undefined>,
+): {
+	x: Accessor<number>;
+	y: Accessor<number>;
+	top: Accessor<number>;
+	left: Accessor<number>;
+	right: Accessor<number>;
+	bottom: Accessor<number>;
+	width: Accessor<number>;
+	height: Accessor<number>;
+	update: () => void;
+} {
+	const [x, setX] = createSignal(0);
+	const [y, setY] = createSignal(0);
+	const [top, setTop] = createSignal(0);
+	const [left, setLeft] = createSignal(0);
+	const [right, setRight] = createSignal(0);
+	const [bottom, setBottom] = createSignal(0);
+	const [width, setWidth] = createSignal(0);
+	const [height, setHeight] = createSignal(0);
+
+	const update = (): void => {
+		const el = target();
+		if (el) {
+			const rect = el.getBoundingClientRect();
+			setX(rect.x);
+			setY(rect.y);
+			setTop(rect.top);
+			setLeft(rect.left);
+			setRight(rect.right);
+			setBottom(rect.bottom);
+			setWidth(rect.width);
+			setHeight(rect.height);
+		}
+	};
+
+	onMount(() => {
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update);
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("resize", update);
+		window.removeEventListener("scroll", update);
+	});
+
+	return { x, y, top, left, right, bottom, width, height, update };
+}

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

@@ -0,0 +1,30 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useElementSize(
+	target: Accessor<HTMLElement | null | undefined>,
+): {
+	width: Accessor<number>;
+	height: Accessor<number>;
+} {
+	const [width, setWidth] = createSignal(0);
+	const [height, setHeight] = createSignal(0);
+
+	const update = (): void => {
+		const el = target();
+		if (el) {
+			setWidth(el.offsetWidth);
+			setHeight(el.offsetHeight);
+		}
+	};
+
+	onMount(() => {
+		update();
+		window.addEventListener("resize", update);
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("resize", update);
+	});
+
+	return { width, height };
+}

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

@@ -0,0 +1,33 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useElementVisibility(
+	target: Accessor<HTMLElement | null | undefined>,
+): {
+	isVisible: Accessor<boolean>;
+} {
+	const [isVisible, setIsVisible] = createSignal(false);
+
+	const update = (): void => {
+		const el = target();
+		if (!el) {
+			setIsVisible(false);
+			return;
+		}
+
+		const rect = el.getBoundingClientRect();
+		setIsVisible(rect.top < window.innerHeight && rect.bottom >= 0);
+	};
+
+	onMount(() => {
+		update();
+		window.addEventListener("scroll", update);
+		window.addEventListener("resize", update);
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("scroll", update);
+		window.removeEventListener("resize", update);
+	});
+
+	return { isVisible };
+}

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

@@ -0,0 +1,33 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useFileDialog(
+	options: { accept?: string; multiple?: boolean } = {},
+): {
+	open: () => void;
+	files: Accessor<File[]>;
+} {
+	const { accept, multiple = false } = options;
+	const [files, setFiles] = createSignal<File[]>([]);
+
+	const open = (): void => {
+		const input = document.createElement("input");
+		input.type = "file";
+		if (accept) {
+			input.accept = accept;
+		}
+		if (multiple) {
+			input.multiple = true;
+		}
+
+		input.onchange = (event) => {
+			const target = event.target as HTMLInputElement;
+			if (target.files) {
+				setFiles(() => Array.from(target.files ?? []));
+			}
+		};
+
+		input.click();
+	};
+
+	return { open, files };
+}

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

@@ -0,0 +1,20 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useFileInput(
+	target: Accessor<HTMLInputElement | null | undefined>,
+): {
+	files: Accessor<File[]>;
+	reset: () => void;
+} {
+	const [files, setFiles] = createSignal<File[]>([]);
+
+	const reset = (): void => {
+		const input = target();
+		if (input) {
+			input.value = "";
+			setFiles([]);
+		}
+	};
+
+	return { files, reset };
+}

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

@@ -0,0 +1,49 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useFocus(target?: Accessor<HTMLElement | null | undefined>): {
+	focused: Accessor<boolean>;
+	focus: () => void;
+	blur: () => void;
+} {
+	const [focused, setFocused] = createSignal(false);
+
+	const onFocus = (): void => {
+		setFocused(true);
+	};
+
+	const onBlur = (): void => {
+		setFocused(false);
+	};
+
+	const focus = (): void => {
+		const el = target?.();
+		if (el) {
+			el.focus();
+		}
+	};
+
+	const blur = (): void => {
+		const el = target?.();
+		if (el) {
+			el.blur();
+		}
+	};
+
+	onMount(() => {
+		const el = target?.();
+		if (el) {
+			el.addEventListener("focus", onFocus);
+			el.addEventListener("blur", onBlur);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target?.();
+		if (el) {
+			el.removeEventListener("focus", onFocus);
+			el.removeEventListener("blur", onBlur);
+		}
+	});
+
+	return { focused, focus, blur };
+}

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

@@ -0,0 +1,33 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useHover(target?: Accessor<HTMLElement | null | undefined>): {
+	hovered: Accessor<boolean>;
+} {
+	const [hovered, setHovered] = createSignal(false);
+
+	const onMouseEnter = (): void => {
+		setHovered(true);
+	};
+
+	const onMouseLeave = (): void => {
+		setHovered(false);
+	};
+
+	onMount(() => {
+		const el = target?.();
+		if (el) {
+			el.addEventListener("mouseenter", onMouseEnter);
+			el.addEventListener("mouseleave", onMouseLeave);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target?.();
+		if (el) {
+			el.removeEventListener("mouseenter", onMouseEnter);
+			el.removeEventListener("mouseleave", onMouseLeave);
+		}
+	});
+
+	return { hovered };
+}

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

@@ -0,0 +1,27 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useImagePreview(): {
+	preview: Accessor<string | null>;
+	load: (file: File) => void;
+	clear: () => void;
+} {
+	const [preview, setPreview] = 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 clear = (): void => {
+		setPreview(null);
+	};
+
+	return { preview, load, clear };
+}