@kopai/ui 0.0.4 → 0.1.0

package/src/providers/kopai-provider.tsx

@@ -0,0 +1,51 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { KopaiClient as SDKClient } from "@kopai/sdk";
+
+export type KopaiClient = Pick<
+  SDKClient,
+  | "searchTracesPage"
+  | "searchLogsPage"
+  | "searchMetricsPage"
+  | "getTrace"
+  | "discoverMetrics"
+>;
+
+interface KopaiSDKContextValue {
+  client: KopaiClient;
+}
+
+const KopaiSDKContext = createContext<KopaiSDKContextValue | null>(null);
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+interface KopaiSDKProviderProps {
+  client: KopaiClient;
+  children: ReactNode;
+}
+
+export function KopaiSDKProvider({ client, children }: KopaiSDKProviderProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <KopaiSDKContext.Provider value={{ client }}>
+        {children}
+      </KopaiSDKContext.Provider>
+    </QueryClientProvider>
+  );
+}
+
+export function useKopaiSDK(): KopaiClient {
+  const ctx = useContext(KopaiSDKContext);
+  if (!ctx) {
+    throw new Error("useKopaiSDK must be used within KopaiSDKProvider");
+  }
+  return ctx.client;
+}

package/src/styles/globals.css

@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --font-heading: "Space Grotesk", system-ui, sans-serif;
+    --font-body: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
+    --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+
+    --card: 0 0% 7%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 7%;
+    --popover-foreground: 0 0% 98%;
+    --secondary: 0 0% 11%;
+    --muted: 0 0% 11%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 3.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 0% 3.9%;
+    --destructive-foreground: 0 0% 98%;
+    --success: 142.1 70% 45%;
+    --success-foreground: 0 0% 98%;
+    --info: 210 90% 60%;
+    --info-foreground: 0 0% 98%;
+    --warning: 38 92% 60%;
+    --warning-foreground: 0 0% 9%;
+    --ring: 0 0% 83.1%;
+    --radius: 0.5rem;
+
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />