@planningcenter/chat-react-native 1.5.0 → 1.6.0

package/src/screens/conversation_screen.tsx

@@ -1,7 +1,10 @@
-import { StaticScreenProps } from '@react-navigation/native'
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+import { FlatList, SafeAreaView, StyleSheet, TextInput, View } from 'react-native'
 import { Text } from '../components/display'
+import { useSuspenseGet, useSuspensePaginator } from '../hooks/use_suspense_api'
+import { ConversationResource, MessageResource } from '../types'
+import { useTheme } from '../hooks'
 
 export type ConversationScreenProps = StaticScreenProps<{
   conversation_id: string
@@ -9,17 +12,90 @@ export type ConversationScreenProps = StaticScreenProps<{
 }>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
+  const navigation = useNavigation()
+  const { conversation_id } = route.params
+
+  const { data: conversation } = useSuspenseGet<ConversationResource>({
+    url: `/me/conversations/${conversation_id}`,
+    data: {
+      fields: {
+        Conversation: ['title'],
+      },
+    },
+  })
+
+  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>({
+    url: `/me/conversations/${conversation_id}/messages`,
+    data: {
+      perPage: 25,
+      fields: {
+        Message: ['text', 'mine'],
+      },
+    },
+  })
+
+  useEffect(() => {
+    navigation.setOptions({ title: conversation?.title })
+  }, [conversation, conversation_id, navigation])
+
   return (
-    <View style={styles.container}>
-      <Text>{JSON.stringify(route.params, null, 2)}</Text>
-    </View>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        inverted
+        contentContainerStyle={styles.listContainer}
+        refreshing={isRefetching}
+        onRefresh={refetch}
+        data={data}
+        keyExtractor={item => item.id}
+        renderItem={({ item }) => <Message {...item} />}
+        onEndReached={() => fetchNextPage()}
+      />
+      <View style={styles.textInputContainer}>
+        <TextInput
+          aria-disabled={true}
+          placeholder="Send a message"
+          onChangeText={() => console.log('TODO: Implement sending a message')}
+          value=""
+          style={styles.textInput}
+        />
+      </View>
+    </SafeAreaView>
   )
 }
 
+function Message(message: MessageResource) {
+  const { text } = message
+  const styles = useMessageStyles(message)
+
+  return <Text style={styles.message}>{text}</Text>
+}
+
+const useMessageStyles = ({ mine }: MessageResource) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    message: {
+      alignSelf: mine ? 'flex-end' : 'flex-start',
+      backgroundColor: mine ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base,
+      borderRadius: 16,
+      borderBottomLeftRadius: mine ? 16 : 0,
+      borderBottomRightRadius: mine ? 0 : 16,
+      padding: 12,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
-    gap: 8,
   },
+  listContainer: {
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  textInputContainer: { borderTopWidth: 1, padding: 12 },
+  textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
 })

package/src/screens/display.tsx

@@ -1,8 +1,20 @@
-import React from 'react'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import React, { useState } from 'react'
+import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native'
+import type { ViewStyle } from 'react-native'
 import { useTheme } from '../hooks'
-import { Avatar, AvatarGroup, Heading, Icon, Image, Spinner, Text } from '../components/display'
-import { space } from '../utils/space'
+import {
+  Avatar,
+  AvatarGroup,
+  Button,
+  Heading,
+  Icon,
+  Image,
+  Spinner,
+  Text,
+  TextButton,
+  TextInlineButton,
+} from '../components/display'
+import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle } from '../utils'
 
 const URL = {
   image: 'https://picsum.photos/seed/picsum/200',
@@ -23,66 +35,442 @@ const URL = {
   ],
 }
 
