@planningcenter/chat-react-native 2.2.1 → 2.2.2-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/build/screens/conversation_details_screen.d.ts.map +1 -1
  2. package/build/screens/conversation_details_screen.js +178 -101
  3. package/build/screens/conversation_details_screen.js.map +1 -1
  4. package/build/types/utils/index.d.ts +1 -0
  5. package/build/types/utils/index.d.ts.map +1 -1
  6. package/build/types/utils/index.js +3 -1
  7. package/build/types/utils/index.js.map +1 -1
  8. package/build/vendor/tapestry/alias_tokens_color_map.d.ts +12 -0
  9. package/build/vendor/tapestry/alias_tokens_color_map.d.ts.map +1 -1
  10. package/build/vendor/tapestry/alias_tokens_color_map.js +12 -0
  11. package/build/vendor/tapestry/alias_tokens_color_map.js.map +1 -1
  12. package/package.json +2 -2
  13. package/src/screens/conversation_details_screen.tsx +295 -130
  14. package/src/types/utils/index.ts +4 -0
  15. package/src/vendor/tapestry/alias_tokens_color_map.ts +18 -0
package/build/screens/conversation_details_screen.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"conversation_details_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGlB,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAA8D,MAAM,OAAO,CAAA;AAalF,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,8BAA8B,qBAwFlF"}
1
+ {"version":3,"file":"conversation_details_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAON,MAAM,OAAO,CAAA;AAmDd,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,8BAA8B,qBAqHlF"}
package/build/screens/conversation_details_screen.js CHANGED
@@ -1,16 +1,32 @@
1
- import { useNavigation, useTheme as useNavigationTheme, } from '@react-navigation/native';
2
- import React, { useCallback, useEffect, useState } from 'react';
3
- import { FlatList, StyleSheet, TextInput, View } from 'react-native';
4
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
1
+ import { useNavigation } from '@react-navigation/native';
2
+ import React, { useCallback, useEffect, useState, } from 'react';
3
+ import { StyleSheet, TextInput, View, } from 'react-native';
5
4
  import { Avatar, Badge, Heading, Icon, Switch, Text } from '../components';
6
5
  import { useSuspenseGet, useTheme } from '../hooks';
7
6
  import { useConversation, useConversationMute, useConversationUpdate, } from '../hooks/use_conversation';
7
+ import { isDefined } from '../types';
8
8
  import { HeaderRightButton } from '../navigation/header';
