bsky-app/src/view/com/util/Html.tsx

import * as React from 'react'
import {StyleSheet, View} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
import {Text} from './text/Text'
import {TextLink} from './Link'
import {isDesktopWeb} from 'platform/detection'
import {
  H1 as ExpoH1,
  H2 as ExpoH2,
  H3 as ExpoH3,
  H4 as ExpoH4,
} from '@expo/html-elements'

/**
 * These utilities are used to define long documents in an html-like
 * DSL. See for instance /locale/en/privacy-policy.tsx
 */

interface IsChildProps {
  isChild?: boolean
}

// type ReactNodeWithIsChildProp =
//   | React.ReactElement<IsChildProps>
//   | React.ReactElement<IsChildProps>[]
//   | React.ReactNode

export function H1({children}: React.PropsWithChildren<{}>) {
  const pal = usePalette('default')
  const typography = useTheme().typography['title-xl']
  return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
}

export function H2({children}: React.PropsWithChildren<{}>) {
  const pal = usePalette('default')
  const typography = useTheme().typography['title-lg']
  return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
}

export function H3({children}: React.PropsWithChildren<{}>) {
  const pal = usePalette('default')
  const typography = useTheme().typography.title
  return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
}

export function H4({children}: React.PropsWithChildren<{}>) {
  const pal = usePalette('default')
  const typography = useTheme().typography['title-sm']
  return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
}

export function P({children}: React.PropsWithChildren<{}>) {
  const pal = usePalette('default')
  return (
    <Text type="md" style={[pal.text, styles.p]}>
      {children}
    </Text>
  )
}

export function UL({children, isChild}: React.PropsWithChildren<IsChildProps>) {
  return (
    <View style={[styles.ul, isChild && styles.ulChild]}>
      {markChildProps(children)}
    </View>
  )
}

export function OL({children, isChild}: React.PropsWithChildren<IsChildProps>) {
  return (
    <View style={[styles.ol, isChild && styles.olChild]}>
      {markChildProps(children)}
    </View>
  )
}

export function LI({
  children,
  value,
}: React.PropsWithChildren<{value?: string}>) {
  const pal = usePalette('default')
  return (
    <View style={styles.li}>
      <Text style={[pal.text, styles.liBullet]}>{value || <>&bull;</>}</Text>
      <Text type="md" style={[pal.text, styles.liText]}>
        {markChildProps(children)}
      </Text>
    </View>
  )
}

export function A({children, href}: React.PropsWithChildren<{href: string}>) {
  const pal = usePalette('default')
  return (
    <TextLink
      type="md"
      style={[pal.link, styles.a]}
      text={children}
      href={href}
    />
  )
}

export function STRONG({children}: React.PropsWithChildren<{}>) {
  const pal = usePalette('default')
  return (
    <Text type="md-medium" style={[pal.text]}>
      {children}
    </Text>
  )
}

export function EM({children}: React.PropsWithChildren<{}>) {
  const pal = usePalette('default')
  return (
    <Text type="md" style={[pal.text, styles.em]}>
      {children}
    </Text>
  )
}

function markChildProps(children: React.ReactNode) {
  return React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement<IsChildProps>(
        child as React.ReactElement<IsChildProps>,
        {isChild: true},
      )
    }
    return child
  })
}

const styles = StyleSheet.create({
  h1: {
    marginTop: 20,
    marginBottom: 10,
    letterSpacing: 0.8,
  },
  h2: {
    marginTop: 20,
    marginBottom: 10,
    letterSpacing: 0.8,
  },
  h3: {
    marginTop: 0,
    marginBottom: 10,
  },
  h4: {
    marginTop: 0,
    marginBottom: 10,
    fontWeight: 'bold',
  },
  p: {
    marginBottom: 10,
  },
  ul: {
    marginBottom: 10,
    paddingLeft: isDesktopWeb ? 18 : 4,
  },
  ulChild: {
    paddingTop: 10,
    marginBottom: 0,
  },
  ol: {
    marginBottom: 10,
    paddingLeft: isDesktopWeb ? 18 : 4,
  },
  olChild: {
    paddingTop: 10,
    marginBottom: 0,
  },
  li: {
    flexDirection: 'row',
    paddingRight: 20,
    marginBottom: 10,
  },
  liBullet: {
    paddingRight: 10,
  },
  liText: {},
  a: {
    marginBottom: 10,
  },
  em: {
    fontStyle: 'italic',
  },
})