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

package/src/__tests__/session.tsx

@@ -1,46 +0,0 @@
-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

@@ -1,64 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
-import React, { Suspense, useContext } from 'react'
-import { FlatList, Pressable, StyleSheet, Text } from 'react-native'
-import { ChatContext } from '../contexts/chat_context'
-import { useTheme } from '../hooks/use_theme'
-import { ConversationRecord } from '../types'
-import ErrorBoundary from './error_boundary'
-
-type ConversationsResponse = {
-  data: ConversationRecord[]
-  links: Record<string, string>
-  meta: Record<string, string>
-}
-
-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}
-      ListEmptyComponent={<Text>No conversations found</Text>}
-      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
-      renderItem={({ item }) => (
-        <Pressable onPress={() => navigation.navigate('Settings')}>
-          <Text style={styles.listItem}>{item.attributes.title}</Text>
-        </Pressable>
-      )}
-    />
-  )
-}
-
-const useStyles = () => {
-  const { colors } = useTheme()
-
-  return StyleSheet.create({
-    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
-    foo: { fontSize: 24, color: colors.testColor },
-    listItem: { color: colors.fillColorNeutral020 },
-  })
-}

package/src/components/error_boundary.tsx

@@ -1,27 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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,17 +0,0 @@
-import { Conversations } from './components/conversations'
-import { ChatContext, ChatProvider } from './contexts/chat_context'
-import { useCreateChatTheme } from './hooks/use_create_chat_theme'
-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

@@ -1,35 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,97 +0,0 @@
-// 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,
-}

package/tsconfig.json

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