@planningcenter/chat-react-native 1.3.0-rc.4 → 1.3.0-rc.6

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.4",
+  "version": "1.3.0-rc.6",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -14,6 +14,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
+    "lodash": "*",
     "react": "*",
     "react-native": "*"
   },
@@ -22,8 +23,9 @@
     "@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": "75d05da3bdb2dc2509914389d319df9b2868042f"
+  "gitHead": "2d5340552b2daf0cf8c973071cd3e851fff6c520"
 }

package/src/components/conversations.tsx

@@ -1,7 +1,8 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
 import React, { Suspense, useContext } from 'react'
 import { FlatList, StyleSheet, Text } from 'react-native'
-import { ChatContext } from '../context/chat_context'
+import { ChatContext } from '../contexts/chat_context'
+import { useTheme } from '../hooks/use_theme'
 import { ConversationRecord } from '../types'
 import ErrorBoundary from './error_boundary'
 
@@ -12,60 +13,46 @@ type ConversationsResponse = {
 }
 
 export function Conversations() {
+  const { token } = useContext(ChatContext)
+
+  if (!token) return null
+
   return (
-    <ErrorBoundary>
-      <Suspense fallback={<></>}>
-        <Loaded />
-      </Suspense>
-    </ErrorBoundary>
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary onReset={reset}>
+          <Suspense fallback={<Text>loading...</Text>}>
+            <Loaded />
+          </Suspense>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
   )
 }
 
 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
-        }),
+    queryKey: ['/chat/v2/me/conversations'],
   })
 
   return (
     <FlatList
       data={conversations?.data}
-      ListEmptyComponent={<Text>No conversations</Text>}
       contentContainerStyle={styles.container}
+      ListEmptyComponent={<Text>No conversations found</Text>}
       ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
-      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}
+      renderItem={({ item }) => <Text style={styles.listItem}>{item.attributes.title}</Text>}
     />
   )
 }
 
 const useStyles = () => {
+  const { colors } = useTheme()
+
   return StyleSheet.create({
-    container: { columnGap: 16 },
-    foo: { fontSize: 24 },
+    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

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react'
 import { Text } from 'react-native'
 
-class ErrorBoundary extends React.Component<PropsWithChildren<{}>> {
+class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
   state = {
     error: null,
     unsubscriber: () => {},

package/src/contexts/api_provider.tsx

@@ -0,0 +1,69 @@
+import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
+import React from 'react'
+import { ViewProps } from 'react-native'
+import { OAuthToken } from '../types'
+
+type ENV = 'production' | 'staging' | 'development'
+let environment: ENV = 'production'
+let oauthToken: OAuthToken | undefined
+let handleTokenExpired: () => void
+
+const hostMap = {
+  production: 'https://api.planningcenteronline.com',
+  staging: 'https://api-staging.planningcenteronline.com',
+  development: 'https://api.pco.test',
+}
+
+const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
+  if (!oauthToken) {
+    console.error('No token present')
+    throw new Error('No token present')
+  }
+
+  const url = `${hostMap[environment]}${queryKey[0]}`
+
+  return fetch(url, {
+    headers: {
+      Authorization: `Bearer ${oauthToken?.access_token}`,
+    },
+  })
+    .then(validateResponse)
+    .then(response => response.json())
+    .catch(error => {
+      if (error.message === 'Token expired') {
+        handleTokenExpired()
+      }
+      return null
+    })
+}
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: defaultQueryFn,
+    },
+  },
+})
+
+export function ApiProvider({
+  children,
+  env = 'production',
+  token,
+  onTokenExpired,
+}: ViewProps & { env?: ENV; token?: OAuthToken; onTokenExpired: () => void }) {
+  oauthToken = token
+  handleTokenExpired = onTokenExpired
+  environment = env
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}
+
+const validateResponse = (response: Response) => {
+  const isExpired = response.status === 401
+
+  if (isExpired) {
+    throw new Error('Token expired')
+  }
+
+  return response
+}

package/src/contexts/chat_context.tsx

@@ -0,0 +1,29 @@
+import React, { createContext } from 'react'
+import { OAuthToken } from '../types'
+import { ApiProvider } from './api_provider'
+
+type ContextValue = {
+  token?: OAuthToken
+  onTokenExpired: () => void
+  theme: any
+  env?: 'production' | 'staging' | 'development'
+}
+
+export const ChatContext = createContext<ContextValue>({
+  theme: undefined,
+  token: undefined,
+  env: undefined,
+  onTokenExpired: () => {},
+})
+
+export function ChatProvider({ children, value }: { children: any; value: ContextValue }) {
+  if (!Object.keys(value.token || {}).length) return null
+
+  return (
+    <ChatContext.Provider value={value}>
+      <ApiProvider env={value.env} token={value.token} onTokenExpired={value.onTokenExpired}>
+        {children}
+      </ApiProvider>
+    </ChatContext.Provider>
+  )
+}

package/src/hooks/use_async_storage.ts

@@ -0,0 +1,41 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useCallback } from 'react'
+
+const cacheKeyGenerator = (key: string) => [`AsyncStorageResource:${key}`]
+
+type SetValue<TCacheData> = (_itemValue?: TCacheData | null) => void
+
+export function useAsyncStorage<TCacheData>(
+  key: string,
+  initialValue: TCacheData
+): [TCacheData, SetValue<TCacheData>] {
+  const cacheKey = cacheKeyGenerator(key)
+  const { data: value, refetch } = useSuspenseQuery<TCacheData>({
+    queryKey: cacheKey,
+    queryFn: () =>
+      AsyncStorage.getItem(key).then(storedValue => {
+        if (!storedValue) return initialValue
+
+        try {
+          return JSON.parse(storedValue)
+        } catch {
+          return storedValue
+        }
+      }),
+  })
+
+  const setValue: SetValue<TCacheData> = useCallback(
+    itemValue => {
+      if (itemValue === null || itemValue === undefined) {
+        AsyncStorage.removeItem(key)
+      } else {
+        AsyncStorage.setItem(key, JSON.stringify(itemValue))
+      }
+      refetch()
+    },
+    [key, refetch]
+  )
+
+  return [value || initialValue, setValue]
+}

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,5 +1,14 @@
 import { Conversations } from './components/conversations'
-import { ChatContext } from './context/chat_context'
-import { OauthToken } from './types'
+import { ChatContext, ChatProvider } 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 }
+export {
+  ChatContext,
+  ChatProvider,
+  Conversations,
+  OAuthToken,
+  TemporaryDefaultColorsType,
+  useCreateChatTheme,
+}

package/src/types.d.ts

@@ -8,12 +8,17 @@ export type ConversationRecord = {
   }
 }
 
-export type OauthToken = {
-  subdomain: any
-  type: any
+export type OAuthToken = {
+  token_type: any
   access_token: any
   created_at: number
   expires_in: any
-  person: any
+  scope: string
   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,
+}