@dyrected/admin 1.0.1

package/src/components/forms/fields/multi-select.tsx

@@ -0,0 +1,145 @@
+import * as React from "react"
+import { Check, ChevronsUpDown, X } from "lucide-react"
+
+import { cn } from "../../../lib/utils"
+import { Button } from "../../ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../ui/popover"
+import { Badge } from "../../ui/badge"
+
+interface Option {
+  label: string
+  value: string
+}
+
+interface MultiSelectProps {
+  options: Option[]
+  value?: string[]
+  onChange: (value: string[]) => void
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+}
+
+/**
+ * MultiSelect Field component
+ * 
+ * Provides a tag-based multi-selection UI using a searchable dropdown.
+ */
+export function MultiSelect({
+  options,
+  value = [],
+  onChange,
+  label,
+  placeholder = "Select options...",
+  disabled,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const handleSelect = (currentValue: string) => {
+    const isSelected = value.includes(currentValue)
+    if (isSelected) {
+      onChange(value.filter((val) => val !== currentValue))
+    } else {
+      onChange([...value, currentValue])
+    }
+  }
+
+  const handleRemove = (valueToRemove: string) => {
+    onChange(value.filter((val) => val !== valueToRemove))
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <label className="text-sm font-medium leading-none">{label}</label>}
+      <Popover open={disabled ? false : open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className="w-full justify-between h-auto min-h-10 font-normal"
+          >
+            <div className="flex flex-wrap gap-1 items-center">
+              {value.length === 0 && (
+                <span className="text-muted-foreground">{placeholder}</span>
+              )}
+              {value.map((val) => {
+                const option = options.find((opt) => opt.value === val)
+                return (
+                  <Badge
+                    key={val}
+                    variant="secondary"
+                    className="mr-1 mb-1 items-center gap-1"
+                  >
+                    {option?.label || val}
+                    {!disabled && (
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        className="ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            handleRemove(val)
+                          }
+                        }}
+                        onMouseDown={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                        }}
+                        onClick={() => handleRemove(val)}
+                      >
+                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                      </div>
+                    )}
+                  </Badge>
+                )
+              })}
+            </div>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[400px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="Search options..." />
+            <CommandList>
+              <CommandEmpty>No option found.</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => {
+                  const isSelected = value.includes(option.value)
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      value={option.label as any}
+                      onSelect={() => handleSelect(option.value)}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          isSelected ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {option.label}
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

package/src/components/forms/fields/radio-field.tsx

@@ -0,0 +1,51 @@
+import { RadioGroup, RadioGroupItem } from "../../ui/radio-group"
+import { Label } from "../../ui/label"
+import { cn } from "../../../lib/utils"
+import { normalizeOptions } from "../utils"
+import type { Field as FieldSchema } from "@dyrected/sdk"
+
+interface RadioFieldProps {
+  schema: FieldSchema
+  field: any
+  disabled?: boolean
+}
+
+export function RadioField({ schema, field, disabled }: RadioFieldProps) {
+  const options = normalizeOptions(schema.options)
+  const isHorizontal = schema.admin?.direction === "horizontal"
+
+  return (
+    <RadioGroup
+      onValueChange={field.onChange}
+      defaultValue={field.value}
+      disabled={disabled}
+      className={cn(
+        "gap-4",
+        isHorizontal ? "flex flex-wrap items-center" : "flex flex-col"
+      )}
+    >
+      {options.map((opt) => (
+        <div key={opt.value} className={cn(
+          "relative flex items-center",
+          isHorizontal ? "min-w-[120px]" : "w-full"
+        )}>
+          <RadioGroupItem
+            value={opt.value}
+            id={`${field.name}-${opt.value}`}
+            className="peer absolute left-4 z-10"
+          />
+          <Label
+            htmlFor={`${field.name}-${opt.value}`}
+            className={cn(
+              "flex flex-1 items-center pl-12 pr-4 py-3 rounded-xl border border-border/40 bg-white/50 cursor-pointer transition-all hover:bg-white/80 hover:shadow-sm",
+              "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 peer-data-[state=checked]:shadow-md peer-data-[state=checked]:ring-1 peer-data-[state=checked]:ring-primary/20",
+              "text-sm font-medium text-foreground/70 peer-data-[state=checked]:text-primary"
+            )}
+          >
+            {opt.label}
+          </Label>
+        </div>
+      ))}
+    </RadioGroup>
+  )
+}

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

@@ -0,0 +1,143 @@
+import * as React from "react"
+import { useQuery } from "@tanstack/react-query"
+import { useDyrected } from "../../../providers/dyrected-provider"
+import { Button } from "../../ui/button"
+import { Badge } from "../../ui/badge"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../ui/popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { cn, getMediaUrl } from "../../../lib/utils"
+
+interface RelationshipPickerProps {
+  value?: string | string[]
+  onChange: (value: string | string[]) => void
+  label?: string
+  relationTo: string // The collection slug this field relates to
+  multiple?: boolean
+  disabled?: boolean
+}
+
+export function RelationshipPicker({ value, onChange, label, relationTo, multiple, disabled }: RelationshipPickerProps) {
+  const { client, schemas } = useDyrected()
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
+
+  const relatedCollection = schemas?.collections.find((c: any) => c.slug === relationTo)
+  if (!relationTo) console.warn("[RelationshipPicker] No relationTo/collection defined for field:", label)
+  const isUpload = !!relatedCollection?.upload
+  const displayField = relatedCollection?.admin?.useAsTitle || "title"
+
+  // Fetch the related collection documents
+  const { data, isLoading } = useQuery({
+    queryKey: ["collection", relationTo, "picker", search],
+    queryFn: () => {
+      let qb = client!.collection(relationTo).find({ limit: 20 })
+      if (search) {
+        qb = qb.where({ [displayField]: { like: `%${search}%` } })
+      }
+      return qb.exec().then((res: any) => res.docs)
+    },
+    enabled: !!client && !!relationTo,
+  })
+
+  // Determine a display label for an item. 
+  // We'll fallback to ID if no title or name exists.
+  const getDisplayLabel = (item: any) => {
+    return item[displayField] || item.name || item.slug || item.id
+  }
+
+  const values = Array.isArray(value) ? value : value ? [value] : []
+  const selectedItems = values.map(v => data?.find((item: any) => item.id === v)).filter(Boolean)
+
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <label className="text-sm font-medium leading-none">{label}</label>}
+      <Popover open={disabled ? false : open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className="w-full justify-between font-normal"
+          >
+            {isLoading ? (
+              "Loading..."
+            ) : selectedItems.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {selectedItems.map((item: any) => (
+                  <Badge key={item.id} variant="secondary" className="text-[10px] h-5 px-1.5">
+                    {getDisplayLabel(item)}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-muted-foreground">Select {relationTo}...</span>
+            )}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[400px] p-0" align="start">
+          <Command>
+            <CommandInput 
+              placeholder={`Search ${relationTo}...`} 
+              onValueChange={setSearch}
+            />
+            <CommandList>
+              <CommandEmpty>{isLoading ? "Searching..." : "No item found."}</CommandEmpty>
+              <CommandGroup>
+                {data?.map((item: any) => (
+                  <CommandItem
+                    key={item.id}
+                    value={item.id}
+                    onSelect={() => {
+                      if (multiple) {
+                        const newValues = values.includes(item.id)
+                          ? values.filter(v => v !== item.id)
+                          : [...values, item.id]
+                        onChange(newValues)
+                      } else {
+                        onChange(item.id === value ? "" : item.id)
+                        setOpen(false)
+                      }
+                    }}
+                  >
+                    <div className="flex items-center gap-3 flex-1">
+                      {isUpload && (
+                        <div className="h-6 w-6 rounded border bg-muted overflow-hidden flex-shrink-0">
+                          <img 
+                            src={getMediaUrl(item, client?.getBaseUrl() || "")} 
+                            className="h-full w-full object-cover" 
+                            alt="" 
+                          />
+                        </div>
+                      )}
+                      <span className="flex-1">{getDisplayLabel(item)}</span>
+                      <Check
+                        className={cn(
+                          "h-4 w-4",
+                          values.includes(item.id) ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

package/src/components/forms/fields/rich-text-editor.tsx

@@ -0,0 +1,224 @@
+import * as React from "react"
+import { useEditor, EditorContent, type Editor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import TextAlign from "@tiptap/extension-text-align"
+import Image from "@tiptap/extension-image"
+import { Toggle } from "../../ui/toggle"
+import { cn } from "../../../lib/utils"
+import { MediaPicker } from "./media-picker"
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  List,
+  ListOrdered,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Link as LinkIcon,
+  Heading1,
+  Heading2,
+  Quote
+} from "lucide-react"
+
+interface RichTextEditorProps {
+  value: string
+  onChange: (value: string) => void
+  label?: string
+  disabled?: boolean
+  collection?: string
+}
+
+const MenuBar = ({ editor, collection = "media" }: { editor: Editor | null, collection?: string }) => {
+  if (!editor) {
+    return null
+  }
+
+  const addLink = () => {
+    const url = window.prompt("URL")
+    if (url) {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run()
+    } else if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run()
+    }
+  }
+
+  return (
+    <div className="border border-input rounded-t-md p-1 flex flex-wrap gap-1 items-center bg-muted/50">
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("bold")}
+        onPressedChange={() => editor.chain().focus().toggleBold().run()}
+      >
+        <Bold className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("italic")}
+        onPressedChange={() => editor.chain().focus().toggleItalic().run()}
+      >
+        <Italic className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("underline")}
+        onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
+      >
+        <UnderlineIcon className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("strike")}
+        onPressedChange={() => editor.chain().focus().toggleStrike().run()}
+      >
+        <Strikethrough className="h-4 w-4" />
+      </Toggle>
+
+      <div className="w-[1px] h-6 bg-border mx-1" />
+
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("heading", { level: 1 })}
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+      >
+        <Heading1 className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("heading", { level: 2 })}
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+      >
+        <Heading2 className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("bulletList")}
+        onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
+      >
+        <List className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("orderedList")}
+        onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
+      >
+        <ListOrdered className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("blockquote")}
+        onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
+      >
+        <Quote className="h-4 w-4" />
+      </Toggle>
+
+      <div className="w-[1px] h-6 bg-border mx-1" />
+
+      <Toggle
+        size="sm"
+        pressed={editor.isActive({ textAlign: "left" })}
+        onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
+      >
+        <AlignLeft className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive({ textAlign: "center" })}
+        onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
+      >
+        <AlignCenter className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive({ textAlign: "right" })}
+        onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
+      >
+        <AlignRight className="h-4 w-4" />
+      </Toggle>
+
+      <div className="w-[1px] h-6 bg-border mx-1" />
+
+      <Toggle
+        size="sm"
+        pressed={editor.isActive("link")}
+        onPressedChange={addLink}
+      >
+        <LinkIcon className="h-4 w-4" />
+      </Toggle>
+      
+      <div className="ml-auto">
+        <MediaPicker
+          collection={collection}
+          variant="icon"
+          onChange={(val) => {
+            const filename = Array.isArray(val) ? val[0] : val
+            if (filename) {
+              const url = `/api/media/${filename}`
+              editor.chain().focus().setImage({ src: url, alt: filename }).run()
+            }
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export function RichTextEditor({ value, onChange, label, disabled, collection = "media" }: RichTextEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        link: {
+          openOnClick: false,
+        },
+      }),
+      TextAlign.configure({
+        types: ["heading", "paragraph"],
+      }),
+      Image.configure({
+        HTMLAttributes: {
+          class: "rounded-md max-w-full h-auto my-4",
+        },
+      }),
+    ],
+    content: value,
+    editable: !disabled,
+    immediatelyRender: false,
+    onUpdate: ({ editor }) => {
+      // Extract HTML for standard rich text storage
+      onChange(editor.getHTML())
+    },
+    editorProps: {
+      attributes: {
+        class: "prose prose-sm dark:prose-invert max-w-none min-h-[150px] p-4 focus:outline-none border border-t-0 rounded-b-md border-input bg-transparent",
+      },
+    },
+  })
+
+  React.useEffect(() => {
+    if (editor) {
+      editor.setEditable(!disabled)
+    }
+  }, [disabled, editor])
+
+  // Update editor content if value changes externally (e.g. initial load)
+  React.useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      // Prevent cursor jump by checking if the content is actually different text-wise
+      const currentHtml = editor.getHTML()
+      if (currentHtml !== value && value) {
+        editor.commands.setContent(value)
+      }
+    }
+  }, [value, editor])
+
+  return (
+    <div className="space-y-2">
+      {label && <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{label}</label>}
+      <div className="flex flex-col w-full">
+        {!disabled && <MenuBar editor={editor} collection={collection} />}
+        <EditorContent editor={editor} className={cn(disabled && "opacity-80")} />
+      </div>
+    </div>
+  )
+}

