@kawaiininja/fetch 1.0.1

package/dist/context/ApiContext.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+/**
+ * Internal service header for API requests
+ */
+export declare const INTERNAL_HEADER: {
+    readonly "x-internal-service": "zevrinix-main";
+};
+/**
+ * API configuration interface
+ */
+export interface ApiConfig {
+    baseUrl: string;
+    version?: string;
+    disableCsrf?: boolean;
+    onError?: (error: string, status: number | null) => void;
+}
+/**
+ * API context value type
+ */
+export interface ApiContextValue {
+    baseUrl: string;
+    version: string;
+    disableCsrf: boolean;
+    apiUrl: (path: string) => string;
+    onError?: (error: string, status: number | null) => void;
+}
+/**
+ * Props for ApiProvider component
+ */
+export interface ApiProviderProps {
+    config: ApiConfig;
+    children: React.ReactNode;
+}
+export declare const ApiContext: React.Context<ApiContextValue | null>;
+/**
+ * ApiProvider
+ *
+ * Provides API configuration to the component tree.
+ * Constructs full API URLs from relative paths using the baseUrl.
+ */
+export declare function ApiProvider({ config, children }: ApiProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/ApiContext.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useMemo } from "react";
+/**
+ * Internal service header for API requests
+ */
+export const INTERNAL_HEADER = {
+    "x-internal-service": "zevrinix-main",
+};
+export const ApiContext = createContext(null);
+/**
+ * ApiProvider
+ *
+ * Provides API configuration to the component tree.
+ * Constructs full API URLs from relative paths using the baseUrl.
+ */
+export function ApiProvider({ config, children }) {
+    const value = useMemo(() => {
+        // Ensure valid config structure
+        const baseUrl = config?.baseUrl || "";
+        const version = config?.version || "v1";
+        return {
+            baseUrl,
+            version,
+            disableCsrf: !!config?.disableCsrf,
+            onError: config?.onError,
+            // Helper to construct URLs
+            apiUrl: (path) => {
+                const cleanBase = baseUrl.endsWith("/")
+                    ? baseUrl.slice(0, -1)
+                    : baseUrl;
+                const cleanPath = path.startsWith("/") ? path : `/${path}`;
+                return `${cleanBase}${cleanPath}`;
+            },
+        };
+    }, [config]);
+    return _jsx(ApiContext.Provider, { value: value, children: children });
+}

package/dist/context/index.d.ts

@@ -0,0 +1 @@
+export * from "./ApiContext";

package/dist/context/index.js

@@ -0,0 +1 @@
+export * from "./ApiContext";

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./useApiConfig";
+export * from "./useCsrf";
+export * from "./useFetch";
+export * from "./utils";

package/dist/hooks/index.js

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./useApiConfig";
+export * from "./useCsrf";
+export * from "./useFetch";
+export * from "./utils";

package/dist/hooks/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Fetch state interface
+ */
+export interface FetchState<T = any> {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+    status: number | null;
+}
+/**
+ * Base fetch options
+ */
+export interface BaseFetchOptions extends RequestInit {
+    parseAs?: "auto" | "json" | "text" | "blob";
+}
+/**
+ * Request options for the request function
+ */
+export interface RequestOptions extends BaseFetchOptions {
+    url?: string;
+    method?: string;
+    body?: BodyInit;
+    headers?: HeadersInit;
+}

package/dist/hooks/types.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useApiConfig.d.ts

@@ -0,0 +1,8 @@
+import { ApiContextValue } from "../context/ApiContext";
+/**
+ * Hook to consume API configuration
+ *
+ * @returns API context value with baseUrl, version, and apiUrl helper
+ * @throws Error if used outside ApiProvider
+ */
+export declare function useApiConfig(): ApiContextValue;

package/dist/hooks/useApiConfig.js

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { ApiContext } from "../context/ApiContext";
+/**
+ * Hook to consume API configuration
+ *
+ * @returns API context value with baseUrl, version, and apiUrl helper
+ * @throws Error if used outside ApiProvider
+ */
+export function useApiConfig() {
+    const context = useContext(ApiContext);
+    if (!context) {
+        throw new Error("useApiConfig must be used within an ApiProvider");
+    }
+    return context;
+}

package/dist/hooks/useCsrf.d.ts

@@ -0,0 +1,4 @@
+export declare function useCsrf(): {
+    fetchCSRF: () => Promise<string>;
+    clearCsrf: () => void;
+};

package/dist/hooks/useCsrf.js

@@ -0,0 +1,43 @@
+import { useCallback, useRef } from "react";
+import { INTERNAL_HEADER } from "../context/ApiContext";
+import { useApiConfig } from "./useApiConfig";
+export function useCsrf() {
+    const { apiUrl } = useApiConfig();
+    const csrfRef = useRef(null);
+    const clearCsrf = useCallback(() => {
+        csrfRef.current = null;
+        if (typeof window !== "undefined") {
+            localStorage.removeItem("csrf_token");
+        }
+    }, []);
+    const fetchCSRF = useCallback(async () => {
+        if (csrfRef.current)
+            return csrfRef.current;
+        // Try to get from localStorage first (for Capacitor/mobile)
+        if (typeof window !== "undefined") {
+            const storedCsrf = localStorage.getItem("csrf_token");
+            if (storedCsrf) {
+                csrfRef.current = storedCsrf;
+                return storedCsrf;
+            }
+        }
+        // Construct CSRF URL using the context's baseUrl
+        const csrfUrl = apiUrl("auth/csrf-token");
+        const res = await fetch(csrfUrl, {
+            method: "GET",
+            headers: INTERNAL_HEADER,
+            credentials: "include",
+        });
+        const json = await res.json();
+        const token = json?.csrfToken;
+        if (!token)
+            throw new Error("Missing CSRF token");
+        csrfRef.current = token;
+        // Store in localStorage for Capacitor/mobile (cookies don't work cross-domain)
+        if (typeof window !== "undefined") {
+            localStorage.setItem("csrf_token", token);
+        }
+        return token;
+    }, [apiUrl]);
+    return { fetchCSRF, clearCsrf };
+}

package/dist/hooks/useFetch.d.ts

@@ -0,0 +1,9 @@
+import { BaseFetchOptions } from "./types";
+import { ApiSurface } from "./utils";
+/**
+ * useFetch Hook
+ *
+ * A comprehensive hook for data fetching with automatic CSRF handling,
+ * request cancellation, and a rich API surface.
+ */
+export declare const useFetch: <T = any>(endpoint: string, baseOptions?: BaseFetchOptions) => ApiSurface<T>;

