@planningcenter/chat-react-native 1.4.2-rc.1 → 1.4.2

package/src/components/primitive/avatar_primitive.tsx

@@ -0,0 +1,374 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { StyleSheet, View, ViewProps } from 'react-native'
+import { useTheme } from '../../hooks'
+import { Image, ImageProps } from '../display/image'
+import { Spinner } from '../display/spinner'
+
+// =================================
+// ====== Exports ==================
+// =================================
+
+const Avatar = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Presence: AvatarPresence,
+  Group: AvatarGroup,
+  GroupLoader: AvatarGroupLoader,
+  Mask: AvatarMask,
+} as const
+
+type AvatarComponents = {
+  Root: React.FC<AvatarRootProps>
+  Image: React.FC<AvatarImageProps>
+  Presence: React.FC<AvatarPresenceProps>
+  Group: React.FC<AvatarGroupProps>
+  GroupLoader: React.FC<Record<string, never>>
+  Mask: React.FC<AvatarMaskProps>
+}
+
+export default Avatar as AvatarComponents
+export type {
+  AvatarImageProps,
+  AvatarPresenceProps,
+  AvatarGroupProps,
+  AvatarMaskProps,
+  AvatarRootProps,
+}
+
+// =================================
+// ====== Constants & Types ========
+// =================================
+
+const AVATAR_SIZES = {
+  md: 'md',
+  lg: 'lg',
+} as const
+
+const AVATAR_PRESENCE_TYPES = {
+  online: 'online',
+  offline: 'offline',
+} as const
+
+// Progrmatically creates type unions
+type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES]
+type AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES]
+
+const AVATAR_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.md]: 32,
+  [AVATAR_SIZES.lg]: 40,
+}
+
+const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.md]: 12,
+  [AVATAR_SIZES.lg]: 14,
+}
+
+// =================================
+// ====== Context ==================
+// =================================
+
+interface AvatarContextType {
+  size: AvatarSize
+  allImagesLoaded: boolean
+  setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const AvatarContext = createContext<AvatarContextType | null>(null)
+
+function useAvatarContext() {
+  const context = useContext(AvatarContext)
+  if (!context) {
+    throw new Error('Avatar components must be used within Avatar.Root')
+  }
+  return context
+}
+
+// =================================
+// ====== AvatarRoot ===============
+// =================================
+
+interface AvatarRootProps {
+  children: React.ReactNode
+  size?: AvatarSize
+}
+
+function AvatarRoot({ children, size = 'md' }: AvatarRootProps) {
+  const [allImagesLoaded, setAllImagesLoaded] = useState(false)
+  const styles = useStyles(size)
+
+  return (
+    <AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>
+      <View style={styles.rootContainer}>{children}</View>
+    </AvatarContext.Provider>
+  )
+}
+
+AvatarRoot.displayName = 'Avatar.Root'
+
+// =================================
+// ====== AvatarMask ===============
+// =================================
+
+type AvatarMaskProps = ViewProps
+
+function AvatarMask({ children, ...props }: AvatarMaskProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.mask} {...props}>
+      {children}
+    </View>
+  )
+}
+
+AvatarMask.displayName = 'Avatar.Mask'
+
+// =================================
+// ====== AvatarImage   ============
+// =================================
+
+interface AvatarImageProps extends Omit<ImageProps, 'source'> {
+  sourceUri: string
+}
+
+function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
+  const { size } = useAvatarContext()
+
+  return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} />
+}
+
+AvatarImage.displayName = 'Avatar.Image'
+
+interface AvatarGroupImageProps {
+  sourceUri: string
+  style?: ImageProps['wrapperStyle']
+  onLoad?: () => void
+}
+
+function AvatarGroupImage({ sourceUri, style, onLoad }: AvatarGroupImageProps) {
+  return (
+    <Image
+      source={{ uri: sourceUri }}
+      loadingEnabled={false}
+      wrapperStyle={style}
+      onLoad={onLoad}
+    />
+  )
+}
+
+// =================================
+// ====== AvatarGroup   ============
+// =================================
+
+interface AvatarGroupProps {
+  sourceUris: string[]
+}
+
+function AvatarGroup({ sourceUris }: AvatarGroupProps) {
+  const styles = useStyles()
+  const { setAllImagesLoaded } = useAvatarContext()
+  const [loadingStatus, setLoadingStatus] = useState({
+    0: false,
+    1: false,
+    2: false,
+    3: false,
+  })
+  const displayUris = sourceUris.slice(0, 4)
+  const hasDisplayUris = displayUris.length > 0
+
+  const handleImageLoaded = index => {
+    setLoadingStatus(prev => ({
+      ...prev,
+      [index]: true,
+    }))
+  }
+
+  useEffect(() => {
+    const allImagesLoaded =
+      hasDisplayUris && displayUris.every((_, index) => loadingStatus[index] === true)
+
+    setAllImagesLoaded(allImagesLoaded)
+  }, [displayUris, hasDisplayUris, loadingStatus, setAllImagesLoaded])
+
+  if (!hasDisplayUris) {
+    return null
+  }
+
+  if (displayUris.length === 1) {
+    return <AvatarGroupImage sourceUri={displayUris[0]} onLoad={() => handleImageLoaded(0)} />
+  }
+
+  if (displayUris.length === 2) {
+    return (
+      <View style={styles.groupRow}>
+        <AvatarGroupImage
+          sourceUri={displayUris[0]}
+          style={styles.halfWidthFullHeight}
+          onLoad={() => handleImageLoaded(0)}
+        />
+        <AvatarGroupImage
+          sourceUri={displayUris[1]}
+          style={styles.halfWidthFullHeight}
+          onLoad={() => handleImageLoaded(1)}
+        />
+      </View>
+    )
+  }
+
+  if (displayUris.length === 3) {
+    return (
+      <View style={styles.groupColumn}>
+        <View style={styles.groupRow}>
+          <AvatarGroupImage
+            sourceUri={displayUris[0]}
+            style={styles.halfWidthFullHeight}
+            onLoad={() => handleImageLoaded(0)}
+          />
+          <View style={styles.groupColumn}>
+            <AvatarGroupImage
+              sourceUri={displayUris[1]}
+              style={styles.fullWidthHalfHeight}
+              onLoad={() => handleImageLoaded(1)}
+            />
+            <AvatarGroupImage
+              sourceUri={displayUris[2]}
+              style={styles.fullWidthHalfHeight}
+              onLoad={() => handleImageLoaded(2)}
+            />
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.groupColumn}>
+      <View style={styles.groupRow}>
+        <AvatarGroupImage
+          sourceUri={displayUris[0]}
+          style={styles.halfWidthFullHeight}
+          onLoad={() => handleImageLoaded(0)}
+        />
+        <AvatarGroupImage
+          sourceUri={displayUris[1]}
+          style={styles.halfWidthFullHeight}
+          onLoad={() => handleImageLoaded(1)}
+        />
+      </View>
+      <View style={styles.groupRow}>
+        <AvatarGroupImage
+          sourceUri={displayUris[2]}
+          style={styles.halfWidthFullHeight}
+          onLoad={() => handleImageLoaded(2)}
+        />
+        <AvatarGroupImage
+          sourceUri={displayUris[3]}
+          style={styles.halfWidthFullHeight}
+          onLoad={() => handleImageLoaded(3)}
+        />
+      </View>
+    </View>
+  )
+}
+
+AvatarGroup.displayName = 'Avatar.Group'
+
+// =================================
+// ====== AvatarGroupLoader   =========
+// =================================
+
+function AvatarGroupLoader() {
+  const { size, allImagesLoaded } = useAvatarContext()
+  const styles = useStyles(size)
+
+  if (allImagesLoaded) return null
+
+  return (
+    <View style={styles.groupLoader}>
+      <Spinner size={AVATAR_PX[size]} />
+    </View>
+  )
+}
+
+AvatarGroupLoader.displayName = 'Avatar.GroupLoader'
+
+// =================================
+// ====== AvatarPresence   =========
+// =================================
+
+interface AvatarPresenceProps extends ViewProps {
+  presence: AvatarPresenceType
+}
+
+function AvatarPresence({ presence, ...props }: AvatarPresenceProps) {
+  const { size } = useAvatarContext()
+  const styles = useStyles(size, presence)
+
+  return <View style={styles.presence} {...props} />
+}
+
+AvatarPresence.displayName = 'Avatar.Presence'
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = (size: AvatarSize = 'md', presence: AvatarPresenceType = 'offline') => {
+  const { colors } = useTheme()
+  const PRESENCE_COLOR = {
+    online: colors.fillColorInteractionOnlineDefault,
+    offline: colors.iconColorDefaultDisabled,
+  }
+  const presenceDiameter = AVATAR_PRESENCE_PX[size]
+  const avatarDiameter = AVATAR_PX[size]
+  const groupGap = 1
+
+  return StyleSheet.create({
+    rootContainer: {
+      height: avatarDiameter,
+      width: avatarDiameter,
+    },
+    mask: {
+      borderRadius: avatarDiameter,
+      overflow: 'hidden',
+      width: '100%',
+      height: '100%',
+    },
+    presence: {
+      height: presenceDiameter,
+      width: presenceDiameter,
+      backgroundColor: PRESENCE_COLOR[presence],
+      borderColor: colors.fillColorNeutral100Inverted,
+      borderWidth: 2,
+      borderRadius: presenceDiameter,
+      position: 'absolute',
+      bottom: -1,
+      right: -1,
+    },
+    groupLoader: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderRadius: avatarDiameter,
+      width: avatarDiameter,
+      height: avatarDiameter,
+    },
+    groupColumn: {
+      flex: 1,
+      gap: groupGap,
+    },
+    groupRow: {
+      flexDirection: 'row',
+      flex: 1,
+      gap: groupGap,
+    },
+    halfWidthFullHeight: {
+      width: '50%',
+      height: '100%',
+    },
+    fullWidthHalfHeight: {
+      width: '100%',
+      height: '50%',
+    },
+  })
+}

