convex-cms 0.0.5-alpha.0 → 0.0.5-alpha.3

package/admin/src/components/fields/types.ts

@@ -0,0 +1,217 @@
+/**
+ * Type definitions for field renderer components.
+ *
+ * These types define the props interface for all field renderers,
+ * ensuring consistent behavior across different field types.
+ */
+
+/**
+ * Built-in field types supported by the CMS.
+ */
+export type BuiltInFieldType =
+  | 'text'
+  | 'richText'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'datetime'
+  | 'reference'
+  | 'media'
+  | 'json'
+  | 'select'
+  | 'multiSelect'
+  | 'tags'
+  | 'category';
+
+/**
+ * Field types supported by the CMS.
+ * Includes built-in types and allows custom types via string.
+ */
+export type FieldType = BuiltInFieldType | (string & {});
+
+/**
+ * Select option for select/multiSelect fields.
+ */
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * Field-specific options that control validation and behavior.
+ * These are passed from the content type field definition.
+ */
+export interface FieldOptions {
+  // Text fields
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+
+  // Number fields
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Number of decimal places. 0 for integer. */
+  precision?: number;
+
+  // Reference fields
+  allowedContentTypes?: string[];
+  multiple?: boolean;
+  minItems?: number;
+
+  // Media fields
+  allowedMimeTypes?: string[];
+  maxFileSize?: number;
+
+  // Select fields
+  options?: SelectOption[];
+
+  // Rich text fields
+  allowedBlocks?: string[];
+  allowedMarks?: string[];
+
+  // Tag fields
+  taxonomyId?: string;
+  allowCreate?: boolean;
+  maxTags?: number;
+  minTags?: number;
+
+  // Category fields
+  allowMultiple?: boolean;
+}
+
+/**
+ * Field definition as stored in content type.
+ */
+export interface FieldDefinition {
+  /** Unique field identifier within the content type */
+  name: string;
+  /** Human-readable label */
+  label: string;
+  /** Field type */
+  type: FieldType;
+  /** Whether the field is required */
+  required: boolean;
+  /** Whether the field is searchable */
+  searchable?: boolean;
+  /** Whether the field supports localization */
+  localized?: boolean;
+  /** Help text displayed below the field */
+  description?: string;
+  /** Default value for new entries */
+  defaultValue?: unknown;
+  /** Type-specific options */
+  options?: FieldOptions;
+}
+
+/**
+ * Validation error for a field.
+ */
+export interface FieldError {
+  /** Error message to display */
+  message: string;
+  /** Optional error code for programmatic handling */
+  code?: string;
+}
+
+/**
+ * Base props shared by all field renderer components.
+ */
+export interface BaseFieldProps<T = unknown> {
+  /** The field definition from the content type */
+  field: FieldDefinition;
+  /** Current value of the field */
+  value: T;
+  /** Callback when the value changes */
+  onChange: (value: T) => void;
+  /** Validation error to display */
+  error?: FieldError;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Whether the field is in read-only mode */
+  readOnly?: boolean;
+  /** Optional CSS class name */
+  className?: string;
+  /** Unique ID for the field (for label association) */
+  id?: string;
+}
+
+/**
+ * Props for text input field.
+ */
+export interface TextFieldProps extends BaseFieldProps<string> {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Input type (text, email, url, etc.) */
+  inputType?: 'text' | 'email' | 'url' | 'tel';
+}
+
+/**
+ * Props for textarea field.
+ */
+export interface TextAreaFieldProps extends BaseFieldProps<string> {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Number of visible rows */
+  rows?: number;
+  /** Whether to auto-resize based on content */
+  autoResize?: boolean;
+}
+
+/**
+ * Props for number input field.
+ */
+export interface NumberFieldProps extends BaseFieldProps<number | null> {
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+/**
+ * Props for boolean toggle field.
+ */
+export interface BooleanFieldProps extends BaseFieldProps<boolean> {
+  /** Label for the true state */
+  trueLabel?: string;
+  /** Label for the false state */
+  falseLabel?: string;
+}
+
+/**
+ * Props for date picker field.
+ */
+export interface DateFieldProps extends BaseFieldProps<string | null> {
+  /** Whether to include time picker (datetime) */
+  includeTime?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+/**
+ * Props for rich text (markdown) field.
+ */
+export interface RichTextFieldProps extends BaseFieldProps<string> {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Minimum height for the editor */
+  minHeight?: number;
+}
+
+/**
+ * Props for the unified FieldRenderer component.
+ */
+export interface FieldRendererProps {
+  /** The field definition from the content type */
+  field: FieldDefinition;
+  /** Current value of the field */
+  value: unknown;
+  /** Callback when the value changes */
+  onChange: (value: unknown) => void;
+  /** Validation error to display */
+  error?: FieldError;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Whether the field is in read-only mode */
+  readOnly?: boolean;
+  /** Optional CSS class name */
+  className?: string;
+}

package/admin/src/components/filters/TaxonomyFilter.tsx

@@ -0,0 +1,254 @@
+import { useState, useCallback, useMemo } from 'react'
+import { useQuery } from 'convex/react'
+import { api } from '../../../convex/_generated/api'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '~/components/ui/popover'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '~/components/ui/command'
+import { Badge } from '~/components/ui/badge'
+import { Checkbox } from '~/components/ui/checkbox'
+import { cn } from '~/lib/cn'
+import { Tags, ChevronDown, X, Check } from 'lucide-react'
+
+interface TaxonomyTerm {
+  _id: string
+  name: string
+  slug: string
+  color?: string
+  usageCount: number
+}
+
+export interface TaxonomyFilterProps {
+  selectedTermIds: string[]
+  onChange: (termIds: string[]) => void
+  taxonomyId?: string
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function TaxonomyFilter({
+  selectedTermIds,
+  onChange,
+  taxonomyId,
+  placeholder = 'Filter by tags...',
+  disabled = false,
+  className,
+}: TaxonomyFilterProps) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+
+  const taxonomiesResult = useQuery(api.taxonomies.list, { isActive: true })
+  const taxonomies = taxonomiesResult?.page ?? []
+
+  const activeTaxonomy = useMemo(() => {
+    if (taxonomyId) {
+      return taxonomies.find((t) => t._id === taxonomyId)
+    }
+    return null
+  }, [taxonomyId, taxonomies])
+
+  const targetTaxonomyId = taxonomyId ?? taxonomies[0]?._id
+
+  const termsResult = useQuery(
+    api.taxonomies.listTerms,
+    targetTaxonomyId
+      ? {
+          taxonomyId: targetTaxonomyId,
+          paginationOpts: { numItems: 200, cursor: null },
+        }
+      : 'skip'
+  )
+  const terms = (termsResult?.page ?? []) as TaxonomyTerm[]
+
+  const selectedTermsDetails = useMemo(() => {
+    return terms.filter((t) => selectedTermIds.includes(t._id))
+  }, [terms, selectedTermIds])
+
+  const filteredTerms = useMemo(() => {
+    if (!search.trim()) return terms
+    const lowerSearch = search.toLowerCase()
+    return terms.filter((term) => term.name.toLowerCase().includes(lowerSearch))
+  }, [terms, search])
+
+  const handleToggleTerm = useCallback(
+    (termId: string) => {
+      if (selectedTermIds.includes(termId)) {
+        onChange(selectedTermIds.filter((id) => id !== termId))
+      } else {
+        onChange([...selectedTermIds, termId])
+      }
+    },
+    [selectedTermIds, onChange]
+  )
+
+  const handleClear = useCallback(() => {
+    onChange([])
+    setOpen(false)
+  }, [onChange])
+
+  const handleRemoveTerm = useCallback(
+    (termId: string, e: React.MouseEvent) => {
+      e.stopPropagation()
+      onChange(selectedTermIds.filter((id) => id !== termId))
+    },
+    [selectedTermIds, onChange]
+  )
+
+  const displayTaxonomyName = activeTaxonomy?.displayName ?? taxonomies[0]?.displayName ?? 'Tags'
+  const isLoading = taxonomiesResult === undefined || (!!targetTaxonomyId && termsResult === undefined)
+  const hasNoTaxonomies = taxonomies.length === 0 && taxonomiesResult !== undefined
+
+  if (hasNoTaxonomies) {
+    return null
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <CmsButton
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || isLoading}
+          className={cn(
+            'h-9 min-w-[140px] justify-between gap-2',
+            selectedTermIds.length > 0 && 'border-primary/50',
+            className
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <Tags className="size-4 text-muted-foreground" />
+            {selectedTermIds.length === 0 ? (
+              <span className="text-muted-foreground">{placeholder}</span>
+            ) : selectedTermIds.length === 1 ? (
+              <span className="max-w-[100px] truncate">
+                {selectedTermsDetails[0]?.name ?? 'Tag'}
+              </span>
+            ) : (
+              <span>{selectedTermIds.length} tags</span>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            {selectedTermIds.length > 0 && (
+              <Badge
+                variant="secondary"
+                className="size-5 rounded-full p-0 text-xs"
+              >
+                {selectedTermIds.length}
+              </Badge>
+            )}
+            <ChevronDown className="size-4 text-muted-foreground" />
+          </div>
+        </CmsButton>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-[280px] p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={`Search ${displayTaxonomyName.toLowerCase()}...`}
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList>
+            {filteredTerms.length === 0 ? (
+              <CommandEmpty>
+                {terms.length === 0 ? `No ${displayTaxonomyName.toLowerCase()} found` : 'No matches'}
+              </CommandEmpty>
+            ) : (
+              <CommandGroup heading={displayTaxonomyName}>
+                {filteredTerms.map((term) => (
+                  <TermItem
+                    key={term._id}
+                    term={term}
+                    isSelected={selectedTermIds.includes(term._id)}
+                    onToggle={() => handleToggleTerm(term._id)}
+                  />
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+
+          {selectedTermIds.length > 0 && (
+            <>
+              <CommandSeparator />
+              <div className="p-2">
+                <div className="mb-2 flex flex-wrap gap-1">
+                  {selectedTermsDetails.map((term) => (
+                    <Badge
+                      key={term._id}
+                      variant="secondary"
+                      className="gap-1 pr-1"
+                      style={
+                        term.color
+                          ? { backgroundColor: term.color, color: '#fff' }
+                          : undefined
+                      }
+                    >
+                      {term.name}
+                      <button
+                        type="button"
+                        className="ml-0.5 rounded-full p-0.5 hover:bg-black/10"
+                        onClick={(e) => handleRemoveTerm(term._id, e)}
+                        aria-label={`Remove ${term.name}`}
+                      >
+                        <X className="size-3" />
+                      </button>
+                    </Badge>
+                  ))}
+                </div>
+                <CmsButton
+                  variant="ghost"
+                  size="sm"
+                  className="w-full"
+                  onClick={handleClear}
+                >
+                  Clear all filters
+                </CmsButton>
+              </div>
+            </>
+          )}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface TermItemProps {
+  term: TaxonomyTerm
+  isSelected: boolean
+  onToggle: () => void
+}
+
+function TermItem({ term, isSelected, onToggle }: TermItemProps) {
+  return (
+    <CommandItem onSelect={onToggle} className="cursor-pointer">
+      <Checkbox
+        checked={isSelected}
+        className="mr-2"
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+      {term.color && (
+        <span
+          className="size-2.5 shrink-0 rounded-full"
+          style={{ backgroundColor: term.color }}
+        />
+      )}
+      <span className="flex-1 truncate">{term.name}</span>
+      <span className="text-xs text-muted-foreground">{term.usageCount}</span>
+      {isSelected && <Check className="ml-1 size-4 text-primary" />}
+    </CommandItem>
+  )
+}

package/admin/src/components/filters/index.ts

@@ -0,0 +1 @@
+export { TaxonomyFilter, type TaxonomyFilterProps } from './TaxonomyFilter'

package/admin/src/components/index.ts

@@ -0,0 +1,8 @@
+export { AdminLayout } from './AdminLayout'
+export { Sidebar } from './Sidebar'
+export { Header } from './Header'
+export { RouteGuard, type RouteGuardProps } from './RouteGuard'
+export { UploadDropzone, type UploadDropzoneProps, type UploadedFile } from './UploadDropzone'
+export { ContentTypeFormModal } from './ContentTypeFormModal'
+export { ErrorBoundary } from './ErrorBoundary'
+export { ErrorState, ErrorAlert } from './ErrorState'

package/admin/src/components/media/MediaAssetActions.tsx

@@ -0,0 +1,115 @@
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { CmsButton } from "~/components/cmsds/CmsButton";
+import {
+	Eye,
+	Pencil,
+	FolderInput,
+	Download,
+	Link2,
+	Trash2,
+	MoreVertical,
+} from "lucide-react";
+
+export interface MediaAssetForActions {
+	_id: string;
+	name: string;
+	url: string | null;
+}
+
+interface MediaAssetActionsProps {
+	asset: MediaAssetForActions;
+	onView?: () => void;
+	onEdit?: () => void;
+	onMove?: () => void;
+	onDelete?: () => void;
+}
+
+export function MediaAssetActions({
+	asset,
+	onView,
+	onEdit,
+	onMove,
+	onDelete,
+}: MediaAssetActionsProps) {
+	const handleDownload = () => {
+		if (!asset.url) return;
+		const link = document.createElement("a");
+		link.href = asset.url;
+		link.download = asset.name;
+		link.target = "_blank";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	};
+
+	const handleCopyUrl = async () => {
+		if (!asset.url) return;
+		await navigator.clipboard.writeText(asset.url);
+	};
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<CmsButton
+					variant="ghost"
+					size="icon-sm"
+					className="opacity-0 group-hover:opacity-100"
+					onClick={(e) => e.stopPropagation()}
+				>
+					<MoreVertical className="size-4" />
+				</CmsButton>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent
+				// align="start"
+				side="bottom"
+				onClick={(e) => e.stopPropagation()}
+			>
+				{onView && (
+					<DropdownMenuItem onClick={onView}>
+						<Eye className="mr-2 size-4" />
+						View Details
+					</DropdownMenuItem>
+				)}
+				{onEdit && (
+					<DropdownMenuItem onClick={onEdit}>
+						<Pencil className="mr-2 size-4" />
+						Edit
+					</DropdownMenuItem>
+				)}
+				{onMove && (
+					<DropdownMenuItem onClick={onMove}>
+						<FolderInput className="mr-2 size-4" />
+						Move to...
+					</DropdownMenuItem>
+				)}
+				<DropdownMenuSeparator />
+				<DropdownMenuItem onClick={handleDownload} disabled={!asset.url}>
+					<Download className="mr-2 size-4" />
+					Download
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={handleCopyUrl} disabled={!asset.url}>
+					<Link2 className="mr-2 size-4" />
+					Copy URL
+				</DropdownMenuItem>
+				{onDelete && (
+					<>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							onClick={onDelete}
+							className="text-destructive focus:text-destructive"
+						>
+							<Trash2 className="mr-2 size-4" />
+							Delete
+						</DropdownMenuItem>
+					</>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}