@dyrected/admin 2.4.0 → 2.4.1

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

@@ -1,145 +0,0 @@
-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="dy-flex dy-flex-col dy-gap-2">
-      {label && <label className="dy-text-sm dy-font-medium dy-leading-none">{label}</label>}
-      <Popover open={disabled ? false : open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            disabled={disabled}
-            className="dy-w-full dy-justify-between dy-h-auto dy-min-h-10 dy-font-normal"
-          >
-            <div className="dy-flex dy-flex-wrap dy-gap-1 dy-items-center">
-              {value.length === 0 && (
-                <span className="dy-text-muted-foreground">{placeholder}</span>
-              )}
-              {value.map((val) => {
-                const option = options.find((opt) => opt.value === val)
-                return (
-                  <Badge
-                    key={val}
-                    variant="secondary"
-                    className="dy-mr-1 dy-mb-1 dy-items-center dy-gap-1"
-                  >
-                    {option?.label || val}
-                    {!disabled && (
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        className="dy-ring-offset-background dy-rounded-full dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2"
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") {
-                            handleRemove(val)
-                          }
-                        }}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                        }}
-                        onClick={() => handleRemove(val)}
-                      >
-                        <X className="dy-h-3 dy-w-3 dy-text-muted-foreground hover:dy-text-foreground" />
-                      </div>
-                    )}
-                  </Badge>
-                )
-              })}
-            </div>
-            <ChevronsUpDown className="dy-ml-2 dy-h-4 dy-w-4 dy-shrink-0 dy-opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="dy-w-[400px] dy-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(
-                          "dy-mr-2 dy-h-4 dy-w-4",
-                          isSelected ? "dy-opacity-100" : "dy-opacity-0"
-                        )}
-                      />
-                      {option.label}
-                    </CommandItem>
-                  )
-                })}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}

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

@@ -1,51 +0,0 @@
-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(
-        "dy-gap-4",
-        isHorizontal ? "dy-flex dy-flex-wrap dy-items-center" : "dy-flex dy-flex-col"
-      )}
-    >
-      {options.map((opt) => (
-        <div key={opt.value} className={cn(
-          "dy-relative dy-flex dy-items-center",
-          isHorizontal ? "dy-min-w-[120px]" : "dy-w-full"
-        )}>
-          <RadioGroupItem
-            value={opt.value}
-            id={`${field.name}-${opt.value}`}
-            className="dy-peer dy-absolute dy-left-4 dy-z-10"
-          />
-          <Label
-            htmlFor={`${field.name}-${opt.value}`}
-            className={cn(
-              "dy-flex dy-flex-1 dy-items-center dy-pl-12 dy-pr-4 dy-py-3 dy-rounded-xl dy-border dy-border-border/40 dy-bg-white/50 dy-cursor-pointer dy-transition-all hover:dy-bg-white/80 hover:dy-shadow-sm",
-              "dy-peer-data-[state=checked]:dy-border-primary dy-peer-data-[state=checked]:dy-bg-primary/5 dy-peer-data-[state=checked]:dy-shadow-md dy-peer-data-[state=checked]:dy-ring-1 dy-peer-data-[state=checked]:dy-ring-primary/20",
-              "dy-text-sm dy-font-medium dy-text-foreground/70 dy-peer-data-[state=checked]:dy-text-primary"
-            )}
-          >
-            {opt.label}
-          </Label>
-        </div>
-      ))}
-    </RadioGroup>
-  )
-}

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

