@app-brew/brewery 1.0.0

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

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { type BaseStyle, type BaseTextStyle } from '@gauntlet/types'
+import { type Layout } from '../types'
+import { getLayoutItem } from '../components'
+
+export interface TextElementProps {
+  type: 'text'
+  data: {
+    text: string
+  }
+  style: style
+  options?: any
+  layout?: Layout
+}
+
+type style = {
+  root: BaseStyle
+  text: BaseTextStyle
+}
+
+const defaultStyles: style = {
+  text: {
+    fontSize: 14,
+    color: '#000000',
+  },
+  root: {},
+}
+
+const defaultLayout: Layout = {
+  key: 'root',
+  kind: 'column',
+  children: [
+    {
+      key: 'text',
+      kind: 'text',
+      children: null,
+    },
+  ],
+}
+
+const defaultOptions = {
+  content: {},
+}
+
+export function TextElement({
+  data,
+  style = defaultStyles,
+  layout = defaultLayout,
+}: TextElementProps) {
+  if (!data) return null
+  return getLayoutItem(layout, data, style, defaultOptions)
+}

package/src/ui-builder/src/helper-elements/video-list.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react'
+import { getLayoutItem } from '../components'
+import { type Layout } from '../types'
+import { VideoElement } from './video'
+
+type Video = VideoElement['data']
+type VideoList = {
+  'list-title': string | null
+  'list-subtitle': string | null
+  list: Video[]
+}
+export interface VideoListElement {
+  type: 'video_list'
+  data: VideoList
+  options?: Record<string, any> & {
+    list?: {
+      numberOfColumns?: number
+      horizontal?: boolean
+      itemGap?: number
+    }
+  }
+  style: any
+  layout: Layout
+}
+
+const defaultLayout: Layout = {
+  kind: 'column',
+  key: 'root',
+  children: [
+    {
+      kind: 'text',
+      key: 'list-title',
+      children: null,
+    },
+    {
+      kind: 'text',
+      key: 'list-subtitle',
+      children: null,
+    },
+    {
+      kind: 'list',
+      key: 'list',
+      children: [
+        {
+          kind: 'column',
+          key: 'item',
+          children: [
+            {
+              kind: 'video',
+              key: 'video',
+              children: null,
+            },
+            {
+              kind: 'text',
+              key: 'title',
+              children: null,
+            },
+            {
+              kind: 'text',
+              key: 'subtitle',
+              children: null,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+const defaultStyle: VideoListElement['style'] = {
+  root: {
+    alignItems: 'center',
+  },
+  list: {
+    root: {},
+  },
+  item: {},
+  title: {
+    color: '#292B33',
+
+    fontSize: 14,
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: 24,
+  },
+  'list-title': {
+    color: '#292B33',
+
+    fontSize: 16,
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: 24,
+  },
+  'list-subtitle': {
+    color: '#292B33',
+
+    fontSize: 12,
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  subtitle: {
+    color: '#6B6F80',
+
+    fontSize: 10,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 18,
+  },
+  video: {
+    height: 320,
+  },
+}
+
+const defaultOptions = {
+  title: {
+    numberOfColumns: 1,
+  },
+  subtitle: {
+    numberOfColumns: 1,
+  },
+  list: {
+    horizontal: false,
+  },
+  video: {},
+}
+
+export function VideoList({
+  data,
+  options = defaultOptions,
+  style = defaultStyle,
+  layout = defaultLayout,
+}: VideoListElement) {
+  const listRoot = getLayoutItem(layout, data, style, options)
+  if (!listRoot) return null
+  return listRoot
+}

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

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { type BaseElementProps, type Layout } from '../types'
+import { BaseComponentsMap, layoutRenderer } from '../components'
+
+export interface VideoElement extends BaseElementProps {
+  type: 'video'
+  data: {
+    video: {
+      src: string
+    }
+  }
+  style: any
+  options: any
+}
+
+const defaultLayout: Layout = {
+  key: 'root',
+  kind: 'row',
+  children: [
+    {
+      key: 'video',
+      kind: 'video',
+      children: null,
+    },
+  ],
+}
+
+const defaultStyle = {
+  root: {
+    marginVertical: 4,
+  },
+  video: {
+    borderWidth: 1,
+  },
+}
+
+export function VideoHelperElement({
+  style = defaultStyle,
+  data,
+  options = {},
+  layout = defaultLayout,
+}: VideoElement) {
+  return layoutRenderer(BaseComponentsMap, layout, data, style, options)
+}

package/src/ui-builder/src/helper-elements/youtube-video.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { type BaseElementProps, type Layout } from '../types'
+import { BaseComponentsMap, layoutRenderer } from '../components'
+
+export interface YoutubeVideoElement extends BaseElementProps {
+  type: 'youtube_video'
+  data: {
+    title: string | null
+    subtitle: string | null
+    'youtube-video': {
+      videoId: string | null
+      thumbnailUrl: string
+      params?: Record<string, any>
+    }
+  }
+  style: any
+  options: any
+}
+
+const defaultLayout: Layout = {
+  key: 'root',
+  kind: 'column',
+  children: [
+    {
+      key: 'title',
+      kind: 'text',
+      children: null,
+    },
+    {
+      key: 'subtitle',
+      kind: 'text',
+      children: null,
+    },
+    {
+      key: 'youtube-video',
+      kind: 'youtube-video',
+      children: null,
+    },
+  ],
+}
+
+const defaultStyle = {
+  root: {
+    marginVertical: 4,
+    borderWidth: 1,
+  },
+  title: {
+    fontSize: 16,
+    color: 'blue',
+  },
+  subtitle: {
+    fontSize: 14,
+  },
+  'youtube-video': {
+    borderWidth: 1,
+  },
+}
+
+export function YoutubeVideoComponent({
+  style = defaultStyle,
+  data,
+  layout = defaultLayout,
+}: YoutubeVideoElement) {
+  const options = {}
+
+  const C = layoutRenderer(BaseComponentsMap, layout, data, style, options)
+  if (!C) return null
+  return C
+}

package/src/ui-builder/src/index.ts

@@ -0,0 +1,42 @@
+export * from './components/registery'
+export * from './types'
+export * from './style-utils'
+export {
+  deepMerge,
+  getAspectRatio,
+  getCompressedShopifyImageURL,
+  getWidthForShopifyImageURL,
+} from './utils'
+
+/**
+ * This helper elements contains predefined elements
+ * like media, media-list, rich-text
+ * This can be directly used and customised using layout and style
+ * or a more controlled component can be composed using layout-elements
+ */
+export * from './helper-elements'
+export * from './components/layout-elements'
+export * from './components/blocks/content'
+export * from './components/atoms'
+export {
+  ScaledImage,
+  ScaledImageBackground,
+  transformImageUrl,
+  getHeaders,
+  Image as LegacyImage,
+  type ScaledImageProps,
+} from './components/atoms/image/image1'
+export {
+  RichText,
+  InternalRichText,
+  type RichTextProps,
+} from './components/molecules/rich-text'
+export {
+  Accordion as MoleculeAccordion,
+  type AccordionProps as MoleculeAccordionProps,
+  type BaseAccordionProps,
+  type TitleProps,
+  type RichTitleProps,
+  type ImageProps as MoleculeAccordionImageProps,
+} from './components/molecules/accordion'
+export { resolveRichTextTagsStyle } from './style-utils'

package/src/ui-builder/src/style-utils.ts

@@ -0,0 +1,127 @@
+import { useAppStore } from '@gauntlet/state'
+
+/**
+ * Calculates the content width after subtracting margins, padding, and borders.
+ */
+export function getContentWidth(deviceWidth: number, style: any) {
+  if (!style) {
+    return deviceWidth
+  }
+
+  let contentWidth = deviceWidth
+  let horizontalMargin = 0
+  let horizontalPadding = 0
+  let horizontalBorder = 0
+
+  // resolve margins
+  if (style.margin) {
+    horizontalMargin = 2 * style.margin
+  }
+  if (style.marginHorizontal) {
+    horizontalMargin = 2 * style.marginHorizontal
+  }
+  if (style.marginStart) {
+    horizontalMargin = horizontalMargin + style.marginStart
+  }
+  if (style.marginEnd) {
+    horizontalMargin = horizontalMargin + style.marginEnd
+  }
+  if (style.marginLeft) {
+    horizontalMargin = horizontalMargin + style.marginLeft
+  }
+  if (style.marginRight) {
+    horizontalMargin = horizontalMargin + style.marginRight
+  }
+  //resolve paddings
+  if (style.padding) {
+    horizontalPadding = 2 * style.padding
+  }
+  if (style.paddingHorizontal) {
+    horizontalPadding = 2 * style.paddingHorizontal
+  }
+  if (style.paddingStart) {
+    horizontalPadding = horizontalPadding + style.paddingStart
+  }
+  if (style.paddingEnd) {
+    horizontalPadding = horizontalPadding + style.paddingEnd
+  }
+  if (style.paddingLeft) {
+    horizontalPadding = horizontalPadding + style.paddingLeft
+  }
+  if (style.paddingRight) {
+    horizontalPadding = horizontalPadding + style.paddingRight
+  }
+  // resolve border
+  if (style.borderWidth) {
+    horizontalBorder = 2 * style.borderWidth
+  }
+  if (style.borderLeftWidth) {
+    horizontalBorder = horizontalBorder + style.borderLeftWidth
+  }
+  if (style.borderRightWidth) {
+    horizontalBorder = horizontalBorder + style.borderRightWidth
+  }
+  return contentWidth - horizontalMargin - horizontalPadding - horizontalBorder
+}
+
+export function getBorderRadiusValue(style: Record<string, any>) {
+  if (!style) {
+    console.log('Received undefined style in getBorderRadiusValue')
+    return
+  }
+  const token = style['borderRadius']
+
+  const resolvedToken =
+    useAppStore.getState().config.data?.theme?.base?.radii?.[token]
+
+  const value =
+    useAppStore.getState().config.data?.theme?.base?.['primitiveRadii']?.[
+      resolvedToken
+    ]
+
+  return value ?? token
+}
+
+export const getHorizontalSpacingStyle = (style?: any) => {
+  if (!style) return style
+  return {
+    paddingHorizontal: style.paddingHorizontal ?? style.padding,
+    paddingLeft: style.paddingLeft ?? style.paddingHorizontal ?? style.padding,
+    paddingRight:
+      style.paddingRight ?? style.paddingHorizontal ?? style.padding,
+    marginHorizontal: style.marginHorizontal,
+    marginLeft: style.marginLeft,
+    marginRight: style.marginRight,
+  }
+}
+
+export function resolveRichTextTagsStyle(style?: Record<string, any>) {
+  if (!style) return {}
+  const finalStyle: Record<string, any> = {}
+
+  for (const key in style) {
+    finalStyle[key] = style[key]
+    const kind = style[key]?.kind
+
+    if (kind) {
+      const color = style[key]?.color
+      const tokenStyle =
+        useAppStore.getState().config.data?.theme?.base?.typography?.[kind]
+      if (tokenStyle) {
+        const { lineHeight: _lineHeight, ...restStyle } = tokenStyle
+        finalStyle[key] = {
+          ...finalStyle[key],
+          ...restStyle,
+        }
+
+        if (color) {
+          finalStyle[key].color = color
+        }
+        if (finalStyle[key]?.hasOwnProperty('kind')) {
+          delete finalStyle[key]['kind']
+        }
+      }
+    }
+  }
+  return finalStyle
+}

package/src/ui-builder/src/types.ts

@@ -0,0 +1,67 @@
+import { ImageStyle, StyleProp } from 'react-native'
+
+export type ComponentId = string
+export type BaseComponentIds =
+  | 'accordion' //box
+  | 'icon'
+  | 'image'
+  | 'link'
+  | 'list' //box
+  | 'rich-text'
+  | 'text'
+  | 'youtube-video'
+  | 'link-button'
+  | 'spacer'
+  | 'html-rich-text'
+  | 'video'
+  | 'vertical-list'
+  | 'social-signin'
+
+export type BaseComponent = React.FC<any>
+export type BaseComponentsMapType = Partial<Record<BaseComponentIds, BaseComponent>> &
+  Record<string, BaseComponent>
+
+export type BaseElementProps = {
+  layout: Layout
+  style: any
+  data: any
+}
+export type ComponentsMap = Record<
+  ComponentId,
+  React.FC<any & BaseElementProps>
+>
+
+/** Layout */
+export type LayoutItem = {
+  kind: BaseComponentIds | 'row' | 'column'
+  key: string
+  children: LayoutItem[] | null
+}
+type Row = Pick<LayoutItem, 'key' | 'children'> & { kind: 'row' }
+type Column = Pick<LayoutItem, 'key' | 'children'> & { kind: 'column' }
+type Link =
+  | Row
+  | Column
+  | (Pick<LayoutItem, 'key' | 'children'> & { kind: 'link' })
+
+type Box = Row | Column | Link // Gradient | ImageBackGound
+
+export type RootLayoutItem = Pick<Box, 'children' | 'kind'> & { key: 'root' }
+export type Layout = Pick<RootLayoutItem, 'children' | 'kind' | 'key'>
+
+export interface BaseLayoutElementProps {
+  source: Record<string, any>
+  style: Record<string, any>
+  options: Record<string, any>
+}
+
+export type HorizontalPosition = 'left' | 'right' | 'center'
+export type VerticalPosition = 'top' | 'bottom' | 'center'
+export type BackgroundImageData = {
+  src: string
+  name?: string
+  previewImage?: string
+  resizeMode?: 'cover' | 'contain' | 'repeat'
+  position?: [HorizontalPosition, VerticalPosition]
+  style?: StyleProp<ImageStyle>
+}

package/src/ui-builder/src/utils.ts

@@ -0,0 +1,89 @@
+function mergeArraysWithUniqueValues() {
+  return function (target: Array<unknown>, source: Array<unknown>) {
+    const c = [...target, ...source]
+    return c.filter((item, pos) => c.indexOf(item) === pos)
+  }
+}
+
+const mergeObjects = require('@fastify/deepmerge')({
+  all: true,
+  mergeArray: mergeArraysWithUniqueValues,
+})
+
+/**
+ * Guard function to filter out null and undefined values from an array
+ * This will provide the correct type to TypeScript
+ */
+function isTruthy<T>(value: T | null | undefined): value is T {
+  return Boolean(value)
+}
+
+export const deepMerge = (
+  ...objects: Array<Record<string, any> | undefined>
+) => {
+  return objects
+    .filter(isTruthy)
+    .reduce((acc, object) => mergeObjects(acc, object), {})
+}
+
+export function getAspectRatio(
+  original: {
+    width?: number
+    height?: number
+  },
+  style: {
+    width?: number
+    height?: number
+  }
+) {
+  const w = original.width
+  const h = original.height
+  if (w && h) {
+    return w / h
+  }
+  if (!style.width) return
+  if (!style.height) return
+  if (isNaN(style.width) || isNaN(style.height)) return
+  return style.width / style.height
+}
+
+// Function to get compressed Shopify image URL
+export const getCompressedShopifyImageURL = (url?: string, width?: number) => {
+  try {
+    const urlObj = new URL(url || '')
+    if (urlObj.hostname === 'cdn.shopify.com' && urlObj.protocol === 'https:') {
+      if (width !== undefined) {
+        urlObj.searchParams.set('width', width?.toString())
+      }
+      return urlObj.toString()
+    }
+    return url
+  } catch {
+    return url
+  }
+}
+
+/**
+ * Get the width to use for the compressed Shopify image URL
+ * @param deviceWidth - Width of the device
+ * @param otherWidths - Array of widths to consider (can be number or string with 'px')
+ * @returns - The width to use for the Shopify image URL
+ */
+export function getWidthForShopifyImageURL(
+  deviceWidth: number,
+  otherWidths: (number | string | undefined)[]
+): number {
+  const parsedWidth: number[] = otherWidths
+    .map((w) => {
+      if (!w) return w
+      if (typeof w === 'number') return w
+      const parsedNumber = Number(w.replace('px', ''))
+      if (!isNaN(parsedNumber)) return parsedNumber
+      return undefined
+    })
+    .filter((w) => w) as number[]
+
+  // Find a valid width from the array which occurs first
+  const validWidth = parsedWidth[0]
+  return Math.min(deviceWidth, validWidth || deviceWidth)
+}

package/src/utils/src/cache.utils.ts

@@ -0,0 +1,64 @@
+export enum CacheType {
+  'APP_CONFIG' = 'app_config',
+  'INTEGRATION_CONFIG' = 'integration_config',
+  'GENERIC_KEY' = 'generic_key',
+  'APP' = 'app',
+  'FACEBOOK_APP_ACCESS_TOKEN' = 'facebook_app_access_token',
+}
+
+export type GenericKeyParam = {
+  cacheKey: string
+}
+
+export type AppConfigKeyParam = {
+  appId: string
+}
+
+export type AppKeyParam = {
+  appId: string
+}
+
+export type IntegrationConfigKeyParam = {
+  appId: string
+  integrationId: string
+}
+
+export type FacebookAppAccessTokenKeyParam = {
+  appId: string
+}
+
+export function getCacheExpiryTimeIdentifier(timeInMs: number) {
+  return Math.floor(timeInMs / 86400000) //day from the time
+}
+
+export function getCacheKey(
+  cacheType: CacheType,
+  params:
+    | AppConfigKeyParam
+    | IntegrationConfigKeyParam
+    | GenericKeyParam
+    | FacebookAppAccessTokenKeyParam
+) {
+  switch (cacheType) {
+    case CacheType.APP_CONFIG: {
+      const { appId } = params as AppConfigKeyParam
+      return `${CacheType.APP_CONFIG}-${appId}`
+    }
+    case CacheType.INTEGRATION_CONFIG: {
+      const { appId, integrationId } = params as IntegrationConfigKeyParam
+      return `${CacheType.INTEGRATION_CONFIG}-${appId}-${integrationId}`
+    }
+    case CacheType.GENERIC_KEY: {
+      const { cacheKey } = params as GenericKeyParam
+      return cacheKey
+    }
+    case CacheType.APP: {
+      const { appId } = params as AppKeyParam
+      return `${CacheType.APP}-${appId}`
+    }
+    case CacheType.FACEBOOK_APP_ACCESS_TOKEN: {
+      const { appId } = params as FacebookAppAccessTokenKeyParam
+      return `${CacheType.FACEBOOK_APP_ACCESS_TOKEN}-${appId}`
+    }
+  }
+}