@dyrected/admin 1.0.1

package/src/index.tsx

@@ -0,0 +1,198 @@
+/** @jsxImportSource react */
+import "./index.css";
+import React, { useEffect, useState, StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  HashRouter,
+  MemoryRouter,
+  Routes,
+  Route,
+  useParams,
+  useLocation,
+} from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { DyrectedProvider, useDyrected } from "./providers/dyrected-provider";
+import { QueryProvider } from "./providers/query-provider";
+import { AdminShell } from "./components/layout/admin-shell";
+import { Dashboard } from "./pages/dashboard/dashboard";
+import { CollectionListPage } from "./pages/collections/list-page";
+import { EditEntryPage } from "./pages/collections/edit-page";
+import { MediaPage } from "./pages/media/media-page";
+import { GlobalEditorPage } from "./pages/globals/editor-page";
+import { SetupPromptUI } from "./pages/setup/setup-prompt";
+import { ErrorBoundary } from "./components/error-boundary";
+import { AuthGate } from "./components/auth/auth-gate";
+import { Toaster } from "./components/ui/sonner";
+
+// ─── Route that resolves collection → list or media page ─────────────────────
+
+function CollectionRoute() {
+  const { slug } = useParams();
+  const { client } = useDyrected();
+
+  const { data: schemas } = useQuery({
+    queryKey: ["schemas"],
+    queryFn: () => client?.getSchemas() || Promise.resolve({ collections: [], globals: [] }),
+    enabled: !!client,
+  });
+
+  const schema = schemas?.collections.find((c: any) => c.slug === slug);
+
+  if (schema?.admin?.hidden) {
+    return <div>404: Not Found</div>;
+  }
+
+  if (schema?.upload) {
+    return <MediaPage collectionSlug={slug!} schema={schema} />;
+  }
+
+  return <CollectionListPage slug={slug!} />;
+}
+
+// ─── Setup page — reads config from context ───────────────────────────────────
+
+function SetupPage() {
+  const { config } = useDyrected();
+  return <SetupPromptUI config={config} />;
+}
+
+// ─── Navigation sync — notifies host on every internal route change ───────────
+
+interface NavigationSyncProps {
+  onNavigate?: (path: string) => void;
+}
+
+function NavigationSync({ onNavigate }: NavigationSyncProps) {
+  const location = useLocation();
+
+  useEffect(() => {
+    onNavigate?.(location.pathname + location.search);
+  }, [location, onNavigate]);
+
+  return null;
+}
+
+// ─── Route tree (shared between embedded and standalone) ──────────────────────
+
+function AdminRoutes({ onNavigate, isEmbedded = false }: { onNavigate?: (path: string) => void, isEmbedded?: boolean }) {
+  return (
+    <AuthGate>
+      <AdminShell isEmbedded={isEmbedded}>
+        <NavigationSync onNavigate={onNavigate} />
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/collections/:slug" element={<CollectionRoute />} />
+          <Route path="/collections/:slug/new" element={<EditEntryPage />} />
+          <Route path="/collections/:slug/edit/:id" element={<EditEntryPage />} />
+          <Route path="/globals/:slug" element={<GlobalEditorPage />} />
+          <Route path="/setup" element={<SetupPage />} />
+        </Routes>
+      </AdminShell>
+    </AuthGate>
+  );
+}
+
+// ─── Public types ─────────────────────────────────────────────────────────────
+
+export interface AdminUIProps {
+  apiKey?: string;
+  baseUrl?: string;
+  siteId?: string;
+  /**
+   * The base path where the admin is mounted in the host app.
+   * Defaults to "/admin". Used by BrowserRouter so internal links
+   * are relative to this prefix.
+   *
+   * Example — Next.js catch-all page at `app/admin/[[...path]]/page.tsx`:
+   *   <AdminUI basename="/admin" ... />
+   */
+  basename?: string;
+  /**
+   * Called whenever the internal admin route changes.
+   * Use this to sync the host router (e.g. Next.js router.push / Nuxt navigateTo)
+   * so browser history works correctly when embedded.
+   *
+   * Example (Nuxt):
+   *   <AdminUI onNavigate={(path) => navigateTo('/admin' + path)} ... />
+   */
+  onNavigate?: (path: string) => void;
+  isEmbedded?: boolean
+}
+
+// ─── Embedded component (BrowserRouter — real URL + history) ─────────────────
+
+export function AdminUI({
+  apiKey,
+  baseUrl = "/dyrected",
+  siteId,
+  onNavigate,
+  isEmbedded
+}: AdminUIProps) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-12 bg-muted/5 animate-pulse">
+        <div className="text-muted-foreground/40 text-sm font-medium">Loading Dashboard...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="admin-ui h-full">
+      <ErrorBoundary>
+        <DyrectedProvider apiKey={apiKey} baseUrl={baseUrl} siteId={siteId}>
+          <QueryProvider>
+            <HashRouter>
+              <AdminRoutes onNavigate={onNavigate} isEmbedded={isEmbedded} />
+            </HashRouter>
+          </QueryProvider>
+          <Toaster position="top-right" expand={true} richColors />
+        </DyrectedProvider>
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+/**
+ * Renders the Admin UI into a DOM element. 
+ * Useful for non-React frameworks like Nuxt, Svelte, or Vanilla JS.
+ */
+export function renderAdminUI(container: HTMLElement, props: AdminUIProps) {
+  const root = createRoot(container);
+  root.render(
+    React.createElement(StrictMode, null,
+      React.createElement(AdminUI, props)
+    )
+  );
+  return () => root.unmount();
+}
+
+// ─── Standalone component (MemoryRouter — for iframe / self-hosted mode) ──────
+
+export interface AdminStandaloneProps {
+  apiKey: string;
+  baseUrl: string;
+  siteId?: string;
+}
+
+export function AdminStandalone({ apiKey, baseUrl, siteId }: AdminStandaloneProps) {
+  return (
+    <div className="admin-ui h-full">
+      <DyrectedProvider apiKey={apiKey} baseUrl={baseUrl} siteId={siteId}>
+        <QueryProvider>
+          <MemoryRouter>
+            <AdminRoutes />
+          </MemoryRouter>
+        </QueryProvider>
+        <Toaster position="top-right" expand={true} richColors />
+      </DyrectedProvider>
+    </div>
+  );
+}
+
+// ─── Re-exports for external use ──────────────────────────────────────────────
+
+export { SetupPromptUI } from "./pages/setup/setup-prompt";
+export type { SetupPromptProps } from "./pages/setup/setup-prompt";

