@setzkasten-cms/ui 0.4.2

package/src/components/admin-app.tsx

@@ -0,0 +1,275 @@
+import { useState, useEffect } from 'react'
+import type { SetzKastenConfig } from '@setzkasten-cms/core'
+import { PageBuilder } from './page-builder'
+import { ToastProvider } from './toast'
+import { useConfig } from '../providers/setzkasten-provider'
+import { Layers, Globe, Settings } from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface UserInfo {
+  name?: string
+  email: string
+  avatarUrl?: string
+}
+
+interface PageInfo {
+  path: string
+  pageKey: string
+  label: string
+  hasConfig: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Admin App
+// ---------------------------------------------------------------------------
+
+export function AdminApp() {
+  const config = useConfig()
+  const [user, setUser] = useState<UserInfo | null>(null)
+  const [checking, setChecking] = useState(true)
+
+  useEffect(() => {
+    checkSession()
+  }, [])
+
+  async function checkSession() {
+    try {
+      const response = await fetch('/api/setzkasten/auth/session')
+      const session = await response.json()
+      if (session.authenticated) {
+        setUser(session.user)
+      }
+    } catch {
+      // Not authenticated
+    } finally {
+      setChecking(false)
+    }
+  }
+
+  if (checking) {
+    return <LoadingScreen />
+  }
+
+  if (!user) {
+    return <LoginScreen config={config} />
+  }
+
+  return (
+    <ToastProvider>
+      <AdminShell config={config} user={user} />
+    </ToastProvider>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Loading
+// ---------------------------------------------------------------------------
+
+function LoadingScreen() {
+  return (
+    <div className="sk-admin-loading">
+      <div className="sk-admin-loading__spinner" />
+      <p className="sk-admin-loading__text">Lade Setzkasten...</p>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Login
+// ---------------------------------------------------------------------------
+
+function LoginScreen({ config }: { config: SetzKastenConfig }) {
+  const providers = config.auth?.providers ?? ['github']
+
+  return (
+    <div className="sk-login">
+      <div className="sk-login__card">
+        <div className="sk-login__logo">S</div>
+        <h1 className="sk-login__title">
+          {config.theme?.brandName ?? 'Setzkasten'}
+        </h1>
+        <p className="sk-login__subtitle">Melde dich an, um Inhalte zu bearbeiten.</p>
+
+        {providers.includes('github') && (
+          <a href="/api/setzkasten/auth/login?provider=github" className="sk-login__btn">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+              <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844a9.59 9.59 0 012.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0022 12.017C22 6.484 17.522 2 12 2Z" />
+            </svg>
+            Mit GitHub anmelden
+          </a>
+        )}
+
+        {providers.includes('google') && (
+          <a href="/api/setzkasten/auth/login?provider=google" className="sk-login__btn">
+            <svg viewBox="0 0 24 24" width="20" height="20">
+              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+            </svg>
+            Mit Google anmelden
+          </a>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Admin Shell – Dashboard or Page Builder
+// ---------------------------------------------------------------------------
+
+function AdminShell({ config, user }: { config: SetzKastenConfig; user: UserInfo }) {
+  const [view, setView] = useState<'dashboard' | 'page-builder'>('dashboard')
+  const [pages, setPages] = useState<PageInfo[]>([])
+  const [selectedPageKey, setSelectedPageKey] = useState('index')
+  const [loadingPages, setLoadingPages] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/setzkasten/pages')
+      .then(r => r.json())
+      .then(data => {
+        setPages(data.pages ?? [])
+      })
+      .catch(() => {})
+      .finally(() => setLoadingPages(false))
+  }, [])
+
+  if (view === 'page-builder') {
+    return (
+      <PageBuilder
+        pageKey={selectedPageKey}
+        pages={pages}
+        onPageChange={setSelectedPageKey}
+        onExit={() => setView('dashboard')}
+      />
+    )
+  }
+
+  return (
+    <Dashboard
+      config={config}
+      user={user}
+      pages={pages}
+      loadingPages={loadingPages}
+      selectedPageKey={selectedPageKey}
+      onSelectPage={setSelectedPageKey}
+      onOpenPageBuilder={() => setView('page-builder')}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Dashboard
+// ---------------------------------------------------------------------------
+
+interface DashboardProps {
+  config: SetzKastenConfig
+  user: UserInfo
+  pages: PageInfo[]
+  loadingPages: boolean
+  selectedPageKey: string
+  onSelectPage: (key: string) => void
+  onOpenPageBuilder: () => void
+}
+
+function Dashboard({
+  config,
+  user,
+  pages,
+  loadingPages,
+  selectedPageKey,
+  onSelectPage,
+  onOpenPageBuilder,
+}: DashboardProps) {
+  const brandName = config.theme?.brandName ?? 'Setzkasten'
+
+  return (
+    <div className="sk-dashboard">
+      <header className="sk-dashboard__topbar">
+        <div className="sk-dashboard__brand">
+          <span className="sk-dashboard__logo">S</span>
+          <span className="sk-dashboard__brand-name">Setzkasten</span>
+        </div>
+        <div className="sk-dashboard__user">
+          {user.avatarUrl ? (
+            <img src={user.avatarUrl} className="sk-dashboard__avatar" alt="" />
+          ) : (
+            <span className="sk-dashboard__avatar sk-dashboard__avatar--placeholder">
+              {(user.name ?? user.email ?? '?')[0]!.toUpperCase()}
+            </span>
+          )}
+          <span className="sk-dashboard__user-name">{user.name || user.email}</span>
+          <a href="/api/setzkasten/auth/logout" className="sk-dashboard__logout">
+            Abmelden
+          </a>
+        </div>
+      </header>
+
+      <main className="sk-dashboard__content">
+        {/* Primary card: open Page Builder */}
+        <div className="sk-dashboard__card sk-dashboard__card--primary">
+          <div className="sk-dashboard__card-icon">
+            <Layers size={28} />
+          </div>
+          <h2 className="sk-dashboard__card-title">Zum Setzkasten für</h2>
+          <div className="sk-dashboard__card-controls">
+            <select
+              className="sk-dashboard__select"
+              disabled
+              value={brandName}
+            >
+              <option>{brandName}</option>
+            </select>
+            <select
+              className="sk-dashboard__select"
+              value={selectedPageKey}
+              onChange={e => onSelectPage(e.target.value)}
+              disabled={loadingPages || pages.length === 0}
+            >
+              {loadingPages ? (
+                <option>Lade...</option>
+              ) : pages.length === 0 ? (
+                <option value="index">Startseite</option>
+              ) : (
+                pages.map(p => (
+                  <option key={p.pageKey} value={p.pageKey}>
+                    {p.label}
+                  </option>
+                ))
+              )}
+            </select>
+            <button
+              type="button"
+              className="sk-dashboard__btn"
+              onClick={onOpenPageBuilder}
+            >
+              Öffnen
+            </button>
+          </div>
+        </div>
+
+        {/* Secondary cards */}
+        <div className="sk-dashboard__cards-row">
+          <div className="sk-dashboard__card sk-dashboard__card--disabled">
+            <div className="sk-dashboard__card-icon">
+              <Globe size={22} />
+            </div>
+            <h3 className="sk-dashboard__card-subtitle">Websites verwalten</h3>
+            <span className="sk-dashboard__badge">Kommt bald</span>
+          </div>
+          <div className="sk-dashboard__card sk-dashboard__card--disabled">
+            <div className="sk-dashboard__card-icon">
+              <Settings size={22} />
+            </div>
+            <h3 className="sk-dashboard__card-subtitle">Globale Konfiguration</h3>
+            <span className="sk-dashboard__badge">Kommt bald</span>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

package/src/components/collection-view.tsx

@@ -0,0 +1,103 @@
+import { useState, useCallback, useRef } from 'react'
+import type { CollectionDefinition } from '@setzkasten-cms/core'
+import { createFormStore } from '../stores/form-store'
+import { useRepository } from '../providers/setzkasten-provider'
+import { EntryForm } from './entry-form'
+import { EntryList } from './entry-list'
+
+interface CollectionViewProps {
+  collectionKey: string
+  collection: CollectionDefinition
+}
+
+/**
+ * Full CRUD view for a collection: list on the left, form on the right.
+ */
+export function CollectionView({ collectionKey, collection }: CollectionViewProps) {
+  const repository = useRepository()
+  const [selectedSlug, setSelectedSlug] = useState<string | null>(null)
+  const [entryData, setEntryData] = useState<Record<string, unknown> | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const formStoreRef = useRef<ReturnType<typeof createFormStore> | null>(null)
+
+  const loadEntry = useCallback(
+    async (slug: string) => {
+      setLoading(true)
+      setCreating(false)
+      const result = await repository.getEntry(collectionKey, slug)
+      if (result.ok && result.value) {
+        setSelectedSlug(slug)
+        setEntryData(result.value.content)
+      }
+      setLoading(false)
+    },
+    [repository, collectionKey],
+  )
+
+  const handleCreate = useCallback(() => {
+    setSelectedSlug(null)
+    setEntryData({})
+    setCreating(true)
+  }, [])
+
+  const handleSave = useCallback(
+    async (values: Record<string, unknown>) => {
+      const slug = creating
+        ? prompt('Slug für den neuen Eintrag:')
+        : selectedSlug
+
+      if (!slug) return
+
+      const result = await repository.saveEntry(collectionKey, slug, {
+        content: values,
+      })
+
+      if (result.ok) {
+        setSelectedSlug(slug)
+        setCreating(false)
+        console.log(`[CollectionView] Saved ${slug}`)
+      }
+    },
+    [repository, collectionKey, selectedSlug, creating],
+  )
+
+  return (
+    <div className="sk-collection-view">
+      <div className="sk-collection-view__list">
+        <EntryList
+          collection={collectionKey}
+          label={collection.label}
+          onSelect={loadEntry}
+          onCreate={handleCreate}
+          selectedSlug={selectedSlug ?? undefined}
+        />
+      </div>
+
+      <div className="sk-collection-view__editor">
+        {loading ? (
+          <div className="sk-empty">
+            <p>Lade Eintrag...</p>
+          </div>
+        ) : entryData !== null ? (
+          <div>
+            <div className="sk-collection-view__editor-header">
+              <h3>{creating ? 'Neuer Eintrag' : selectedSlug}</h3>
+            </div>
+            <EntryForm
+              key={selectedSlug ?? 'new'}
+              schema={collection.fields}
+              initialValues={entryData}
+              onSave={handleSave}
+              storeRef={formStoreRef}
+            />
+          </div>
+        ) : (
+          <div className="sk-empty">
+            <p>Wähle einen Eintrag aus der Liste oder erstelle einen neuen.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/entry-form.tsx

@@ -0,0 +1,76 @@
+import { memo, useEffect, useMemo, type MutableRefObject } from 'react'
+import type { AnyFieldDef, FieldRecord } from '@setzkasten-cms/core'
+import { createFormStore } from '../stores/form-store'
+import type { FormStore } from '../stores/form-store'
+import { FieldRenderer } from '../fields/field-renderer'
+
+interface EntryFormProps {
+  schema: FieldRecord
+  initialValues: Record<string, unknown>
+  /** If provided, form starts with these values but initialValues stays as the saved baseline (for dirty detection). */
+  draftValues?: Record<string, unknown>
+  onSave?: (values: Record<string, unknown>) => void
+  /**
+   * Optional ref that receives the internal FormStore instance.
+   * Useful for external subscribers (e.g. live preview sync).
+   */
+  storeRef?: MutableRefObject<ReturnType<typeof createFormStore> | null>
+}
+
+/**
+ * Generates a complete form from a schema definition.
+ * Each instance creates its own FormStore (one store per entry).
+ */
+export const EntryForm = memo(function EntryForm({
+  schema,
+  initialValues,
+  draftValues,
+  onSave,
+  storeRef,
+}: EntryFormProps) {
+  const store = useMemo(() => createFormStore(), [])
+
+  useEffect(() => {
+    if (storeRef) {
+      storeRef.current = store
+    }
+    return () => {
+      if (storeRef) {
+        storeRef.current = null
+      }
+    }
+  }, [store, storeRef])
+
+  useEffect(() => {
+    store.getState().init(schema, initialValues, draftValues)
+  }, [store, schema, initialValues, draftValues])
+
+  const handleSave = () => {
+    const { values, isDirty } = store.getState()
+    if (isDirty() && onSave) {
+      onSave(values)
+    }
+  }
+
+  return (
+    <div className="sk-entry-form">
+      <div className="sk-entry-form__fields">
+        {Object.entries(schema).map(([key, field]) => (
+          <FieldRenderer
+            key={key}
+            field={field as AnyFieldDef}
+            path={[key]}
+            store={store}
+          />
+        ))}
+      </div>
+      {onSave && (
+        <div className="sk-entry-form__actions">
+          <button type="button" className="sk-button sk-button--primary" onClick={handleSave}>
+            Speichern
+          </button>
+        </div>
+      )}
+    </div>
+  )
+})

package/src/components/entry-list.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState, useCallback } from 'react'
+import type { EntryListItem } from '@setzkasten-cms/core'
+import { useRepository } from '../providers/setzkasten-provider'
+
+interface EntryListProps {
+  collection: string
+  label: string
+  onSelect: (slug: string) => void
+  onCreate: () => void
+  selectedSlug?: string
+}
+
+/**
+ * List of entries in a collection with create/delete actions.
+ */
+export function EntryList({
+  collection,
+  label,
+  onSelect,
+  onCreate,
+  selectedSlug,
+}: EntryListProps) {
+  const repository = useRepository()
+  const [entries, setEntries] = useState<EntryListItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const loadEntries = useCallback(async () => {
+    setLoading(true)
+    const result = await repository.listEntries(collection)
+    if (result.ok) {
+      setEntries(result.value)
+    }
+    setLoading(false)
+  }, [repository, collection])
+
+  useEffect(() => {
+    loadEntries()
+  }, [loadEntries])
+
+  const handleDelete = useCallback(
+    async (slug: string) => {
+      if (!confirm(`"${slug}" wirklich löschen?`)) return
+      const result = await repository.deleteEntry(collection, slug)
+      if (result.ok) {
+        loadEntries()
+      }
+    },
+    [repository, collection, loadEntries],
+  )
+
+  if (loading) {
+    return (
+      <div className="sk-entry-list sk-entry-list--loading">
+        <div className="sk-entry-list__header">
+          <h2 className="sk-entry-list__title">{label}</h2>
+        </div>
+        <div className="sk-entry-list__empty">Lade...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="sk-entry-list">
+      <div className="sk-entry-list__header">
+        <h2 className="sk-entry-list__title">{label}</h2>
+        <span className="sk-entry-list__count">{entries.length}</span>
+        <button
+          type="button"
+          className="sk-button sk-button--primary sk-button--sm"
+          onClick={onCreate}
+        >
+          + Neu
+        </button>
+      </div>
+      {entries.length === 0 ? (
+        <div className="sk-entry-list__empty">
+          <p>Noch keine Einträge.</p>
+          <button
+            type="button"
+            className="sk-button sk-button--primary"
+            onClick={onCreate}
+          >
+            Ersten Eintrag erstellen
+          </button>
+        </div>
+      ) : (
+        <ul className="sk-entry-list__items" role="list">
+          {entries.map((entry) => (
+            <li
+              key={entry.slug}
+              className={`sk-entry-list__item ${entry.slug === selectedSlug ? 'sk-entry-list__item--active' : ''}`}
+            >
+              <button
+                type="button"
+                className="sk-entry-list__item-btn"
+                onClick={() => onSelect(entry.slug)}
+              >
+                <span className="sk-entry-list__item-name">{entry.name}</span>
+                <span className="sk-entry-list__item-slug">{entry.slug}</span>
+              </button>
+              <button
+                type="button"
+                className="sk-entry-list__item-delete"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleDelete(entry.slug)
+                }}
+                title="Löschen"
+                aria-label={`${entry.name} löschen`}
+              >
+                ×
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}