@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/hooks/adapters/config/index.ts

@@ -0,0 +1,48 @@
+// Configuration adapters
+export {
+	DEFAULT_DEBOUNCE_DELAY,
+	DEFAULT_INTERVAL,
+	DEFAULT_THROTTLE_DELAY,
+	DEFAULT_TIMEOUT,
+	STORAGE_DEFAULT_OPTIONS,
+	STORAGE_PREFIX,
+} from "./constants";
+
+export const INFINITE_SCROLL_CONFIG = {
+	DEFAULT_DISTANCE: 100,
+};
+
+export const SCROLL_CONFIG = {
+	DEFAULT_THRESHOLD: 100,
+	DEBOUNCE_MS: 100,
+};
+
+export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+
+export const TABS_CONFIG = {
+	DEFAULT_DURATION: 300,
+	DEFAULT_INITIAL_INDEX: 0,
+};
+
+export const TOOLTIP_CONFIG = {
+	DEFAULT_DELAY_MS: 200,
+	AUTO_HIDE: true,
+};
+
+export const VIDEO_CONFIG = {
+	DEFAULT_AUTOPLAY: false,
+	DEFAULT_VOLUME: 1,
+};
+
+export const VIRTUAL_LIST_CONFIG = {
+	DEFAULT_ITEM_SIZE: 50,
+	DEFAULT_ITEM_HEIGHT: 50,
+	DEFAULT_CONTAINER_HEIGHT: 400,
+	DEFAULT_OVERSCAN: 3,
+};
+
+export const TILT_CONFIG = {
+	DEFAULT_MAX_ANGLE: 25,
+	DEFAULT_TILT_X: 0,
+	DEFAULT_TILT_Y: 0,
+};

package/src/hooks/adapters/index.ts

@@ -0,0 +1,13 @@
+// Adapters layer - external system integrations
+export {
+	INFINITE_SCROLL_CONFIG,
+	SCROLL_CONFIG,
+	SVG_NAMESPACE,
+	TABS_CONFIG,
+	TILT_CONFIG,
+	TOOLTIP_CONFIG,
+	VIDEO_CONFIG,
+	VIRTUAL_LIST_CONFIG,
+} from "./config/index";
+export * from "./monaco";
+export * from "./qr";

package/src/hooks/adapters/monaco/index.ts

@@ -0,0 +1,96 @@
+import type {
+	MonacoEditorOptions,
+	MonacoEventCallbacks,
+} from "#hooks/modules/editor/types";
+
+export interface MonacoEditorInstance {
+	editor: unknown;
+	getValue: () => string;
+	setValue: (value: string) => void;
+	focus: () => void;
+	dispose: () => void;
+	getCursorPosition: () => { line: number; column: number } | null;
+}
+
+export const getContainer = (options: MonacoEditorOptions): HTMLElement => {
+	const container =
+		typeof options.container === "string"
+			? document.getElementById(options.container)
+			: options.container;
+
+	if (!container) {
+		throw new Error("Container not found");
+	}
+
+	return container;
+};
+
+export const createMonacoConfig = (options: MonacoEditorOptions) => ({
+	value: options.value,
+	language: options.language || "typescript",
+	theme: options.theme || "vs-dark",
+	readOnly: options.readOnly || false,
+	minimap: { enabled: options.minimap ?? true },
+	lineNumbers: options.lineNumbers !== false ? "on" : "off",
+	fontSize: options.fontSize || 14,
+	fontFamily: options.fontFamily || "'JetBrains Mono', 'Fira Code', monospace",
+	tabSize: options.tabSize || 4,
+	wordWrap: options.wordWrap ? "on" : "off",
+	folding: options.folding !== false,
+	autoIndent: options.autoIndent !== false,
+	renderLineHighlight: options.highlightActiveLine ? "all" : "none",
+	lineNumbersMinChars: 3,
+});
+
+const bindMonacoEvents = (
+	editorInstance: any,
+	callbacks: MonacoEventCallbacks,
+): void => {
+	editorInstance.onDidChangeModelContent(() => {
+		const newValue = editorInstance.getValue();
+		callbacks.onChange?.(newValue);
+	});
+
+	editorInstance.onDidChangeCursorPosition((e: any) => {
+		callbacks.onCursorChange?.({
+			line: e.position.lineNumber,
+			column: e.position.column,
+		});
+	});
+
+	editorInstance.onDidFocusEditor(() => {
+		callbacks.onFocus?.();
+	});
+
+	editorInstance.onDidBlurEditor(() => {
+		callbacks.onBlur?.();
+	});
+};
+
+export const createMonacoEditor = async (
+	options: MonacoEditorOptions,
+	callbacks: MonacoEventCallbacks,
+): Promise<MonacoEditorInstance> => {
+	const monaco: any = await import("monaco-editor");
+	const container = getContainer(options);
+
+	monaco.languages.register({ id: options.language || "typescript" });
+
+	const config = createMonacoConfig(options);
+	const editorInstance = monaco.editor.create(container, config);
+
+	bindMonacoEvents(editorInstance, callbacks);
+
+	return {
+		editor: editorInstance,
+		getValue: () => editorInstance.getValue(),
+		setValue: (value: string) => editorInstance.setValue(value),
+		focus: () => editorInstance.focus(),
+		dispose: () => editorInstance.dispose(),
+		getCursorPosition: () => {
+			const position = editorInstance.getPosition();
+			if (!position) return null;
+			return { line: position.lineNumber, column: position.column };
+		},
+	};
+};

