@app-brew/brewery 1.0.0

package/src/ui-builder/src/components/molecules/rich-text.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { useAppStore, useDeviceDimensions } from '@gauntlet/state'
+import { RichTextBlockConfig } from '@gauntlet/types'
+import RenderHTMLSource, {
+  type RenderHTMLProps,
+} from 'react-native-render-html'
+import { Icon } from '@gauntlet/icons'
+import { Accordion } from './accordion'
+import { View } from 'react-native'
+import {
+  getContentWidth,
+  resolveRichTextTagsStyle,
+} from '../../style-utils'
+
+export interface RichTextProps {
+  html: string
+  style: RichTextBlockConfig['style']
+  systemFonts?: Array<string>
+  enableExperimentalBRCollapsing?: boolean
+  ignoredDomTags?: Array<string>
+  richTextProps?: Omit<
+    RenderHTMLProps,
+    'html' | 'systemFonts' | 'enableExperimentalBRCollapsing' | 'ignoredDomTags'
+  >
+  source?: any
+}
+export function InternalRichText({
+  html,
+  style,
+  systemFonts,
+  enableExperimentalBRCollapsing = true,
+  ignoredDomTags,
+  richTextProps,
+  source,
+}: RichTextProps) {
+  const enableUserAgentStyles = richTextProps?.enableUserAgentStyles
+  const { width } = useDeviceDimensions()
+  const rootWidth = getContentWidth(width, style.root)
+  const accordionWidth = getContentWidth(rootWidth, style.body?.root)
+  const globalFonts =
+    useAppStore((store) => store.config.data?.settings?.fonts) ?? []
+  const fonts = systemFonts ? systemFonts : []
+  const gotoLink = useAppStore((store) => store.route.gotoLink)
+  const collapsible = richTextProps?.collapsible ?? false
+
+  const handleLinkPress = React.useCallback(
+    (event, href) => {
+      gotoLink({ kind: 'url', value: href })
+    },
+    [gotoLink]
+  )
+  const renderersProps = {
+    a: {
+      onPress: handleLinkPress,
+    },
+  }
+
+  const resolvedStyle = React.useMemo(() => {
+    const tagsStyle = resolveRichTextTagsStyle(style?.tags)
+    const classesStyle = resolveRichTextTagsStyle(style?.classes)
+    return {
+      ...style,
+      tags: tagsStyle,
+      classes: classesStyle,
+    }
+  }, [style])
+
+  const nonAccordionWidth = getContentWidth(width, style.body?.root)
+
+  return collapsible ? (
+    <Accordion
+      title={source.title}
+      imageUrl={source.imageUrl}
+      styles={style}
+      collapseIcon={
+        <Icon
+          iconId={source?.icon?.expand}
+          fill={'#000'}
+          height={12}
+          width={12}
+          {...style?.icon}
+        />
+      }
+      expandIcon={
+        <Icon
+          iconId={source?.icon?.collapse}
+          fill={'#000'}
+          height={12}
+          width={12}
+          {...style?.expandIcon}
+        />
+      }
+      expandedState={richTextProps?.defaultExpanded}
+    >
+      <View style={resolvedStyle?.body?.root}>
+        <RenderHTMLSource
+          enableUserAgentStyles={enableUserAgentStyles}
+          contentWidth={accordionWidth}
+          ignoredDomTags={ignoredDomTags ?? ['br']}
+          tagsStyles={resolvedStyle?.tags}
+          classesStyles={resolvedStyle?.classes}
+          source={{
+            html: html,
+          }}
+          systemFonts={[...globalFonts, ...fonts]}
+          renderersProps={renderersProps}
+          enableExperimentalBRCollapsing={enableExperimentalBRCollapsing}
+          {...richTextProps}
+        />
+      </View>
+    </Accordion>
+  ) : (
+    <View style={resolvedStyle?.body?.root}>
+      <RenderHTMLSource
+        enableUserAgentStyles={enableUserAgentStyles}
+        contentWidth={nonAccordionWidth}
+        ignoredDomTags={ignoredDomTags ?? ['br']}
+        tagsStyles={resolvedStyle?.tags}
+        classesStyles={resolvedStyle?.classes}
+        source={{
+          html: html,
+        }}
+        systemFonts={[...globalFonts, ...fonts]}
+        renderersProps={renderersProps}
+        enableExperimentalBRCollapsing={enableExperimentalBRCollapsing}
+        {...richTextProps}
+      />
+    </View>
+  )
+}
+
+export const RichText = React.memo(InternalRichText)

