@planningcenter/chat-react-native 1.6.1 → 1.6.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 (10) hide show
  1. package/build/components/display/icon.d.ts +6 -2
  2. package/build/components/display/icon.d.ts.map +1 -1
  3. package/build/components/display/icon.js +4 -4
  4. package/build/components/display/icon.js.map +1 -1
  5. package/build/screens/display.d.ts.map +1 -1
  6. package/build/screens/display.js +126 -2
  7. package/build/screens/display.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/components/display/icon.tsx +9 -4
  10. package/src/screens/display.tsx +146 -2
package/build/components/display/icon.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { StyleProp, ViewStyle } from 'react-native';
2
+ import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
3
3
  import type { XmlProps } from 'react-native-svg';
4
4
  type IconStyle = ViewStyle & {
5
5
  fontSize?: number;
@@ -20,11 +20,15 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
20
20
  * Specifies the maximum size a font can reach when allowFontScaling is enabled.
21
21
  */
22
22
  maxFontSizeMultiplier?: number;
23
+ /**
24
+ * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.
25
+ */
26
+ color?: ColorValue;
23
27
  /**
24
28
  * Icon can handle ViewStyle, color, and fontSize.
25
29
  */
26
30
  style?: StyleProp<IconStyle>;
27
31
  }
28
- export declare function Icon({ name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }: IconProps): React.JSX.Element;
32
+ export declare function Icon({ color, name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }: IconProps): React.JSX.Element;
29
33
  export {};
30
34
  //# sourceMappingURL=icon.d.ts.map
package/build/components/display/icon.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA0BhD,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}
1
+ {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA0BhD,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}
package/build/components/display/icon.js CHANGED
@@ -22,11 +22,11 @@ const ICONS = {
22
22
  logomark,
23
23
  brand,
24
24
  };
