@dyrected/admin 1.0.1

package/src/components/forms/fields/block-builder.tsx

@@ -0,0 +1,213 @@
+import { useState } from "react"
+import { useFieldArray } from "react-hook-form"
+import { FormFieldRenderer } from "../form-field-renderer"
+import { buildDefaultValues } from "../utils"
+import type { FieldSchema, BlockSchema } from "../form-engine"
+import { Button } from "../../ui/button"
+import { X, GripVertical, ChevronDown, ChevronUp } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu"
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core"
+import type { DragEndEvent } from "@dnd-kit/core"
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+
+interface BlockBuilderProps {
+  schema: FieldSchema
+  basePath: string
+  control: any
+  collection: string
+}
+
+function SortableBlockItem({
+  id,
+  index,
+  item,
+  schema,
+  basePath,
+  control,
+  collection,
+  remove
+}: {
+  id: string;
+  index: number;
+  item: any;
+  schema: FieldSchema;
+  basePath: string;
+  control: any;
+  collection: string;
+  remove: (index: number) => void
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id })
+
+  const [isExpanded, setIsExpanded] = useState(true)
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : 1,
+    opacity: isDragging ? 0.8 : 1,
+  }
+
+  const blockConfig = schema.blocks?.find(b => b.slug === item.blockType)
+
+  if (!blockConfig) return null
+
+  return (
+    <div ref={setNodeRef} style={style} className="relative group left-accent mb-4 py-4 animate-in">
+      {/* Header / Drag Handle */}
+      <div className="flex items-center justify-between pb-3">
+        <div className="flex items-center justify-between gap-2">
+          <div {...attributes} {...listeners} className="cursor-grab opacity-20 group-hover:opacity-100 hover:bg-muted p-1 rounded-md transition-all">
+            <GripVertical className="w-3.5 h-3.5 text-muted-foreground" />
+          </div>
+          <span className="font-bold text-xs text-foreground/70 tracking-tight">
+            {blockConfig.labels?.singular || blockConfig.slug}
+          </span>
+          <span className="text-[10px] text-muted-foreground/40 ml-2 uppercase tracking-widest font-semibold">
+            Item {index + 1}
+          </span>
+        </div>
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground/40" onClick={() => setIsExpanded(!isExpanded)}>
+            {isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
+          </Button>
+          <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground/30 hover:text-destructive hover:bg-destructive/10" onClick={() => remove(index)}>
+            <X className="w-3.5 h-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="space-y-6">
+          {blockConfig.fields.map(subField => (
+            <FormFieldRenderer
+              key={subField.name}
+              schema={subField}
+              basePath={`${basePath}.${index}`}
+              control={control}
+              collection={collection}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function BlockBuilder({ schema, basePath, control, collection }: BlockBuilderProps) {
+  const { fields, append, remove, move } = useFieldArray({ control, name: basePath })
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+
+    if (over && active.id !== over.id) {
+      const oldIndex = fields.findIndex((f) => f.id === active.id)
+      const newIndex = fields.findIndex((f) => f.id === over.id)
+      move(oldIndex, newIndex)
+    }
+  }
+
+  const handleAddBlock = (block: BlockSchema) => {
+    const defaultVals = buildDefaultValues(block.fields, {})
+    append({
+      blockType: block.slug,
+      ...defaultVals
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center pb-2">
+        <div>
+          <h4 className="font-bold text-sm text-foreground tracking-tight">{schema.label}</h4>
+          {schema.admin?.description && (
+            <p className="text-[11px] text-muted-foreground/60 italic">{schema.admin.description}</p>
+          )}
+        </div>
+
+        {schema.blocks && schema.blocks.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button type="button" variant="outline" size="sm" className="h-7 text-[11px] rounded-md border-primary/20 hover:bg-primary/5 hover:text-primary">
+                Add Block
+                <ChevronDown className="w-3 h-3 ml-1.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="rounded-lg border-border/40 shadow-xl">
+              {schema.blocks.map((block) => (
+                <DropdownMenuItem key={block.slug} onClick={() => handleAddBlock(block)} className="text-[13px] rounded-md focus:bg-primary/5 focus:text-primary transition-colors">
+                  {block.labels?.singular || block.slug}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+
+      {fields.length === 0 ? (
+        <div className="text-center p-8 border border-dashed border-border/40 rounded-md">
+          <p className="text-[11px] text-muted-foreground/50">No blocks added yet.</p>
+        </div>
+      ) : (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={fields.map(f => f.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="pt-2">
+              {fields.map((item, index) => (
+                <SortableBlockItem
+                  key={item.id}
+                  id={item.id}
+                  index={index}
+                  item={item}
+                  schema={schema}
+                  basePath={basePath}
+                  control={control}
+                  collection={collection}
+                  remove={remove}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      )}
+    </div>
+  )
+}

package/src/components/forms/fields/date-picker.tsx

@@ -0,0 +1,60 @@
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "../../../lib/utils"
+import { Button } from "../../ui/button"
+import { Calendar } from "../../ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../ui/popover"
+
+interface DatePickerProps {
+  value?: string | Date
+  onChange: (date?: string) => void
+  label?: string
+  disabled?: boolean
+}
+
+export function DatePicker({ value, onChange, label, disabled }: DatePickerProps) {
+  const date = value ? new Date(value) : undefined
+
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{label}</label>}
+      <Popover open={disabled ? false : undefined}>
+        <PopoverTrigger asChild>
+          <Button
+            variant={"outline"}
+            disabled={disabled}
+            className={cn(
+              "w-full justify-start text-left font-normal h-11 px-4 bg-white hover:bg-muted/50 border-border/60 shadow-sm transition-all hover:shadow-md",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-3 h-4 w-4 text-primary" />
+            <span className="flex-1 truncate">
+              {date ? format(date, "PPP") : "Pick a date..."}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0 border-border/50 shadow-2xl rounded-xl" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={(newDate) => {
+              if (newDate) {
+                // Store date as ISO string
+                onChange(newDate.toISOString())
+              } else {
+                onChange(undefined)
+              }
+            }}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

package/src/components/forms/fields/json-editor.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Textarea } from "../../ui/textarea"
+import { cn } from "../../../lib/utils"
+
+interface JsonEditorProps {
+  value?: any
+  onChange: (value: any) => void
+  label?: string
+  disabled?: boolean
+}
+
+export function JsonEditor({ value, onChange, label, disabled }: JsonEditorProps) {
+  const [internalValue, setInternalValue] = React.useState("")
+  const [error, setError] = React.useState<string | null>(null)
+
+  // Initialize internal string value from the JSON prop
+  React.useEffect(() => {
+    try {
+      if (value !== undefined) {
+        setInternalValue(JSON.stringify(value, null, 2))
+      }
+    } catch (e) {
+      // Ignore initial parse errors if the value is somehow malformed
+    }
+  }, [value])
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value
+    setInternalValue(val)
+    
+    if (!val.trim()) {
+      setError(null)
+      onChange(null)
+      return
+    }
+
+    try {
+      const parsed = JSON.parse(val)
+      setError(null)
+      onChange(parsed)
+    } catch (err: any) {
+      setError("Invalid JSON format")
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <label className="text-sm font-medium leading-none">{label}</label>}
+      <Textarea
+        value={internalValue}
+        onChange={handleChange}
+        disabled={disabled}
+        className={cn(
+          "font-mono text-xs min-h-[150px]",
+          error && "border-destructive focus-visible:ring-destructive"
+        )}
+        placeholder='{ "key": "value" }'
+      />
+      {error && <span className="text-xs text-destructive">{error}</span>}
+    </div>
+  )
+}

package/src/components/forms/fields/media-picker.tsx

@@ -0,0 +1,286 @@
+import * as React from "react"
+import { useQuery } from "@tanstack/react-query"
+import { useDyrected } from "../../../providers/dyrected-provider"
+import { Button } from "../../ui/button"
+import {
+  Image as ImageIcon,
+  X,
+  Plus,
+  Trash2,
+} from "lucide-react"
+import { Input } from "../../ui/input"
+import { cn, getMediaUrl } from "../../../lib/utils"
+import { MediaLibraryDialog } from "../../media/media-library-dialog"
+
+interface MediaPickerProps {
+  collection: string
+  value?: string | string[]
+  onChange: (value: string | string[]) => void
+  label?: string
+  variant?: "default" | "icon"
+  disabled?: boolean
+  multiple?: boolean
+  placeholder?: string
+}
+
+export function MediaPicker({
+  collection,
+  value,
+  onChange,
+  label,
+  variant = "default",
+  disabled,
+  multiple,
+  placeholder
+}: MediaPickerProps) {
+  const { client } = useDyrected()
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const selectedValues = React.useMemo(() => {
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  }, [value])
+
+  const toggleValue = (id: string) => {
+    if (multiple) {
+      const next = selectedValues.includes(id)
+        ? selectedValues.filter(v => v !== id)
+        : [...selectedValues, id]
+      onChange(next)
+    } else {
+      onChange(id)
+    }
+  }
+
+  const handleConfirm = (ids: string[]) => {
+    if (multiple) {
+      const next = [...new Set([...selectedValues, ...ids])]
+      onChange(next)
+    } else if (ids.length > 0) {
+      onChange(ids[0])
+    }
+    setIsOpen(false)
+  }
+
+  // Fetch media for thumbnails in the field view
+  const { data: media } = useQuery({
+    queryKey: [collection, "previews", selectedValues],
+    queryFn: () => {
+      if (selectedValues.length === 0) return []
+      return client!.listMedia({
+        where: { id: { in: selectedValues } }
+      }, collection).then((r: any) => r.docs)
+    },
+    enabled: !!client && selectedValues.length > 0,
+  })
+
+  const getPreviewUrl = (item: any) => {
+    if (!item) return ""
+    if (item.mimeType === 'video/youtube') {
+      const match = item.url?.match(/(?:youtu\.be\/|youtube\.com\/(?:v\/|u\/\w\/|embed\/|watch\?v=))([^#\&\?]*)/)
+      const videoId = match && match[1]
+      return `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`
+    }
+    return getMediaUrl(item, client?.getBaseUrl() || "");
+  }
+
+  const isIcon = variant === "icon"
+  const getDisplayString = (val: any): string => {
+    if (!val) return ""
+    if (Array.isArray(val)) {
+      if (val.length === 0) return ""
+      return `${val.length} items selected`
+    }
+    if (typeof val === 'object') return val.filename || val.id || val.slug || "Object"
+    return String(val)
+  }
+  const displayValue = getDisplayString(value)
+
+  if (multiple && !isIcon) {
+    return (
+      <div className="space-y-4">
+        {label && (
+          <label className="text-sm font-semibold text-foreground/70 tracking-tight leading-none">
+            {label}
+          </label>
+        )}
+
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <button
+            type="button"
+            onClick={() => setIsOpen(true)}
+            className="group relative aspect-square rounded-xl border-2 border-dashed border-muted hover:border-primary/40 hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-3 overflow-hidden"
+          >
+            <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+            <div className="h-12 w-12 bg-muted rounded-full flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-all shadow-inner">
+              <Plus className="h-6 w-6" />
+            </div>
+            <div className="text-center px-4">
+              <p className="text-[11px] font-bold uppercase tracking-widest text-muted-foreground group-hover:text-primary transition-colors">Add Media</p>
+              <p className="text-[10px] text-muted-foreground/40 mt-1 font-medium group-hover:text-primary/60">Select or upload</p>
+            </div>
+          </button>
+
+          {selectedValues.map((val, index) => {
+            const item = media?.find((m: any) => m.id === val)
+            return (
+              <div key={val} className="relative group animate-in zoom-in duration-300">
+                <div className={cn(
+                  "relative aspect-square rounded-xl overflow-hidden border-2 bg-muted/20 transition-all shadow-sm",
+                  index === 0 ? "border-primary ring-4 ring-primary/10" : "border-border/40 hover:border-border/80"
+                )}>
+                  {item ? (
+                    <img
+                      src={getPreviewUrl(item)}
+                      alt=""
+                      className="w-full h-full object-cover transition-transform group-hover:scale-110"
+                    />
+                  ) : (
+                    <div className="w-full h-full animate-pulse bg-muted/50 flex items-center justify-center">
+                      <ImageIcon className="h-6 w-6 text-muted-foreground/20" />
+                    </div>
+                  )}
+
+                  {index === 0 && (
+                    <div className="absolute top-0 left-0 w-full text-center z-10 px-3 py-1 bg-primary text-white text-[9px] font-black uppercase tracking-widest shadow-primary/20">
+                      Main Image
+                    </div>
+                  )}
+
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all flex items-start justify-end backdrop-blur-[2px]">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      className="h-8 w-8 rounded-lg text-destructive bg-destructive-foreground shadow-2xl scale-75 group-hover:scale-100 transition-all"
+                      onClick={() => toggleValue(val)}
+                    >
+                      <Trash2 className="w-5 h-5" />
+                    </Button>
+                  </div>
+
+                  {item && (
+                    <div className="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                      <p className="text-[10px] text-white truncate font-medium">{item.filename}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <MediaLibraryDialog
+          collection={collection}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          selectedValues={selectedValues}
+          onSelect={toggleValue}
+          multiple={multiple}
+          onConfirm={handleConfirm}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={isIcon ? "" : "space-y-3"}>
+      {label && !isIcon && (
+        <label className="text-sm font-semibold text-foreground/70 tracking-tight leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          {label}
+        </label>
+      )}
+
+      <div className={isIcon ? "" : "relative flex items-center gap-2"}>
+        {!isIcon && (
+          <div className="relative flex-1 group">
+            <Input
+              value={displayValue}
+              readOnly
+              disabled={disabled}
+              placeholder={placeholder || "No media selected"}
+              className="pr-24 bg-muted/30 border-dashed focus-visible:ring-offset-0 focus-visible:ring-1 h-10 rounded-xl"
+            />
+            <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1 pr-1">
+              {value && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-destructive transition-colors rounded-lg"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onChange(multiple ? [] : "");
+                  }}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              )}
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
+                className="h-8 text-xs font-bold px-3 rounded-lg shadow-sm border border-border/50"
+                disabled={disabled}
+                onClick={() => setIsOpen(true)}
+              >
+                {value ? "Change" : "Select"}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {isIcon && (
+          <Button variant="ghost" size="sm" className="px-2 h-8 w-8 rounded-lg" disabled={disabled} onClick={() => setIsOpen(true)}>
+            <ImageIcon className="h-4 w-4" />
+          </Button>
+        )}
+
+        <MediaLibraryDialog
+          collection={collection}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          selectedValues={selectedValues}
+          onSelect={toggleValue}
+          multiple={multiple}
+          onConfirm={handleConfirm}
+        />
+      </div>
+
+      {!isIcon && selectedValues.length > 0 && !multiple && (
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 pt-2">
+          {selectedValues.map((val) => {
+            const item = media?.find((m: any) => m.id === val)
+            if (!item) return (
+              <div key={val} className="aspect-square rounded-xl bg-muted/20 animate-pulse border-2 border-dashed border-border/50" />
+            )
+            return (
+              <div
+                key={val}
+                className="relative aspect-square group rounded-2xl overflow-hidden border-2 border-border/50 hover:border-primary/50 transition-all bg-muted/20 shadow-sm"
+              >
+                <img
+                  src={getPreviewUrl(item)}
+                  alt=""
+                  className="w-full h-full object-cover transition-transform group-hover:scale-110"
+                />
+                {!disabled && (
+                  <button
+                    type="button"
+                    onClick={() => toggleValue(val)}
+                    className="absolute top-2 right-2 p-1.5 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-all hover:scale-110 shadow-lg border-2 border-white"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                )}
+                <div className="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                  <p className="text-[10px] text-white truncate font-medium">{item.filename}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}