+const buttonPress = () => Alert.alert('Button clicked')
+
 export function DisplayScreen() {
   const styles = useStyles()
 
   return (
     <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
-      <View style={styles.column}>
-        <View style={[styles.row, styles.spinnerContainer]}>
-          <Spinner size={24} />
-        </View>
-        <View style={styles.row}>
-          <Image source={{ uri: URL.broken }} style={styles.image} />
-          <Image source={{ uri: URL.image }} style={styles.image} />
-        </View>
-        <View style={styles.row}>
-          <Avatar sourceUri={URL.broken} />
-          <Avatar size="md" sourceUri={URL.avatar_fallback} />
-          <Avatar sourceUri={URL.avatar} />
-        </View>
-        <View style={styles.row}>
-          <Avatar presence="offline" sourceUri={URL.broken} />
-          <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback} />
-          <Avatar presence="offline" sourceUri={URL.avatar} />
-        </View>
-        <View style={styles.row}>
-          <AvatarGroup sourceUris={[URL.broken]} />
-          <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]} />
-          <AvatarGroup sourceUris={[URL.avatar]} />
-          <AvatarGroup sourceUris={URL.two_avatars} />
-          <AvatarGroup sourceUris={URL.three_avatars} />
-          <AvatarGroup sourceUris={URL.four_avatars} />
-        </View>
-        <View style={styles.row}>
-          <Icon name="missingIcon" size={20} />
-          <Icon name="general.textMessage" size={20} />
-          <Icon name="churchCenter.sort" style={styles.icon} />
-        </View>
-        <View style={styles.row}>
-          <Text>Plain text</Text>
-          <Text variant="secondary">Secondary</Text>
-          <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>
+      <CollapsableSection title="Molecules">
+        <Row>
+          <Text>🚧 Coming soon! 🚧</Text>
+        </Row>
+      </CollapsableSection>
+      <CollapsableSection title="Atoms" isLast>
+        <Group
+          title="Spinner"
+          description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading."
+        >
+          <Row style={styles.spinnerContainer}>
+            <Spinner size={24} />
+          </Row>
+        </Group>
+        <Group
+          title="Image"
+          description="Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`."
+        >
+          <Row>
+            <Image source={{ uri: URL.broken }} style={styles.image} alt="Mountain sunrise" />
+            <Image source={{ uri: URL.image }} style={styles.image} alt="Mountain sunrise" />
+            <Image source={{ uri: URL.image }} style={styles.image} alt="" />
+          </Row>
+        </Group>
+        <Group
+          title="Avatar"
+          description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'
+        >
+          <Row>
+            <Avatar sourceUri={URL.broken} />
+            <Avatar size="md" sourceUri={URL.avatar_fallback} />
+            <Avatar sourceUri={URL.avatar} />
+          </Row>
+          <Row>
+            <Avatar presence="offline" sourceUri={URL.broken} />
+            <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback} />
+            <Avatar presence="offline" sourceUri={URL.avatar} />
+          </Row>
+        </Group>
+        <Group
+          title="AvatarGroup"
+          description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load."
+        >
+          <Row>
+            <AvatarGroup sourceUris={[URL.broken]} />
+            <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]} />
+            <AvatarGroup sourceUris={[URL.avatar]} />
+            <AvatarGroup sourceUris={URL.two_avatars} />
+            <AvatarGroup sourceUris={URL.three_avatars} />
+            <AvatarGroup sourceUris={URL.four_avatars} />
+          </Row>
+        </Group>
+        <Group
+          title="Icon"
+          description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size."
+        >
+          <Row>
+            <Icon name="missingIcon" size={20} />
+            <Icon name="general.textMessage" size={20} />
+            <Icon name="churchCenter.sort" style={styles.icon} />
+          </Row>
+        </Group>
+        <Group
+          title="Button"
+          description="Feature fill and outline variants for primary and danger usecases, along with disabled & loading states. Optionally shows icons to the left and right of the text."
+        >
+          <Row>
+            <Button onPress={buttonPress} title="Default" size="sm" />
+            <Button onPress={buttonPress} title="Default" size="md" />
+            <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" />
+          </Row>
+          <Row>
+            <Button disabled onPress={buttonPress} title="Disabled" size="sm" />
+            <Button disabled onPress={buttonPress} title="Disabled" size="md" />
+            <Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg" />
+          </Row>
+          <Row>
+            <Button
+              onPress={buttonPress}
+              title="Default"
+              size="sm"
+              iconNameLeft="general.plus"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              onPress={buttonPress}
+              title="Default"
+              size="md"
+              iconNameRight="churchCenter.sort"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              onPress={buttonPress}
+              title="Danger"
+              appearance="danger"
+              size="lg"
+              iconNameLeft="groups.cards"
+              iconNameRight="general.downChevron"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+          </Row>
+          <Row>
+            <Button loading onPress={buttonPress} title="Default" size="sm" />
+            <Button loading onPress={buttonPress} title="Default" size="md" />
+            <Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg" />
+          </Row>
+          <Row>
+            <Button onPress={buttonPress} title="Default" size="sm" variant="outline" />
+            <Button onPress={buttonPress} title="Default" size="md" variant="outline" />
+            <Button
+              onPress={buttonPress}
+              title="Danger"
+              appearance="danger"
+              size="lg"
+              variant="outline"
+            />
+          </Row>
+          <Row>
+            <Button
+              onPress={buttonPress}
+              title="Default"
+              size="sm"
+              variant="outline"
+              iconNameLeft="general.plus"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              onPress={buttonPress}
+              title="Default"
+              size="md"
+              variant="outline"
+              iconNameRight="churchCenter.sort"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              onPress={buttonPress}
+              title="Danger"
+              appearance="danger"
+              size="lg"
+              variant="outline"
+              iconNameLeft="groups.cards"
+              iconNameRight="general.downChevron"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+          </Row>
+          <Row>
+            <Button
+              disabled
+              onPress={buttonPress}
+              title="Disabled"
+              size="sm"
+              variant="outline"
+              iconNameLeft="general.plus"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              disabled
+              onPress={buttonPress}
+              title="Disabled"
+              size="md"
+              variant="outline"
+              iconNameRight="churchCenter.sort"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              disabled
+              onPress={buttonPress}
+              title="Disabled"
+              appearance="danger"
+              size="lg"
+              variant="outline"
+              iconNameLeft="groups.cards"
+              iconNameRight="general.downChevron"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+          </Row>
+          <Row>
+            <Button
+              loading
+              onPress={buttonPress}
+              title="Default"
+              size="sm"
+              variant="outline"
+              iconNameLeft="general.plus"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              loading
+              onPress={buttonPress}
+              title="Default"
+              size="md"
+              variant="outline"
+              iconNameRight="churchCenter.sort"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+            <Button
+              loading
+              onPress={buttonPress}
+              title="Danger"
+              appearance="danger"
+              size="lg"
+              variant="outline"
+              iconNameLeft="groups.cards"
+              iconNameRight="general.downChevron"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+            />
+          </Row>
+        </Group>
+        <Group
+          title="TextButton"
+          description="Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props."
+        >
+          <Row>
+            <TextButton onPress={buttonPress}>Default</TextButton>
+            <TextButton onPress={buttonPress} variant="secondary">
+              Default
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="tertiary">
+              Default
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="footnote">
+              Default
+            </TextButton>
+          </Row>
+          <Row>
+            <TextButton onPress={buttonPress} appearance="danger">
+              Danger
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="secondary" appearance="danger">
+              Danger
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="tertiary" appearance="danger">
+              Danger
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="footnote" appearance="danger">
+              Danger
+            </TextButton>
+          </Row>
+          <Row>
+            <TextButton onPress={buttonPress} disabled>
+              Disabled
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="secondary" disabled>
+              Disabled
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="tertiary" disabled>
+              Disabled
+            </TextButton>
+            <TextButton onPress={buttonPress} variant="footnote" disabled>
+              Disabled
+            </TextButton>
+          </Row>
+        </Group>
+        <Group
+          title="TextInlineButton"
+          description="Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`."
+        >
+          <Row style={styles.alignRowLeft}>
+            <Text>
+              This text is next to{' '}
+              <TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem
+              ipsum dolor{' '}
+              <TextInlineButton onPress={buttonPress} appearance="danger">
+                danger button text
+              </TextInlineButton>{' '}
+              consectetur{' '}
+              <TextInlineButton onPress={buttonPress} disabled>
+                disabled button text
+              </TextInlineButton>{' '}
+              elit.
+            </Text>
+            <Text variant="secondary">
+              This text is next to{' '}
+              <TextInlineButton variant="secondary" onPress={buttonPress}>
+                default button text
+              </TextInlineButton>{' '}
+              Lorem ipsum dolor{' '}
+              <TextInlineButton variant="secondary" onPress={buttonPress} appearance="danger">
+                danger button text
+              </TextInlineButton>{' '}
+              consectetur{' '}
+              <TextInlineButton variant="secondary" onPress={buttonPress} disabled>
+                disabled button text
+              </TextInlineButton>{' '}
+              elit.
+            </Text>
+            <Text variant="tertiary">
+              This text is next to{' '}
+              <TextInlineButton variant="tertiary" onPress={buttonPress}>
+                default button text
+              </TextInlineButton>{' '}
+              Lorem ipsum dolor{' '}
+              <TextInlineButton variant="tertiary" onPress={buttonPress} appearance="danger">
+                danger button text
+              </TextInlineButton>{' '}
+              consectetur{' '}
+              <TextInlineButton variant="tertiary" onPress={buttonPress} disabled>
+                disabled button text
+              </TextInlineButton>{' '}
+              elit.
+            </Text>
+            <Text variant="footnote">
+              This text is next to{' '}
+              <TextInlineButton variant="footnote" onPress={buttonPress}>
+                default button text
+              </TextInlineButton>{' '}
+              Lorem ipsum dolor{' '}
+              <TextInlineButton variant="footnote" onPress={buttonPress} appearance="danger">
+                danger button text
+              </TextInlineButton>{' '}
+              consectetur{' '}
+              <TextInlineButton variant="footnote" onPress={buttonPress} disabled>
+                disabled button text
+              </TextInlineButton>{' '}
+              elit.
+            </Text>
+          </Row>
+        </Group>
+        <Group
+          title="Heading"
+          description="Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants."
+        >
+          <Row>
+            <Heading>Heading 1</Heading>
+            <Heading variant="h2">Heading 2</Heading>
+            <Heading variant="h3">Heading 3</Heading>
+            <Heading variant="h4">Heading 4</Heading>
+          </Row>
+        </Group>
+        <Group title="Text" description="Use for body copy and supporting text.">
+          <Row>
+            <Text>Plain text</Text>
+            <Text variant="secondary">Secondary</Text>
+            <Text variant="tertiary">Tertiary</Text>
+            <Text variant="footnote">Footnote</Text>
+          </Row>
+        </Group>
+      </CollapsableSection>
     </ScrollView>
   )
 }
 
