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

package/admin/src/components/cmsds/CmsEmptyState.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { cn } from '~/lib/cn'
+import { CmsButton, type CmsButtonProps } from './CmsButton'
+
+export interface CmsEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  action?: {
+    label: string
+    onClick: () => void
+    variant?: CmsButtonProps['variant']
+  }
+}
+
+export function CmsEmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}: CmsEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center py-12 text-center',
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="mb-4 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-base font-semibold text-foreground">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+          {description}
+        </p>
+      )}
+      {action && (
+        <CmsButton
+          variant={action.variant ?? 'primary'}
+          onClick={action.onClick}
+          className="mt-4"
+        >
+          {action.label}
+        </CmsButton>
+      )}
+    </div>
+  )
+}

package/admin/src/components/cmsds/CmsField.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { Label } from '~/components/ui/label'
+import { cn } from '~/lib/cn'
+
+export interface CmsFieldProps {
+  label?: string
+  description?: string
+  error?: string
+  required?: boolean
+  htmlFor?: string
+  className?: string
+  children: React.ReactNode
+}
+
+export function CmsField({
+  label,
+  description,
+  error,
+  required,
+  htmlFor,
+  className,
+  children,
+}: CmsFieldProps) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {label && (
+        <Label
+          htmlFor={htmlFor}
+          className={cn(
+            'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+            error && 'text-destructive'
+          )}
+        >
+          {label}
+          {required && <span className="ml-1 text-destructive">*</span>}
+        </Label>
+      )}
+      {children}
+      {description && !error && (
+        <p className="text-[13px] text-muted-foreground">{description}</p>
+      )}
+      {error && (
+        <p className="text-[13px] font-medium text-destructive">{error}</p>
+      )}
+    </div>
+  )
+}

package/admin/src/components/cmsds/CmsPageHeader.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { cn } from '~/lib/cn'
+
+export interface CmsPageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description?: string
+  actions?: React.ReactNode
+  breadcrumbs?: React.ReactNode
+}
+
+export function CmsPageHeader({
+  title,
+  description,
+  actions,
+  breadcrumbs,
+  className,
+  ...props
+}: CmsPageHeaderProps) {
+  return (
+    <div className={cn('mb-6', className)} {...props}>
+      {breadcrumbs && <div className="mb-2">{breadcrumbs}</div>}
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">
+            {title}
+          </h1>
+          {description && (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          )}
+        </div>
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+    </div>
+  )
+}