package/src/hooks/adapters/qr/index.ts

@@ -0,0 +1,65 @@
+import jsQR from "jsqr";
+import QRCode from "qrcode";
+
+export interface QRAdapter {
+	generate: (text: string) => Promise<string>;
+	scan: (image: ImageBitmapSource) => Promise<string | null>;
+}
+
+const generate = async (text: string): Promise<string> => {
+	try {
+		const dataUrl = await QRCode.toDataURL(text, {
+			width: 200,
+			margin: 2,
+			color: {
+				dark: "#000000",
+				light: "#FFFFFF",
+			},
+		});
+		return dataUrl;
+	} catch (error) {
+		throw new Error(
+			`Failed to generate QR code: ${error instanceof Error ? error.message : "Unknown error"}`,
+		);
+	}
+};
+
+const scan = async (image: ImageBitmapSource): Promise<string | null> => {
+	try {
+		let imageData: ImageData;
+
+		if (image instanceof ImageBitmap) {
+			const canvas = new OffscreenCanvas(image.width, image.height);
+			const ctx = canvas.getContext("2d");
+			if (!ctx) {
+				throw new Error("Could not get canvas context");
+			}
+			ctx.drawImage(image, 0, 0);
+			imageData = ctx.getImageData(0, 0, image.width, image.height);
+		} else if (image instanceof HTMLImageElement) {
+			const canvas = document.createElement("canvas");
+			canvas.width = image.naturalWidth;
+			canvas.height = image.naturalHeight;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) {
+				throw new Error("Could not get canvas context");
+			}
+			ctx.drawImage(image, 0, 0);
+			imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+		} else {
+			throw new Error("Unsupported image source type");
+		}
+
+		const code = jsQR(imageData.data, imageData.width, imageData.height, {
+			inversionAttempts: "dontInvert",
+		});
+
+		return code?.data ?? null;
+	} catch (error) {
+		throw new Error(
+			`Failed to scan QR code: ${error instanceof Error ? error.message : "Unknown error"}`,
+		);
+	}
+};
+
+export const qrAdapter: QRAdapter = { generate, scan };

package/src/hooks/index.ts

@@ -0,0 +1,21 @@
+// Public API - exports from presentation layer (SolidJS composables)
+
+// Re-export modules for direct access (non-conflicting modules only)
+export * from "./modules/array";
+export * from "./modules/editor";
+export {
+	useDeviceMotion,
+	useDeviceOrientation,
+	useGamepad,
+} from "./modules/sensor";
+export * from "./presentation/solid/animation";
+export * from "./presentation/solid/array";
+export * from "./presentation/solid/browser";
+export * from "./presentation/solid/elements";
+export * from "./presentation/solid/math";
+export * from "./presentation/solid/network";
+export * from "./presentation/solid/sensors";
+export * from "./presentation/solid/state";
+export * from "./presentation/solid/time";
+export * from "./presentation/solid/utilities";
+export * from "./realtime/use-sse";

package/src/hooks/modules/array/application/index.ts

@@ -0,0 +1,2 @@
+// Application exports for array module
+export * from "./usecases";

package/src/hooks/modules/array/application/usecases/index.ts