+interface CollapsableSectionProps {
+  children: React.ReactNode
+  title: string
+  isLast?: boolean
+}
+
+function CollapsableSection({ children, title, isLast = false }: CollapsableSectionProps) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const [collapsed, setCollapsed] = useState(true)
+
+  return (
+    <View style={[styles.section, styles.sectionBorderTop, isLast && styles.sectionBorderBottom]}>
+      <Pressable
+        onPress={() => setCollapsed(!collapsed)}
+        style={({ pressed }) => [styles.sectionHeader, pressed && platformPressedOpacityStyle]}
+        android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
+      >
+        <Heading>{title}</Heading>
+        <Icon name={collapsed ? 'general.plus' : 'general.minus'} size={16} />
+      </Pressable>
+      {!collapsed && <View style={styles.sectionChildren}>{children}</View>}
+    </View>
+  )
+}
+
+interface GroupProps {
+  title: string
+  description?: string
+  children: React.ReactNode
+}
+
+function Group({ title, description, children }: GroupProps) {
+  const styles = useStyles()
+  return (
+    <View style={styles.group}>
+      <View style={styles.groupHeading}>
+        <Heading variant="h3">{title}</Heading>
+        {description && <Text variant="footnote">{description}</Text>}
+      </View>
+      {children}
+    </View>
+  )
+}
+
+interface RowProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+function Row({ children, style }: RowProps) {
+  const styles = useStyles()
+  return <View style={[styles.row, style]}>{children}</View>
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
-    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral100Inverted },
-    container: { gap: space(2), padding: space(3) },
+    scrollView: {
+      flex: 1,
+      backgroundColor: colors.fillColorNeutral100Inverted,
+    },
+    container: {
+      padding: space(3),
+    },
     listItem: { color: colors.fillColorNeutral020 },