@@ -1,143 +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 { 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="dy-flex dy-flex-col dy-gap-2">
-      {label && <label className="dy-text-sm dy-font-medium dy-leading-none">{label}</label>}
-      <Popover open={disabled ? false : open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            disabled={disabled}
-            className="dy-w-full dy-justify-between dy-font-normal"
-          >
-            {isLoading ? (
-              "Loading..."
-            ) : selectedItems.length > 0 ? (
-              <div className="dy-flex dy-flex-wrap dy-gap-1">
-                {selectedItems.map((item: any) => (
-                  <Badge key={item.id} variant="secondary" className="dy-text-[10px] dy-h-5 dy-px-1.5">
-                    {getDisplayLabel(item)}
-                  </Badge>
-                ))}
-              </div>
-            ) : (
-              <span className="dy-text-muted-foreground">Select {relationTo}...</span>
-            )}
-            <ChevronsUpDown className="dy-ml-2 dy-h-4 dy-w-4 dy-shrink-0 dy-opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="dy-w-[400px] dy-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="dy-flex dy-items-center dy-gap-3 dy-flex-1">
-                      {isUpload && (
-                        <div className="dy-h-6 dy-w-6 dy-rounded dy-border dy-bg-muted dy-overflow-hidden dy-flex-shrink-0">
-                          <img 
-                            src={getMediaUrl(item, client?.getBaseUrl() || "")} 
-                            className="dy-h-full dy-w-full dy-object-cover" 
-                            alt="" 
-                          />
-                        </div>
-                      )}
-                      <span className="dy-flex-1">{getDisplayLabel(item)}</span>
-                      <Check
-                        className={cn(
-                          "dy-h-4 dy-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

@@ -1,224 +0,0 @@
-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="dy-border dy-border-input dy-rounded-t-md dy-p-1 dy-flex dy-flex-wrap dy-gap-1 dy-items-center dy-bg-muted/50">
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("bold")}
-        onPressedChange={() => editor.chain().focus().toggleBold().run()}
-      >
-        <Bold className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("italic")}
-        onPressedChange={() => editor.chain().focus().toggleItalic().run()}
-      >
-        <Italic className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("underline")}
-        onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
-      >
-        <UnderlineIcon className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("strike")}
-        onPressedChange={() => editor.chain().focus().toggleStrike().run()}
-      >
-        <Strikethrough className="dy-h-4 dy-w-4" />
-      </Toggle>
-
-      <div className="dy-w-[1px] dy-h-6 dy-bg-border dy-mx-1" />
-
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("heading", { level: 1 })}
-        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-      >
-        <Heading1 className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("heading", { level: 2 })}
-        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-      >
-        <Heading2 className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("bulletList")}
-        onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
-      >
-        <List className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("orderedList")}
-        onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
-      >
-        <ListOrdered className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("blockquote")}
-        onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
-      >
-        <Quote className="dy-h-4 dy-w-4" />
-      </Toggle>
-
-      <div className="dy-w-[1px] dy-h-6 dy-bg-border dy-mx-1" />
-
-      <Toggle
-        size="sm"
-        pressed={editor.isActive({ textAlign: "left" })}
-        onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
-      >
-        <AlignLeft className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive({ textAlign: "center" })}
-        onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
-      >
-        <AlignCenter className="dy-h-4 dy-w-4" />
-      </Toggle>
-      <Toggle
-        size="sm"
-        pressed={editor.isActive({ textAlign: "right" })}
-        onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
-      >
-        <AlignRight className="dy-h-4 dy-w-4" />
-      </Toggle>
-
-      <div className="dy-w-[1px] dy-h-6 dy-bg-border dy-mx-1" />
-
-      <Toggle
-        size="sm"
-        pressed={editor.isActive("link")}
-        onPressedChange={addLink}
-      >
-        <LinkIcon className="dy-h-4 dy-w-4" />
-      </Toggle>
-      
-      <div className="dy-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="dy-space-y-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>}
-      <div className="dy-flex dy-flex-col dy-w-full">
-        {!disabled && <MenuBar editor={editor} collection={collection} />}
-        <EditorContent editor={editor} className={cn(disabled && "dy-opacity-80")} />
-      </div>
-    </div>
-  )
-}

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

@@ -1,35 +0,0 @@
-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="dy-h-12 dy-rounded-xl dy-border-border/40 dy-bg-white/50 focus:dy-ring-0 focus:dy-ring-offset-0 focus:dy-bg-white dy-shadow-sm dy-transition-all hover:dy-shadow-md">
-        <SelectValue placeholder={schema.admin?.placeholder || `Select ${label.toLowerCase()}`} />
-      </SelectTrigger>
-      <SelectContent className="dy-rounded-xl dy-border-border/40 dy-shadow-xl dy-animate-in dy-fade-in dy-zoom-in-95">
-        {options.map((opt) => (
-          <SelectItem key={opt.value} value={opt.value} className="dy-rounded-lg focus:dy-bg-primary/5 focus:dy-text-primary dy-transition-colors">
-            {opt.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}

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

@@ -1,16 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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} />
-  }
-}