@planningcenter/chat-react-native 1.4.0-rc.1 → 1.4.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.4.0-rc.1",
+  "version": "1.4.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "files": [
-    "build"
+    "build",
+    "src"
   ],
   "sideEffects": false,
   "scripts": {
@@ -16,7 +17,7 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "dependencies": {
-    "@planningcenter/chat-core": "^1.4.0-rc.1"
+    "@planningcenter/chat-core": "^1.4.0"
   },
   "peerDependencies": {
     "@react-navigation/elements": "*",
@@ -37,5 +38,5 @@
     "prettier": "^3.4.2",
     "react-native": "0.74.5"
   },
-  "gitHead": "0dc211ff36b02633298f056dc893ddf08daecdff"
+  "gitHead": "6bcacc755d471a8f03b890abd733d5805f643aa4"
 }

package/src/__tests__/index.tsx

@@ -0,0 +1,5 @@
+describe('Chat', () => {
+  it('should do maths', () => {
+    expect(1 + 1).toBe(2)
+  })
+})

package/src/__tests__/session.tsx

@@ -0,0 +1,46 @@
+import { OAuthToken } from '../types'
+import { Session } from '../utils/session'
+
+describe('Session', () => {
+  describe('constructor', () => {
+    it('should track the environment', () => {
+      const session = new Session()
+      expect(session.env).toBe('development')
+      expect(session.isAuthenticated).toBe(false)
+    })
+
+    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)
+    })
+  })
+
+  describe('urls', () => {
+    it('should return the correct base url', () => {
+      const session = new Session({ env: 'production' })
+      expect(session.baseUrl).toBe('https://api.planningcenteronline.com')
+      session.env = 'development'
+      expect(session.baseUrl).toBe('http://api.pco.test')
+      session.env = 'staging'
+      expect(session.baseUrl).toBe('https://api-staging.planningcenteronline.com')
+    })
+
+    it('should return the correct upload url', () => {
+      const session = new Session({ env: 'production' })
+      expect(session.uploadUrl).toBe('https://upload.planningcenteronline.com/v2/files')
+      session.env = 'development'
+      expect(session.uploadUrl).toBe('https://upload.planningcenteronline.com/v2/files')
+      session.env = 'staging'
+      expect(session.uploadUrl).toBe('https://upload-staging.planningcenteronline.com/v2/files')
+    })
+  })
+})

package/src/components/conversations.tsx

@@ -0,0 +1,94 @@
+import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'
+import { useNavigation } from '@react-navigation/native'
+import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
+import React, { Suspense, useContext } from 'react'
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'
+import { ChatContext } from '../contexts/chat_context'
+import { useTheme } from '../hooks'
+import { Image, Spinner } from './display'
+import ErrorBoundary from './error_boundary'
+
+type ConversationsResponse = JSONAPICollection<ConversationResource>
+
+export function Conversations() {
+  const { token } = useContext(ChatContext)
+
+  if (!token) return null
+
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary onReset={reset}>
+          <Suspense fallback={<Text>loading...</Text>}>
+            <Loaded />
+          </Suspense>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  )
+}
+
+const Loaded = () => {
+  const styles = useStyles()
+  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({
+    queryKey: ['/chat/v2/me/conversations'],
+  })
+  const navigation = useNavigation()
+
+  return (
+    <FlatList
+      data={conversations?.data}
+      contentContainerStyle={styles.container}
+      style={styles.scrollView}
+      ListEmptyComponent={<Text>No conversations found</Text>}
+      ListHeaderComponent={
+        <View style={styles.column}>
+          <Text style={styles.foo}>Display Components</Text>
+          <View style={[styles.row, styles.spinnerContainer]}>
+            <Spinner size={24} />
+          </View>
+          <View style={styles.row}>
+            <Image source={{ uri: 'https://broken.url' }} style={styles.image} />
+            <Image
+              source={{
+                uri: 'https://picsum.photos/seed/picsum/200',
+              }}
+              style={styles.image}
+            />
+          </View>
+          <Text style={styles.foo}>Conversations</Text>
+        </View>
+      }
+      renderItem={({ item }) => (
+        <Pressable onPress={() => navigation.navigate('Settings')}>
+          <Text style={styles.listItem}>{item.attributes.title}</Text>
+        </Pressable>
+      )}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
+    container: { gap: 8, padding: 16 },
+    foo: { fontSize: 24, color: colors.testColor },
+    listItem: { color: colors.fillColorNeutral020 },
+    row: {
+      gap: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    column: { gap: 16 },
+    spinnerContainer: {
+      height: 20,
+    },
+    image: {
+      width: 100,
+      height: 100,
+    },
+  })
+}

package/src/components/display/image.tsx

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

package/src/components/display/index.ts

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

package/src/components/display/spinner.tsx

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

package/src/components/error_boundary.tsx

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react'
+import { Text } from 'react-native'
+
+class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
+  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/api_provider.tsx

@@ -0,0 +1,60 @@
+import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
+import React from 'react'
+import { ViewProps } from 'react-native'
+import { OAuthToken } from '../types'
+import { ENV, session } from '../utils/session'
+
+let handleTokenExpired: () => void
+
+const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
+  if (!session.token) {
+    throw new Error('No token present')
+  }
+
+  const url = `${session.baseUrl}${queryKey[0]}`
+
+  return fetch(url, {
+    headers: {
+      Authorization: `Bearer ${session.token?.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 }) {
+  session.env = env
+  session.token = token
+  handleTokenExpired = onTokenExpired
+
+  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/index.ts

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

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

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

package/src/types.d.ts

@@ -0,0 +1,35 @@
+export type ConversationRecord = {
+  id: string
+  type: 'Conversation'
+  attributes: {
+    title: string
+    created_at: string
+    updated_at: string
+  }
+}
+
+export type OAuthToken = {
+  token_type: any
+  access_token: any
+  created_at: number
+  expires_in: 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]>
+}
+
+export type RootStackParamList = {
+  Settings: undefined
+  Conversations: undefined
+}
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
+}

package/src/utils/session.ts

@@ -0,0 +1,47 @@
+import { OAuthToken } from '../types'
+
+export type ENV = 'production' | 'staging' | 'development'
+
+export const baseUrlMap = {
+  production: 'https://api.planningcenteronline.com',
+  staging: 'https://api-staging.planningcenteronline.com',
+  development: 'http://api.pco.test',
+}
+
+export const uploadUrlMap = {
+  production: 'https://upload.planningcenteronline.com/v2/files',
+  staging: 'https://upload-staging.planningcenteronline.com/v2/files',
+  development: 'https://upload.planningcenteronline.com/v2/files',
+}
+
+type SessionProps = { env?: ENV; token?: OAuthToken } | undefined
+
+/**
+ * Session class to track the environment and token
+ * Not intended to make network requests or handle authentication
+ * - returns urls for convenience only
+ */
+export class Session {
+  env: ENV
+  token: OAuthToken | undefined
+
+  constructor(props?: SessionProps) {
+    const { env = 'development', token } = props || {}
+    this.env = env
+    this.token = token
+  }
+
+  get isAuthenticated() {
+    return Boolean(this.token)
+  }
+
+  get baseUrl() {
+    return baseUrlMap[this.env]
+  }
+
+  get uploadUrl() {
+    return uploadUrlMap[this.env]
+  }
+}
+
+export const session = new Session({ env: 'development' })

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,
+}