@cohesivesystems/presentation-react-shadcn 0.1.0-alpha.1

package/src/presentation-surface-renderer.tsx

@@ -0,0 +1,263 @@
+import { useCallback, useMemo, type ReactNode } from 'react'
+
+import {
+  createPresentationDataSourceResolver,
+  defaultPresentationComponentSet,
+  findPresentationView,
+  getRegionViewIds,
+  type PresentationModuleDefinition,
+  type PresentationDataSourceResolver,
+  type PresentationDataSourceStateMap,
+  type PresentationSurface,
+  type ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import {
+  usePresentationModule,
+  resolvePresentationViewRenderer,
+  type PresentationRendererRegistry,
+  type PresentationViewRegionRenderOptions,
+  type PresentationViewRendererResolution,
+} from '@cohesivesystems/presentation-react'
+import { ProjectedStatusBlock } from './projected-activity-state'
+
+export interface PresentationSurfaceRendererProps<TContext> {
+  readonly componentSet?: string
+  readonly context: TContext
+  readonly dataSources: PresentationDataSourceStateMap
+  readonly rendererRegistry: PresentationRendererRegistry<TContext>
+  readonly renderUnknownView?: PresentationUnknownViewRenderer<TContext>
+  readonly surface: PresentationSurface | null
+}
+
+export interface PresentationUnknownViewRenderContext<TContext> {
+  readonly context: TContext
+  readonly module: PresentationModuleDefinition | null
+  readonly reason:
+    | 'missing-module'
+    | 'missing-renderer'
+    | 'missing-root-view'
+    | 'missing-surface'
+    | 'missing-view'
+  readonly resolution?: PresentationViewRendererResolution<TContext>
+  readonly surface: PresentationSurface | null
+  readonly view: ViewDefinition | null
+  readonly viewId: string | null
+}
+
+export type PresentationUnknownViewRenderer<TContext> = (
+  context: PresentationUnknownViewRenderContext<TContext>,
+) => ReactNode
+
+interface PresentationSurfaceViewRendererProps<TContext> {
+  readonly componentSet: string
+  readonly context: TContext
+  readonly dataSourceResolver: PresentationDataSourceResolver
+  readonly module: PresentationModuleDefinition
+  readonly rendererRegistry: PresentationRendererRegistry<TContext>
+  readonly renderUnknownView: PresentationUnknownViewRenderer<TContext>
+  readonly surface: PresentationSurface
+  readonly viewId: string
+}
+
+export function PresentationSurfaceRenderer<TContext>({
+  componentSet = defaultPresentationComponentSet,
+  context,
+  dataSources,
+  rendererRegistry,
+  renderUnknownView = renderDefaultUnknownView,
+  surface,
+}: PresentationSurfaceRendererProps<TContext>) {
+  const module = usePresentationModule()
+  const dataSourceResolver = useMemo(
+    () => createPresentationDataSourceResolver(dataSources),
+    [dataSources],
+  )
+
+  if (!module) {
+    return renderUnknownView({
+      context,
+      module,
+      reason: 'missing-module',
+      surface,
+      view: null,
+      viewId: surface?.rootViewId ?? null,
+    })
+  }
+
+  if (!surface) {
+    return renderUnknownView({
+      context,
+      module,
+      reason: 'missing-surface',
+      surface,
+      view: null,
+      viewId: null,
+    })
+  }
+
+  const rootViewId = surface.rootView?.Id ?? surface.rootViewId
+  if (!rootViewId) {
+    return renderUnknownView({
+      context,
+      module,
+      reason: 'missing-root-view',
+      surface,
+      view: null,
+      viewId: null,
+    })
+  }
+
+  return (
+    <PresentationSurfaceViewRenderer
+      componentSet={componentSet}
+      context={context}
+      dataSourceResolver={dataSourceResolver}
+      module={module}
+      rendererRegistry={rendererRegistry}
+      renderUnknownView={renderUnknownView}
+      surface={surface}
+      viewId={rootViewId}
+    />
+  )
+}
+
+function PresentationSurfaceViewRenderer<TContext>({
+  componentSet,
+  context,
+  dataSourceResolver,
+  module,
+  rendererRegistry,
+  renderUnknownView,
+  surface,
+  viewId,
+}: PresentationSurfaceViewRendererProps<TContext>) {
+  const view = findPresentationView<ViewDefinition>(module, viewId)
+  const renderView = useCallback(
+    (childViewId: string) => (
+      <PresentationSurfaceViewRenderer
+        componentSet={componentSet}
+        context={context}
+        dataSourceResolver={dataSourceResolver}
+        module={module}
+        rendererRegistry={rendererRegistry}
+        renderUnknownView={renderUnknownView}
+        surface={surface}
+        viewId={childViewId}
+      />
+    ),
+    [
+      componentSet,
+      context,
+      dataSourceResolver,
+      module,
+      rendererRegistry,
+      renderUnknownView,
+      surface,
+    ],
+  )
+  const renderRegions = useCallback(
+    (
+      regionHostView: ViewDefinition,
+      options?: PresentationViewRegionRenderOptions,
+    ) =>
+      renderPresentationViewRegions({
+        includeRegionIds: options?.includeRegionIds,
+        renderView,
+        view: regionHostView,
+      }),
+    [renderView],
+  )
+
+  if (!view) {
+    return renderUnknownView({
+      context,
+      module,
+      reason: 'missing-view',
+      surface,
+      view,
+      viewId,
+    })
+  }
+
+  const resolution = resolvePresentationViewRenderer({
+    componentSet,
+    module,
+    registry: rendererRegistry,
+    routeId: surface.navigationTarget.route.Id,
+    view,
+  })
+  if (!resolution.renderer) {
+    return renderUnknownView({
+      context,
+      module,
+      reason: 'missing-renderer',
+      resolution,
+      surface,
+      view,
+      viewId,
+    })
+  }
+
+  return resolution.renderer({
+    componentKey: resolution.componentKey,
+    componentRole: resolution.componentRole,
+    context,
+    dataSourceResolver,
+    module,
+    renderRegions,
+    renderView,
+    surface,
+    view,
+  })
+}
+
+function renderPresentationViewRegions({
+  includeRegionIds,
+  renderView,
+  view,
+}: {
+  readonly includeRegionIds?: readonly string[]
+  readonly renderView: (viewId: string) => ReactNode
+  readonly view: ViewDefinition
+}) {
+  const regions = includeRegionIds
+    ? view.Regions.filter((region) => includeRegionIds.includes(region.Id))
+    : view.Regions
+
+  return regions.flatMap((region) =>
+    getRegionViewIds(region).map((childViewId) => (
+      <div className="min-h-0 w-full min-w-0" key={`${region.Id}:${childViewId}`}>
+        {renderView(childViewId)}
+      </div>
+    )),
+  )
+}
+
+function renderDefaultUnknownView<TContext>({
+  reason,
+  resolution,
+  view,
+  viewId,
+}: PresentationUnknownViewRenderContext<TContext>) {
+  if (reason === 'missing-module') {
+    return <ProjectedStatusBlock label="Presentation module is not available." />
+  }
+
+  if (reason === 'missing-surface') {
+    return <ProjectedStatusBlock label="Presentation surface is not available." />
+  }
+
+  if (reason === 'missing-root-view') {
+    return <ProjectedStatusBlock label="Presentation surface has no root view." />
+  }
+
+  if (reason === 'missing-view') {
+    return <ProjectedStatusBlock label={`Presentation view '${viewId ?? 'unknown'}' is not available.`} />
+  }
+
+  return (
+    <ProjectedStatusBlock
+      label={`Presentation view '${view?.Name ?? viewId ?? 'unknown'}' has no renderer for semantic role '${resolution?.semanticRole ?? 'unknown'}'.`}
+    />
+  )
+}

package/src/presentation-value-renderers.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+
+export type PresentationValueBadgeTone = 'accent' | 'danger' | 'info' | 'neutral'
+
+export interface PresentationValueBadgeProps {
+  readonly children?: ReactNode
+  readonly className?: string
+  readonly label?: string
+  readonly tone?: PresentationValueBadgeTone
+}
+
+const presentationValueBadgeToneClass = {
+  accent: 'border-teal-700/15 bg-teal-50 text-teal-700',
+  danger: 'border-red-700/15 bg-red-50 text-red-700',
+  info: 'border-sky-700/15 bg-sky-50 text-sky-700',
+  neutral: 'border-slate-950/10 bg-slate-100 text-slate-700',
+} satisfies Record<PresentationValueBadgeTone, string>
+
+export function PresentationValueBadge({
+  children,
+  className,
+  label,
+  tone = 'neutral',
+}: PresentationValueBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium',
+        presentationValueBadgeToneClass[tone],
+        className,
+      )}
+    >
+      {children ?? label}
+    </span>
+  )
+}
+
+function cn(...values: readonly (false | null | string | undefined)[]) {
+  return values.filter(Boolean).join(' ')
+}

