@planningcenter/chat-react-native 1.3.0-rc.3 → 1.3.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.0-rc.5](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.5) (2025-02-10)
+
+
+### 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))
+* 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.3.0-rc.4](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.4) (2025-02-07)
+
+
+### 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))
+* 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.3.0-rc.3](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.3) (2025-02-06)
 
 

package/build/components/conversations.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function Conversations(): React.JSX.Element;
+//# sourceMappingURL=conversations.d.ts.map

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

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

package/build/components/conversations.js

@@ -0,0 +1,52 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import React, { Suspense, useContext } from 'react';
+import { FlatList, StyleSheet, Text } from 'react-native';
+import { ChatContext } from '../contexts/chat_context';
+import ErrorBoundary from './error_boundary';
+import { useTheme } from '../hooks/use_theme';
+export function Conversations() {
+    return (<ErrorBoundary>
+      <Suspense fallback={<></>}>
+        <Loaded />
+      </Suspense>
+    </ErrorBoundary>);
+}
+const Loaded = () => {
+    const { token, onTokenExpired } = useContext(ChatContext);
+    const styles = useStyles();
+    const { data: conversations } = useSuspenseQuery({
+        queryKey: ['conversations', token],
+        queryFn: () => 
+        // TODO: replace with an api client
+        fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
+            headers: {
+                Authorization: `Bearer ${token?.access_token}`,
+            },
+        })
+            .then(validateResponse)
+            .then(response => response.json())
+            .catch(error => {
+            if (error.message === 'Token expired') {
+                onTokenExpired();
+            }
+            return null;
+        }),
+    });
+    return (<FlatList data={conversations?.data} ListEmptyComponent={<Text>No conversations</Text>} contentContainerStyle={styles.container} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => <Text style={styles.listItem}>{item.attributes.title}</Text>}/>);
+};
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+        foo: { fontSize: 24, color: colors.testColor },
+        listItem: { color: colors.fillColorNeutral020 },
+    });
+};
+const validateResponse = (response) => {
+    const isExpired = response.status === 401;
+    if (isExpired) {
+        throw new Error('Token expired');
+    }
+    return response;
+};
+//# sourceMappingURL=conversations.js.map

package/build/components/conversations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAQ7C,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,CAAC,aAAa,CACZ;MAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CACxB;QAAA,CAAC,MAAM,CAAC,AAAD,EACT;MAAA,EAAE,QAAQ,CACZ;IAAA,EAAE,aAAa,CAAC,CACjB,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACzD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC;QAClC,OAAO,EAAE,GAAG,EAAE;QACZ,mCAAmC;QACnC,KAAK,CAAC,+DAA+D,EAAE;YACrE,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,KAAK,EAAE,YAAY,EAAE;aAC/C;SACF,CAAC;aACC,IAAI,CAAC,gBAAgB,CAAC;aACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;aACjC,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;gBACtC,cAAc,EAAE,CAAA;YAClB,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC,CAAC;KACP,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAClD,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,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,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,EACvF,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;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IACzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import { useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, StyleSheet, Text } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\nimport { useTheme } from '../hooks/use_theme'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<></>}>\n        <Loaded />\n      </Suspense>\n    </ErrorBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const { token, onTokenExpired } = useContext(ChatContext)\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['conversations', token],\n    queryFn: () =>\n      // TODO: replace with an api client\n      fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {\n        headers: {\n          Authorization: `Bearer ${token?.access_token}`,\n        },\n      })\n        .then(validateResponse)\n        .then(response => response.json())\n        .catch(error => {\n          if (error.message === 'Token expired') {\n            onTokenExpired()\n          }\n          return null\n        }),\n  })\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      ListEmptyComponent={<Text>No conversations</Text>}\n      contentContainerStyle={styles.container}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => <Text style={styles.listItem}>{item.attributes.title}</Text>}\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\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}

package/build/components/error_boundary.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+declare class ErrorBoundary extends React.Component<PropsWithChildren<{}>> {
+    state: {
+        error: null;
+        unsubscriber: () => void;
+    };
+    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;
+}
+export default ErrorBoundary;
+//# sourceMappingURL=error_boundary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error_boundary.d.ts","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGhD,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAChE,KAAK;;;MAGJ;IAED,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAI5B,WAAW,CAAC,KAAK,EAAE,GAAG;IAItB,MAAM;CAOP;AAED,eAAe,aAAa,CAAA"}

package/build/components/error_boundary.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from 'react-native';
+class ErrorBoundary extends React.Component {
+    state = {
+        error: null,
+        unsubscriber: () => { },
+    };
+    componentDidCatch(error) {
+        this.handleError(error);
+    }
+    handleError(error) {
+        this.setState({ error });
+    }
+    render() {
+        if (this.state.error) {
+            return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>;
+        }
+        else {
+            return this.props.children;
+        }
+    }
+}
+export default ErrorBoundary;
+//# sourceMappingURL=error_boundary.js.map

package/build/components/error_boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error_boundary.js","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,MAAM,aAAc,SAAQ,KAAK,CAAC,SAAgC;IAChE,KAAK,GAAG;QACN,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;KACvB,CAAA;IAED,iBAAiB,CAAC,KAAU;QAC1B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,WAAW,CAAC,KAAU;QACpB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACjE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QAC5B,CAAC;IACH,CAAC;CACF;AAED,eAAe,aAAa,CAAA","sourcesContent":["import React, { PropsWithChildren } from 'react'\nimport { Text } from 'react-native'\n\nclass ErrorBoundary extends React.Component<PropsWithChildren<{}>> {\n  state = {\n    error: null,\n    unsubscriber: () => {},\n  }\n\n  componentDidCatch(error: any) {\n    this.handleError(error)\n  }\n\n  handleError(error: any) {\n    this.setState({ error })\n  }\n\n  render() {\n    if (this.state.error) {\n      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>\n    } else {\n      return this.props.children\n    }\n  }\n}\n\nexport default ErrorBoundary\n"]}

package/build/contexts/chat_context.d.ts

@@ -0,0 +1,9 @@
+import { OauthToken } from '../types';
+type ContextValue = {
+    token: OauthToken | null;
+    onTokenExpired: () => void;
+    theme: any;
+};
+export declare const ChatContext: import("react").Context<ContextValue>;
+export {};
+//# sourceMappingURL=chat_context.d.ts.map

package/build/contexts/chat_context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_context.d.ts","sourceRoot":"","sources":["../../src/contexts/chat_context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,KAAK,EAAE,GAAG,CAAA;CACX,CAAA;AAED,eAAO,MAAM,WAAW,uCAItB,CAAA"}

package/build/contexts/chat_context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+export const ChatContext = createContext({
+    theme: null,
+    token: null,
+    onTokenExpired: () => { },
+});
+//# sourceMappingURL=chat_context.js.map

