@dyrected/admin 2.4.0 → 2.4.1

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

@@ -1,213 +0,0 @@
-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="dy-relative dy-group dy-left-accent dy-mb-4 dy-py-4 dy-animate-in">
-      {/* Header / Drag Handle */}
-      <div className="dy-flex dy-items-center dy-justify-between dy-pb-3">
-        <div className="dy-flex dy-items-center dy-justify-between dy-gap-2">
-          <div {...attributes} {...listeners} className="dy-cursor-grab dy-opacity-20 dy-group-hover:dy-opacity-100 hover:dy-bg-muted dy-p-1 dy-rounded-md dy-transition-all">
-            <GripVertical className="dy-w-3.5 dy-h-3.5 dy-text-muted-foreground" />
-          </div>
-          <span className="dy-font-bold dy-text-xs dy-text-foreground/70 dy-tracking-tight">
-            {blockConfig.labels?.singular || blockConfig.slug}
-          </span>
-          <span className="dy-text-[10px] dy-text-muted-foreground/40 dy-ml-2 dy-uppercase dy-tracking-widest dy-font-semibold">
-            Item {index + 1}
-          </span>
-        </div>
-        <div className="dy-flex dy-items-center dy-gap-1 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity">
-          <Button type="button" variant="ghost" size="icon" className="dy-h-7 dy-w-7 dy-text-muted-foreground/40" onClick={() => setIsExpanded(!isExpanded)}>
-            {isExpanded ? <ChevronUp className="dy-w-3.5 dy-h-3.5" /> : <ChevronDown className="dy-w-3.5 dy-h-3.5" />}
-          </Button>
-          <Button type="button" variant="ghost" size="icon" className="dy-h-7 dy-w-7 dy-text-muted-foreground/30 hover:dy-text-destructive hover:dy-bg-destructive/10" onClick={() => remove(index)}>
-            <X className="dy-w-3.5 dy-h-3.5" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Content */}
-      {isExpanded && (
-        <div className="dy-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="dy-space-y-4">
-      <div className="dy-flex dy-justify-between dy-items-center dy-pb-2">
-        <div>
-          <h4 className="dy-font-bold dy-text-sm dy-text-foreground dy-tracking-tight">{schema.label}</h4>
-          {schema.admin?.description && (
-            <p className="dy-text-[11px] dy-text-muted-foreground/60 dy-italic">{schema.admin.description}</p>
-          )}
-        </div>
-
-        {schema.blocks && schema.blocks.length > 0 && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button type="button" variant="outline" size="sm" className="dy-h-7 dy-text-[11px] dy-rounded-md dy-border-primary/20 hover:dy-bg-primary/5 hover:dy-text-primary">
-                Add Block
-                <ChevronDown className="dy-w-3 dy-h-3 dy-ml-1.5" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="dy-rounded-lg dy-border-border/40 dy-shadow-xl">
-              {schema.blocks.map((block) => (
-                <DropdownMenuItem key={block.slug} onClick={() => handleAddBlock(block)} className="dy-text-[13px] dy-rounded-md focus:dy-bg-primary/5 focus:dy-text-primary dy-transition-colors">
-                  {block.labels?.singular || block.slug}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-
-      {fields.length === 0 ? (
-        <div className="dy-text-center dy-p-8 dy-border dy-border-dashed dy-border-border/40 dy-rounded-md">
-          <p className="dy-text-[11px] dy-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="dy-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

@@ -1,60 +0,0 @@
-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="dy-flex dy-flex-col dy-gap-2">
-      {label && <label className="dy-text-sm dy-font-medium dy-leading-none dy-peer-disabled:dy-cursor-not-allowed dy-peer-disabled:dy-opacity-70">{label}</label>}
-      <Popover open={disabled ? false : undefined}>
-        <PopoverTrigger asChild>
-          <Button
-            variant={"outline"}
-            disabled={disabled}
-            className={cn(
-              "dy-w-full dy-justify-start dy-text-left dy-font-normal dy-h-11 dy-px-4 dy-bg-white hover:dy-bg-muted/50 dy-border-border/60 dy-shadow-sm dy-transition-all hover:dy-shadow-md",
-              !date && "dy-text-muted-foreground"
-            )}
-          >
-            <CalendarIcon className="dy-mr-3 dy-h-4 dy-w-4 dy-text-primary" />
-            <span className="dy-flex-1 dy-truncate">
-              {date ? format(date, "PPP") : "Pick a date..."}
-            </span>
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="dy-w-auto dy-p-0 dy-border-border/50 dy-shadow-2xl dy-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

@@ -1,62 +0,0 @@
-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="dy-flex dy-flex-col dy-gap-2">
-      {label && <label className="dy-text-sm dy-font-medium dy-leading-none">{label}</label>}
-      <Textarea
-        value={internalValue}
-        onChange={handleChange}
-        disabled={disabled}
-        className={cn(
-          "dy-font-mono dy-text-xs dy-min-h-[150px]",
-          error && "dy-border-destructive focus-visible:dy-ring-destructive"
-        )}
-        placeholder='{ "key": "value" }'
-      />
-      {error && <span className="dy-text-xs dy-text-destructive">{error}</span>}
-    </div>
-  )
-}

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

@@ -1,286 +0,0 @@
-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="dy-space-y-4">
-        {label && (
-          <label className="dy-text-sm dy-font-semibold dy-text-foreground/70 dy-tracking-tight dy-leading-none">
-            {label}
-          </label>
-        )}
-
-        <div className="dy-grid dy-grid-cols-2 md:dy-grid-cols-3 lg:dy-grid-cols-4 dy-gap-4">
-          <button
-            type="button"
-            onClick={() => setIsOpen(true)}
-            className="dy-group dy-relative dy-aspect-square dy-rounded-xl dy-border-2 dy-border-dashed dy-border-muted hover:dy-border-primary/40 hover:dy-bg-primary/5 dy-transition-all dy-flex dy-flex-col dy-items-center dy-justify-center dy-gap-3 dy-overflow-hidden"
-          >
-            <div className="dy-absolute dy-inset-0 dy-bg-primary/5 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity" />
-            <div className="dy-h-12 dy-w-12 dy-bg-muted dy-rounded-full dy-flex dy-items-center dy-justify-center dy-text-muted-foreground dy-group-hover:dy-bg-primary/10 dy-group-hover:dy-text-primary dy-transition-all dy-shadow-inner">
-              <Plus className="dy-h-6 dy-w-6" />
-            </div>
-            <div className="dy-text-center dy-px-4">
-              <p className="dy-text-[11px] dy-font-bold dy-uppercase dy-tracking-widest dy-text-muted-foreground dy-group-hover:dy-text-primary dy-transition-colors">Add Media</p>
-              <p className="dy-text-[10px] dy-text-muted-foreground/40 dy-mt-1 dy-font-medium dy-group-hover:dy-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="dy-relative dy-group dy-animate-in dy-zoom-in dy-duration-300">
-                <div className={cn(
-                  "dy-relative dy-aspect-square dy-rounded-xl dy-overflow-hidden dy-border-2 dy-bg-muted/20 dy-transition-all dy-shadow-sm",
-                  index === 0 ? "dy-border-primary dy-ring-4 dy-ring-primary/10" : "dy-border-border/40 hover:dy-border-border/80"
-                )}>
-                  {item ? (
-                    <img
-                      src={getPreviewUrl(item)}
-                      alt=""
-                      className="dy-w-full dy-h-full dy-object-cover dy-transition-transform dy-group-hover:dy-scale-110"
-                    />
-                  ) : (
-                    <div className="dy-w-full dy-h-full dy-animate-pulse dy-bg-muted/50 dy-flex dy-items-center dy-justify-center">
-                      <ImageIcon className="dy-h-6 dy-w-6 dy-text-muted-foreground/20" />
-                    </div>
-                  )}
-
-                  {index === 0 && (
-                    <div className="dy-absolute dy-top-0 dy-left-0 dy-w-full dy-text-center dy-z-10 dy-px-3 dy-py-1 dy-bg-primary dy-text-white dy-text-[9px] dy-font-black dy-uppercase dy-tracking-widest dy-shadow-primary/20">
-                      Main Image
-                    </div>
-                  )}
-
-                  <div className="dy-absolute dy-inset-0 dy-bg-black/40 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-all dy-flex dy-items-start dy-justify-end dy-backdrop-blur-[2px]">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      className="dy-h-8 dy-w-8 dy-rounded-lg dy-text-destructive dy-bg-destructive-foreground dy-shadow-2xl dy-scale-75 dy-group-hover:dy-scale-100 dy-transition-all"
-                      onClick={() => toggleValue(val)}
-                    >
-                      <Trash2 className="dy-w-5 dy-h-5" />
-                    </Button>
-                  </div>
-
-                  {item && (
-                    <div className="dy-absolute dy-inset-x-0 dy-bottom-0 dy-p-2 dy-bg-gradient-to-t dy-from-black/60 dy-to-transparent dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity">
-                      <p className="dy-text-[10px] dy-text-white dy-truncate dy-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="dy-text-sm dy-font-semibold dy-text-foreground/70 dy-tracking-tight dy-leading-none dy-peer-disabled:dy-cursor-not-allowed dy-peer-disabled:dy-opacity-70">
-          {label}
-        </label>
-      )}
-
-      <div className={isIcon ? "" : "relative flex items-center gap-2"}>
-        {!isIcon && (
-          <div className="dy-relative dy-flex-1 dy-group">
-            <Input
-              value={displayValue}
-              readOnly
-              disabled={disabled}
-              placeholder={placeholder || "No media selected"}
-              className="dy-pr-24 dy-bg-muted/30 dy-border-dashed focus-visible:dy-ring-offset-0 focus-visible:dy-ring-1 dy-h-10 dy-rounded-xl"
-            />
-            <div className="dy-absolute dy-right-1 dy-top-1/2 dy--translate-y-1/2 dy-flex dy-items-center dy-gap-1 dy-pr-1">
-              {value && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="dy-h-7 dy-w-7 dy-text-muted-foreground hover:dy-text-destructive dy-transition-colors dy-rounded-lg"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    onChange(multiple ? [] : "");
-                  }}
-                >
-                  <X className="dy-h-4 dy-w-4" />
-                </Button>
-              )}
-              <Button
-                type="button"
-                variant="secondary"
-                size="sm"
-                className="dy-h-8 dy-text-xs dy-font-bold dy-px-3 dy-rounded-lg dy-shadow-sm dy-border dy-border-border/50"
-                disabled={disabled}
-                onClick={() => setIsOpen(true)}
-              >
-                {value ? "Change" : "Select"}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {isIcon && (
-          <Button variant="ghost" size="sm" className="dy-px-2 dy-h-8 dy-w-8 dy-rounded-lg" disabled={disabled} onClick={() => setIsOpen(true)}>
-            <ImageIcon className="dy-h-4 dy-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="dy-grid dy-grid-cols-2 sm:dy-grid-cols-3 md:dy-grid-cols-4 lg:dy-grid-cols-5 dy-gap-4 dy-pt-2">
-          {selectedValues.map((val) => {
-            const item = media?.find((m: any) => m.id === val)
-            if (!item) return (
-              <div key={val} className="dy-aspect-square dy-rounded-xl dy-bg-muted/20 dy-animate-pulse dy-border-2 dy-border-dashed dy-border-border/50" />
-            )
-            return (
-              <div
-                key={val}
-                className="dy-relative dy-aspect-square dy-group dy-rounded-2xl dy-overflow-hidden dy-border-2 dy-border-border/50 hover:dy-border-primary/50 dy-transition-all dy-bg-muted/20 dy-shadow-sm"
-              >
-                <img
-                  src={getPreviewUrl(item)}
-                  alt=""
-                  className="dy-w-full dy-h-full dy-object-cover dy-transition-transform dy-group-hover:dy-scale-110"
-                />
-                {!disabled && (
-                  <button
-                    type="button"
-                    onClick={() => toggleValue(val)}
-                    className="dy-absolute dy-top-2 dy-right-2 dy-p-1.5 dy-bg-destructive dy-text-destructive-foreground dy-rounded-full dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-all hover:dy-scale-110 dy-shadow-lg dy-border-2 dy-border-white"
-                  >
-                    <X className="dy-h-3.5 dy-w-3.5" />
-                  </button>
-                )}
-                <div className="dy-absolute dy-inset-x-0 dy-bottom-0 dy-p-2 dy-bg-gradient-to-t dy-from-black/60 dy-to-transparent dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity">
-                  <p className="dy-text-[10px] dy-text-white dy-truncate dy-font-medium">{item.filename}</p>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}