@planningcenter/chat-react-native 1.3.0 → 1.3.1-qa-68.0

package/README.md

@@ -0,0 +1,10 @@
+# @planningcenter/chat-react-native
+
+The code hosted here is meant to encapsulate behavior for our mobile targets. Currently we support behavior in Services and ChurchCenterApp.
+
+This codebase is powered by scripts from expo-modules but by design is not meant to require expo in order to run. We support both react-native and expo codebases.
+
+## Installation
+
+`npm i @planningcenter/chat-react-native`
+`npx pod-install`

package/build/components/conversations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAanD,wBAAgB,aAAa,6BAgB5B"}
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+B,MAAM,OAAO,CAAA;AASnD,wBAAgB,aAAa,6BAgB5B"}

package/build/components/conversations.js

@@ -1,9 +1,10 @@
 import { useNavigation } from '@react-navigation/native';
 import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query';
 import React, { Suspense, useContext } from 'react';
-import { FlatList, Pressable, StyleSheet, Text } from 'react-native';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { ChatContext } from '../contexts/chat_context';
-import { useTheme } from '../hooks/use_theme';
+import { useTheme } from '../hooks';
+import { Image, Spinner } from './display';
 import ErrorBoundary from './error_boundary';
 export function Conversations() {
     const { token } = useContext(ChatContext);
@@ -23,16 +24,43 @@ const Loaded = () => {
         queryKey: ['/chat/v2/me/conversations'],
     });
     const navigation = useNavigation();
-    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
+    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} style={styles.scrollView} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<View style={styles.column}>
+          <Text style={styles.foo}>Display Components</Text>
+          <View style={[styles.row, styles.spinnerContainer]}>
+            <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}/>
+          </View>
+          <Text style={styles.foo}>Conversations</Text>
+        </View>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
           <Text style={styles.listItem}>{item.attributes.title}</Text>
         </Pressable>)}/>);
 };
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({
-        container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+        scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
+        container: { gap: 8, padding: 16 },
         foo: { fontSize: 24, color: colors.testColor },
         listItem: { color: colors.fillColorNeutral020 },
+        row: {
+            gap: 16,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        column: { gap: 16 },
+        spinnerContainer: {
+            height: 20,
+        },
+        image: {
+            width: 100,
+            height: 100,
+        },
     });
 };
 //# sourceMappingURL=conversations.js.map

package/build/components/conversations.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACjF,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAQ5C,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEzC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,uBAAuB,CACtB;MAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACd,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAC5B;UAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAC1C;YAAA,CAAC,MAAM,CAAC,AAAD,EACT;UAAA,EAAE,QAAQ,CACZ;QAAA,EAAE,aAAa,CAAC,CACjB,CACH;IAAA,EAAE,uBAAuB,CAAC,CAC3B,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,2BAA2B,CAAC;KACxC,CAAC,CAAA;IACF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC,CACxD,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACxB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CACxD;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAC7D;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,EACF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACzE,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE;QAC9C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;KAChD,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet, Text } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { useTheme } from '../hooks/use_theme'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  const { token } = useContext(ChatContext)\n\n  if (!token) return null\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>\n            <Loaded />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => (\n        <Pressable onPress={() => navigation.navigate('Settings')}>\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n  })\n}\n"]}
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'\nimport { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { useTheme } from '../hooks'\nimport { Image, Spinner } from './display'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = JSONAPICollection<ConversationResource>\n\nexport function Conversations() {\n  const { token } = useContext(ChatContext)\n\n  if (!token) return null\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>\n            <Loaded />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      style={styles.scrollView}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={\n        <View style={styles.column}>\n          <Text style={styles.foo}>Display Components</Text>\n          <View style={[styles.row, styles.spinnerContainer]}>\n            <Spinner size={24} />\n          </View>\n          <View style={styles.row}>\n            <Image source={{ uri: 'https://broken.url' }} style={styles.image} />\n            <Image\n              source={{\n                uri: 'https://picsum.photos/seed/picsum/200',\n              }}\n              style={styles.image}\n            />\n          </View>\n          <Text style={styles.foo}>Conversations</Text>\n        </View>\n      }\n      renderItem={({ item }) => (\n        <Pressable onPress={() => navigation.navigate('Settings')}>\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\n    container: { gap: 8, padding: 16 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n    row: {\n      gap: 16,\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    column: { gap: 16 },\n    spinnerContainer: {\n      height: 20,\n    },\n    image: {\n      width: 100,\n      height: 100,\n    },\n  })\n}\n"]}

