@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/hooks/presentation/solid/browser/useScreenOrientation.ts

@@ -0,0 +1,37 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useScreenOrientation(): {
+	orientation: Accessor<string>;
+	lock: (orientation: string) => Promise<void>;
+	unlock: () => Promise<void>;
+} {
+	const [orientation, setOrientation] = createSignal<string>(
+		screen.orientation.type,
+	);
+
+	const lock = async (orient: string): Promise<void> => {
+		try {
+			await (screen.orientation as any).lock(orient);
+		} catch (_err) {}
+	};
+
+	const unlock = async (): Promise<void> => {
+		try {
+			await screen.orientation.unlock();
+		} catch (_err) {}
+	};
+
+	const handleChange = (): void => {
+		setOrientation(screen.orientation.type);
+	};
+
+	onMount(() => {
+		screen.orientation.addEventListener("change", handleChange);
+	});
+
+	onCleanup(() => {
+		screen.orientation.removeEventListener("change", handleChange);
+	});
+
+	return { orientation, lock, unlock };
+}

package/src/hooks/presentation/solid/browser/useServiceWorker.ts

@@ -0,0 +1,29 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useServiceWorker(): {
+	isSupported: Accessor<boolean>;
+	registration: Accessor<ServiceWorkerRegistration | null>;
+	register: (
+		scriptUrl: string,
+		options?: RegistrationOptions,
+	) => Promise<ServiceWorkerRegistration>;
+} {
+	const [isSupported] = createSignal("serviceWorker" in navigator);
+	const [registration, setRegistration] =
+		createSignal<ServiceWorkerRegistration | null>(null);
+
+	const register = async (
+		scriptUrl: string,
+		options: RegistrationOptions = {},
+	): Promise<ServiceWorkerRegistration> => {
+		if (!isSupported()) {
+			throw new Error("Service Worker is not supported");
+		}
+
+		const reg = await navigator.serviceWorker.register(scriptUrl, options);
+		setRegistration(reg);
+		return reg;
+	};
+
+	return { isSupported, registration, register };
+}

package/src/hooks/presentation/solid/browser/useSessionStorage.ts

@@ -0,0 +1,11 @@
+import type { Accessor } from "solid-js";
+import type { StorageOptions } from "#hooks/shared/types";
+import { useStorage } from "./useStorage";
+
+export function useSessionStorage<T>(
+	key: string,
+	initialValue: T,
+	options: StorageOptions<T> = {},
+): Accessor<T> {
+	return useStorage(key, initialValue, sessionStorage, options);
+}

package/src/hooks/presentation/solid/browser/useShare.ts

@@ -0,0 +1,12 @@
+import { createSignal } from "solid-js";
+
+export function useShare() {
+	const [isSupported] = createSignal("share" in navigator);
+	const share = async (data: any) => {
+		if (!isSupported()) {
+			throw new Error("Web Share API is not supported");
+		}
+		await (navigator as any).share(data);
+	};
+	return { isSupported, share };
+}

package/src/hooks/presentation/solid/browser/useSpeechRecognition.ts

