convex-cms 0.0.3 → 0.0.5-alpha.2

package/admin/src/components/fields/ReferenceField.tsx

@@ -0,0 +1,386 @@
+import { useState, useCallback, useMemo } from 'react'
+import { useQuery } from 'convex/react'
+import { api } from '../../../convex/_generated/api'
+import { FieldWrapper } from './FieldWrapper'
+import type { BaseFieldProps } from './types'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '~/components/ui/dialog'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '~/components/ui/command'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/ui/select'
+import { Badge } from '~/components/ui/badge'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { CmsStatusBadge, type ContentStatus } from '~/components/cmsds/CmsStatusBadge'
+import { CmsEmptyState } from '~/components/cmsds/CmsEmptyState'
+import { cn } from '~/lib/cn'
+import { FileText, Link2, X, Check, Plus } from 'lucide-react'
+
+export interface ReferenceFieldProps extends BaseFieldProps<string | string[] | null> {
+  placeholder?: string
+}
+
+function getEntryDisplayTitle(entry: {
+  data?: Record<string, unknown>
+  slug?: string
+  _id: string
+}): string {
+  const titleFields = ['title', 'name', 'heading', 'label']
+  for (const field of titleFields) {
+    const value = entry.data?.[field]
+    if (typeof value === 'string' && value.trim()) {
+      return value
+    }
+  }
+  return entry.slug || entry._id
+}
+
+export function ReferenceField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  readOnly = false,
+  className = '',
+  id,
+  placeholder = 'Select content...',
+}: ReferenceFieldProps) {
+  const fieldId = id || `field-${field.name}`
+  const [showPicker, setShowPicker] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [contentTypeFilter, setContentTypeFilter] = useState<string>('')
+
+  const allowedContentTypes = field.options?.allowedContentTypes ?? []
+  const allowMultiple = field.options?.multiple ?? false
+
+  const selectedIds = useMemo(() => {
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  }, [value])
+
+  const contentTypes = useQuery(api.contentTypes.list, {
+    isActive: true,
+    includeEntryCounts: false,
+  })
+
+  const filteredContentTypes = useMemo(() => {
+    if (!contentTypes?.page) return []
+    if (allowedContentTypes.length === 0) return contentTypes.page
+    return contentTypes.page.filter(
+      (ct) =>
+        allowedContentTypes.includes(ct.name) ||
+        allowedContentTypes.includes(ct._id)
+    )
+  }, [contentTypes?.page, allowedContentTypes])
+
+  const selectedEntry = useQuery(
+    api.entries.get,
+    selectedIds.length === 1 ? { id: selectedIds[0] } : 'skip'
+  )
+
+  const selectedEntries = useQuery(
+    api.entries.list,
+    selectedIds.length > 1
+      ? {
+          paginationOpts: { numItems: 100, cursor: null },
+        }
+      : 'skip'
+  )
+
+  const multipleSelectedEntries = useMemo(() => {
+    if (!selectedEntries?.page || selectedIds.length <= 1) return []
+    return selectedEntries.page.filter((entry) => selectedIds.includes(entry._id))
+  }, [selectedEntries?.page, selectedIds])
+
+  const entriesResult = useQuery(
+    api.entries.list,
+    showPicker
+      ? {
+          contentTypeId: contentTypeFilter || undefined,
+          search: searchQuery || undefined,
+          paginationOpts: { numItems: 50, cursor: null },
+        }
+      : 'skip'
+  )
+
+  const filteredEntries = useMemo(() => {
+    if (!entriesResult?.page) return []
+    if (allowedContentTypes.length === 0) return entriesResult.page
+
+    const allowedIds = filteredContentTypes.map((ct) => ct._id)
+    return entriesResult.page.filter((entry) =>
+      allowedIds.includes(entry.contentTypeId)
+    )
+  }, [entriesResult?.page, allowedContentTypes, filteredContentTypes])
+
+  const getContentTypeName = useCallback(
+    (contentTypeId: string) => {
+      const ct = contentTypes?.page?.find((c) => c._id === contentTypeId)
+      return ct?.displayName || ct?.name || 'Unknown'
+    },
+    [contentTypes?.page]
+  )
+
+  const handleSelect = useCallback(
+    (entryId: string) => {
+      if (allowMultiple) {
+        if (selectedIds.includes(entryId)) {
+          const newIds = selectedIds.filter((id) => id !== entryId)
+          onChange(newIds.length > 0 ? newIds : null)
+        } else {
+          onChange([...selectedIds, entryId])
+        }
+      } else {
+        onChange(entryId)
+        setShowPicker(false)
+      }
+    },
+    [allowMultiple, selectedIds, onChange]
+  )
+
+  const handleRemove = useCallback(
+    (entryId: string) => {
+      if (allowMultiple) {
+        const newIds = selectedIds.filter((id) => id !== entryId)
+        onChange(newIds.length > 0 ? newIds : null)
+      } else {
+        onChange(null)
+      }
+    },
+    [allowMultiple, selectedIds, onChange]
+  )
+
+  const handleClear = useCallback(() => {
+    onChange(null)
+  }, [onChange])
+
+  const renderSelectedEntry = (
+    entry: {
+      _id: string
+      data?: Record<string, unknown>
+      slug?: string
+      status: string
+      contentTypeId: string
+    },
+    showRemove = true
+  ) => (
+    <div
+      key={entry._id}
+      className="flex items-center gap-3 rounded-lg border border-border bg-card p-3"
+    >
+      <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted">
+        <FileText className="size-4 text-muted-foreground" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium text-foreground">
+          {getEntryDisplayTitle(entry)}
+        </p>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">
+            {getContentTypeName(entry.contentTypeId)}
+          </span>
+          <CmsStatusBadge status={entry.status as ContentStatus} />
+        </div>
+      </div>
+      {showRemove && !disabled && !readOnly && (
+        <CmsButton
+          variant="ghost"
+          size="icon-sm"
+          onClick={(e) => {
+            e.stopPropagation()
+            handleRemove(entry._id)
+          }}
+          title="Remove reference"
+        >
+          <X className="size-4" />
+        </CmsButton>
+      )}
+    </div>
+  )
+
+  return (
+    <FieldWrapper field={field} error={error} className={className} id={fieldId}>
+      <div className="space-y-2">
+        {selectedIds.length > 0 ? (
+          <div className="space-y-2">
+            {selectedIds.length === 1 && selectedEntry && renderSelectedEntry(selectedEntry)}
+
+            {selectedIds.length > 1 && multipleSelectedEntries.length > 0 && (
+              <div className="space-y-2">
+                {multipleSelectedEntries.map((entry) => renderSelectedEntry(entry))}
+              </div>
+            )}
+
+            {!disabled && !readOnly && (
+              <div className="flex items-center gap-2">
+                <CmsButton
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowPicker(true)}
+                >
+                  <Plus className="size-4" />
+                  {allowMultiple ? 'Add more' : 'Change'}
+                </CmsButton>
+                {selectedIds.length > 1 && (
+                  <CmsButton variant="ghost" size="sm" onClick={handleClear}>
+                    Clear all
+                  </CmsButton>
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          <button
+            type="button"
+            className={cn(
+              'flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border bg-muted/30 p-6 text-center transition-colors',
+              'hover:border-primary/50 hover:bg-muted/50',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              disabled && 'cursor-not-allowed opacity-50'
+            )}
+            onClick={() => setShowPicker(true)}
+            disabled={disabled || readOnly}
+          >
+            <div className="flex size-10 items-center justify-center rounded-full bg-muted">
+              <Link2 className="size-5 text-muted-foreground" />
+            </div>
+            <span className="text-sm font-medium text-foreground">{placeholder}</span>
+            <span className="text-xs text-muted-foreground">
+              Click to select {allowMultiple ? 'content entries' : 'a content entry'}
+            </span>
+          </button>
+        )}
+      </div>
+
+      <Dialog open={showPicker} onOpenChange={setShowPicker}>
+        <DialogContent className="max-w-lg p-0">
+          <DialogHeader className="px-4 pt-4">
+            <DialogTitle>Select Content</DialogTitle>
+          </DialogHeader>
+
+          <Command className="border-none">
+            <div className="flex items-center gap-2 border-b px-3 pb-2">
+              <CommandInput
+                placeholder="Search entries..."
+                value={searchQuery}
+                onValueChange={setSearchQuery}
+                className="border-none shadow-none focus:ring-0"
+              />
+              {filteredContentTypes.length > 1 && (
+                <Select
+                  value={contentTypeFilter || 'all'}
+                  onValueChange={(v) => setContentTypeFilter(v === 'all' ? '' : v)}
+                >
+                  <SelectTrigger className="h-8 w-[120px] shrink-0">
+                    <SelectValue placeholder="All Types" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Types</SelectItem>
+                    {filteredContentTypes.map((ct) => (
+                      <SelectItem key={ct._id} value={ct._id}>
+                        {ct.displayName || ct.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+
+            <CommandList className="max-h-[300px]">
+              {entriesResult === undefined ? (
+                <div className="flex flex-col items-center justify-center py-8">
+                  <div className="size-5 animate-spin rounded-full border-2 border-muted border-t-primary" />
+                  <p className="mt-2 text-sm text-muted-foreground">Loading...</p>
+                </div>
+              ) : filteredEntries.length > 0 ? (
+                <CommandGroup>
+                  {filteredEntries.map((entry) => {
+                    const isSelected = selectedIds.includes(entry._id)
+                    return (
+                      <CommandItem
+                        key={entry._id}
+                        value={entry._id}
+                        onSelect={() => handleSelect(entry._id)}
+                        className="cursor-pointer"
+                      >
+                        <div className="flex size-8 shrink-0 items-center justify-center rounded bg-muted">
+                          <FileText className="size-4 text-muted-foreground" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-sm font-medium">
+                            {getEntryDisplayTitle(entry)}
+                          </p>
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs text-muted-foreground">
+                              {getContentTypeName(entry.contentTypeId)}
+                            </span>
+                            <Badge
+                              variant="secondary"
+                              className={cn(
+                                'px-1.5 py-0 text-[10px]',
+                                entry.status === 'published' && 'status-published',
+                                entry.status === 'draft' && 'status-draft',
+                                entry.status === 'scheduled' && 'status-scheduled',
+                                entry.status === 'archived' && 'status-archived'
+                              )}
+                            >
+                              {entry.status}
+                            </Badge>
+                          </div>
+                        </div>
+                        {isSelected && (
+                          <Check className="size-4 shrink-0 text-primary" />
+                        )}
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              ) : (
+                <CommandEmpty>
+                  <CmsEmptyState
+                    icon={<Link2 className="size-6" />}
+                    title="No content found"
+                    description={
+                      searchQuery
+                        ? 'Try adjusting your search'
+                        : 'Create some content entries first'
+                    }
+                    className="py-6"
+                  />
+                </CommandEmpty>
+              )}
+            </CommandList>
+          </Command>
+
+          <DialogFooter className="border-t px-4 py-3">
+            {allowMultiple && selectedIds.length > 0 && (
+              <span className="mr-auto text-sm text-muted-foreground">
+                {selectedIds.length} selected
+              </span>
+            )}
+            <CmsButton variant="secondary" onClick={() => setShowPicker(false)}>
+              {allowMultiple ? 'Done' : 'Cancel'}
+            </CmsButton>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </FieldWrapper>
+  )
+}

package/admin/src/components/fields/RichTextField.tsx

@@ -0,0 +1,171 @@
+import { useId, type ChangeEvent, useState, useCallback } from 'react'
+import { FieldWrapper } from './FieldWrapper'
+import type { RichTextFieldProps } from './types'
+import { Textarea } from '~/components/ui/textarea'
+import { Button } from '~/components/ui/button'
+import { Separator } from '~/components/ui/separator'
+import { cn } from '~/lib/cn'
+import { Bold, Italic, Heading2, Link, List, Quote, Code } from 'lucide-react'
+
+interface ToolbarAction {
+  label: string
+  icon: React.ReactNode
+  prefix: string
+  suffix: string
+  block?: boolean
+}
+
+const toolbarActions: ToolbarAction[] = [
+  { label: 'Bold', icon: <Bold className="size-4" />, prefix: '**', suffix: '**' },
+  { label: 'Italic', icon: <Italic className="size-4" />, prefix: '_', suffix: '_' },
+  { label: 'Heading', icon: <Heading2 className="size-4" />, prefix: '## ', suffix: '', block: true },
+  { label: 'Link', icon: <Link className="size-4" />, prefix: '[', suffix: '](url)' },
+  { label: 'List', icon: <List className="size-4" />, prefix: '- ', suffix: '', block: true },
+  { label: 'Quote', icon: <Quote className="size-4" />, prefix: '> ', suffix: '', block: true },
+  { label: 'Code', icon: <Code className="size-4" />, prefix: '`', suffix: '`' },
+]
+
+export function RichTextField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  readOnly = false,
+  className = '',
+  id: providedId,
+  placeholder = 'Write your content here... (Markdown supported)',
+  minHeight = 200,
+}: RichTextFieldProps) {
+  const generatedId = useId()
+  const id = providedId ?? `field-${field.name}-${generatedId}`
+  const [textareaRef, setTextareaRef] = useState<HTMLTextAreaElement | null>(null)
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(e.target.value)
+  }
+
+  const applyFormatting = useCallback(
+    (action: ToolbarAction) => {
+      if (!textareaRef || disabled || readOnly) return
+
+      const start = textareaRef.selectionStart
+      const end = textareaRef.selectionEnd
+      const selectedText = value.slice(start, end)
+      const currentValue = value
+
+      let newValue: string
+      let newCursorPos: number
+
+      if (action.block) {
+        const lineStart = currentValue.lastIndexOf('\n', start - 1) + 1
+        const beforeLine = currentValue.slice(0, lineStart)
+        const afterLine = currentValue.slice(lineStart)
+
+        if (afterLine.startsWith(action.prefix)) {
+          newValue = beforeLine + afterLine.slice(action.prefix.length)
+          newCursorPos = start - action.prefix.length
+        } else {
+          newValue = beforeLine + action.prefix + afterLine
+          newCursorPos = start + action.prefix.length
+        }
+      } else {
+        if (selectedText) {
+          newValue =
+            currentValue.slice(0, start) +
+            action.prefix +
+            selectedText +
+            action.suffix +
+            currentValue.slice(end)
+          newCursorPos = end + action.prefix.length + action.suffix.length
+        } else {
+          const placeholderText = action.label.toLowerCase()
+          newValue =
+            currentValue.slice(0, start) +
+            action.prefix +
+            placeholderText +
+            action.suffix +
+            currentValue.slice(end)
+          newCursorPos = start + action.prefix.length
+        }
+      }
+
+      onChange(newValue)
+
+      requestAnimationFrame(() => {
+        if (textareaRef) {
+          textareaRef.focus()
+          textareaRef.setSelectionRange(newCursorPos, newCursorPos)
+        }
+      })
+    },
+    [textareaRef, value, onChange, disabled, readOnly]
+  )
+
+  const { maxLength } = field.options ?? {}
+
+  return (
+    <FieldWrapper field={field} error={error} className={className} id={id}>
+      <div
+        className={cn(
+          'overflow-hidden rounded-md border border-input',
+          error && 'border-destructive'
+        )}
+      >
+        {!readOnly && !disabled && (
+          <>
+            <div
+              className="flex flex-wrap gap-1 bg-muted/50 p-1.5"
+              role="toolbar"
+              aria-label="Formatting options"
+            >
+              {toolbarActions.map((action) => (
+                <Button
+                  key={action.label}
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  onClick={() => applyFormatting(action)}
+                  title={action.label}
+                  aria-label={action.label}
+                >
+                  {action.icon}
+                </Button>
+              ))}
+            </div>
+            <Separator />
+          </>
+        )}
+
+        <Textarea
+          ref={setTextareaRef}
+          id={id}
+          name={field.name}
+          value={value ?? ''}
+          onChange={handleChange}
+          disabled={disabled}
+          readOnly={readOnly}
+          required={field.required}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          className="resize-none rounded-none border-0 focus-visible:ring-0"
+          style={{ minHeight: `${minHeight}px` }}
+          aria-invalid={!!error}
+          aria-describedby={
+            error ? `${id}-error` : field.description ? `${id}-description` : undefined
+          }
+        />
+
+        <div className="flex items-center justify-between border-t bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground">
+          <span>Markdown supported</span>
+          {maxLength && (
+            <span>
+              {(value ?? '').length} / {maxLength}
+            </span>
+          )}
+        </div>
+      </div>
+    </FieldWrapper>
+  )
+}

package/admin/src/components/fields/SelectField.tsx

@@ -0,0 +1,62 @@
+import { useId } from 'react'
+import { FieldWrapper } from './FieldWrapper'
+import type { BaseFieldProps } from './types'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/ui/select'
+import { cn } from '~/lib/cn'
+
+export interface SelectFieldProps extends BaseFieldProps<string> {
+  placeholder?: string
+}
+
+export function SelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  readOnly = false,
+  className = '',
+  id,
+  placeholder = 'Select an option...',
+}: SelectFieldProps) {
+  const generatedId = useId()
+  const fieldId = id ?? `field-${field.name}-${generatedId}`
+  const options = field.options?.options ?? []
+
+  const handleChange = (newValue: string) => {
+    onChange(newValue)
+  }
+
+  return (
+    <FieldWrapper field={field} error={error} className={className} id={fieldId}>
+      <Select
+        value={value ?? ''}
+        onValueChange={handleChange}
+        disabled={disabled || readOnly}
+        required={field.required}
+      >
+        <SelectTrigger
+          id={fieldId}
+          className={cn(error && 'border-destructive focus:ring-destructive')}
+          aria-invalid={!!error}
+          aria-describedby={error ? `${fieldId}-error` : undefined}
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </FieldWrapper>
+  )
+}