package/build/components/display/image.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ImageProps as RNImageProps, ViewStyle } from 'react-native';
+interface ImageProps extends RNImageProps {
+    /**
+     * Should the image show the loading indicator by default.
+     */
+    defaultLoading?: boolean;
+    /**
+     * Size of the loading spinner.
+     */
+    loaderSize?: number;
+    /**
+     * Style object for the preload background.
+     */
+    loadingBackgroundStyles?: ViewStyle;
+}
+export declare function Image({ source, onLoad, defaultLoading, loaderSize, loadingBackgroundStyles, style, ...restProps }: ImageProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAIL,UAAU,IAAI,YAAY,EAG1B,SAAS,EACV,MAAM,cAAc,CAAA;AAIrB,UAAU,UAAW,SAAQ,YAAY;IACvC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,SAAS,CAAA;CACpC;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,MAAa,EACb,cAAqB,EACrB,UAAe,EACf,uBAAuB,EACvB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,UAAU,qBA2BZ"}

package/build/components/display/image.js

@@ -0,0 +1,39 @@
+import { noop } from 'lodash';
+import React, { useState } from 'react';
+import { Image as ReactNativeImage, StyleSheet, View, } from 'react-native';
+import { useTheme } from '../../hooks';
+import { Spinner } from './spinner';
+export function Image({ source, onLoad = noop, defaultLoading = true, loaderSize = 24, loadingBackgroundStyles, style, ...restProps }) {
+    const [loading, setLoading] = useState(defaultLoading);
+    const imageStyles = StyleSheet.flatten(style);
+    const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {};
+    const styles = useStyles(width, height, borderRadius);
+    const handleOnLoad = (event) => {
+        setLoading(false);
+        onLoad?.(event);
+    };
+    return (<View>
+      <ReactNativeImage style={[styles.image, imageStyles]} onLoad={handleOnLoad} source={source} {...restProps}/>
+      {loading && (<View style={[styles.loadingBackground, loadingBackgroundStyles]}>
+          <Spinner size={loaderSize}/>
+        </View>)}
+    </View>);
+}
+const useStyles = (width, height, borderRadius) => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        loadingBackground: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            backgroundColor: colors.fillColorNeutral070,
+            borderRadius,
+            width,
+            height,
+        },
+        image: {
+            backgroundColor: 'transparent',
+        },
+    });
+};
+//# sourceMappingURL=image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAGL,KAAK,IAAI,gBAAgB,EAEzB,UAAU,EACV,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAiBnC,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,MAAM,GAAG,IAAI,EACb,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,EAAE,EACf,uBAAuB,EACvB,KAAK,EACL,GAAG,SAAS,EACD;IACX,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;IAEtD,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,GAAG,WAAW,IAAI,EAAE,CAAA;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,CAAA;IAErD,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE;QAClC,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CACnC,MAAM,CAAC,CAAC,YAAY,CAAC,CACrB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,SAAS,CAAC,EAEhB;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,uBAAuB,CAAC,CAAC,CAC/D;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAC5B;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,CAChB,KAAqB,EACrB,MAAsB,EACtB,YAAoC,EACpC,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,iBAAiB,EAAE;YACjB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,YAAY;YACZ,KAAK;YACL,MAAM;SACP;QACD,KAAK,EAAE;YACL,eAAe,EAAE,aAAa;SAC/B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n  AnimatableNumericValue,\n  DimensionValue,\n  Image as ReactNativeImage,\n  ImageProps as RNImageProps,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\ninterface ImageProps extends RNImageProps {\n  /**\n   * Should the image show the loading indicator by default.\n   */\n  defaultLoading?: boolean\n  /**\n   * Size of the loading spinner.\n   */\n  loaderSize?: number\n  /**\n   * Style object for the preload background.\n   */\n  loadingBackgroundStyles?: ViewStyle\n}\n\nexport function Image({\n  source,\n  onLoad = noop,\n  defaultLoading = true,\n  loaderSize = 24,\n  loadingBackgroundStyles,\n  style,\n  ...restProps\n}: ImageProps) {\n  const [loading, setLoading] = useState(defaultLoading)\n\n  const imageStyles = StyleSheet.flatten(style)\n  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}\n  const styles = useStyles(width, height, borderRadius)\n\n  const handleOnLoad = (event: any) => {\n    setLoading(false)\n    onLoad?.(event)\n  }\n\n  return (\n    <View>\n      <ReactNativeImage\n        style={[styles.image, imageStyles]}\n        onLoad={handleOnLoad}\n        source={source}\n        {...restProps}\n      />\n      {loading && (\n        <View style={[styles.loadingBackground, loadingBackgroundStyles]}>\n          <Spinner size={loaderSize} />\n        </View>\n      )}\n    </View>\n  )\n}\n\nconst useStyles = (\n  width: DimensionValue,\n  height: DimensionValue,\n  borderRadius: AnimatableNumericValue\n) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    loadingBackground: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      backgroundColor: colors.fillColorNeutral070,\n      borderRadius,\n      width,\n      height,\n    },\n    image: {\n      backgroundColor: 'transparent',\n    },\n  })\n}\n"]}