package/src/process-task-icons.tsx

@@ -0,0 +1,258 @@
+import type { ReactNode } from 'react'
+
+import type {
+  DocumentProcessTaskNoticeDefinition,
+  FieldPresentationDefinition,
+  PresentationIconDiagnosticSubject,
+  ProcessTask,
+} from '@cohesivesystems/presentation-core'
+import {
+  resolvePresentationFieldValueIcon,
+} from '@cohesivesystems/presentation-core'
+import type {
+  PresentationIconModuleProjection,
+} from './presentation-icon-registry'
+import {
+  renderPresentationIcon,
+} from './presentation-icon-registry'
+
+export const processIconIds = {
+  metricCompleted: 'process.metric.completed',
+  metricFailed: 'process.metric.failed',
+  metricInProgress: 'process.metric.in-progress',
+  metricLoaded: 'process.metric.loaded',
+  noticeOpenDetails: 'process-task.notice.open-details',
+  statusError: 'process.status.error',
+  statusInfo: 'process.status.info',
+  statusRunning: 'process.status.running',
+  statusSuccess: 'process.status.success',
+  statusWarning: 'process.status.warning',
+  toastDismiss: 'process-task.toast.dismiss',
+  toastOpen: 'process-task.toast.open',
+} as const
+
+export type ProcessStatusTone =
+  | 'danger'
+  | 'default'
+  | 'info'
+  | 'success'
+  | 'warning'
+
+export type ProcessToastTone =
+  | 'error'
+  | 'info'
+  | 'success'
+
+export function renderProcessIcon({
+  className,
+  fallbackIcon,
+  icon,
+  module,
+}: {
+  readonly className: string
+  readonly fallbackIcon: string
+  readonly icon: string
+  readonly module?: PresentationIconModuleProjection | null
+}) {
+  return renderPresentationIcon({
+    className,
+    icon,
+    module,
+  }) ?? renderPresentationIcon({
+    className,
+    icon: fallbackIcon,
+  })
+}
+
+export function renderProcessStatusIcon({
+  className = 'size-4 shrink-0',
+  module,
+  status,
+  tone,
+}: {
+  readonly className?: string
+  readonly module?: PresentationIconModuleProjection | null
+  readonly status?: ProcessTask['lifecycleStatus'] | string | null
+  readonly tone?: ProcessStatusTone | string | null
+}): ReactNode {
+  const icon = resolveProcessStatusIconId({ status, tone })
+  return renderProcessIcon({
+    className: `${className} ${resolveProcessStatusIconToneClass(icon)}`,
+    fallbackIcon: resolveProcessStatusFallbackIcon(icon),
+    icon,
+    module,
+  })
+}
+
+export function renderProjectedProcessStatusIcon({
+  className = 'size-4 shrink-0',
+  field,
+  module,
+  value,
+}: {
+  readonly className?: string
+  readonly field: FieldPresentationDefinition
+  readonly module?: PresentationIconModuleProjection | null
+  readonly value: unknown
+}): ReactNode {
+  const icon = resolvePresentationFieldValueIcon(field, value)
+  if (!icon) {
+    return null
+  }
+
+  return renderProcessIcon({
+    className: `${className} ${resolveProcessStatusIconToneClass(icon)}`,
+    fallbackIcon: resolveProcessStatusFallbackIcon(icon),
+    icon,
+    module,
+  })
+}
+
+export function renderProcessToastToneIcon({
+  className = 'mt-0.5 size-4 shrink-0',
+  module,
+  tone,
+}: {
+  readonly className?: string
+  readonly module?: PresentationIconModuleProjection | null
+  readonly tone: ProcessToastTone
+}) {
+  const icon = resolveProcessToastToneIconId(tone)
+  return renderProcessIcon({
+    className: `${className} ${resolveProcessStatusIconToneClass(icon)}`,
+    fallbackIcon: resolveProcessStatusFallbackIcon(icon),
+    icon,
+    module,
+  })
+}
+
+export function resolveProcessStatusIconId({
+  status,
+  tone,
+}: {
+  readonly status?: ProcessTask['lifecycleStatus'] | string | null
+  readonly tone?: ProcessStatusTone | string | null
+}) {
+  if (tone === 'success' || status === 'success') {
+    return processIconIds.statusSuccess
+  }
+
+  if (tone === 'danger' || tone === 'error' || status === 'error') {
+    return processIconIds.statusError
+  }
+
+  if (
+    tone === 'warning' ||
+    status === 'paused' ||
+    status === 'waiting'
+  ) {
+    return processIconIds.statusWarning
+  }
+
+  if (tone === 'info') {
+    return processIconIds.statusInfo
+  }
+
+  return processIconIds.statusRunning
+}
+
+export function resolveProcessToastToneIconId(tone: ProcessToastTone) {
+  if (tone === 'success') {
+    return processIconIds.statusSuccess
+  }
+
+  if (tone === 'error') {
+    return processIconIds.statusError
+  }
+
+  return processIconIds.statusInfo
+}
+
+export function resolveProcessTaskNoticeIconSubjects(
+  task: ProcessTask,
+  statusField?: FieldPresentationDefinition | null,
+  notice?: DocumentProcessTaskNoticeDefinition | null,
+): readonly PresentationIconDiagnosticSubject[] {
+  const statusIcon = statusField
+    ? resolvePresentationFieldValueIcon(statusField, task.status)
+    : resolveProcessStatusIconId({ status: task.lifecycleStatus })
+  const subjects: PresentationIconDiagnosticSubject[] = [
+    ...(statusIcon ? [{
+      details: {
+        processTaskId: task.id,
+        status: task.status,
+        statusFieldId: statusField?.Id,
+      },
+      icon: statusIcon,
+      id: `${task.id}:status`,
+      kind: 'process-task-status-icon',
+      label: task.statusLabel,
+    }] : []),
+  ]
+
+  const actionSubjects = (notice?.Actions ?? []).flatMap((action) => {
+    const icon = action.Placement.Icon
+    if (!icon) {
+      return []
+    }
+
+    return [{
+      details: {
+        actionId: action.Placement.ActionId,
+        processTaskId: task.id,
+      },
+      icon,
+      id: `${task.id}:${action.Placement.ActionId}`,
+      kind: 'process-task-notice-icon',
+      label: action.Placement.Label ?? action.Placement.ActionId,
+    }]
+  })
+
+  subjects.push(...actionSubjects)
+
+  if (actionSubjects.length === 0 && (task.detailsHref ?? task.targetHref ?? task.sourceHref)) {
+    subjects.push({
+      details: {
+        processTaskId: task.id,
+      },
+      icon: processIconIds.noticeOpenDetails,
+      id: `${task.id}:open-details`,
+      kind: 'process-task-notice-icon',
+      label: 'Open process details',
+    })
+  }
+
+  return subjects
+}
+
+function resolveProcessStatusIconToneClass(icon: string) {
+  if (icon === processIconIds.statusSuccess) {
+    return 'text-teal-700'
+  }
+
+  if (icon === processIconIds.statusError) {
+    return 'text-red-700'
+  }
+
+  if (icon === processIconIds.statusWarning) {
+    return 'text-amber-700'
+  }
+
+  return 'text-sky-700'
+}
+
+function resolveProcessStatusFallbackIcon(icon: string) {
+  if (icon === processIconIds.statusSuccess) {
+    return 'check-circle-2'
+  }
+
+  if (icon === processIconIds.statusError) {
+    return 'alert-circle'
+  }
+
+  if (icon === processIconIds.statusWarning || icon === processIconIds.statusInfo) {
+    return 'clock-3'
+  }
+
+  return 'loader-circle'
+}

