web/packages/design-system/lib/components/JsonToHtml/JsonToHtml.tsx

import { cx } from 'class-variance-authority'

import { nodesToHtml } from './utils'

import styles from './jsontohtml.module.css'

import type { RTENode } from './types/rte/node'
import type { RenderOptions } from './types/rte/option'
import { ContentBlockType } from './types/rte/enums'

export type Node<T> = {
  node: T
}

type Image = {
  id: number
  title: string
  url: string
  focalPoint: {
    x: number
    y: number
  }
  meta: {
    alt?: string | null
    caption?: string | null
  }
}
export type Embeds =
  | {
      __typename: Exclude<ContentBlockType, 'ImageContainer'>
      system?: { uid: string } | undefined | null
      url?: string | undefined | null
      title?: string | undefined | null
    }
  | {
      __typename: 'ImageContainer'
      system?: { uid: string } | undefined | null
      url?: string | undefined | null
      title?: string | undefined | null
      image_left?: Image | undefined
      image_right?: Image | undefined
    }

export type EmbedByUid = Record<string, Node<Embeds>>

export type JsonToHtmlProps = {
  embeds: Node<Embeds>[]
  nodes: RTENode[]
  renderOptions?: RenderOptions
  className?: string
}

export function JsonToHtml({
  embeds,
  nodes,
  renderOptions = {},
  className,
}: JsonToHtmlProps) {
  if (!Array.isArray(nodes) || !nodes.length) {
    return null
  }

  return (
    <section className={cx(styles.container, className)}>
      {nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
    </section>
  )
}