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

package/src/screens/design_system_screen.tsx

@@ -6,6 +6,7 @@ import {
   Avatar,
   AvatarGroup,
   Badge,
+  Banner,
   Button,
   Heading,
   Icon,
@@ -23,6 +24,7 @@ import {
   platformPressedOpacityStyle,
   platformFontWeightMedium,
 } from '../utils'
+import BannerPrimitive from '../components/primitive/banner_primitive'
 
 // =================================
 // ====== Docs Utils ===============
@@ -756,6 +758,47 @@ function StatusComponentsSection({ isLast }: SectionProps) {
           <Badge variant="metaSubtle" productLogoName="services" label="Team" />
         </Row>
       </Group>
+      <Group
+        title="Banner"
+        description="Banners that can convey a status with color and an optional icon. They render a description and optional heading. A `Banner.Link` can be used by wrapping it in `Banner.Text` and passing it to `description`. Target products can change colors via theming."
+      >
+        <Column>
+          <Banner
+            appearance="neutral"
+            showIcon={false}
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+          <Banner
+            appearance="info"
+            heading="Banner heading"
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+          <Banner
+            appearance="success"
+            heading="Banner heading"
+            description={
+              <BannerPrimitive.Text>
+                Et sint Quis non excepturi{' '}
+                <BannerPrimitive.Link onPress={buttonPress}>
+                  enim et conseq atur porro est
+                </BannerPrimitive.Link>{' '}
+                galisum labore ea volupt.
+              </BannerPrimitive.Text>
+            }
+          />
+          <Banner
+            appearance="warning"
+            iconName="general.shieldExclamation"
+            heading="13 members under age 13"
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+          <Banner
+            appearance="error"
+            heading="Banner heading"
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+        </Column>
+      </Group>
     </CollapsableSection>
   )
 }
@@ -818,6 +861,16 @@ function Row({ children, style }: RowProps) {
   return <View style={[styles.row, style]}>{children}</View>
 }
 