package/build/contexts/chat_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_context.js","sourceRoot":"","sources":["../../src/contexts/chat_context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AASrC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAe;IACrD,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;CACzB,CAAC,CAAA","sourcesContent":["import { createContext } from 'react'\nimport { OauthToken } from '../types'\n\ntype ContextValue = {\n  token: OauthToken | null\n  onTokenExpired: () => void\n  theme: any\n}\n\nexport const ChatContext = createContext<ContextValue>({\n  theme: null,\n  token: null,\n  onTokenExpired: () => {},\n})\n"]}

package/build/hooks/use_create_chat_theme.d.ts

@@ -0,0 +1,10 @@
+import { ColorSchemeName } from 'react-native';
+import { DefaultTheme } from '../utils/theme';
+import { DeepPartial } from '../types';
+interface CreateChatThemeProps {
+    theme?: DeepPartial<DefaultTheme>;
+    colorScheme?: ColorSchemeName;
+}
+export declare const useCreateChatTheme: ({ theme: customTheme, colorScheme: appColorScheme, }: CreateChatThemeProps) => any;
+export {};
+//# sourceMappingURL=use_create_chat_theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use_create_chat_theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use_create_chat_theme.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,eAAe,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAgB,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAItC,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IACjC,WAAW,CAAC,EAAE,eAAe,CAAA;CAC9B;AAED,eAAO,MAAM,kBAAkB,yDAG5B,oBAAoB,QAetB,CAAA"}

package/build/hooks/use_create_chat_theme.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { defaultTheme } from '../utils/theme';
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map';
+import { merge } from 'lodash';
+export const useCreateChatTheme = ({ theme: customTheme = {}, colorScheme: appColorScheme, }) => {
+    const internalColorScheme = useColorScheme() || 'light';
+    const colorScheme = appColorScheme || internalColorScheme;
+    const memoizedTheme = useMemo(() => {
+        return {
+            ...merge({}, defaultTheme(colorScheme), customTheme),
+            colors: {
+                ...merge({}, defaultTheme(colorScheme).colors, customTheme?.colors),
+                ...tapestryAliasTokensColorMap[colorScheme],
+            },
+        };
+    }, [colorScheme, customTheme]);
+    return memoizedTheme;
+};
+//# sourceMappingURL=use_create_chat_theme.js.map

package/build/hooks/use_create_chat_theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_create_chat_theme.js","sourceRoot":"","sources":["../../src/hooks/use_create_chat_theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAmB,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAgB,MAAM,gBAAgB,CAAA;AAE3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,oDAAoD,CAAA;AAChG,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAO9B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,KAAK,EAAE,WAAW,GAAG,EAAE,EACvB,WAAW,EAAE,cAAc,GACN,EAAE,EAAE;IACzB,MAAM,mBAAmB,GAAG,cAAc,EAAE,IAAI,OAAO,CAAA;IACvD,MAAM,WAAW,GAAG,cAAc,IAAI,mBAAmB,CAAA;IAEzD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;YACpD,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC;gBACnE,GAAG,2BAA2B,CAAC,WAAW,CAAC;aAC5C;SACF,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAA;IAE9B,OAAO,aAAa,CAAA;AACtB,CAAC,CAAA","sourcesContent":["import { useMemo } from 'react'\nimport { useColorScheme, ColorSchemeName } from 'react-native'\nimport { defaultTheme, DefaultTheme } from '../utils/theme'\nimport { DeepPartial } from '../types'\nimport { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'\nimport { merge } from 'lodash'\n\ninterface CreateChatThemeProps {\n  theme?: DeepPartial<DefaultTheme>\n  colorScheme?: ColorSchemeName\n}\n\nexport const useCreateChatTheme = ({\n  theme: customTheme = {},\n  colorScheme: appColorScheme,\n}: CreateChatThemeProps) => {\n  const internalColorScheme = useColorScheme() || 'light'\n  const colorScheme = appColorScheme || internalColorScheme\n\n  const memoizedTheme = useMemo(() => {\n    return {\n      ...merge({}, defaultTheme(colorScheme), customTheme),\n      colors: {\n        ...merge({}, defaultTheme(colorScheme).colors, customTheme?.colors),\n        ...tapestryAliasTokensColorMap[colorScheme],\n      },\n    }\n  }, [colorScheme, customTheme])\n\n  return memoizedTheme\n}\n"]}

package/build/hooks/use_theme.d.ts

@@ -0,0 +1,3 @@
+import { ChatTheme } from '../utils/theme';
+export declare const useTheme: () => ChatTheme;
+//# sourceMappingURL=use_theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use_theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use_theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,eAAO,MAAM,QAAQ,QAAO,SAI3B,CAAA"}

package/build/hooks/use_theme.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { ChatContext } from '../contexts/chat_context';
+export const useTheme = () => {
+    const { theme } = useContext(ChatContext);
+    return theme;
+};
+//# sourceMappingURL=use_theme.js.map

package/build/hooks/use_theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_theme.js","sourceRoot":"","sources":["../../src/hooks/use_theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAGtD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAc,EAAE;IACtC,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEzC,OAAO,KAAK,CAAA;AACd,CAAC,CAAA","sourcesContent":["import { useContext } from 'react'\nimport { ChatContext } from '../contexts/chat_context'\nimport { ChatTheme } from '../utils/theme'\n\nexport const useTheme = (): ChatTheme => {\n  const { theme } = useContext(ChatContext)\n\n  return theme\n}\n"]}

package/build/index.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-export declare function PCOChat({ token, onTokenExpired, }: {
-    token?: OathToken;
-    onTokenExpired: () => void;
-}): React.JSX.Element;
+import { Conversations } from './components/conversations';
+import { ChatContext } from './contexts/chat_context';
+import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+import { OauthToken } from './types';
+import { TemporaryDefaultColorsType } from './utils/theme';
+export { ChatContext, Conversations, OauthToken as OathToken, TemporaryDefaultColorsType, useCreateChatTheme, };
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,cAAc,EAAE,MAAM,IAAI,CAAA;CAC3B,qBAiCA"}
+{"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,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,WAAW,EACX,aAAa,EACb,UAAU,IAAI,SAAS,EACvB,0BAA0B,EAC1B,kBAAkB,GACnB,CAAA"}

package/build/index.js

@@ -1,39 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { FlatList, StyleSheet, Text } from 'react-native';
-export function PCOChat({ token, onTokenExpired, }) {
-    const [conversations, setConversations] = useState(null);
-    const styles = useStyles();
-    useEffect(() => {
-        if (!token) {
-            return;
-        }
-        fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
-            headers: {
-                Authorization: `Bearer ${token.access_token}`,
-            },
-        })
-            .then(validateResponse)
-            .then(response => response.json())
-            .then(setConversations)
-            .catch(error => {
-            if (error.message === 'Token expired') {
-                onTokenExpired();
-            }
-        });
-    }, [onTokenExpired, token]);
-    return (<FlatList data={conversations?.data} ListEmptyComponent={<Text>No conversations</Text>} contentContainerStyle={styles.container} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => <Text>{item.attributes.title}</Text>}/>);
-}
-const useStyles = () => {
-    return StyleSheet.create({
-        container: { columnGap: 16 },
-        foo: { fontSize: 24 },
-    });
-};
-const validateResponse = (response) => {
-    const isExpired = response.status === 401;
-    if (isExpired) {
-        throw new Error('Token expired');
-    }
-    return response;
-};
+import { Conversations } from './components/conversations';
+import { ChatContext } from './contexts/chat_context';
+import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+export { ChatContext, Conversations, 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,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEzD,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,cAAc,GAIf;IACC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAM,IAAI,CAAC,CAAA;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,KAAK,CAAC,+DAA+D,EAAE;YACrE,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,KAAK,CAAC,YAAY,EAAE;aAC9C;SACF,CAAC;aACC,IAAI,CAAC,gBAAgB,CAAC;aACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;aACjC,IAAI,CAAC,gBAAgB,CAAC;aACtB,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;gBACtC,cAAc,EAAE,CAAA;YAClB,CAAC;QACH,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAA;IAE3B,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAClD,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,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,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,EAC/D,CACH,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;QAC5B,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IACzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { FlatList, StyleSheet, Text } from 'react-native'\n\nexport function PCOChat({\n  token,\n  onTokenExpired,\n}: {\n  token?: OathToken\n  onTokenExpired: () => void\n}) {\n  const [conversations, setConversations] = useState<any>(null)\n  const styles = useStyles()\n\n  useEffect(() => {\n    if (!token) {\n      return\n    }\n\n    fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {\n      headers: {\n        Authorization: `Bearer ${token.access_token}`,\n      },\n    })\n      .then(validateResponse)\n      .then(response => response.json())\n      .then(setConversations)\n      .catch(error => {\n        if (error.message === 'Token expired') {\n          onTokenExpired()\n        }\n      })\n  }, [onTokenExpired, token])\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      ListEmptyComponent={<Text>No conversations</Text>}\n      contentContainerStyle={styles.container}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}\n    />\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: { columnGap: 16 },\n    foo: { fontSize: 24 },\n  })\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\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,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAIlE,OAAO,EACL,WAAW,EACX,aAAa,EAGb,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks/use_create_chat_theme'\nimport { OauthToken } from './types'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  ChatContext,\n  Conversations,\n  OauthToken as OathToken,\n  TemporaryDefaultColorsType,\n  useCreateChatTheme,\n}\n"]}