package/src/ui-builder/src/components/molecules/rich-text.web.tsx

@@ -0,0 +1,82 @@
+import { RichTextBlockConfig } from '@gauntlet/types'
+import * as React from 'react'
+
+const pxProperties = new Set([
+  'fontSize',
+  'lineHeight',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'marginTop',
+  'marginLeft',
+  'marginRight',
+  'marginBottom',
+])
+export function InternalRichText({
+  html,
+  style,
+}: {
+  html: string
+  style: RichTextBlockConfig['style']
+}) {
+  const htmlToUse = html
+  const styledHtml = htmlToUse.trim()
+    ? applyStylesToElements(htmlToUse, style?.tags ?? {})
+    : ''
+  return (
+    <div style={{ alignSelf: 'stretch' }}>
+      <div
+        dangerouslySetInnerHTML={{ __html: styledHtml }}
+        style={{ fontFamily: 'Inter', width: '100%' }}
+      />
+    </div>
+  )
+}
+
+function applyStylesToElements(
+  htmlString: string,
+  styles: Record<string, any>
+) {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(htmlString, 'text/html')
+
+  for (let tag in styles) {
+    const elements = doc.getElementsByTagName(tag)
+    if (styles[tag].hasOwnProperty('fontFamily')) {
+      styles[
+        tag
+      ].fontFamily = `${styles[tag].fontFamily}, Helvetica, Roboto, sans-serif`
+    }
+    if (!elements || elements.length === 0) continue
+    for (let i = 0; i < elements.length; i++) {
+      let existingStyles = elements[i].getAttribute('style')
+        ? elements[i]
+            .getAttribute('style')
+            ?.split(';')
+            .reduce((acc, styleProperty) => {
+              let [property, value] = (styleProperty || '').split(':')
+              if (property && value) {
+                acc[property.trim()] = value.trim()
+              }
+              return acc
+            }, {})
+        : {}
+
+      let newStyles = { ...existingStyles, ...styles[tag] }
+
+      for (let property in newStyles) {
+        let value = newStyles[property]
+        if (pxProperties.has(property)) {
+          value += 'px'
+        }
+        if (elements[i].style) {
+          elements[i].style[property] = value
+        }
+      }
+    }
+  }
+  return doc.body.innerHTML
+}
+
+export const RichText = React.memo(InternalRichText)

package/src/ui-builder/src/components/registery.tsx

