@dyrected/admin 2.4.0 → 2.4.1

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

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

package/src/providers/dyrected-provider.tsx

@@ -1,122 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,103 +0,0 @@
-import type { Config } from "tailwindcss"
-import tailwindAnimate from "tailwindcss-animate"
-
-const config: Config = {
-  prefix: 'dy-',
-  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

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023", "DOM"],
-    "module": "esnext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-
-    /* 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

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

package/tsconfig.node.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023"],
-    "module": "esnext",
-    "types": ["node"],
-    "skipLibCheck": true,
-    "paths": {},
-
-    /* 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

@@ -1,39 +0,0 @@
-import path from "path";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
-import dts from "vite-plugin-dts";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    dts({
-      tsconfigPath: "./tsconfig.app.json",
-      insertTypesEntry: true,
-    }),
-    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"),
-    },
-  },
-});