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

package/src/projected-tabs-view.tsx

@@ -0,0 +1,308 @@
+import { Fragment, useEffect, useMemo, useState, type ReactNode } from 'react'
+
+import {
+  findPresentationView,
+  getRegionViewIds,
+  isViewChromeSlotKind,
+  type ViewChromeSlotDefinition,
+  type ViewDefinition,
+  type ViewRegionDefinition,
+} from '@cohesivesystems/presentation-core'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import {
+  renderPresentationIcon,
+} from './presentation-icon-registry'
+import {
+  projectPresentationIconDiagnostics,
+} from './presentation-icon-diagnostics'
+import {
+  usePresentationModule,
+  useRegisterPresentationProjectionDiagnostics,
+} from '@cohesivesystems/presentation-react'
+import { ProjectedStatusBlock } from './projected-activity-state'
+import {
+  ProjectedViewChrome,
+} from './projected-view-chrome'
+import type {
+  ProjectedViewSurfaceChromeSlotRenderer,
+} from './projected-view-surface'
+import {
+  viewChromeSlotKinds,
+  viewChromeSlotPlacements,
+  viewRegionKinds,
+} from '@cohesivesystems/presentation-contracts'
+
+export interface ProjectedTabsViewProps {
+  readonly chromeAfterContentClassName?: string
+  readonly chromeBeforeContentClassName?: string
+  readonly chromeFooterClassName?: string
+  readonly chromeHeaderClassName?: string
+  readonly className?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly defaultRegionId?: string
+  readonly fallbackRegions?: readonly ViewRegionDefinition[]
+  readonly iconByRegionId?: Readonly<Record<string, ReactNode>>
+  readonly renderChromeSlot?: ProjectedViewSurfaceChromeSlotRenderer
+  readonly renderView: (viewId: string) => ReactNode
+  readonly view?: ViewDefinition | null
+  readonly viewId: string
+}
+
+export function ProjectedTabsView({
+  chromeAfterContentClassName,
+  chromeBeforeContentClassName,
+  chromeFooterClassName,
+  chromeHeaderClassName,
+  className,
+  componentSystem,
+  defaultRegionId,
+  fallbackRegions,
+  iconByRegionId,
+  renderChromeSlot,
+  renderView,
+  view: viewOverride,
+  viewId,
+}: ProjectedTabsViewProps) {
+  const module = usePresentationModule()
+  const view = viewOverride ?? findPresentationView<ViewDefinition>(module, viewId)
+  const tabRegions = useMemo(
+    () => getTabRegions(view, fallbackRegions),
+    [fallbackRegions, view],
+  )
+  const iconDiagnosticSource = `projected-tabs-view-icons:${view?.Id ?? viewId}`
+  const iconDiagnostics = useMemo(
+    () => projectPresentationIconDiagnostics({
+      icons: resolveTabRegionIconSubjects(tabRegions),
+      module,
+      source: iconDiagnosticSource,
+      surfaceId: view?.Id ?? viewId,
+      surfaceName: view?.Name,
+    }),
+    [
+      iconDiagnosticSource,
+      module,
+      tabRegions,
+      view?.Id,
+      view?.Name,
+      viewId,
+    ],
+  )
+  useRegisterPresentationProjectionDiagnostics(iconDiagnosticSource, iconDiagnostics)
+  const defaultValue =
+    defaultRegionId ??
+    view?.State?.find((state) => state.Type === 'region-id')?.DefaultValue ??
+    tabRegions[0]?.Id
+  const [requestedActiveRegionId, setActiveRegionId] = useState(defaultValue ?? '')
+  const activeRegionId = tabRegions.some((region) => region.Id === requestedActiveRegionId)
+    ? requestedActiveRegionId
+    : defaultValue ?? ''
+  const [visitedRegionIds, setVisitedRegionIds] = useState<ReadonlySet<string>>(
+    () => new Set(activeRegionId ? [activeRegionId] : []),
+  )
+
+  useEffect(() => {
+    if (!activeRegionId) {
+      return
+    }
+
+    setVisitedRegionIds((current) => {
+      if (current.has(activeRegionId)) {
+        return current
+      }
+
+      return new Set([...current, activeRegionId])
+    })
+  }, [activeRegionId])
+
+  if (!module && tabRegions.length === 0) {
+    return <ProjectedStatusBlock label="Presentation module is not available." />
+  }
+
+  if (!view && tabRegions.length === 0) {
+    return <ProjectedStatusBlock label={`Presentation view '${viewId}' is not available.`} />
+  }
+
+  if (!defaultValue || tabRegions.length === 0) {
+    return <ProjectedStatusBlock label={`Presentation view '${view?.Name ?? view?.Id ?? viewId}' has no tabs.`} />
+  }
+
+  const renderTabsChromeSlot = (slot: ViewChromeSlotDefinition, chromeView: ViewDefinition | null) => {
+    if (isViewChromeSlotKind(slot, viewChromeSlotKinds.viewSwitch)) {
+      return renderTabsList({
+        activeRegionId: activeRegionId || defaultValue,
+        componentSystem,
+        iconByRegionId,
+        module,
+        tabRegions,
+        viewId: view?.Id ?? viewId,
+      })
+    }
+
+    return renderChromeSlot?.(slot, chromeView) ?? null
+  }
+  const hasTabSwitchChrome = hasTabSwitchChromeSlot(view)
+
+  return componentSystem.tabs.TabsLayout({
+    className,
+    onValueChange: setActiveRegionId,
+    value: activeRegionId || defaultValue,
+    viewId: view?.Id ?? viewId,
+    children: (
+      <>
+      <ProjectedViewChrome
+        className={chromeHeaderClassName}
+        componentSystem={componentSystem}
+        placement={viewChromeSlotPlacements.header}
+        renderSlot={(slot) => renderTabsChromeSlot(slot, view)}
+        view={view}
+      />
+
+      {hasTabSwitchChrome ? null : renderTabsList({
+        activeRegionId: activeRegionId || defaultValue,
+        componentSystem,
+        iconByRegionId,
+        module,
+        tabRegions,
+        viewId: view?.Id ?? viewId,
+      })}
+
+      <ProjectedViewChrome
+        className={chromeBeforeContentClassName}
+        componentSystem={componentSystem}
+        placement={viewChromeSlotPlacements.beforeContent}
+        renderSlot={(slot) => renderTabsChromeSlot(slot, view)}
+        view={view}
+      />
+
+      {tabRegions.map((region) => {
+        const viewIds = getRegionViewIds(region)
+        const shouldRenderRegion =
+          region.Id === activeRegionId || visitedRegionIds.has(region.Id)
+        return (
+          <Fragment key={region.Id}>
+            {componentSystem.tabs.TabsPanel({
+              region,
+              value: region.Id,
+              viewId: view?.Id ?? viewId,
+              children: (
+                <>
+                  {shouldRenderRegion
+                    ? viewIds.map((childViewId) => (
+                      <div
+                        className="flex min-h-0 flex-1 flex-col overflow-hidden"
+                        key={childViewId}
+                      >
+                        {renderView(childViewId)}
+                      </div>
+                    ))
+                    : null}
+                </>
+              ),
+            })}
+          </Fragment>
+        )
+      })}
+
+      <ProjectedViewChrome
+        className={chromeAfterContentClassName}
+        componentSystem={componentSystem}
+        placement={viewChromeSlotPlacements.afterContent}
+        renderSlot={(slot) => renderTabsChromeSlot(slot, view)}
+        view={view}
+      />
+
+      <ProjectedViewChrome
+        className={chromeFooterClassName}
+        componentSystem={componentSystem}
+        placement={viewChromeSlotPlacements.footer}
+        renderSlot={(slot) => renderTabsChromeSlot(slot, view)}
+        view={view}
+      />
+      </>
+    ),
+  })
+}
+
+function renderTabsList({
+  activeRegionId,
+  componentSystem,
+  iconByRegionId,
+  module,
+  tabRegions,
+  viewId,
+}: {
+  readonly activeRegionId: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly iconByRegionId: Readonly<Record<string, ReactNode>> | undefined
+  readonly module: ReturnType<typeof usePresentationModule>
+  readonly tabRegions: readonly ViewRegionDefinition[]
+  readonly viewId: string | null
+}) {
+  return componentSystem.tabs.TabsList({
+    viewId,
+    children: tabRegions.map((region) => (
+      <Fragment key={region.Id}>
+        {componentSystem.tabs.TabsTrigger({
+          isActive: activeRegionId === region.Id,
+          region,
+          value: region.Id,
+          viewId,
+          children: (
+            <>
+              {iconByRegionId?.[region.Id] ?? renderPresentationIcon({
+                className: 'size-3.5',
+                icon: region.Icon,
+                module,
+              })}
+              {region.Name ?? region.Id}
+            </>
+          ),
+        })}
+      </Fragment>
+    )),
+  })
+}
+
+function resolveTabRegionIconSubjects(
+  tabRegions: readonly ViewRegionDefinition[],
+) {
+  return tabRegions.flatMap((region) => {
+    if (!region.Icon) {
+      return []
+    }
+
+    return [{
+      details: {
+        regionId: region.Id,
+      },
+      icon: region.Icon,
+      id: region.Id,
+      kind: 'tab-region-icon',
+      label: region.Name,
+    }]
+  })
+}
+
+function getTabRegions(
+  view: ViewDefinition | null,
+  fallbackRegions: readonly ViewRegionDefinition[] | undefined,
+) {
+  const regions = view?.Regions ?? fallbackRegions ?? []
+  return (
+    regions.filter(
+      (region): region is ViewRegionDefinition =>
+        hasRegionKind(region.Kind, 'Tab', 6) && getRegionViewIds(region).length > 0,
+    )
+  )
+}
+
+function hasRegionKind(value: string | number, name: string, numericValue: number) {
+  return value === name || value === numericValue || value === viewRegionKinds.tab
+}
+
+function hasTabSwitchChromeSlot(view: ViewDefinition | null) {
+  return view?.Chrome?.Slots.some((slot) =>
+    isViewChromeSlotKind(slot, viewChromeSlotKinds.viewSwitch)) ?? false
+}