+interface ColumnProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+function Column({ children, style }: ColumnProps) {
+  const styles = useStyles()
+  return <View style={[styles.column, style]}>{children}</View>
+}
+
 function TextGroup({ children }: { children: React.ReactNode }) {
   const styles = useStyles()
   return <View style={styles.textGroup}>{children}</View>
@@ -893,6 +946,9 @@ const useStyles = () => {
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
+    column: {
+      gap: space(2),
+    },
     textRow: {
       gap: space(1.5),
     },

package/src/screens/message_actions_screen.tsx

@@ -2,13 +2,13 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback } from 'react'
 import { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Text, TextButton } from '../components'
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
-import { ChatContext } from '../contexts'
 import { useTheme } from '../hooks'
+import { useApiClient } from '../hooks/use_api_client'
 import { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
@@ -31,7 +31,7 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
   const navigation = useNavigation()
   const { conversation_id, message_id } = route.params
 
-  const { client } = useContext(ChatContext)
+  const apiClient = useApiClient()
   const queryClient = useQueryClient()
   const styles = useStyles()
 
@@ -68,7 +68,7 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
       )
 
-      return client.post({
+      return apiClient.chat.post({
         url,
         data: {
           ...requestParams.data,
@@ -80,14 +80,14 @@ export function MessageActionsScreen({ route }: ReactionScreenProps) {
         },
       })
     },
-    [client, conversation_id, message_id]
+    [apiClient, conversation_id, message_id]
   )
 
   const deleteMessage = useCallback(() => {
     const url = `/me/conversations/${conversation_id}/messages/${message_id}/`
 
-    return client.delete({ url })
-  }, [client, conversation_id, message_id])
+    return apiClient.chat.delete({ url })
+  }, [apiClient, conversation_id, message_id])
 
   const { mutate: handleReaction, isPending } = useMutation({
     mutationFn: handleReactionPress,

package/src/utils/client/request_helpers.ts

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import URI from 'urijs'
 import { transformRequestData } from './transform_request_data'
 import transformResponse from './transform_response'
-import { Accumulator, RequestData } from './types'
+import { Accumulator, GetRequest, PostRequest, RequestData } from './types'
 
 export type MakeRequestArgs = {
   action: 'GET' | 'POST' | 'PATCH' | 'DELETE'
@@ -112,3 +112,23 @@ export const throwErrorIfQueryParams = url => {
 
   return Promise.resolve()
 }
+
+export const transformGetToPost = (args: GetRequest): PostRequest => {
+  const { data, ...rest } = args
+  const { fields, include } = data
+  const fieldsArray = Object.entries(fields).map(([key, value]) => {
+    if (Array.isArray(value)) {
+      return [key, value.join(',')]
+    }
+
+    return [key, value]
+  })
+
+  return {
+    ...rest,
+    data: {
+      fields: Object.fromEntries(fieldsArray),
+      include,
+    },
+  }
+}

package/build/components/display/button_color_utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button_color_utils.d.ts","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAA;AACjG,YAAY,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,CAAA;AAMhE,QAAA,MAAM,kBAAkB;;;CAGd,CAAA;AAEV,KAAK,qBAAqB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAA;AAEzF,QAAA,MAAM,uBAAuB;;;;CAGnB,CAAA;AAEV,KAAK,yBAAyB,GAC5B,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAA;AAExE,QAAA,MAAM,oBAAoB;;;;CAGhB,CAAA;AAEV,KAAK,sBAAsB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAA;AAE9F,QAAA,MAAM,yBAAyB;;;;;CAGrB,CAAA;AAEV,KAAK,0BAA0B,GAC7B,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,OAAO,yBAAyB,CAAC,CAAA;AAM5E,KAAK,oBAAoB,GAAG,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAA;AAClE,iBAAS,uBAAuB,IAAI,oBAAoB,CAQvD;AAED,KAAK,wBAAwB,GAAG,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAA;AAC1E,iBAAS,2BAA2B,IAAI,wBAAwB,CAS/D;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AACxE,iBAAS,mBAAmB,IAAI,gBAAgB,CAc/C;AAMD,UAAU,eAAe;IACvB,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,qBAAqB,GAAG,yBAAyB,CAAA;CAC9D;AACD,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,eAAe,qDAGtE"}

package/build/components/display/button_color_utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button_color_utils.js","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAA;AAGjG,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,kBAAkB,GAAG;IACzB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;CAClB,CAAA;AAIV,MAAM,uBAAuB,GAAG;IAC9B,GAAG,kBAAkB;IACrB,OAAO,EAAE,SAAS;CACV,CAAA;AAKV,MAAM,oBAAoB,GAAG;IAC3B,GAAG,kBAAkB;IACrB,QAAQ,EAAE,UAAU;CACZ,CAAA;AAIV,MAAM,yBAAyB,GAAG;IAChC,GAAG,oBAAoB;IACvB,GAAG,uBAAuB;CAClB,CAAA;AAUV,SAAS,uBAAuB;IAC9B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO;QACL,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,MAAM,EAAE,MAAM,CAAC,0BAA0B;QACzC,QAAQ,EAAE,MAAM,CAAC,wBAAwB;KAC1C,CAAA;AACH,CAAC;AAGD,SAAS,2BAA2B;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO;QACL,MAAM,EAAE,MAAM,CAAC,0BAA0B;QACzC,QAAQ,EAAE,MAAM,CAAC,wBAAwB;QACzC,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,OAAO,EAAE,MAAM,CAAC,yBAAyB;KAC1C,CAAA;AACH,CAAC;AAGD,SAAS,mBAAmB;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAA;IAClE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAA;IAE9D,OAAO;QACL,WAAW,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC;QACjD,MAAM,EAAE,CAAC,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,0BAA0B,CAAC;QAC9E,QAAQ,EAAE;YACR,MAAM,CAAC,mCAAmC;YAC1C,MAAM,CAAC,mCAAmC;SAC3C;KACF,CAAA;AACH,CAAC;AAWD,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAmB;IACrE,IAAI,QAAQ,IAAI,OAAO;QAAE,OAAO,UAAU,CAAA;IAC1C,OAAO,UAAU,CAAA;AACnB,CAAC","sourcesContent":["import { useTheme } from '../../hooks'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\nexport { getColorKey, useButtonColorOptionMap, useGradientColorMap, useIconButtonColorOptionMap }\nexport type { ButtonAppearanceUnion, IconButtonAppearanceUnion }\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst BUTTON_APPEARANCES = {\n  danger: 'danger',\n  interaction: 'interaction',\n} as const\n\ntype ButtonAppearanceUnion = (typeof BUTTON_APPEARANCES)[keyof typeof BUTTON_APPEARANCES]\n\nconst ICON_BUTTON_APPEARANCES = {\n  ...BUTTON_APPEARANCES,\n  neutral: 'neutral',\n} as const\n\ntype IconButtonAppearanceUnion =\n  (typeof ICON_BUTTON_APPEARANCES)[keyof typeof ICON_BUTTON_APPEARANCES]\n\nconst BUTTON_COLOR_OPTIONS = {\n  ...BUTTON_APPEARANCES,\n  disabled: 'disabled',\n} as const\n\ntype ButtonColorOptionUnion = (typeof BUTTON_COLOR_OPTIONS)[keyof typeof BUTTON_COLOR_OPTIONS]\n\nconst ICON_BUTTON_COLOR_OPTIONS = {\n  ...BUTTON_COLOR_OPTIONS,\n  ...ICON_BUTTON_APPEARANCES,\n} as const\n\ntype IconButtonColorOptionUnion =\n  (typeof ICON_BUTTON_COLOR_OPTIONS)[keyof typeof ICON_BUTTON_COLOR_OPTIONS]\n\n// =================================\n// ====== Hooks ====================\n// =================================\n\ntype ButtonColorOptionMap = Record<ButtonColorOptionUnion, string>\nfunction useButtonColorOptionMap(): ButtonColorOptionMap {\n  const { colors } = useTheme()\n\n  return {\n    interaction: colors.interaction,\n    danger: colors.fillColorStatusErrorMedium,\n    disabled: colors.textColorDefaultDisabled,\n  }\n}\n\ntype IconButtonColorOptionMap = Record<IconButtonColorOptionUnion, string>\nfunction useIconButtonColorOptionMap(): IconButtonColorOptionMap {\n  const { colors } = useTheme()\n\n  return {\n    danger: colors.fillColorStatusErrorMedium,\n    disabled: colors.textColorDefaultDisabled,\n    interaction: colors.interaction,\n    neutral: colors.iconColorDefaultSecondary,\n  }\n}\n\ntype GradientColorMap = Record<ButtonColorOptionUnion, [string, string]>\nfunction useGradientColorMap(): GradientColorMap {\n  const { colors } = useTheme()\n\n  const defaultColorStart = colors.buttonStart || colors.interaction\n  const defaultColorEnd = colors.buttonEnd || colors.interaction\n\n  return {\n    interaction: [defaultColorStart, defaultColorEnd],\n    danger: [colors.fillColorStatusErrorMedium, colors.fillColorStatusErrorMedium],\n    disabled: [\n      colors.fillColorButtonNeutralSolidDisabled,\n      colors.fillColorButtonNeutralSolidDisabled,\n    ],\n  }\n}\n\n// =================================\n// ====== Functions ================\n// =================================\n\ninterface GetColorKeyArgs {\n  disabled: boolean | null\n  loading?: boolean\n  appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion\n}\nfunction getColorKey({ disabled, loading, appearance }: GetColorKeyArgs) {\n  if (disabled || loading) return 'disabled'\n  return appearance\n}\n"]}