package/src/components/forms/fields/select-field.tsx

@@ -0,0 +1,35 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../ui/select"
+import { normalizeOptions } from "../utils"
+import type { Field as FieldSchema } from "@dyrected/sdk"
+
+interface SelectFieldProps {
+  schema: FieldSchema
+  field: any
+  disabled?: boolean
+}
+
+export function SelectField({ schema, field, disabled }: SelectFieldProps) {
+  const label = schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)
+  const options = normalizeOptions(schema.options)
+
+  return (
+    <Select onValueChange={field.onChange} defaultValue={field.value} disabled={disabled}>
+      <SelectTrigger className="h-12 rounded-xl border-border/40 bg-white/50 focus:ring-0 focus:ring-offset-0 focus:bg-white shadow-sm transition-all hover:shadow-md">
+        <SelectValue placeholder={schema.admin?.placeholder || `Select ${label.toLowerCase()}`} />
+      </SelectTrigger>
+      <SelectContent className="rounded-xl border-border/40 shadow-xl animate-in fade-in zoom-in-95">
+        {options.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value} className="rounded-lg focus:bg-primary/5 focus:text-primary transition-colors">
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/components/forms/fields/switch-field.tsx

@@ -0,0 +1,16 @@
+import { Switch } from "../../ui/switch"
+
+interface SwitchFieldProps {
+  field: any
+  disabled?: boolean
+}
+
+export function SwitchField({ field, disabled }: SwitchFieldProps) {
+  return (
+    <Switch
+      checked={field.value}
+      onCheckedChange={field.onChange}
+      disabled={disabled}
+    />
+  )
+}

package/src/components/forms/fields/text-area-field.tsx

@@ -0,0 +1,15 @@
+import { Textarea } from "../../ui/textarea"
+import type { Field as FieldSchema } from "@dyrected/sdk"
+
+interface TextAreaFieldProps {
+  schema: FieldSchema
+  field: any
+  disabled?: boolean
+}
+
+export function TextAreaField({ schema, field, disabled }: TextAreaFieldProps) {
+  const label = schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)
+  const placeholder = schema.admin?.placeholder || `Enter ${label.toLowerCase()}...`
+
+  return <Textarea {...field} value={field.value ?? ""} placeholder={placeholder} disabled={disabled} />
+}

package/src/components/forms/fields/text-field.tsx

@@ -0,0 +1,24 @@
+import { Input } from "../../ui/input"
+import type { Field as FieldSchema } from "@dyrected/sdk"
+
+interface TextFieldProps {
+  schema: FieldSchema
+  field: any
+  disabled?: boolean
+}
+
+export function TextField({ schema, field, disabled }: TextFieldProps) {
+  const label = schema.label || schema.name.charAt(0).toUpperCase() + schema.name.slice(1)
+  const placeholder = schema.admin?.placeholder || `Enter ${label.toLowerCase()}...`
+
+  switch (schema.type) {
+    case "number":
+      return <Input type="number" {...field} value={field.value ?? ""} placeholder={schema.admin?.placeholder || "0"} disabled={disabled} />
+    case "email":
+      return <Input type="email" {...field} value={field.value ?? ""} placeholder={placeholder} disabled={disabled} />
+    case "url":
+      return <Input type="url" {...field} value={field.value ?? ""} placeholder={schema.admin?.placeholder || "https://"} disabled={disabled} />
+    default:
+      return <Input {...field} value={field.value ?? ""} placeholder={placeholder} disabled={disabled} />
+  }
+}