@planningcenter/chat-react-native 1.4.1 → 1.4.2-qa-84.0

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

@@ -1,3 +1,4 @@
+import { TextStyle } from 'react-native';
 export declare const tokens: {
     borderRadiusDefault: number;
     spacingFourth: number;
@@ -16,6 +17,19 @@ export declare const tokens: {
     borderRadiusRound: number;
     borderSizeDefault: number;
     borderSizeThick: number;
+    fontWeightNormal: TextStyle["fontWeight"];
+    fontWeightMedium: TextStyle["fontWeight"];
+    fontWeightSemiBold: TextStyle["fontWeight"];
+    fontWeightBold: TextStyle["fontWeight"];
+    fontSize4xl: number;
+    fontSize3xl: number;
+    fontSize2xl: number;
+    fontSizeXl: number;
+    fontSizeLg: number;
+    fontSizeMd: number;
+    fontSizeSm: number;
+    fontSizeXs: number;
+    fontSize2xs: number;
     colorNeutral7: string;
     colorNeutral12: string;
     colorNeutral15: string;

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

@@ -1 +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"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAoHxC,eAAO,MAAM,MAAM;yBAPI,MAAM;mBAhEZ,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;sBACL,SAAS,CAAC,YAAY,CAAC;sBACvB,SAAS,CAAC,YAAY,CAAC;wBACrB,SAAS,CAAC,YAAY,CAAC;oBAC3B,SAAS,CAAC,YAAY,CAAC;iBAC1B,MAAM;iBACN,MAAM;iBACN,MAAM;gBACP,MAAM;gBACN,MAAM;gBACN,MAAM;gBACN,MAAM;gBACN,MAAM;iBACL,MAAM;mBAtEJ,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;CAoG7B,CAAA"}

package/build/vendor/tapestry/tokens.js

@@ -38,6 +38,19 @@ const numericPrimtives = {
     borderRadiusRound: 56,
     borderSizeDefault: 1,
     borderSizeThick: 2,
+    fontWeightNormal: '400',
+    fontWeightMedium: '500',
+    fontWeightSemiBold: '600',
+    fontWeightBold: '700',
+    fontSize4xl: 32,
+    fontSize3xl: 28,
+    fontSize2xl: 24,
+    fontSizeXl: 20,
+    fontSizeLg: 18,
+    fontSizeMd: 16,
+    fontSizeSm: 14,
+    fontSizeXs: 12,
+    fontSize2xs: 10,
 };
 const numericAliases = {
     borderRadiusDefault: numericPrimtives.borderRadiusMd,

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

@@ -1 +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"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,2FAA2F;AAC3F,0GAA0G;AAyB1G,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;AAkCD,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;IAClB,gBAAgB,EAAE,KAAK;IACvB,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,KAAK;IACzB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;CAChB,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\nimport { TextStyle } from 'react-native'\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  fontWeightNormal: TextStyle['fontWeight']\n  fontWeightMedium: TextStyle['fontWeight']\n  fontWeightSemiBold: TextStyle['fontWeight']\n  fontWeightBold: TextStyle['fontWeight']\n  fontSize4xl: number\n  fontSize3xl: number\n  fontSize2xl: number\n  fontSizeXl: number\n  fontSizeLg: number\n  fontSizeMd: number\n  fontSizeSm: number\n  fontSizeXs: number\n  fontSize2xs: 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  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemiBold: '600',\n  fontWeightBold: '700',\n  fontSize4xl: 32,\n  fontSize3xl: 28,\n  fontSize2xl: 24,\n  fontSizeXl: 20,\n  fontSizeLg: 18,\n  fontSizeMd: 16,\n  fontSizeSm: 14,\n  fontSizeXs: 12,\n  fontSize2xs: 10,\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.4.1",
+  "version": "1.4.2-qa-84.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -17,7 +17,7 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "dependencies": {
-    "@planningcenter/chat-core": "^1.4.0"
+    "@planningcenter/chat-core": "^1.4.2-qa-84.0"
   },
   "peerDependencies": {
     "@react-navigation/elements": "*",
@@ -25,7 +25,8 @@
     "@tanstack/react-query": "^5.0.0",
     "lodash": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-device-info": "*"
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.77.0",
@@ -36,7 +37,8 @@
     "expo-module-scripts": "^4.0.3",
     "lodash": "^4.17.21",
     "prettier": "^3.4.2",
-    "react-native": "0.74.5"
+    "react-native": "0.74.5",
+    "react-native-device-info": "^14.0.4"
   },
-  "gitHead": "469ceadce649e0dfa29e5c61281d1ed4821786cd"
+  "gitHead": "3f31e659fe437da51e7cd2b7b7a1547d8564c360"
 }