package/build/utils/theme.d.ts

@@ -0,0 +1,34 @@
+import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native';
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map';
+export interface ChatTheme extends DefaultTheme {
+    colors: DefaultTheme['colors'] & (typeof tapestryAliasTokensColorMap.light | typeof tapestryAliasTokensColorMap.dark);
+}
+/** =============================================
+  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.
+
+  The default theme is intended to support two types of customizations:
+  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)
+  2. Any styles for a specific component. (Use only one level of nesting.)
+    ```
+      primaryButton: {
+        container: ViewStyle
+        text: TextStyle
+      }
+    ```
+============================================= */
+export interface DefaultTheme {
+    colors: ChatColors;
+    temporaryProductBadge: {
+        container: ViewStyle;
+        text: TextStyle;
+    };
+}
+export declare const defaultTheme: (colorScheme: ColorSchemeName) => DefaultTheme;
+export type TemporaryDefaultColorsType = Partial<ChatColors>;
+interface ChatColors {
+    name: string;
+    temporaryButtonBackgroundColor: string;
+    testColor: string;
+}
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/build/utils/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,EAAE,2BAA2B,EAAE,MAAM,oDAAoD,CAAA;AAEhG,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,2BAA2B,CAAC,KAAK,GAAG,OAAO,2BAA2B,CAAC,IAAI,CAAC,CAAA;CACvF;AAED;;;;;;;;;;;;gDAYgD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,qBAAqB,EAAE;QACrB,SAAS,EAAE,SAAS,CAAA;QACpB,IAAI,EAAE,SAAS,CAAA;KAChB,CAAA;CACF;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,YAgB3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,8BAA8B,EAAE,MAAM,CAAA;IACtC,SAAS,EAAE,MAAM,CAAA;CAClB"}

package/build/utils/theme.js

@@ -0,0 +1,33 @@
+import { tokens } from '../vendor/tapestry/tokens';
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map';
+export const defaultTheme = (colorScheme) => {
+    const scheme = colorScheme || 'light';
+    return {
+        colors: chatThemeColorMap[scheme],
+        temporaryProductBadge: {
+            container: {
+                paddingHorizontal: tokens.spacing1,
+                backgroundColor: tapestryAliasTokensColorMap[scheme].fillColorNeutral070,
+                borderWidth: tokens.borderSizeDefault,
+            },
+            text: {
+                textAlign: 'center',
+            },
+        },
+    };
+};
+const colorsChatLight = {
+    name: 'light',
+    temporaryButtonBackgroundColor: tokens.colorNeutral95,
+    testColor: 'red',
+};
+const colorsChatDark = {
+    name: 'dark',
+    temporaryButtonBackgroundColor: tokens.colorNeutral17,
+    testColor: 'blue',
+};
+const chatThemeColorMap = {
+    light: colorsChatLight,
+    dark: colorsChatDark,
+};
+//# sourceMappingURL=theme.js.map

package/build/utils/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,2BAA2B,EAAE,MAAM,oDAAoD,CAAA;AA6BhG,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAgB,EAAE;IACzE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,OAAO;QACL,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC;QACjC,qBAAqB,EAAE;YACrB,SAAS,EAAE;gBACT,iBAAiB,EAAE,MAAM,CAAC,QAAQ;gBAClC,eAAe,EAAE,2BAA2B,CAAC,MAAM,CAAC,CAAC,mBAAmB;gBACxE,WAAW,EAAE,MAAM,CAAC,iBAAiB;aACtC;YACD,IAAI,EAAE;gBACJ,SAAS,EAAE,QAAQ;aACpB;SACF;KACF,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,8BAA8B,EAAE,MAAM,CAAC,cAAc;IACrD,SAAS,EAAE,KAAK;CACjB,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,8BAA8B,EAAE,MAAM,CAAC,cAAc;IACrD,SAAS,EAAE,MAAM;CAClB,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof tapestryAliasTokensColorMap.light | typeof tapestryAliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  temporaryProductBadge: {\n    container: ViewStyle\n    text: TextStyle\n  }\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): DefaultTheme => {\n  const scheme = colorScheme || 'light'\n\n  return {\n    colors: chatThemeColorMap[scheme],\n    temporaryProductBadge: {\n      container: {\n        paddingHorizontal: tokens.spacing1,\n        backgroundColor: tapestryAliasTokensColorMap[scheme].fillColorNeutral070,\n        borderWidth: tokens.borderSizeDefault,\n      },\n      text: {\n        textAlign: 'center',\n      },\n    },\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  temporaryButtonBackgroundColor: string\n  testColor: string\n}\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  temporaryButtonBackgroundColor: tokens.colorNeutral95,\n  testColor: 'red',\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  temporaryButtonBackgroundColor: tokens.colorNeutral17,\n  testColor: 'blue',\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}

