kilo-cms 0.1.0

package/src/admin/DynamicField.tsx

@@ -0,0 +1,517 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { ImageUploader } from './ImageUploader'
+import { ArrayField } from './ArrayField'
+import { BlocksField } from './BlocksField'
+import { CategoryField, CheckboxField, CheckboxGroupField, ColorField, DateField, DateTimeField, Field, FileField, JsonField, PasswordField, PointField, RadioField, RangeField, RatingField, SelectField, TagsField, TextAreaField, TextField, TimeField, ToggleField } from './Field'
+import { GroupField } from './GroupField'
+import { LocalizedField } from './LocalizedField'
+import { RichTextEditor } from './RichTextEditor'
+import type { AnyFieldConfig, SelectOption } from '../collections/types'
+import { richTextToText } from '../collections/values'
+import { emptyRichText, type RichTextDocument } from '../richtext'
+
+export type DynamicFieldProps = {
+  field: AnyFieldConfig
+  value: unknown
+  onChange: (value: unknown) => void
+  label: string
+  hint?: string
+  error?: string
+  disabled?: boolean
+  relationOptions?: SelectOption[]
+}
+
+export function DynamicField({ field, value, onChange, label, hint, error, disabled, relationOptions = [] }: DynamicFieldProps) {
+  // Array items never declare `readOnly` (meaningless nested) — see ArrayItemFieldConfig.
+  const readOnly = 'readOnly' in field && Boolean(field.readOnly)
+  const shared = { label, hint, error, required: field.required, disabled: disabled || readOnly }
+
+  // 'localized' only exists on top-level FieldConfig (see ArrayItemFieldConfig/BlockFieldConfig,
+  // which omit it) — intercepts before the type switch since the stored value is a per-locale
+  // map, not the field's normal shape.
+  if ('localized' in field && field.localized)
+    return (
+      <LocalizedField
+        field={field}
+        value={typeof value === 'object' && value ? (value as Record<string, unknown>) : {}}
+        onChange={(next) => onChange(next)}
+        label={label}
+        hint={hint}
+        error={error}
+        disabled={shared.disabled}
+      />
+    )
+
+  switch (field.type) {
+    case 'text':
+      if (field.format === 'password') {
+        if (shared.disabled)
+          return (
+            <Field label={label} required={field.required} hint={hint} error={error}>
+              <span className="cms-input-shell cms-password-shell">
+                <input aria-label={label} type="password" value={value ? '********' : ''} readOnly disabled />
+              </span>
+            </Field>
+          )
+        return (
+          <PasswordField
+            label={label}
+            hint={hint}
+            error={error}
+            required={field.required}
+            placeholder={field.placeholder}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(event) => onChange(event.target.value)}
+          />
+        )
+      }
+      if (field.suggestionsFrom && !shared.disabled)
+        return (
+          <SuggestionTextField
+            label={label}
+            hint={hint}
+            error={error}
+            required={field.required}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(next) => onChange(next)}
+            source={field.suggestionsFrom}
+          />
+        )
+      return (
+        <TextField
+          {...shared}
+          type={field.format === 'email' ? 'email' : field.format === 'url' ? 'url' : field.format === 'tel' ? 'tel' : 'text'}
+          placeholder={field.placeholder}
+          value={typeof value === 'string' ? value : ''}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )
+
+    case 'textarea':
+      return (
+        <TextAreaField
+          {...shared}
+          rows={field.rows ?? 4}
+          placeholder={field.placeholder}
+          value={typeof value === 'string' ? value : ''}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )
+
+    case 'number':
+      if (field.display === 'range')
+        return (
+          <RangeField
+            label={label}
+            hint={hint}
+            error={error}
+            required={field.required}
+            disabled={shared.disabled}
+            min={field.min}
+            max={field.max}
+            step={field.integer ? 1 : undefined}
+            value={typeof value === 'number' ? value : (field.min ?? 0)}
+            onChange={(next) => onChange(next)}
+          />
+        )
+      return (
+        <TextField
+          {...shared}
+          type="number"
+          inputMode="numeric"
+          min={field.min}
+          max={field.max}
+          step={field.integer ? 1 : 'any'}
+          placeholder={field.placeholder}
+          value={value === null || value === undefined ? '' : String(value)}
+          onChange={(event) => onChange(event.target.value === '' ? (field.nullable ? null : 0) : Number(event.target.value))}
+        />
+      )
+
+    case 'rating':
+      return (
+        <RatingField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          disabled={shared.disabled}
+          max={field.max}
+          value={typeof value === 'number' ? value : 0}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'boolean':
+      return field.display === 'checkbox'
+        ? <CheckboxField label={label} hint={hint} error={error} checked={Boolean(value)} onChange={onChange} description={field.checkboxLabel} />
+        : <ToggleField label={label} hint={hint} error={error} checked={Boolean(value)} onChange={onChange} />
+
+    case 'select':
+      if (field.display === 'radio')
+        return (
+          <RadioField
+            label={label}
+            hint={hint}
+            error={error}
+            required={field.required}
+            disabled={shared.disabled}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(next) => onChange(next)}
+            options={withCurrentValue(field.options, value)}
+          />
+        )
+      return (
+        <SelectField
+          {...shared}
+          value={typeof value === 'string' ? value : ''}
+          options={withCurrentValue(field.options, value)}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )
+
+    case 'color':
+      return (
+        <ColorField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          disabled={shared.disabled}
+          value={typeof value === 'string' ? value : '#000000'}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'date':
+      return (
+        <DateField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          variant="calendar"
+          value={typeof value === 'string' ? value : null}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'time':
+      return (
+        <TimeField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          value={typeof value === 'string' ? value : null}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'datetime':
+      // Most datetime fields are DB-managed (createdAt/updatedAt/scheduledAt) and readOnly, which
+      // renders this read-only branch. A declared, non-readOnly datetime field (e.g.
+      // payments.paidAt) gets a real editable control instead.
+      if (shared.disabled)
+        return (
+          <Field label={label} hint={hint} error={error}>
+            <span className="cms-input-shell">
+              <input
+                readOnly
+                aria-label={label}
+                value={value ? new Date(String(value)).toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' }) : '—'}
+              />
+            </span>
+          </Field>
+        )
+      return (
+        <DateTimeField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          value={typeof value === 'string' ? value : null}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'relation':
+      if (field.hasMany) {
+        const picked = Array.isArray(value) ? (value as string[]) : []
+        if (shared.disabled) {
+          return (
+            <Field label={label} required={field.required} hint={hint} error={error}>
+              <div className="cms-tags cms-tags-readonly">
+                {picked.length
+                  ? picked.map((id) => <span className="cms-tag" key={id}>{relationOptions.find((option) => option.value === id)?.label ?? id}</span>)
+                  : <span className="cms-muted-value">—</span>}
+              </div>
+            </Field>
+          )
+        }
+        return (
+          <CheckboxGroupField
+            label={label}
+            required={field.required}
+            hint={hint}
+            error={error}
+            value={picked}
+            onChange={(next) => onChange(next)}
+            options={relationOptions}
+          />
+        )
+      }
+      return (
+        <SelectField
+          {...shared}
+          value={typeof value === 'string' ? value : ''}
+          options={[{ value: '', label: field.required ? 'Select…' : 'None' }, ...withCurrentValue(relationOptions, value)]}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )
+
+    case 'join': {
+      const rows = Array.isArray(value) ? (value as Array<{ id: string; label: unknown }>) : []
+      return (
+        <Field label={label} hint={hint} error={error}>
+          <div className="cms-array-field cms-array-readonly">
+            {rows.length
+              ? rows.map((row) => (
+                  <div className="cms-array-row cms-array-row-readonly" key={row.id}>
+                    <a href={`/admin/collections/${field.collection}/${row.id}`}>{String(row.label ?? row.id)}</a>
+                  </div>
+                ))
+              : <span className="cms-muted-value">—</span>}
+          </div>
+        </Field>
+      )
+    }
+
+    case 'group':
+      return (
+        <GroupField
+          field={field}
+          label={label}
+          hint={hint}
+          error={error}
+          disabled={shared.disabled}
+          value={typeof value === 'object' && value ? (value as Record<string, unknown>) : {}}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'json':
+      return (
+        <JsonField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          disabled={shared.disabled}
+          value={value ?? null}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'point':
+      return (
+        <PointField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          disabled={shared.disabled}
+          value={value && typeof value === 'object' ? (value as { lat: number; lng: number }) : { lat: 0, lng: 0 }}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'file':
+      return (
+        <FileField
+          label={label}
+          hint={hint}
+          error={error}
+          required={field.required}
+          disabled={shared.disabled}
+          accept={field.accept}
+          value={typeof value === 'string' ? value : ''}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'richtext': {
+      const doc = isRichTextDocument(value) ? value : emptyRichText
+      if (shared.disabled) {
+        return (
+          <Field label={label} required={field.required} hint={hint} error={error}>
+            <div className="cms-richtext-readonly">{richTextToText(doc, 400) || '—'}</div>
+          </Field>
+        )
+      }
+      return (
+        <RichTextEditor
+          label={label}
+          hint={hint}
+          required={field.required}
+          error={error}
+          value={doc}
+          onChange={(next) => onChange(next)}
+        />
+      )
+    }
+
+    case 'image': {
+      const url = typeof value === 'string' ? value : ''
+      return (
+        <Field label={label} required={field.required} hint={hint} error={error}>
+          <div className="cms-dynamic-image">
+            <ImageUploader
+              value={url}
+              onChange={(next) => onChange(next || (field.nullable ? null : ''))}
+              aspect={field.aspect}
+              allowRemove={!field.required && !shared.disabled}
+            />
+            {field.allowUrlInput && (
+              <span className="cms-input-shell">
+                <input
+                  aria-label={`${label} URL`}
+                  disabled={shared.disabled}
+                  placeholder="https://..."
+                  value={url}
+                  onChange={(event) => onChange(event.target.value || (field.nullable ? null : ''))}
+                />
+              </span>
+            )}
+          </div>
+        </Field>
+      )
+    }
+
+    case 'tags':
+      if (shared.disabled) {
+        return (
+          <Field label={label} required={field.required} hint={hint} error={error}>
+            <div className="cms-tags cms-tags-readonly">
+              {Array.isArray(value) && value.length ? value.map((tag) => <span className="cms-tag" key={String(tag)}>{String(tag)}</span>) : <span className="cms-muted-value">—</span>}
+            </div>
+          </Field>
+        )
+      }
+      return (
+        <TagsField
+          label={label}
+          required={field.required}
+          hint={hint}
+          error={error}
+          value={Array.isArray(value) ? (value as string[]) : []}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'multiselect': {
+      const picked = Array.isArray(value) ? (value as string[]) : []
+      if (shared.disabled) {
+        return (
+          <Field label={label} required={field.required} hint={hint} error={error}>
+            <div className="cms-tags cms-tags-readonly">
+              {picked.length
+                ? picked.map((item) => <span className="cms-tag" key={item}>{field.options.find((option) => option.value === item)?.label ?? item}</span>)
+                : <span className="cms-muted-value">—</span>}
+            </div>
+          </Field>
+        )
+      }
+      return (
+        <CheckboxGroupField
+          label={label}
+          required={field.required}
+          hint={hint}
+          error={error}
+          value={picked}
+          onChange={(next) => onChange(next)}
+          options={field.options}
+        />
+      )
+    }
+
+    case 'array':
+      return (
+        <ArrayField
+          field={field}
+          label={label}
+          hint={hint}
+          error={error}
+          disabled={shared.disabled}
+          value={Array.isArray(value) ? (value as Record<string, unknown>[]) : []}
+          onChange={(next) => onChange(next)}
+        />
+      )
+
+    case 'blocks':
+      return (
+        <BlocksField
+          field={field}
+          label={label}
+          hint={hint}
+          error={error}
+          disabled={shared.disabled}
+          value={Array.isArray(value) ? (value as Record<string, unknown>[]) : []}
+          onChange={(next) => onChange(next)}
+        />
+      )
+  }
+}
+
+/** Keeps an unknown stored value visible instead of silently blanking the select. */
+function withCurrentValue(options: SelectOption[], value: unknown): SelectOption[] {
+  return typeof value === 'string' && value && !options.some((option) => option.value === value)
+    ? [...options, { value, label: value }]
+    : options
+}
+
+function isRichTextDocument(value: unknown): value is RichTextDocument {
+  return typeof value === 'object' && value !== null && (value as { type?: unknown }).type === 'doc'
+}
+
+/** Autocomplete + inline create over another collection's titleField, storing the plain label.
+ *  Reuses CategoryField verbatim; only the data plumbing is generic. */
+function SuggestionTextField({ label, hint, error, required, value, onChange, source }: {
+  label: string
+  hint?: string
+  error?: string
+  required?: boolean
+  value: string
+  onChange: (value: string) => void
+  source: { collection: string; createLabel?: string }
+}) {
+  const [options, setOptions] = useState<Array<{ id: string; name: string; slug: string }>>([])
+
+  useEffect(() => {
+    let cancelled = false
+    fetch(`/api/admin/collections/${source.collection}/options`)
+      .then((response) => (response.ok ? response.json() : []))
+      .then((data: SelectOption[]) => { if (!cancelled) setOptions(data.map((option) => ({ id: option.value, name: option.label, slug: option.value }))) })
+      .catch(() => {})
+    return () => { cancelled = true }
+  }, [source.collection])
+
+  const create = useCallback(async (name: string) => {
+    try {
+      const response = await fetch(`/api/admin/collections/${source.collection}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      })
+      const data = await response.json()
+      if (!response.ok) return null
+      const created = { id: String(data.id), name: String(data.name ?? name), slug: String(data.slug ?? '') }
+      setOptions((items) => [...items, created].sort((a, b) => a.name.localeCompare(b.name)))
+      return created
+    } catch { return null }
+  }, [source.collection])
+
+  return <CategoryField label={label} hint={hint} error={error} required={required} value={value} options={options} onChange={onChange} onCreate={create} />
+}

package/src/admin/EditorHeader.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+import Link from 'next/link'
+
+export function EditorHeader({ title, backHref, backLabel, actions, meta, compact }: { title: string; backHref?: string; backLabel?: string; actions?: ReactNode; meta?: ReactNode; compact?: boolean }) {
+  return <header className={`cms-header cms-editor-header ${compact ? 'cms-header-compact' : ''}`}>
+    <div>
+      {backHref && <Link className="cms-back-link" href={backHref}>← {backLabel ?? 'Back'}</Link>}
+      <h1>{title}</h1>
+      {meta && <p className="cms-header-count">{meta}</p>}
+    </div>
+    {actions && <div className="cms-header-actions">{actions}</div>}
+  </header>
+}

package/src/admin/EditorSkeleton.tsx

@@ -0,0 +1,27 @@
+const fieldWidths = ['85%', '60%', '95%', '40%']
+
+export function EditorSkeleton({ sections = 2 }: { sections?: number }) {
+  return <div className="cms-editor-layout" aria-busy="true" aria-label="Loading editor">
+    <div className="cms-editor-form">{Array.from({ length: sections }).map((_, section) => <section className="cms-section" key={section}>
+      <div className="cms-skeleton-line" style={{ width: '30%', height: 11 }} />
+      {fieldWidths.map((width, field) => <div className="cms-skeleton-line" key={field} style={{ width }} />)}
+    </section>)}</div>
+    <aside className="cms-editor-sidebar">
+      <div className="cms-skeleton-line" style={{ width: '35%', height: 11 }} />
+      <div className="cms-skeleton-line" style={{ width: '100%', height: 38 }} />
+      <div className="cms-skeleton-line" style={{ width: '100%', height: 38 }} />
+      <div className="cms-skeleton-line" style={{ width: '70%', height: 11 }} />
+    </aside>
+  </div>
+}
+
+export function CardListSkeleton({ rows = 5 }: { rows?: number }) {
+  return <div className="cms-skeleton-list" aria-busy="true" aria-label="Loading list">
+    {Array.from({ length: rows }).map((_, index) => <div className="cms-skeleton-list-row" key={index}>
+      <div className="cms-skeleton-line" style={{ width: '18%', height: 11 }} />
+      <div className="cms-skeleton-line" style={{ width: '34%', height: 16 }} />
+      <div className="cms-skeleton-line" style={{ width: '22%', height: 11 }} />
+      <div className="cms-skeleton-line" style={{ width: '15%', height: 11 }} />
+    </div>)}
+  </div>
+}

package/src/admin/EmailSettingsEditor.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { EditorHeader } from './EditorHeader'
+import { EditorSkeleton } from './EditorSkeleton'
+import { TextField, ToggleField } from './Field'
+import { CmsSidebar } from './CmsSidebar'
+import { useToast } from './Toast'
+import { Button } from './Button'
+
+type EmailSettings = { host: string; port: number; secure: boolean; username: string; fromAddress: string; fromName: string; configured: boolean; hasPassword: boolean }
+const empty = (): EmailSettings => ({ host: '', port: 587, secure: true, username: '', fromAddress: '', fromName: '', configured: false, hasPassword: false })
+
+export function EmailSettingsEditor({ userName }: { userName: string }) {
+  const toast = useToast()
+  const [settings, setSettings] = useState<EmailSettings>(empty)
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [testTo, setTestTo] = useState('')
+  const [testStatus, setTestStatus] = useState('')
+  const [testing, setTesting] = useState(false)
+
+  useEffect(() => { fetch('/api/admin/email-settings').then((response) => response.ok ? response.json() : empty()).then(setSettings).finally(() => setLoading(false)) }, [])
+
+  function update<K extends keyof EmailSettings>(key: K, value: EmailSettings[K]) { setSettings((current) => ({ ...current, [key]: value })) }
+
+  async function save() {
+    setSaving(true)
+    try {
+      const response = await fetch('/api/admin/email-settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ host: settings.host, port: settings.port, secure: settings.secure, username: settings.username, password: password || undefined, fromAddress: settings.fromAddress, fromName: settings.fromName }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      setSettings(data)
+      setPassword('')
+      toast.success('Email settings saved.')
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not save email settings') } finally { setSaving(false) }
+  }
+
+  async function sendTest() {
+    if (!testTo.trim()) { setTestStatus('Enter an address to send the test to.'); return }
+    setTesting(true)
+    setTestStatus('Sending…')
+    try {
+      const response = await fetch('/api/admin/email-settings/test', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ to: testTo }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      setTestStatus('Test email sent — check the inbox.')
+    } catch (error) { setTestStatus(error instanceof Error ? error.message : 'Could not send test email') } finally { setTesting(false) }
+  }
+
+  return <main className="cms-dashboard"><CmsSidebar active="settings" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="Email" backHref="/admin/dashboard" backLabel="Dashboard" />
+    {loading ? <EditorSkeleton sections={2} /> : <div className="cms-editor-layout"><div className="cms-editor-form">
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">SMTP</p><p>Used to send transactional email from the CMS. The password is encrypted at rest and never shown again.</p></div>
+        <TextField label="SMTP host" value={settings.host} onChange={(event) => update('host', event.target.value)} placeholder="smtp.example.com" />
+        <div className="cms-two-columns">
+          <TextField label="Port" type="number" value={settings.port} onChange={(event) => update('port', Number(event.target.value) || 587)} />
+          <ToggleField label="Use TLS" checked={settings.secure} onChange={(checked) => update('secure', checked)} />
+        </div>
+        <TextField label="Username" value={settings.username} onChange={(event) => update('username', event.target.value)} />
+        <TextField label="Password" type="password" autoComplete="new-password" value={password} onChange={(event) => setPassword(event.target.value)} placeholder={settings.hasPassword ? 'Paste a new password to replace' : 'Paste SMTP password'} />
+        <div className="cms-two-columns">
+          <TextField label="From address" type="email" value={settings.fromAddress} onChange={(event) => update('fromAddress', event.target.value)} placeholder="noreply@example.com" />
+          <TextField label="From name" value={settings.fromName} onChange={(event) => update('fromName', event.target.value)} placeholder="Kilo CMS" />
+        </div>
+        <p className="cms-ai-status">{settings.configured ? 'Email is configured.' : 'Not configured yet — fill in host, port, and from address, then save.'}</p>
+      </section>
+      {settings.configured && <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">Test</p><p>Send a test email to confirm the configuration works.</p></div>
+        <div className="cms-two-columns">
+          <TextField label="Send test to" type="email" value={testTo} onChange={(event) => setTestTo(event.target.value)} placeholder="you@example.com" />
+        </div>
+        <Button variant="secondary" type="button" disabled={testing} onClick={() => void sendTest()}>{testing ? 'Sending…' : 'Send test email'}</Button>
+        {testStatus && <p className="cms-ai-status">{testStatus}</p>}
+      </section>}
+    </div><aside className="cms-editor-sidebar"><Button variant="primary" type="button" disabled={saving} onClick={() => void save()} icon="↗">{saving ? 'Saving…' : 'Save email settings'}</Button></aside></div>}
+  </section></main>
+}