@@ -0,0 +1,71 @@
+import { type Accessor, createSignal, onCleanup } from "solid-js";
+
+export function useSpeechRecognition(
+	options: {
+		lang?: string;
+		continuous?: boolean;
+		interimResults?: boolean;
+	} = {},
+): {
+	isSupported: Accessor<boolean>;
+	isListening: Accessor<boolean>;
+	transcript: Accessor<string>;
+	start: () => void;
+	stop: () => void;
+} {
+	const {
+		lang = "en-US",
+		continuous = false,
+		interimResults = false,
+	} = options;
+	const [isSupported] = createSignal(
+		"webkitSpeechRecognition" in window || "SpeechRecognition" in window,
+	);
+	const [isListening, setIsListening] = createSignal(false);
+	const [transcript, setTranscript] = createSignal("");
+
+	const SpeechRecognitionClass =
+		(window as any).SpeechRecognition ||
+		(window as any).webkitSpeechRecognition;
+	let recognition: any = null;
+
+	const start = (): void => {
+		if (!isSupported() || isListening()) {
+			return;
+		}
+
+		recognition = new SpeechRecognitionClass();
+		recognition.lang = lang;
+		recognition.continuous = continuous;
+		recognition.interimResults = interimResults;
+
+		recognition.onresult = (event: any) => {
+			const result = event.results[event.results.length - 1];
+			setTranscript(result[0].transcript);
+		};
+
+		recognition.onerror = (_event: any): void => {
+			setIsListening(false);
+		};
+
+		recognition.onend = (): void => {
+			setIsListening(false);
+		};
+
+		recognition.start();
+		setIsListening(true);
+	};
+
+	const stop = (): void => {
+		if (recognition) {
+			recognition.stop();
+			setIsListening(false);
+		}
+	};
+
+	onCleanup(() => {
+		stop();
+	});
+
+	return { isSupported, isListening, transcript, start, stop };
+}

package/src/hooks/presentation/solid/browser/useSpeechSynthesis.ts

@@ -0,0 +1,54 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useSpeechSynthesis(): {
+	isSupported: Accessor<boolean>;
+	speak: (
+		text: string,
+		options?: { voice?: string; rate?: number; pitch?: number },
+	) => void;
+	cancel: () => void;
+	voices: Accessor<SpeechSynthesisVoice[]>;
+} {
+	const [isSupported] = createSignal("speechSynthesis" in window);
+	const [voices, setVoices] = createSignal<SpeechSynthesisVoice[]>([]);
+
+	if (isSupported()) {
+		window.speechSynthesis.onvoiceschanged = () => {
+			setVoices(window.speechSynthesis.getVoices());
+		};
+		setVoices(window.speechSynthesis.getVoices());
+	}
+
+	const speak = (
+		text: string,
+		options: { voice?: string; rate?: number; pitch?: number } = {},
+	): void => {
+		if (!isSupported()) {
+			return;
+		}
+
+		const utterance = new SpeechSynthesisUtterance(text);
+		if (options.voice) {
+			const voice = voices().find((v) => v.name === options.voice);
+			if (voice) {
+				utterance.voice = voice;
+			}
+		}
+		if (options.rate) {
+			utterance.rate = options.rate;
+		}
+		if (options.pitch) {
+			utterance.pitch = options.pitch;
+		}
+
+		window.speechSynthesis.speak(utterance);
+	};
+
+	const cancel = (): void => {
+		if (isSupported()) {
+			window.speechSynthesis.cancel();
+		}
+	};
+
+	return { isSupported, speak, cancel, voices };
+}

package/src/hooks/presentation/solid/browser/useStorage.ts

@@ -0,0 +1,22 @@
+import { type Accessor, createEffect, createSignal } from "solid-js";
+import type { StorageOptions } from "#hooks/shared/types";
+
+export function useStorage<T>(
+	key: string,
+	initialValue: T,
+	storage: Storage = localStorage,
+	options: StorageOptions<T> = {},
+): Accessor<T> {
+	const { serializer = JSON.stringify, deserializer = JSON.parse } = options;
+
+	const stored = storage.getItem(key);
+	const [value, _setValue] = createSignal<T>(
+		stored === null ? initialValue : deserializer(stored),
+	);
+
+	createEffect(() => {
+		storage.setItem(key, serializer(value()));
+	});
+
+	return value;
+}

package/src/hooks/presentation/solid/browser/useTextDetection.ts

@@ -0,0 +1,20 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useTextDetection(): {
+	isSupported: Accessor<boolean>;
+	detect: (image: ImageBitmapSource) => Promise<any>;
+} {
+	const [isSupported] = createSignal("TextDetector" in window);
+
+	const detect = async (image: ImageBitmapSource): Promise<any> => {
+		if (!isSupported()) {
+			throw new Error("Text Detection API is not supported");
+		}
+
+		const detector = new (window as any).TextDetector();
+		const detected = await detector.detect(image);
+		return detected;
+	};
+
+	return { isSupported, detect };
+}