package/build/vendor/tapestry/tapestry_alias_tokens_color_map.d.ts

@@ -0,0 +1,41 @@
+export declare const tapestryAliasTokensColorMap: {
+    light: {
+        name: string;
+        iconColorDefaultPrimary: string;
+        iconColorDefaultSecondary: string;
+        iconColorDefaultDim: string;
+        iconColorDefaultDisabled: string;
+        iconColorDefaultInverted: string;
+        fillColorNeutral000: string;
+        fillColorNeutral010: string;
+        fillColorNeutral020: string;
+        fillColorNeutral030: string;
+        fillColorNeutral040: string;
+        fillColorNeutral050Base: string;
+        fillColorNeutral060: string;
+        fillColorNeutral070: string;
+        fillColorNeutral080: string;
+        fillColorNeutral090: string;
+        fillColorNeutral100Inverted: string;
+    };
+    dark: {
+        name: string;
+        iconColorDefaultPrimary: string;
+        iconColorDefaultSecondary: string;
+        iconColorDefaultDim: string;
+        iconColorDefaultDisabled: string;
+        iconColorDefaultInverted: string;
+        fillColorNeutral000: string;
+        fillColorNeutral010: string;
+        fillColorNeutral020: string;
+        fillColorNeutral030: string;
+        fillColorNeutral040: string;
+        fillColorNeutral050Base: string;
+        fillColorNeutral060: string;
+        fillColorNeutral070: string;
+        fillColorNeutral080: string;
+        fillColorNeutral090: string;
+        fillColorNeutral100Inverted: string;
+    };
+};
+//# sourceMappingURL=tapestry_alias_tokens_color_map.d.ts.map

package/build/vendor/tapestry/tapestry_alias_tokens_color_map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tapestry_alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tapestry_alias_tokens_color_map.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,2BAA2B;;cA1BhC,MAAM;iCACa,MAAM;mCACJ,MAAM;6BACZ,MAAM;kCACD,MAAM;kCACN,MAAM;6BAjDX,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;iCACF,MAAM;6BACV,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;qCACE,MAAM;;;cAkC7B,MAAM;iCACa,MAAM;mCACJ,MAAM;6BACZ,MAAM;kCACD,MAAM;kCACN,MAAM;6BAjDX,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;iCACF,MAAM;6BACV,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;qCACE,MAAM;;CA+DpC,CAAA"}

package/build/vendor/tapestry/tapestry_alias_tokens_color_map.js

@@ -0,0 +1,50 @@
+import { tokens } from './tokens';
+const neutralsLight = {
+    name: 'light',
+    fillColorNeutral000: tokens.colorNeutral12,
+    fillColorNeutral010: tokens.colorNeutral24,
+    fillColorNeutral020: tokens.colorNeutral45,
+    fillColorNeutral030: tokens.colorNeutral58,
+    fillColorNeutral040: tokens.colorNeutral81,
+    fillColorNeutral050Base: tokens.colorNeutral88,
+    fillColorNeutral060: tokens.colorNeutral93,
+    fillColorNeutral070: tokens.colorNeutral95,
+    fillColorNeutral080: tokens.colorNeutral97,
+    fillColorNeutral090: tokens.colorNeutral98,
+    fillColorNeutral100Inverted: tokens.colorNeutral100White,
+};
+const neutralsDark = {
+    name: 'dark',
+    fillColorNeutral000: tokens.colorNeutral98,
+    fillColorNeutral010: tokens.colorNeutral88,
+    fillColorNeutral020: tokens.colorNeutral68,
+    fillColorNeutral030: tokens.colorNeutral50,
+    fillColorNeutral040: tokens.colorNeutral32,
+    fillColorNeutral050Base: tokens.colorNeutral24,
+    fillColorNeutral060: tokens.colorNeutral19,
+    fillColorNeutral070: tokens.colorNeutral17,
+    fillColorNeutral080: tokens.colorNeutral15,
+    fillColorNeutral090: tokens.colorNeutral12,
+    fillColorNeutral100Inverted: tokens.colorNeutral7,
+};
+const semanticAliasesLight = {
+    name: 'light',
+    iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,
+    iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,
+    iconColorDefaultDim: neutralsLight.fillColorNeutral030,
+    iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,
+    iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,
+};
+const semanticAliasesDark = {
+    name: 'dark',
+    iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,
+    iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,
+    iconColorDefaultDim: neutralsDark.fillColorNeutral030,
+    iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,
+    iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,
+};
+export const tapestryAliasTokensColorMap = {
+    light: { ...neutralsLight, ...semanticAliasesLight },
+    dark: { ...neutralsDark, ...semanticAliasesDark },
+};
+//# sourceMappingURL=tapestry_alias_tokens_color_map.js.map

