@dyrected/admin 1.0.1

package/src/pages/setup/setup-prompt.tsx

@@ -0,0 +1,152 @@
+import { useState } from "react";
+import {
+  Copy,
+  Check,
+  ExternalLink,
+  Terminal,
+  Sparkles,
+  ShieldCheck,
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+import { generateAIPrompt, type SetupPromptConfig } from "@dyrected/core";
+
+export type { SetupPromptConfig };
+
+export interface SetupPromptProps {
+  config: SetupPromptConfig;
+}
+
+export function SetupPromptUI({ config }: SetupPromptProps) {
+  const [copied, setCopied] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<"next" | "nuxt" | "react" | "vue">("next");
+
+  const promptText = generateAIPrompt(activeTab, config);
+
+  const copyToClipboard = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8 py-8 animate-in slide-in-from-bottom-4 duration-700">
+      <div className="text-center space-y-4">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider mb-2">
+          <Sparkles className="h-3 w-3" />
+          Integration Guide
+        </div>
+        <h1 className="text-2xl font-semibold tracking-tight lg:text-5xl text-foreground">
+          Connect Your Application
+        </h1>
+        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+          Use the AI prompt below to set up your frontend automatically, or follow the steps manually.
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        {/* Site Credentials */}
+        <section className="rounded-2xl border bg-card overflow-hidden shadow-xl">
+          <div className="p-4 border-b bg-muted/30">
+            <h3 className="text-lg font-semibold flex items-center gap-2">
+              <ShieldCheck className="h-5 w-5 text-primary" />
+              Site Credentials
+            </h3>
+          </div>
+          <div className="p-4">
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {[
+                { label: "Site ID", value: config.siteId, id: "siteId" },
+                { label: "API Key", value: config.apiKey, id: "apiKey" },
+                { label: "Base URL", value: config.baseUrl, id: "baseUrl" },
+              ].map((item) => (
+                <div key={item.id} className="space-y-2">
+                  <label className="text-xs font-bold text-muted-foreground uppercase">
+                    {item.label}
+                  </label>
+                  <div className="relative group">
+                    <div className="p-3 pr-10 rounded-lg bg-muted text-sm font-mono truncate border border-transparent group-hover:border-primary/20 transition-all">
+                      {item.value}
+                    </div>
+                    <button
+                      onClick={() => copyToClipboard(item.value || "", item.id)}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-md hover:bg-background transition-colors text-muted-foreground"
+                    >
+                      {copied === item.id ? (
+                        <Check className="h-4 w-4 text-green-500" />
+                      ) : (
+                        <Copy className="h-4 w-4" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* AI Prompt */}
+        <section className="rounded-2xl border bg-white overflow-hidden shadow-xl ring-1 ring-primary/20">
+          <div className="p-6 border-b bg-primary/5 flex items-center justify-between gap-4 flex-wrap">
+            <div className="space-y-3">
+              <h3 className="text-lg font-semibold flex items-center gap-2">
+                <Sparkles className="h-5 w-5 text-primary animate-pulse" />
+                AI Integration Prompt
+              </h3>
+              <div className="flex gap-2 bg-muted/50 p-1 rounded-lg w-fit">
+                {(["next", "nuxt", "react", "vue"] as const).map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    className={cn(
+                      "px-4 py-1.5 rounded-md text-xs font-medium transition-all capitalize",
+                      activeTab === tab
+                        ? "bg-background text-foreground shadow-sm"
+                        : "text-muted-foreground hover:text-foreground"
+                    )}
+                  >
+                    {tab === "next" ? "Next.js" : tab === "nuxt" ? "Nuxt" : tab}
+                  </button>
+                ))}
+              </div>
+              <p className="text-sm text-muted-foreground">
+                Copy and paste this into your AI developer to handle everything automatically
+              </p>
+            </div>
+            <Button
+              onClick={() => copyToClipboard(promptText, "ai-developer")}
+              className="relative overflow-hidden group shrink-0"
+            >
+              <div className="flex items-center gap-2">
+                {copied === "ai-developer" ? (
+                  <Check className="h-4 w-4" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+                {copied === "ai-developer" ? "Copied!" : "Copy Full Prompt"}
+              </div>
+            </Button>
+          </div>
+          <div className="p-6 bg-slate-950 text-slate-300 font-mono text-xs leading-relaxed max-h-[400px] overflow-y-auto scrollbar-thin scrollbar-thumb-white/10">
+            <pre className="whitespace-pre-wrap">{promptText}</pre>
+          </div>
+        </section>
+      </div>
+
+      <div className="flex justify-center gap-4 pt-4">
+        <Button variant="outline" asChild>
+          <a
+            href={`${config.baseUrl}/api/docs`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2"
+          >
+            <Terminal className="h-4 w-4" />
+            API Documentation
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/providers/dyrected-provider.tsx

@@ -0,0 +1,122 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { createClient, DyrectedClient } from "@dyrected/sdk";
+
+interface DyrectedContextType {
+  client: DyrectedClient | null;
+  config: {
+    baseUrl: string;
+    apiKey: string | undefined;
+    siteId: string | undefined;
+  };
+  setAuth: (baseUrl: string, apiKey: string, siteId?: string) => void;
+  logout: () => void;
+  isAuthenticated: boolean;
+  schemas: { collections: any[]; globals: any[]; admin?: any } | null;
+  user: any | null;
+  setToken: (token: string) => void;
+}
+
+const DyrectedContext = createContext<DyrectedContextType | undefined>(undefined);
+
+export interface DyrectedProviderProps {
+  children: React.ReactNode;
+  apiKey?: string;
+  baseUrl?: string;
+  siteId?: string;
+}
+
+export function DyrectedProvider({ 
+  children, 
+  apiKey: initialApiKey, 
+  baseUrl: initialBaseUrl,
+  siteId: initialSiteId
+}: DyrectedProviderProps) {
+  const [baseUrl, setBaseUrl] = useState<string>(() => initialBaseUrl || (typeof window !== 'undefined' ? localStorage.getItem("dyrected_url") : null) || "");
+  const [apiKey, setApiKey] = useState<string | undefined>(() => initialApiKey || (typeof window !== 'undefined' ? localStorage.getItem("dyrected_key") : null) || undefined);
+  const [siteId, setSiteId] = useState<string | undefined>(() => initialSiteId || (typeof window !== 'undefined' ? localStorage.getItem("dyrected_site_id") : null) || undefined);
+  const [client, setClient] = useState<DyrectedClient | null>(null);
+  const [schemas, setSchemas] = useState<{ collections: any[]; globals: any[]; admin?: any } | null>(null);
+  const [user, setUser] = useState<any | null>(null);
+
+  useEffect(() => {
+    if (baseUrl) {
+      const newClient = createClient({
+        baseUrl,
+        apiKey: apiKey || undefined,
+        siteId: siteId || undefined,
+      });
+      setClient(newClient);
+      
+      // Fetch schemas
+      newClient.getSchemas().then(setSchemas).catch(err => {
+        console.error("Failed to fetch schemas:", err);
+        setSchemas(null);
+      });
+    }
+  }, [baseUrl, apiKey, siteId]);
+
+  useEffect(() => {
+    const token = localStorage.getItem("dyrected_token");
+    if (token && client && schemas && !user) {
+      setToken(token);
+    }
+  }, [client, schemas, user]);
+
+  const setAuth = (newUrl: string, newKey: string, newSiteId?: string) => {
+    localStorage.setItem("dyrected_url", newUrl);
+    localStorage.setItem("dyrected_key", newKey);
+    if (newSiteId) localStorage.setItem("dyrected_site_id", newSiteId);
+    else localStorage.removeItem("dyrected_site_id");
+    
+    setBaseUrl(newUrl);
+    setApiKey(newKey);
+    setSiteId(newSiteId);
+  };
+
+  const setToken = (token: string) => {
+    localStorage.setItem("dyrected_token", token);
+    if (client) {
+      client.setToken(token);
+      // Prefer __admins for the dashboard session; fall back to the first auth collection.
+      const authCollection =
+        schemas?.collections.find((c: any) => c.slug === '__admins') ??
+        schemas?.collections.find((c: any) => c.auth);
+      if (authCollection) {
+        client.collection(authCollection.slug).me().then(setUser).catch(() => setUser(null));
+      }
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem("dyrected_url");
+    localStorage.removeItem("dyrected_key");
+    localStorage.removeItem("dyrected_site_id");
+    localStorage.removeItem("dyrected_token");
+    setBaseUrl("");
+    setApiKey(undefined);
+    setSiteId(undefined);
+    setClient(null);
+    setUser(null);
+  };
+
+  return (
+    <DyrectedContext.Provider value={{
+      client,
+      config: { baseUrl, apiKey, siteId },
+      setAuth,
+      setToken,
+      logout,
+      isAuthenticated: !!baseUrl && !!apiKey,
+      schemas,
+      user
+    }}>
+      {children}
+    </DyrectedContext.Provider>
+  );
+}
+
+export const useDyrected = () => {
+  const context = useContext(DyrectedContext);
+  if (!context) throw new Error("useDyrected must be used within a DyrectedProvider");
+  return context;
+};

package/src/providers/query-provider.tsx

@@ -0,0 +1,19 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        retry: 1,
+      },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}

package/src/types/jexl.d.ts

@@ -0,0 +1,11 @@
+declare module 'jexl' {
+  const jexl: {
+    evalSync: (expression: string, context: any) => any;
+    eval: (expression: string, context: any) => Promise<any>;
+    addFunction: (name: string, fn: (...args: any[]) => any) => void;
+    addTransform: (name: string, fn: (...args: any[]) => any) => void;
+    addBinaryOp: (name: string, precedence: number, fn: (a: any, b: any) => any) => void;
+    addUnaryOp: (name: string, fn: (a: any) => any) => void;
+  };
+  export default jexl;
+}

package/tailwind.config.ts

@@ -0,0 +1,102 @@
+import type { Config } from "tailwindcss"
+import tailwindAnimate from "tailwindcss-animate"
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		fontFamily: {
+  			sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+  			serif: ['var(--font-serif)', 'ui-serif', 'Georgia', 'serif'],
+  		},
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
+  },
+  plugins: [tailwindAnimate],
+}
+
+export default config

package/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@dyrected/core": ["../core/src/index.ts"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "paths": {
+      "@dyrected/core": ["../core/src/index.ts"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,36 @@
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    nodePolyfills({
+      // Whether to polyfill `node:` protocol imports.
+      protocolImports: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.tsx"),
+      name: "DyrectedAdmin",
+      fileName: () => "index.mjs",
+      formats: ["es"],
+    },
+    rollupOptions: {
+      output: {
+        format: "es",
+        manualChunks: undefined,
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      "@dyrected/core": path.resolve(__dirname, "../core/src"),
+    },
+  },
+});
+