@vibedash/client 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { useQuery } from "./use-query";
+export { VibeDashProvider, useVibeDash } from "./provider";
+export type { UseQueryOptions, UseQueryResult, VibeDashConfig } from "./types";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { useQuery } from "./use-query";
+export { VibeDashProvider, useVibeDash } from "./provider";

package/dist/provider.d.ts

@@ -0,0 +1,5 @@
+import type { VibeDashConfig } from "./types";
+export declare function VibeDashProvider({ apiUrl, projectSlug, apiKey, children, }: VibeDashConfig & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useVibeDash(): VibeDashConfig;

package/dist/provider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const VibeDashContext = createContext(null);
+export function VibeDashProvider({ apiUrl, projectSlug, apiKey, children, }) {
+    return (_jsx(VibeDashContext.Provider, { value: { apiUrl, projectSlug, apiKey }, children: children }));
+}
+export function useVibeDash() {
+    const ctx = useContext(VibeDashContext);
+    if (!ctx) {
+        throw new Error("useVibeDash must be used within a <VibeDashProvider>. " +
+            "Wrap your app in <VibeDashProvider apiUrl=\"...\" projectSlug=\"...\">.");
+    }
+    return ctx;
+}

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+export interface VibeDashConfig {
+    /** The Vibe Dash API URL (defaults to https://hub.vibedash.xyz/api) */
+    apiUrl: string;
+    /** The project slug (e.g. "data-man") */
+    projectSlug: string;
+    /** API key for authentication (used in local dev, read from env) */
+    apiKey?: string;
+}
+export interface UseQueryOptions {
+    /** Whether to fetch immediately (default: true) */
+    enabled?: boolean;
+}
+export interface UseQueryResult<T = Record<string, unknown>[]> {
+    /** The query result data */
+    data: T | null;
+    /** Whether the query is currently loading */
+    loading: boolean;
+    /** Error message if the query failed */
+    error: string | null;
+    /** Re-run the query manually */
+    refetch: () => Promise<void>;
+}

package/dist/types.js

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

package/dist/use-query.d.ts

@@ -0,0 +1,14 @@
+import type { UseQueryOptions, UseQueryResult } from "./types";
+/**
+ * Fetches data from a registered query by name.
+ *
+ * Usage:
+ * ```tsx
+ * const { data, loading, error } = useQuery("monthly_revenue");
+ * ```
+ *
+ * The query must be registered at deploy time. The browser never sends raw SQL —
+ * only the query name. Vibe Dash looks up the SQL server-side, runs it against
+ * your BigQuery warehouse using stored credentials, and returns the results.
+ */
+export declare function useQuery<T = Record<string, unknown>[]>(queryName: string, options?: UseQueryOptions): UseQueryResult<T>;

package/dist/use-query.js

@@ -0,0 +1,61 @@
+import { useState, useEffect, useCallback } from "react";
+import { useVibeDash } from "./provider";
+/**
+ * Fetches data from a registered query by name.
+ *
+ * Usage:
+ * ```tsx
+ * const { data, loading, error } = useQuery("monthly_revenue");
+ * ```
+ *
+ * The query must be registered at deploy time. The browser never sends raw SQL —
+ * only the query name. Vibe Dash looks up the SQL server-side, runs it against
+ * your BigQuery warehouse using stored credentials, and returns the results.
+ */
+export function useQuery(queryName, options) {
+    const { apiUrl, projectSlug, apiKey } = useVibeDash();
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const enabled = options?.enabled !== false;
+    const fetchData = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const headers = {
+                "Content-Type": "application/json",
+            };
+            if (apiKey) {
+                headers["Authorization"] = `Bearer ${apiKey}`;
+            }
+            const res = await fetch(`${apiUrl}/query`, {
+                method: "POST",
+                headers,
+                credentials: apiKey ? "omit" : "include",
+                body: JSON.stringify({
+                    project_slug: projectSlug,
+                    query_name: queryName,
+                }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                throw new Error(body.error || `Query failed with status ${res.status}`);
+            }
+            const body = await res.json();
+            setData(body.data);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Failed to fetch data";
+            setError(message);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiUrl, projectSlug, queryName]);
+    useEffect(() => {
+        if (enabled) {
+            fetchData();
+        }
+    }, [enabled, fetchData]);
+    return { data, loading, error, refetch: fetchData };
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@vibedash/client",
+  "version": "0.1.0",
+  "description": "React hooks for Vibe Dash dashboards — useQuery() for data fetching",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "typescript": "^5"
+  }
+}