kilo-cms 0.1.0

package/src/admin/ListingView.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState, type ReactNode, type Ref } from 'react'
+import { useLocalStorageState } from '../useLocalStorageState'
+import { ListingSettingsModal } from './ListingSettingsModal'
+import { ActionIcon, type ActionIconName } from './RowActionsMenu'
+import { CloseButton } from './CloseButton'
+import { Button } from './Button'
+
+export type ListingViewHandle = { openSettings: () => void }
+
+export type Column<T> = { key: string; label: string; render: (item: T) => ReactNode; defaultHidden?: boolean }
+export type Card = { image?: string | null; title: ReactNode; meta: ReactNode; published: boolean; badge?: ReactNode }
+export type BulkAction<T> = { key: string; label: string; icon?: ActionIconName; danger?: boolean; onRun: (items: T[]) => void }
+
+type ViewPrefs = { view: 'table' | 'grid'; density: 'compact' | 'comfortable' | 'spacious'; hidden: string[]; order: string[]; labels: Record<string, string> }
+const defaultPrefs: ViewPrefs = { view: 'table', density: 'comfortable', hidden: [], order: [], labels: {} }
+const pageSizes = [10, 25, 50]
+
+type ListingViewProps<T> = {
+  items: T[]
+  total: number
+  loading?: boolean
+  getId: (item: T) => string
+  columns: Column<T>[]
+  card: (item: T) => Card
+  renderActions?: (item: T) => ReactNode
+  storageKey: string
+  columnLabels?: Record<string, string | undefined>
+  emptyLabel?: string
+  sortBy?: string
+  sortDir?: 'asc' | 'desc'
+  onSortChange?: (by: string, dir: 'asc' | 'desc') => void
+  page: number
+  pageSize: number | 'all'
+  onPageChange: (page: number) => void
+  onPageSizeChange: (size: number | 'all') => void
+  bulkActions?: BulkAction<T>[]
+  reorderable?: boolean
+  onMove?: (id: string, direction: 'up' | 'down') => void
+  resetSelectionKey?: string | number
+}
+
+function ListingViewInner<T>({ items, total, loading, getId, columns, card, renderActions, storageKey, columnLabels, emptyLabel = 'Nothing here yet.', sortBy, sortDir = 'asc', onSortChange, page, pageSize, onPageChange, onPageSizeChange, bulkActions, reorderable, onMove, resetSelectionKey }: ListingViewProps<T>, ref: Ref<ListingViewHandle>) {
+  const [prefs, setPrefs] = useLocalStorageState<ViewPrefs>(`cms-listing:${storageKey}`, { ...defaultPrefs, hidden: columns.filter((column) => column.defaultHidden).map((column) => column.key) })
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  useEffect(() => { setSelected(new Set()) }, [resetSelectionKey])
+  useImperativeHandle(ref, () => ({ openSettings: () => setSettingsOpen(true) }), [])
+
+  const allOrdered = useMemo(() => {
+    const byKey = new Map(columns.map((column) => [column.key, column]))
+    const orderKeys = prefs.order.length ? prefs.order.filter((key) => byKey.has(key)) : columns.map((column) => column.key)
+    const missing = columns.map((column) => column.key).filter((key) => !orderKeys.includes(key))
+    return [...orderKeys, ...missing].map((key) => byKey.get(key)!)
+  }, [columns, prefs.order])
+  const orderedColumns = useMemo(() => allOrdered.filter((column) => !prefs.hidden.includes(column.key)), [allOrdered, prefs.hidden])
+
+  function labelFor(column: Column<T>) { return columnLabels?.[column.key] || prefs.labels[column.key] || column.label }
+  function toggleColumn(key: string) { setPrefs({ ...prefs, hidden: prefs.hidden.includes(key) ? prefs.hidden.filter((item) => item !== key) : [...prefs.hidden, key] }) }
+  function reorderColumns(keys: string[]) { setPrefs({ ...prefs, order: keys }) }
+  function renameColumn(key: string, label: string) { setPrefs({ ...prefs, labels: { ...prefs.labels, [key]: label } }) }
+
+  function toggleSelect(id: string) { setSelected((current) => { const next = new Set(current); if (next.has(id)) next.delete(id); else next.add(id); return next }) }
+  function toggleSelectAll() { setSelected((current) => current.size === items.length ? new Set() : new Set(items.map(getId))) }
+  function runBulk(action: BulkAction<T>) { action.onRun(items.filter((item) => selected.has(getId(item)))); setSelected(new Set()) }
+
+  const pageCount = pageSize === 'all' ? 1 : Math.max(1, Math.ceil(total / pageSize))
+
+  return <>
+    {settingsOpen && <ListingSettingsModal
+      onClose={() => setSettingsOpen(false)}
+      view={prefs.view}
+      onViewChange={(view) => setPrefs({ ...prefs, view })}
+      density={prefs.density}
+      onDensityChange={(density) => setPrefs({ ...prefs, density })}
+      columns={allOrdered}
+      hidden={prefs.hidden}
+      labels={prefs.labels}
+      onToggleColumn={toggleColumn}
+      onReorderColumns={reorderColumns}
+      onRenameColumn={renameColumn}
+    />}
+
+    {selected.size > 0 && bulkActions && <div className="cms-bulk-bar">
+      <span className="cms-bulk-count"><b>{selected.size}</b> selected</span>
+      <div className="cms-bulk-actions">{bulkActions.map((action) => <Button key={action.key} variant={action.danger ? 'negative' : 'secondary'} compact type="button" onClick={() => runBulk(action)} icon={action.icon ? <ActionIcon name={action.icon} /> : undefined} iconPosition="before">{action.label}</Button>)}</div>
+      <CloseButton onClick={() => setSelected(new Set())} label="Clear selection" />
+    </div>}
+
+    {loading
+      ? <ListingSkeleton view={prefs.view} columnCount={orderedColumns.length + (bulkActions ? 1 : 0) + (reorderable ? 1 : 0) + 1} />
+      : prefs.view === 'table'
+        ? <div className={`cms-table-wrap density-${prefs.density}`}><table className="cms-table"><thead><tr>
+            {bulkActions && <th><input type="checkbox" checked={items.length > 0 && selected.size === items.length} onChange={toggleSelectAll} /></th>}
+            {reorderable && <th />}
+            {orderedColumns.map((column) => <th key={column.key}>{onSortChange ? <Button variant="ghost" compact type="button" className={`cms-sort-button ${sortBy === column.key ? 'active' : ''}`} onClick={() => onSortChange(column.key, sortBy === column.key && sortDir === 'asc' ? 'desc' : 'asc')}>{labelFor(column)}{sortBy === column.key ? (sortDir === 'asc' ? ' ↑' : ' ↓') : ''}</Button> : labelFor(column)}</th>)}
+            <th />
+          </tr></thead><tbody>{items.map((item, index) => { const id = getId(item); return <tr key={id}>
+            {bulkActions && <td><input type="checkbox" checked={selected.has(id)} onChange={() => toggleSelect(id)} /></td>}
+            {reorderable && <td className="cms-reorder-cell"><Button variant="secondary" compact type="button" disabled={index === 0} onClick={() => onMove?.(id, 'up')} aria-label="Move up">↑</Button><Button variant="secondary" compact type="button" disabled={index === items.length - 1} onClick={() => onMove?.(id, 'down')} aria-label="Move down">↓</Button></td>}
+            {orderedColumns.map((column) => <td key={column.key}>{column.render(item)}</td>)}
+            <td>{renderActions?.(item)}</td>
+          </tr> })}</tbody></table>{!items.length && <p className="cms-empty-state">{emptyLabel}</p>}</div>
+        : <div className={`cms-item-grid density-${prefs.density}`}>{items.map((item) => { const id = getId(item); const { image, title, meta, published, badge } = card(item); return <article className={`cms-list-card ${selected.has(id) ? 'is-selected' : ''}`} key={id}>
+            {bulkActions && <label className="cms-card-select"><input type="checkbox" checked={selected.has(id)} onChange={() => toggleSelect(id)} /></label>}
+            {image && <img src={image} alt="" />}
+            <div>{badge ?? <span className={`cms-status ${published ? 'is-published' : ''}`}>{published ? 'Published' : 'Draft'}</span>}<h2>{title}</h2><p>{meta}</p>{renderActions?.(item)}</div>
+          </article> })}{!items.length && <p className="cms-empty-state">{emptyLabel}</p>}</div>}
+
+    <div className="cms-pagination">
+      <select value={pageSize} onChange={(event) => onPageSizeChange(event.target.value === 'all' ? 'all' : Number(event.target.value))}>{pageSizes.map((size) => <option key={size} value={size}>{size} / page</option>)}<option value="all">All</option></select>
+      {pageSize !== 'all' && <div className="cms-pagination-nav"><Button variant="secondary" compact type="button" disabled={page <= 1} onClick={() => onPageChange(page - 1)}>← Prev</Button><span>Page {page} of {pageCount}</span><Button variant="secondary" compact type="button" disabled={page >= pageCount} onClick={() => onPageChange(page + 1)}>Next →</Button></div>}
+    </div>
+  </>
+}
+
+export const ListingView = forwardRef(ListingViewInner) as <T>(props: ListingViewProps<T> & { ref?: Ref<ListingViewHandle> }) => ReturnType<typeof ListingViewInner>
+
+export function ListingSkeleton({ view, columnCount }: { view: 'table' | 'grid'; columnCount: number }) {
+  if (view === 'grid') return <div className="cms-item-grid">{Array.from({ length: 6 }).map((_, index) => <div className="cms-skeleton-card" key={index} />)}</div>
+  return <div className="cms-table-wrap"><table className="cms-table"><tbody>{Array.from({ length: 6 }).map((_, row) => <tr key={row}>{Array.from({ length: columnCount }).map((_, cell) => <td key={cell}><div className="cms-skeleton-line" /></td>)}</tr>)}</tbody></table></div>
+}