package/src/lib/utils.ts

@@ -0,0 +1,32 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function getMediaUrl(val: string | any, baseUrl: string) {
+  if (!val) return "";
+  
+  // Handle object with direct URL
+  if (typeof val === 'object' && (val.url || val.filename)) {
+    const url = val.url || val.filename;
+    if (url.startsWith('http')) return url;
+    if (url.startsWith('/')) return `${baseUrl}${url}`;
+    // If it's just a filename in the object, use proxy
+    return `${baseUrl}/media/${val.filename || val.url}`;
+  }
+
+  const valueStr = typeof val === 'string' ? val : val.id || val.filename || val.url;
+  if (!valueStr) return "";
+
+  if (valueStr.startsWith('http')) return valueStr;
+  
+  // Check if it's a relative path starting with /
+  if (valueStr.startsWith('/')) {
+    return `${baseUrl}${valueStr}`;
+  }
+
+  // Default fallback to proxy endpoint
+  return `${baseUrl}/media/${valueStr}`;
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/pages/auth/first-user-page.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { useDyrected } from "../../providers/dyrected-provider";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { toast } from "sonner";
+
+export function FirstUserPage({ 
+  collectionSlug, 
+  onComplete 
+}: { 
+  collectionSlug: string; 
+  onComplete: (data: any) => void 
+}) {
+  const { client } = useDyrected();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const data = await client!.collection(collectionSlug).registerFirstUser({
+        email,
+        password,
+      });
+      toast.success("Admin account created successfully");
+      onComplete(data);
+    } catch (err: any) {
+      const message = err.message || "Failed to create initial user";
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="w-full max-w-sm space-y-8">
+        <div className="space-y-2 text-center">
+          <div className="mx-auto h-12 w-12 rounded-full bg-primary/5 flex items-center justify-center mb-4">
+            <div className="h-6 w-6 rounded-full border-2 border-primary border-t-transparent animate-pulse" />
+          </div>
+          <h1 className="text-2xl font-semibold tracking-tight">Setup Admin Account</h1>
+          <p className="text-sm text-muted-foreground">Create the first administrative user to get started</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Admin Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="admin@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="bg-transparent"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="bg-transparent"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirm-password">Confirm Password</Label>
+            <Input
+              id="confirm-password"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              className="bg-transparent"
+            />
+          </div>
+
+          {error && (
+            <div className="text-xs text-destructive font-medium bg-destructive/10 p-3 rounded-md">
+              {error}
+            </div>
+          )}
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? "Creating account..." : "Create Admin Account"}
+          </Button>
+        </form>
+
+        <div className="pt-4 border-t text-center space-y-2">
+          <p className="text-[10px] text-muted-foreground uppercase tracking-widest">
+            Dyrected CMS · Initial Setup
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/auth/login-page.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { useDyrected } from "../../providers/dyrected-provider";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { toast } from "sonner";
+
+export function LoginPage({ 
+  collectionSlug, 
+  onLogin 
+}: { 
+  collectionSlug: string; 
+  onLogin: (data: any) => void 
+}) {
+  const { client } = useDyrected();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const data = await client!.collection(collectionSlug).login(email, password);
+      toast.success("Welcome back!");
+      onLogin(data);
+    } catch (err: any) {
+      const message = err.message || "Invalid email or password";
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="w-full max-w-sm space-y-8">
+        <div className="space-y-2 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+          <p className="text-sm text-muted-foreground">Enter your credentials to access the dashboard</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="name@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="bg-transparent"
+            />
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="password">Password</Label>
+            </div>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="bg-transparent"
+            />
+          </div>
+
+          {error && (
+            <div className="text-xs text-destructive font-medium bg-destructive/10 p-3 rounded-md">
+              {error}
+            </div>
+          )}
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? "Signing in..." : "Sign In"}
+          </Button>
+        </form>
+
+        <p className="text-center text-xs text-muted-foreground uppercase tracking-widest">
+          Dyrected CMS
+        </p>
+      </div>
+    </div>
+  );
+}