@dyrected/admin 2.4.0 → 2.4.1

package/src/index.tsx

@@ -1,198 +0,0 @@
-/** @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="dy-flex-1 dy-flex dy-items-center dy-justify-center dy-p-12 dy-bg-muted/5 dy-animate-pulse">
-        <div className="dy-text-muted-foreground/40 dy-text-sm dy-font-medium">Loading Dashboard...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="dy-admin-ui dy-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="dy-admin-ui dy-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

@@ -1,36 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { extendTailwindMerge } from "tailwind-merge"
-
-const customTwMerge = extendTailwindMerge({
-  prefix: "dy-",
-})
-
-export function cn(...inputs: ClassValue[]) {
-  return customTwMerge(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

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

@@ -1,115 +0,0 @@
-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="dy-flex dy-min-h-screen dy-items-center dy-justify-center dy-bg-background dy-px-4">
-      <div className="dy-w-full dy-max-w-sm dy-space-y-8">
-        <div className="dy-space-y-2 dy-text-center">
-          <div className="dy-mx-auto dy-h-12 dy-w-12 dy-rounded-full dy-bg-primary/5 dy-flex dy-items-center dy-justify-center dy-mb-4">
-            <div className="dy-h-6 dy-w-6 dy-rounded-full dy-border-2 dy-border-primary dy-border-t-transparent dy-animate-pulse" />
-          </div>
-          <h1 className="dy-text-2xl dy-font-semibold dy-tracking-tight">Setup Admin Account</h1>
-          <p className="dy-text-sm dy-text-muted-foreground">Create the first administrative user to get started</p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="dy-space-y-4">
-          <div className="dy-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="dy-bg-transparent"
-            />
-          </div>
-          <div className="dy-space-y-2">
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              className="dy-bg-transparent"
-            />
-          </div>
-          <div className="dy-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="dy-bg-transparent"
-            />
-          </div>
-
-          {error && (
-            <div className="dy-text-xs dy-text-destructive dy-font-medium dy-bg-destructive/10 dy-p-3 dy-rounded-md">
-              {error}
-            </div>
-          )}
-
-          <Button type="submit" className="dy-w-full" disabled={loading}>
-            {loading ? "Creating account..." : "Create Admin Account"}
-          </Button>
-        </form>
-
-        <div className="dy-pt-4 dy-border-t dy-text-center dy-space-y-2">
-          <p className="dy-text-[10px] dy-text-muted-foreground dy-uppercase dy-tracking-widest">
-            Dyrected CMS · Initial Setup
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,91 +0,0 @@
-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="dy-flex dy-min-h-screen dy-items-center dy-justify-center dy-bg-background dy-px-4">
-      <div className="dy-w-full dy-max-w-sm dy-space-y-8">
-        <div className="dy-space-y-2 dy-text-center">
-          <h1 className="dy-text-2xl dy-font-semibold dy-tracking-tight">Welcome back</h1>
-          <p className="dy-text-sm dy-text-muted-foreground">Enter your credentials to access the dashboard</p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="dy-space-y-4">
-          <div className="dy-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="dy-bg-transparent"
-            />
-          </div>
-          <div className="dy-space-y-2">
-            <div className="dy-flex dy-items-center dy-justify-between">
-              <Label htmlFor="password">Password</Label>
-            </div>
-            <Input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              className="dy-bg-transparent"
-            />
-          </div>
-
-          {error && (
-            <div className="dy-text-xs dy-text-destructive dy-font-medium dy-bg-destructive/10 dy-p-3 dy-rounded-md">
-              {error}
-            </div>
-          )}
-
-          <Button type="submit" className="dy-w-full" disabled={loading}>
-            {loading ? "Signing in..." : "Sign In"}
-          </Button>
-        </form>
-
-        <p className="dy-text-center dy-text-xs dy-text-muted-foreground dy-uppercase dy-tracking-widest">
-          Dyrected CMS
-        </p>
-      </div>
-    </div>
-  );
-}