sovrium 0.0.2

package/src/presentation/ui/sections/rendering/component-registry/structural-components.ts

@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import * as Renderers from '../../renderers/element-renderers'
+import type { ComponentRenderer } from '../component-dispatch-config'
+import type { Component } from '@/domain/models/app/page/sections'
+
+/**
+ * Structural HTML components (section, header, footer, main, etc.)
+ *
+ * These components render semantic HTML elements for page structure.
+ */
+export const structuralComponents: Partial<Record<Component['type'], ComponentRenderer>> = {
+  section: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'section',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  header: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'header',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  footer: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'footer',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  main: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'main',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  article: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'article',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  aside: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'aside',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  nav: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'nav',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  div: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  container: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  flex: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  grid: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  card: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  timeline: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  accordion: ({ elementPropsWithSpacing, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementPropsWithSpacing,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  span: ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'span',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  modal: ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  sidebar: ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  toast: ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  fab: ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  spinner: ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  'list-item': ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+
+  dropdown: ({ elementProps, content, renderedChildren, interactions }) =>
+    Renderers.renderHTMLElement({
+      type: 'div',
+      props: elementProps,
+      content: content,
+      children: renderedChildren,
+      interactions: interactions,
+    }),
+}

package/src/presentation/ui/sections/rendering/component-registry/text-components.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import * as Renderers from '../../renderers/element-renderers'
+import type { ComponentRenderer } from '../component-dispatch-config'
+import type { Component } from '@/domain/models/app/page/sections'
+
+/**
+ * Text and heading components (h1-h6, text, paragraph, code, etc.)
+ *
+ * These components render text content and typography elements.
+ */
+export const textComponents: Partial<Record<Component['type'], ComponentRenderer>> = {
+  h1: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderHeading(1, elementProps, content, renderedChildren),
+
+  h2: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderHeading(2, elementProps, content, renderedChildren),
+
+  h3: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderHeading(3, elementProps, content, renderedChildren),
+
+  h4: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderHeading(4, elementProps, content, renderedChildren),
+
+  h5: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderHeading(5, elementProps, content, renderedChildren),
+
+  h6: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderHeading(6, elementProps, content, renderedChildren),
+
+  heading: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderHeading(1, elementProps, content, renderedChildren),
+
+  text: ({ elementProps, content }) => Renderers.renderTextElement(elementProps, content),
+
+  'single-line-text': ({ elementProps, content }) =>
+    Renderers.renderTextElement(elementProps, content),
+
+  'long-text': ({ elementProps, content }) => Renderers.renderTextElement(elementProps, content),
+
+  paragraph: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderParagraph(elementProps, content, renderedChildren),
+
+  p: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderParagraph(elementProps, content, renderedChildren),
+
+  code: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderCode(elementProps, content, renderedChildren),
+
+  pre: ({ elementProps, content, renderedChildren }) =>
+    Renderers.renderPre(elementProps, content, renderedChildren),
+}

package/src/presentation/ui/sections/rendering/component-registry-helpers.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+/**
+ * Convert custom props to data-* attributes for badge components
+ *
+ * Re-exported from prop-conversion module for backward compatibility
+ */
+export { convertBadgeProps } from '../props/prop-conversion'
+
+/**
+ * Parse HTML content string into React elements
+ *
+ * SECURITY: Safe use of dangerouslySetInnerHTML
+ * - Content: HTML string from component configuration
+ * - Source: Validated schema (component content property)
+ * - Risk: Low - content is from server configuration, not user input
+ * - Validation: Schema validation ensures string type
+ * - Purpose: Render HTML content in badge/component elements
+ * - XSS Protection: Content comes from trusted configuration
+ * - NOTE: For user-generated HTML, use DOMPurify sanitization instead
+ */
+export function parseHTMLContent(htmlString: string) {
+  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />
+}

package/src/presentation/ui/sections/rendering/component-registry.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+/**
+ * Re-export from component-registry directory
+ *
+ * This file maintains backward compatibility with existing imports.
+ * The actual implementation has been split into:
+ * - structural-components.ts
+ * - text-components.ts
+ * - media-components.ts
+ * - interactive-components.ts
+ * - special-components.tsx
+ *
+ * @see src/presentation/ui/sections/rendering/component-registry/
+ */
+export { COMPONENT_REGISTRY } from './component-registry/'

package/src/presentation/ui/sections/rendering/component-type-dispatcher.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import * as Renderers from '../renderers/element-renderers'
+import { COMPONENT_REGISTRY } from './component-registry'
+import type { ComponentDispatchConfig } from './component-dispatch-config'
+import type { ReactElement } from 'react'
+
+/**
+ * Dispatch component rendering based on type using registry pattern
+ * Complexity reduced from 47 to <10 by replacing switch statement with lookup
+ * Parameters reduced from 7 to 1 by using config object
+ */
+export function dispatchComponentType(config: ComponentDispatchConfig): ReactElement | null {
+  // Registry lookup replaces giant switch statement
+  const renderer = COMPONENT_REGISTRY[config.type]
+  if (renderer) {
+    return renderer(config)
+  }
+
+  // Fallback for unknown types
+  return Renderers.renderHTMLElement({
+    type: 'div',
+    props: config.elementProps,
+    content: config.content,
+    children: config.renderedChildren,
+    interactions: config.interactions,
+  })
+}

package/src/presentation/ui/sections/rendering/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+// Barrel export for component rendering utilities
+// Files will be added during migration

package/src/presentation/ui/sections/responsive/responsive-children-builder.tsx

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { type ReactElement, Fragment } from 'react'
+import { BREAKPOINT_ORDER } from './responsive-resolver'
+import type { Responsive } from '@/domain/models/app/page/common/responsive'
+import type { Component } from '@/domain/models/app/page/sections'
+
+/**
+ * Props for responsive children renderer
+ */
+export interface ResponsiveChildrenRendererProps {
+  readonly responsive: Responsive
+  readonly baseChildren: readonly ReactElement[] | undefined
+  readonly renderChild: (
+    child: Component | string,
+    index: number,
+    breakpoint?: string,
+    additionalClassName?: string
+  ) => ReactElement
+}
+
+/**
+ * Builds responsive children variants using CSS-based approach
+ *
+ * Renders wrapper divs for each breakpoint's children array.
+ * Each wrapper is shown/hidden via Tailwind visibility classes based on viewport width.
+ *
+ * Uses mobile-first approach with upper-bound hiding:
+ * - If next breakpoint has override: hide from next breakpoint (e.g., "block lg:hidden")
+ * - If no next override: show from this breakpoint onwards (e.g., "hidden lg:block")
+ *
+ * This approach works reliably in E2E tests because:
+ * - All children variants rendered server-side
+ * - CSS media queries control visibility (no JavaScript required)
+ * - Playwright can query visible children after viewport changes
+ * - No React state updates needed for viewport changes
+ *
+ * Example output:
+ * <nav>
+ *   <div className="block lg:hidden">
+ *     <button>☰</button>
+ *   </div>
+ *   <div className="hidden lg:block">
+ *     <a>Home</a>
+ *     <a>About</a>
+ *     <a>Contact</a>
+ *   </div>
+ * </nav>
+ *
+ * @param props - Responsive children renderer props
+ * @returns ReactElement with responsive children variants wrapped in visibility containers
+ */
+export function buildResponsiveChildrenVariants({
+  responsive,
+  baseChildren,
+  renderChild,
+}: ResponsiveChildrenRendererProps): readonly ReactElement[] {
+  // Collect all breakpoints with children overrides, maintaining order
+  const breakpointsWithChildren = BREAKPOINT_ORDER.filter(
+    (bp) => responsive[bp]?.children !== undefined
+  ).map((bp) => ({ breakpoint: bp, children: responsive[bp]!.children! }))
+
+  // If no responsive children overrides, return base children
+  if (breakpointsWithChildren.length === 0) {
+    return baseChildren ?? []
+  }
+
+  // Build responsive children variants by cloning elements with visibility classes
+  const childrenVariants = breakpointsWithChildren.map(({ breakpoint, children }, index) => {
+    // Determine visibility class based on next breakpoint override
+    // Use max-* utilities for upper bounds (mobile-first approach)
+    const nextBreakpoint = breakpointsWithChildren[index + 1]?.breakpoint
+    const visibilityClass = nextBreakpoint
+      ? breakpoint === 'mobile'
+        ? `max-${nextBreakpoint}:block ${nextBreakpoint}:hidden` // Mobile: show below next BP, hide at/above
+        : `max-${breakpoint}:hidden ${breakpoint}:block max-${nextBreakpoint}:block ${nextBreakpoint}:hidden` // Mid: hide below, show in range, hide above
+      : breakpoint === 'mobile'
+        ? 'block' // Mobile with no next: always visible
+        : `max-${breakpoint}:hidden ${breakpoint}:block` // Last breakpoint: hide below, show at/above
+
+    // Render children for this breakpoint with visibility class passed to renderChild
+    // The renderChild callback will inject the className into the component's props
+    const renderedChildren = children.map((child, childIndex) =>
+      renderChild(child, childIndex, breakpoint, visibilityClass)
+    )
+
+    return <Fragment key={breakpoint}>{renderedChildren}</Fragment>
+  })
+
+  return childrenVariants
+}

package/src/presentation/ui/sections/responsive/responsive-content-builder.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { type ReactElement } from 'react'
+import { dispatchComponentType } from '../rendering/component-type-dispatcher'
+import { BREAKPOINT_ORDER } from './responsive-resolver'
+import type { Responsive } from '@/domain/models/app/page/common/responsive'
+
+/**
+ * Builds responsive content variants using CSS-based approach (nested span strategy)
+ *
+ * Renders a single wrapper element with nested span elements for each breakpoint's content.
+ * Each span is shown/hidden via Tailwind visibility classes based on viewport width.
+ *
+ * Uses mobile-first approach with upper-bound hiding:
+ * - If next breakpoint has override: hide from next breakpoint (e.g., "inline max-md:inline md:hidden")
+ * - If no next override: show from this breakpoint onwards (e.g., "max-md:hidden md:inline")
+ *
+ * This approach works reliably in E2E tests because:
+ * - Single parent element (avoids Playwright strict mode violations)
+ * - Nested spans with responsive visibility (inline elements for text concatenation)
+ * - CSS media queries control visibility (display: none via Tailwind)
+ * - Playwright's toHaveText() only reads visible span's textContent
+ *
+ * Example output:
+ * <h1>
+ *   <span className="inline max-md:inline md:hidden">Mobile!</span>
+ *   <span className="max-md:hidden md:inline max-lg:inline lg:hidden">Tablet Welcome</span>
+ *   <span className="max-lg:hidden lg:inline">Desktop Welcome</span>
+ * </h1>
+ *
+ * @param responsive - Responsive configuration
+ * @param type - Component type (e.g., 'heading', 'text')
+ * @param elementProps - Element props for the wrapper
+ * @param elementPropsWithSpacing - Element props with spacing
+ * @returns ReactElement with nested responsive content spans (or null if dispatcher returns null)
+ */
+export function buildResponsiveContentVariants(
+  responsive: Responsive,
+  type: string,
+  elementProps: Record<string, unknown>,
+  elementPropsWithSpacing: Record<string, unknown>
+): ReactElement | null {
+  // Collect all breakpoints with content overrides, maintaining order
+  const breakpointsWithContent = BREAKPOINT_ORDER.filter(
+    (bp) => responsive[bp]?.content !== undefined
+  ).map((bp, index, array) => ({
+    breakpoint: bp,
+    content: responsive[bp]!.content!,
+    nextBreakpoint: array[index + 1],
+  }))
+
+  // Build nested span elements with responsive visibility classes
+  const contentSpans = breakpointsWithContent.map(
+    ({ breakpoint, content: variantContent, nextBreakpoint }) => {
+      // Calculate visibility class using block/hidden for proper Tailwind display toggling
+      // Same logic as children builder but using inline-block for text content
+      const visibilityClass = nextBreakpoint
+        ? breakpoint === 'mobile'
+          ? `inline-block max-${nextBreakpoint}:inline-block ${nextBreakpoint}:hidden` // Mobile: show below next BP, hide at/above
+          : `max-${breakpoint}:hidden ${breakpoint}:inline-block max-${nextBreakpoint}:inline-block ${nextBreakpoint}:hidden` // Mid: hide below, show in range, hide above
+        : breakpoint === 'mobile'
+          ? 'inline-block' // Mobile with no next: always visible
+          : `max-${breakpoint}:hidden ${breakpoint}:inline-block` // Last breakpoint: hide below, show at/above
+
+      // Use data attribute to track which breakpoint this span represents
+      // This helps with debugging and ensures each span is uniquely identifiable
+      return (
+        <span
+          key={breakpoint}
+          className={visibilityClass}
+          data-responsive-breakpoint={breakpoint}
+        >
+          {variantContent}
+        </span>
+      )
+    }
+  )
+
+  // Dispatch the wrapper component with nested content spans as children
+  return dispatchComponentType({
+    type,
+    elementProps,
+    elementPropsWithSpacing,
+    content: undefined,
+    renderedChildren: contentSpans as readonly ReactElement[],
+    theme: undefined,
+    languages: undefined,
+    interactions: undefined,
+  })
+}