package/build/vendor/tapestry/tapestry_alias_tokens_color_map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tapestry_alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tapestry_alias_tokens_color_map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAqBjC,MAAM,aAAa,GAAkB;IACnC,IAAI,EAAE,OAAO;IACb,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,uBAAuB,EAAE,MAAM,CAAC,cAAc;IAC9C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,2BAA2B,EAAE,MAAM,CAAC,oBAAoB;CACzD,CAAA;AAED,MAAM,YAAY,GAAkB;IAClC,IAAI,EAAE,MAAM;IACZ,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,uBAAuB,EAAE,MAAM,CAAC,cAAc;IAC9C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,2BAA2B,EAAE,MAAM,CAAC,aAAa;CAClD,CAAA;AAWD,MAAM,oBAAoB,GAA0B;IAClD,IAAI,EAAE,OAAO;IACb,uBAAuB,EAAE,aAAa,CAAC,mBAAmB;IAC1D,yBAAyB,EAAE,aAAa,CAAC,mBAAmB;IAC5D,mBAAmB,EAAE,aAAa,CAAC,mBAAmB;IACtD,wBAAwB,EAAE,aAAa,CAAC,mBAAmB;IAC3D,wBAAwB,EAAE,aAAa,CAAC,2BAA2B;CACpE,CAAA;AAED,MAAM,mBAAmB,GAA0B;IACjD,IAAI,EAAE,MAAM;IACZ,uBAAuB,EAAE,YAAY,CAAC,mBAAmB;IACzD,yBAAyB,EAAE,YAAY,CAAC,mBAAmB;IAC3D,mBAAmB,EAAE,YAAY,CAAC,mBAAmB;IACrD,wBAAwB,EAAE,YAAY,CAAC,mBAAmB;IAC1D,wBAAwB,EAAE,YAAY,CAAC,2BAA2B;CACnE,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK,EAAE,EAAE,GAAG,aAAa,EAAE,GAAG,oBAAoB,EAAE;IACpD,IAAI,EAAE,EAAE,GAAG,YAAY,EAAE,GAAG,mBAAmB,EAAE;CAClD,CAAA","sourcesContent":["import { tokens } from './tokens'\n\n// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface NeutralColors {\n  name: string\n  fillColorNeutral000: string\n  fillColorNeutral010: string\n  fillColorNeutral020: string\n  fillColorNeutral030: string\n  fillColorNeutral040: string\n  fillColorNeutral050Base: string\n  fillColorNeutral060: string\n  fillColorNeutral070: string\n  fillColorNeutral080: string\n  fillColorNeutral090: string\n  fillColorNeutral100Inverted: string\n}\n\nconst neutralsLight: NeutralColors = {\n  name: 'light',\n  fillColorNeutral000: tokens.colorNeutral12,\n  fillColorNeutral010: tokens.colorNeutral24,\n  fillColorNeutral020: tokens.colorNeutral45,\n  fillColorNeutral030: tokens.colorNeutral58,\n  fillColorNeutral040: tokens.colorNeutral81,\n  fillColorNeutral050Base: tokens.colorNeutral88,\n  fillColorNeutral060: tokens.colorNeutral93,\n  fillColorNeutral070: tokens.colorNeutral95,\n  fillColorNeutral080: tokens.colorNeutral97,\n  fillColorNeutral090: tokens.colorNeutral98,\n  fillColorNeutral100Inverted: tokens.colorNeutral100White,\n}\n\nconst neutralsDark: NeutralColors = {\n  name: 'dark',\n  fillColorNeutral000: tokens.colorNeutral98,\n  fillColorNeutral010: tokens.colorNeutral88,\n  fillColorNeutral020: tokens.colorNeutral68,\n  fillColorNeutral030: tokens.colorNeutral50,\n  fillColorNeutral040: tokens.colorNeutral32,\n  fillColorNeutral050Base: tokens.colorNeutral24,\n  fillColorNeutral060: tokens.colorNeutral19,\n  fillColorNeutral070: tokens.colorNeutral17,\n  fillColorNeutral080: tokens.colorNeutral15,\n  fillColorNeutral090: tokens.colorNeutral12,\n  fillColorNeutral100Inverted: tokens.colorNeutral7,\n}\n\ninterface SemanticAliasesColors {\n  name: string\n  iconColorDefaultPrimary: string\n  iconColorDefaultSecondary: string\n  iconColorDefaultDim: string\n  iconColorDefaultDisabled: string\n  iconColorDefaultInverted: string\n}\n\nconst semanticAliasesLight: SemanticAliasesColors = {\n  name: 'light',\n  iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n  iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n  iconColorDefaultDim: neutralsLight.fillColorNeutral030,\n  iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n  iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,\n}\n\nconst semanticAliasesDark: SemanticAliasesColors = {\n  name: 'dark',\n  iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n  iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n  iconColorDefaultDim: neutralsDark.fillColorNeutral030,\n  iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n  iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,\n}\n\nexport const tapestryAliasTokensColorMap = {\n  light: { ...neutralsLight, ...semanticAliasesLight },\n  dark: { ...neutralsDark, ...semanticAliasesDark },\n}\n"]}

package/build/vendor/tapestry/tokens.d.ts

