convex-cms 0.0.3 → 0.0.5-alpha.2

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

@@ -0,0 +1,180 @@
+import type { FieldRendererProps } from "./types";
+import { TextField } from "./TextField";
+import { TextAreaField as _TextAreaField } from "./TextAreaField";
+import { NumberField } from "./NumberField";
+import { BooleanField } from "./BooleanField";
+import { DateField } from "./DateField";
+import { RichTextField } from "./RichTextField";
+import { SelectField } from "./SelectField";
+import { MultiSelectField } from "./MultiSelectField";
+import { JsonField } from "./JsonField";
+import { MediaField } from "./MediaField";
+import { ReferenceField } from "./ReferenceField";
+import { TagField } from "./TagField";
+import { CategoryField } from "./CategoryField";
+import { DefaultFieldRenderer } from "./DefaultFieldRenderer";
+import { getFieldRenderer } from "./registry";
+
+/**
+ * FieldRenderer is the main entry point for rendering any field type.
+ *
+ * It maps field types to their respective components and passes
+ * the appropriate props. This allows forms to render fields
+ * dynamically based on content type definitions.
+ *
+ * For custom field types, it uses the field renderer registry.
+ * If no custom renderer is registered, it falls back to DefaultFieldRenderer.
+ *
+ * Usage:
+ * ```tsx
+ * <FieldRenderer
+ *   field={fieldDefinition}
+ *   value={data[fieldDefinition.name]}
+ *   onChange={(value) => setData({ ...data, [fieldDefinition.name]: value })}
+ *   error={errors[fieldDefinition.name]}
+ * />
+ * ```
+ */
+export function FieldRenderer({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  readOnly = false,
+  className = "",
+}: FieldRendererProps) {
+  const commonProps = {
+    field,
+    error,
+    disabled,
+    readOnly,
+    className,
+  };
+
+  switch (field.type) {
+    case "text":
+      return (
+        <TextField
+          {...commonProps}
+          value={(value as string) ?? ""}
+          onChange={onChange as (value: string) => void}
+        />
+      );
+
+    case "richText":
+      return (
+        <RichTextField
+          {...commonProps}
+          value={(value as string) ?? ""}
+          onChange={onChange as (value: string) => void}
+        />
+      );
+
+    case "number":
+      return (
+        <NumberField
+          {...commonProps}
+          value={(value as number | null) ?? null}
+          onChange={onChange as (value: number | null) => void}
+        />
+      );
+
+    case "boolean":
+      return (
+        <BooleanField
+          {...commonProps}
+          value={(value as boolean) ?? false}
+          onChange={onChange as (value: boolean) => void}
+        />
+      );
+
+    case "date":
+      return (
+        <DateField
+          {...commonProps}
+          value={(value as string | null) ?? null}
+          onChange={onChange as (value: string | null) => void}
+          includeTime={false}
+        />
+      );
+
+    case "datetime":
+      return (
+        <DateField
+          {...commonProps}
+          value={(value as string | null) ?? null}
+          onChange={onChange as (value: string | null) => void}
+          includeTime={true}
+        />
+      );
+
+    case "select":
+      return (
+        <SelectField
+          {...commonProps}
+          value={(value as string) ?? ""}
+          onChange={onChange as (value: string) => void}
+        />
+      );
+
+    case "multiSelect":
+      return (
+        <MultiSelectField
+          {...commonProps}
+          value={(value as string[]) ?? []}
+          onChange={onChange as (value: string[]) => void}
+        />
+      );
+
+    case "json":
+      return <JsonField {...commonProps} value={value ?? null} onChange={onChange} />;
+
+    case "media":
+      return (
+        <MediaField
+          {...commonProps}
+          value={(value as string | null) ?? null}
+          onChange={onChange as (value: string | null) => void}
+        />
+      );
+
+    case "reference":
+      return (
+        <ReferenceField
+          {...commonProps}
+          value={(value as string | string[] | null) ?? null}
+          onChange={onChange as (value: string | string[] | null) => void}
+        />
+      );
+
+    case "tags":
+      return (
+        <TagField
+          {...commonProps}
+          value={(value as string[]) ?? []}
+          onChange={onChange as (value: string[]) => void}
+        />
+      );
+
+    case "category":
+      return (
+        <CategoryField
+          {...commonProps}
+          value={(value as string | string[] | null) ?? null}
+          onChange={onChange as (value: string | string[] | null) => void}
+        />
+      );
+
+    default: {
+      // Check if a custom renderer is registered for this field type
+      const CustomRenderer = getFieldRenderer(field.type);
+      if (CustomRenderer) {
+        return <CustomRenderer {...commonProps} value={value} onChange={onChange} />;
+      }
+
+      // Fall back to the default JSON renderer for unknown types
+      return <DefaultFieldRenderer {...commonProps} value={value} onChange={onChange} />;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react'
+import type { FieldDefinition, FieldError } from './types'
+import { Label } from '~/components/ui/label'
+import { cn } from '~/lib/cn'
+
+interface FieldWrapperProps {
+  field: FieldDefinition
+  children: ReactNode
+  error?: FieldError
+  className?: string
+  id: string
+  customLabel?: ReactNode
+}
+
+export function FieldWrapper({
+  field,
+  children,
+  error,
+  className = '',
+  id,
+  customLabel,
+}: FieldWrapperProps) {
+  const hasError = !!error
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Label
+        htmlFor={id}
+        className={cn(
+          'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+          hasError && 'text-destructive'
+        )}
+      >
+        {customLabel ?? field.label}
+        {field.required && <span className="ml-1 text-destructive">*</span>}
+      </Label>
+
+      <div className="relative">{children}</div>
+
+      {field.description && !hasError && (
+        <p id={`${id}-description`} className="text-[13px] text-muted-foreground">
+          {field.description}
+        </p>
+      )}
+
+      {hasError && (
+        <p
+          id={`${id}-error`}
+          className="text-[13px] font-medium text-destructive"
+          role="alert"
+        >
+          {error.message}
+        </p>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,172 @@
+import { useState, useCallback, useEffect, useId } from 'react'
+import { FieldWrapper } from './FieldWrapper'
+import type { BaseFieldProps } from './types'
+import { Textarea } from '~/components/ui/textarea'
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/cn'
+import { Check, AlertCircle } from 'lucide-react'
+
+export interface JsonFieldProps extends BaseFieldProps<unknown> {
+  placeholder?: string
+  rows?: number
+}
+
+export function JsonField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  readOnly = false,
+  className = '',
+  id,
+  placeholder = '{\n  \n}',
+  rows = 8,
+}: JsonFieldProps) {
+  const generatedId = useId()
+  const fieldId = id ?? `field-${field.name}-${generatedId}`
+
+  const [textValue, setTextValue] = useState(() => {
+    if (value === null || value === undefined) return ''
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return ''
+    }
+  })
+
+  const [syntaxError, setSyntaxError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (value === null || value === undefined) {
+      setTextValue('')
+      return
+    }
+    try {
+      const formatted = JSON.stringify(value, null, 2)
+      const currentParsed = textValue ? JSON.parse(textValue) : null
+      if (JSON.stringify(currentParsed) !== JSON.stringify(value)) {
+        setTextValue(formatted)
+      }
+    } catch {
+      // Keep current text
+    }
+  }, [value])
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newText = e.target.value
+      setTextValue(newText)
+
+      if (newText.trim() === '') {
+        setSyntaxError(null)
+        onChange(null)
+        return
+      }
+
+      try {
+        const parsed = JSON.parse(newText)
+        setSyntaxError(null)
+        onChange(parsed)
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Invalid JSON'
+        setSyntaxError(message)
+      }
+    },
+    [onChange]
+  )
+
+  const handleFormat = useCallback(() => {
+    if (textValue.trim() === '') return
+    try {
+      const parsed = JSON.parse(textValue)
+      const formatted = JSON.stringify(parsed, null, 2)
+      setTextValue(formatted)
+      setSyntaxError(null)
+    } catch {
+      // Can't format invalid JSON
+    }
+  }, [textValue])
+
+  const handleMinify = useCallback(() => {
+    if (textValue.trim() === '') return
+    try {
+      const parsed = JSON.parse(textValue)
+      const minified = JSON.stringify(parsed)
+      setTextValue(minified)
+      setSyntaxError(null)
+    } catch {
+      // Can't minify invalid JSON
+    }
+  }, [textValue])
+
+  const displayError = syntaxError
+    ? { message: `JSON syntax error: ${syntaxError}`, code: 'SYNTAX_ERROR' }
+    : error
+
+  return (
+    <FieldWrapper field={field} error={displayError} className={className} id={fieldId}>
+      <div
+        className={cn(
+          'overflow-hidden rounded-md border border-input',
+          displayError && 'border-destructive'
+        )}
+      >
+        <div className="flex items-center gap-1 border-b bg-muted/50 px-2 py-1.5">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={handleFormat}
+            disabled={disabled || readOnly || !!syntaxError}
+          >
+            Format
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={handleMinify}
+            disabled={disabled || readOnly || !!syntaxError}
+          >
+            Minify
+          </Button>
+        </div>
+
+        <Textarea
+          id={fieldId}
+          name={field.name}
+          value={textValue}
+          onChange={handleChange}
+          placeholder={placeholder}
+          rows={rows}
+          disabled={disabled}
+          readOnly={readOnly}
+          required={field.required}
+          aria-invalid={!!displayError}
+          aria-describedby={displayError ? `${fieldId}-error` : undefined}
+          className="resize-none rounded-none border-0 font-mono text-sm focus-visible:ring-0"
+          spellCheck={false}
+        />
+
+        <div className="flex items-center justify-between border-t bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground">
+          <span>Enter valid JSON data</span>
+          {syntaxError && (
+            <span className="flex items-center gap-1 text-destructive">
+              <AlertCircle className="size-3" />
+              Invalid
+            </span>
+          )}
+          {!syntaxError && textValue.trim() !== '' && (
+            <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+              <Check className="size-3" />
+              Valid JSON
+            </span>
+          )}
+        </div>
+      </div>
+    </FieldWrapper>
+  )
+}