package/dist/hooks/useFetch.js

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { INTERNAL_HEADER } from "../context/ApiContext";
+import { useApiConfig } from "./useApiConfig";
+import { useCsrf } from "./useCsrf";
+import { createApiSurface } from "./utils";
+/**
+ * useFetch Hook
+ *
+ * A comprehensive hook for data fetching with automatic CSRF handling,
+ * request cancellation, and a rich API surface.
+ */
+export const useFetch = (endpoint, baseOptions = {}) => {
+    const { apiUrl, disableCsrf, onError } = useApiConfig();
+    const { fetchCSRF, clearCsrf } = useCsrf();
+    const resolvedUrl = endpoint.startsWith("http") ? endpoint : apiUrl(endpoint);
+    const abortRef = useRef(new AbortController());
+    const mounted = useRef(true);
+    const optionsRef = useRef(baseOptions);
+    const [state, setState] = useState({
+        data: null,
+        loading: false,
+        error: null,
+        status: null,
+    });
+    useEffect(() => {
+        optionsRef.current = baseOptions;
+    }, [baseOptions]);
+    const safeSet = useCallback((fn) => {
+        if (mounted.current) {
+            setState((prev) => ({ ...prev, ...fn(prev) }));
+        }
+    }, []);
+    const performFetch = async (url, method, token, body, headers, rest) => {
+        const authToken = typeof window !== "undefined" ? localStorage.getItem("token") : null;
+        const sessionId = typeof window !== "undefined" ? localStorage.getItem("session_id") : null;
+        const headersConfig = {
+            ...(optionsRef.current.headers || {}),
+            ...(headers || {}),
+            ...INTERNAL_HEADER,
+            "X-CSRF-Token": token,
+            ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
+            ...(sessionId ? { "X-Session-ID": sessionId } : {}),
+        };
+        return fetch(url, {
+            ...optionsRef.current,
+            ...rest,
+            method,
+            signal: abortRef.current.signal,
+            credentials: "include",
+            headers: headersConfig,
+            body,
+        });
+    };
+    const parseResponse = async (res, parseAs) => {
+        const type = res.headers.get("content-type") || "";
+        if (parseAs === "json" ||
+            (parseAs === "auto" && type.includes("application/json"))) {
+            return res.json();
+        }
+        else if (parseAs === "text") {
+            return res.text();
+        }
+        else if (parseAs === "blob") {
+            return res.blob();
+        }
+        return res.text();
+    };
+    const request = useCallback(async (params = {}) => {
+        const { url = resolvedUrl, method = "GET", body, headers, parseAs = "auto", ...rest } = params;
+        let finalUrl = url.startsWith("http") ? url : apiUrl(url);
+        if (!finalUrl)
+            return;
+        safeSet(() => ({ loading: true, error: null }));
+        let lastStatus = null;
+        try {
+            let csrfToken = "";
+            if (!disableCsrf) {
+                csrfToken = await fetchCSRF();
+            }
+            let res = await performFetch(finalUrl, method, csrfToken, body, headers, rest);
+            lastStatus = res.status;
+            // 🔄 Auto-retry on CSRF error
+            if (!disableCsrf && res.status === 403) {
+                try {
+                    const errorBody = await res.clone().json();
+                    if (errorBody?.code === "CSRF_ERROR" ||
+                        errorBody?.message === "Invalid or missing CSRF token") {
+                        clearCsrf();
+                        csrfToken = await fetchCSRF();
+                        res = await performFetch(finalUrl, method, csrfToken, body, headers, rest);
+                        lastStatus = res.status;
+                    }
+                }
+                catch (e) {
+                    /* ignore parse error */
+                }
+            }
+            const parsed = await parseResponse(res, parseAs);
+            if (!res.ok) {
+                throw new Error(parsed?.message || res.statusText);
+            }
+            safeSet(() => ({ data: parsed, status: res.status }));
+            return parsed;
+        }
+        catch (err) {
+            if (err.name !== "AbortError") {
+                safeSet(() => ({ error: err.message, status: lastStatus }));
+                // 📣 Global Error Broadcast
+                if (onError) {
+                    onError(err.message, lastStatus);
+                }
+                throw err;
+            }
+        }
+        finally {
+            safeSet(() => ({ loading: false }));
+        }
+    }, [resolvedUrl, fetchCSRF, clearCsrf, apiUrl, safeSet]);
+    useEffect(() => {
+        abortRef.current = new AbortController();
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            abortRef.current?.abort();
+        };
+    }, []);
+    return useMemo(() => createApiSurface({ state, request, baseUrl: resolvedUrl, safeSet }), [state, request, resolvedUrl, safeSet]);
+};

package/dist/hooks/utils.d.ts

@@ -0,0 +1,38 @@
+import { FetchState, RequestOptions } from "./types";
+/**
+ * API surface interface with all request methods
+ */
+export interface ApiSurface<T = any> {
+    state: FetchState<T>;
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    request: <R = T>(options?: RequestOptions) => Promise<R | undefined>;
+    refetch: () => Promise<T | undefined>;
+    setData: (value: T | null | ((prev: T | null) => T | null)) => void;
+    updateData: (partial: Partial<T> | ((prev: T | null) => Partial<T>)) => void;
+    get: <R = T>(config?: RequestOptions) => Promise<R | undefined>;
+    post: <D = any, R = T>(data?: D, config?: RequestOptions) => Promise<R | undefined>;
+    put: <D = any, R = T>(data?: D, config?: RequestOptions) => Promise<R | undefined>;
+    patch: <D = any, R = T>(data?: D, config?: RequestOptions) => Promise<R | undefined>;
+    delete: <R = T>(config?: RequestOptions) => Promise<R | undefined>;
+    json: <D = any, R = T>(data?: D, config?: RequestOptions) => Promise<R | undefined>;
+    text: (config?: RequestOptions) => Promise<string | undefined>;
+    blob: (config?: RequestOptions) => Promise<Blob | undefined>;
+    upload: <R = T>(formData: FormData, config?: RequestOptions) => Promise<R | undefined>;
+}
+/**
+ * Parameters for creating API surface
+ */
+interface CreateApiSurfaceParams<T> {
+    state: FetchState<T>;
+    request: <R = T>(options?: RequestOptions) => Promise<R | undefined>;
+    baseUrl: string;
+    safeSet: (fn: (prev: FetchState<T>) => Partial<FetchState<T>>) => void;
+}
+/**
+ * Helper to construct the API surface object.
+ * Extracts the massive object creation from the main hook to keep it clean.
+ */
+export declare const createApiSurface: <T = any>({ state, request, baseUrl, safeSet, }: CreateApiSurfaceParams<T>) => ApiSurface<T>;
+export {};

