@planningcenter/chat-react-native 2.1.1 → 2.2.0-rc.1

package/src/components/display/badge.tsx

@@ -7,30 +7,12 @@ import { Icon } from './icon'
 import { Text } from './text'
 import { platformFontWeightMedium, space } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
+import { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'
 
 // =================================
 // ====== Constants ================
 // =================================
 
-const APPEARANCES = {
-  error: 'error',
-  info: 'info',
-  neutral: 'neutral',
-  success: 'success',
-  warning: 'warning',
-} as const
-
-type AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES]
-
-type AppearanceColors = Record<
-  AppearanceUnion,
-  {
-    background: string
-    text: string
-    icon: string
-  }
->
-
 const VARIANTS = {
   default: 'default',
   meta: 'meta',
@@ -77,7 +59,7 @@ interface BadgeProps {
   /**
    * Changes the status color for the badge and icon.
    */
-  appearance?: AppearanceUnion
+  appearance?: StatusAppearanceUnion
   /**
    * Changes form of the logo to support a meta label and badge
    */
@@ -151,33 +133,7 @@ const useStyles = ({
   const { colors } = useTheme()
   const fontScale = useFontScale({ maxFontSizeMultiplier })
 
-  const apparenceColorMap: AppearanceColors = {
-    error: {
-      background: colors.statusErrorBackground,
-      text: colors.statusErrorText,
-      icon: colors.statusErrorIcon,
-    },
-    info: {
-      background: colors.statusInfoBackground,
-      text: colors.statusInfoText,
-      icon: colors.statusInfoIcon,
-    },
-    neutral: {
-      background: colors.statusNeutralBackground,
-      text: colors.statusNeutralText,
-      icon: colors.statusNeutralIcon,
-    },
-    success: {
-      background: colors.statusSuccessBackground,
-      text: colors.statusSuccessText,
-      icon: colors.statusSuccessIcon,
-    },
-    warning: {
-      background: colors.statusWarningBackground,
-      text: colors.statusWarningText,
-      icon: colors.statusWarningIcon,
-    },
-  }
+  const statusColorMap = useStatusColorAppearanceMap()
 
   const badgePaddingHorizontal = space(1) * fontScale
   const badgePaddingVertical = space(0.5) * fontScale
@@ -187,24 +143,24 @@ const useStyles = ({
   const variantStylesMap: VariantStyles = {
     default: {
       gap: badgeGap,
-      backgroundColor: apparenceColorMap[appearance].background,
+      backgroundColor: statusColorMap[appearance].background,
       metaLabelPaddingLeft: badgePaddingHorizontal,
       paddingHorizontal: badgePaddingHorizontal,
       paddingVertical: badgePaddingVertical,
       borderWidth: tokens.borderSizeDefault * fontScale,
       borderRadius: tokens.borderRadiusMd,
-      textColor: apparenceColorMap[appearance].text,
+      textColor: statusColorMap[appearance].text,
       fontWeight: 'normal',
     },
     meta: {
       gap: badgeGap,
-      backgroundColor: apparenceColorMap[appearance].background,
+      backgroundColor: statusColorMap[appearance].background,
       metaLabelPaddingLeft: badgePaddingHorizontal,
       paddingHorizontal: badgePaddingHorizontal,
       paddingVertical: badgePaddingVertical,
       borderWidth: tokens.borderSizeDefault * fontScale,
       borderRadius: tokens.borderRadiusMd,
-      textColor: apparenceColorMap[appearance].text,
+      textColor: statusColorMap[appearance].text,
       fontWeight: platformFontWeightMedium,
     },
     metaSubtle: {
@@ -227,7 +183,7 @@ const useStyles = ({
       justifyContent: 'center',
       borderRadius: variantStylesMap[variant].borderRadius,
       borderWidth: variantStylesMap[variant].borderWidth,
-      borderColor: apparenceColorMap[appearance].background,
+      borderColor: statusColorMap[appearance].background,
     },
     badge: {
       flexDirection: 'row',
@@ -239,7 +195,7 @@ const useStyles = ({
       borderRadius: variantStylesMap[variant].borderRadius - 2,
     },
     icon: {
-      color: apparenceColorMap[appearance].icon,
+      color: statusColorMap[appearance].icon,
       fontSize: badgeFontSize,
     },
     logo: {

package/src/components/display/banner.tsx

@@ -0,0 +1,56 @@
+import React, { isValidElement, ReactElement } from 'react'
+import BannerPrimitive, {
+  type BannerStatusIconProps,
+  type BannerRootProps,
+} from '../primitive/banner_primitive'
+
+interface BannerProps {
+  /**
+   * Changes the status color for the background, text, and icon.
+   * Sets a preset status icon.
+   */
+  appearance?: BannerRootProps['appearance']
+  /**
+   * Renders the banner's main text.
+   * If some of the text is interactive it can also take `BannerPrimitive.Link` wrapped in `BannerPrimitive.Text`.
+   */
+  description: string | ReactElement
+  /**
+   * Renders the banner's heading text.
+   */
+  heading?: string
+  /**
+   * Overrides the preset status icon.
+   */
+  iconName?: BannerStatusIconProps['iconName']
+  /**
+   * Hides the status icon. By default, the status icon is shown.
+   */
+  showIcon?: boolean
+}
+
+export function Banner({
+  appearance,
+  description,
+  heading,
+  iconName,
+  showIcon = true,
+}: BannerProps) {
+  if (!description && !heading) return null
+
+  return (
+    <BannerPrimitive.Root appearance={appearance}>
+      <BannerPrimitive.StaticLayout>
+        {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}
+        <BannerPrimitive.Content>
+          {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}
+          {isValidElement(description) ? (
+            description
+          ) : (
+            <BannerPrimitive.Text>{description}</BannerPrimitive.Text>
+          )}
+        </BannerPrimitive.Content>
+      </BannerPrimitive.StaticLayout>
+    </BannerPrimitive.Root>
+  )
+}

package/src/components/display/button.tsx

@@ -7,8 +7,8 @@ import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks
 import { tokens } from '../../vendor/tapestry/tokens'
 import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'
 import { Spinner } from './spinner'
-import { getColorKey, useButtonColorOptionMap, useGradientColorMap } from './button_color_utils'
-import type { ButtonAppearanceUnion } from './button_color_utils'
+import { getColorKey, useButtonColorOptionMap, useGradientColorMap } from './utils/button_colors'
+import type { ButtonAppearanceUnion } from './utils/button_colors'
 
 // =================================
 // ====== Constants ================

package/src/components/display/icon_button.tsx

@@ -6,8 +6,8 @@ import type { IconProps } from './icon'
 import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'
 import { platformPressedOpacityStyle } from '../../utils'
 import { Spinner } from './spinner'
-import { getColorKey, useIconButtonColorOptionMap } from './button_color_utils'
-import type { IconButtonAppearanceUnion } from './button_color_utils'
+import { getColorKey, useIconButtonColorOptionMap } from './utils/button_colors'
+import type { IconButtonAppearanceUnion } from './utils/button_colors'
 
 // =================================
 // ====== Constants ================

package/src/components/display/index.ts

@@ -1,6 +1,7 @@
 export * from './avatar'
 export * from './avatar_group'
 export * from './badge'
+export * from './banner'
 export * from './button'
 export * from './heading'
 export * from './icon'

package/src/components/display/text_button.tsx

@@ -5,8 +5,8 @@ import { useTheme } from '../../hooks'
 import { platformFontWeightMedium } from '../../utils'
 import { Text } from './text'
 import type { TextProps } from './text'
-import { getColorKey, useButtonColorOptionMap } from './button_color_utils'
-import type { ButtonAppearanceUnion } from './button_color_utils'
+import { getColorKey, useButtonColorOptionMap } from './utils/button_colors'
+import type { ButtonAppearanceUnion } from './utils/button_colors'
 
 // =================================
 // ====== Component ================

package/src/components/display/text_inline_button.tsx

@@ -5,8 +5,8 @@ import { Text } from './text'
 import type { TextProps } from './text'
 import { platformFontWeightMedium } from '../../utils'
 import colorFunction from 'color'
-import { getColorKey, useButtonColorOptionMap } from './button_color_utils'
-import type { ButtonAppearanceUnion } from './button_color_utils'
+import { getColorKey, useButtonColorOptionMap } from './utils/button_colors'
+import type { ButtonAppearanceUnion } from './utils/button_colors'
 
 // =================================
 // ====== Component ================
@@ -24,6 +24,7 @@ export function TextInlineButton({
   children,
   disabled = false,
   onPress,
+  style,
   ...props
 }: TextInlineButtonProps) {
   const styles = useStyles({ appearance, disabled })
@@ -43,6 +44,7 @@ export function TextInlineButton({
         styles.underline,
         disabled && styles.disabled,
         isPressed && platformPressedStyle,
+        style,
       ]}
       onPress={!disabled ? onPress : undefined}
       onPressIn={() => setIsPressed(true)}

package/src/components/display/{button_color_utils.ts → utils/button_colors.ts}

@@ -1,4 +1,4 @@
-import { useTheme } from '../../hooks'
+import { useTheme } from '../../../hooks'
 
 // =================================
 // ====== Exports ==================

package/src/components/display/utils/status_colors.ts

@@ -0,0 +1,85 @@
+import { useTheme } from '../../../hooks'
+
+// =================================
+// ====== Exports ==================
+// =================================
+
+export { useStatusColorAppearanceMap }
+export type { StatusAppearanceUnion }
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const STATUS_APPEARANCES = {
+  error: 'error',
+  info: 'info',
+  neutral: 'neutral',
+  success: 'success',
+  warning: 'warning',
+} as const
+
+type StatusAppearanceUnion = (typeof STATUS_APPEARANCES)[keyof typeof STATUS_APPEARANCES]
+
+type StatusAppearanceColors = Record<
+  StatusAppearanceUnion,
+  {
+    background: string
+    text: string
+    icon: string
+  }
+>
+
+// =================================
+// ====== Hooks ====================
+// =================================
+
+function useStatusColorAppearanceMap(): StatusAppearanceColors {
+  const {
+    colors: {
+      statusErrorBackground,
+      statusErrorText,
+      statusErrorIcon,
+      statusInfoBackground,
+      statusInfoText,
+      statusInfoIcon,
+      statusNeutralBackground,
+      statusNeutralText,
+      statusNeutralIcon,
+      statusSuccessBackground,
+      statusSuccessText,
+      statusSuccessIcon,
+      statusWarningBackground,
+      statusWarningText,
+      statusWarningIcon,
+    },
+  } = useTheme()
+
+  return {
+    error: {
+      background: statusErrorBackground,
+      text: statusErrorText,
+      icon: statusErrorIcon,
+    },
+    info: {
+      background: statusInfoBackground,
+      text: statusInfoText,
+      icon: statusInfoIcon,
+    },
+    neutral: {
+      background: statusNeutralBackground,
+      text: statusNeutralText,
+      icon: statusNeutralIcon,
+    },
+    success: {
+      background: statusSuccessBackground,
+      text: statusSuccessText,
+      icon: statusSuccessIcon,
+    },
+    warning: {
+      background: statusWarningBackground,
+      text: statusWarningText,
+      icon: statusWarningIcon,
+    },
+  }
+}

package/src/components/primitive/banner_primitive.tsx

@@ -0,0 +1,247 @@
+import React, { createContext, FC, ReactNode, useContext } from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  useStatusColorAppearanceMap,
+  type StatusAppearanceUnion,
+} from '../display/utils/status_colors'
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, space } from '../../utils'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Heading, Icon, Text, TextInlineButton } from '../display'
+import { useFontScale } from '../../hooks'
+
+// ========================================
+// ====== Exports =========================
+// ========================================
+
+const Banner = {
+  Root: BannerRoot,
+  StaticLayout: BannerStaticLayout,
+  Content: BannerContent,
+  StatusIcon: BannerStatusIcon,
+  Heading: BannerHeading,
+  Text: BannerText,
+  Link: BannerLink,
+} as const
+
+type BannerComponents = {
+  Root: FC<BannerRootProps>
+  StaticLayout: FC<BannerStaticLayoutProps>
+  Content: FC<BannerContentProps>
+  StatusIcon: FC<BannerStatusIconProps>
+  Heading: FC<BannerHeadingProps>
+  Text: FC<BannerTextProps>
+  Link: FC<BannerLinkProps>
+}
+
+export default Banner as BannerComponents
+export type {
+  BannerRootProps,
+  BannerStaticLayoutProps,
+  BannerContentProps,
+  BannerStatusIconProps,
+  BannerHeadingProps,
+  BannerTextProps,
+  BannerLinkProps,
+}
+
+// ========================================
+// ====== Context =========================
+// ========================================
+
+interface BannerContextType {
+  appearance?: StatusAppearanceUnion
+}
+
+const BannerContext = createContext<BannerContextType | null>(null)
+
+function useBannerContext() {
+  const context = useContext(BannerContext)
+  if (!context) {
+    throw new Error('Banner components must be used within Banner.Root')
+  }
+  return context
+}
+
+// ========================================
+// ====== BannerRoot ======================
+// ========================================
+
+interface BannerRootProps {
+  children: ReactNode
+  appearance?: StatusAppearanceUnion
+}
+
+function BannerRoot({ children, appearance = 'neutral' }: BannerRootProps) {
+  return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>
+}
+
+BannerRoot.displayName = 'Banner.Root'
+
+// ========================================
+// ====== BannerStaticLayout ==============
+// ========================================
+
+interface BannerStaticLayoutProps {
+  children: ReactNode
+}
+
+function BannerStaticLayout({ children }: BannerStaticLayoutProps) {
+  const { appearance } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return <View style={styles.staticLayout}>{children}</View>
+}
+
+BannerStaticLayout.displayName = 'Banner.StaticLayout'
+
+// ========================================
+// ====== BannerContent ===================
+// ========================================
+
+interface BannerContentProps {
+  children: ReactNode
+}
+
+function BannerContent({ children }: BannerContentProps) {
+  const styles = useStyles()
+
+  return <View style={styles.content}>{children}</View>
+}
+
+BannerContent.displayName = 'Banner.Content'
+
+// ========================================
+// ====== BannerStatusIcon ================
+// ========================================
+
+interface BannerStatusIconProps {
+  iconName?: string
+}
+
+function BannerStatusIcon({ iconName }: BannerStatusIconProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  const iconNameMap = {
+    error: 'general.exclamationTriangle',
+    info: 'general.outlinedInfoCircle',
+    neutral: 'general.outlinedInfoCircle',
+    success: 'general.check',
+    warning: 'general.exclamationTriangle',
+  } as const
+
+  return (
+    <Icon
+      name={iconName || iconNameMap[appearance]}
+      style={styles.icon}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+    />
+  )
+}
+
+BannerStatusIcon.displayName = 'Banner.StatusIcon'
+
+// ========================================
+// ====== BannerHeading ===================
+// ========================================
+
+interface BannerHeadingProps {
+  children: ReactNode
+}
+
+function BannerHeading({ children }: BannerHeadingProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return (
+    <Heading variant="h3" style={styles.heading}>
+      {children}
+    </Heading>
+  )
+}
+
+BannerHeading.displayName = 'Banner.Heading'
+
+// ========================================
+// ====== BannerText ======================
+// ========================================
+
+interface BannerTextProps {
+  children: ReactNode
+}
+
+function BannerText({ children }: BannerTextProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return (
+    <Text variant="tertiary" style={styles.text}>
+      {children}
+    </Text>
+  )
+}
+
+BannerText.displayName = 'Banner.Text'
+
+// ========================================
+// ====== BannerLink ======================
+// ========================================
+
+interface BannerLinkProps {
+  children: ReactNode
+  onPress?: () => void
+}
+
+function BannerLink({ children, onPress }: BannerLinkProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return (
+    <TextInlineButton variant="tertiary" style={styles.text} onPress={onPress}>
+      {children}
+    </TextInlineButton>
+  )
+}
+
+BannerLink.displayName = 'Banner.Link'
+
+// ========================================
+// ====== Styles ==========================
+// ========================================
+
+interface Styles {
+  appearance?: StatusAppearanceUnion
+}
+
+const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
+  const statusColorMap = useStatusColorAppearanceMap()
+  const fontScale = useFontScale()
+
+  return StyleSheet.create({
+    staticLayout: {
+      flexDirection: 'row',
+      backgroundColor: statusColorMap[appearance].background,
+      padding: space(1.5),
+      gap: space(1),
+      borderRadius: tokens.borderRadiusMd,
+      flex: 1,
+    },
+    content: {
+      gap: space(0.5),
+      flex: 1,
+    },
+    icon: {
+      color: statusColorMap[appearance].icon,
+      fontSize: tokens.fontSizeMd,
+      marginTop: space(0.5) * fontScale,
+    },
+    heading: {
+      color: statusColorMap[appearance].text,
+      fontWeight: platformFontWeightMedium,
+      fontSize: tokens.fontSizeMd,
+    },
+    text: {
+      color: statusColorMap[appearance].text,
+    },
+  })
+}

package/src/contexts/api_provider.tsx

@@ -1,11 +1,11 @@
 import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
 import React, { useContext, useEffect, useRef } from 'react'
 import { ViewProps } from 'react-native'
-import { Client } from '../utils'
 import { ChatContext, ChatContextValue } from './chat_context'
 import { RequestQueryKey } from '../hooks'
+import { ApiClient, useApiClient } from '../hooks/use_api_client'
 
-let apiClient: Client | undefined
+let apiClient: ApiClient | undefined
 
 const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
   if (!apiClient) {
@@ -14,7 +14,7 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
 
   const [url, data, headers] = queryKey as RequestQueryKey
 
-  return apiClient.get({ url, data, headers })
+  return apiClient.chat.get({ url, data, headers })
 }
 
 export const queryClient = new QueryClient({
@@ -27,10 +27,10 @@ export const queryClient = new QueryClient({
 })
 
 export function ApiProvider({ children }: ViewProps) {
-  const { token, env, client } = useContext(ChatContext)
+  const { token, env } = useContext(ChatContext)
   const sessionChanged = useSessionChanged({ token, env })
 
-  apiClient = client
+  apiClient = useApiClient()
 
   useEffect(() => {
     if (!sessionChanged) return

package/src/contexts/chat_context.tsx

@@ -2,7 +2,7 @@ import { merge } from 'lodash'
 import React, { createContext, useMemo } from 'react'
 import { ColorSchemeName, useColorScheme } from 'react-native'
 import { DeepPartial, OAuthToken } from '../types'
-import { Client, ENV, Session } from '../utils'
+import { ENV, Session } from '../utils'
 import { ChatTheme, defaultTheme, DefaultTheme } from '../utils/theme'
 
 export type ChatContextValue = {
@@ -10,49 +10,32 @@ export type ChatContextValue = {
   onTokenExpired: () => void
   theme: ChatTheme
   env?: ENV
-  client: Client
+  session: Session
 }
 
 export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'theme'> {
   theme: CreateChatThemeProps
 }
 
-const defaultChatClient = new Client({
-  app: 'chat',
-  session: new Session(),
-  version: '2018-11-01',
-  onTokenExpired: () => null,
-})
-
 export const ChatContext = createContext<ChatContextValue>({
   theme: defaultTheme('light'),
   token: undefined,
   env: undefined,
   onTokenExpired: () => {},
-  client: defaultChatClient,
+  session: new Session(),
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {
   const { env, token, onTokenExpired } = value
   const theme = useCreateChatTheme(value.theme || {})
   const session = useMemo(() => new Session({ token, env }), [env, token])
-  const client = useMemo(
-    () =>
-      new Client({
-        app: 'chat',
-        session,
-        version: '2018-11-01',
-        onTokenExpired,
-      }),
-    [onTokenExpired, session]
-  )
 
   const contextValue: ChatContextValue = {
     env,
     token,
     onTokenExpired,
+    session,
     theme,
-    client,
   }
 
   return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>