package/build/components/display/index.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from './spinner';
+export { Image } from './image';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/build/components/display/index.js

@@ -0,0 +1,3 @@
+export { Spinner } from './spinner';
+export { Image } from './image';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA","sourcesContent":["export { Spinner } from './spinner'\nexport { Image } from './image'\n"]}

package/build/components/display/spinner.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SpinnerProps {
+    /**
+     *  Size of the spinner in px
+     * */
+    size?: number;
+}
+export declare function Spinner({ size }: SpinnerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,EAAE,YAAY,qBAoClD"}

package/build/components/display/spinner.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks';
+export function Spinner({ size = 20 }) {
+    const rotation = useRef(new Animated.Value(0)).current;
+    const animation = Animated.loop(Animated.timing(rotation, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+    }));
+    const rotateValue = rotation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    const styles = useStyles(rotateValue, size);
+    useEffect(() => {
+        animation.start();
+        return () => animation.stop();
+    }, [animation]);
+    useEffect(() => () => rotation.setValue(0), [rotation]);
+    return (<View style={styles.container}>
+      <Animated.View style={styles.animatedContainer}>
+        <View style={styles.clipping}>
+          <View style={[styles.circle, styles.spinner]}/>
+        </View>
+        <View style={[styles.circle, styles.track]}/>
+      </Animated.View>
+    </View>);
+}
+const useStyles = (rotate, size) => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        container: {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 200,
+            justifyContent: 'center',
+            alignItems: 'center',
+            opacity: 0.7,
+        },
+        animatedContainer: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            transform: [{ rotate }],
+        },
+        circle: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderStyle: 'solid',
+            borderWidth: 3,
+        },
+        spinner: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            borderColor: colors.fillColorNeutral020,
+        },
+        track: {
+            borderColor: colors.fillColorNeutral050Base,
+        },
+        clipping: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: size / 2,
+            height: size / 2,
+            overflow: 'hidden',
+            zIndex: 200,
+        },
+    });
+};
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { Animated, Easing, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../../hooks'\n\ninterface SpinnerProps {\n  /**\n   *  Size of the spinner in px\n   * */\n  size?: number\n}\n\nexport function Spinner({ size = 20 }: SpinnerProps) {\n  const rotation = useRef(new Animated.Value(0)).current\n\n  const animation = Animated.loop(\n    Animated.timing(rotation, {\n      toValue: 1,\n      duration: 1000,\n      easing: Easing.linear,\n      useNativeDriver: true,\n    })\n  )\n\n  const rotateValue = rotation.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0deg', '360deg'],\n  })\n\n  const styles = useStyles(rotateValue, size)\n\n  useEffect(() => {\n    animation.start()\n    return () => animation.stop()\n  }, [animation])\n\n  useEffect(() => () => rotation.setValue(0), [rotation])\n\n  return (\n    <View style={styles.container}>\n      <Animated.View style={styles.animatedContainer}>\n        <View style={styles.clipping}>\n          <View style={[styles.circle, styles.spinner]} />\n        </View>\n        <View style={[styles.circle, styles.track]} />\n      </Animated.View>\n    </View>\n  )\n}\n\nconst useStyles = (rotate: Animated.AnimatedInterpolation<string | number>, size: number) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 200,\n      justifyContent: 'center',\n      alignItems: 'center',\n      opacity: 0.7,\n    },\n    animatedContainer: {\n      width: size,\n      height: size,\n      borderRadius: size / 2,\n      transform: [{ rotate }],\n    },\n    circle: {\n      width: size,\n      height: size,\n      borderRadius: size / 2,\n      borderStyle: 'solid',\n      borderWidth: 3,\n    },\n    spinner: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      borderColor: colors.fillColorNeutral020,\n    },\n    track: {\n      borderColor: colors.fillColorNeutral050Base,\n    },\n    clipping: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: size / 2,\n      height: size / 2,\n      overflow: 'hidden',\n      zIndex: 200,\n    },\n  })\n}\n"]}