@@ -0,0 +1,38 @@
+export declare const tokens: {
+    borderRadiusDefault: number;
+    spacingFourth: number;
+    spacingHalf: number;
+    spacing1: number;
+    spacing2: number;
+    spacing3: number;
+    spacing4: number;
+    spacing5: number;
+    spacing6: number;
+    spacing7: number;
+    borderRadiusSm: number;
+    borderRadiusMd: number;
+    borderRadiusLg: number;
+    borderRadiusXl: number;
+    borderRadiusRound: number;
+    borderSizeDefault: number;
+    borderSizeThick: number;
+    colorNeutral7: string;
+    colorNeutral12: string;
+    colorNeutral15: string;
+    colorNeutral17: string;
+    colorNeutral19: string;
+    colorNeutral24: string;
+    colorNeutral32: string;
+    colorNeutral45: string;
+    colorNeutral50: string;
+    colorNeutral58: string;
+    colorNeutral68: string;
+    colorNeutral81: string;
+    colorNeutral88: string;
+    colorNeutral93: string;
+    colorNeutral95: string;
+    colorNeutral97: string;
+    colorNeutral98: string;
+    colorNeutral100White: string;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/build/vendor/tapestry/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AA4FA,eAAO,MAAM,MAAM;yBAPI,MAAM;mBAtCZ,MAAM;iBACR,MAAM;cACT,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;oBACA,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;uBACH,MAAM;uBACN,MAAM;qBACR,MAAM;mBAzDR,MAAM;oBACL,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;0BACA,MAAM;CA0E7B,CAAA"}

package/build/vendor/tapestry/tokens.js

@@ -0,0 +1,50 @@
+// Copied from `@planningcenter/tapestry` package.
+// Defining these tokens locally is a temporary solution until the package supports mobile.
+// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs
+const colorPrimitives = {
+    colorNeutral7: 'hsl(0, 0%, 7%)',
+    colorNeutral12: 'hsl(0, 0%, 12%)',
+    colorNeutral15: 'hsl(0, 0%, 15%)',
+    colorNeutral17: 'hsl(0, 0%, 17%)',
+    colorNeutral19: 'hsl(0, 0%, 19%)',
+    colorNeutral24: 'hsl(0, 0%, 24%)',
+    colorNeutral32: 'hsl(0, 0%, 32%)',
+    colorNeutral45: 'hsl(0, 0%, 45%)',
+    colorNeutral50: 'hsl(0, 0%, 50%)',
+    colorNeutral58: 'hsl(0, 0%, 58%)',
+    colorNeutral68: 'hsl(0, 0%, 68%)',
+    colorNeutral81: 'hsl(0, 0%, 81%)',
+    colorNeutral88: 'hsl(0, 0%, 88%)',
+    colorNeutral93: 'hsl(0, 0%, 93%)',
+    colorNeutral95: 'hsl(0, 0%, 95%)',
+    colorNeutral97: 'hsl(0, 0%, 97%)',
+    colorNeutral98: 'hsl(0, 0%, 98%)',
+    colorNeutral100White: 'hsl(0, 0%, 100%)',
+};
+const numericPrimtives = {
+    spacingFourth: 2,
+    spacingHalf: 4,
+    spacing1: 8,
+    spacing2: 16,
+    spacing3: 24,
+    spacing4: 32,
+    spacing5: 40,
+    spacing6: 48,
+    spacing7: 56,
+    borderRadiusSm: 2,
+    borderRadiusMd: 4,
+    borderRadiusLg: 8,
+    borderRadiusXl: 16,
+    borderRadiusRound: 56,
+    borderSizeDefault: 1,
+    borderSizeThick: 2,
+};
+const numericAliases = {
+    borderRadiusDefault: numericPrimtives.borderRadiusMd,
+};
+export const tokens = {
+    ...colorPrimitives,
+    ...numericPrimtives,
+    ...numericAliases,
+};
+//# sourceMappingURL=tokens.js.map

package/build/vendor/tapestry/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,2FAA2F;AAC3F,0GAA0G;AAuB1G,MAAM,eAAe,GAAmB;IACtC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,oBAAoB,EAAE,kBAAkB;CACzC,CAAA;AAqBD,MAAM,gBAAgB,GAAsB;IAC1C,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,EAAE;IAClB,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;CACnB,CAAA;AAMD,MAAM,cAAc,GAAmB;IACrC,mBAAmB,EAAE,gBAAgB,CAAC,cAAc;CACrD,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,GAAG,eAAe;IAClB,GAAG,gBAAgB;IACnB,GAAG,cAAc;CAClB,CAAA","sourcesContent":["// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface ColorPrimitves {\n  colorNeutral7: string\n  colorNeutral12: string\n  colorNeutral15: string\n  colorNeutral17: string\n  colorNeutral19: string\n  colorNeutral24: string\n  colorNeutral32: string\n  colorNeutral45: string\n  colorNeutral50: string\n  colorNeutral58: string\n  colorNeutral68: string\n  colorNeutral81: string\n  colorNeutral88: string\n  colorNeutral93: string\n  colorNeutral95: string\n  colorNeutral97: string\n  colorNeutral98: string\n  colorNeutral100White: string\n}\n\nconst colorPrimitives: ColorPrimitves = {\n  colorNeutral7: 'hsl(0, 0%, 7%)',\n  colorNeutral12: 'hsl(0, 0%, 12%)',\n  colorNeutral15: 'hsl(0, 0%, 15%)',\n  colorNeutral17: 'hsl(0, 0%, 17%)',\n  colorNeutral19: 'hsl(0, 0%, 19%)',\n  colorNeutral24: 'hsl(0, 0%, 24%)',\n  colorNeutral32: 'hsl(0, 0%, 32%)',\n  colorNeutral45: 'hsl(0, 0%, 45%)',\n  colorNeutral50: 'hsl(0, 0%, 50%)',\n  colorNeutral58: 'hsl(0, 0%, 58%)',\n  colorNeutral68: 'hsl(0, 0%, 68%)',\n  colorNeutral81: 'hsl(0, 0%, 81%)',\n  colorNeutral88: 'hsl(0, 0%, 88%)',\n  colorNeutral93: 'hsl(0, 0%, 93%)',\n  colorNeutral95: 'hsl(0, 0%, 95%)',\n  colorNeutral97: 'hsl(0, 0%, 97%)',\n  colorNeutral98: 'hsl(0, 0%, 98%)',\n  colorNeutral100White: 'hsl(0, 0%, 100%)',\n}\n\ninterface NumericPrimitives {\n  spacingFourth: number\n  spacingHalf: number\n  spacing1: number\n  spacing2: number\n  spacing3: number\n  spacing4: number\n  spacing5: number\n  spacing6: number\n  spacing7: number\n  borderRadiusSm: number\n  borderRadiusMd: number\n  borderRadiusLg: number\n  borderRadiusXl: number\n  borderRadiusRound: number\n  borderSizeDefault: number\n  borderSizeThick: number\n}\n\nconst numericPrimtives: NumericPrimitives = {\n  spacingFourth: 2,\n  spacingHalf: 4,\n  spacing1: 8,\n  spacing2: 16,\n  spacing3: 24,\n  spacing4: 32,\n  spacing5: 40,\n  spacing6: 48,\n  spacing7: 56,\n  borderRadiusSm: 2,\n  borderRadiusMd: 4,\n  borderRadiusLg: 8,\n  borderRadiusXl: 16,\n  borderRadiusRound: 56,\n  borderSizeDefault: 1,\n  borderSizeThick: 2,\n}\n\ninterface NumericAliases {\n  borderRadiusDefault: number\n}\n\nconst numericAliases: NumericAliases = {\n  borderRadiusDefault: numericPrimtives.borderRadiusMd,\n}\n\nexport const tokens = {\n  ...colorPrimitives,\n  ...numericPrimtives,\n  ...numericAliases,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.3.0-rc.3",
+  "version": "1.3.0-rc.5",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -13,15 +13,19 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "lodash": "*",
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.77.0",
+    "@tanstack/react-query": "^5.66.0",
     "@typescript-eslint/parser": "^8.23.0",
     "expo-module-scripts": "^3.4.0",
+    "lodash": "^4.17.21",
     "prettier": "^3.4.2",
     "react-native": "0.74.5"
   },
-  "gitHead": "3cca0ed839da6dede409db3bc0accf75a0e8b6d9"
+  "gitHead": "b0ba2e1902e5749a90ccf1aaa0a925d80b712285"
 }

package/src/components/conversations.tsx

@@ -0,0 +1,75 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import React, { Suspense, useContext } from 'react'
+import { FlatList, StyleSheet, Text } from 'react-native'
+import { ChatContext } from '../contexts/chat_context'
+import { ConversationRecord } from '../types'
+import ErrorBoundary from './error_boundary'
+import { useTheme } from '../hooks/use_theme'
+
+type ConversationsResponse = {
+  data: ConversationRecord[]
+  links: Record<string, string>
+  meta: Record<string, string>
+}
+
+export function Conversations() {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<></>}>
+        <Loaded />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+
+const Loaded = () => {
+  const { token, onTokenExpired } = useContext(ChatContext)
+  const styles = useStyles()
+  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({
+    queryKey: ['conversations', token],
+    queryFn: () =>
+      // TODO: replace with an api client
+      fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
+        headers: {
+          Authorization: `Bearer ${token?.access_token}`,
+        },
+      })
+        .then(validateResponse)
+        .then(response => response.json())
+        .catch(error => {
+          if (error.message === 'Token expired') {
+            onTokenExpired()
+          }
+          return null
+        }),
+  })
+
+  return (
+    <FlatList
+      data={conversations?.data}
+      ListEmptyComponent={<Text>No conversations</Text>}
+      contentContainerStyle={styles.container}
+      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
+      renderItem={({ item }) => <Text style={styles.listItem}>{item.attributes.title}</Text>}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+    foo: { fontSize: 24, color: colors.testColor },
+    listItem: { color: colors.fillColorNeutral020 },
+  })
+}
+
+const validateResponse = (response: Response) => {
+  const isExpired = response.status === 401
+  if (isExpired) {
+    throw new Error('Token expired')
+  }
+
+  return response
+}