package/src/hooks/presentation/solid/browser/useUsb.ts

@@ -0,0 +1,15 @@
+import { createSignal } from "solid-js";
+
+export function useUSB() {
+	const [isSupported] = createSignal("usb" in navigator);
+	const [devices, setDevices] = createSignal<any[]>([]);
+	const requestDevice = async (filters: any[] = []) => {
+		if (!isSupported()) {
+			throw new Error("USB is not supported");
+		}
+		const device = await (navigator as any).usb.requestDevice({ filters });
+		setDevices([...devices(), device]);
+		return device;
+	};
+	return { isSupported, devices, requestDevice };
+}

package/src/hooks/presentation/solid/browser/useUserMedia.ts

@@ -0,0 +1,24 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useUserMedia(constraints: MediaStreamConstraints = {}): {
+	stream: Accessor<MediaStream | null>;
+	start: () => Promise<void>;
+	stop: () => void;
+} {
+	const [stream, setStream] = createSignal<MediaStream | null>(null);
+
+	const start = async (): Promise<void> => {
+		const result = await navigator.mediaDevices.getUserMedia(constraints);
+		setStream(result);
+	};
+
+	const stop = (): void => {
+		const currentStream = stream();
+		if (currentStream) {
+			currentStream.getTracks().forEach((track) => void track.stop());
+			setStream(null);
+		}
+	};
+
+	return { stream, start, stop };
+}

package/src/hooks/presentation/solid/browser/useVibration.ts

@@ -0,0 +1,12 @@
+import { createSignal } from "solid-js";
+
+export function useVibration() {
+	const [isSupported] = createSignal("vibrate" in navigator);
+	const vibrate = (pattern: any) => {
+		if (!isSupported()) {
+			return false;
+		}
+		return (navigator as any).vibrate(pattern);
+	};
+	return { isSupported, vibrate };
+}

package/src/hooks/presentation/solid/browser/useWakeLock.ts

@@ -0,0 +1,29 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useWakeLock(): {
+	isSupported: Accessor<boolean>;
+	request: (type: "screen" | "system") => Promise<WakeLockSentinel | null>;
+	release: (sentinel: WakeLockSentinel) => void;
+} {
+	const [isSupported] = createSignal("wakeLock" in navigator);
+
+	const request = async (
+		type: "screen" | "system" = "screen",
+	): Promise<WakeLockSentinel | null> => {
+		if (!isSupported()) {
+			throw new Error("Wake Lock API is not supported");
+		}
+
+		try {
+			return await (navigator as any).wakeLock.request(type);
+		} catch (_err) {
+			return null;
+		}
+	};
+
+	const release = (sentinel: WakeLockSentinel): void => {
+		sentinel.release();
+	};
+
+	return { isSupported, request, release };
+}

package/src/hooks/presentation/solid/browser/useWebAuthn.ts

@@ -0,0 +1,35 @@
+import { type Accessor, createSignal } from "solid-js";
+
+export function useWebAuthn(): {
+	isSupported: Accessor<boolean>;
+	register: (
+		options: CredentialCreationOptions,
+	) => Promise<PublicKeyCredential>;
+	authenticate: (
+		options: CredentialRequestOptions,
+	) => Promise<PublicKeyCredential>;
+} {
+	const [isSupported] = createSignal("credentials" in navigator);
+
+	const register = async (
+		options: CredentialCreationOptions,
+	): Promise<PublicKeyCredential> => {
+		if (!isSupported()) {
+			throw new Error("WebAuthn is not supported");
+		}
+
+		return (await navigator.credentials.create(options)) as PublicKeyCredential;
+	};
+
+	const authenticate = async (
+		options: CredentialRequestOptions,
+	): Promise<PublicKeyCredential> => {
+		if (!isSupported()) {
+			throw new Error("WebAuthn is not supported");
+		}
+
+		return (await navigator.credentials.get(options)) as PublicKeyCredential;
+	};
+
+	return { isSupported, register, authenticate };
+}

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