package/src/contexts/api_provider.tsx

@@ -1,7 +1,9 @@
+import { JSONAPIResponse } from '@planningcenter/chat-core'
 import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
 import React, { useEffect } from 'react'
 import { ViewProps } from 'react-native'
 import { OAuthToken } from '../types'
+import apiRequest from '../utils/api'
 import { ENV, session } from '../utils/session'
 
 let handleTokenExpired: () => void
@@ -13,13 +15,8 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
 
   const url = `${session.baseUrl}${queryKey[0]}`
 
-  return fetch(url, {
-    headers: {
-      Authorization: `Bearer ${session.token?.access_token}`,
-    },
-  })
-    .then(validateResponse)
-    .then(response => response.json())
+  return apiRequest<JSONAPIResponse>(url)
+    .then(r => r.json)
     .catch(error => {
       if (error.message === 'Token expired') {
         handleTokenExpired()
@@ -52,13 +49,3 @@ export function ApiProvider({
 
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }
-
-const validateResponse = (response: Response) => {
-  const isExpired = response.status === 401
-
-  if (isExpired) {
-    throw new Error('Token expired')
-  }
-
-  return response
-}

package/src/contexts/chat_context.tsx

@@ -3,7 +3,7 @@ import React, { createContext, useMemo } from 'react'
 import { ColorSchemeName, useColorScheme } from 'react-native'
 import { DeepPartial, OAuthToken } from '../types'
 import { defaultTheme, DefaultTheme } from '../utils/theme'
-import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'
+import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
 import { ApiProvider } from './api_provider'
 
 type ContextValue = {
@@ -51,7 +51,7 @@ export const useCreateChatTheme = ({
       ...merge({}, defaultTheme(colorScheme), customTheme),
       colors: {
         ...merge({}, defaultTheme(colorScheme).colors, customTheme?.colors),
-        ...tapestryAliasTokensColorMap[colorScheme],
+        ...aliasTokensColorMap[colorScheme],
       },
     }
   }, [colorScheme, customTheme])

package/src/index.tsx

@@ -3,4 +3,3 @@ export * from './contexts'
 export * from './hooks'
 export * from './screens'
 export * from './utils'
-

package/src/screens/display.tsx

@@ -1,7 +1,27 @@
 import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { useTheme } from '../hooks'
-import { Image, Spinner, Text } from '../components/display'
+import { Avatar, AvatarGroup, Heading, Image, Spinner, Text } from '../components/display'
+import { space } from '../utils/space'
+
+const URL = {
+  image: 'https://picsum.photos/seed/picsum/200',
+  broken: 'https://broken.url',
+  avatar: 'https://i.pravatar.cc/200?img=22',
+  avatar_fallback: 'https://avatars.planningcenteronline.com/uploads/initials/PR.png',
+  two_avatars: ['https://i.pravatar.cc/200?img=22', 'https://i.pravatar.cc/200?img=23'],
+  three_avatars: [
+    'https://i.pravatar.cc/200?img=22',
+    'https://i.pravatar.cc/200?img=23',
+    'https://i.pravatar.cc/200?img=24',
+  ],
+  four_avatars: [
+    'https://i.pravatar.cc/200?img=30',
+    'https://i.pravatar.cc/200?img=29',
+    'https://i.pravatar.cc/200?img=28',
+    'https://i.pravatar.cc/200?img=27',
+  ],
+}
 
 export function DisplayScreen() {
   const styles = useStyles()
@@ -13,13 +33,26 @@ export function DisplayScreen() {
           <Spinner size={24} />
         </View>
         <View style={styles.row}>
-          <Image source={{ uri: 'https://broken.url' }} style={styles.image} />
-          <Image
-            source={{
-              uri: 'https://picsum.photos/seed/picsum/200',
-            }}
-            style={styles.image}
-          />
+          <Image source={{ uri: URL.broken }} style={styles.image} />
+          <Image source={{ uri: URL.image }} style={styles.image} />
+        </View>
+        <View style={styles.row}>
+          <Avatar sourceUri={URL.broken} />
+          <Avatar size="md" sourceUri={URL.avatar_fallback} />
+          <Avatar sourceUri={URL.avatar} />
+        </View>
+        <View style={styles.row}>
+          <Avatar presence="offline" sourceUri={URL.broken} />
+          <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback} />
+          <Avatar presence="offline" sourceUri={URL.avatar} />
+        </View>
+        <View style={styles.row}>
+          <AvatarGroup sourceUris={[URL.broken]} />
+          <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]} />
+          <AvatarGroup sourceUris={[URL.avatar]} />
+          <AvatarGroup sourceUris={URL.two_avatars} />
+          <AvatarGroup sourceUris={URL.three_avatars} />
+          <AvatarGroup sourceUris={URL.four_avatars} />
         </View>
         <View style={styles.row}>
           <Text>Plain text</Text>
@@ -27,6 +60,12 @@ export function DisplayScreen() {
           <Text variant="tertiary">Tertiary</Text>
           <Text variant="footnote">Footnote</Text>
         </View>
+        <View style={styles.row}>
+          <Heading>Heading 1</Heading>
+          <Heading variant="h2">Heading 2</Heading>
+          <Heading variant="h3">Heading 3</Heading>
+          <Heading variant="h4">Heading 4</Heading>
+        </View>
       </View>
     </ScrollView>
   )
@@ -36,19 +75,19 @@ const useStyles = () => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
-    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
-    container: { gap: 16, padding: 24 },
+    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral100Inverted },
+    container: { gap: space(2), padding: space(3) },
     listItem: { color: colors.fillColorNeutral020 },
     row: {
-      gap: 16,
+      gap: space(2),
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
-    column: { gap: 32 },
+    column: { gap: space(4) },
     spinnerContainer: {
-      height: 20,
+      height: space(2.5),
     },
     image: {
       width: 100,

package/src/utils/api.ts

@@ -0,0 +1,47 @@
+import DeviceInfo from 'react-native-device-info'
+import { session } from './session'
+
+const brand = DeviceInfo.getBrand()
+const model = DeviceInfo.getModel()
+const systemName = DeviceInfo.getSystemName()
+const systemVersion = DeviceInfo.getSystemVersion()
+const readableVersion = DeviceInfo.getReadableVersion()
+const appName = DeviceInfo.getApplicationName()
+
+export default function apiRequest<T = unknown>(
+  url: string,
+  { method = 'GET', data = null } = {}
+): Promise<{ json: T; ok: boolean; response: Response }> {
+  const options: RequestInit = {
+    headers: {
+      Accept: 'application/vnd.api+json',
+      'Content-Type': 'application/json',
+      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+      Authorization: `Bearer ${session.token?.access_token}`,
+    },
+    method,
+  }
+
+  if (data && method !== 'GET') {
+    options.body = JSON.stringify(data)
+  }
+
+  return fetch(url, options)
+    .then(validateResponse)
+    .then(response =>
+      response
+        .json()
+        .then(json => ({ json: json as T, ok: response.ok, response }))
+        .catch(() => ({ json: null as T, ok: response.ok, response }))
+    )
+}
+
+const validateResponse = (response: Response) => {
+  const isExpired = response.status === 401
+
+  if (isExpired) {
+    throw new Error('Token expired')
+  }
+
+  return response
+}

package/src/utils/platform_styles.ts

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native'
+import { tokens } from '../vendor/tapestry/tokens'
+
+export const platformFontWeightBold = Platform.select({
+  ios: tokens.fontWeightSemiBold,
+  android: tokens.fontWeightBold,
+})

package/src/utils/space.ts

@@ -0,0 +1,39 @@
+import { tokens } from '../vendor/tapestry/tokens'
+
+export type SpacingValues =
+  | 0.25
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 4.5
+  | 5
+  | 5.5
+  | 6
+  | 6.5
+  | 7
+  | 7.5
+
+export function space(value: SpacingValues): number {
+  if (value === 0.25) return tokens.spacingFourth
+  if (value === 0.5) return tokens.spacingHalf
+  if (value < 1 || value > 7.5) return handleInvalidSpace(value)
+
+  // Reject fractional values that are not 0 or 0.5
+  const wholeValue = Math.floor(value)
+  const fractionalValue = value % 1
+  if (fractionalValue !== 0 && fractionalValue !== 0.5) return handleInvalidSpace(value)
+
+  // Deliver a whole value or add a half spacing token to it
+  const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0
+  return tokens[`spacing${wholeValue}`] + remainderValue
+}
+
+function handleInvalidSpace(value: number) {
+  console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`)
+  return 0
+}

package/src/utils/theme.ts

@@ -1,10 +1,10 @@
 import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
-import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'
+import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
 
 export interface ChatTheme extends DefaultTheme {
   colors: DefaultTheme['colors'] &
-    (typeof tapestryAliasTokensColorMap.light | typeof tapestryAliasTokensColorMap.dark)
+    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)
 }
 
 /** =============================================
@@ -37,7 +37,7 @@ export const defaultTheme = (colorScheme: ColorSchemeName): DefaultTheme => {
     temporaryProductBadge: {
       container: {
         paddingHorizontal: tokens.spacing1,
-        backgroundColor: tapestryAliasTokensColorMap[scheme].fillColorNeutral070,
+        backgroundColor: aliasTokensColorMap[scheme].fillColorNeutral070,
         borderWidth: tokens.borderSizeDefault,
       },
       text: {