+    section: {
+      gap: space(1),
+      borderColor: colors.fillColorNeutral020,
+    },
+    sectionBorderTop: {
+      borderTopWidth: 1,
+    },
+    sectionBorderBottom: {
+      borderBottomWidth: 1,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingVertical: space(3),
+    },
+    sectionChildren: {
+      paddingBottom: space(3),
+      gap: space(6),
+    },
     row: {
       gap: space(2),
       flexDirection: 'row',
@@ -90,7 +478,15 @@ const useStyles = () => {
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
-    column: { gap: space(4) },
+    alignRowLeft: {
+      justifyContent: 'flex-start',
+    },
+    group: {
+      gap: space(3),
+    },
+    groupHeading: {
+      gap: space(1),
+    },
     spinnerContainer: {
       height: space(2.5),
     },

package/src/screens/not_found.tsx

@@ -6,7 +6,7 @@ export function NotFound() {
   return (
     <View style={styles.container}>
       <Text>404</Text>
-      <Button screen="Conversations">Go to Home</Button>
+      <Button href="Conversations">Go to Home</Button>
     </View>
   )
 }

package/src/types/api_primitives.ts

@@ -0,0 +1,24 @@
+export interface ResourceObject {
+  id: string
+  type: string
+}
+
+export type ApiResource<Type = ResourceObject> = {
+  data: Type
+  links: Record<string, string>
+  meta: Record<string, unknown>
+}
+
+export type ApiCollection<Type = ResourceObject> = {
+  data: Type[]
+  links: Record<string, string>
+  meta: CollectionMeta
+}
+
+interface CollectionMeta {
+  count: number
+  totalCount: number
+  next?: Record<string, unknown>
+  parent?: ResourceObject
+  [attributeName: string]: unknown
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './api_primitives'
+export * from './resources'
+export * from './utils'