25
- export function Icon({ name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }) {
25
+ export function Icon({ color, name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }) {
26
26
  const flattenStyles = StyleSheet.flatten(style);
27
27
  const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier);
28
28
  const path = getIconPath(name);
29
- const styles = useStyles({ iconSize });
29
+ const styles = useStyles({ color, iconSize });
30
30
  if (!path) {
31
31
  console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`);
32
32
  return <View style={styles.noIcon}/>;
@@ -51,7 +51,7 @@ const getIconPath = (name) => {
51
51
  // =================================
52
52
  // ====== Styles ===================
53
53
  // =================================
54
- const useStyles = ({ iconSize }) => {
54
+ const useStyles = ({ color, iconSize }) => {
55
55
  const { colors } = useTheme();
56
56
  return StyleSheet.create({
57
57
  noIcon: {
@@ -61,7 +61,7 @@ const useStyles = ({ iconSize }) => {
61
61
  borderRadius: iconSize / 2,
62
62
  },
63
63
  icon: {
64
- color: colors.iconColorDefaultPrimary,
64
+ color: color || colors.iconColorDefaultPrimary,
65
65
  },
66
66
  });
67
67
  };
package/build/components/display/icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport { SvgXml } from 'react-native-svg'\nimport type { XmlProps } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport * as general from '@planningcenter/icons/paths/general'\nimport * as groups from '@planningcenter/icons/paths/groups'\nimport * as calendar from '@planningcenter/icons/paths/calendar'\nimport * as people from '@planningcenter/icons/paths/people'\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\nimport * as logomark from '@planningcenter/icons/paths/logomark'\nimport * as brand from '@planningcenter/icons/paths/brand'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst FALLBACK_SIZE = 12\n\nconst ICONS = {\n calendar,\n people,\n churchCenter,\n groups,\n general,\n logomark,\n brand,\n} as const\n\ntype IconStyle = ViewStyle & {\n fontSize?: number\n color?: string\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {\n /**\n * Made up of the set.iconName.\n * Example: \"general.textMessage\"\n */\n name: string\n /**\n * This sets a static size for the icon.\n * Providing a fontSize style will allow the icon to scale with the device's text a11y size.\n */\n size?: number\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Icon can handle ViewStyle, color, and fontSize.\n */\n style?: StyleProp<IconStyle>\n}\n\nexport function Icon({\n name,\n size,\n style,\n accessibilityElementsHidden,\n accessibilityLabel,\n maxFontSizeMultiplier,\n ...props\n}: IconProps) {\n const flattenStyles = StyleSheet.flatten(style)\n const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)\n const path = getIconPath(name)\n const styles = useStyles({ iconSize })\n\n if (!path) {\n console.warn(`No icon available named ${name}. Remember to use the format \"set.iconName\"`)\n return <View style={styles.noIcon} />\n }\n\n return (\n <SvgXml\n accessibilityElementsHidden={accessibilityElementsHidden}\n accessibilityLabel={accessibilityLabel}\n xml={`\n <svg viewBox=\"0 0 16 16\">\n <path d=\"${path}\" fill=\"currentColor\" />\n </svg>\n `}\n height={iconSize}\n width={iconSize}\n style={{ ...styles.icon, ...flattenStyles }}\n {...props}\n />\n )\n}\n\nconst useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?: number) => {\n const fontSize = style?.fontSize\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n if (fontSize) return fontSize * fontScale\n\n return size || FALLBACK_SIZE\n}\n\nconst getIconPath = (name: string): string => {\n const [setName, iconName] = name.split('.')\n\n return ICONS[setName]?.[iconName]\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ iconSize }: { iconSize: number }) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n noIcon: {\n backgroundColor: colors.iconColorDefaultDisabled,\n width: iconSize,\n height: iconSize,\n borderRadius: iconSize / 2,\n },\n icon: {\n color: colors.iconColorDefaultPrimary,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\nimport { SvgXml } from 'react-native-svg'\nimport type { XmlProps } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport * as general from '@planningcenter/icons/paths/general'\nimport * as groups from '@planningcenter/icons/paths/groups'\nimport * as calendar from '@planningcenter/icons/paths/calendar'\nimport * as people from '@planningcenter/icons/paths/people'\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\nimport * as logomark from '@planningcenter/icons/paths/logomark'\nimport * as brand from '@planningcenter/icons/paths/brand'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst FALLBACK_SIZE = 12\n\nconst ICONS = {\n calendar,\n people,\n churchCenter,\n groups,\n general,\n logomark,\n brand,\n} as const\n\ntype IconStyle = ViewStyle & {\n fontSize?: number\n color?: string\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {\n /**\n * Made up of the set.iconName.\n * Example: \"general.textMessage\"\n */\n name: string\n /**\n * This sets a static size for the icon.\n * Providing a fontSize style will allow the icon to scale with the device's text a11y size.\n */\n size?: number\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.\n */\n color?: ColorValue\n /**\n * Icon can handle ViewStyle, color, and fontSize.\n */\n style?: StyleProp<IconStyle>\n}\n\nexport function Icon({\n color,\n name,\n size,\n style,\n accessibilityElementsHidden,\n accessibilityLabel,\n maxFontSizeMultiplier,\n ...props\n}: IconProps) {\n const flattenStyles = StyleSheet.flatten(style)\n const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)\n const path = getIconPath(name)\n const styles = useStyles({ color, iconSize })\n\n if (!path) {\n console.warn(`No icon available named ${name}. Remember to use the format \"set.iconName\"`)\n return <View style={styles.noIcon} />\n }\n\n return (\n <SvgXml\n accessibilityElementsHidden={accessibilityElementsHidden}\n accessibilityLabel={accessibilityLabel}\n xml={`\n <svg viewBox=\"0 0 16 16\">\n <path d=\"${path}\" fill=\"currentColor\" />\n </svg>\n `}\n height={iconSize}\n width={iconSize}\n style={{ ...styles.icon, ...flattenStyles }}\n {...props}\n />\n )\n}\n\nconst useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?: number) => {\n const fontSize = style?.fontSize\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n if (fontSize) return fontSize * fontScale\n\n return size || FALLBACK_SIZE\n}\n\nconst getIconPath = (name: string): string => {\n const [setName, iconName] = name.split('.')\n\n return ICONS[setName]?.[iconName]\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ color, iconSize }: { color?: ColorValue; iconSize: number }) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n noIcon: {\n backgroundColor: colors.iconColorDefaultDisabled,\n width: iconSize,\n height: iconSize,\n borderRadius: iconSize / 2,\n },\n icon: {\n color: color || colors.iconColorDefaultPrimary,\n },\n })\n}\n"]}
package/build/screens/display.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAwCvC,wBAAgB,aAAa,sBAge5B"}
1
+ {"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA6CvC,wBAAgB,aAAa,sBAkkB5B"}
package/build/screens/display.js CHANGED
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
2
2
  import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