package/admin/src/components/cmsds/CmsStatusBadge.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { Badge } from "~/components/ui/badge";
+import { cn } from "~/lib/cn";
+
+export type ContentStatus = "draft" | "published" | "scheduled" | "archived";
+
+export type WorkflowStateColor =
+  | "gray"
+  | "yellow"
+  | "blue"
+  | "green"
+  | "red"
+  | "purple"
+  | "orange";
+
+export interface CustomStatusConfig {
+  name: string;
+  displayName: string;
+  color: WorkflowStateColor;
+}
+
+export interface CmsStatusBadgeProps
+  extends Omit<React.ComponentProps<typeof Badge>, "variant"> {
+  status: ContentStatus | string;
+  customConfig?: CustomStatusConfig;
+}
+
+const statusConfig: Record<
+  ContentStatus,
+  { label: string; className: string; icon: React.ReactNode }
+> = {
+  draft: {
+    label: "Draft",
+    className: "status-draft",
+    icon: (
+      <svg className="size-3" fill="currentColor" viewBox="0 0 8 8">
+        <circle cx="4" cy="4" r="3" />
+      </svg>
+    ),
+  },
+  published: {
+    label: "Published",
+    className: "status-published",
+    icon: (
+      <svg
+        className="size-3"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  scheduled: {
+    label: "Scheduled",
+    className: "status-scheduled",
+    icon: (
+      <svg
+        className="size-3"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path strokeLinecap="round" d="M12 6v6l4 2" />
+      </svg>
+    ),
+  },
+  archived: {
+    label: "Archived",
+    className: "status-archived",
+    icon: (
+      <svg
+        className="size-3"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+        />
+      </svg>
+    ),
+  },
+};
+
+const colorToClassName: Record<WorkflowStateColor, string> = {
+  gray: "bg-muted text-muted-foreground",
+  yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+  blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+  green: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+  red: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+  purple: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",
+  orange: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400",
+};
+
+function getDefaultIcon() {
+  return (
+    <svg className="size-3" fill="currentColor" viewBox="0 0 8 8">
+      <circle cx="4" cy="4" r="3" />
+    </svg>
+  );
+}
+
+export function CmsStatusBadge({ status, customConfig, className, ...props }: CmsStatusBadgeProps) {
+  if (customConfig) {
+    return (
+      <Badge
+        variant="secondary"
+        className={cn(
+          "gap-1.5 px-2 py-0.5 text-xs font-medium",
+          colorToClassName[customConfig.color],
+          className
+        )}
+        {...props}
+      >
+        {getDefaultIcon()}
+        {customConfig.displayName}
+      </Badge>
+    );
+  }
+
+  const config = statusConfig[status as ContentStatus];
+  if (!config) {
+    return (
+      <Badge
+        variant="secondary"
+        className={cn("gap-1.5 px-2 py-0.5 text-xs font-medium", colorToClassName.gray, className)}
+        {...props}
+      >
+        {getDefaultIcon()}
+        {status}
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge
+      variant="secondary"
+      className={cn("gap-1.5 px-2 py-0.5 text-xs font-medium", config.className, className)}
+      {...props}
+    >
+      {config.icon}
+      {config.label}
+    </Badge>
+  );
+}

package/admin/src/components/cmsds/CmsSurface.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { cn } from '~/lib/cn'
+
+export interface CmsSurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+  elevation?: 'base' | 'elevated' | 'floating'
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  rounded?: 'none' | 'sm' | 'md' | 'lg'
+  asChild?: boolean
+}
+
+const elevationClasses = {
+  base: 'surface-base',
+  elevated: 'surface-elevated',
+  floating: 'surface-floating',
+} as const
+
+const paddingClasses = {
+  none: '',
+  sm: 'p-3',
+  md: 'p-4',
+  lg: 'p-6',
+} as const
+
+const roundedClasses = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+} as const
+
+export function CmsSurface({
+  elevation = 'base',
+  padding = 'md',
+  rounded = 'lg',
+  className,
+  children,
+  ...props
+}: CmsSurfaceProps) {
+  return (
+    <div
+      className={cn(
+        elevationClasses[elevation],
+        paddingClasses[padding],
+        roundedClasses[rounded],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/admin/src/components/cmsds/CmsTable.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/components/ui/table'
+import { Checkbox } from '~/components/ui/checkbox'
+import { cn } from '~/lib/cn'
+import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react'
+
+export interface CmsTableColumn<T> {
+  key: string
+  header: string
+  cell: (row: T) => React.ReactNode
+  sortable?: boolean
+  className?: string
+}
+
+export interface CmsTableProps<T> {
+  columns: CmsTableColumn<T>[]
+  data: T[]
+  getRowId: (row: T) => string
+  selectable?: boolean
+  selectedIds?: Set<string>
+  onSelectionChange?: (ids: Set<string>) => void
+  sortColumn?: string
+  sortDirection?: 'asc' | 'desc'
+  onSort?: (column: string) => void
+  onRowClick?: (row: T) => void
+  emptyMessage?: string
+  className?: string
+}
+
+export function CmsTable<T>({
+  columns,
+  data,
+  getRowId,
+  selectable,
+  selectedIds = new Set(),
+  onSelectionChange,
+  sortColumn,
+  sortDirection,
+  onSort,
+  onRowClick,
+  emptyMessage = 'No items found',
+  className,
+}: CmsTableProps<T>) {
+  const allSelected = data.length > 0 && data.every((row) => selectedIds.has(getRowId(row)))
+  const someSelected = data.some((row) => selectedIds.has(getRowId(row)))
+
+  const handleSelectAll = (checked: boolean) => {
+    if (!onSelectionChange) return
+    if (checked) {
+      onSelectionChange(new Set(data.map(getRowId)))
+    } else {
+      onSelectionChange(new Set())
+    }
+  }
+
+  const handleSelectRow = (rowId: string, checked: boolean) => {
+    if (!onSelectionChange) return
+    const newSelection = new Set(selectedIds)
+    if (checked) {
+      newSelection.add(rowId)
+    } else {
+      newSelection.delete(rowId)
+    }
+    onSelectionChange(newSelection)
+  }
+
+  const renderSortIcon = (column: CmsTableColumn<T>) => {
+    if (!column.sortable) return null
+    if (sortColumn !== column.key) {
+      return <ChevronsUpDown className="ml-1 inline size-3.5 text-muted-foreground" />
+    }
+    return sortDirection === 'asc' ? (
+      <ChevronUp className="ml-1 inline size-3.5" />
+    ) : (
+      <ChevronDown className="ml-1 inline size-3.5" />
+    )
+  }
+
+  return (
+    <div className={cn('rounded-lg border', className)}>
+      <Table>
+        <TableHeader>
+          <TableRow className="hover:bg-transparent">
+            {selectable && (
+              <TableHead className="w-12">
+                <Checkbox
+                  checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+                  onCheckedChange={handleSelectAll}
+                  aria-label="Select all"
+                />
+              </TableHead>
+            )}
+            {columns.map((column) => (
+              <TableHead
+                key={column.key}
+                className={cn(
+                  column.sortable && 'cursor-pointer select-none',
+                  column.className
+                )}
+                onClick={() => column.sortable && onSort?.(column.key)}
+              >
+                {column.header}
+                {renderSortIcon(column)}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.length === 0 ? (
+            <TableRow>
+              <TableCell
+                colSpan={columns.length + (selectable ? 1 : 0)}
+                className="h-24 text-center text-muted-foreground"
+              >
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          ) : (
+            data.map((row) => {
+              const rowId = getRowId(row)
+              const isSelected = selectedIds.has(rowId)
+
+              return (
+                <TableRow
+                  key={rowId}
+                  data-state={isSelected && 'selected'}
+                  className={cn(onRowClick && 'cursor-pointer')}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {selectable && (
+                    <TableCell
+                      onClick={(e) => e.stopPropagation()}
+                      className="w-12"
+                    >
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={(checked) =>
+                          handleSelectRow(rowId, checked === true)
+                        }
+                        aria-label={`Select row ${rowId}`}
+                      />
+                    </TableCell>
+                  )}
+                  {columns.map((column) => (
+                    <TableCell key={column.key} className={column.className}>
+                      {column.cell(row)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              )
+            })
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

package/admin/src/components/cmsds/CmsToolbar.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { cn } from '~/lib/cn'
+import { Input } from '~/components/ui/input'
+import { Search } from 'lucide-react'
+
+export interface CmsToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  left?: React.ReactNode
+  right?: React.ReactNode
+  search?: {
+    value: string
+    onChange: (value: string) => void
+    placeholder?: string
+  }
+  filters?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+export function CmsToolbar({
+  left,
+  right,
+  search,
+  filters,
+  actions,
+  className,
+  children,
+  ...props
+}: CmsToolbarProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-wrap items-center justify-between gap-3 pb-4',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-1 flex-wrap items-center gap-2">
+        {search && (
+          <div className="relative w-full max-w-xs">
+            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder={search.placeholder ?? 'Search...'}
+              value={search.value}
+              onChange={(e) => search.onChange(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+        )}
+        {filters}
+        {left}
+        {children}
+      </div>
+      {(right || actions) && (
+        <div className="flex items-center gap-2">{right ?? actions}</div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,10 @@
+export { CmsButton, type CmsButtonProps } from './CmsButton'
+export { CmsSurface, type CmsSurfaceProps } from './CmsSurface'
+export { CmsStatusBadge, type CmsStatusBadgeProps, type ContentStatus } from './CmsStatusBadge'
+export { CmsField, type CmsFieldProps } from './CmsField'
+export { CmsEmptyState, type CmsEmptyStateProps } from './CmsEmptyState'
+export { CmsPageHeader, type CmsPageHeaderProps } from './CmsPageHeader'
+export { CmsToolbar, type CmsToolbarProps } from './CmsToolbar'
+export { CmsDropdown, type CmsDropdownProps, type CmsDropdownAction } from './CmsDropdown'
+export { CmsTable, type CmsTableProps, type CmsTableColumn } from './CmsTable'
+export { CmsDialog, CmsConfirmDialog, type CmsDialogProps, type CmsConfirmDialogProps } from './CmsDialog'

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

@@ -0,0 +1,74 @@
+import { useId } from 'react'
+import type { BooleanFieldProps } from './types'
+import { Switch } from '~/components/ui/switch'
+import { Label } from '~/components/ui/label'
+import { cn } from '~/lib/cn'
+
+export function BooleanField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  readOnly = false,
+  className = '',
+  id: providedId,
+  trueLabel = 'Yes',
+  falseLabel = 'No',
+}: BooleanFieldProps) {
+  const generatedId = useId()
+  const id = providedId ?? `field-${field.name}-${generatedId}`
+
+  const handleChange = (checked: boolean) => {
+    if (!readOnly) {
+      onChange(checked)
+    }
+  }
+
+  const hasError = !!error
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex items-center justify-between">
+        <Label
+          htmlFor={id}
+          className={cn(
+            'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+            hasError && 'text-destructive'
+          )}
+        >
+          {field.label}
+          {field.required && <span className="ml-1 text-destructive">*</span>}
+        </Label>
+
+        <div className="flex items-center gap-2">
+          <Switch
+            id={id}
+            checked={value ?? false}
+            onCheckedChange={handleChange}
+            disabled={disabled || readOnly}
+            aria-invalid={hasError}
+            aria-describedby={
+              error ? `${id}-error` : field.description ? `${id}-description` : undefined
+            }
+          />
+          <span className="text-sm text-muted-foreground">
+            {value ? trueLabel : falseLabel}
+          </span>
+        </div>
+      </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>
+  )
+}