@@ -0,0 +1,51 @@
+// Elements composables
+export * from "./useActive";
+export * from "./useAudio";
+export * from "./useBreakpoints";
+export * from "./useCanvas";
+export * from "./useClick";
+export * from "./useDrag";
+export * from "./useDraggable";
+export * from "./useDraggableHandle";
+export * from "./useDrop";
+export * from "./useDropZone";
+export * from "./useElementBounding";
+export * from "./useElementSize";
+export * from "./useElementVisibility";
+export * from "./useFileDialog";
+export * from "./useFileInput";
+export * from "./useFocus";
+export * from "./useHover";
+export * from "./useImagePreview";
+export * from "./useImageUpload";
+export * from "./useInfiniteScroll";
+export * from "./useIntersectionAdvanced";
+export * from "./useIntersectionObserver";
+export * from "./useLayout";
+export * from "./useLongPress";
+export * from "./useMagicKeys";
+export * from "./useMediaQuery";
+export * from "./useModal";
+export * from "./useMouse";
+export * from "./useMutationObserver";
+export * from "./useOnClickOutside";
+export * from "./useOnKeyStroke";
+export * from "./useParallax";
+export * from "./usePerformanceObserver";
+export * from "./usePinch";
+export * from "./usePopover";
+export * from "./useResize";
+export * from "./useResizeObserver";
+export * from "./useRotate";
+export * from "./useScroll";
+export * from "./useScrollTo";
+export * from "./useSortable";
+export * from "./useSplitter";
+export * from "./useSticky";
+export * from "./useSvg";
+export * from "./useSwipe";
+export * from "./useTabs";
+export * from "./useTooltip";
+export * from "./useVideo";
+export * from "./useVirtualList";
+export * from "./useWebgl";

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

@@ -0,0 +1,33 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useActive(target?: Accessor<HTMLElement | null | undefined>): {
+	active: Accessor<boolean>;
+} {
+	const [active, setActive] = createSignal(false);
+
+	const onFocusIn = (): void => {
+		setActive(true);
+	};
+
+	const onFocusOut = (): void => {
+		setActive(false);
+	};
+
+	onMount(() => {
+		const el = target?.();
+		if (el) {
+			el.addEventListener("focusin", onFocusIn);
+			el.addEventListener("focusout", onFocusOut);
+		}
+	});
+
+	onCleanup(() => {
+		const el = target?.();
+		if (el) {
+			el.removeEventListener("focusin", onFocusIn);
+			el.removeEventListener("focusout", onFocusOut);
+		}
+	});
+
+	return { active };
+}

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

@@ -0,0 +1,82 @@
+import { type Accessor, createSignal, onCleanup, onMount } from "solid-js";
+
+export function useAudio(
+	target: Accessor<HTMLAudioElement | null | undefined>,
+): {
+	playing: Accessor<boolean>;
+	currentTime: Accessor<number>;
+	duration: Accessor<number>;
+	volume: Accessor<number>;
+	play: () => void;
+	pause: () => void;
+	seek: (time: number) => void;
+	setVolume: (vol: number) => void;
+} {
+	const [playing, setPlaying] = createSignal(false);
+	const [currentTime, setCurrentTime] = createSignal(0);
+	const [duration, setDuration] = createSignal(0);
+	const [volume, setVolume] = createSignal(1);
+
+	const play = (): void => {
+		const el = target();
+		if (el) {
+			el.play();
+		}
+	};
+
+	const pause = (): void => {
+		const el = target();
+		if (el) {
+			el.pause();
+		}
+	};
+
+	const seek = (time: number): void => {
+		const el = target();
+		if (el) {
+			el.currentTime = time;
+		}
+	};
+
+	const setVolumeFn = (vol: number): void => {
+		const el = target();
+		if (el) {
+			el.volume = vol;
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			el.addEventListener("play", () => setPlaying(true));
+			el.addEventListener("pause", () => setPlaying(false));
+			el.addEventListener("timeupdate", () => setCurrentTime(el.currentTime));
+			el.addEventListener("loadedmetadata", () => setDuration(el.duration));
+			el.addEventListener("volumechange", () => setVolume(el.volume));
+		}
+	});
+
+	onCleanup(() => {
+		const el = target();
+		if (el) {
+			el.removeEventListener("play", () => setPlaying(true));
+			el.removeEventListener("pause", () => setPlaying(false));
+			el.removeEventListener("timeupdate", () =>
+				setCurrentTime(el.currentTime),
+			);
+			el.removeEventListener("loadedmetadata", () => setDuration(el.duration));
+			el.removeEventListener("volumechange", () => setVolume(el.volume));
+		}
+	});
+
+	return {
+		playing,
+		currentTime,
+		duration,
+		volume,
+		play,
+		pause,
+		seek,
+		setVolume: setVolumeFn,
+	};
+}

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

