@setzkasten-cms/ui 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@setzkasten-cms/ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "React-basierte Admin-UI für Setzkasten CMS — Page Builder, Editor, Field Renderers",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -43,7 +43,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "zustand": "^5.0.0",
-    "@setzkasten-cms/core": "0.4.4"
+    "@setzkasten-cms/core": "0.4.6"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",

package/src/fields/array-field-renderer.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useState, useRef } from 'react'
 import type { ArrayFieldDef, AnyFieldDef } from '@setzkasten-cms/core'
 import { useField } from '../hooks/use-field'
 import { FieldRenderer, type FieldRendererProps } from './field-renderer'
@@ -10,8 +10,13 @@ export const ArrayFieldRenderer = memo(function ArrayFieldRenderer({
 }: FieldRendererProps) {
   const arrayField = field as ArrayFieldDef
   const { value, setValue } = useField(store, path)
+  const [collapsedItems, setCollapsedItems] = useState<Set<number>>(new Set())
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
+  const dragCounter = useRef(0)
 
   const items = (value as unknown[]) ?? []
+  const isGrid = arrayField.layout === 'grid'
 
   const addItem = useCallback(() => {
     const defaultValue = arrayField.itemField.defaultValue ?? (
@@ -33,6 +38,7 @@ export const ArrayFieldRenderer = memo(function ArrayFieldRenderer({
 
   const moveItem = useCallback(
     (from: number, to: number) => {
+      if (from === to) return
       const newItems = [...items]
       const [moved] = newItems.splice(from, 1)
       newItems.splice(to, 0, moved)
@@ -41,9 +47,65 @@ export const ArrayFieldRenderer = memo(function ArrayFieldRenderer({
     [items, setValue],
   )
 
+  const toggleCollapse = useCallback((index: number) => {
+    setCollapsedItems((prev) => {
+      const next = new Set(prev)
+      if (next.has(index)) next.delete(index)
+      else next.add(index)
+      return next
+    })
+  }, [])
+
+  // Drag & Drop handlers
+  const handleDragStart = useCallback((e: React.DragEvent, index: number) => {
+    setDragIndex(index)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(index))
+  }, [])
+
+  const handleDragEnter = useCallback((index: number) => {
+    dragCounter.current++
+    setDragOverIndex(index)
+  }, [])
+
+  const handleDragLeave = useCallback(() => {
+    dragCounter.current--
+    if (dragCounter.current === 0) {
+      setDragOverIndex(null)
+    }
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, toIndex: number) => {
+      e.preventDefault()
+      dragCounter.current = 0
+      if (dragIndex !== null) {
+        moveItem(dragIndex, toIndex)
+      }
+      setDragIndex(null)
+      setDragOverIndex(null)
+    },
+    [dragIndex, moveItem],
+  )
+
+  const handleDragEnd = useCallback(() => {
+    dragCounter.current = 0
+    setDragIndex(null)
+    setDragOverIndex(null)
+  }, [])
+
   const canAdd = arrayField.maxItems === undefined || items.length < arrayField.maxItems
   const canRemove = arrayField.minItems === undefined || items.length > arrayField.minItems
 
+  const gridStyle = isGrid
+    ? { gridTemplateColumns: `repeat(${arrayField.gridColumns}, 1fr)` } as React.CSSProperties
+    : undefined
+
   return (
     <div className="sk-field sk-field--array">
       <div className="sk-array__header">
@@ -53,27 +115,50 @@ export const ArrayFieldRenderer = memo(function ArrayFieldRenderer({
         </label>
       </div>
 
-      <div className="sk-array__items">
+      <div
+        className={`sk-array__items ${isGrid ? 'sk-array__items--grid' : ''}`}
+        style={gridStyle}
+      >
         {items.map((_, index) => {
           const itemLabel = arrayField.itemLabel
             ? arrayField.itemLabel(items[index], index)
             : `#${index + 1}`
 
+          const isCollapsed = arrayField.collapsible && collapsedItems.has(index)
+          const isDragging = dragIndex === index
+          const isDragOver = dragOverIndex === index && dragIndex !== index
+
           return (
-            <div key={index} className="sk-array__item">
+            <div
+              key={index}
+              className={`sk-array__item ${isDragging ? 'sk-array__item--dragging' : ''} ${isDragOver ? 'sk-array__item--dragover' : ''}`}
+              draggable
+              onDragStart={(e) => handleDragStart(e, index)}
+              onDragEnter={() => handleDragEnter(index)}
+              onDragLeave={handleDragLeave}
+              onDragOver={handleDragOver}
+              onDrop={(e) => handleDrop(e, index)}
+              onDragEnd={handleDragEnd}
+            >
               <div className="sk-array__item-header">
+                <span className="sk-array__item-drag" title="Ziehen zum Sortieren">⠿</span>
                 <span className="sk-array__item-label">{itemLabel}</span>
                 <div className="sk-array__item-actions">
-                  {index > 0 && (
+                  {!isGrid && index > 0 && (
                     <button type="button" className="sk-button sk-button--sm" onClick={() => moveItem(index, index - 1)} title="Nach oben">
                       ↑
                     </button>
                   )}
-                  {index < items.length - 1 && (
+                  {!isGrid && index < items.length - 1 && (
                     <button type="button" className="sk-button sk-button--sm" onClick={() => moveItem(index, index + 1)} title="Nach unten">
                       ↓
                     </button>
                   )}
+                  {arrayField.collapsible && (
+                    <button type="button" className="sk-button sk-button--sm" onClick={() => toggleCollapse(index)} title={isCollapsed ? 'Aufklappen' : 'Zuklappen'}>
+                      {isCollapsed ? '▸' : '▾'}
+                    </button>
+                  )}
                   {canRemove && (
                     <button type="button" className="sk-button sk-button--sm sk-button--danger" onClick={() => removeItem(index)} title="Entfernen">
                       ×
@@ -81,11 +166,13 @@ export const ArrayFieldRenderer = memo(function ArrayFieldRenderer({
                   )}
                 </div>
               </div>
-              <FieldRenderer
-                field={arrayField.itemField as AnyFieldDef}
-                path={[...path, index]}
-                store={store}
-              />
+              {!isCollapsed && (
+                <FieldRenderer
+                  field={arrayField.itemField as AnyFieldDef}
+                  path={[...path, index]}
+                  store={store}
+                />
+              )}
             </div>
           )
         })}

package/src/fields/color-field-renderer.tsx

@@ -0,0 +1,116 @@
+import { memo, useState, useCallback, useRef, useEffect } from 'react'
+import type { ColorFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import type { FieldRendererProps } from './field-renderer'
+
+export const ColorFieldRenderer = memo(function ColorFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const colorField = field as ColorFieldDef
+  const { value, errors, setValue, touch } = useField(store, path)
+  const [showPicker, setShowPicker] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const currentColor = (value as string) || '#000000'
+
+  // Close picker on outside click
+  useEffect(() => {
+    if (!showPicker) return
+    const handleClick = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowPicker(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [showPicker])
+
+  const handleColorInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value)
+    },
+    [setValue],
+  )
+
+  const handleHexInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let hex = e.target.value
+      if (!hex.startsWith('#')) hex = '#' + hex
+      if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
+        setValue(hex)
+      }
+    },
+    [setValue],
+  )
+
+  const handlePresetClick = useCallback(
+    (preset: string) => {
+      setValue(preset)
+    },
+    [setValue],
+  )
+
+  return (
+    <div className="sk-field sk-field--color" ref={containerRef}>
+      <label className="sk-field__label">{colorField.label}</label>
+      {colorField.description && <p className="sk-field__description">{colorField.description}</p>}
+
+      <div className="sk-color__row">
+        <button
+          type="button"
+          className="sk-color__swatch"
+          style={{ backgroundColor: currentColor }}
+          onClick={() => setShowPicker(!showPicker)}
+          aria-label="Farbe wählen"
+        />
+        <input
+          className="sk-field__input sk-color__hex"
+          type="text"
+          value={currentColor}
+          onChange={handleHexInput}
+          onBlur={touch}
+          placeholder="#000000"
+          maxLength={7}
+          aria-label={colorField.label}
+        />
+      </div>
+
+      {showPicker && (
+        <div className="sk-color__picker">
+          <input
+            type="color"
+            className="sk-color__native"
+            value={currentColor}
+            onChange={handleColorInput}
+          />
+        </div>
+      )}
+
+      {colorField.presets.length > 0 && (
+        <div className="sk-color__presets">
+          {colorField.presets.map((preset) => (
+            <button
+              key={preset}
+              type="button"
+              className={`sk-color__preset ${preset === currentColor ? 'sk-color__preset--active' : ''}`}
+              style={{ backgroundColor: preset }}
+              onClick={() => handlePresetClick(preset)}
+              title={preset}
+              aria-label={`Farbe ${preset}`}
+            />
+          ))}
+        </div>
+      )}
+
+      {errors.length > 0 && (
+        <div className="sk-field__errors">
+          {errors.map((err, i) => (
+            <p key={i} className="sk-field__error">{err}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})

package/src/fields/date-field-renderer.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react'
+import type { DateFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import type { FieldRendererProps } from './field-renderer'
+
+export const DateFieldRenderer = memo(function DateFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const dateField = field as DateFieldDef
+  const { value, errors, setValue, touch } = useField(store, path)
+
+  const inputType = dateField.includeTime ? 'datetime-local' : 'date'
+
+  return (
+    <div className="sk-field sk-field--date">
+      <label className="sk-field__label">{dateField.label}</label>
+      {dateField.description && <p className="sk-field__description">{dateField.description}</p>}
+      <input
+        className="sk-field__input"
+        type={inputType}
+        value={(value as string) ?? ''}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={touch}
+        min={dateField.min}
+        max={dateField.max}
+        aria-label={dateField.label}
+      />
+      {errors.length > 0 && (
+        <div className="sk-field__errors">
+          {errors.map((err, i) => (
+            <p key={i} className="sk-field__error">{err}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})

package/src/fields/field-renderer.tsx

@@ -8,6 +8,8 @@ import { IconFieldRenderer } from './icon-field-renderer'
 import { ArrayFieldRenderer } from './array-field-renderer'
 import { ObjectFieldRenderer } from './object-field-renderer'
 import { ImageFieldRenderer } from './image-field-renderer'
+import { DateFieldRenderer } from './date-field-renderer'
+import { ColorFieldRenderer } from './color-field-renderer'
 import { OverrideFieldRenderer } from './override-field-renderer'
 import type { createFormStore } from '../stores/form-store'
 
@@ -34,6 +36,8 @@ const rendererMap: Partial<Record<FieldType, ComponentType<FieldRendererProps>>>
   array: ArrayFieldRenderer,
   object: ObjectFieldRenderer,
   image: ImageFieldRenderer,
+  date: DateFieldRenderer,
+  color: ColorFieldRenderer,
   override: OverrideFieldRenderer,
 }
 

package/src/styles/admin.css

@@ -791,11 +791,31 @@
   gap: 8px;
 }
 
+.sk-array__items--grid {
+  display: grid;
+  gap: 12px;
+}
+
 .sk-array__item {
   background: var(--sk-surface);
   border: 1px solid var(--sk-border);
   border-radius: 8px;
   padding: 12px;
+  cursor: grab;
+  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.sk-array__item:active {
+  cursor: grabbing;
+}
+
+.sk-array__item--dragging {
+  opacity: 0.4;
+}
+
+.sk-array__item--dragover {
+  border-color: var(--sk-accent);
+  box-shadow: 0 0 0 2px var(--sk-accent-soft);
 }
 
 .sk-array__item-header {
@@ -805,17 +825,38 @@
   margin-bottom: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--sk-border);
+  gap: 8px;
+}
+
+.sk-array__item-drag {
+  cursor: grab;
+  color: var(--sk-slate);
+  font-size: 14px;
+  user-select: none;
+  line-height: 1;
+  opacity: 0.5;
+  transition: opacity 0.15s;
+}
+
+.sk-array__item-drag:hover {
+  opacity: 1;
 }
 
 .sk-array__item-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--sk-slate);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sk-array__item-actions {
   display: flex;
   gap: 4px;
+  flex-shrink: 0;
 }
 
 .sk-array__add {
@@ -831,6 +872,93 @@
   border-color: var(--sk-accent);
 }
 
+/* ---------------------------------------------------------------------------
+   Date Field
+   --------------------------------------------------------------------------- */
+
+.sk-field--date .sk-field__input {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  color-scheme: light;
+}
+
+/* ---------------------------------------------------------------------------
+   Color Field
+   --------------------------------------------------------------------------- */
+
+.sk-color__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sk-color__swatch {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: 2px solid var(--sk-border);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.15s;
+}
+
+.sk-color__swatch:hover {
+  border-color: var(--sk-accent);
+}
+
+.sk-color__hex {
+  flex: 1;
+  font-family: 'DM Mono', monospace;
+  text-transform: uppercase;
+}
+
+.sk-color__picker {
+  margin-top: 8px;
+}
+
+.sk-color__native {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 0;
+  background: none;
+}
+
+.sk-color__native::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.sk-color__native::-webkit-color-swatch {
+  border: 1px solid var(--sk-border);
+  border-radius: 8px;
+}
+
+.sk-color__presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.sk-color__preset {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 2px solid var(--sk-border);
+  cursor: pointer;
+  transition: border-color 0.15s, transform 0.1s;
+}
+
+.sk-color__preset:hover {
+  transform: scale(1.15);
+}
+
+.sk-color__preset--active {
+  border-color: var(--sk-accent);
+  box-shadow: 0 0 0 2px var(--sk-accent-soft);
+}
+
 /* ---------------------------------------------------------------------------
    Object Field
    --------------------------------------------------------------------------- */