package/src/__tests__/session.tsx

@@ -1,6 +1,15 @@
 import { OAuthToken } from '../types'
 import { Session } from '../utils/session'
 
+const token: OAuthToken = {
+  access_token: 'access_token',
+  refresh_token: 'refresh_token',
+  token_type: undefined,
+  created_at: 0,
+  expires_in: undefined,
+  scope: '',
+}
+
 describe('Session', () => {
   describe('constructor', () => {
     it('should track the environment', () => {
@@ -10,14 +19,6 @@ describe('Session', () => {
     })
 
     it('should track the token', () => {
-      const token: OAuthToken = {
-        access_token: 'access_token',
-        refresh_token: 'refresh_token',
-        token_type: undefined,
-        created_at: 0,
-        expires_in: undefined,
-        scope: '',
-      }
       const session = new Session({ token })
       expect(session.token).toEqual(token)
       expect(session.isAuthenticated).toEqual(true)
@@ -43,4 +44,38 @@ describe('Session', () => {
       expect(session.uploadUrl).toBe('https://upload-staging.planningcenteronline.com/v2/files')
     })
   })
+
+  describe('hydrate', () => {
+    describe('success', () => {
+      it('should return a hydrated Session instance', () => {
+        const session = new Session({ token })
+        expect(session.token).toEqual(token)
+        expect(session.isAuthenticated).toEqual(true)
+
+        const sessionString = session.toString()
+        const hydratedSession = Session.hydrate(sessionString)
+        expect(hydratedSession.token).toEqual(token)
+        expect(hydratedSession.isAuthenticated).toEqual(true)
+      })
+
+      it('should store the environment of hydrated Session instance', () => {
+        const env = 'production'
+        const session = new Session({ token, env })
+
+        const sessionString = session.toString()
+        const hydratedSession = Session.hydrate(sessionString)
+        expect(hydratedSession.env).toEqual(env)
+        expect(hydratedSession.token).toEqual(token)
+        expect(hydratedSession.isAuthenticated).toEqual(true)
+      })
+    })
+
+    describe('failure', () => {
+      it('should return a new Session instance', () => {
+        const session = Session.hydrate('')
+        expect(session.env).toBe('development')
+        expect(session.isAuthenticated).toBe(false)
+      })
+    })
+  })
 })

package/src/__tests__/utils/space.tsx

@@ -0,0 +1,60 @@
+import { space, SpacingValues } from '../../utils/space'
+import { tokens } from '../../vendor/tapestry/tokens'
+
+describe('space function', () => {
+  // Spy on console.warn to check for invalid inputs
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  const validTokenValues: Record<SpacingValues, number> = {
+    0.25: tokens.spacingFourth,
+    0.5: tokens.spacingHalf,
+    1: tokens.spacing1,
+    1.5: tokens.spacing1 + tokens.spacingHalf,
+    2: tokens.spacing2,
+    2.5: tokens.spacing2 + tokens.spacingHalf,
+    3: tokens.spacing3,
+    3.5: tokens.spacing3 + tokens.spacingHalf,
+    4: tokens.spacing4,
+    4.5: tokens.spacing4 + tokens.spacingHalf,
+    5: tokens.spacing5,
+    5.5: tokens.spacing5 + tokens.spacingHalf,
+    6: tokens.spacing6,
+    6.5: tokens.spacing6 + tokens.spacingHalf,
+    7: tokens.spacing7,
+    7.5: tokens.spacing7 + tokens.spacingHalf,
+  }
+
+  it('should return the correct token values for all valid SpacingValues', () => {
+    Object.entries(validTokenValues).forEach(([value, expected]) => {
+      expect(space(Number(value) as SpacingValues)).toBe(expected)
+    })
+  })
+
+  it('should warn and return 0 for an invalid value less than 1 (e.g., 0.8)', () => {
+    const result = space(0.8 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('0.8'))
+  })
+
+  it('should warn and return 0 for an invalid fractional value (e.g., 1.8)', () => {
+    const result = space(1.8 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('1.8'))
+  })
+
+  it('should warn and return 0 for a value greater than 7.5 (e.g., 19)', () => {
+    const result = space(19 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('19'))
+  })
+})
+
+function warnText(value: string) {
+  return `Invalid space value: ${value} — Must be a whole or half number between 1–7.`
+}

package/src/components/display/heading.tsx

@@ -0,0 +1,71 @@
+import { useTheme } from '../../hooks'
+import React from 'react'
+import {
+  Platform,
+  StyleSheet,
+  Text as ReactNativeText,
+  TextProps as ReactNativeTextProps,
+} from 'react-native'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { platformFontWeightBold } from '../../utils/platform_styles'
+
+interface TextProps extends ReactNativeTextProps {
+  variant?: 'h1' | 'h2' | 'h3' | 'h4'
+}
+
+export function Heading({ style, variant = 'h1', children, ...rest }: TextProps) {
+  const styles = useStyles()
+  const variantStyleMap = {
+    h1: styles.heading1,
+    h2: styles.heading2,
+    h3: styles.heading3,
+    h4: styles.heading4,
+  }
+
+  return (
+    <ReactNativeText
+      style={[styles.global, variantStyleMap[variant], style]}
+      accessibilityRole="header"
+      {...rest}
+    >
+      {children}
+    </ReactNativeText>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    global: {
+      fontFamily: Platform.select({
+        ios: 'System',
+        android: 'normal',
+      }),
+    },
+    heading1: {
+      color: colors.textColorDefaultHeadline,
+      fontSize: 25, // Todo: Check with UX on correct token
+      lineHeight: 32,
+    },
+    heading2: {
+      color: colors.textColorDefaultHeadline,
+      fontWeight: platformFontWeightBold,
+      fontSize: 21, // Todo: Check with UX on correct token
+      lineHeight: 24,
+    },
+    heading3: {
+      color: colors.textColorDefaultHeadline,
+      fontWeight: platformFontWeightBold,
+      fontSize: tokens.fontSizeLg,
+      lineHeight: 22,
+    },
+    heading4: {
+      color: colors.textColorDefaultSecondary,
+      fontWeight: platformFontWeightBold,
+      fontSize: tokens.fontSizeSm,
+      lineHeight: 20,
+      textTransform: 'uppercase',
+    },
+  })
+}

package/src/components/display/index.ts

@@ -1,3 +1,4 @@
 export { Spinner } from './spinner'
 export { Image } from './image'
+export { Heading } from './heading'
 export { Text } from './text'

package/src/components/display/text.tsx

@@ -6,6 +6,7 @@ import {
   Text as ReactNativeText,
   TextProps as ReactNativeTextProps,
 } from 'react-native'
+import { tokens } from '../../vendor/tapestry/tokens'
 
 interface TextProps extends ReactNativeTextProps {
   variant?: 'plain' | 'secondary' | 'tertiary' | 'footnote'
@@ -38,22 +39,22 @@ const useStyles = () => {
     },
     plain: {
       color: colors.textColorDefaultPrimary,
-      fontSize: 16,
+      fontSize: tokens.fontSizeMd,
       lineHeight: 24,
     },
     secondary: {
       color: colors.textColorDefaultPrimary,
-      fontSize: 15,
+      fontSize: 15, // TODO: Check with UX on correct token
       lineHeight: 22,
     },
     tertiary: {
       color: colors.textColorDefaultPrimary,
-      fontSize: 14,
+      fontSize: tokens.fontSizeSm,
       lineHeight: 20,
     },
     footnote: {
       color: colors.textColorDefaultSecondary,
-      fontSize: 13,
+      fontSize: 13, // TODO: Check with UX on correct token
       lineHeight: 16,
     },
   })

package/src/components/index.tsx

@@ -0,0 +1,2 @@
+export * from './conversations'
+export * from './error_boundary'

package/src/contexts/api_provider.tsx

@@ -1,7 +1,9 @@
+import { JSONAPIResponse } from '@planningcenter/chat-core'
 import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { ViewProps } from 'react-native'
 import { OAuthToken } from '../types'
+import apiRequest from '../utils/api'
 import { ENV, session } from '../utils/session'
 
 let handleTokenExpired: () => void
@@ -13,13 +15,8 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
 
   const url = `${session.baseUrl}${queryKey[0]}`
 
-  return fetch(url, {
-    headers: {
-      Authorization: `Bearer ${session.token?.access_token}`,
-    },
-  })
-    .then(validateResponse)
-    .then(response => response.json())
+  return apiRequest<JSONAPIResponse>(url)
+    .then(r => r.json)
     .catch(error => {
       if (error.message === 'Token expired') {
         handleTokenExpired()
@@ -46,15 +43,9 @@ export function ApiProvider({
   session.token = token
   handleTokenExpired = onTokenExpired
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-}
-
-const validateResponse = (response: Response) => {
-  const isExpired = response.status === 401
+  useEffect(() => {
+    queryClient.invalidateQueries()
+  }, [env, token])
 
-  if (isExpired) {
-    throw new Error('Token expired')
-  }
-
-  return response
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './api_provider'
+export * from './chat_context'

package/src/hooks/index.ts

@@ -1 +1,2 @@
-export { useTheme } from './use_theme'
+export * from './use_async_storage'
+export * from './use_theme'

package/src/index.tsx

@@ -1,16 +1,5 @@
-import { Conversations } from './components/conversations'
-import { ChatContext, ChatProvider } from './contexts/chat_context'
-import { OAuthToken } from './types'
-import { baseUrlMap, uploadUrlMap } from './utils/session'
-import { TemporaryDefaultColorsType } from './utils/theme'
+export * from './components'
+export * from './contexts'
+export * from './hooks'
 export * from './screens'
-
-export {
-  baseUrlMap,
-  ChatContext,
-  ChatProvider,
-  Conversations,
-  OAuthToken,
-  TemporaryDefaultColorsType,
-  uploadUrlMap,
-}
+export * from './utils'

package/src/screens/display.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { useTheme } from '../hooks'
-import { Image, Spinner, Text } from '../components/display'
+import { Heading, Image, Spinner, Text } from '../components/display'
+import { space } from '../utils/space'
 
 export function DisplayScreen() {
   const styles = useStyles()
@@ -27,6 +28,12 @@ export function DisplayScreen() {
           <Text variant="tertiary">Tertiary</Text>
           <Text variant="footnote">Footnote</Text>
         </View>
+        <View style={styles.row}>
+          <Heading>Heading 1</Heading>
+          <Heading variant="h2">Heading 2</Heading>
+          <Heading variant="h3">Heading 3</Heading>
+          <Heading variant="h4">Heading 4</Heading>
+        </View>
       </View>
     </ScrollView>
   )
@@ -37,18 +44,18 @@ const useStyles = () => {
 
   return StyleSheet.create({
     scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
-    container: { gap: 16, padding: 24 },
+    container: { gap: space(2), padding: space(3) },
     listItem: { color: colors.fillColorNeutral020 },
     row: {
-      gap: 16,
+      gap: space(2),
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
-    column: { gap: 32 },
+    column: { gap: space(4) },
     spinnerContainer: {
-      height: 20,
+      height: space(2.5),
     },
     image: {
       width: 100,

package/src/utils/api.ts

@@ -0,0 +1,47 @@
+import DeviceInfo from 'react-native-device-info'
+import { session } from './session'
+
+const brand = DeviceInfo.getBrand()
+const model = DeviceInfo.getModel()
+const systemName = DeviceInfo.getSystemName()
+const systemVersion = DeviceInfo.getSystemVersion()
+const readableVersion = DeviceInfo.getReadableVersion()
+const appName = DeviceInfo.getApplicationName()
+
+export default function apiRequest<T = unknown>(
+  url: string,
+  { method = 'GET', data = null } = {}
+): Promise<{ json: T; ok: boolean; response: Response }> {
+  const options: RequestInit = {
+    headers: {
+      Accept: 'application/vnd.api+json',
+      'Content-Type': 'application/json',
+      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+      Authorization: `Bearer ${session.token?.access_token}`,
+    },
+    method,
+  }
+
+  if (data && method !== 'GET') {
+    options.body = JSON.stringify(data)
+  }
+
+  return fetch(url, options)
+    .then(validateResponse)
+    .then(response =>
+      response
+        .json()
+        .then(json => ({ json: json as T, ok: response.ok, response }))
+        .catch(() => ({ json: null as T, ok: response.ok, response }))
+    )
+}
+
+const validateResponse = (response: Response) => {
+  const isExpired = response.status === 401
+
+  if (isExpired) {
+    throw new Error('Token expired')
+  }
+
+  return response
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './session'
+export * from './theme'

package/src/utils/platform_styles.ts

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native'
+import { tokens } from '../vendor/tapestry/tokens'
+
+export const platformFontWeightBold = Platform.select({
+  ios: tokens.fontWeightSemiBold,
+  android: tokens.fontWeightBold,
+})

package/src/utils/session.ts

@@ -42,6 +42,19 @@ export class Session {
   get uploadUrl() {
     return uploadUrlMap[this.env]
   }
+
+  toString() {
+    return JSON.stringify({ env: this.env, token: this.token })
+  }
+
+  static hydrate(sessionString: string) {
+    try {
+      const props = JSON.parse(sessionString)
+      return new Session(props)
+    } catch (error) {
+      return new Session()
+    }
+  }
 }
 
 export const session = new Session({ env: 'development' })

package/src/utils/space.ts

@@ -0,0 +1,39 @@
+import { tokens } from '../vendor/tapestry/tokens'
+
+export type SpacingValues =
+  | 0.25
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 4.5
+  | 5
+  | 5.5
+  | 6
+  | 6.5
+  | 7
+  | 7.5
+
+export function space(value: SpacingValues): number {
+  if (value === 0.25) return tokens.spacingFourth
+  if (value === 0.5) return tokens.spacingHalf
+  if (value < 1 || value > 7.5) return handleInvalidSpace(value)
+
+  // Reject fractional values that are not 0 or 0.5
+  const wholeValue = Math.floor(value)
+  const fractionalValue = value % 1
+  if (fractionalValue !== 0 && fractionalValue !== 0.5) return handleInvalidSpace(value)
+
+  // Deliver a whole value or add a half spacing token to it
+  const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0
+  return tokens[`spacing${wholeValue}`] + remainderValue
+}
+
+function handleInvalidSpace(value: number) {
+  console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`)
+  return 0
+}

package/src/vendor/tapestry/tokens.ts

@@ -2,6 +2,8 @@
 // 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
 
+import { TextStyle } from 'react-native'
+
 interface ColorPrimitves {
   colorNeutral7: string
   colorNeutral12: string
@@ -61,6 +63,19 @@ interface NumericPrimitives {
   borderRadiusRound: number
   borderSizeDefault: number
   borderSizeThick: number
+  fontWeightNormal: TextStyle['fontWeight']
+  fontWeightMedium: TextStyle['fontWeight']
+  fontWeightSemiBold: TextStyle['fontWeight']
+  fontWeightBold: TextStyle['fontWeight']
+  fontSize4xl: number
+  fontSize3xl: number
+  fontSize2xl: number
+  fontSizeXl: number
+  fontSizeLg: number
+  fontSizeMd: number
+  fontSizeSm: number
+  fontSizeXs: number
+  fontSize2xs: number
 }
 
 const numericPrimtives: NumericPrimitives = {
@@ -80,6 +95,19 @@ const numericPrimtives: NumericPrimitives = {
   borderRadiusRound: 56,
   borderSizeDefault: 1,
   borderSizeThick: 2,
+  fontWeightNormal: '400',
+  fontWeightMedium: '500',
+  fontWeightSemiBold: '600',
+  fontWeightBold: '700',
+  fontSize4xl: 32,
+  fontSize3xl: 28,
+  fontSize2xl: 24,
+  fontSizeXl: 20,
+  fontSizeLg: 18,
+  fontSizeMd: 16,
+  fontSizeSm: 14,
+  fontSizeXs: 12,
+  fontSize2xs: 10,
 }
 
 interface NumericAliases {