3
3
  import { useTheme } from '../hooks';
4
4
  import { Avatar, AvatarGroup, Button, Heading, Icon, IconButton, Image, Spinner, Text, TextButton, TextInlineButton, } from '../components/display';
5
- import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle } from '../utils';
5
+ import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
6
6
  const URL = {
7
7
  image: 'https://picsum.photos/seed/picsum/200',
8
8
  broken: 'https://broken.url',
@@ -24,13 +24,14 @@ const URL = {
24
24
  const buttonPress = () => Alert.alert('Button clicked');
25
25
  export function DisplayScreen() {
26
26
  const styles = useStyles();
27
+ const { colors } = useTheme();
27
28
  return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
28
29
  <CollapsableSection title="Molecules">
29
30
  <Row>
30
31
  <Text>🚧 Coming soon! 🚧</Text>
31
32
  </Row>
32
33
  </CollapsableSection>
33
- <CollapsableSection title="Atoms" isLast>
34
+ <CollapsableSection title="Atoms">
34
35
  <Group title="Spinner" description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.">
35
36
  <Row style={styles.spinnerContainer}>
36
37
  <Spinner size={24}/>
@@ -69,6 +70,7 @@ export function DisplayScreen() {
69
70
  <Row>
70
71
  <Icon name="missingIcon" size={20}/>
71
72
  <Icon name="general.textMessage" size={20}/>
73
+ <Icon name="general.bell" size={20} color={colors.needsDesignPass}/>
72
74
  <Icon name="churchCenter.sort" style={styles.icon}/>
73
75
  </Row>
74
76
  </Group>
@@ -258,6 +260,102 @@ export function DisplayScreen() {
258
260
  </Row>
259
261
  </Group>
260
262
  </CollapsableSection>
263
+ <CollapsableSection title="Theme">
264
+ <TextGroup>
265
+ <Text>There are four main parts to our theming system…</Text>
266
+ <TextRow>
267
+ <Heading variant="h3">Default theme</Heading>
268
+ <Text>
269
+ Start at `src/utils/theme` when adding new theme values. The file has more
270
+ instructions and examples.
271
+ </Text>
272
+ <Text>At a high level, it provides…</Text>
273
+ <TextListItem label="1.">
274
+ Access to consuming app targets of what theme values that they can be customized.
275
+ </TextListItem>
276
+ <TextListItem label="2.">
277
+ Fallback values for our components to use if the values weren't overriden.
278
+ </TextListItem>
279
+ </TextRow>
280
+ <TextRow>
281
+ <Heading variant="h3">Customizing the theme</Heading>
282
+ <Text>
283
+ Apps can override any default theme value by passing a `theme` object to our
284
+ `ChatProvider` that holds a `theme` and a `colorScheme`.
285
+ </Text>
286
+ <Text>
287
+ Currently types can be enforced by setting the parent theme object to
288
+ `CreateChatThemeProps`.
289
+ </Text>
290
+ <Text variant="footnote">
291
+ Example setup: `apps/mobile/src/context/chat_context_provider.tsx`
292
+ </Text>
293
+ </TextRow>
294
+ <TextRow>
295
+ <Heading variant="h3">Merged theme</Heading>
296
+ <Text>
297
+ In `src/contexts/chat_context.tsx` we merge the default theme and any custom values
298
+ coming from a product target with the `useCreateChatTheme` hook. It creates a single
299
+ `ChatTheme` type.
300
+ </Text>
301
+ </TextRow>
302
+ <TextRow>
303
+ <Heading variant="h3">Using theme values</Heading>
304
+ <Text>
305
+ Inside of our own `chat-react-native` components we can access the merged `ChatTheme`
306
+ object via our own `useTheme` hook.
307
+ </Text>
308
+ <Text variant="footnote">Example setup: `src/components/display/button.tsx`</Text>
309
+ </TextRow>
310
+ </TextGroup>
311
+ </CollapsableSection>
312
+ <CollapsableSection title="Tokens" isLast>
313
+ <TextGroup>
314
+ <TextRow>
315
+ <Heading variant="h3">What are they?</Heading>
316
+ <Text>
317
+ Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
318
+ (e.g. colors, spacing amounts, and font weights.)
319
+ </Text>
320
+ </TextRow>
321
+ <TextRow>
322
+ <Heading variant="h3">Where do they come from?</Heading>
323
+ <Text>
324
+ Tokens primarily come from our internal `@planningcenter/tapestry` package. However,
325
+ at this time the package only support light mode colors, so Chat uses a workaround.
326
+ </Text>
327
+ <Text>
328
+ Color-based tokens are infused into our theming system with two local files…
329
+ </Text>
330
+ <TextListItem label="1. `src/vendor/tapestry/tokens`:">
331
+ Primitive color values are stored* here. Primitives capture light or dark mode values,
332
+ but don't take into account the devices's colors scheme.
333
+ </TextListItem>
334
+ <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
335
+ Alias tokens reference the primitive color values token file* in light and dark mode
336
+ specfic objects. Our theming system then selects the right color to use based on the
337
+ device's color scheme.
338
+ </TextListItem>
339
+ <Text variant="footnote">
340
+ *If available, reference the color from the Tapestry package instead.
341
+ </Text>
342
+ </TextRow>
343
+ <TextRow>
344
+ <Heading variant="h3">How do we use them?</Heading>
345
+ <Text>There are two places to reference tokens at this time…</Text>
346
+ <TextListItem label="• Color tokens:">
347
+ Reference them from our internal `useTheme` hook to ensure the correct light or dark
348
+ mode color token is used.
349
+ </TextListItem>
350
+ <TextListItem label="• All other tokens:">
351
+ Use the `computedToken` function from `@planningcenter/tapestry` by passing it a
352
+ string with the token's name. This function provides Typescript support and maps to
353
+ the token's raw CSS value. There is another function called `token`, but it maps to
354
+ CSS custom properties which React Native doesn't support.
355
+ </TextListItem>
356
+ </TextRow>
357
+ </TextGroup>
358
+ </CollapsableSection>
261
359
  </ScrollView>);
262
360
  }
263
361
  function CollapsableSection({ children, title, isLast = false }) {
@@ -286,6 +384,23 @@ function Row({ children, style }) {
286
384
  const styles = useStyles();
287
385
  return <View style={[styles.row, style]}>{children}</View>;
288
386
  }
387
+ function TextGroup({ children }) {
388
+ const styles = useStyles();
389
+ return <View style={styles.textGroup}>{children}</View>;
390
+ }
391
+ function TextRow({ children, style }) {
392
+ const styles = useStyles();
393
+ return <View style={[styles.textRow, style]}>{children}</View>;
394
+ }
395
+ function TextListItem({ label, children }) {
396
+ const styles = useStyles();
397
+ return (<Text variant="tertiary">
398
+ <Text variant="tertiary" style={styles.mediumWeight}>
399
+ {label}
400
+ </Text>{' '}
401
+ {children}
402
+ </Text>);
403
+ }
289
404
  const useStyles = () => {
290
405
  const { colors } = useTheme();
291
406
  return StyleSheet.create({
@@ -324,6 +439,15 @@ const useStyles = () => {
324
439
  justifyContent: 'center',
325
440
  flexWrap: 'wrap',
326
441
  },
442
+ textRow: {
443
+ gap: space(1.5),
444
+ },
445
+ textGroup: {
446
+ gap: space(2.5),
447
+ },
448
+ mediumWeight: {
449
+ fontWeight: platformFontWeightMedium,
450
+ },
327
451
  alignRowLeft: {
328
452
  justifyContent: 'flex-start',
329
453
  },
package/build/screens/display.js.map CHANGED
@@ -1 +1 @@
1
- {"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 IconButton,\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=\"IconButton\"\n description=\"Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.\"\n >\n <Row>\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"md\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"danger\"\n size=\"lg\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"interaction\"\n size=\"xl\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n iconStyle={styles.customIconButtonColor}\n size=\"xxl\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"xxxl\"\n />\n </Row>\n <Row>\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"md\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"danger\"\n size=\"lg\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"interaction\"\n size=\"xl\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n iconStyle={styles.customIconButtonColor}\n size=\"xxl\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"xxxl\"\n disabled\n />\n </Row>\n <Row>\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"md\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"danger\"\n size=\"lg\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"interaction\"\n size=\"xl\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n iconStyle={styles.customIconButtonColor}\n size=\"xxl\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"xxxl\"\n loading\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 customIconButtonColor: {\n color: 'purple',\n },\n })\n}\n"]}
1
+ {"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 IconButton,\n Image,\n Spinner,\n Text,\n TextButton,\n TextInlineButton,\n} from '../components/display'\nimport {\n space,\n MAX_FONT_SIZE_MULTIPLIER,\n platformPressedOpacityStyle,\n platformFontWeightMedium,\n} 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 const { colors } = useTheme()\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\">\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=\"general.bell\" size={20} color={colors.needsDesignPass} />\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=\"IconButton\"\n description=\"Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.\"\n >\n <Row>\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"md\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"danger\"\n size=\"lg\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"interaction\"\n size=\"xl\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n iconStyle={styles.customIconButtonColor}\n size=\"xxl\"\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"xxxl\"\n />\n </Row>\n <Row>\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"md\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"danger\"\n size=\"lg\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"interaction\"\n size=\"xl\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n iconStyle={styles.customIconButtonColor}\n size=\"xxl\"\n disabled\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"xxxl\"\n disabled\n />\n </Row>\n <Row>\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"md\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"danger\"\n size=\"lg\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n appearance=\"interaction\"\n size=\"xl\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n iconStyle={styles.customIconButtonColor}\n size=\"xxl\"\n loading\n />\n <IconButton\n onPress={buttonPress}\n name=\"general.paperclip\"\n accessibilityLabel=\"Add attachment\"\n accessibilityHint=\"Opens your device's image gallary\"\n size=\"xxxl\"\n loading\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 <CollapsableSection title=\"Theme\">\n <TextGroup>\n <Text>There are four main parts to our theming system…</Text>\n <TextRow>\n <Heading variant=\"h3\">Default theme</Heading>\n <Text>\n Start at `src/utils/theme` when adding new theme values. The file has more\n instructions and examples.\n </Text>\n <Text>At a high level, it provides…</Text>\n <TextListItem label=\"1.\">\n Access to consuming app targets of what theme values that they can be customized.\n </TextListItem>\n <TextListItem label=\"2.\">\n Fallback values for our components to use if the values weren't overriden.\n </TextListItem>\n </TextRow>\n <TextRow>\n <Heading variant=\"h3\">Customizing the theme</Heading>\n <Text>\n Apps can override any default theme value by passing a `theme` object to our\n `ChatProvider` that holds a `theme` and a `colorScheme`.\n </Text>\n <Text>\n Currently types can be enforced by setting the parent theme object to\n `CreateChatThemeProps`.\n </Text>\n <Text variant=\"footnote\">\n Example setup: `apps/mobile/src/context/chat_context_provider.tsx`\n </Text>\n </TextRow>\n <TextRow>\n <Heading variant=\"h3\">Merged theme</Heading>\n <Text>\n In `src/contexts/chat_context.tsx` we merge the default theme and any custom values\n coming from a product target with the `useCreateChatTheme` hook. It creates a single\n `ChatTheme` type.\n </Text>\n </TextRow>\n <TextRow>\n <Heading variant=\"h3\">Using theme values</Heading>\n <Text>\n Inside of our own `chat-react-native` components we can access the merged `ChatTheme`\n object via our own `useTheme` hook.\n </Text>\n <Text variant=\"footnote\">Example setup: `src/components/display/button.tsx`</Text>\n </TextRow>\n </TextGroup>\n </CollapsableSection>\n <CollapsableSection title=\"Tokens\" isLast>\n <TextGroup>\n <TextRow>\n <Heading variant=\"h3\">What are they?</Heading>\n <Text>\n Tokens are UX approved CSS values that we can use to style our UI in a consistent way.\n (e.g. colors, spacing amounts, and font weights.)\n </Text>\n </TextRow>\n <TextRow>\n <Heading variant=\"h3\">Where do they come from?</Heading>\n <Text>\n Tokens primarily come from our internal `@planningcenter/tapestry` package. However,\n at this time the package only support light mode colors, so Chat uses a workaround.\n </Text>\n <Text>\n Color-based tokens are infused into our theming system with two local files…\n </Text>\n <TextListItem label=\"1. `src/vendor/tapestry/tokens`:\">\n Primitive color values are stored* here. Primitives capture light or dark mode values,\n but don't take into account the devices's colors scheme.\n </TextListItem>\n <TextListItem label=\"2. `src/vendor/tapestry/alias_tokens_color_map`:\">\n Alias tokens reference the primitive color values token file* in light and dark mode\n specfic objects. Our theming system then selects the right color to use based on the\n device's color scheme.\n </TextListItem>\n <Text variant=\"footnote\">\n *If available, reference the color from the Tapestry package instead.\n </Text>\n </TextRow>\n <TextRow>\n <Heading variant=\"h3\">How do we use them?</Heading>\n <Text>There are two places to reference tokens at this time…</Text>\n <TextListItem label=\"• Color tokens:\">\n Reference them from our internal `useTheme` hook to ensure the correct light or dark\n mode color token is used.\n </TextListItem>\n <TextListItem label=\"• All other tokens:\">\n Use the `computedToken` function from `@planningcenter/tapestry` by passing it a\n string with the token's name. This function provides Typescript support and maps to\n the token's raw CSS value. There is another function called `token`, but it maps to\n CSS custom properties which React Native doesn't support.\n </TextListItem>\n </TextRow>\n </TextGroup>\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\nfunction TextGroup({ children }: { children: React.ReactNode }) {\n const styles = useStyles()\n return <View style={styles.textGroup}>{children}</View>\n}\n\ninterface TextRowProps {\n children: React.ReactNode\n style?: ViewStyle\n}\n\nfunction TextRow({ children, style }: TextRowProps) {\n const styles = useStyles()\n return <View style={[styles.textRow, style]}>{children}</View>\n}\n\ninterface TextListItemProps {\n label: string\n children: React.ReactNode\n}\n\nfunction TextListItem({ label, children }: TextListItemProps) {\n const styles = useStyles()\n return (\n <Text variant=\"tertiary\">\n <Text variant=\"tertiary\" style={styles.mediumWeight}>\n {label}\n </Text>{' '}\n {children}\n </Text>\n )\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 textRow: {\n gap: space(1.5),\n },\n textGroup: {\n gap: space(2.5),\n },\n mediumWeight: {\n fontWeight: platformFontWeightMedium,\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 customIconButtonColor: {\n color: 'purple',\n },\n })\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/chat-react-native",
3
- "version": "1.6.1",
3
+ "version": "1.6.2-rc.0",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -46,5 +46,5 @@
46
46
  "prettier": "^3.4.2",
47
47
  "typescript": "<5.6.0"
48
48
  },
49
- "gitHead": "42d8be96d6f0ab7ac25b1b43c72bec714f3870f1"
49
+ "gitHead": "98798d692d524f561423db993ccc672548c3eb22"
50
50
  }
package/src/components/display/icon.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react'
2
2
  import { StyleSheet, View } from 'react-native'
3
- import type { StyleProp, ViewStyle } from 'react-native'
3
+ import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
4
4
  import { SvgXml } from 'react-native-svg'
5
5
  import type { XmlProps } from 'react-native-svg'
6
6
  import { useFontScale, useTheme } from '../../hooks'
@@ -52,6 +52,10 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
52
52
  * Specifies the maximum size a font can reach when allowFontScaling is enabled.
53
53
  */
54
54
  maxFontSizeMultiplier?: number
55
+ /**
56
+ * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.
57
+ */
58
+ color?: ColorValue
55
59
  /**
56
60
  * Icon can handle ViewStyle, color, and fontSize.
57
61
  */
@@ -59,6 +63,7 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
59
63
  }
60
64
 
61
65
  export function Icon({
66
+ color,
62
67
  name,
63
68
  size,
64
69
  style,
@@ -70,7 +75,7 @@ export function Icon({
70
75
  const flattenStyles = StyleSheet.flatten(style)
71
76
  const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)
72
77
  const path = getIconPath(name)
73
- const styles = useStyles({ iconSize })
78
+ const styles = useStyles({ color, iconSize })
74
79
 
75
80
  if (!path) {
76
81
  console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`)
@@ -113,7 +118,7 @@ const getIconPath = (name: string): string => {
113
118
  // ====== Styles ===================
114
119
  // =================================
115
120
 
116
- const useStyles = ({ iconSize }: { iconSize: number }) => {
121
+ const useStyles = ({ color, iconSize }: { color?: ColorValue; iconSize: number }) => {
117
122
  const { colors } = useTheme()
118
123
 
119
124
  return StyleSheet.create({
@@ -124,7 +129,7 @@ const useStyles = ({ iconSize }: { iconSize: number }) => {
124
129
  borderRadius: iconSize / 2,
125
130
  },
126
131
  icon: {
127
- color: colors.iconColorDefaultPrimary,
132
+ color: color || colors.iconColorDefaultPrimary,
128
133
  },
129
134
  })
130
135
  }
package/src/screens/display.tsx CHANGED
@@ -15,7 +15,12 @@ import {
15
15
  TextButton,
16
16
  TextInlineButton,
17
17
  } from '../components/display'
18
- import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle } from '../utils'
18
+ import {
19
+ space,
20
+ MAX_FONT_SIZE_MULTIPLIER,
21
+ platformPressedOpacityStyle,
22
+ platformFontWeightMedium,
23
+ } from '../utils'
19
24
 
20
25
  const URL = {
21
26
  image: 'https://picsum.photos/seed/picsum/200',
@@ -40,6 +45,7 @@ const buttonPress = () => Alert.alert('Button clicked')
40
45
 
41
46
  export function DisplayScreen() {
42
47
  const styles = useStyles()
48
+ const { colors } = useTheme()
43
49
 
44
50
  return (
45
51
  <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
@@ -48,7 +54,7 @@ export function DisplayScreen() {
48
54
  <Text>🚧 Coming soon! 🚧</Text>
49
55
  </Row>
50
56
  </CollapsableSection>
51
- <CollapsableSection title="Atoms" isLast>
57
+ <CollapsableSection title="Atoms">
52
58
  <Group
53
59
  title="Spinner"
54
60
  description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading."
@@ -102,6 +108,7 @@ export function DisplayScreen() {
102
108
  <Row>
103
109
  <Icon name="missingIcon" size={20} />
104
110
  <Icon name="general.textMessage" size={20} />
111
+ <Icon name="general.bell" size={20} color={colors.needsDesignPass} />
105
112
  <Icon name="churchCenter.sort" style={styles.icon} />
106
113
  </Row>
107
114
  </Group>
@@ -516,6 +523,102 @@ export function DisplayScreen() {
516
523
  </Row>
517
524
  </Group>
518
525
  </CollapsableSection>
526
+ <CollapsableSection title="Theme">
527
+ <TextGroup>
528
+ <Text>There are four main parts to our theming system…</Text>
529
+ <TextRow>
530
+ <Heading variant="h3">Default theme</Heading>
531
+ <Text>
532
+ Start at `src/utils/theme` when adding new theme values. The file has more
533
+ instructions and examples.
534
+ </Text>
535
+ <Text>At a high level, it provides…</Text>
536
+ <TextListItem label="1.">
537
+ Access to consuming app targets of what theme values that they can be customized.
538
+ </TextListItem>
539
+ <TextListItem label="2.">
540
+ Fallback values for our components to use if the values weren't overriden.
541
+ </TextListItem>
542
+ </TextRow>
543
+ <TextRow>
544
+ <Heading variant="h3">Customizing the theme</Heading>
545
+ <Text>
546
+ Apps can override any default theme value by passing a `theme` object to our
547
+ `ChatProvider` that holds a `theme` and a `colorScheme`.
548
+ </Text>
549
+ <Text>
550
+ Currently types can be enforced by setting the parent theme object to
551
+ `CreateChatThemeProps`.
552
+ </Text>
553
+ <Text variant="footnote">
554
+ Example setup: `apps/mobile/src/context/chat_context_provider.tsx`
555
+ </Text>
556
+ </TextRow>
557
+ <TextRow>
558
+ <Heading variant="h3">Merged theme</Heading>
559
+ <Text>
560
+ In `src/contexts/chat_context.tsx` we merge the default theme and any custom values
561
+ coming from a product target with the `useCreateChatTheme` hook. It creates a single
562
+ `ChatTheme` type.
563
+ </Text>
564
+ </TextRow>
565
+ <TextRow>
566
+ <Heading variant="h3">Using theme values</Heading>
567
+ <Text>
568
+ Inside of our own `chat-react-native` components we can access the merged `ChatTheme`
569
+ object via our own `useTheme` hook.
570
+ </Text>
571
+ <Text variant="footnote">Example setup: `src/components/display/button.tsx`</Text>
572
+ </TextRow>
573
+ </TextGroup>
574
+ </CollapsableSection>
575
+ <CollapsableSection title="Tokens" isLast>
576
+ <TextGroup>
577
+ <TextRow>
578
+ <Heading variant="h3">What are they?</Heading>
579
+ <Text>
580
+ Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
581
+ (e.g. colors, spacing amounts, and font weights.)
582
+ </Text>
583
+ </TextRow>
584
+ <TextRow>
585
+ <Heading variant="h3">Where do they come from?</Heading>
586
+ <Text>
587
+ Tokens primarily come from our internal `@planningcenter/tapestry` package. However,
588
+ at this time the package only support light mode colors, so Chat uses a workaround.
589
+ </Text>
590
+ <Text>
591
+ Color-based tokens are infused into our theming system with two local files…
592
+ </Text>
593
+ <TextListItem label="1. `src/vendor/tapestry/tokens`:">
594
+ Primitive color values are stored* here. Primitives capture light or dark mode values,
595
+ but don't take into account the devices's colors scheme.
596
+ </TextListItem>
597
+ <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
598
+ Alias tokens reference the primitive color values token file* in light and dark mode
599
+ specfic objects. Our theming system then selects the right color to use based on the
600
+ device's color scheme.
601
+ </TextListItem>
602
+ <Text variant="footnote">
603
+ *If available, reference the color from the Tapestry package instead.
604
+ </Text>
605
+ </TextRow>
606
+ <TextRow>
607
+ <Heading variant="h3">How do we use them?</Heading>
608
+ <Text>There are two places to reference tokens at this time…</Text>
609
+ <TextListItem label="• Color tokens:">
610
+ Reference them from our internal `useTheme` hook to ensure the correct light or dark
611
+ mode color token is used.
612
+ </TextListItem>
613
+ <TextListItem label="• All other tokens:">
614
+ Use the `computedToken` function from `@planningcenter/tapestry` by passing it a
615
+ string with the token's name. This function provides Typescript support and maps to
616
+ the token's raw CSS value. There is another function called `token`, but it maps to
617
+ CSS custom properties which React Native doesn't support.
618
+ </TextListItem>
619
+ </TextRow>
620
+ </TextGroup>
621
+ </CollapsableSection>
519
622
  </ScrollView>
520
623
  )
521
624
  }
@@ -575,6 +678,38 @@ function Row({ children, style }: RowProps) {
575
678
  return <View style={[styles.row, style]}>{children}</View>
576
679
  }
577
680
 
681
+ function TextGroup({ children }: { children: React.ReactNode }) {
682
+ const styles = useStyles()
683
+ return <View style={styles.textGroup}>{children}</View>
684
+ }
685
+
686
+ interface TextRowProps {
687
+ children: React.ReactNode
688
+ style?: ViewStyle
689
+ }
690
+
691
+ function TextRow({ children, style }: TextRowProps) {
692
+ const styles = useStyles()
693
+ return <View style={[styles.textRow, style]}>{children}</View>
694
+ }
695
+
696
+ interface TextListItemProps {
697
+ label: string
698
+ children: React.ReactNode
699
+ }
700
+
701
+ function TextListItem({ label, children }: TextListItemProps) {
702
+ const styles = useStyles()
703
+ return (
704
+ <Text variant="tertiary">
705
+ <Text variant="tertiary" style={styles.mediumWeight}>
706
+ {label}
707
+ </Text>{' '}
708
+ {children}
709
+ </Text>
710
+ )
711
+ }
712
+
578
713
  const useStyles = () => {
579
714
  const { colors } = useTheme()
580
715
 
@@ -614,6 +749,15 @@ const useStyles = () => {
614
749
  justifyContent: 'center',
615
750
  flexWrap: 'wrap',
616
751
  },
752
+ textRow: {
753
+ gap: space(1.5),
754
+ },
755
+ textGroup: {
756
+ gap: space(2.5),
757
+ },
758
+ mediumWeight: {
759
+ fontWeight: platformFontWeightMedium,
760
+ },
617
761
  alignRowLeft: {
618
762
  justifyContent: 'flex-start',
619
763
  },