package/src/components/error_boundary.tsx

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react'
+import { Text } from 'react-native'
+
+class ErrorBoundary extends React.Component<PropsWithChildren<{}>> {
+  state = {
+    error: null,
+    unsubscriber: () => {},
+  }
+
+  componentDidCatch(error: any) {
+    this.handleError(error)
+  }
+
+  handleError(error: any) {
+    this.setState({ error })
+  }
+
+  render() {
+    if (this.state.error) {
+      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>
+    } else {
+      return this.props.children
+    }
+  }
+}
+
+export default ErrorBoundary

package/src/contexts/chat_context.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react'
+import { OauthToken } from '../types'
+
+type ContextValue = {
+  token: OauthToken | null
+  onTokenExpired: () => void
+  theme: any
+}
+
+export const ChatContext = createContext<ContextValue>({
+  theme: null,
+  token: null,
+  onTokenExpired: () => {},
+})

package/src/hooks/use_create_chat_theme.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useColorScheme, ColorSchemeName } from 'react-native'
+import { defaultTheme, DefaultTheme } from '../utils/theme'
+import { DeepPartial } from '../types'
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'
+import { merge } from 'lodash'
+
+interface CreateChatThemeProps {
+  theme?: DeepPartial<DefaultTheme>
+  colorScheme?: ColorSchemeName
+}
+
+export const useCreateChatTheme = ({
+  theme: customTheme = {},
+  colorScheme: appColorScheme,
+}: CreateChatThemeProps) => {
+  const internalColorScheme = useColorScheme() || 'light'
+  const colorScheme = appColorScheme || internalColorScheme
+
+  const memoizedTheme = useMemo(() => {
+    return {
+      ...merge({}, defaultTheme(colorScheme), customTheme),
+      colors: {
+        ...merge({}, defaultTheme(colorScheme).colors, customTheme?.colors),
+        ...tapestryAliasTokensColorMap[colorScheme],
+      },
+    }
+  }, [colorScheme, customTheme])
+
+  return memoizedTheme
+}

package/src/hooks/use_theme.tsx

@@ -0,0 +1,9 @@
+import { useContext } from 'react'
+import { ChatContext } from '../contexts/chat_context'
+import { ChatTheme } from '../utils/theme'
+
+export const useTheme = (): ChatTheme => {
+  const { theme } = useContext(ChatContext)
+
+  return theme
+}

package/src/index.tsx

@@ -1,59 +1,13 @@
-import React, { useEffect, useState } from 'react'
-import { FlatList, StyleSheet, Text } from 'react-native'
-
-export function PCOChat({
-  token,
-  onTokenExpired,
-}: {
-  token?: OathToken
-  onTokenExpired: () => void
-}) {
-  const [conversations, setConversations] = useState<any>(null)
-  const styles = useStyles()
-
-  useEffect(() => {
-    if (!token) {
-      return
-    }
-
-    fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
-      headers: {
-        Authorization: `Bearer ${token.access_token}`,
-      },
-    })
-      .then(validateResponse)
-      .then(response => response.json())
-      .then(setConversations)
-      .catch(error => {
-        if (error.message === 'Token expired') {
-          onTokenExpired()
-        }
-      })
-  }, [onTokenExpired, token])
-
-  return (
-    <FlatList
-      data={conversations?.data}
-      ListEmptyComponent={<Text>No conversations</Text>}
-      contentContainerStyle={styles.container}
-      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
-      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}
-    />
-  )
-}
-
-const useStyles = () => {
-  return StyleSheet.create({
-    container: { columnGap: 16 },
-    foo: { fontSize: 24 },
-  })
-}
-
-const validateResponse = (response: Response) => {
-  const isExpired = response.status === 401
-  if (isExpired) {
-    throw new Error('Token expired')
-  }
-
-  return response
+import { Conversations } from './components/conversations'
+import { ChatContext } from './contexts/chat_context'
+import { useCreateChatTheme } from './hooks/use_create_chat_theme'
+import { OauthToken } from './types'
+import { TemporaryDefaultColorsType } from './utils/theme'
+
+export {
+  ChatContext,
+  Conversations,
+  OauthToken as OathToken,
+  TemporaryDefaultColorsType,
+  useCreateChatTheme,
 }

package/src/types.d.ts

@@ -0,0 +1,25 @@
+export type ConversationRecord = {
+  id: string
+  type: 'Conversation'
+  attributes: {
+    title: string
+    created_at: string
+    updated_at: string
+  }
+}
+
+export type OauthToken = {
+  subdomain: any
+  type: any
+  access_token: any
+  created_at: number
+  expires_in: any
+  person: any
+  refresh_token: any
+}
+
+// Sets all the properties of of a deeply nested object to optional.
+// Example: `DeepPartial<ChatTheme>`
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>
+}

package/src/utils/theme.ts

@@ -0,0 +1,73 @@
+import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native'
+import { tokens } from '../vendor/tapestry/tokens'
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'
+
+export interface ChatTheme extends DefaultTheme {
+  colors: DefaultTheme['colors'] &
+    (typeof tapestryAliasTokensColorMap.light | typeof tapestryAliasTokensColorMap.dark)
+}
+
+/** =============================================
+  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.
+
+  The default theme is intended to support two types of customizations:
+  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)
+  2. Any styles for a specific component. (Use only one level of nesting.)
+    ```
+      primaryButton: {
+        container: ViewStyle
+        text: TextStyle
+      }
+    ```
+============================================= */
+
+export interface DefaultTheme {
+  colors: ChatColors
+  temporaryProductBadge: {
+    container: ViewStyle
+    text: TextStyle
+  }
+}
+
+export const defaultTheme = (colorScheme: ColorSchemeName): DefaultTheme => {
+  const scheme = colorScheme || 'light'
+
+  return {
+    colors: chatThemeColorMap[scheme],
+    temporaryProductBadge: {
+      container: {
+        paddingHorizontal: tokens.spacing1,
+        backgroundColor: tapestryAliasTokensColorMap[scheme].fillColorNeutral070,
+        borderWidth: tokens.borderSizeDefault,
+      },
+      text: {
+        textAlign: 'center',
+      },
+    },
+  }
+}
+
+export type TemporaryDefaultColorsType = Partial<ChatColors>
+
+interface ChatColors {
+  name: string
+  temporaryButtonBackgroundColor: string
+  testColor: string
+}
+
+const colorsChatLight: ChatColors = {
+  name: 'light',
+  temporaryButtonBackgroundColor: tokens.colorNeutral95,
+  testColor: 'red',
+}
+
+const colorsChatDark: ChatColors = {
+  name: 'dark',
+  temporaryButtonBackgroundColor: tokens.colorNeutral17,
+  testColor: 'blue',
+}
+
+const chatThemeColorMap = {
+  light: colorsChatLight,
+  dark: colorsChatDark,
+}