package/build/components/error_boundary.d.ts

@@ -8,7 +8,7 @@ declare class ErrorBoundary extends React.Component<PropsWithChildren<{
     };
     componentDidCatch(error: any): void;
     handleError(error: any): void;
-    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+    render(): React.ReactNode;
 }
 export default ErrorBoundary;
 //# sourceMappingURL=error_boundary.d.ts.map

package/build/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useCreateChatTheme } from './use_create_chat_theme';
+export { useTheme } from './use_theme';
+//# sourceMappingURL=index.d.ts.map

package/build/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA"}

package/build/hooks/index.js

@@ -0,0 +1,3 @@
+export { useCreateChatTheme } from './use_create_chat_theme';
+export { useTheme } from './use_theme';
+//# sourceMappingURL=index.js.map

package/build/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { useCreateChatTheme } from './use_create_chat_theme'\nexport { useTheme } from './use_theme'\n"]}

package/build/index.d.ts

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations';
 import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+import { useCreateChatTheme } from './hooks';
 import { OAuthToken } from './types';
 import { baseUrlMap, uploadUrlMap } from './utils/session';
 import { TemporaryDefaultColorsType } from './utils/theme';

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,EACZ,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,EACZ,kBAAkB,GACnB,CAAA"}

package/build/index.js

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations';
 import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+import { useCreateChatTheme } from './hooks';
 import { baseUrlMap, uploadUrlMap } from './utils/session';
 export { baseUrlMap, ChatContext, ChatProvider, Conversations, uploadUrlMap, useCreateChatTheme, };
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAElE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EACZ,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks/use_create_chat_theme'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  baseUrlMap,\n  ChatContext,\n  ChatProvider,\n  Conversations,\n  OAuthToken,\n  TemporaryDefaultColorsType,\n  uploadUrlMap,\n  useCreateChatTheme,\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EACZ,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  baseUrlMap,\n  ChatContext,\n  ChatProvider,\n  Conversations,\n  OAuthToken,\n  TemporaryDefaultColorsType,\n  uploadUrlMap,\n  useCreateChatTheme,\n}\n"]}

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.3.0",
+  "version": "1.3.1-qa-68.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
+  "files": [
+    "build",
+    "src"
+  ],
   "sideEffects": false,
   "scripts": {
     "build": "expo-module build",
@@ -12,10 +16,12 @@
     "test": "expo-module test",
     "prepublishOnly": "expo-module prepublishOnly"
   },
