@planningcenter/chat-react-native 1.5.0 → 1.6.0

package/build/screens/conversation_screen.js

@@ -1,16 +1,69 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { 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 { useTheme } from '../hooks';
 export function ConversationScreen({ route }) {
-    return (<View style={styles.container}>
-      <Text>{JSON.stringify(route.params, null, 2)}</Text>
-    </View>);
+    const navigation = useNavigation();
+    const { conversation_id } = route.params;
+    const { data: conversation } = useSuspenseGet({
+        url: `/me/conversations/${conversation_id}`,
+        data: {
+            fields: {
+                Conversation: ['title'],
+            },
+        },
+    });
+    const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator({
+        url: `/me/conversations/${conversation_id}/messages`,
+        data: {
+            perPage: 25,
+            fields: {
+                Message: ['text', 'mine'],
+            },
+        },
+    });
+    useEffect(() => {
+        navigation.setOptions({ title: conversation?.title });
+    }, [conversation, conversation_id, navigation]);
+    return (<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) {
+    const { text } = message;
+    const styles = useMessageStyles(message);
+    return <Text style={styles.message}>{text}</Text>;
+}
+const useMessageStyles = ({ mine }) => {
+    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 },
 });
 //# sourceMappingURL=conversation_screen.js.map

package/build/screens/conversation_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAO5C,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAA2B;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CACrD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,GAAG,EAAE,CAAC;KACP;CACF,CAAC,CAAA","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../components/display'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  conversation_id: string\n  chat_group_graph_id: string\n}>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  return (\n    <View style={styles.container}>\n      <Text>{JSON.stringify(route.params, null, 2)}</Text>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    gap: 8,\n  },\n})\n"]}
+{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { FlatList, SafeAreaView, StyleSheet, TextInput, View } from 'react-native'\nimport { Text } from '../components/display'\nimport { useSuspenseGet, useSuspensePaginator } from '../hooks/use_suspense_api'\nimport { ConversationResource, MessageResource } from '../types'\nimport { useTheme } from '../hooks'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  conversation_id: string\n  chat_group_graph_id: string\n}>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id } = route.params\n\n  const { data: conversation } = useSuspenseGet<ConversationResource>({\n    url: `/me/conversations/${conversation_id}`,\n    data: {\n      fields: {\n        Conversation: ['title'],\n      },\n    },\n  })\n\n  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>({\n    url: `/me/conversations/${conversation_id}/messages`,\n    data: {\n      perPage: 25,\n      fields: {\n        Message: ['text', 'mine'],\n      },\n    },\n  })\n\n  useEffect(() => {\n    navigation.setOptions({ title: conversation?.title })\n  }, [conversation, conversation_id, navigation])\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <FlatList\n        inverted\n        contentContainerStyle={styles.listContainer}\n        refreshing={isRefetching}\n        onRefresh={refetch}\n        data={data}\n        keyExtractor={item => item.id}\n        renderItem={({ item }) => <Message {...item} />}\n        onEndReached={() => fetchNextPage()}\n      />\n      <View style={styles.textInputContainer}>\n        <TextInput\n          aria-disabled={true}\n          placeholder=\"Send a message\"\n          onChangeText={() => console.log('TODO: Implement sending a message')}\n          value=\"\"\n          style={styles.textInput}\n        />\n      </View>\n    </SafeAreaView>\n  )\n}\n\nfunction Message(message: MessageResource) {\n  const { text } = message\n  const styles = useMessageStyles(message)\n\n  return <Text style={styles.message}>{text}</Text>\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    message: {\n      alignSelf: mine ? 'flex-end' : 'flex-start',\n      backgroundColor: mine ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base,\n      borderRadius: 16,\n      borderBottomLeftRadius: mine ? 16 : 0,\n      borderBottomRightRadius: mine ? 0 : 16,\n      padding: 12,\n      color: colors.textColorDefaultPrimary,\n    },\n  })\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n  listContainer: {\n    gap: 12,\n    paddingHorizontal: 16,\n    paddingTop: 12,\n  },\n  textInputContainer: { borderTopWidth: 1, padding: 12 },\n  textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },\n})\n"]}

package/build/screens/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAyBzB,wBAAgB,aAAa,sBAmD5B"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuCvC,wBAAgB,aAAa,sBAyV5B"}

package/build/screens/display.js

@@ -1,8 +1,8 @@
-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 { 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',
     broken: 'https://broken.url',
@@ -21,61 +21,279 @@ const URL = {
         'https://i.pravatar.cc/200?img=27',
     ],
 };
+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>);
 }
+function CollapsableSection({ children, title, isLast = false }) {
+    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>);
+}
+function Group({ title, description, children }) {
+    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>);
+}
+function Row({ children, style }) {
+    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',
@@ -83,7 +301,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/build/screens/display.js.map

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

package/build/screens/not_found.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 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>);
 }
 const styles = StyleSheet.create({

package/build/screens/not_found.js.map

@@ -1 +1 @@
-{"version":3,"file":"not_found.js","sourceRoot":"","sources":["../../src/screens/not_found.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,MAAM,UAAU,QAAQ;IACtB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CACf;MAAA,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,MAAM,CACnD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;KACR;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Button, Text } from '@react-navigation/elements'\nimport { StyleSheet, View } from 'react-native'\n\nexport function NotFound() {\n  return (\n    <View style={styles.container}>\n      <Text>404</Text>\n      <Button screen=\"Conversations\">Go to Home</Button>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: 10,\n  },\n})\n"]}
+{"version":3,"file":"not_found.js","sourceRoot":"","sources":["../../src/screens/not_found.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,MAAM,UAAU,QAAQ;IACtB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CACf;MAAA,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,MAAM,CACjD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;KACR;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Button, Text } from '@react-navigation/elements'\nimport { StyleSheet, View } from 'react-native'\n\nexport function NotFound() {\n  return (\n    <View style={styles.container}>\n      <Text>404</Text>\n      <Button href=\"Conversations\">Go to Home</Button>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: 10,\n  },\n})\n"]}

package/build/types/api_primitives.d.ts

@@ -0,0 +1,23 @@
+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;
+}
+export {};
+//# sourceMappingURL=api_primitives.d.ts.map

package/build/types/api_primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api_primitives.d.ts","sourceRoot":"","sources":["../../src/types/api_primitives.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,WAAW,CAAC,IAAI,GAAG,cAAc,IAAI;IAC/C,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,IAAI,GAAG,cAAc,IAAI;IACjD,IAAI,EAAE,IAAI,EAAE,CAAA;IACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,IAAI,EAAE,cAAc,CAAA;CACrB,CAAA;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAA;CACjC"}

package/build/types/api_primitives.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=api_primitives.js.map

package/build/types/api_primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api_primitives.js","sourceRoot":"","sources":["../../src/types/api_primitives.ts"],"names":[],"mappings":"","sourcesContent":["export interface ResourceObject {\n  id: string\n  type: string\n}\n\nexport type ApiResource<Type = ResourceObject> = {\n  data: Type\n  links: Record<string, string>\n  meta: Record<string, unknown>\n}\n\nexport type ApiCollection<Type = ResourceObject> = {\n  data: Type[]\n  links: Record<string, string>\n  meta: CollectionMeta\n}\n\ninterface CollectionMeta {\n  count: number\n  totalCount: number\n  next?: Record<string, unknown>\n  parent?: ResourceObject\n  [attributeName: string]: unknown\n}\n"]}