@@ -0,0 +1,56 @@
+import {
+	type Accessor,
+	createMemo,
+	createSignal,
+	onCleanup,
+	onMount,
+} from "solid-js";
+import type { Breakpoint } from "#hooks/shared/types";
+
+export function useBreakpoints(
+	breakpoints: Breakpoint[] = [
+		{ name: "xs", minWidth: 0 },
+		{ name: "sm", minWidth: 640 },
+		{ name: "md", minWidth: 768 },
+		{ name: "lg", minWidth: 1024 },
+		{ name: "xl", minWidth: 1280 },
+		{ name: "2xl", minWidth: 1536 },
+	],
+): {
+	current: Accessor<string>;
+	matches: Accessor<Record<string, boolean>>;
+} {
+	const [width, setWidth] = createSignal(window.innerWidth);
+
+	const current = createMemo(() => {
+		const sorted = [...breakpoints].sort((a, b) => b.minWidth - a.minWidth);
+		for (const bp of sorted) {
+			if (width() >= bp.minWidth) {
+				return bp.name;
+			}
+		}
+		return breakpoints[0]?.name ?? "default";
+	});
+
+	const matches = createMemo(() => {
+		const result: Record<string, boolean> = {};
+		for (const bp of breakpoints) {
+			result[bp.name] = width() >= bp.minWidth;
+		}
+		return result;
+	});
+
+	const handleResize = (): void => {
+		setWidth(window.innerWidth);
+	};
+
+	onMount(() => {
+		window.addEventListener("resize", handleResize);
+	});
+
+	onCleanup(() => {
+		window.removeEventListener("resize", handleResize);
+	});
+
+	return { current, matches };
+}

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

@@ -0,0 +1,43 @@
+import { type Accessor, createSignal, onMount } from "solid-js";
+
+export function useCanvas(
+	target: Accessor<HTMLCanvasElement | null | undefined>,
+): {
+	ctx: Accessor<CanvasRenderingContext2D | null>;
+	width: Accessor<number>;
+	height: Accessor<number>;
+	clear: () => void;
+	resize: (w: number, h: number) => void;
+} {
+	const [ctx, setCtx] = createSignal<CanvasRenderingContext2D | null>(null);
+	const [width, setWidth] = createSignal(0);
+	const [height, setHeight] = createSignal(0);
+
+	const clear = (): void => {
+		const c = ctx();
+		if (c) {
+			c.clearRect(0, 0, width(), height());
+		}
+	};
+
+	const resize = (w: number, h: number): void => {
+		const el = target();
+		if (el) {
+			el.width = w;
+			el.height = h;
+			setWidth(w);
+			setHeight(h);
+		}
+	};
+
+	onMount(() => {
+		const el = target();
+		if (el) {
+			setCtx(el.getContext("2d"));
+			setWidth(el.width);
+			setHeight(el.height);
+		}
+	});
+
+	return { ctx, width, height, clear, resize };
+}