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

package/src/projected-metric-dashboard.tsx

@@ -0,0 +1,106 @@
+import type { ReactNode } from 'react'
+
+import {
+  findPresentationView,
+  getPresentationViewProjectedFieldIds,
+  isViewChromeSlotKind,
+  type PresentationDataSourceResolver,
+  type ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import { usePresentationModule } from '@cohesivesystems/presentation-react'
+import { ProjectedMetricStrip, type ProjectedMetricValue } from './projected-metric-strip'
+import {
+  ProjectedViewSurface,
+  type ProjectedViewSurfaceChromeSlotRenderer,
+} from './projected-view-surface'
+import { viewChromeSlotKinds } from '@cohesivesystems/presentation-contracts'
+
+export interface ProjectedMetricDashboardProps {
+  readonly action?: ReactNode
+  readonly children?: ReactNode
+  readonly className?: string
+  readonly chromeAfterContentClassName?: string
+  readonly chromeBeforeContentClassName?: string
+  readonly chromeFooterClassName?: string
+  readonly chromeHeaderClassName?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly contentClassName?: string
+  readonly dataSourceResolver?: PresentationDataSourceResolver
+  readonly description?: string
+  readonly iconByFieldId?: Readonly<Record<string, ReactNode>>
+  readonly metricValues?: Readonly<Record<string, ProjectedMetricValue>>
+  readonly renderChromeSlot?: ProjectedViewSurfaceChromeSlotRenderer
+  readonly title?: string
+  readonly view?: ViewDefinition | null
+  readonly viewId: string
+}
+
+export function ProjectedMetricDashboard({
+  action,
+  children,
+  className,
+  chromeAfterContentClassName,
+  chromeBeforeContentClassName,
+  chromeFooterClassName,
+  chromeHeaderClassName,
+  componentSystem,
+  contentClassName = 'grid gap-4',
+  dataSourceResolver,
+  description,
+  iconByFieldId,
+  metricValues,
+  renderChromeSlot,
+  title,
+  view: viewOverride,
+  viewId,
+}: ProjectedMetricDashboardProps) {
+  const module = usePresentationModule()
+  const view = viewOverride ?? findPresentationView<ViewDefinition>(module, viewId)
+  const renderLegacyMetricStrip = !renderChromeSlot || !hasMetricStripChromeSlot(view)
+
+  return (
+    <ProjectedViewSurface
+      action={action}
+      className={className}
+      chromeAfterContentClassName={chromeAfterContentClassName}
+      chromeBeforeContentClassName={chromeBeforeContentClassName}
+      chromeFooterClassName={chromeFooterClassName}
+      chromeHeaderClassName={chromeHeaderClassName}
+      collapsible={view?.Chrome?.Collapsible ?? true}
+      collapseLabel={view?.Name ?? 'summary'}
+      componentSystem={componentSystem}
+      contentClassName={contentClassName}
+      description={description}
+      renderChromeSlot={renderChromeSlot}
+      title={title}
+      view={view}
+    >
+      {renderLegacyMetricStrip ? (
+        <ProjectedMetricStrip
+          componentSystem={componentSystem}
+          dataSourceResolver={dataSourceResolver}
+          fieldIds={readMetricFieldIds(view)}
+          iconByFieldId={iconByFieldId}
+          values={metricValues}
+          viewId={viewId}
+        />
+      ) : null}
+      {children}
+    </ProjectedViewSurface>
+  )
+}
+
+function readMetricFieldIds(view: ViewDefinition | null) {
+  const metricSlot = view?.Chrome?.Slots?.find(
+    (slot) => isViewChromeSlotKind(slot, viewChromeSlotKinds.metricStrip),
+  )
+  return metricSlot?.FieldIds ?? (view ? getPresentationViewProjectedFieldIds(view) : undefined)
+}
+
+function hasMetricStripChromeSlot(view: ViewDefinition | null) {
+  return view?.Chrome?.Slots.some((slot) =>
+    isViewChromeSlotKind(slot, viewChromeSlotKinds.metricStrip)) ?? false
+}

package/src/projected-metric-strip.tsx

@@ -0,0 +1,244 @@
+import { Fragment, useMemo, type ReactNode } from 'react'
+
+import {
+  findPresentationField,
+  findPresentationView,
+  getPresentationViewProjectedFieldIds,
+  type PresentationDataSourceResolver,
+  type FieldPresentationDefinition,
+  type ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import {
+  renderPresentationIcon,
+} from './presentation-icon-registry'
+import {
+  projectPresentationIconDiagnostics,
+} from './presentation-icon-diagnostics'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import {
+  usePresentationModule,
+  useRegisterPresentationProjectionDiagnostics,
+} from '@cohesivesystems/presentation-react'
+import { fieldDisplayKinds } from '@cohesivesystems/presentation-contracts'
+
+export interface ProjectedMetricValue {
+  readonly icon?: ReactNode
+  readonly label?: string
+  readonly value: ReactNode
+  readonly variant?: 'number' | 'text'
+}
+
+export interface ProjectedMetricStripProps {
+  readonly className?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly dataSourceResolver?: PresentationDataSourceResolver
+  readonly fieldIds?: readonly string[]
+  readonly iconByFieldId?: Readonly<Record<string, ReactNode>>
+  readonly values?: Readonly<Record<string, ProjectedMetricValue>>
+  readonly viewId?: string
+}
+
+const emptyMetricValues: Readonly<Record<string, ProjectedMetricValue>> = {}
+
+export function ProjectedMetricStrip({
+  className,
+  componentSystem,
+  dataSourceResolver,
+  fieldIds,
+  iconByFieldId,
+  values,
+  viewId,
+}: ProjectedMetricStripProps) {
+  const module = usePresentationModule()
+  const resolvedValues = values ?? emptyMetricValues
+  const view = viewId ? findPresentationView<ViewDefinition>(module, viewId) : null
+  const items = useMemo(
+    () => createMetricItems(module, view, resolvedValues, fieldIds, dataSourceResolver, iconByFieldId),
+    [dataSourceResolver, fieldIds, iconByFieldId, module, resolvedValues, view],
+  )
+  const iconDiagnosticSource = `projected-metric-strip-icons:${view?.Id ?? viewId ?? 'adhoc'}`
+  const iconDiagnostics = useMemo(
+    () => projectPresentationIconDiagnostics({
+      icons: resolveMetricIconSubjects(module, view, resolvedValues, fieldIds),
+      module,
+      source: iconDiagnosticSource,
+      surfaceId: view?.Id ?? viewId,
+      surfaceName: view?.Name,
+    }),
+    [
+      fieldIds,
+      iconDiagnosticSource,
+      module,
+      resolvedValues,
+      view,
+      viewId,
+    ],
+  )
+  useRegisterPresentationProjectionDiagnostics(iconDiagnosticSource, iconDiagnostics)
+
+  if (items.length === 0) {
+    return null
+  }
+
+  return componentSystem.metrics.MetricStrip({
+    children: items.map((item) =>
+      <Fragment key={item.id}>
+        {componentSystem.metrics.MetricItem({
+          icon: item.icon,
+          id: item.id,
+          label: item.label,
+          value: item.value,
+          variant: item.variant,
+        })}
+      </Fragment>,
+    ),
+    className,
+  })
+}
+
+interface MetricItem extends ProjectedMetricValue {
+  readonly id: string
+  readonly label: string
+}
+
+function createMetricItems(
+  module: ReturnType<typeof usePresentationModule>,
+  view: ViewDefinition | null,
+  values: Readonly<Record<string, ProjectedMetricValue>>,
+  fieldIds?: readonly string[],
+  dataSourceResolver?: PresentationDataSourceResolver,
+  iconByFieldId?: Readonly<Record<string, ReactNode>>,
+): readonly MetricItem[] {
+  const projectedFieldIds = resolveMetricFieldIds(view, values, fieldIds)
+  const orderedFieldIds = projectedFieldIds.length > 0 ? projectedFieldIds : Object.keys(values)
+
+  return orderedFieldIds.flatMap((fieldId) => {
+    const field = findPresentationField<FieldPresentationDefinition>(module, fieldId)
+    const value = resolveMetricValue(module, fieldId, field, values[fieldId], dataSourceResolver, iconByFieldId)
+
+    if (!value) {
+      return []
+    }
+
+    return [{
+      ...value,
+      id: fieldId,
+      label: value.label ?? field?.Label ?? fieldId,
+      variant: value.variant ?? 'number',
+    }]
+  })
+}
+
+function resolveMetricValue(
+  module: ReturnType<typeof usePresentationModule>,
+  fieldId: string,
+  field: FieldPresentationDefinition | null,
+  value: ProjectedMetricValue | undefined,
+  dataSourceResolver: PresentationDataSourceResolver | undefined,
+  iconByFieldId: Readonly<Record<string, ReactNode>> | undefined,
+) {
+  if (!value) {
+    return createMetricValue(module, fieldId, field, dataSourceResolver, iconByFieldId)
+  }
+
+  return {
+    ...value,
+    icon: value.icon ?? iconByFieldId?.[fieldId] ?? renderMetricFieldIcon(module, field),
+  }
+}
+
+function createMetricValue(
+  module: ReturnType<typeof usePresentationModule>,
+  fieldId: string,
+  field: FieldPresentationDefinition | null,
+  dataSourceResolver: PresentationDataSourceResolver | undefined,
+  iconByFieldId: Readonly<Record<string, ReactNode>> | undefined,
+): ProjectedMetricValue | null {
+  const value = readMetricFieldValue(field, dataSourceResolver)
+  if (value === undefined) {
+    return null
+  }
+
+  return {
+    icon: iconByFieldId?.[fieldId] ?? renderMetricFieldIcon(module, field),
+    value: renderMetricValue(value),
+    variant: isTextMetric(field) ? 'text' : 'number',
+  }
+}
+
+function resolveMetricIconSubjects(
+  module: ReturnType<typeof usePresentationModule>,
+  view: ViewDefinition | null,
+  values: Readonly<Record<string, ProjectedMetricValue>>,
+  fieldIds?: readonly string[],
+) {
+  return resolveMetricFieldIds(view, values, fieldIds).flatMap((fieldId) => {
+    const field = findPresentationField<FieldPresentationDefinition>(module, fieldId)
+    if (!field?.Icon) {
+      return []
+    }
+
+    return [{
+      details: {
+        fieldId,
+      },
+      icon: field.Icon,
+      id: fieldId,
+      kind: 'metric-field-icon',
+      label: field.Label,
+    }]
+  })
+}
+
+function resolveMetricFieldIds(
+  view: ViewDefinition | null,
+  values: Readonly<Record<string, ProjectedMetricValue>>,
+  fieldIds?: readonly string[],
+) {
+  return fieldIds ?? (view ? getPresentationViewProjectedFieldIds(view) : Object.keys(values))
+}
+
+function renderMetricFieldIcon(
+  module: ReturnType<typeof usePresentationModule>,
+  field: FieldPresentationDefinition | null,
+) {
+  return renderPresentationIcon({
+    className: 'size-4',
+    icon: field?.Icon,
+    module,
+  })
+}
+
+function readMetricFieldValue(
+  field: FieldPresentationDefinition | null,
+  dataSourceResolver: PresentationDataSourceResolver | undefined,
+) {
+  if (!field || !dataSourceResolver) {
+    return undefined
+  }
+
+  const source = field.Source
+  if (source) {
+    const sourceValue = dataSourceResolver.readPath(source.DataSourceId, source.FieldPath)
+    if (sourceValue !== undefined) {
+      return sourceValue
+    }
+  }
+
+  const [root, ...path] = field.Field.split('.')
+  return root ? dataSourceResolver.readPath(root, path.join('.')) : undefined
+}
+
+function renderMetricValue(value: unknown) {
+  if (value === null || value === undefined || value === '') {
+    return 'none'
+  }
+
+  return String(value)
+}
+
+function isTextMetric(field: FieldPresentationDefinition | null) {
+  return field?.DisplayKind === fieldDisplayKinds.text
+}

package/src/projected-navigation-shell-view-host.tsx

@@ -0,0 +1,177 @@
+import { useMemo } from 'react'
+
+import {
+  createPresentationSurfaceFromRootView,
+  findPresentationView,
+  getPresentationSurfaceDataSourceIds,
+  projectPresentationDataSourceBindings,
+  projectPresentationDataSourceCoverageDiagnostics,
+  type PresentationDataSourceBinding,
+  type PresentationDataSourceBindingProjectionRegistry,
+  type PresentationDataSourceProjectionContext,
+  type PresentationDataSourceTargetInterpretation,
+  type ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import {
+  PresentationDataSourceBinder,
+  usePresentationModule,
+  useRegisterPresentationProjectionDiagnostics,
+} from '@cohesivesystems/presentation-react'
+import type {
+  PresentationRendererRegistry,
+} from '@cohesivesystems/presentation-react'
+import { PresentationSurfaceRenderer } from './presentation-surface-renderer'
+import { ProjectedStatusBlock } from './projected-activity-state'
+import type {
+  NavigationShellRegionDefinition,
+} from '@cohesivesystems/presentation-contracts'
+
+export interface ProjectedNavigationShellViewHostProps<TContext> {
+  readonly bindings: readonly PresentationDataSourceBinding[]
+  readonly componentSet?: string
+  readonly context: TContext
+  readonly region: NavigationShellRegionDefinition
+  readonly rendererRegistry: PresentationRendererRegistry<TContext>
+}
+
+export interface ProjectedNavigationShellRegionViewProps<TContext> {
+  readonly context: TContext
+  readonly dataSourceBindingRegistry: PresentationDataSourceBindingProjectionRegistry
+  readonly componentSet?: string
+  readonly diagnosticsSourceId?: string
+  readonly projectionContext?: PresentationDataSourceProjectionContext
+  readonly region: NavigationShellRegionDefinition
+  readonly rendererRegistry: PresentationRendererRegistry<TContext>
+  readonly targetInterpretation?: PresentationDataSourceTargetInterpretation
+}
+
+/**
+ * Projects a presentation view referenced by a navigation shell region.
+ *
+ * Shell regions are persistent app chrome, but their bodies can still be
+ * ordinary presentation views with the same data-source and renderer
+ * interpretation model used by routed surfaces.
+ */
+export function ProjectedNavigationShellViewHost<TContext>({
+  bindings,
+  componentSet,
+  context,
+  region,
+  rendererRegistry,
+}: ProjectedNavigationShellViewHostProps<TContext>) {
+  const module = usePresentationModule()
+  const viewId = region.ViewId ?? null
+  const rootView = viewId ? findPresentationView<ViewDefinition>(module, viewId) : null
+  const surface = useMemo(
+    () =>
+      rootView
+        ? createPresentationSurfaceFromRootView(rootView, {
+            id: region.Id,
+          })
+        : null,
+    [region.Id, rootView],
+  )
+
+  if (!viewId) {
+    return <ProjectedStatusBlock label={`Shell region '${region.Id}' has no presentation view.`} />
+  }
+
+  return (
+    <PresentationDataSourceBinder bindings={bindings}>
+      {(dataSources) => (
+        <PresentationSurfaceRenderer
+          componentSet={componentSet}
+          context={context}
+          dataSources={dataSources}
+          rendererRegistry={rendererRegistry}
+          surface={surface}
+        />
+      )}
+    </PresentationDataSourceBinder>
+  )
+}
+
+/**
+ * Projects a shell region ViewId with the same data-source binding and
+ * diagnostics pipeline used by routed presentation surfaces.
+ */
+export function ProjectedNavigationShellRegionView<TContext>({
+  componentSet,
+  context,
+  dataSourceBindingRegistry,
+  diagnosticsSourceId,
+  projectionContext = defaultNavigationShellRegionProjectionContext,
+  region,
+  rendererRegistry,
+  targetInterpretation,
+}: ProjectedNavigationShellRegionViewProps<TContext>) {
+  const module = usePresentationModule()
+  const rootView = region.ViewId
+    ? findPresentationView<ViewDefinition>(module, region.ViewId)
+    : null
+  const surface = useMemo(
+    () =>
+      rootView
+        ? createPresentationSurfaceFromRootView(rootView, { id: region.Id })
+        : null,
+    [region.Id, rootView],
+  )
+  const dataSourceIds = useMemo(
+    () => getPresentationSurfaceDataSourceIds(module, surface),
+    [module, surface],
+  )
+  const bindings = useMemo(
+    () =>
+      projectPresentationDataSourceBindings({
+        context: projectionContext,
+        dataSourceIds,
+        module,
+        registry: dataSourceBindingRegistry,
+      }),
+    [
+      dataSourceBindingRegistry,
+      dataSourceIds,
+      module,
+      projectionContext,
+    ],
+  )
+  const sourceId = diagnosticsSourceId ?? `navigation-shell-data-sources:${region.Id}`
+  const dataSourceCoverageDiagnostics = useMemo(
+    () =>
+      projectPresentationDataSourceCoverageDiagnostics({
+        bindings,
+        dataSourceIds,
+        module,
+        routeParameters: projectionContext.routeParameters,
+        sourceId,
+        targetInterpretation,
+      }),
+    [
+      bindings,
+      dataSourceIds,
+      module,
+      projectionContext.routeParameters,
+      sourceId,
+      targetInterpretation,
+    ],
+  )
+  useRegisterPresentationProjectionDiagnostics(
+    sourceId,
+    dataSourceCoverageDiagnostics,
+  )
+
+  return (
+    <ProjectedNavigationShellViewHost
+      bindings={bindings}
+      componentSet={componentSet}
+      context={context}
+      region={region}
+      rendererRegistry={rendererRegistry}
+    />
+  )
+}
+
+const defaultNavigationShellRegionProjectionContext = {
+  routeParameters: {},
+  workspaceId: null,
+} satisfies PresentationDataSourceProjectionContext