+  "dependencies": {
+    "@planningcenter/chat-core": "^1.3.1-qa-68.0"
+  },
   "peerDependencies": {
     "@react-navigation/elements": "*",
     "@react-navigation/native": "*",
-    "@react-navigation/native-stack": "*",
     "@tanstack/react-query": "^5.0.0",
     "lodash": "*",
     "react": "*",
@@ -25,13 +31,12 @@
     "@react-native/eslint-config": "^0.77.0",
     "@react-navigation/elements": "^2.2.3",
     "@react-navigation/native": "^7.0.14",
-    "@react-navigation/native-stack": "^7.2.0",
     "@tanstack/react-query": "^5.66.0",
     "@typescript-eslint/parser": "^8.23.0",
-    "expo-module-scripts": "^3.4.0",
+    "expo-module-scripts": "^4.0.3",
     "lodash": "^4.17.21",
     "prettier": "^3.4.2",
     "react-native": "0.74.5"
   },
-  "gitHead": "fccff0f8691ba483d7f504423a1bd649c94a5af8"
+  "gitHead": "4bd5d6e5cec476c55e45280b972903861d47d071"
 }

package/src/components/conversations.tsx

@@ -1,17 +1,14 @@
+import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'
 import { useNavigation } from '@react-navigation/native'
 import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
 import React, { Suspense, useContext } from 'react'
-import { FlatList, Pressable, StyleSheet, Text } from 'react-native'
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'
 import { ChatContext } from '../contexts/chat_context'
-import { useTheme } from '../hooks/use_theme'
-import { ConversationRecord } from '../types'
+import { useTheme } from '../hooks'
+import { Image, Spinner } from './display'
 import ErrorBoundary from './error_boundary'
 
-type ConversationsResponse = {
-  data: ConversationRecord[]
-  links: Record<string, string>
-  meta: Record<string, string>
-}
+type ConversationsResponse = JSONAPICollection<ConversationResource>
 
 export function Conversations() {
   const { token } = useContext(ChatContext)
@@ -42,8 +39,26 @@ const Loaded = () => {
     <FlatList
       data={conversations?.data}
       contentContainerStyle={styles.container}
+      style={styles.scrollView}
       ListEmptyComponent={<Text>No conversations found</Text>}
-      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
+      ListHeaderComponent={
+        <View style={styles.column}>
+          <Text style={styles.foo}>Display Components</Text>
+          <View style={[styles.row, styles.spinnerContainer]}>
+            <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}
+            />
+          </View>
+          <Text style={styles.foo}>Conversations</Text>
+        </View>
+      }
       renderItem={({ item }) => (
         <Pressable onPress={() => navigation.navigate('Settings')}>
           <Text style={styles.listItem}>{item.attributes.title}</Text>
@@ -57,8 +72,23 @@ const useStyles = () => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
-    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
+    container: { gap: 8, padding: 16 },
     foo: { fontSize: 24, color: colors.testColor },
     listItem: { color: colors.fillColorNeutral020 },
+    row: {
+      gap: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    column: { gap: 16 },
+    spinnerContainer: {
+      height: 20,
+    },
+    image: {
+      width: 100,
+      height: 100,
+    },
   })
 }

package/src/components/display/image.tsx

@@ -0,0 +1,88 @@
+import { noop } from 'lodash'
+import React, { useState } from 'react'
+import {
+  AnimatableNumericValue,
+  DimensionValue,
+  Image as ReactNativeImage,
+  ImageProps as RNImageProps,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
+import { useTheme } from '../../hooks'
+import { Spinner } from './spinner'
+
+interface ImageProps extends RNImageProps {
+  /**
+   * Should the image show the loading indicator by default.
+   */
+  defaultLoading?: boolean
+  /**
+   * Size of the loading spinner.
+   */
+  loaderSize?: number
+  /**
+   * Style object for the preload background.
+   */
+  loadingBackgroundStyles?: ViewStyle
+}
+
+export function Image({
+  source,
+  onLoad = noop,
+  defaultLoading = true,
+  loaderSize = 24,
+  loadingBackgroundStyles,
+  style,
+  ...restProps
+}: ImageProps) {
+  const [loading, setLoading] = useState(defaultLoading)
+
+  const imageStyles = StyleSheet.flatten(style)
+  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}
+  const styles = useStyles(width, height, borderRadius)
+
+  const handleOnLoad = (event: any) => {
+    setLoading(false)
+    onLoad?.(event)
+  }
+
+  return (
+    <View>
+      <ReactNativeImage
+        style={[styles.image, imageStyles]}
+        onLoad={handleOnLoad}
+        source={source}
+        {...restProps}
+      />
+      {loading && (
+        <View style={[styles.loadingBackground, loadingBackgroundStyles]}>
+          <Spinner size={loaderSize} />
+        </View>
+      )}
+    </View>
+  )
+}
+
+const useStyles = (
+  width: DimensionValue,
+  height: DimensionValue,
+  borderRadius: AnimatableNumericValue
+) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    loadingBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      backgroundColor: colors.fillColorNeutral070,
+      borderRadius,
+      width,
+      height,
+    },
+    image: {
+      backgroundColor: 'transparent',
+    },
+  })
+}