@@ -0,0 +1,123 @@
+// Use cases for array module
+import { createSignal } from "solid-js";
+import {
+	clearItems,
+	createArrayEntity,
+	everyItems,
+	filterItems,
+	findItem,
+	getLength,
+	includesItem,
+	mapItems,
+	popItem,
+	pushItem,
+	reduceItems,
+	removeItem,
+	reverseItems,
+	setItems,
+	shiftItem,
+	someItems,
+	sortItems,
+	unshiftItem,
+} from "#hooks/modules/array/domain/operations";
+import type { ArrayOptions } from "#hooks/modules/array/types";
+
+// Reactive adapter - this is the bridge to SolidJS reactivity
+export const createReactiveArray = <T>(options: ArrayOptions<T> = {}) => {
+	const [entity, setEntity] = createSignal(createArrayEntity<T>(options));
+	const [array, setArray] = createSignal(entity().items);
+
+	const set = (
+		value: readonly T[] | ((prev: readonly T[]) => readonly T[]),
+	) => {
+		const next =
+			typeof value === "function"
+				? (value as (prev: readonly T[]) => readonly T[])(entity().items)
+				: value;
+		const newEntity = setItems(entity(), next);
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const push = (item: T) => {
+		const newEntity = pushItem(entity(), item);
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const pop = () => {
+		const newEntity = popItem(entity());
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const shift = () => {
+		const newEntity = shiftItem(entity());
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const unshift = (item: T) => {
+		const newEntity = unshiftItem(entity(), item);
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const filter = (predicate: (item: T, index: number) => boolean) => {
+		const newEntity = filterItems(entity(), predicate);
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const sort = (compareFn?: (a: T, b: T) => number) => {
+		const newEntity = sortItems(entity(), compareFn);
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const reverse = () => {
+		const newEntity = reverseItems(entity());
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const remove = (item: T) => {
+		const newEntity = removeItem(entity(), item);
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	const clear = () => {
+		const newEntity = clearItems(entity());
+		setEntity(() => newEntity);
+		setArray(() => newEntity.items);
+	};
+
+	return {
+		array,
+		set,
+		push,
+		pop,
+		shift,
+		unshift,
+		filter,
+		sort,
+		reverse,
+		map: <U>(mapper: (item: T, index: number) => U): U[] =>
+			mapItems(entity(), mapper),
+		find: (predicate: (item: T, index: number) => boolean): T | undefined =>
+			findItem(entity(), predicate),
+		includes: (item: T): boolean => includesItem(entity(), item),
+		remove,
+		clear,
+		length: () => getLength(entity()),
+		some: (predicate: (item: T, index: number) => boolean): boolean =>
+			someItems(entity(), predicate),
+		every: (predicate: (item: T, index: number) => boolean): boolean =>
+			everyItems(entity(), predicate),
+		reduce: <U>(
+			reducer: (acc: U, item: T, index: number) => U,
+			initialValue: U,
+		): U => reduceItems(entity(), reducer, initialValue),
+	};
+};

package/src/hooks/modules/array/domain/events/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Array Domain Events
+ *
+ * Domain event types for array operations
+ */

package/src/hooks/modules/array/domain/index.ts

@@ -0,0 +1,3 @@
+// Domain exports for array module
+export * from "./models";
+export * from "./operations";

package/src/hooks/modules/array/domain/models/index.ts

@@ -0,0 +1,2 @@
+// Readonly data models for array domain
+export type * from "#hooks/modules/array/types";

package/src/hooks/modules/array/domain/operations/create.ts

@@ -0,0 +1,10 @@
+import type { ArrayEntity, ArrayOptions } from "#hooks/modules/array/types";
+
+export const createArrayEntity = <T>(
+	options: ArrayOptions<T> = {},
+): ArrayEntity<T> => {
+	const { initialItems = [] } = options;
+	return {
+		items: [...initialItems],
+	};
+};

package/src/hooks/modules/array/domain/operations/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Array Operations - Pure array operations with no side effects
+ */
+
+export type {
+	ArrayEntity,
+	ArrayOptions,
+} from "#hooks/modules/array/types";
+export { createArrayEntity } from "./create";
+export {
+	clearItems,
+	filterItems,
+	popItem,
+	pushItem,
+	removeItem,
+	reverseItems,
+	setItems,
+	shiftItem,
+	sortItems,
+	unshiftItem,
+} from "./modify";
+export {
+	everyItems,
+	findItem,
+	getLength,
+	includesItem,
+	isEmpty,
+	mapItems,
+	reduceItems,
+	someItems,
+} from "./query";

package/src/hooks/modules/array/domain/operations/modify.ts

@@ -0,0 +1,61 @@
+import type { ArrayEntity } from "#hooks/modules/array/types";
+
+export const pushItem = <T>(
+	array: ArrayEntity<T>,
+	item: T,
+): ArrayEntity<T> => ({
+	items: [...array.items, item],
+});
+
+export const popItem = <T>(array: ArrayEntity<T>): ArrayEntity<T> => ({
+	items: array.items.slice(0, -1),
+});
+
+export const shiftItem = <T>(array: ArrayEntity<T>): ArrayEntity<T> => ({
+	items: array.items.slice(1),
+});
+
+export const unshiftItem = <T>(
+	array: ArrayEntity<T>,
+	item: T,
+): ArrayEntity<T> => ({
+	items: [item, ...array.items],
+});
+
+export const filterItems = <T>(
+	array: ArrayEntity<T>,
+	predicate: (item: T, index: number) => boolean,
+): ArrayEntity<T> => ({
+	items: array.items.filter(predicate),
+});
+
+export const sortItems = <T>(
+	array: ArrayEntity<T>,
+	compareFn?: (a: T, b: T) => number,
+): ArrayEntity<T> => {
+	const next = [...array.items];
+	next.sort(compareFn);
+	return { items: next };
+};
+
+export const reverseItems = <T>(array: ArrayEntity<T>): ArrayEntity<T> => ({
+	items: [...array.items].reverse(),
+});
+
+export const removeItem = <T>(
+	array: ArrayEntity<T>,
+	item: T,
+): ArrayEntity<T> => ({
+	items: array.items.filter((i) => i !== item),
+});
+
+export const clearItems = <T>(_array: ArrayEntity<T>): ArrayEntity<T> => ({
+	items: [],
+});
+
+export const setItems = <T>(
+	_array: ArrayEntity<T>,
+	items: readonly T[],
+): ArrayEntity<T> => ({
+	items: [...items],
+});

package/src/hooks/modules/array/domain/operations/query.ts

@@ -0,0 +1,36 @@
+import type { ArrayEntity } from "#hooks/modules/array/types";
+
+export const getLength = <T>(array: ArrayEntity<T>): number =>
+	array.items.length;
+
+export const isEmpty = <T>(array: ArrayEntity<T>): boolean =>
+	array.items.length === 0;
+
+export const mapItems = <T, U>(
+	array: ArrayEntity<T>,
+	mapper: (item: T, index: number) => U,
+): U[] => array.items.map(mapper);
+
+export const findItem = <T>(
+	array: ArrayEntity<T>,
+	predicate: (item: T, index: number) => boolean,
+): T | undefined => array.items.find(predicate);
+
+export const includesItem = <T>(array: ArrayEntity<T>, item: T): boolean =>
+	array.items.includes(item);
+
+export const someItems = <T>(
+	array: ArrayEntity<T>,
+	predicate: (item: T, index: number) => boolean,
+): boolean => array.items.some(predicate);
+
+export const everyItems = <T>(
+	array: ArrayEntity<T>,
+	predicate: (item: T, index: number) => boolean,
+): boolean => array.items.every(predicate);
+
+export const reduceItems = <T, U>(
+	array: ArrayEntity<T>,
+	reducer: (acc: U, item: T, index: number) => U,
+	initialValue: U,
+): U => array.items.reduce(reducer, initialValue);

package/src/hooks/modules/array/domain/validators/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Array Domain Validators
+ *
+ * Pure validation functions for array operations
+ */

package/src/hooks/modules/array/index.ts

@@ -0,0 +1,5 @@
+// Array module public API
+
+export * from "./application";
+export * from "./domain";
+export * from "./types";

package/src/hooks/modules/array/types/index.ts

@@ -0,0 +1,9 @@
+// Domain type definitions for array module
+
+export type ArrayEntity<T> = Readonly<{
+	items: readonly T[];
+}>;
+
+export type ArrayOptions<T> = Readonly<{
+	initialItems?: readonly T[];
+}>;

package/src/hooks/modules/counter/application/index.ts

@@ -0,0 +1,12 @@
+// Application layer exports
+export {
+	counterOperations,
+	counterQueries,
+	createCounterState,
+	createReactiveCounter,
+	decrement,
+	increment,
+	reset,
+	setValue,
+	useCounter,
+} from "./usecases";