package/dist/hooks/utils.js

@@ -0,0 +1,104 @@
+/**
+ * Helper to construct the API surface object.
+ * Extracts the massive object creation from the main hook to keep it clean.
+ */
+export const createApiSurface = ({ state, request, baseUrl, safeSet, }) => {
+    // little helper for JSON methods
+    const withJsonBody = (data) => ({
+        body: data != null ? JSON.stringify(data) : undefined,
+        headers: { "Content-Type": "application/json" },
+        parseAs: "json",
+    });
+    return {
+        // 🔍 state
+        state,
+        isLoading: state.loading,
+        isError: !!state.error,
+        isSuccess: !!state.data && !state.error,
+        // 🔁 core
+        request,
+        refetch: () => request({ url: baseUrl }),
+        // 🎯 data helpers
+        setData: (value) => {
+            safeSet((prev) => ({
+                data: (typeof value === "function"
+                    ? value(prev.data)
+                    : value),
+            }));
+        },
+        updateData: (partial) => safeSet((prev) => ({
+            data: {
+                ...prev.data,
+                ...(typeof partial === "function" ? partial(prev.data) : partial),
+            },
+        })),
+        // 🗡 CRUD methods
+        get: (config = {}) => request({ ...config, url: config.url || baseUrl, method: "GET" }),
+        post: (data, config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: "POST",
+            ...withJsonBody(data),
+            headers: {
+                ...(config.headers || {}),
+                "Content-Type": "application/json",
+            },
+        }),
+        put: (data, config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: "PUT",
+            ...withJsonBody(data),
+            headers: {
+                ...(config.headers || {}),
+                "Content-Type": "application/json",
+            },
+        }),
+        patch: (data, config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: "PATCH",
+            ...withJsonBody(data),
+            headers: {
+                ...(config.headers || {}),
+                "Content-Type": "application/json",
+            },
+        }),
+        delete: (config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: "DELETE",
+            parseAs: config.parseAs || "json",
+        }),
+        // 🎭 type-focused helpers
+        json: (data, config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: config.method || "POST",
+            ...withJsonBody(data),
+            headers: {
+                ...(config.headers || {}),
+                "Content-Type": "application/json",
+            },
+        }),
+        text: (config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: config.method || "GET",
+            parseAs: "text",
+        }),
+        blob: (config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: config.method || "GET",
+            parseAs: "blob",
+        }),
+        upload: (formData, config = {}) => request({
+            ...config,
+            url: config.url || baseUrl,
+            method: config.method || "POST",
+            body: formData,
+            parseAs: config.parseAs || "json",
+        }),
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./context/ApiContext";
+export * from "./hooks/index";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./context/ApiContext";
+export * from "./hooks/index";

package/package.json

@@ -0,0 +1,40 @@
+{
+    "name": "@kawaiininja/fetch",
+    "version": "1.0.1",
+    "description": "Core fetch utility for Onyx Framework",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "module": "dist/index.js",
+    "type": "module",
+    "exports": {
+        ".": "./dist/index.js"
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc"
+    },
+    "keywords": [
+        "react",
+        "fetch",
+        "onyx",
+        "kawaiininja",
+        "http"
+    ],
+    "author": "Vinay (4kawaiininja)",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "typescript": "^5.7.0"
+    }
+}