package/src/components/display/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './spinner'
+export { Image } from './image'

package/src/components/display/spinner.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef } from 'react'
+import { Animated, Easing, StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+
+interface SpinnerProps {
+  /**
+   *  Size of the spinner in px
+   * */
+  size?: number
+}
+
+export function Spinner({ size = 20 }: SpinnerProps) {
+  const rotation = useRef(new Animated.Value(0)).current
+
+  const animation = Animated.loop(
+    Animated.timing(rotation, {
+      toValue: 1,
+      duration: 1000,
+      easing: Easing.linear,
+      useNativeDriver: true,
+    })
+  )
+
+  const rotateValue = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  const styles = useStyles(rotateValue, size)
+
+  useEffect(() => {
+    animation.start()
+    return () => animation.stop()
+  }, [animation])
+
+  useEffect(() => () => rotation.setValue(0), [rotation])
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={styles.animatedContainer}>
+        <View style={styles.clipping}>
+          <View style={[styles.circle, styles.spinner]} />
+        </View>
+        <View style={[styles.circle, styles.track]} />
+      </Animated.View>
+    </View>
+  )
+}
+
+const useStyles = (rotate: Animated.AnimatedInterpolation<string | number>, size: number) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: 200,
+      justifyContent: 'center',
+      alignItems: 'center',
+      opacity: 0.7,
+    },
+    animatedContainer: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      transform: [{ rotate }],
+    },
+    circle: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderStyle: 'solid',
+      borderWidth: 3,
+    },
+    spinner: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderColor: colors.fillColorNeutral020,
+    },
+    track: {
+      borderColor: colors.fillColorNeutral050Base,
+    },
+    clipping: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: size / 2,
+      height: size / 2,
+      overflow: 'hidden',
+      zIndex: 200,
+    },
+  })
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCreateChatTheme } from './use_create_chat_theme'
+export { useTheme } from './use_theme'

package/src/index.tsx

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations'
 import { ChatContext, ChatProvider } from './contexts/chat_context'
-import { useCreateChatTheme } from './hooks/use_create_chat_theme'
+import { useCreateChatTheme } from './hooks'
 import { OAuthToken } from './types'
 import { baseUrlMap, uploadUrlMap } from './utils/session'
 import { TemporaryDefaultColorsType } from './utils/theme'

package/.babelrc.json

@@ -1,3 +0,0 @@
-{
-  "presets": ["module:@react-native/babel-preset"]
-}

package/.eslintrc.yml

@@ -1,2 +0,0 @@
-root: true
-extends: ['@react-native', '../../.eslintrc.yml']

package/CHANGELOG.md