package/src/projected-activity-state.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import type { ProjectedActivityState } from '@cohesivesystems/presentation-core'
+
+export interface ProjectedActivityStateBoundaryProps {
+  readonly children: ReactNode
+  readonly componentSystem?: PresentationComponentSystem
+  readonly state: ProjectedActivityState
+}
+
+export function ProjectedActivityStateBoundary({
+  children,
+  componentSystem,
+  state,
+}: ProjectedActivityStateBoundaryProps) {
+  if (state.kind === 'ready') {
+    return children
+  }
+
+  return (
+    <ProjectedStatusBlock
+      componentSystem={componentSystem}
+      label={state.label}
+      tone={state.kind === 'error' ? 'error' : 'default'}
+    />
+  )
+}
+
+export interface ProjectedStatusBlockProps {
+  readonly className?: string
+  readonly componentSystem?: PresentationComponentSystem
+  readonly label: ReactNode
+  readonly tone?: 'default' | 'error'
+}
+
+export function ProjectedStatusBlock({
+  className,
+  componentSystem,
+  label,
+  tone = 'default',
+}: ProjectedStatusBlockProps) {
+  if (componentSystem) {
+    return componentSystem.feedback.StatusBlock({ className, label, tone })
+  }
+
+  const toneClassName = tone === 'error'
+    ? 'border-red-200 bg-red-50 text-red-800'
+    : 'border-slate-200 bg-slate-50 text-slate-700'
+  const resolvedClassName = [
+    'rounded-md border px-3 py-2 text-sm',
+    toneClassName,
+    className,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <div className={resolvedClassName} role={tone === 'error' ? 'alert' : 'status'}>
+      {label}
+    </div>
+  )
+}

package/src/projected-collection-action-runtime-diagnostics.ts

@@ -0,0 +1,22 @@
+import {
+  projectProjectedCollectionActionRuntimeDiagnostics as projectCoreProjectedCollectionActionRuntimeDiagnostics,
+  type ProjectProjectedCollectionActionRuntimeDiagnosticsOptions,
+} from '@cohesivesystems/presentation-core'
+
+import {
+  projectPresentationActionIconDiagnostics,
+} from './presentation-icon-diagnostics'
+
+export type {
+  ProjectProjectedCollectionActionIconDiagnosticsOptions,
+  ProjectProjectedCollectionActionRuntimeDiagnosticsOptions,
+} from '@cohesivesystems/presentation-core'
+
+export function projectProjectedCollectionActionRuntimeDiagnostics<TData extends object>(
+  options: ProjectProjectedCollectionActionRuntimeDiagnosticsOptions<TData>,
+) {
+  return projectCoreProjectedCollectionActionRuntimeDiagnostics({
+    ...options,
+    projectActionIconDiagnostics: projectPresentationActionIconDiagnostics,
+  })
+}