package/src/projected-view-chrome.tsx

@@ -0,0 +1,148 @@
+import { useMemo, type ReactNode } from 'react'
+
+import type {
+  ViewChromeSlotDefinition,
+  ViewChromeSlotPlacement,
+  ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import {
+  isViewChromeSlotKind,
+  isViewChromeSlotPlacementValue,
+  resolveViewChromeIconSubjects,
+} from '@cohesivesystems/presentation-core'
+import {
+  projectPresentationIconDiagnostics,
+} from './presentation-icon-diagnostics'
+import {
+  usePresentationModule,
+  useRegisterPresentationProjectionDiagnostics,
+} from '@cohesivesystems/presentation-react'
+import {
+  viewChromeSlotKinds,
+  viewChromeSlotPlacements,
+} from '@cohesivesystems/presentation-contracts'
+
+export interface ProjectedViewChromeProps {
+  readonly className?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly placement: ViewChromeSlotPlacement | string | number
+  readonly renderContainer?: (children: ReactNode) => ReactNode
+  readonly renderSlot: (slot: ViewChromeSlotDefinition) => ReactNode
+  readonly view: ViewDefinition | null
+}
+
+export function ProjectedViewChrome({
+  className,
+  componentSystem,
+  placement,
+  renderContainer,
+  renderSlot,
+  view,
+}: ProjectedViewChromeProps) {
+  const module = usePresentationModule()
+  const slots = useMemo(
+    () => resolveViewChromeSlots(view, placement),
+    [placement, view],
+  )
+  const iconDiagnostics = useMemo(
+    () => projectPresentationIconDiagnostics({
+      icons: resolveViewChromeIconSubjects(slots),
+      module,
+      source: `projected-view-chrome-icons:${view?.Id ?? 'unknown'}:${String(placement)}`,
+      surfaceId: view?.Id,
+      surfaceName: view?.Name,
+    }),
+    [
+      module,
+      placement,
+      slots,
+      view?.Id,
+      view?.Name,
+    ],
+  )
+  useRegisterPresentationProjectionDiagnostics(
+    `projected-view-chrome-icons:${view?.Id ?? 'unknown'}:${String(placement)}`,
+    iconDiagnostics,
+  )
+
+  const ViewChromeSlot = componentSystem.viewChrome.ViewChromeSlot
+  const renderedSlots = slots
+    .map((slot) => {
+      const rendered = renderSlot(slot)
+      return isRenderableNode(rendered) ? (
+        <ViewChromeSlot
+          key={slot.Id}
+          placement={placement}
+          slot={slot}
+          viewId={view?.Id ?? null}
+        >
+          {rendered}
+        </ViewChromeSlot>
+      ) : null
+    })
+    .filter(isRenderableNode)
+
+  if (renderedSlots.length === 0) {
+    return null
+  }
+
+  if (renderContainer) {
+    return renderContainer(renderedSlots)
+  }
+
+  return className ? (
+    <div className={cn(className)}>{renderedSlots}</div>
+  ) : (
+    <>{renderedSlots}</>
+  )
+}
+
+export function resolveViewChromeSlots(
+  view: ViewDefinition | null,
+  placement: ViewChromeSlotPlacement | string | number,
+) {
+  return (view?.Chrome?.Slots ?? []).filter((slot) =>
+    isViewChromeSlotPlacementValue(
+      resolveViewChromeSlotPlacement(slot),
+      placement,
+    ))
+}
+
+export function resolveViewChromeSlotPlacement(
+  slot: ViewChromeSlotDefinition,
+): ViewChromeSlotPlacement {
+  if (slot.Placement !== undefined && slot.Placement !== null) {
+    return slot.Placement
+  }
+
+  if (
+    isViewChromeSlotKind(slot, viewChromeSlotKinds.actions) ||
+    isViewChromeSlotKind(slot, viewChromeSlotKinds.viewSwitch) ||
+    isViewChromeSlotKind(slot, viewChromeSlotKinds.layoutSwitch) ||
+    isViewChromeSlotKind(slot, viewChromeSlotKinds.headingTrailing) ||
+    isViewChromeSlotKind(slot, viewChromeSlotKinds.status)
+  ) {
+    return viewChromeSlotPlacements.header
+  }
+
+  if (isViewChromeSlotKind(slot, viewChromeSlotKinds.badgeStrip)) {
+    return viewChromeSlotPlacements.beforeContent
+  }
+
+  if (isViewChromeSlotKind(slot, viewChromeSlotKinds.metricStrip)) {
+    return viewChromeSlotPlacements.afterContent
+  }
+
+  return viewChromeSlotPlacements.none
+}
+
+function isRenderableNode(node: ReactNode): node is Exclude<ReactNode, null | undefined | false> {
+  return node !== null && node !== undefined && node !== false
+}
+
+function cn(...values: readonly (false | null | string | undefined)[]) {
+  return values.filter(Boolean).join(' ')
+}

package/src/projected-view-surface.tsx

@@ -0,0 +1,131 @@
+import type { ReactNode } from 'react'
+
+import {
+  findPresentationView,
+  type ViewChromeSlotDefinition,
+  type ViewChromeSlotPlacement,
+  type ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import type {
+  PresentationViewSurfaceContentTopInset,
+  PresentationViewSurfaceVerticalResizeOptions,
+} from './presentation-component-groups'
+import { usePresentationModule } from '@cohesivesystems/presentation-react'
+import {
+  ProjectedViewChrome,
+  resolveViewChromeSlots,
+} from './projected-view-chrome'
+import { viewChromeSlotPlacements } from '@cohesivesystems/presentation-contracts'
+
+interface ProjectedViewSurfaceProps {
+  readonly action?: ReactNode
+  readonly children?: ReactNode
+  readonly className?: string
+  readonly chromeAfterContentClassName?: string
+  readonly chromeBeforeContentClassName?: string
+  readonly chromeFooterClassName?: string
+  readonly chromeHeaderClassName?: string
+  readonly collapsible?: boolean
+  readonly collapsed?: boolean
+  readonly collapseLabel?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly contentClassName?: string
+  readonly contentTopInset?: PresentationViewSurfaceContentTopInset | null
+  readonly defaultCollapsed?: boolean
+  readonly description?: string
+  readonly eyebrow?: string
+  readonly onCollapsedChange?: (collapsed: boolean) => void
+  readonly renderChromeSlot?: ProjectedViewSurfaceChromeSlotRenderer
+  readonly title?: string
+  readonly verticalResize?: boolean | PresentationViewSurfaceVerticalResizeOptions | null
+  readonly view?: ViewDefinition | null
+  readonly viewId?: string
+}
+
+export type ProjectedViewSurfaceChromeSlotRenderer = (
+  slot: ViewChromeSlotDefinition,
+  view: ViewDefinition | null,
+) => ReactNode
+
+export type ProjectedViewSurfaceContentTopInset =
+  PresentationViewSurfaceContentTopInset
+
+export type ProjectedViewSurfaceVerticalResizeOptions =
+  PresentationViewSurfaceVerticalResizeOptions
+
+export function ProjectedViewSurface({
+  action,
+  children,
+  chromeAfterContentClassName,
+  chromeBeforeContentClassName,
+  chromeFooterClassName,
+  chromeHeaderClassName,
+  collapsible,
+  componentSystem,
+  renderChromeSlot,
+  title,
+  view: viewOverride,
+  viewId,
+  ...props
+}: ProjectedViewSurfaceProps) {
+  const module = usePresentationModule()
+  const view = viewOverride ?? (viewId
+    ? findPresentationView<ViewDefinition>(module, viewId)
+    : null)
+  const renderChromePlacement = (
+    placement: ViewChromeSlotPlacement,
+    className?: string,
+  ) => renderChromeSlot && resolveViewChromeSlots(view, placement).length > 0 ? (
+    <ProjectedViewChrome
+      componentSystem={componentSystem}
+      placement={placement}
+      renderContainer={(children) =>
+        componentSystem.surfaces.ViewSurfaceChromePlacement({
+          children,
+          className,
+          placement,
+          viewId: view?.Id ?? null,
+        })}
+      renderSlot={(slot) => renderChromeSlot(slot, view)}
+      view={view}
+    />
+  ) : null
+  const headerChrome = renderChromePlacement(
+    viewChromeSlotPlacements.header,
+    chromeHeaderClassName,
+  )
+  const beforeContentChrome = renderChromePlacement(
+    viewChromeSlotPlacements.beforeContent,
+    chromeBeforeContentClassName,
+  )
+  const afterContentChrome = renderChromePlacement(
+    viewChromeSlotPlacements.afterContent,
+    chromeAfterContentClassName,
+  )
+  const footerChrome = renderChromePlacement(
+    viewChromeSlotPlacements.footer,
+    chromeFooterClassName,
+  )
+
+  return componentSystem.surfaces.ViewSurface({
+    ...props,
+    action: componentSystem.surfaces.ViewSurfaceHeaderActions({
+      action,
+      chrome: headerChrome,
+      viewId: view?.Id ?? null,
+    }),
+    children: componentSystem.surfaces.ViewSurfaceContent({
+      afterContentChrome,
+      beforeContentChrome,
+      children,
+      footerChrome,
+      viewId: view?.Id ?? null,
+    }),
+    collapsible: collapsible ?? view?.Chrome?.Collapsible,
+    title: title ?? view?.Name,
+    viewId: view?.Id ?? null,
+  })
+}