@@ -1,25 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.3.0](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0) (2025-02-12)
-
-
-### Features
-
-* add auth to the example app ([#50](https://github.com/planningcenter/chat-js/issues/50)) ([5e0ae00](https://github.com/planningcenter/chat-js/commit/5e0ae008345743f6bba388e982a3ad768265971a))
-* allow environment switching ([#58](https://github.com/planningcenter/chat-js/issues/58)) ([2518d33](https://github.com/planningcenter/chat-js/commit/2518d33588a3eff1517b440cb0e493e97915d9b0))
-* **Api:** teach app about enviroments and make fetching a snap ([#55](https://github.com/planningcenter/chat-js/issues/55)) ([bb7aa56](https://github.com/planningcenter/chat-js/commit/bb7aa567ea362b53faceed9c98ca3b315a0229f5))
-* create higher fidelity components ([#54](https://github.com/planningcenter/chat-js/issues/54)) ([367b707](https://github.com/planningcenter/chat-js/commit/367b7076b6d3a81ede7852248e98a199adea9978))
-* drop stream and set global dependencies ([#49](https://github.com/planningcenter/chat-js/issues/49)) ([1214b9f](https://github.com/planningcenter/chat-js/commit/1214b9fbc17f4ab67a1de1d39954604a28268f35))
-* **StreamChat:** export core package ([#41](https://github.com/planningcenter/chat-js/issues/41)) ([e9afde0](https://github.com/planningcenter/chat-js/commit/e9afde0e2a11d9c7e13b84f8eee8a6cfa7aff795)), closes [#45](https://github.com/planningcenter/chat-js/issues/45)
-
-
-
-## [1.2.0](https://github.com/planningcenter/chat-js/compare/v1.1.0...v1.2.0) (2025-01-16)
-
-
-### Features
-
-* behold the monorepo ([#28](https://github.com/planningcenter/chat-js/issues/28)) ([240a49b](https://github.com/planningcenter/chat-js/commit/240a49b46c8d27467472f1b9cb825438d05e52bb))

package/patches/README.md

@@ -1,12 +0,0 @@
-We currently maintain patches for:
-
-- **stream-chat-expo**
-- **stream-chat-react-native-core**
-
-We expect these patches to be removed post-strexit
-
-
-Some helpful context on the patches is available here: [chore(stream-chat): bump packages](https://github.com/planningcenter/ChurchCenterApp/pull/3534#discussion_r1852521860)
-
-
->"Streamchat doesn't follow new unreads but we have ui that allows you to swipe to mark read and unread. Their UI doesn't follow those updates so it feels like marking unread is broken because the UI doesn't update even though it totally works."

package/patches/stream-chat-expo+5.44.2.patch

@@ -1,105 +0,0 @@
-diff --git a/node_modules/stream-chat-expo/src/optionalDependencies/getLocalAssetUri.ts b/node_modules/stream-chat-expo/src/optionalDependencies/getLocalAssetUri.ts
-index 3d79743..656c391 100644
---- a/node_modules/stream-chat-expo/src/optionalDependencies/getLocalAssetUri.ts
-+++ b/node_modules/stream-chat-expo/src/optionalDependencies/getLocalAssetUri.ts
-@@ -6,11 +6,11 @@ try {
-   // do nothing
- }
- 
--if (!MediaLibrary) {
--  console.log(
--    'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
--  );
--}
-+// if (!MediaLibrary) {
-+//   console.log(
-+//     'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
-+//   );
-+// }
- 
- export const getLocalAssetUri = async (assetId: string): Promise<string | undefined> => {
-   try {
-diff --git a/node_modules/stream-chat-expo/src/optionalDependencies/getPhotos.ts b/node_modules/stream-chat-expo/src/optionalDependencies/getPhotos.ts
-index b40c745..4025b64 100644
---- a/node_modules/stream-chat-expo/src/optionalDependencies/getPhotos.ts
-+++ b/node_modules/stream-chat-expo/src/optionalDependencies/getPhotos.ts
-@@ -6,11 +6,11 @@ try {
-   // do nothing
- }
- 
--if (!MediaLibrary) {
--  console.log(
--    'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
--  );
--}
-+// if (!MediaLibrary) {
-+//   console.log(
-+//     'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
-+//   );
-+// }
- import type { Asset } from 'stream-chat-react-native-core';
- 
- type ReturnType = {
-diff --git a/node_modules/stream-chat-expo/src/optionalDependencies/iOS14RefreshGallerySelection.ts b/node_modules/stream-chat-expo/src/optionalDependencies/iOS14RefreshGallerySelection.ts
-index 49bfe50..22e1a39 100644
---- a/node_modules/stream-chat-expo/src/optionalDependencies/iOS14RefreshGallerySelection.ts
-+++ b/node_modules/stream-chat-expo/src/optionalDependencies/iOS14RefreshGallerySelection.ts
-@@ -8,11 +8,11 @@ try {
-   // do nothing
- }
- 
--if (!MediaLibrary) {
--  console.log(
--    'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
--  );
--}
-+// if (!MediaLibrary) {
-+//   console.log(
-+//     'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
-+//   );
-+// }
- 
- const isAboveIOS14 = Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 14;
- 
-diff --git a/node_modules/stream-chat-expo/src/optionalDependencies/oniOS14GalleryLibrarySelectionChange.ts b/node_modules/stream-chat-expo/src/optionalDependencies/oniOS14GalleryLibrarySelectionChange.ts
-index 89721ac..bdf6686 100644
---- a/node_modules/stream-chat-expo/src/optionalDependencies/oniOS14GalleryLibrarySelectionChange.ts
-+++ b/node_modules/stream-chat-expo/src/optionalDependencies/oniOS14GalleryLibrarySelectionChange.ts
-@@ -8,11 +8,11 @@ try {
-   // do nothing
- }
- 
--if (!MediaLibrary) {
--  console.log(
--    'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
--  );
--}
-+// if (!MediaLibrary) {
-+//   console.log(
-+//     'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
-+//   );
-+// }
- 
- const isAboveIOS14 = Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 14;
- 
-diff --git a/node_modules/stream-chat-expo/src/optionalDependencies/triggerHaptic.ts b/node_modules/stream-chat-expo/src/optionalDependencies/triggerHaptic.ts
-index e385bf3..476a13a 100644
---- a/node_modules/stream-chat-expo/src/optionalDependencies/triggerHaptic.ts
-+++ b/node_modules/stream-chat-expo/src/optionalDependencies/triggerHaptic.ts
-@@ -6,11 +6,11 @@ try {
-   // do nothing
- }
- 
--if (!Haptics) {
--  console.log(
--    'expo-haptics is not installed. Installing this package will enable haptic feedback when scaling images in the image gallery if the scaling hits the higher or lower limits for its value.',
--  );
--}
-+// if (!Haptics) {
-+//   console.log(
-+//     'expo-haptics is not installed. Installing this package will enable haptic feedback when scaling images in the image gallery if the scaling hits the higher or lower limits for its value.',
-+//   );
-+// }
- 
- type HapticFeedbackTypes =
-   | 'impactHeavy'

package/patches/stream-chat-react-native-core+5.44.2.patch

@@ -1,24 +0,0 @@
-diff --git a/node_modules/stream-chat-react-native-core/src/components/ChannelPreview/hooks/useChannelPreviewData.ts b/node_modules/stream-chat-react-native-core/src/components/ChannelPreview/hooks/useChannelPreviewData.ts
-index a678e70..4beaf06 100644
---- a/node_modules/stream-chat-react-native-core/src/components/ChannelPreview/hooks/useChannelPreviewData.ts
-+++ b/node_modules/stream-chat-react-native-core/src/components/ChannelPreview/hooks/useChannelPreviewData.ts
-@@ -31,10 +31,16 @@ export const useChannelPreviewData = <
-   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
- 
-   useEffect(() => {
--    const { unsubscribe } = client.on('notification.mark_read', () => {
-+    const handleMarkReadOrMarkUnread = () => {
-       setUnread(channel.countUnread());
--    });
--    return unsubscribe;
-+    }
-+
-+    const listeners = [
-+      client.on('notification.mark_read', handleMarkReadOrMarkUnread),
-+      client.on('notification.mark_unread', handleMarkReadOrMarkUnread),
-+    ];
-+
-+    return () => listeners.forEach((l) => l.unsubscribe());
-   }, [channel, client]);
- 
-   useEffect(() => {

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "expo-module-scripts/tsconfig.base",
-  "compilerOptions": {
-    "outDir": "./build"
-  },
-  "include": ["./src", "../chat-core/types.d.ts"],
-  "exclude": ["**/__mocks__/*", "**/__tests__/*"],
-}