@@ -0,0 +1,404 @@
+import React from 'react'
+import {
+  BaseComponentsMapType,
+  type BaseComponentsMapType as BaseComponents,
+  type LayoutItem,
+} from '../types'
+import { View } from 'react-native'
+import { Icon } from './atoms/icon'
+import { TextLayoutItem } from './layout-elements/text'
+import { ListLayoutItem } from './layout-elements/list'
+import { AccordionLayoutItem } from './layout-elements/accordion'
+import { RichTextLayoutItem } from './layout-elements/rich-text'
+import { LinkLayoutItem } from './layout-elements/link'
+import { YoutubeVideo } from './atoms/youtube-video'
+import { LinkButtonLayoutElement } from './layout-elements/link-button'
+import { SpacerLayoutElement } from './layout-elements/spacer'
+import { ImageLayoutItem } from './layout-elements/image'
+import { HtmlRichTextLayoutItem } from './layout-elements/html-rich-text'
+import { VideoLayoutElement } from './layout-elements/video'
+import { VerticalListWrapper } from './atoms/vertical-list'
+import { Box } from './atoms/box'
+export const BaseComponentsMap: BaseComponents = {
+  accordion: AccordionLayoutItem,
+  'link-button': LinkButtonLayoutElement,
+  icon: Icon, // make this layout element
+  image: ImageLayoutItem,
+  link: LinkLayoutItem,
+  list: ListLayoutItem,
+  text: TextLayoutItem,
+  video: VideoLayoutElement,
+  'youtube-video': YoutubeVideo,
+  'rich-text': RichTextLayoutItem,
+  spacer: SpacerLayoutElement,
+  'html-rich-text': HtmlRichTextLayoutItem,
+}
+
+export function registerUiBuilderLayoutComponents(
+  components: Record<string, React.FC<any>>
+) {
+  Object.assign(BaseComponentsMap, components)
+}
+
+/**
+ * @description: Takes each item from layout and
+ * returns the corresponding renderable component
+ * @param map
+ * @param layoutItem
+ * @param source
+ * @param style
+ * @param options
+ * @param source
+ * @returns
+ */
+export function layoutRenderer(
+  map: BaseComponents,
+  layoutItem: LayoutItem,
+  source: Record<string, any> = {},
+  style: Record<string, any> = {},
+  options: Record<string, any> = {}
+): React.ReactElement | null {
+  const finalMap = map ?? BaseComponentsMap
+
+  if (layoutItem.kind === 'row') {
+    if (!layoutItem.children) return null
+    const components = layoutItem.children.map((i) => {
+      return layoutRenderer(finalMap, i, source, style, options)
+    })
+    return (
+      <Box
+        key={layoutItem.key}
+        style={style[layoutItem.key]}
+        background={options[layoutItem.key]?.background}
+      >
+        {components}
+      </Box>
+    )
+  }
+  if (layoutItem.kind === 'column') {
+    if (!layoutItem.children) return null
+    const components = layoutItem.children.map((i) => {
+      return layoutRenderer(finalMap, i, source, style, options)
+    })
+    return (
+      <Box
+        key={layoutItem.key}
+        style={style[layoutItem.key]}
+        background={options[layoutItem.key]?.background}
+      >
+        {components}
+      </Box>
+    )
+  }
+  if (layoutItem.kind === 'list') {
+    if (!layoutItem.children || layoutItem.children.length === 0) return null
+    const childrenLayout = layoutItem.children[0] //recheck this
+    return (
+      <ListItemsWrapper
+        key={layoutItem.key}
+        _key={layoutItem.key}
+        style={style}
+        source={source[layoutItem.key]}
+        options={options}
+        childrenLayout={childrenLayout}
+      />
+    )
+  }
+
+  if (layoutItem.kind === 'vertical-list') {
+    if (!layoutItem.children || layoutItem.children.length === 0) return null
+    const childrenLayout = layoutItem.children[0] //recheck this
+    return (
+      <VerticalListWrapper
+        key={layoutItem.key}
+        _key={layoutItem.key}
+        style={style}
+        source={source[layoutItem.key]}
+        options={options}
+        childrenLayout={childrenLayout}
+        map={map}
+      />
+    )
+  }
+
+  if (layoutItem.kind === 'accordion') {
+    if (!layoutItem.children || layoutItem.children.length !== 2) return null
+
+    const bodyComponents = [layoutItem.children[1]].map((item) =>
+      layoutRenderer(finalMap, item, source, style, options)
+    )
+    const headingComponents = [layoutItem.children[0]].map((item) =>
+      layoutRenderer(finalMap, item, source, style, options)
+    )
+    return (
+      <AccordionLayoutItem
+        key={layoutItem.key}
+        source={{ heading: headingComponents }}
+        options={options[layoutItem.key]}
+        style={style[layoutItem.key]}
+      >
+        {bodyComponents}
+      </AccordionLayoutItem>
+    )
+  }
+  if (layoutItem.kind === 'link') {
+    if (!layoutItem.children || layoutItem.children.length === 0) return null
+
+    const components = layoutItem.children.map((item) =>
+      layoutRenderer(finalMap, item, source, style, options)
+    )
+    return (
+      <LinkLayoutItem
+        key={layoutItem.key}
+        options={options}
+        style={style[layoutItem.key]}
+        source={source[layoutItem.key]}
+      >
+        {components}
+      </LinkLayoutItem>
+    )
+  }
+
+  const Component = finalMap[layoutItem.kind]
+  if (!Component) return null
+  return (
+    <Component
+      key={layoutItem.key}
+      data={source[layoutItem.key]}
+      style={style?.[layoutItem.key]}
+      options={options?.[layoutItem.key] ?? {}}
+      source={source?.[layoutItem.key] ?? {}}
+    />
+  )
+}
+
+interface ListItemsWrapperProps {
+  childrenLayout: LayoutItem
+  style: Record<string, any>
+  source: any[]
+  options: Record<string, any>
+  _key: string
+}
+export function ListItemsWrapper({
+  childrenLayout,
+  style,
+  source,
+  options,
+  _key,
+}: any) {
+  const [width, setWidth] = React.useState(0)
+  const itemGap = parseInt(options?.itemGap ?? 8) || 0
+  if (!source.length || source.length === 0) return null
+  const mutatedStyles = JSON.parse(JSON.stringify(style))
+  const horizontal = options?.horizontal ?? false
+  const columnGap = options?.columnGap ?? 8
+  const itemPerRow = options?.itemPerRow ?? 1
+  let imageFraction = options?.fraction ?? 0
+  const ItemSeparatorComponent = () => {
+    if (horizontal) return <View style={{ width: itemGap }} />
+    return (
+      <View
+        style={{
+          height: itemGap,
+          alignSelf: 'stretch',
+          flex: 1,
+        }}
+      />
+    )
+  }
+
+  const contentContainerStyle = style?.list
+  const columnWrapperStyle =
+    options.itemPerRow > 1 && !horizontal
+      ? {
+          display: 'flex',
+          flex: 1,
+          alignSelf: 'stretch',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: Number(itemGap),
+          ...style?.list?.columnWrapperStyle,
+        }
+      : null
+
+  let imageWidth = Math.floor(
+    (width -
+      (style.root.paddingLeft ?? 0) -
+      (style.root.paddingRight ?? 0) -
+      (style.list.root.paddingLeft ?? 0) -
+      (style.list.root.paddingRight ?? 0) -
+      (itemPerRow - 1) * itemGap) /
+      itemPerRow
+  )
+  // const imageFraction = options?.fraction ?? 0.25
+  if (horizontal) {
+    imageWidth = width
+    if (options?.itemPerRow) {
+      imageWidth = Math.floor(
+        (width -
+          (style.root.paddingLeft ?? 0) -
+          (style.root.paddingRight ?? 0) -
+          (style.list.root.paddingLeft ?? 0) -
+          (style.list.root.paddingRight ?? 0) -
+          itemPerRow * itemGap) /
+          (itemPerRow + imageFraction)
+      )
+    }
+  }
+
+  if (mutatedStyles.item)
+    mutatedStyles.item.width = style?.item?.width ?? imageWidth
+
+  const renderItem = ({ item, index }) => {
+    const newStyles = JSON.parse(JSON.stringify(mutatedStyles))
+    const itemStyle = {
+      alignItems: 'center',
+      ...newStyles?.item,
+      ...(index % 2 === 0
+        ? newStyles?.oddItem ?? {}
+        : newStyles?.evenItem ?? {}),
+    }
+    const firstItemStyle = {
+      marginLeft: newStyles?.list?.root?.paddingLeft ?? 0,
+    }
+    const lastItemStyle = {
+      marginRight: newStyles?.list?.root?.paddingRight ?? 0,
+    }
+    const middleItemStyle = {
+      marginLeft: itemGap / 2,
+      marginRight: itemGap / 2,
+    }
+    const firstItemInHorizontalList = [itemStyle, firstItemStyle]
+    const lastItemInHorizontalList = [itemStyle, lastItemStyle]
+    const onlyItemInVerticalList = [itemStyle, firstItemStyle, lastItemStyle]
+    const itemInFirstColumn = [
+      itemStyle,
+      firstItemStyle,
+      {
+        marginRight: itemGap / 2,
+      },
+    ]
+    const itemInLastColumn = [
+      itemStyle,
+      lastItemStyle,
+      {
+        marginLeft: itemGap / 2,
+      },
+    ]
+    const itemInMiddleColumn = [itemStyle, middleItemStyle]
+    const transformedStyle = {
+      firstItemInHorizontalList,
+      lastItemInHorizontalList,
+      onlyItemInVerticalList,
+      itemInFirstColumn,
+      itemInLastColumn,
+      itemInMiddleColumn,
+    }
+    let isFirstChild = index % itemPerRow === 0
+    let isLastChild = index % itemPerRow === itemPerRow - 1
+
+    let mergedStyle = []
+
+    if (horizontal) {
+      isFirstChild = index === 0
+      isLastChild = index === source.length - 1
+      if (isFirstChild) {
+        mergedStyle = transformedStyle.firstItemInHorizontalList
+      } else if (isLastChild) {
+        mergedStyle = transformedStyle.lastItemInHorizontalList
+      } else {
+        mergedStyle = transformedStyle.itemInMiddleColumn
+      }
+    } else {
+      if (numColumns === 1) {
+        mergedStyle = transformedStyle.onlyItemInVerticalList
+      } else {
+        if (index % numColumns === 0) {
+          mergedStyle = transformedStyle.itemInFirstColumn
+        } else if (index % numColumns === numColumns - 1) {
+          mergedStyle = transformedStyle.itemInLastColumn
+        } else {
+          mergedStyle = transformedStyle.itemInMiddleColumn
+        }
+      }
+    }
+
+    newStyles.item = {
+      ...style.item,
+      ...mergedStyle[0],
+      ...mergedStyle[1],
+      ...mergedStyle[2],
+    }
+
+    const components = getLayoutItem(childrenLayout, item, newStyles, options)
+    return components
+  }
+  const numColumns = horizontal ? null : Number(itemPerRow)
+  return (
+    <View
+      onLayout={(e) => {
+        setWidth(e.nativeEvent.layout.width)
+      }}
+      style={{ alignSelf: 'stretch', flex: 1 }}
+    >
+      {width > 0 && (
+        <ListLayoutItem
+          data={source}
+          options={{
+            ...options?.[_key],
+            renderItem,
+            keyExtractor: (item) => JSON.stringify(item),
+            listKey: `_key${_key}${Math.random()}`, //TODO: find a better way to generate unique key
+            horizontal,
+            itemGap,
+            numColumns,
+            ItemSeparatorComponent,
+            columnWrapperStyle,
+            contentContainerStyle,
+          }}
+          style={mutatedStyles.list}
+        />
+      )}
+    </View>
+  )
+}
+
+export function getLayoutItem(
+  layout: Record<string, any>,
+  itemData: Record<string, any>,
+  itemStyle: Record<string, any>,
+  options: Record<string, any>,
+  CustomComponentsMap?: BaseComponentsMapType
+) {
+  if (!layout) return null
+  const normalisedLayout = normaliseLayout(layout) as LayoutItem
+  if (!normalisedLayout) return null
+  const C = layoutRenderer(
+    CustomComponentsMap ?? BaseComponentsMap,
+    normalisedLayout,
+    itemData,
+    itemStyle,
+    options
+  )
+  return C
+}
+
+export function normaliseLayout(layout: any): any | null {
+  if (!layout) return null
+  if (typeof layout === 'string') {
+    return { kind: layout, key: layout, children: null }
+  }
+  if (
+    typeof layout === 'object' &&
+    layout.children &&
+    layout.children.length > 0
+  ) {
+    const c = layout.children.map((i) => normaliseLayout(i))
+    return { kind: layout.kind, key: layout.key, children: c }
+  }
+  if (typeof layout === 'object') {
+    return { kind: layout.kind, key: layout.key, children: null }
+  }
+  console.log('[ERROR]: normalise layout received incorrect input')
+  return null
+}