package/src/vendor/tapestry/tapestry_alias_tokens_color_map.ts

@@ -0,0 +1,82 @@
+import { tokens } from './tokens'
+
+// Copied from `@planningcenter/tapestry` package.
+// Defining these tokens locally is a temporary solution until the package supports mobile.
+// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs
+
+interface NeutralColors {
+  name: string
+  fillColorNeutral000: string
+  fillColorNeutral010: string
+  fillColorNeutral020: string
+  fillColorNeutral030: string
+  fillColorNeutral040: string
+  fillColorNeutral050Base: string
+  fillColorNeutral060: string
+  fillColorNeutral070: string
+  fillColorNeutral080: string
+  fillColorNeutral090: string
+  fillColorNeutral100Inverted: string
+}
+
+const neutralsLight: NeutralColors = {
+  name: 'light',
+  fillColorNeutral000: tokens.colorNeutral12,
+  fillColorNeutral010: tokens.colorNeutral24,
+  fillColorNeutral020: tokens.colorNeutral45,
+  fillColorNeutral030: tokens.colorNeutral58,
+  fillColorNeutral040: tokens.colorNeutral81,
+  fillColorNeutral050Base: tokens.colorNeutral88,
+  fillColorNeutral060: tokens.colorNeutral93,
+  fillColorNeutral070: tokens.colorNeutral95,
+  fillColorNeutral080: tokens.colorNeutral97,
+  fillColorNeutral090: tokens.colorNeutral98,
+  fillColorNeutral100Inverted: tokens.colorNeutral100White,
+}
+
+const neutralsDark: NeutralColors = {
+  name: 'dark',
+  fillColorNeutral000: tokens.colorNeutral98,
+  fillColorNeutral010: tokens.colorNeutral88,
+  fillColorNeutral020: tokens.colorNeutral68,
+  fillColorNeutral030: tokens.colorNeutral50,
+  fillColorNeutral040: tokens.colorNeutral32,
+  fillColorNeutral050Base: tokens.colorNeutral24,
+  fillColorNeutral060: tokens.colorNeutral19,
+  fillColorNeutral070: tokens.colorNeutral17,
+  fillColorNeutral080: tokens.colorNeutral15,
+  fillColorNeutral090: tokens.colorNeutral12,
+  fillColorNeutral100Inverted: tokens.colorNeutral7,
+}
+
+interface SemanticAliasesColors {
+  name: string
+  iconColorDefaultPrimary: string
+  iconColorDefaultSecondary: string
+  iconColorDefaultDim: string
+  iconColorDefaultDisabled: string
+  iconColorDefaultInverted: string
+}
+
+const semanticAliasesLight: SemanticAliasesColors = {
+  name: 'light',
+  iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,
+  iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,
+  iconColorDefaultDim: neutralsLight.fillColorNeutral030,
+  iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,
+  iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,
+}
+
+const semanticAliasesDark: SemanticAliasesColors = {
+  name: 'dark',
+  iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,
+  iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,
+  iconColorDefaultDim: neutralsDark.fillColorNeutral030,
+  iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,
+  iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,
+}
+
+export const tapestryAliasTokensColorMap = {
+  light: { ...neutralsLight, ...semanticAliasesLight },
+  dark: { ...neutralsDark, ...semanticAliasesDark },
+}

package/src/vendor/tapestry/tokens.ts

@@ -0,0 +1,97 @@
+// Copied from `@planningcenter/tapestry` package.
+// Defining these tokens locally is a temporary solution until the package supports mobile.
+// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs
+
+interface ColorPrimitves {
+  colorNeutral7: string
+  colorNeutral12: string
+  colorNeutral15: string
+  colorNeutral17: string
+  colorNeutral19: string
+  colorNeutral24: string
+  colorNeutral32: string
+  colorNeutral45: string
+  colorNeutral50: string
+  colorNeutral58: string
+  colorNeutral68: string
+  colorNeutral81: string
+  colorNeutral88: string
+  colorNeutral93: string
+  colorNeutral95: string
+  colorNeutral97: string
+  colorNeutral98: string
+  colorNeutral100White: string
+}
+
+const colorPrimitives: ColorPrimitves = {
+  colorNeutral7: 'hsl(0, 0%, 7%)',
+  colorNeutral12: 'hsl(0, 0%, 12%)',
+  colorNeutral15: 'hsl(0, 0%, 15%)',
+  colorNeutral17: 'hsl(0, 0%, 17%)',
+  colorNeutral19: 'hsl(0, 0%, 19%)',
+  colorNeutral24: 'hsl(0, 0%, 24%)',
+  colorNeutral32: 'hsl(0, 0%, 32%)',
+  colorNeutral45: 'hsl(0, 0%, 45%)',
+  colorNeutral50: 'hsl(0, 0%, 50%)',
+  colorNeutral58: 'hsl(0, 0%, 58%)',
+  colorNeutral68: 'hsl(0, 0%, 68%)',
+  colorNeutral81: 'hsl(0, 0%, 81%)',
+  colorNeutral88: 'hsl(0, 0%, 88%)',
+  colorNeutral93: 'hsl(0, 0%, 93%)',
+  colorNeutral95: 'hsl(0, 0%, 95%)',
+  colorNeutral97: 'hsl(0, 0%, 97%)',
+  colorNeutral98: 'hsl(0, 0%, 98%)',
+  colorNeutral100White: 'hsl(0, 0%, 100%)',
+}
+
+interface NumericPrimitives {
+  spacingFourth: number
+  spacingHalf: number
+  spacing1: number
+  spacing2: number
+  spacing3: number
+  spacing4: number
+  spacing5: number
+  spacing6: number
+  spacing7: number
+  borderRadiusSm: number
+  borderRadiusMd: number
+  borderRadiusLg: number
+  borderRadiusXl: number
+  borderRadiusRound: number
+  borderSizeDefault: number
+  borderSizeThick: number
+}
+
+const numericPrimtives: NumericPrimitives = {
+  spacingFourth: 2,
+  spacingHalf: 4,
+  spacing1: 8,
+  spacing2: 16,
+  spacing3: 24,
+  spacing4: 32,
+  spacing5: 40,
+  spacing6: 48,
+  spacing7: 56,
+  borderRadiusSm: 2,
+  borderRadiusMd: 4,
+  borderRadiusLg: 8,
+  borderRadiusXl: 16,
+  borderRadiusRound: 56,
+  borderSizeDefault: 1,
+  borderSizeThick: 2,
+}
+
+interface NumericAliases {
+  borderRadiusDefault: number
+}
+
+const numericAliases: NumericAliases = {
+  borderRadiusDefault: numericPrimtives.borderRadiusMd,
+}
+
+export const tokens = {
+  ...colorPrimitives,
+  ...numericPrimtives,
+  ...numericAliases,
+}