@financial-times/cp-content-pipeline-ui 0.1.2

package/src/components/ImageSet/index.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+
+import type {
+  ImageFragment,
+  ImageSetFragment,
+  PictureFragment,
+  ImageType,
+} from '@financial-times/cp-content-pipeline-client'
+
+type ImageProps = {
+  image: ImageFragment
+  alt: string
+  type: ImageType
+}
+
+const srcSet = (image: ImageFragment) =>
+  image.sources.map((src) => `${src.url} ${src.dpr}x`).join(',')
+
+const figureClassNameMap: Record<PictureFragment['__typename'], string> = {
+  PictureFullBleed:
+    'n-content-picture n-content-picture--wide n-content-layout__container',
+  PictureInline: 'n-content-image n-content-image--inline',
+  PictureStandard: 'n-content-image n-content-image--full',
+}
+
+function Source({ image }: { image: ImageFragment }) {
+  const media = [
+    image.minDisplayWidth && `(min-width: ${image.minDisplayWidth})`,
+    image.maxDisplayWidth && `(max-width: ${image.maxDisplayWidth})`,
+  ]
+    .filter(Boolean)
+    .join(' and ')
+
+  // only need to have sources for different screen breakpoints
+  if (!media.length) return null
+
+  return (
+    <source
+      media={media}
+      srcSet={srcSet(image)}
+      width={image.originalWidth}
+      height={image.originalHeight}
+    />
+  )
+}
+
+function Image({ image, alt, type }: ImageProps) {
+  const props = {
+    src: image.sources[0].url,
+    alt,
+    srcSet: image.sources.length > 1 ? srcSet(image) : undefined,
+    'data-image-type': type.toLowerCase(),
+    width: image.originalWidth,
+    height: image.originalHeight,
+  }
+
+  return <img {...props} />
+}
+
+// type is too disparate to make fragments for, so define it here
+type PictureImages<T> = {
+  __typename?: 'PictureImages'
+  [key: string]: T | 'PictureImages' | undefined
+}
+
+const isValidImage = <T,>(image: T | 'PictureImages' | undefined): image is T =>
+  Boolean(image) && image !== 'PictureImages'
+
+const validImages = <T,>(images: PictureImages<T>): T[] =>
+  Object.values(images).filter(isValidImage)
+
+function Figure({ picture }: ImageSetFragment) {
+  if (!picture.images) {
+    throw new Error(
+      `ImageSet of type ${picture.__typename} has no images. Check that they are present in the query`
+    )
+  }
+  if (
+    !picture.images.standard ||
+    'minDisplayWidth' in picture.images.standard ||
+    'maxDisplayWidth' in picture.images.standard
+  ) {
+    throw new Error(
+      `ImageSet must include a "standard" image, without any breakpoint restrictions.`
+    )
+  }
+
+  const pictureImages: ImageFragment[] = validImages(picture.images)
+
+  return (
+    <figure
+      className={figureClassNameMap[picture.__typename] || 'n-content-image'}
+    >
+      <picture>
+        {pictureImages.map((image: ImageFragment, index: number) => (
+          <Source key={index} image={image} />
+        ))}
+        <Image
+          image={picture.images.standard}
+          alt={picture.alt}
+          type={picture.imageType}
+        />
+      </picture>
+      {picture.caption && (
+        <figcaption className="n-content-picture__caption">
+          {picture.caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
+
+export default function ImageSet(fragment: ImageSetFragment) {
+  if (fragment.picture.__typename === 'PictureFullBleed') {
+    return (
+      <div className="n-content-layout" data-layout-width="full-grid">
+        <Figure {...fragment} />
+      </div>
+    )
+  } else {
+    return <Figure {...fragment} />
+  }
+}

package/src/components/Layout/index.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react'
+
+type LayoutProps = {
+  children: ReactNode
+  dataLayoutName: string
+  dataLayoutWidth: 'full-grid' | 'fullWidth'
+}
+
+type LayoutContainerProps = {
+  children: ReactNode
+}
+
+type LayoutSlotProps = {
+  children: ReactNode
+  dataLayoutWidth: string
+}
+
+export function Layout({
+  children,
+  dataLayoutName,
+  dataLayoutWidth,
+}: LayoutProps) {
+  return (
+    <div
+      className="n-content-layout"
+      data-layout-name={dataLayoutName}
+      data-layout-width={dataLayoutWidth}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function LayoutContainer({ children }: LayoutContainerProps) {
+  return <div className="n-content-layout__container">{children}</div>
+}
+
+export function LayoutSlot({ children, dataLayoutWidth }: LayoutSlotProps) {
+  return (
+    <div className="n-content-layout__slot" data-layout-width={dataLayoutWidth}>
+      {children}
+    </div>
+  )
+}

package/src/components/ListItem/index.tsx

@@ -0,0 +1,5 @@
+import React, { ReactNode } from 'react'
+
+export default function ListItem({ children }: { children: ReactNode }) {
+  return <li>{children}</li>
+}

package/src/components/Recommended/RecommendedTitle.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react'
+
+export default function RecommendedTitle({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return <h2 className="n-content-recommended__title">{children}</h2>
+}

package/src/components/Recommended/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+//HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
+import { presets, Teaser } from '@financial-times/x-teaser/dist/Teaser.cjs.js'
+import RecommendedTitle from './RecommendedTitle'
+
+import type { RecommendedFragment } from '@financial-times/cp-content-pipeline-client'
+
+export default function RecommendedComponent({
+  title,
+  teaser,
+}: RecommendedFragment) {
+  return (
+    <aside className="n-content-recommended--single-story">
+      <RecommendedTitle>{title}</RecommendedTitle>
+      <Teaser
+        modifiers={['stacked']}
+        {...presets.SmallHeavy}
+        {...teaser}
+      />
+    </aside>
+  )
+}

package/src/components/RichText/README.md

@@ -0,0 +1,34 @@
+# RichText
+
+A JSX component that takes structured content as output from the GraphQL API, iterates through the tree, and renders JSX components for each tag.
+
+## Using
+
+```jsx
+  const structuredContent = {
+    tree: hastTree,
+    references: [{
+      __typename: 'Recommended',
+      teaser: {}
+    }] // array of additional props to pass to components
+  }
+
+  const componentOverrides = {
+    Link: () => null,
+    Image: MyImageComponent
+  }
+  <RichText structuredContent={structuredContent} components={componentOverrides} />
+```
+
+
+## What is a tree?
+
+The `tree` should be a body of content represented as a [hast](https://github.com/syntax-tree/hast) abstract syntax tree. The `tagName` for the nodes should correspond to a component that can be rendered.
+
+## What are references?
+
+A reference is essentially an object providing additional props, that can be passed to the components rendering children in the tree.
+
+A node in the tree can have a property `dataReferenceId`, which corresponds to an index in the references array holding the additional props for that node. The RichText component will automatically pass those additional props to the corresponding JSX component for that node.
+
+A use case for this is for Recommended nodes, which require additional teaser data to render that isn't available in the original content tree.

package/src/components/RichText/index.test.tsx

@@ -0,0 +1,166 @@
+import React, { createElement } from 'react'
+import { render } from '@testing-library/react'
+import RichText from '.'
+
+describe('<RichText />', () => {
+  it('renders a HAST tree using built-in components', () => {
+    const tree = {
+      type: 'root' as 'root',
+      children: [
+        {
+          type: 'element' as 'element',
+          tagName: 'Paragraph',
+          children: [{ type: 'text' as 'text', value: 'This is some text.' }],
+        },
+      ],
+    }
+    const structuredContent = { tree }
+
+    const { asFragment } = render(
+      <RichText structuredContent={structuredContent} />
+    )
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <p>
+          This is some text.
+        </p>
+      </DocumentFragment>
+    `)
+  })
+
+  it('adds a key property to all child components', () => {
+    jest.spyOn(React, 'createElement')
+    const tree = {
+      type: 'root' as 'root',
+      children: [
+        {
+          type: 'element' as 'element',
+          tagName: 'Link',
+          properties: {
+            test: 'blah',
+          },
+          children: [
+            {
+              type: 'text' as 'text',
+              value: 'first link',
+            },
+          ],
+        },
+        {
+          type: 'element' as 'element',
+          tagName: 'Link',
+          children: [
+            {
+              type: 'text' as 'text',
+              value: 'second link',
+            },
+          ],
+        },
+      ],
+    }
+    const structuredContent = {
+      tree,
+    }
+
+    render(<RichText structuredContent={structuredContent} />)
+    expect(createElement).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.objectContaining({ key: 0 }),
+      ['first link']
+    )
+    expect(createElement).toHaveBeenCalledWith(
+      expect.any(Function),
+      expect.objectContaining({ key: 1 }),
+      ['second link']
+    )
+  })
+
+  it("ignores components that it doesn't have a mapping for", () => {
+    const tree = {
+      type: 'root' as 'root',
+      children: [
+        {
+          type: 'element' as 'element',
+          tagName: 'Link',
+          properties: {
+            test: 'blah',
+          },
+          children: [
+            {
+              type: 'text' as 'text',
+              value: 'i should render',
+            },
+          ],
+        },
+        {
+          type: 'element' as 'element',
+          tagName: 'Unknown',
+          children: [
+            {
+              type: 'text' as 'text',
+              value: 'i should not render',
+            },
+          ],
+        },
+      ],
+    }
+    const structuredContent = {
+      tree,
+    }
+
+    const { queryByText } = render(
+      <RichText structuredContent={structuredContent} />
+    )
+    expect(queryByText('i should render')).toBeTruthy()
+    expect(queryByText('i should not render')).toBeFalsy()
+  })
+
+  it('adds references as props', () => {
+    const tree = {
+      type: 'root' as 'root',
+      children: [
+        {
+          type: 'element' as 'element',
+          tagName: 'Link',
+          properties: {
+            dataReferenceId: 0,
+          },
+          children: [
+            {
+              type: 'text' as 'text',
+              value: 'withreference',
+            },
+          ],
+        },
+        {
+          type: 'element' as 'element',
+          tagName: 'Link',
+          children: [
+            {
+              type: 'text' as 'text',
+              value: 'withoutreference',
+            },
+          ],
+        },
+      ],
+    }
+    const structuredContent = {
+      tree,
+      references: [
+        {
+          __typename: 'Link' as const,
+          href: 'https://www.ft.com/',
+        },
+      ],
+    }
+
+    const { getByText } = render(
+      <RichText structuredContent={structuredContent} />
+    )
+    expect(getByText('withreference')).toHaveProperty(
+      'href',
+      'https://www.ft.com/'
+    )
+    expect(getByText('withoutreference')).toHaveProperty('href', '')
+  })
+})

package/src/components/RichText/index.tsx

@@ -0,0 +1,136 @@
+import React, { createElement, ReactNode } from 'react'
+import Recommended from '../Recommended'
+import ImageSet from '../ImageSet'
+import RecommendedTitle from '../Recommended/RecommendedTitle'
+import UnorderedList from '../UnorderedList'
+import ListItem from '../ListItem'
+import { Layout, LayoutContainer, LayoutSlot } from '../Layout'
+
+import * as hast from 'hast'
+
+import type {
+  ArticleReferencesFragment,
+  Reference,
+  StructuredContent,
+  StructuredContentFragment,
+} from '@financial-times/cp-content-pipeline-client'
+
+export type ComponentMapRecord = Record<string, React.ElementType>
+
+export type RenderHastTreeArguments = {
+  root: hast.Root
+  components: ComponentMapRecord
+  references?: Reference[]
+}
+
+type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> &
+  Omit<T, K>
+
+export type RichTextProps = {
+  // the component using RichText might not have queried for references, so make it optional
+  structuredContent: WithOptionalProperty<
+    StructuredContentFragment,
+    'references'
+  >
+  components?: ComponentMapRecord
+}
+
+/* This will be the default set of components we provide, that most
+ * clients can use to render a workable article page
+ */
+
+const componentMap: ComponentMapRecord = {
+  Paragraph: 'p',
+  Recommended,
+  UnorderedList,
+  ListItem,
+  FTContent: (props) => <a href={props.url}>{props.children}</a>,
+  RecommendedTitle,
+  Link: (props) => <a href={props.href}>{props.children}</a>,
+  ImageSet,
+  Layout,
+  LayoutContainer,
+  LayoutSlot,
+  LayoutImage: ImageSet,
+  Experimental: (props) => props.children,
+}
+
+function isHastElement(element: hast.Content): element is hast.Element {
+  return (element as hast.Element).tagName !== undefined
+}
+
+class HastToJSX {
+  components: ComponentMapRecord
+  references?: StructuredContentFragment['references']
+  index = 0
+
+  constructor(
+    components: ComponentMapRecord,
+    references?: StructuredContentFragment['references']
+  ) {
+    this.components = components
+    this.references = references
+  }
+
+  #getPropsForNode(node: hast.Element) {
+    const reference =
+      typeof node.properties?.dataReferenceId === 'number'
+        ? this.references?.[node.properties?.dataReferenceId]
+        : {}
+    return {
+      ...node.properties,
+      ...reference,
+      key: this.index++,
+    }
+  }
+
+  #renderChild(node: hast.Content) {
+    if (node.type === 'text') {
+      return node.value
+    } else if (!isHastElement(node)) {
+      return null
+    }
+
+    const component = this.components[node.tagName]
+
+    if (component) {
+      const childElements: ReactNode[] = node.children
+        .map((child: hast.Content) => this.#renderChild(child))
+        .filter(Boolean)
+
+      return createElement(
+        component,
+        this.#getPropsForNode(node),
+        childElements
+      )
+    }
+  }
+
+  render(tree: hast.Root) {
+    const children = tree.children.map((node: hast.Content) =>
+      this.#renderChild(node)
+    )
+
+    return <>{children}</>
+  }
+}
+
+export default function RichText({
+  structuredContent,
+  components,
+}: RichTextProps) {
+  if (!structuredContent) {
+    return null
+  }
+
+  const componentsWithOverrides = {
+    ...componentMap,
+    ...components,
+  }
+
+  const renderer = new HastToJSX(
+    componentsWithOverrides,
+    structuredContent.references
+  )
+  return renderer.render(structuredContent.tree)
+}

package/src/components/Topper/Columnist.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import type { ConceptFragment } from '@financial-times/cp-content-pipeline-client'
+
+//TODO: add myFT button stuff here
+export default function Columnist({
+  authorConcept,
+}: {
+  authorConcept: ConceptFragment
+}) {
+  return (
+    <div className="o-topper__columnist">
+      <a
+        className="o-topper__columnist-name n-content-tag--with-follow"
+        href={authorConcept.relativeUrl ?? undefined}
+        data-trackable="columnist"
+      >
+        {authorConcept.prefLabel}
+      </a>
+    </div>
+  )
+}

package/src/components/Topper/Headline.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type HeadlineProps = {
+  headline: string
+  isLargeHeadline?: boolean
+}
+
+export default function Headline({
+  headline,
+  isLargeHeadline = false,
+}: HeadlineProps) {
+  if (!headline) {
+    return <></>
+  }
+
+  const headlineClassnames = classnames({
+    'o-topper__headline': true,
+    [`o-topper__headline--large`]: isLargeHeadline,
+  })
+
+  return (
+    <h1 className={headlineClassnames}>
+      <span className="article-classifier__gap">{headline}</span>
+    </h1>
+  )
+}

package/src/components/Topper/Headshot.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Headshot({ url }: { url: string }) {
+  return (
+    <div className="o-topper__headshot">
+      <img className="o-topper__headshot-image" src={url} role="presentation" />
+    </div>
+  )
+}

package/src/components/Topper/Intro.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import RichText from '../RichText'
+import type { StructuredTreeFragment } from '@financial-times/cp-content-pipeline-client'
+
+export type IntroProps = {
+  source: 'standfirst' | 'summary'
+  structuredContent: StructuredTreeFragment
+}
+
+export default function Intro({ structuredContent, source }: IntroProps) {
+  return (
+    <div className={`o-topper__${source}`}>
+      <RichText structuredContent={structuredContent} />
+    </div>
+  )
+}

package/src/components/Topper/Picture.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import type {
+  TopperImagesFragment,
+  ImageFragment,
+} from '@financial-times/cp-content-pipeline-client'
+
+type PictureProps = {
+  images?: TopperImagesFragment
+  alt?: string
+}
+
+function generateMediaQuery(image: ImageFragment): string {
+  const queries = []
+  image.minDisplayWidth && queries.push(`(min-width: ${image.minDisplayWidth})`)
+  image.maxDisplayWidth && queries.push(`(max-width: ${image.maxDisplayWidth})`)
+
+  return queries.join(' and ')
+}
+
+const srcSet = (image: ImageFragment) =>
+  image.sources.map((src) => `${src.url} ${src.dpr}x`).join(',')
+
+export default function Picture({ images, alt = '' }: PictureProps) {
+  if (!images?.fallback) {
+    return null
+  }
+
+  return (
+    <figure className="o-topper__visual">
+      <picture className="o-topper__picture" key="responsive-images">
+        {images?.square && (
+          <source
+            media={generateMediaQuery(images.square)}
+            srcSet={srcSet(images.square)}
+            data-testid="responsive-source"
+            key={'square'}
+          />
+        )}
+        {images?.standard && (
+          <source
+            media={generateMediaQuery(images.standard)}
+            srcSet={srcSet(images.standard)}
+            data-testid="responsive-source"
+            key={'standard'}
+          />
+        )}
+        {images?.wide && (
+          <source
+            media={generateMediaQuery(images.wide)}
+            srcSet={srcSet(images.wide)}
+            data-testid="responsive-source"
+            key={'standard'}
+          />
+        )}
+        <img
+          alt={alt}
+          className="o-topper__image"
+          src={`${images.fallback.sources[0].url}`}
+          key="fallback-image"
+        />
+      </picture>
+      {images.fallback.copyright && (
+        <figcaption className="o-topper__image-credit">
+          {images.fallback.copyright}
+        </figcaption>
+      )}
+    </figure>
+  )
+}