feat(core): add handleImagePreview function

feat(core): add FileValidationOptions and related types
feat(core): export handleFileValidation and handleImagePreview
feat(toolkit): add tailwind config
chore(deps): update dependencies

.changeset/shy-moose-scream.md

@@ -0,0 +1,9 @@
+---
+"@zayne-labs/toolkit": minor
+---
+
+feat(core): add handleImagePreview function
+feat(core): add FileValidationOptions and related types
+feat(core): export handleFileValidation and handleImagePreview
+feat(toolkit): add tailwind config
+chore(deps): update dependencies

eslint.config.js

@@ -3,7 +3,11 @@ import { zayne } from "@zayne-labs/eslint-config";
 export default zayne({
 	ignores: ["packages/toolkit/dist/**"],
 	react: true,
-	tailwindcss: true,
+	tailwindcss: {
+		settings: {
+			config: "packages/toolkit/tailwind.config.js",
+		},
+	},
 	type: "lib",
 	typescript: {
 		tsconfigPath: ["**/tsconfig.json"],

package.json

@@ -22,17 +22,17 @@
 		"version-package": "changeset version"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.27.9",
-		"@eslint-react/eslint-plugin": "^1.15.2",
-		"@types/node": "^22.9.0",
-		"@zayne-labs/eslint-config": "^0.2.9",
-		"eslint": "^9.14.0",
+		"@changesets/cli": "^2.27.10",
+		"@eslint-react/eslint-plugin": "^1.17.1",
+		"@types/node": "^22.9.3",
+		"@zayne-labs/eslint-config": "^0.2.12",
+		"eslint": "^9.15.0",
 		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-react-refresh": "^0.4.14",
 		"eslint-plugin-tailwindcss": "^3.17.5",
-		"husky": "^9.1.6",
+		"husky": "^9.1.7",
 		"lint-staged": "^15.2.10",
-		"pkg-pr-new": "^0.0.30",
+		"pkg-pr-new": "^0.0.31",
 		"prettier": "^3.3.3",
 		"typescript": "catalog:"
 	}

packages/toolkit/package.json

@@ -74,6 +74,7 @@
 		"cross-env": "^7.0.3",
 		"publint": "^0.2.11",
 		"size-limit": "^11.1.6",
+		"tailwindcss": "^3.4.15",
 		"terser": "^5.34.1",
 		"tsup": "^8.3.0",
 		"typescript": "catalog:"

packages/toolkit/src/core/debounce.ts

@@ -32,14 +32,14 @@ const debounce = <TParams>(
 	const $clearMainTimeout = (): void => void (timeoutId && clearTimeout(timeoutId));
 
 	// Overloads
+	/**
+	 * @description - The debounced function
+	 * @param params - The parameters to pass to the callbackFn
+	 */
 	function debouncedFn(...params: TParams[]): void;
 	function debouncedFn(params: TParams | TParams[], overrideOptions: { $delay: number }): void;
 
 	// Implementation
-	/**
-	 * The debounced function
-	 * @param params - The parameters to pass to the callbackFn
-	 */
 	function debouncedFn(...params: DebouncedFnParams<TParams>) {
 		const overrideOptions = isObject(params[1]) && "$delay" in params[1] ? params[1] : null;
 

packages/toolkit/src/core/handleFileValidation.ts

@@ -5,24 +5,24 @@ type ValidationSettings = {
 	maxFileSize?: number;
 };
 
-type ErrorContext = {
+type FileValidationErrorContext = {
 	cause: {
 		file: File;
 		setting: keyof ValidationSettings;
 	};
 	message: string;
 };
 
-type SuccessContext = {
+type FileValidationSuccessContext = {
 	acceptedFiles: File[];
 	message: string;
 };
 
-type FileValidationOptions = {
+export type FileValidationOptions = {
 	existingFileArray?: File[];
 	newFileList: FileList;
-	onError?: (context: ErrorContext) => void;
-	onSuccess?: (context: SuccessContext) => void;
+	onError?: (context: FileValidationErrorContext) => void;
+	onSuccess?: (context: FileValidationSuccessContext) => void;
 	validationSettings?: ValidationSettings;
 };
 

packages/toolkit/src/core/handleImagePreview.ts

@@ -0,0 +1,54 @@
+import { isFile } from "@/type-helpers";
+
+export type ImagePreviewOptions = {
+	file: File | undefined;
+	onError?: (ctx: { error: DOMException | null }) => void;
+	onSuccess?: (ctx: { result: string }) => void;
+	resultType?: "base64" | "objectURL";
+};
+
+function handleImagePreview(options: {
+	file: File | undefined;
+	onError?: never;
+	onSuccess?: (ctx: { result: string }) => void;
+	resultType?: "objectURL";
+}): string;
+
+function handleImagePreview(options: {
+	file: File | undefined;
+	onError?: (ctx: { error: DOMException | null }) => void;
+	onSuccess: (ctx: { result: string }) => void;
+	resultType: "base64";
+}): void;
+
+function handleImagePreview(options: ImagePreviewOptions) {
+	const { file, onError, onSuccess, resultType = "objectURL" } = options;
+
+	if (!isFile(file)) return;
+
+	if (resultType === "objectURL") {
+		const result = URL.createObjectURL(file);
+
+		onSuccess?.({ result });
+
+		return result;
+	}
+
+	const reader = new FileReader();
+
+	reader.addEventListener("load", () => {
+		if (!reader.result) return;
+
+		onSuccess?.({ result: reader.result as string });
+	});
+
+	reader.addEventListener("error", () => {
+		onError?.({ error: reader.error });
+	});
+
+	reader.readAsDataURL(file);
+
+	return reader.result as string;
+}
+
+export { handleImagePreview };

packages/toolkit/src/core/index.ts

@@ -14,6 +14,7 @@ export { PromiseWithResolvers } from "./promiseWithResolvers";
 export { setAnimationInterval } from "./setAnimationInterval";
 export { syncStateWithStorage } from "./syncStateWithStorage";
 export { toArray } from "./toArray";
-export { handleFileValidation } from "./handleFileValidation";
+export * from "./handleFileValidation";
+export * from "./handleImagePreview";
 export * from "./throttle";
 export * from "./wait";

packages/toolkit/src/react/hooks/useDragScroll.ts

@@ -1,5 +1,6 @@
 import { checkIsDeviceMobileOrTablet, off, on } from "@/core";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
+import { useEffectOnce } from "./effects";
 import { useCallbackRef } from "./useCallbackRef";
 
 /* eslint-disable no-param-reassign */
@@ -101,16 +102,16 @@ const useDragScroll = <TElement extends HTMLElement>(options: DragScrollOptions
 		on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
 	});
 
-	useEffect(() => {
+	// TODO - Change to callback ref node in future
+	useEffectOnce(() => {
 		if (!dragContainerRef.current) return;
 
 		handleScrollSnap(dragContainerRef.current);
 
 		const cleanup = on("mousedown", dragContainerRef.current, handleMouseDown);
 
 		return cleanup;
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	});
 
 	const dragScrollProps = {
 		ref: dragContainerRef,

packages/toolkit/tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "tailwindcss";
+
+const config = {
+	content: ["./src/react/hooks/**/*.ts"],
+} satisfies Config;
+
+export default config;