package/src/admin/LocalesEditor.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { EditorHeader } from './EditorHeader'
+import { TextField } from './Field'
+import { CmsSidebar } from './CmsSidebar'
+import { useToast } from './Toast'
+import { ListingSkeleton } from './ListingView'
+import { Button } from './Button'
+
+type LocaleRow = { code: string; label: string; isDefault: boolean; sortOrder: number }
+
+export function LocalesEditor({ userName }: { userName: string }) {
+  const toast = useToast()
+  const [rows, setRows] = useState<LocaleRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [code, setCode] = useState('')
+  const [label, setLabel] = useState('')
+  const [creating, setCreating] = useState(false)
+
+  function load() { setLoading(true); fetch('/api/admin/locales').then((response) => response.ok ? response.json() : []).then(setRows).finally(() => setLoading(false)) }
+  useEffect(() => { load() }, [])
+
+  async function create() {
+    if (!code.trim() || !label.trim()) { toast.error('Give the locale both a code and a label.'); return }
+    setCreating(true)
+    try {
+      const response = await fetch('/api/admin/locales', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: code.trim(), label: label.trim(), isDefault: rows.length === 0 }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      setCode(''); setLabel('')
+      toast.success(`Locale "${data.label}" added.`)
+      load()
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not add locale') } finally { setCreating(false) }
+  }
+
+  async function setDefault(row: LocaleRow) {
+    const response = await fetch(`/api/admin/locales/${row.code}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ label: row.label, isDefault: true }) })
+    if (response.ok) { toast.success(`"${row.label}" is now the default locale.`); load() } else toast.error('Could not set default locale.')
+  }
+
+  async function remove(row: LocaleRow) {
+    if (rows.length <= 1) { toast.error('At least one locale is required — add another before removing this one.'); return }
+    if (!confirm(`Remove locale "${row.label}"? Any values already stored under "${row.code}" on localized fields stay in the database but won’t be editable anymore.`)) return
+    const response = await fetch(`/api/admin/locales/${row.code}`, { method: 'DELETE' })
+    if (response.ok) { toast.success('Locale removed.'); load() } else toast.error('Could not remove locale.')
+  }
+
+  async function move(index: number, direction: 'up' | 'down') {
+    const swapWith = direction === 'up' ? index - 1 : index + 1
+    if (swapWith < 0 || swapWith >= rows.length) return
+    const next = [...rows]
+    ;[next[index], next[swapWith]] = [next[swapWith], next[index]]
+    setRows(next)
+    await fetch('/api/admin/locales/reorder', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ codes: next.map((row) => row.code) }) })
+  }
+
+  return <main className="cms-dashboard"><CmsSidebar active="settings" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="Locales" backHref="/admin/dashboard" backLabel="Dashboard" />
+    <div className="cms-editor-layout"><div className="cms-editor-form">
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">What this controls</p><p>The languages available on every <code>localized</code> field (a tab per locale). The DEFAULT locale is the one <code>required</code> is enforced against — other locales may stay untranslated.</p></div>
+        <div className="cms-two-columns">
+          <TextField label="Code" value={code} onChange={(event) => setCode(event.target.value)} placeholder="e.g. en, id, en-US" hint="Short code — this is the storage key, don't change it later without a data migration" />
+          <TextField label="Label" value={label} onChange={(event) => setLabel(event.target.value)} placeholder="e.g. English" />
+        </div>
+        <Button variant="positive" type="button" disabled={creating} onClick={() => void create()} icon="↗">{creating ? 'Adding…' : '+ Add locale'}</Button>
+      </section>
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">Locales</p></div>
+        {loading ? <ListingSkeleton view="table" columnCount={4} /> : <div className="cms-table-wrap"><table className="cms-table"><thead><tr><th>Code</th><th>Label</th><th>Default</th><th /></tr></thead><tbody>
+          {rows.map((row, index) => <tr key={row.code}>
+            <td><span className="cms-table-id">{row.code}</span></td>
+            <td><strong>{row.label}</strong></td>
+            <td>{row.isDefault ? <span className="cms-status is-published">Default</span> : <Button variant="ghost" compact type="button" onClick={() => void setDefault(row)}>Make default</Button>}</td>
+            <td className="cms-row-actions">
+              <Button variant="ghost" compact iconOnly type="button" disabled={index === 0} onClick={() => void move(index, 'up')} aria-label={`Move ${row.label} up`} icon="↑" />
+              <Button variant="ghost" compact iconOnly type="button" disabled={index === rows.length - 1} onClick={() => void move(index, 'down')} aria-label={`Move ${row.label} down`} icon="↓" />
+              <Button variant="negative" compact type="button" onClick={() => void remove(row)}>Remove</Button>
+            </td>
+          </tr>)}
+        </tbody></table>{!rows.length && <p className="cms-empty-state">No locales configured yet — add one above (falls back to Indonesian/English until then).</p>}</div>}
+      </section>
+    </div></div>
+  </section></main>
+}

package/src/admin/LocalizedField.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useState } from 'react'
+import { DynamicField } from './DynamicField'
+import { useCmsLocales } from './CmsLocalesProvider'
+import type { FieldConfig } from '../collections/types'
+
+/** Wraps any `localized: true` field — one tab per locale (sourced live from
+ *  `useCmsLocales()`, not a static list — see `CmsLocalesProvider`), delegating to
+ *  `DynamicField` for the ACTIVE locale's value only (not all locales stacked, to avoid
+ *  clutter). `field.localized` is forced false on the delegated call so `DynamicField` renders
+ *  the field's normal (non-map) control against that one locale's plain value. */
+export function LocalizedField({ field, value, onChange, label, hint, error, disabled }: {
+  field: FieldConfig
+  value: Record<string, unknown>
+  onChange: (value: Record<string, unknown>) => void
+  label: string
+  hint?: string
+  error?: string
+  disabled?: boolean
+}) {
+  const { codes, default: defaultLocale, labels } = useCmsLocales()
+  const [active, setActive] = useState(defaultLocale)
+  const innerField = { ...field, localized: false } as FieldConfig
+  const activeLocale = codes.includes(active) ? active : defaultLocale
+  return (
+    <div className="cms-localized-field">
+      <div className="cms-locale-tabs" role="tablist" aria-label={`${label} — language`}>
+        {codes.map((locale) => (
+          <button key={locale} type="button" role="tab" aria-selected={activeLocale === locale} className={activeLocale === locale ? 'active' : ''} onClick={() => setActive(locale)}>
+            {labels[locale] ?? locale}{locale === defaultLocale && <span className="cms-locale-default-mark" title="Default locale">*</span>}
+          </button>
+        ))}
+      </div>
+      <DynamicField
+        field={innerField}
+        value={value?.[activeLocale]}
+        onChange={(next) => onChange({ ...value, [activeLocale]: next })}
+        label={label}
+        hint={hint}
+        error={error}
+        disabled={disabled}
+      />
+    </div>
+  )
+}

package/src/admin/MapPicker.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useEffect } from 'react'
+import { MapContainer, Marker, TileLayer, useMapEvents } from 'react-leaflet'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet's default marker icon references image paths that don't survive Next.js's bundler —
+// a divIcon (inline SVG, no external asset) sidesteps that entirely rather than fighting webpack
+// asset resolution for a handful of PNGs.
+const markerIcon = L.divIcon({
+  className: 'cms-map-marker',
+  html: '<svg viewBox="0 0 24 24" width="28" height="28"><path fill="#c43b2d" stroke="#fff" stroke-width="1.5" d="M12 0C7 0 3 4 3 9c0 6.5 9 15 9 15s9-8.5 9-15c0-5-4-9-9-9z"/><circle cx="12" cy="9" r="3.2" fill="#fff"/></svg>',
+  iconSize: [28, 28],
+  iconAnchor: [14, 28],
+})
+
+function ClickToPlace({ onChange }: { onChange: (lat: number, lng: number) => void }) {
+  useMapEvents({ click(event) { onChange(event.latlng.lat, event.latlng.lng) } })
+  return null
+}
+
+/** Recenters the map when `lat`/`lng` change from OUTSIDE a click on the map itself (e.g. typing
+ *  into the number inputs next to it) — react-leaflet doesn't do this automatically since
+ *  MapContainer's `center` prop is only the INITIAL center, not a controlled prop. */
+function RecenterOnChange({ lat, lng }: { lat: number; lng: number }) {
+  const map = useMapEvents({})
+  useEffect(() => { map.setView([lat, lng], map.getZoom(), { animate: true }) }, [lat, lng, map])
+  return null
+}
+
+export default function MapPicker({ lat, lng, onChange, disabled }: {
+  lat: number
+  lng: number
+  onChange: (lat: number, lng: number) => void
+  disabled?: boolean
+}) {
+  const center: [number, number] = [
+    Number.isFinite(lat) && lat !== 0 ? lat : -6.2,
+    Number.isFinite(lng) && lng !== 0 ? lng : 106.8, // Jakarta — a reasonable default center, not a claim about the actual point
+  ]
+  return (
+    <div className="cms-map-picker">
+      <MapContainer center={center} zoom={lat || lng ? 12 : 4} scrollWheelZoom={false} style={{ height: 220, width: '100%', borderRadius: 8 }}>
+        <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        {!disabled && <ClickToPlace onChange={onChange} />}
+        <RecenterOnChange lat={center[0]} lng={center[1]} />
+        <Marker position={[lat, lng]} icon={markerIcon} />
+      </MapContainer>
+      {!disabled && <p className="cms-map-hint">Click the map to set the point, or type exact coordinates above.</p>}
+    </div>
+  )
+}