package/src/ui-builder/src/helper-elements/cta.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import { type BaseElementProps, type Layout } from '../types'
+import { type BaseStyle, type BaseTextStyle } from '@gauntlet/types'
+import { getLayoutItem } from '../components'
+
+export interface CtaElement extends BaseElementProps {
+  type: 'cta'
+  data: {
+    link: {
+      kind: string
+      value: string
+      params?: Record<string, any>
+      external?: boolean
+    }
+    title: string
+  }
+  style: any
+  options: any
+}
+
+interface CtaStyles {
+  title: BaseTextStyle
+  link: {
+    root: BaseTextStyle
+  }
+  root: BaseStyle
+}
+
+const defaultLayout: Layout = {
+  key: 'root',
+  kind: 'column',
+  children: [
+    {
+      key: 'link',
+      kind: 'link',
+      children: [
+        {
+          key: 'title',
+          kind: 'text',
+          children: null,
+        },
+      ],
+    },
+  ],
+}
+
+const defaultStyle: CtaStyles = {
+  title: {
+    fontSize: 16,
+
+    color: '#000000',
+    textAlign: 'center',
+  },
+  link: {
+    root: {
+      marginTop: 4,
+      marginBottom: 4,
+      marginLeft: 4,
+      marginRight: 4,
+    },
+  },
+  root: {
+    padding: 8,
+    borderRadius: 40,
+    marginVertical: 16,
+    // borderWidth: 1,
+  },
+}
+
+export function Cta({
+  data,
+  style = defaultStyle,
+  layout = defaultLayout,
+  options = {},
+}: CtaElement) {
+  const C = getLayoutItem(layout, data, style, options)
+  if (!C) return null
+  return C
+}