9
+ import { FlashList } from '@shopify/flash-list';
10
+ import { space } from '../utils';
11
+ // =========================================
12
+ // ====== Factory Constants & Types ========
13
+ // =========================================
14
+ var SectionTypes;
15
+ (function (SectionTypes) {
16
+ SectionTypes[SectionTypes["header"] = 0] = "header";
17
+ SectionTypes[SectionTypes["hidden"] = 1] = "hidden";
18
+ SectionTypes[SectionTypes["members"] = 2] = "members";
19
+ SectionTypes[SectionTypes["setting"] = 3] = "setting";
20
+ SectionTypes[SectionTypes["view"] = 4] = "view";
21
+ })(SectionTypes || (SectionTypes = {}));
9
22
  export function ConversationDetailsScreen({ route }) {
10
- const styles = useStyles();
11
23
  const navigation = useNavigation();
24
+ const styles = useStyles();
12
25
  const { data: conversation } = useConversation(route.params);
13
- const canUpdate = conversation.memberAbility?.canUpdate;
26
+ const [title, setTitle] = useState(conversation.title);
27
+ const { muted, setMuted } = useConversationMute(route.params);
28
+ const { mutate: saveTitle } = useConversationUpdate(route.params);
29
+ const canUpdate = conversation.memberAbility?.canUpdate || false;
14
30
  const { data: members } = useSuspenseGet({
15
31
  url: `/me/conversations/${route.params.conversation_id}/members`,
16
32
  data: {
@@ -20,9 +36,10 @@ export function ConversationDetailsScreen({ route }) {
20
36
  },
21
37
  },
22
38
  });
23
- const { muted, setMuted } = useConversationMute(route.params);
24
- const { mutate: saveTitle } = useConversationUpdate(route.params);
25
- const [title, setTitle] = useState(conversation.title);
39
+ const memberItems = members.map(data => ({
40
+ type: SectionTypes.members,
41
+ data,
42
+ }));
26
43
  const HeaderRight = useCallback(() => {
27
44
  return (<HeaderRightButton onPress={() => {
28
45
  saveTitle({ title });
@@ -36,120 +53,180 @@ export function ConversationDetailsScreen({ route }) {
36
53
  headerRight: HeaderRight,
37
54
  });
38
55
  }, [HeaderRight, navigation]);
39
- return (<View style={styles.container}>
40
- <SectionList>
41
- <View style={styles.titleContainer}>
42
- <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
43
- <Text variant="tertiary">Title</Text>
44
- {!canUpdate && <Icon name="general.lock"/>}
45
- </View>
46
- <TextInput editable={canUpdate} onChangeText={setTitle} style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]} value={title}/>
47
- </View>
48
- </SectionList>
49
- <SectionList>
50
- <SectionListHeader>Settings</SectionListHeader>
51
- <View style={styles.muteContainer}>
52
- <Text variant="plain" style={styles.muteText}>
53
- Mute
54
- </Text>
55
- <Switch value={muted} onChange={() => setMuted(!muted)}/>
56
+ const listData = [
57
+ {
58
+ type: SectionTypes.view,
59
+ data: {
60
+ children: <TitleInput canUpdate={canUpdate} title={title} setTitle={setTitle}/>,
61
+ style: styles.titleContainer,
62
+ },
63
+ },
64
+ {
65
+ type: SectionTypes.header,
66
+ data: { title: 'Settings' },
67
+ sectionStyle: styles.addBottomBorder,
68
+ },
69
+ {
70
+ type: SectionTypes.setting,
71
+ data: {
72
+ title: 'Mute',
73
+ rightItem: <Switch value={muted} onChange={() => setMuted(!muted)}/>,
74
+ },
75
+ },
76
+ {
77
+ type: SectionTypes.header,
78
+ data: { title: 'Members' },
79
+ },
80
+ ...memberItems,
81
+ ].filter(item => item.type !== SectionTypes.hidden);
82
+ const headerIndices = listData
83
+ .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))
84
+ .filter(isDefined);
85
+ return (<FlashList data={listData} estimatedItemSize={52} contentContainerStyle={styles.contentContainer} renderItem={({ item, index }) => {
86
+ const [isStart, isEnd] = [
87
+ index === 0 || headerIndices.includes(index),
88
+ index === listData.length - 1 || headerIndices.includes(index + 1),
89
+ ];
90
+ switch (item.type) {
91
+ case SectionTypes.header:
92
+ return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
93
+ <SectionHeading title={item.data.title}/>
94
+ </ListSection>);
95
+ case SectionTypes.members:
96
+ return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
97
+ <MemberRow {...item.data}/>
98
+ </ListSection>);
99
+ case SectionTypes.setting:
100
+ return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
101
+ <SettingRow {...item.data}/>
102
+ </ListSection>);
103
+ case SectionTypes.view:
104
+ return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
105
+ <View {...item.data} style={item.data.style}/>
106
+ </ListSection>);
107
+ default:
108
+ return null;
109
+ }
110
+ }}/>);
111
+ }
112
+ function ListSection({ isStart, isEnd, style, children }) {
113
+ const styles = useStyles({ isStart, isEnd });
114
+ return (<View style={styles.sectionOuter}>
115
+ <View style={[styles.sectionInner, style]}>{children}</View>
116
+ </View>);
117
+ }
118
+ function SectionHeading({ title }) {
119
+ const styles = useStyles();
120
+ return (<View style={styles.header}>
121
+ <Heading variant="h3">{title}</Heading>
122
+ </View>);
123
+ }
124
+ function TitleInput({ canUpdate, title, setTitle }) {
125
+ const styles = useStyles();
126
+ return (<>
127
+ <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
128
+ <Text variant="tertiary">Title</Text>
129
+ {!canUpdate && <Icon name="general.lock"/>}
130
+ </View>
131
+ <TextInput editable={canUpdate} onChangeText={setTitle} style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]} value={title}/>
132
+ </>);
133
+ }
134
+ function SettingRow({ title, style, titleStyle = {}, subtitle, rightItem, rightItemStyle = {}, }) {
135
+ const styles = useStyles();
136
+ return (<View style={[styles.settingRow, style]}>
137
+ <View style={styles.settingRowContent}>
138
+ <Text variant="plain" style={[styles.settingRowText, titleStyle]}>
139
+ {title}
140
+ </Text>
141
+ {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
142
+ </View>
143
+ {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
144
+ </View>);
145
+ }
146
+ function MemberRow({ avatar, name, style, badges }) {
147
+ const styles = useStyles();
148
+ return (<View style={[styles.member, style]}>
149
+ <Avatar sourceUri={avatar}/>
150
+ <View style={styles.memberBody}>
151
+ <Text style={styles.memberName}>{name}</Text>
152
+ <View style={styles.memberBadges}>
153
+ {badges?.map((badge, index) => (<View key={index} style={styles.memberBadge}>
154
+ <Badge label={badge.title}/>
155
+ </View>))}
56
156
  </View>
57
- </SectionList>
58
- <SectionList>
59
- <SectionListHeader divider={false}>Members</SectionListHeader>
60
- <FlatList data={members} renderItem={({ item }) => (<View style={styles.member}>
61
- <Avatar sourceUri={item.avatar}/>
62
- <View style={styles.memberBody}>
63
- <Text style={styles.memberName}>{item.name}</Text>
64
- <View style={styles.memberBadges}>
65
- {item.badges?.map((badge, index) => (<View key={index} style={styles.memberBadge}>
66
- <Badge label={badge.title}/>
67
- </View>))}
68
- </View>
69
- </View>
70
- </View>)} keyExtractor={item => item.id} contentContainerStyle={styles.listContainer}/>
71
- </SectionList>
157
+ </View>
72
158
  </View>);
73
159
  }
74
- const useStyles = () => {
75
- const theme = useTheme();
76
- const { bottom } = useSafeAreaInsets();
160
+ // =================================
161
+ // ====== Styles ===================
162
+ // =================================
163
+ const useStyles = ({ isStart, isEnd } = {}) => {
164
+ const { colors } = useTheme();
77
165
  return StyleSheet.create({
78
- container: {
79
- flex: 1,
80
- paddingTop: 16,
81
- paddingHorizontal: 16,
82
- backgroundColor: theme.colors.fillColorNeutral080,
83
- paddingBottom: bottom,
84
- gap: 16,
85
- },
86
- listContainer: {
87
- gap: 12,
166
+ contentContainer: {
167
+ backgroundColor: colors.fillColorNeutral080,
168
+ padding: space(2),
88
169
  },
89
- member: {
90
- flexDirection: 'row',
91
- gap: 8,
170
+ sectionOuter: {
171
+ paddingTop: space(1),
172
+ paddingLeft: space(2),
173
+ backgroundColor: colors.fillColorNeutral100Inverted,
174
+ borderTopLeftRadius: isStart ? space(1) : 0,
175
+ borderTopRightRadius: isStart ? space(1) : 0,
176
+ borderBottomLeftRadius: isEnd ? space(1) : 0,
177
+ borderBottomRightRadius: isEnd ? space(1) : 0,
178
+ marginBottom: isEnd ? space(2) : 0,
92
179
  },
93
- memberBody: {
94
- gap: 4,
180
+ sectionInner: {
181
+ borderBottomWidth: 0,
182
+ borderBottomColor: colors.borderColorDefaultBase,
183
+ paddingRight: space(2),
184
+ paddingBottom: space(1),
95
185
  },
96
- memberName: {
97
- lineHeight: 16,
186
+ addBottomBorder: {
187
+ borderBottomWidth: isEnd ? 0 : 1,
98
188
  },
99
- memberBadges: {
189
+ titleContainer: {},
190
+ titleLabel: {},
191
+ titleLabelContainer: {
100
192
  flexDirection: 'row',
193
+ alignItems: 'center',
101
194
  gap: 8,
102
195
  },
103
- memberBadge: {},
104
- muteContainer: {
196
+ titleInput: {
197
+ color: colors.textColorDefaultPrimary,
198
+ },
199
+ titleInputDisabled: { opacity: 0.7 },
200
+ header: {
201
+ paddingVertical: space(1.5),
202
+ },
203
+ settingRow: {
105
204
  flexDirection: 'row',
106
205
  justifyContent: 'space-between',
107
206
  alignItems: 'center',
207
+ gap: space(1),
208
+ },
209
+ settingRowContent: {
210
+ flex: 1,
108
211
  },
109
- muteText: {
212
+ settingRowText: {
110
213
  lineHeight: 20,
111
214
  },
112
- titleContainer: {},
113
- titleLabel: {},
114
- titleLabelContainer: {
215
+ member: {
115
216
  flexDirection: 'row',
116
- alignItems: 'center',
117
- gap: 8,
118
- },
119
- titleInput: {
120
- color: theme.colors.textColorDefaultPrimary,
217
+ gap: space(1),
121
218
  },
122
- titleInputDisabled: { opacity: 0.7 },
123
- });
124
- };
125
- const SectionList = ({ children }) => {
126
- const styles = useSectionListStyles();
127
- return <View style={styles.container}>{children}</View>;
128
- };
129
- const SectionListHeader = ({ children, divider = true, }) => {
130
- const styles = useSectionListStyles();
131
- return (<Heading variant="h3" style={[styles.heading, divider && styles.headingDivider]}>
132
- {children}
133
- </Heading>);
134
- };
135
- const useSectionListStyles = () => {
136
- const theme = useTheme();
137
- const navigationTheme = useNavigationTheme();
138
- return StyleSheet.create({
139
- container: {
140
- padding: 16,
141
- backgroundColor: navigationTheme.colors.card,
142
- borderRadius: 8,
143
- flexDirection: 'column',
144
- gap: 8,
219
+ memberBody: {
220
+ gap: space(0.5),
145
221
  },
146
- heading: {
147
- paddingBottom: 12,
222
+ memberName: {
223
+ lineHeight: space(2),
148
224
  },
149
- headingDivider: {
150
- borderBottomWidth: 1,
151
- borderBottomColor: theme.colors.fillColorNeutral050Base,
225
+ memberBadges: {
226
+ flexDirection: 'row',
227
+ gap: space(1),
152
228
  },
229
+ memberBadge: {},
153
230
  });
154
231
  };
155
232
  //# sourceMappingURL=conversation_details_screen.js.map
package/build/screens/conversation_details_screen.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"conversation_details_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n StaticScreenProps,\n useNavigation,\n useTheme as useNavigationTheme,\n} from '@react-navigation/native'\nimport React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'\nimport { FlatList, StyleSheet, TextInput, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport {\n useConversation,\n useConversationMute,\n useConversationUpdate,\n} from '../hooks/use_conversation'\nimport { MemberResource } from '../types'\nimport { HeaderRightButton } from '../navigation/header'\n\nexport type ConversationDetailsScreenProps = StaticScreenProps<{\n conversation_id: string\n}>\n\nexport function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {\n const styles = useStyles()\n const navigation = useNavigation()\n const { data: conversation } = useConversation(route.params)\n const canUpdate = conversation.memberAbility?.canUpdate\n\n const { data: members } = useSuspenseGet<MemberResource[]>({\n url: `/me/conversations/${route.params.conversation_id}/members`,\n data: {\n include: ['person'],\n fields: {\n Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],\n },\n },\n })\n\n const { muted, setMuted } = useConversationMute(route.params)\n const { mutate: saveTitle } = useConversationUpdate(route.params)\n const [title, setTitle] = useState(conversation.title)\n const HeaderRight = useCallback(() => {\n return (\n <HeaderRightButton\n onPress={() => {\n saveTitle({ title })\n navigation.goBack()\n }}\n >\n Done\n </HeaderRightButton>\n )\n }, [navigation, saveTitle, title])\n\n useEffect(() => {\n navigation.setOptions({\n headerRight: HeaderRight,\n })\n }, [HeaderRight, navigation])\n\n return (\n <View style={styles.container}>\n <SectionList>\n <View style={styles.titleContainer}>\n <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>\n <Text variant=\"tertiary\">Title</Text>\n {!canUpdate && <Icon name=\"general.lock\" />}\n </View>\n <TextInput\n editable={canUpdate}\n onChangeText={setTitle}\n style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}\n value={title}\n />\n </View>\n </SectionList>\n <SectionList>\n <SectionListHeader>Settings</SectionListHeader>\n <View style={styles.muteContainer}>\n <Text variant=\"plain\" style={styles.muteText}>\n Mute\n </Text>\n <Switch value={muted} onChange={() => setMuted(!muted)} />\n </View>\n </SectionList>\n <SectionList>\n <SectionListHeader divider={false}>Members</SectionListHeader>\n <FlatList\n data={members}\n renderItem={({ item }) => (\n <View style={styles.member}>\n <Avatar sourceUri={item.avatar} />\n <View style={styles.memberBody}>\n <Text style={styles.memberName}>{item.name}</Text>\n <View style={styles.memberBadges}>\n {item.badges?.map((badge, index) => (\n <View key={index} style={styles.memberBadge}>\n <Badge label={badge.title} />\n </View>\n ))}\n </View>\n </View>\n </View>\n )}\n keyExtractor={item => item.id}\n contentContainerStyle={styles.listContainer}\n />\n </SectionList>\n </View>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n const { bottom } = useSafeAreaInsets()\n\n return StyleSheet.create({\n container: {\n flex: 1,\n paddingTop: 16,\n paddingHorizontal: 16,\n backgroundColor: theme.colors.fillColorNeutral080,\n paddingBottom: bottom,\n gap: 16,\n },\n listContainer: {\n gap: 12,\n },\n member: {\n flexDirection: 'row',\n gap: 8,\n },\n memberBody: {\n gap: 4,\n },\n memberName: {\n lineHeight: 16,\n },\n memberBadges: {\n flexDirection: 'row',\n gap: 8,\n },\n memberBadge: {},\n muteContainer: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n muteText: {\n lineHeight: 20,\n },\n titleContainer: {},\n titleLabel: {},\n titleLabelContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n titleInput: {\n color: theme.colors.textColorDefaultPrimary,\n },\n titleInputDisabled: { opacity: 0.7 },\n })\n}\n\nconst SectionList = ({ children }: PropsWithChildren) => {\n const styles = useSectionListStyles()\n\n return <View style={styles.container}>{children}</View>\n}\n\nconst SectionListHeader = ({\n children,\n divider = true,\n}: PropsWithChildren & { divider?: boolean }) => {\n const styles = useSectionListStyles()\n\n return (\n <Heading variant=\"h3\" style={[styles.heading, divider && styles.headingDivider]}>\n {children}\n </Heading>\n )\n}\n\nconst useSectionListStyles = () => {\n const theme = useTheme()\n const navigationTheme = useNavigationTheme()\n\n return StyleSheet.create({\n container: {\n padding: 16,\n backgroundColor: navigationTheme.colors.card,\n borderRadius: 8,\n flexDirection: 'column',\n gap: 8,\n },\n heading: {\n paddingBottom: 12,\n },\n headingDivider: {\n borderBottomWidth: 1,\n borderBottomColor: theme.colors.fillColorNeutral050Base,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"conversation_details_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, {\n useCallback,\n useEffect,\n useState,\n type SetStateAction,\n type Dispatch,\n type ReactNode,\n} from 'react'\nimport {\n StyleSheet,\n TextInput,\n View,\n type TextStyle,\n type ViewStyle,\n type ViewProps,\n} from 'react-native'\nimport { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport {\n useConversation,\n useConversationMute,\n useConversationUpdate,\n} from '../hooks/use_conversation'\nimport { MemberBadge, MemberResource, isDefined } from '../types'\nimport { HeaderRightButton } from '../navigation/header'\nimport { FlashList } from '@shopify/flash-list'\nimport { space } from '../utils'\n\n// =========================================\n// ====== Factory Constants & Types ========\n// =========================================\n\nenum SectionTypes {\n header,\n hidden,\n members,\n setting,\n view,\n}\n\ntype SectionListData = Array<\n | DataItem<{ title: string }, SectionTypes.header>\n | DataItem<MemberResource, SectionTypes.members>\n | DataItem<ViewProps, SectionTypes.view>\n | DataItem<{ title: string }, SectionTypes.setting>\n | DataItem<any, SectionTypes.hidden>\n>\n\ninterface DataItem<T, TName extends SectionTypes> {\n type: TName\n data: T\n sectionStyle?: ViewStyle\n}\n\n// =================================\n// ====== Components ===============\n// =================================\n\nexport type ConversationDetailsScreenProps = StaticScreenProps<{\n conversation_id: string\n}>\n\nexport function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {\n const navigation = useNavigation()\n const styles = useStyles()\n\n const { data: conversation } = useConversation(route.params)\n const [title, setTitle] = useState(conversation.title)\n const { muted, setMuted } = useConversationMute(route.params)\n const { mutate: saveTitle } = useConversationUpdate(route.params)\n\n const canUpdate = conversation.memberAbility?.canUpdate || false\n const { data: members } = useSuspenseGet<MemberResource[]>({\n url: `/me/conversations/${route.params.conversation_id}/members`,\n data: {\n include: ['person'],\n fields: {\n Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],\n },\n },\n })\n\n const memberItems = members.map(data => ({\n type: SectionTypes.members,\n data,\n }))\n\n const HeaderRight = useCallback(() => {\n return (\n <HeaderRightButton\n onPress={() => {\n saveTitle({ title })\n navigation.goBack()\n }}\n >\n Done\n </HeaderRightButton>\n )\n }, [navigation, saveTitle, title])\n\n useEffect(() => {\n navigation.setOptions({\n headerRight: HeaderRight,\n })\n }, [HeaderRight, navigation])\n\n const listData = [\n {\n type: SectionTypes.view,\n data: {\n children: <TitleInput canUpdate={canUpdate} title={title} setTitle={setTitle} />,\n style: styles.titleContainer,\n },\n },\n {\n type: SectionTypes.header,\n data: { title: 'Settings' },\n sectionStyle: styles.addBottomBorder,\n },\n {\n type: SectionTypes.setting,\n data: {\n title: 'Mute',\n rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,\n },\n },\n {\n type: SectionTypes.header,\n data: { title: 'Members' },\n },\n ...memberItems,\n ].filter(item => item.type !== SectionTypes.hidden)\n\n const headerIndices = listData\n .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))\n .filter(isDefined)\n\n return (\n <FlashList\n data={listData as SectionListData}\n estimatedItemSize={52}\n contentContainerStyle={styles.contentContainer}\n renderItem={({ item, index }) => {\n const [isStart, isEnd] = [\n index === 0 || headerIndices.includes(index),\n index === listData.length - 1 || headerIndices.includes(index + 1),\n ]\n\n switch (item.type) {\n case SectionTypes.header:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <SectionHeading title={item.data.title} />\n </ListSection>\n )\n case SectionTypes.members:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <MemberRow {...item.data} />\n </ListSection>\n )\n case SectionTypes.setting:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <SettingRow {...item.data} />\n </ListSection>\n )\n case SectionTypes.view:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <View {...item.data} style={item.data.style} />\n </ListSection>\n )\n default:\n return null\n }\n }}\n />\n )\n}\n\ninterface ListSectionProps {\n isStart?: boolean\n isEnd?: boolean\n style?: ViewStyle\n children: ReactNode\n}\n\nfunction ListSection({ isStart, isEnd, style, children }: ListSectionProps) {\n const styles = useStyles({ isStart, isEnd })\n\n return (\n <View style={styles.sectionOuter}>\n <View style={[styles.sectionInner, style]}>{children}</View>\n </View>\n )\n}\n\ninterface SectionHeadingProps {\n title: string\n}\n\nfunction SectionHeading({ title }: SectionHeadingProps) {\n const styles = useStyles()\n\n return (\n <View style={styles.header}>\n <Heading variant=\"h3\">{title}</Heading>\n </View>\n )\n}\n\ninterface InputProps {\n canUpdate: boolean\n title: string\n setTitle: Dispatch<SetStateAction<string>>\n}\n\nfunction TitleInput({ canUpdate, title, setTitle }: InputProps) {\n const styles = useStyles()\n return (\n <>\n <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>\n <Text variant=\"tertiary\">Title</Text>\n {!canUpdate && <Icon name=\"general.lock\" />}\n </View>\n <TextInput\n editable={canUpdate}\n onChangeText={setTitle}\n style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}\n value={title}\n />\n </>\n )\n}\n\ninterface SettingRowProps {\n title: string\n style?: ViewStyle\n rightItem?: ReactNode\n titleStyle?: TextStyle\n subtitle?: string\n rightItemStyle?: ViewStyle\n}\n\nfunction SettingRow({\n title,\n style,\n titleStyle = {},\n subtitle,\n rightItem,\n rightItemStyle = {},\n}: SettingRowProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.settingRow, style]}>\n <View style={styles.settingRowContent}>\n <Text variant=\"plain\" style={[styles.settingRowText, titleStyle]}>\n {title}\n </Text>\n {Boolean(subtitle) && <Text variant=\"footnote\">{subtitle}</Text>}\n </View>\n {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}\n </View>\n )\n}\n\ninterface MemberRowProps {\n avatar: string\n name: string\n style?: ViewStyle\n badges?: MemberBadge[]\n}\n\nfunction MemberRow({ avatar, name, style, badges }: MemberRowProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.member, style]}>\n <Avatar sourceUri={avatar} />\n <View style={styles.memberBody}>\n <Text style={styles.memberName}>{name}</Text>\n <View style={styles.memberBadges}>\n {badges?.map((badge, index) => (\n <View key={index} style={styles.memberBadge}>\n <Badge label={badge.title} />\n </View>\n ))}\n </View>\n </View>\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n contentContainer: {\n backgroundColor: colors.fillColorNeutral080,\n padding: space(2),\n },\n sectionOuter: {\n paddingTop: space(1),\n paddingLeft: space(2),\n backgroundColor: colors.fillColorNeutral100Inverted,\n borderTopLeftRadius: isStart ? space(1) : 0,\n borderTopRightRadius: isStart ? space(1) : 0,\n borderBottomLeftRadius: isEnd ? space(1) : 0,\n borderBottomRightRadius: isEnd ? space(1) : 0,\n marginBottom: isEnd ? space(2) : 0,\n },\n sectionInner: {\n borderBottomWidth: 0,\n borderBottomColor: colors.borderColorDefaultBase,\n paddingRight: space(2),\n paddingBottom: space(1),\n },\n addBottomBorder: {\n borderBottomWidth: isEnd ? 0 : 1,\n },\n titleContainer: {},\n titleLabel: {},\n titleLabelContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n titleInput: {\n color: colors.textColorDefaultPrimary,\n },\n titleInputDisabled: { opacity: 0.7 },\n header: {\n paddingVertical: space(1.5),\n },\n settingRow: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n gap: space(1),\n },\n settingRowContent: {\n flex: 1,\n },\n settingRowText: {\n lineHeight: 20,\n },\n member: {\n flexDirection: 'row',\n gap: space(1),\n },\n memberBody: {\n gap: space(0.5),\n },\n memberName: {\n lineHeight: space(2),\n },\n memberBadges: {\n flexDirection: 'row',\n gap: space(1),\n },\n memberBadge: {},\n })\n}\n"]}
package/build/types/utils/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export type DeepPartial<T> = {
2
2
  [P in keyof T]?: DeepPartial<T[P]>;
3
3
  };
4
+ export declare function isDefined<T>(argument: T | undefined): argument is T;
4
5
  //# sourceMappingURL=index.d.ts.map
package/build/types/utils/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/utils/index.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/utils/index.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC,CAAA;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,SAAS,GAAG,QAAQ,IAAI,CAAC,CAEnE"}
package/build/types/utils/index.js CHANGED
@@ -1,4 +1,6 @@
1
1
  // Sets all the properties of of a deeply nested object to optional.
2
2
  // Example: `DeepPartial<ChatTheme>`
3
- export {};
3
+ export function isDefined(argument) {
4
+ return argument !== undefined;
5
+ }
4
6
  //# sourceMappingURL=index.js.map
package/build/types/utils/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/utils/index.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oCAAoC","sourcesContent":["// Sets all the properties of of a deeply nested object to optional.\n// Example: `DeepPartial<ChatTheme>`\n\nexport type DeepPartial<T> = {\n [P in keyof T]?: DeepPartial<T[P]>\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/utils/index.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oCAAoC;AAMpC,MAAM,UAAU,SAAS,CAAI,QAAuB;IAClD,OAAO,QAAQ,KAAK,SAAS,CAAA;AAC/B,CAAC","sourcesContent":["// Sets all the properties of of a deeply nested object to optional.\n// Example: `DeepPartial<ChatTheme>`\n\nexport type DeepPartial<T> = {\n [P in keyof T]?: DeepPartial<T[P]>\n}\n\nexport function isDefined<T>(argument: T | undefined): argument is T {\n return argument !== undefined\n}\n"]}
package/build/vendor/tapestry/alias_tokens_color_map.d.ts CHANGED
@@ -1,6 +1,12 @@
1
1
  export declare const aliasTokensColorMap: {
2
2
  readonly light: {
3
3
  readonly name: string;
4
+ readonly borderColorDefaultBase: string;
5
+ readonly borderColorDefaultDark: string;
6
+ readonly borderColorDefaultDarker: string;
7
+ readonly borderColorDefaultDisabled: string;
8
+ readonly borderColorDefaultDim: string;
9
+ readonly borderColorDefaultWhite: string;
4
10
  readonly iconColorDefaultPrimary: string;
5
11
  readonly iconColorDefaultSecondary: string;
6
12
  readonly iconColorDefaultDim: string;
@@ -32,6 +38,12 @@ export declare const aliasTokensColorMap: {
32
38
  };
33
39
  readonly dark: {
34
40
  readonly name: string;
41
+ readonly borderColorDefaultBase: string;
42
+ readonly borderColorDefaultDark: string;
43
+ readonly borderColorDefaultDarker: string;
44
+ readonly borderColorDefaultDisabled: string;
45
+ readonly borderColorDefaultDim: string;
46
+ readonly borderColorDefaultWhite: string;
35
47
  readonly iconColorDefaultPrimary: string;
36
48
  readonly iconColorDefaultSecondary: string;
37
49
  readonly iconColorDefaultDim: string;
package/build/vendor/tapestry/alias_tokens_color_map.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AAkHA,eAAO,MAAM,mBAAmB;;uBA9DxB,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;kCACX,MAAM;sCA7DF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;;uBAkC7B,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;kCACX,MAAM;sCA7DF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;CAmG3B,CAAA"}
1
+ {"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AAoIA,eAAO,MAAM,mBAAmB;;uBAhFxB,MAAM;yCACY,MAAM;yCACN,MAAM;2CACJ,MAAM;6CACJ,MAAM;wCACX,MAAM;0CACJ,MAAM;0CACN,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;kCACX,MAAM;sCAnEF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;;uBAkC7B,MAAM;yCACY,MAAM;yCACN,MAAM;2CACJ,MAAM;6CACJ,MAAM;wCACX,MAAM;0CACJ,MAAM;0CACN,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;kCACX,MAAM;sCAnEF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;CAqH3B,CAAA"}
package/build/vendor/tapestry/alias_tokens_color_map.js CHANGED
@@ -29,6 +29,12 @@ const neutralsDark = {
29
29
  };
30
30
  const semanticAliasesLight = {
31
31
  name: 'light',
32
+ borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,
33
+ borderColorDefaultDark: neutralsLight.fillColorNeutral040,
34
+ borderColorDefaultDarker: neutralsLight.fillColorNeutral020,
35
+ borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,
36
+ borderColorDefaultDim: neutralsLight.fillColorNeutral070,
37
+ borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,
32
38
  iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,
33
39
  iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,
34
40
  iconColorDefaultDim: neutralsLight.fillColorNeutral030,
@@ -49,6 +55,12 @@ const semanticAliasesLight = {
49
55
  };
50
56
  const semanticAliasesDark = {
51
57
  name: 'dark',
58
+ borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,
59
+ borderColorDefaultDark: neutralsDark.fillColorNeutral040,
60
+ borderColorDefaultDarker: neutralsDark.fillColorNeutral020,
61
+ borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,
62
+ borderColorDefaultDim: neutralsDark.fillColorNeutral070,
63
+ borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,
52
64
  iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,
53
65
  iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,
54
66
  iconColorDefaultDim: neutralsDark.fillColorNeutral030,
package/build/vendor/tapestry/alias_tokens_color_map.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from './tokens'\n\n// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface NeutralColors {\n name: string\n fillColorNeutral000: string\n fillColorNeutral010: string\n fillColorNeutral020: string\n fillColorNeutral030: string\n fillColorNeutral040: string\n fillColorNeutral050Base: string\n fillColorNeutral060: string\n fillColorNeutral070: string\n fillColorNeutral080: string\n fillColorNeutral090: string\n fillColorNeutral100Inverted: string\n}\n\nconst neutralsLight: NeutralColors = {\n name: 'light',\n fillColorNeutral000: tokens.colorNeutral12,\n fillColorNeutral010: tokens.colorNeutral24,\n fillColorNeutral020: tokens.colorNeutral45,\n fillColorNeutral030: tokens.colorNeutral58,\n fillColorNeutral040: tokens.colorNeutral81,\n fillColorNeutral050Base: tokens.colorNeutral88,\n fillColorNeutral060: tokens.colorNeutral93,\n fillColorNeutral070: tokens.colorNeutral95,\n fillColorNeutral080: tokens.colorNeutral97,\n fillColorNeutral090: tokens.colorNeutral98,\n fillColorNeutral100Inverted: tokens.colorNeutral100White,\n} as const\n\nconst neutralsDark: NeutralColors = {\n name: 'dark',\n fillColorNeutral000: tokens.colorNeutral98,\n fillColorNeutral010: tokens.colorNeutral88,\n fillColorNeutral020: tokens.colorNeutral68,\n fillColorNeutral030: tokens.colorNeutral50,\n fillColorNeutral040: tokens.colorNeutral32,\n fillColorNeutral050Base: tokens.colorNeutral24,\n fillColorNeutral060: tokens.colorNeutral19,\n fillColorNeutral070: tokens.colorNeutral17,\n fillColorNeutral080: tokens.colorNeutral15,\n fillColorNeutral090: tokens.colorNeutral12,\n fillColorNeutral100Inverted: tokens.colorNeutral7,\n} as const\n\ninterface SemanticAliasesColors {\n name: string\n iconColorDefaultPrimary: string\n iconColorDefaultSecondary: string\n iconColorDefaultDim: string\n iconColorDefaultDisabled: string\n iconColorDefaultInverted: string\n textColorDefaultHeadline: string\n textColorDefaultPrimary: string\n textColorDefaultSecondary: string\n textColorDefaultDisabled: string\n textColorDefaultPlaceholder: string\n textColorDefaultInverted: string\n fillColorInteractionOnlineDefault: string\n fillColorInteractionDefault: string\n fillColorStatusErrorMedium: string\n fillColorButtonNeutralSolidDisabled: string\n androidRippleNeutral: string\n needsDesignPass: string\n}\n\nconst semanticAliasesLight: SemanticAliasesColors = {\n name: 'light',\n iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n iconColorDefaultDim: neutralsLight.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsLight.fillColorNeutral000,\n textColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n textColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n textColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsLight.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral100White,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefault,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyDark020,\n needsDesignPass: 'hotpink',\n} as const\n\nconst semanticAliasesDark: SemanticAliasesColors = {\n name: 'dark',\n iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n iconColorDefaultDim: neutralsDark.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsDark.fillColorNeutral000,\n textColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n textColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n textColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsDark.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral7,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefaultDark,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyLight020,\n needsDesignPass: 'pink',\n}\n\nexport const aliasTokensColorMap = {\n light: { ...neutralsLight, ...semanticAliasesLight },\n dark: { ...neutralsDark, ...semanticAliasesDark },\n} as const\n"]}
1
+ {"version":3,"file":"alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from './tokens'\n\n// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface NeutralColors {\n name: string\n fillColorNeutral000: string\n fillColorNeutral010: string\n fillColorNeutral020: string\n fillColorNeutral030: string\n fillColorNeutral040: string\n fillColorNeutral050Base: string\n fillColorNeutral060: string\n fillColorNeutral070: string\n fillColorNeutral080: string\n fillColorNeutral090: string\n fillColorNeutral100Inverted: string\n}\n\nconst neutralsLight: NeutralColors = {\n name: 'light',\n fillColorNeutral000: tokens.colorNeutral12,\n fillColorNeutral010: tokens.colorNeutral24,\n fillColorNeutral020: tokens.colorNeutral45,\n fillColorNeutral030: tokens.colorNeutral58,\n fillColorNeutral040: tokens.colorNeutral81,\n fillColorNeutral050Base: tokens.colorNeutral88,\n fillColorNeutral060: tokens.colorNeutral93,\n fillColorNeutral070: tokens.colorNeutral95,\n fillColorNeutral080: tokens.colorNeutral97,\n fillColorNeutral090: tokens.colorNeutral98,\n fillColorNeutral100Inverted: tokens.colorNeutral100White,\n} as const\n\nconst neutralsDark: NeutralColors = {\n name: 'dark',\n fillColorNeutral000: tokens.colorNeutral98,\n fillColorNeutral010: tokens.colorNeutral88,\n fillColorNeutral020: tokens.colorNeutral68,\n fillColorNeutral030: tokens.colorNeutral50,\n fillColorNeutral040: tokens.colorNeutral32,\n fillColorNeutral050Base: tokens.colorNeutral24,\n fillColorNeutral060: tokens.colorNeutral19,\n fillColorNeutral070: tokens.colorNeutral17,\n fillColorNeutral080: tokens.colorNeutral15,\n fillColorNeutral090: tokens.colorNeutral12,\n fillColorNeutral100Inverted: tokens.colorNeutral7,\n} as const\n\ninterface SemanticAliasesColors {\n name: string\n borderColorDefaultBase: string\n borderColorDefaultDark: string\n borderColorDefaultDarker: string\n borderColorDefaultDisabled: string\n borderColorDefaultDim: string\n borderColorDefaultWhite: string\n iconColorDefaultPrimary: string\n iconColorDefaultSecondary: string\n iconColorDefaultDim: string\n iconColorDefaultDisabled: string\n iconColorDefaultInverted: string\n textColorDefaultHeadline: string\n textColorDefaultPrimary: string\n textColorDefaultSecondary: string\n textColorDefaultDisabled: string\n textColorDefaultPlaceholder: string\n textColorDefaultInverted: string\n fillColorInteractionOnlineDefault: string\n fillColorInteractionDefault: string\n fillColorStatusErrorMedium: string\n fillColorButtonNeutralSolidDisabled: string\n androidRippleNeutral: string\n needsDesignPass: string\n}\n\nconst semanticAliasesLight: SemanticAliasesColors = {\n name: 'light',\n borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,\n borderColorDefaultDark: neutralsLight.fillColorNeutral040,\n borderColorDefaultDarker: neutralsLight.fillColorNeutral020,\n borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,\n borderColorDefaultDim: neutralsLight.fillColorNeutral070,\n borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,\n iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n iconColorDefaultDim: neutralsLight.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsLight.fillColorNeutral000,\n textColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n textColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n textColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsLight.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral100White,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefault,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyDark020,\n needsDesignPass: 'hotpink',\n} as const\n\nconst semanticAliasesDark: SemanticAliasesColors = {\n name: 'dark',\n borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,\n borderColorDefaultDark: neutralsDark.fillColorNeutral040,\n borderColorDefaultDarker: neutralsDark.fillColorNeutral020,\n borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,\n borderColorDefaultDim: neutralsDark.fillColorNeutral070,\n borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,\n iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n iconColorDefaultDim: neutralsDark.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsDark.fillColorNeutral000,\n textColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n textColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n textColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsDark.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral7,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefaultDark,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyLight020,\n needsDesignPass: 'pink',\n}\n\nexport const aliasTokensColorMap = {\n light: { ...neutralsLight, ...semanticAliasesLight },\n dark: { ...neutralsDark, ...semanticAliasesDark },\n} as const\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/chat-react-native",
3
- "version": "2.2.1",
3
+ "version": "2.2.2-rc.0",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -52,5 +52,5 @@
52
52
  "prettier": "^3.4.2",
53
53
  "typescript": "<5.6.0"
54
54
  },
55
- "gitHead": "741dafe86166ebbf82c7792a8bf9cdf56e158cdd"
55
+ "gitHead": "85b57656095e4430283d8bcb345bf56875172a9f"
56
56
  }
package/src/screens/conversation_details_screen.tsx CHANGED
@@ -1,11 +1,20 @@
1
+ import { StaticScreenProps, useNavigation } from '@react-navigation/native'
2
+ import React, {
3
+ useCallback,
4
+ useEffect,
5
+ useState,
6
+ type SetStateAction,
7
+ type Dispatch,
8
+ type ReactNode,
9
+ } from 'react'
1
10
  import {
2
- StaticScreenProps,
3
- useNavigation,
4
- useTheme as useNavigationTheme,
5
- } from '@react-navigation/native'
6
- import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'
7
- import { FlatList, StyleSheet, TextInput, View } from 'react-native'
8
- import { useSafeAreaInsets } from 'react-native-safe-area-context'
11
+ StyleSheet,
12
+ TextInput,
13
+ View,
14
+ type TextStyle,
15
+ type ViewStyle,
16
+ type ViewProps,
17
+ } from 'react-native'
9
18
  import { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'
10
19
  import { useSuspenseGet, useTheme } from '../hooks'
11
20
  import {
@@ -13,19 +22,55 @@ import {
13
22
  useConversationMute,
14
23
  useConversationUpdate,
15
24
  } from '../hooks/use_conversation'
16
- import { MemberResource } from '../types'
25
+ import { MemberBadge, MemberResource, isDefined } from '../types'
17
26
  import { HeaderRightButton } from '../navigation/header'
27
+ import { FlashList } from '@shopify/flash-list'
28
+ import { space } from '../utils'
29
+
30
+ // =========================================
31
+ // ====== Factory Constants & Types ========
32
+ // =========================================
33
+
34
+ enum SectionTypes {
35
+ header,
36
+ hidden,
37
+ members,
38
+ setting,
39
+ view,
40
+ }
41
+
42
+ type SectionListData = Array<
43
+ | DataItem<{ title: string }, SectionTypes.header>
44
+ | DataItem<MemberResource, SectionTypes.members>
45
+ | DataItem<ViewProps, SectionTypes.view>
46
+ | DataItem<{ title: string }, SectionTypes.setting>
47
+ | DataItem<any, SectionTypes.hidden>
48
+ >
49
+
50
+ interface DataItem<T, TName extends SectionTypes> {
51
+ type: TName
52
+ data: T
53
+ sectionStyle?: ViewStyle
54
+ }
55
+
56
+ // =================================
57
+ // ====== Components ===============
58
+ // =================================
18
59
 
19
60
  export type ConversationDetailsScreenProps = StaticScreenProps<{
20
61
  conversation_id: string
21
62
  }>
22
63
 
23
64
  export function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {
24
- const styles = useStyles()
25
65
  const navigation = useNavigation()
66
+ const styles = useStyles()
67
+
26
68
  const { data: conversation } = useConversation(route.params)
27
- const canUpdate = conversation.memberAbility?.canUpdate
69
+ const [title, setTitle] = useState(conversation.title)
70
+ const { muted, setMuted } = useConversationMute(route.params)
71
+ const { mutate: saveTitle } = useConversationUpdate(route.params)
28
72
 
73
+ const canUpdate = conversation.memberAbility?.canUpdate || false
29
74
  const { data: members } = useSuspenseGet<MemberResource[]>({
30
75
  url: `/me/conversations/${route.params.conversation_id}/members`,
31
76
  data: {
@@ -36,9 +81,11 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
36
81
  },
37
82
  })
38
83
 
39
- const { muted, setMuted } = useConversationMute(route.params)
40
- const { mutate: saveTitle } = useConversationUpdate(route.params)
41
- const [title, setTitle] = useState(conversation.title)
84
+ const memberItems = members.map(data => ({
85
+ type: SectionTypes.members,
86
+ data,
87
+ }))
88
+
42
89
  const HeaderRight = useCallback(() => {
43
90
  return (
44
91
  <HeaderRightButton
@@ -58,148 +105,266 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
58
105
  })
59
106
  }, [HeaderRight, navigation])
60
107
 
108
+ const listData = [
109
+ {
110
+ type: SectionTypes.view,
111
+ data: {
112
+ children: <TitleInput canUpdate={canUpdate} title={title} setTitle={setTitle} />,
113
+ style: styles.titleContainer,
114
+ },
115
+ },
116
+ {
117
+ type: SectionTypes.header,
118
+ data: { title: 'Settings' },
119
+ sectionStyle: styles.addBottomBorder,
120
+ },
121
+ {
122
+ type: SectionTypes.setting,
123
+ data: {
124
+ title: 'Mute',
125
+ rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,
126
+ },
127
+ },
128
+ {
129
+ type: SectionTypes.header,
130
+ data: { title: 'Members' },
131
+ },
132
+ ...memberItems,
133
+ ].filter(item => item.type !== SectionTypes.hidden)
134
+
135
+ const headerIndices = listData
136
+ .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))
137
+ .filter(isDefined)
138
+
61
139
  return (
62
- <View style={styles.container}>
63
- <SectionList>
64
- <View style={styles.titleContainer}>
65
- <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
66
- <Text variant="tertiary">Title</Text>
67
- {!canUpdate && <Icon name="general.lock" />}
68
- </View>
69
- <TextInput
70
- editable={canUpdate}
71
- onChangeText={setTitle}
72
- style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
73
- value={title}
74
- />
75
- </View>
76
- </SectionList>
77
- <SectionList>
78
- <SectionListHeader>Settings</SectionListHeader>
79
- <View style={styles.muteContainer}>
80
- <Text variant="plain" style={styles.muteText}>
81
- Mute
82
- </Text>
83
- <Switch value={muted} onChange={() => setMuted(!muted)} />
84
- </View>
85
- </SectionList>
86
- <SectionList>
87
- <SectionListHeader divider={false}>Members</SectionListHeader>
88
- <FlatList
89
- data={members}
90
- renderItem={({ item }) => (
91
- <View style={styles.member}>
92
- <Avatar sourceUri={item.avatar} />
93
- <View style={styles.memberBody}>
94
- <Text style={styles.memberName}>{item.name}</Text>
95
- <View style={styles.memberBadges}>
96
- {item.badges?.map((badge, index) => (
97
- <View key={index} style={styles.memberBadge}>
98
- <Badge label={badge.title} />
99
- </View>
100
- ))}
101
- </View>
102
- </View>
140
+ <FlashList
141
+ data={listData as SectionListData}
142
+ estimatedItemSize={52}
143
+ contentContainerStyle={styles.contentContainer}
144
+ renderItem={({ item, index }) => {
145
+ const [isStart, isEnd] = [
146
+ index === 0 || headerIndices.includes(index),
147
+ index === listData.length - 1 || headerIndices.includes(index + 1),
148
+ ]
149
+
150
+ switch (item.type) {
151
+ case SectionTypes.header:
152
+ return (
153
+ <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
154
+ <SectionHeading title={item.data.title} />
155
+ </ListSection>
156
+ )
157
+ case SectionTypes.members:
158
+ return (
159
+ <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
160
+ <MemberRow {...item.data} />
161
+ </ListSection>
162
+ )
163
+ case SectionTypes.setting:
164
+ return (
165
+ <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
166
+ <SettingRow {...item.data} />
167
+ </ListSection>
168
+ )
169
+ case SectionTypes.view:
170
+ return (
171
+ <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
172
+ <View {...item.data} style={item.data.style} />
173
+ </ListSection>
174
+ )
175
+ default:
176
+ return null
177
+ }
178
+ }}
179
+ />
180
+ )
181
+ }
182
+
183
+ interface ListSectionProps {
184
+ isStart?: boolean
185
+ isEnd?: boolean
186
+ style?: ViewStyle
187
+ children: ReactNode
188
+ }
189
+
190
+ function ListSection({ isStart, isEnd, style, children }: ListSectionProps) {
191
+ const styles = useStyles({ isStart, isEnd })
192
+
193
+ return (
194
+ <View style={styles.sectionOuter}>
195
+ <View style={[styles.sectionInner, style]}>{children}</View>
196
+ </View>
197
+ )
198
+ }
199
+
200
+ interface SectionHeadingProps {
201
+ title: string
202
+ }
203
+
204
+ function SectionHeading({ title }: SectionHeadingProps) {
205
+ const styles = useStyles()
206
+
207
+ return (
208
+ <View style={styles.header}>
209
+ <Heading variant="h3">{title}</Heading>
210
+ </View>
211
+ )
212
+ }
213
+
214
+ interface InputProps {
215
+ canUpdate: boolean
216
+ title: string
217
+ setTitle: Dispatch<SetStateAction<string>>
218
+ }
219
+
220
+ function TitleInput({ canUpdate, title, setTitle }: InputProps) {
221
+ const styles = useStyles()
222
+ return (
223
+ <>
224
+ <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
225
+ <Text variant="tertiary">Title</Text>
226
+ {!canUpdate && <Icon name="general.lock" />}
227
+ </View>
228
+ <TextInput
229
+ editable={canUpdate}
230
+ onChangeText={setTitle}
231
+ style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
232
+ value={title}
233
+ />
234
+ </>
235
+ )
236
+ }
237
+
238
+ interface SettingRowProps {
239
+ title: string
240
+ style?: ViewStyle
241
+ rightItem?: ReactNode
242
+ titleStyle?: TextStyle
243
+ subtitle?: string
244
+ rightItemStyle?: ViewStyle
245
+ }
246
+
247
+ function SettingRow({
248
+ title,
249
+ style,
250
+ titleStyle = {},
251
+ subtitle,
252
+ rightItem,
253
+ rightItemStyle = {},
254
+ }: SettingRowProps) {
255
+ const styles = useStyles()
256
+
257
+ return (
258
+ <View style={[styles.settingRow, style]}>
259
+ <View style={styles.settingRowContent}>
260
+ <Text variant="plain" style={[styles.settingRowText, titleStyle]}>
261
+ {title}
262
+ </Text>
263
+ {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
264
+ </View>
265
+ {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
266
+ </View>
267
+ )
268
+ }
269
+
270
+ interface MemberRowProps {
271
+ avatar: string
272
+ name: string
273
+ style?: ViewStyle
274
+ badges?: MemberBadge[]
275
+ }
276
+
277
+ function MemberRow({ avatar, name, style, badges }: MemberRowProps) {
278
+ const styles = useStyles()
279
+
280
+ return (
281
+ <View style={[styles.member, style]}>
282
+ <Avatar sourceUri={avatar} />
283
+ <View style={styles.memberBody}>
284
+ <Text style={styles.memberName}>{name}</Text>
285
+ <View style={styles.memberBadges}>
286
+ {badges?.map((badge, index) => (
287
+ <View key={index} style={styles.memberBadge}>
288
+ <Badge label={badge.title} />
103
289
  </View>
104
- )}
105
- keyExtractor={item => item.id}
106
- contentContainerStyle={styles.listContainer}
107
- />
108
- </SectionList>
290
+ ))}
291
+ </View>
292
+ </View>
109
293
  </View>
110
294
  )
111
295
  }
112
296
 
113
- const useStyles = () => {
114
- const theme = useTheme()
115
- const { bottom } = useSafeAreaInsets()
297
+ // =================================
298
+ // ====== Styles ===================
299
+ // =================================
300
+
301
+ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {
302
+ const { colors } = useTheme()
116
303
 
117
304
  return StyleSheet.create({
118
- container: {
119
- flex: 1,
120
- paddingTop: 16,
121
- paddingHorizontal: 16,
122
- backgroundColor: theme.colors.fillColorNeutral080,
123
- paddingBottom: bottom,
124
- gap: 16,
125
- },
126
- listContainer: {
127
- gap: 12,
305
+ contentContainer: {
306
+ backgroundColor: colors.fillColorNeutral080,
307
+ padding: space(2),
128
308
  },
129
- member: {
130
- flexDirection: 'row',
131
- gap: 8,
309
+ sectionOuter: {
310
+ paddingTop: space(1),
311
+ paddingLeft: space(2),
312
+ backgroundColor: colors.fillColorNeutral100Inverted,
313
+ borderTopLeftRadius: isStart ? space(1) : 0,
314
+ borderTopRightRadius: isStart ? space(1) : 0,
315
+ borderBottomLeftRadius: isEnd ? space(1) : 0,
316
+ borderBottomRightRadius: isEnd ? space(1) : 0,
317
+ marginBottom: isEnd ? space(2) : 0,
132
318
  },
133
- memberBody: {
134
- gap: 4,
319
+ sectionInner: {
320
+ borderBottomWidth: 0,
321
+ borderBottomColor: colors.borderColorDefaultBase,
322
+ paddingRight: space(2),
323
+ paddingBottom: space(1),
135
324
  },
136
- memberName: {
137
- lineHeight: 16,
325
+ addBottomBorder: {
326
+ borderBottomWidth: isEnd ? 0 : 1,
138
327
  },
139
- memberBadges: {
328
+ titleContainer: {},
329
+ titleLabel: {},
330
+ titleLabelContainer: {
140
331
  flexDirection: 'row',
332
+ alignItems: 'center',
141
333
  gap: 8,
142
334
  },
143
- memberBadge: {},
144
- muteContainer: {
335
+ titleInput: {
336
+ color: colors.textColorDefaultPrimary,
337
+ },
338
+ titleInputDisabled: { opacity: 0.7 },
339
+ header: {
340
+ paddingVertical: space(1.5),
341
+ },
342
+ settingRow: {
145
343
  flexDirection: 'row',
146
344
  justifyContent: 'space-between',
147
345
  alignItems: 'center',
346
+ gap: space(1),
148
347
  },
149
- muteText: {
348
+ settingRowContent: {
349
+ flex: 1,
350
+ },
351
+ settingRowText: {
150
352
  lineHeight: 20,
151
353
  },
152
- titleContainer: {},
153
- titleLabel: {},
154
- titleLabelContainer: {
354
+ member: {
155
355
  flexDirection: 'row',
156
- alignItems: 'center',
157
- gap: 8,
356
+ gap: space(1),
158
357
  },
159
- titleInput: {
160
- color: theme.colors.textColorDefaultPrimary,
161
- },
162
- titleInputDisabled: { opacity: 0.7 },
163
- })
164
- }
165
-
166
- const SectionList = ({ children }: PropsWithChildren) => {
167
- const styles = useSectionListStyles()
168
-
169
- return <View style={styles.container}>{children}</View>
170
- }
171
-
172
- const SectionListHeader = ({
173
- children,
174
- divider = true,
175
- }: PropsWithChildren & { divider?: boolean }) => {
176
- const styles = useSectionListStyles()
177
-
178
- return (
179
- <Heading variant="h3" style={[styles.heading, divider && styles.headingDivider]}>
180
- {children}
181
- </Heading>
182
- )
183
- }
184
-
185
- const useSectionListStyles = () => {
186
- const theme = useTheme()
187
- const navigationTheme = useNavigationTheme()
188
-
189
- return StyleSheet.create({
190
- container: {
191
- padding: 16,
192
- backgroundColor: navigationTheme.colors.card,
193
- borderRadius: 8,
194
- flexDirection: 'column',
195
- gap: 8,
358
+ memberBody: {
359
+ gap: space(0.5),
196
360
  },
197
- heading: {
198
- paddingBottom: 12,
361
+ memberName: {
362
+ lineHeight: space(2),
199
363
  },
200
- headingDivider: {
201
- borderBottomWidth: 1,
202
- borderBottomColor: theme.colors.fillColorNeutral050Base,
364
+ memberBadges: {
365
+ flexDirection: 'row',
366
+ gap: space(1),
203
367
  },
368
+ memberBadge: {},
204
369
  })
205
370
  }
package/src/types/utils/index.ts CHANGED
@@ -4,3 +4,7 @@
4
4
  export type DeepPartial<T> = {
5
5
  [P in keyof T]?: DeepPartial<T[P]>
6
6
  }
7
+
8
+ export function isDefined<T>(argument: T | undefined): argument is T {
9
+ return argument !== undefined
10
+ }
package/src/vendor/tapestry/alias_tokens_color_map.ts CHANGED
@@ -51,6 +51,12 @@ const neutralsDark: NeutralColors = {
51
51
 
52
52
  interface SemanticAliasesColors {
53
53
  name: string
54
+ borderColorDefaultBase: string
55
+ borderColorDefaultDark: string
56
+ borderColorDefaultDarker: string
57
+ borderColorDefaultDisabled: string
58
+ borderColorDefaultDim: string
59
+ borderColorDefaultWhite: string
54
60
  iconColorDefaultPrimary: string
55
61
  iconColorDefaultSecondary: string
56
62
  iconColorDefaultDim: string
@@ -72,6 +78,12 @@ interface SemanticAliasesColors {
72
78
 
73
79
  const semanticAliasesLight: SemanticAliasesColors = {
74
80
  name: 'light',
81
+ borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,
82
+ borderColorDefaultDark: neutralsLight.fillColorNeutral040,
83
+ borderColorDefaultDarker: neutralsLight.fillColorNeutral020,
84
+ borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,
85
+ borderColorDefaultDim: neutralsLight.fillColorNeutral070,
86
+ borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,
75
87
  iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,
76
88
  iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,
77
89
  iconColorDefaultDim: neutralsLight.fillColorNeutral030,
@@ -93,6 +105,12 @@ const semanticAliasesLight: SemanticAliasesColors = {
93
105
 
94
106
  const semanticAliasesDark: SemanticAliasesColors = {
95
107
  name: 'dark',
108
+ borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,
109
+ borderColorDefaultDark: neutralsDark.fillColorNeutral040,
110
+ borderColorDefaultDarker: neutralsDark.fillColorNeutral020,
111
+ borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,
112
+ borderColorDefaultDim: neutralsDark.fillColorNeutral070,
113
+ borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,
96
114
  iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,
97
115
  iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,
98
116
  iconColorDefaultDim: neutralsDark.fillColorNeutral030,