@planningcenter/chat-react-native 1.5.0 → 1.6.0

package/src/components/display/button.tsx

@@ -0,0 +1,293 @@
+import React from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import type { PressableProps, ViewStyle } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import { Icon } from './icon'
+import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'
+import { Spinner } from './spinner'
+import { getColorKey, useColorOptionMap, useGradientColorMap } from './button_color_utils'
+import type { AppearanceUnion } from './button_color_utils'
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+} as const
+
+type SizeUnion = (typeof SIZES)[keyof typeof SIZES]
+type SizeStyle = Record<
+  SizeUnion,
+  {
+    fontSize: number
+    paddingHorizontal: number
+    height: number
+    borderRadius: number
+    gap: number
+  }
+>
+
+const VARIANTS = {
+  fill: 'fill',
+  outline: 'outline',
+} as const
+
+type VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]
+type VariantColors = Record<
+  VariantUnion,
+  {
+    backgroundColor: string
+    color: string
+  }
+>
+
+// =================================
+// ====== Component ================
+// =================================
+
+interface ButtonProps extends PressableProps {
+  /**
+   * Specifies whether fonts should be scaled down automatically to fit given style constraints.
+   */
+  adjustsFontSizeToFit?: boolean
+  /**
+   * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.
+   */
+  allowFontScaling?: boolean
+  /**
+   * Updates the button's colors
+   */
+  appearance?: AppearanceUnion
+  /**
+   * Styles the inner View that wraps the button's content
+   */
+  buttonInnerStyles?: ViewStyle
+  /**
+   * Styles the outer LinearGradient that gives the button it's backgrounnd and outline color
+   */
+  buttonOuterStyles?: ViewStyle
+  /**
+   * Generates an icon to the left of the button text
+   */
+  iconNameLeft?: string
+  /**
+   * Generates an icon to the right of the button text
+   */
+  iconNameRight?: string
+  /**
+   * Disables the button and replaces its content with a spinner
+   */
+  loading?: boolean
+  /**
+   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+   */
+  maxFontSizeMultiplier?: number
+  /**
+   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+   */
+  minimumFontScale?: number
+  /**
+   * Changes the overall size of the button and its contents
+   */
+  size?: SizeUnion
+  /**
+   * Renders as text within the button
+   */
+  title: string
+  /**
+   * Fill buttons are visually more propmonitent then outline buttons
+   */
+  variant?: VariantUnion
+}
+
+export function Button({
+  adjustsFontSizeToFit = false,
+  allowFontScaling = true,
+  appearance = 'primary',
+  buttonInnerStyles,
+  buttonOuterStyles,
+  disabled = false,
+  iconNameLeft,
+  iconNameRight,
+  loading,
+  maxFontSizeMultiplier,
+  minimumFontScale,
+  size = 'md',
+  title,
+  variant = 'fill',
+  ...props
+}: ButtonProps) {
+  const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant })
+  const gradientOptionsMap = useGradientColorMap()
+  const colorKey = getColorKey({ disabled, loading, appearance })
+
+  const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading]
+  const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading]
+
+  const androidRippleColor = useCreateAndroidRippleColor({ color: gradientOptionsMap[colorKey][0] })
+
+  return (
+    <Pressable
+      style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]}
+      accessibilityRole="button"
+      disabled={disabled || loading}
+      accessibilityState={{ busy: loading }}
+      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
+      {...props}
+    >
+      <LinearGradient
+        start={{ x: 0.1, y: 0.1 }}
+        end={{ x: 0.9, y: 0.9 }}
+        colors={gradientOptionsMap[colorKey]}
+        style={[styles.colorWrapper, buttonOuterStyles]}
+      >
+        {loading && (
+          <Spinner
+            size={styles.spinner.fontSize}
+            maxFontSizeMultiplier={maxFontSizeMultiplier || 0}
+          />
+        )}
+        <View style={[styles.innerWrapper, buttonInnerStyles]}>
+          {iconNameLeft && (
+            <Icon
+              name={iconNameLeft}
+              style={iconStyles}
+              maxFontSizeMultiplier={maxFontSizeMultiplier}
+            />
+          )}
+          <Text
+            allowFontScaling={allowFontScaling}
+            minimumFontScale={minimumFontScale}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
+            adjustsFontSizeToFit={adjustsFontSizeToFit}
+            numberOfLines={1}
+            style={textStyles}
+          >
+            {title}
+          </Text>
+          {iconNameRight && (
+            <Icon
+              name={iconNameRight}
+              style={iconStyles}
+              maxFontSizeMultiplier={maxFontSizeMultiplier}
+            />
+          )}
+        </View>
+      </LinearGradient>
+    </Pressable>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({
+  appearance = 'primary',
+  disabled = false,
+  loading = false,
+  maxFontSizeMultiplier,
+  size = 'md',
+  variant = 'fill',
+}: Partial<ButtonProps>) => {
+  const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const colorOptionMap = useColorOptionMap()
+
+  const outlineOffsetSm = 2
+  const outlineOffset = 4
+
+  const sizeStyleMap: SizeStyle = {
+    [SIZES.sm]: {
+      fontSize: 12,
+      paddingHorizontal: 12 * fontScale,
+      height: 24 * fontScale - outlineOffsetSm,
+      borderRadius: 24 * fontScale,
+      gap: 4 * fontScale,
+    },
+    [SIZES.md]: {
+      fontSize: 14,
+      paddingHorizontal: 16 * fontScale,
+      height: 32 * fontScale - outlineOffset,
+      borderRadius: 32 * fontScale,
+      gap: 6 * fontScale,
+    },
+    [SIZES.lg]: {
+      fontSize: 16,
+      paddingHorizontal: 24 * fontScale,
+      height: 40 * fontScale - outlineOffset,
+      borderRadius: 40 * fontScale,
+      gap: 8 * fontScale,
+    },
+  }
+
+  const variantOutlineColor =
+    disabled || loading ? colors.fillColorNeutral090 : colors.fillColorNeutral100Inverted
+
+  const variantStyleMap: VariantColors = {
+    fill: {
+      backgroundColor: 'transparent',
+      color: tokens.colorNeutral100White,
+    },
+    outline: {
+      backgroundColor: variantOutlineColor,
+      color: colorOptionMap[appearance],
+    },
+  }
+
+  return StyleSheet.create({
+    pressable: {
+      borderRadius: sizeStyleMap[size].borderRadius,
+      overflow: 'hidden',
+    },
+    colorWrapper: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: sizeStyleMap[size].borderRadius,
+    },
+    innerWrapper: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      margin: size === 'sm' ? 1 : 2,
+      gap: sizeStyleMap[size].gap,
+      borderRadius: sizeStyleMap[size].borderRadius,
+      height: sizeStyleMap[size].height,
+      backgroundColor: variantStyleMap[variant].backgroundColor,
+      paddingHorizontal: sizeStyleMap[size].paddingHorizontal,
+    },
+    text: {
+      textAlign: 'center',
+      textAlignVertical: 'center',
+      includeFontPadding: false,
+      fontWeight: platformFontWeightBold,
+      fontSize: sizeStyleMap[size].fontSize,
+      color: variantStyleMap[variant].color,
+    },
+    textDisabled: {
+      color: colors.textColorDefaultDisabled,
+    },
+    textLoading: {
+      opacity: 0,
+    },
+    icon: {
+      fontSize: sizeStyleMap[size].fontSize,
+      color: variantStyleMap[variant].color,
+    },
+    iconDisabled: {
+      color: colors.iconColorDefaultDisabled,
+    },
+    iconLoading: {
+      opacity: 0,
+    },
+    spinner: {
+      fontSize: sizeStyleMap[size].fontSize,
+    },
+  })
+}

package/src/components/display/button_color_utils.ts

@@ -0,0 +1,72 @@
+import { useTheme } from '../../hooks'
+
+// =================================
+// ====== Exports ==================
+// =================================
+
+export { getColorKey, useColorOptionMap, useGradientColorMap }
+export type { AppearanceUnion }
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const APPEARANCES = {
+  primary: 'primary',
+  danger: 'danger',
+} as const
+
+type AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES]
+
+const COLOR_OPTIONS = {
+  ...APPEARANCES,
+  disabled: 'disabled',
+} as const
+
+type ColorOptionUnion = (typeof COLOR_OPTIONS)[keyof typeof COLOR_OPTIONS]
+
+// =================================
+// ====== Hooks ====================
+// =================================
+
+type ColorOptionMap = Record<ColorOptionUnion, string>
+function useColorOptionMap(): ColorOptionMap {
+  const { colors } = useTheme()
+
+  return {
+    primary: colors.interaction,
+    danger: colors.fillColorStatusErrorMedium,
+    disabled: colors.textColorDefaultDisabled,
+  }
+}
+
+type GradientColorMap = Record<ColorOptionUnion, [string, string]>
+function useGradientColorMap(): GradientColorMap {
+  const { colors } = useTheme()
+
+  const defaultColorStart = colors.buttonStart || colors.interaction
+  const defaultColorEnd = colors.buttonEnd || colors.interaction
+
+  return {
+    primary: [defaultColorStart, defaultColorEnd],
+    danger: [colors.fillColorStatusErrorMedium, colors.fillColorStatusErrorMedium],
+    disabled: [
+      colors.fillColorButtonNeutralSolidDisabled,
+      colors.fillColorButtonNeutralSolidDisabled,
+    ],
+  }
+}
+
+// =================================
+// ====== Functions ================
+// =================================
+
+interface GetColorKeyArgs {
+  disabled: boolean | null
+  loading?: boolean
+  appearance: AppearanceUnion
+}
+function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs) {
+  if (disabled || loading) return 'disabled'
+  return appearance
+}

package/src/components/display/heading.tsx

@@ -9,7 +9,15 @@ import {
 import { tokens } from '../../vendor/tapestry/tokens'
 import { platformFontWeightBold } from '../../utils/styles'
 
+// =================================
+// ====== Component ================
+// =================================
+
 interface TextProps extends ReactNativeTextProps {
+  /**
+   * Changes the styles and size of the text.
+   * Semantically all React Native headings have the same 'hierarchical' level.
+   */
   variant?: 'h1' | 'h2' | 'h3' | 'h4'
 }
 
@@ -33,6 +41,10 @@ export function Heading({ style, variant = 'h1', children, ...props }: TextProps
   )
 }
 
+// =================================
+// ====== Styles ===================
+// =================================
+
 const useStyles = () => {
   const { colors } = useTheme()
 

package/src/components/display/icon.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { PixelRatio, StyleSheet, View } from 'react-native'
-import type { ViewStyle } from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
 import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
-import { useTheme } from '../../hooks'
+import { useFontScale, useTheme } from '../../hooks'
 import * as general from '@planningcenter/icons/paths/general'
 import * as groups from '@planningcenter/icons/paths/groups'
 import * as calendar from '@planningcenter/icons/paths/calendar'
@@ -12,6 +12,10 @@ import * as churchCenter from '@planningcenter/icons/paths/church-center'
 import * as logomark from '@planningcenter/icons/paths/logomark'
 import * as brand from '@planningcenter/icons/paths/brand'
 
+// =================================
+// ====== Constants ================
+// =================================
+
 const FALLBACK_SIZE = 12
 
 const ICONS = {
@@ -29,7 +33,11 @@ type IconStyle = ViewStyle & {
   color?: string
 }
 
-interface IconProps extends Omit<XmlProps, 'xml'> {
+// =================================
+// ====== Component ================
+// =================================
+
+interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
   /**
    * Made up of the set.iconName.
    * Example: "general.textMessage"
@@ -40,10 +48,14 @@ interface IconProps extends Omit<XmlProps, 'xml'> {
    * Providing a fontSize style will allow the icon to scale with the device's text a11y size.
    */
   size?: number
+  /**
+   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+   */
+  maxFontSizeMultiplier?: number
   /**
    * Icon can handle ViewStyle, color, and fontSize.
    */
-  style?: IconStyle
+  style?: StyleProp<IconStyle>
 }
 
 export function Icon({
@@ -52,11 +64,13 @@ export function Icon({
   style,
   accessibilityElementsHidden,
   accessibilityLabel,
+  maxFontSizeMultiplier,
   ...props
 }: IconProps) {
+  const flattenStyles = StyleSheet.flatten(style)
+  const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)
   const path = getIconPath(name)
-  const iconSize = getIconSize(size, style)
-  const styles = useStyles(iconSize)
+  const styles = useStyles({ iconSize })
 
   if (!path) {
     console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`)
@@ -74,35 +88,40 @@ export function Icon({
         `}
       height={iconSize}
       width={iconSize}
-      style={{ ...styles.icon, ...style }}
+      style={{ ...styles.icon, ...flattenStyles }}
       {...props}
     />
   )
 }
 
-const getIconSize = (size?: number, style?: IconStyle) => {
-  const fontSize = StyleSheet.flatten(style)?.fontSize
+const useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?: number) => {
+  const fontSize = style?.fontSize
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
 
-  if (fontSize) return fontSize * PixelRatio.getFontScale()
+  if (fontSize) return fontSize * fontScale
 
   return size || FALLBACK_SIZE
 }
 
-const getIconPath = (name: string) => {
+const getIconPath = (name: string): string => {
   const [setName, iconName] = name.split('.')
 
   return ICONS[setName]?.[iconName]
 }
 
-const useStyles = (size: number) => {
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({ iconSize }: { iconSize: number }) => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
     noIcon: {
       backgroundColor: colors.iconColorDefaultDisabled,
-      width: size,
-      height: size,
-      borderRadius: size / 2,
+      width: iconSize,
+      height: iconSize,
+      borderRadius: iconSize / 2,
     },
     icon: {
       color: colors.iconColorDefaultPrimary,

package/src/components/display/image.tsx

@@ -12,9 +12,18 @@ import {
 import { useTheme } from '../../hooks'
 import { Spinner } from './spinner'
 
+// =================================
+// ====== Component ================
+// =================================
+
 export interface ImageProps extends ReactNativeImageProps {
   /**
-   * Should the image show the loading indicator by default.
+   * Describes the image to screen-readers and marks the image as `accessible`.
+   * Passing an empty string will hide the image from screen-readers.
+   */
+  alt: string
+  /**
+   * Shows the image's loading spinner right away. Enabled by default.
    */
   defaultLoading?: boolean
   /**
@@ -44,13 +53,14 @@ export function Image({
   loadingBackgroundStyles,
   style = {},
   wrapperStyle = {},
+  alt,
   ...props
 }: ImageProps) {
   const [loading, setLoading] = useState(defaultLoading)
 
   const imageStyles = StyleSheet.flatten(style)
   const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}
-  const styles = useStyles(width, height, borderRadius)
+  const styles = useStyles({ width, height, borderRadius })
 
   const handleOnLoad = (event: any) => {
     setLoading(false)
@@ -58,11 +68,17 @@ export function Image({
   }
 
   return (
-    <View style={wrapperStyle}>
+    <View
+      style={wrapperStyle}
+      accessible={Boolean(alt)}
+      accessibilityRole="image"
+      accessibilityState={{ busy: loading }}
+    >
       <ReactNativeImage
         style={[styles.image, imageStyles]}
         onLoad={handleOnLoad}
         source={source}
+        alt={loading ? '' : alt}
         {...props}
       />
       {loading && loadingEnabled && (
@@ -74,11 +90,17 @@ export function Image({
   )
 }
 
-const useStyles = (
-  width: DimensionValue,
-  height: DimensionValue,
+// =================================
+// ====== Styles ===================
+// =================================
+
+interface Styles {
+  width: DimensionValue
+  height: DimensionValue
   borderRadius: AnimatableNumericValue | string
-) => {
+}
+
+const useStyles = ({ width, height, borderRadius }: Styles) => {
   const { colors } = useTheme()
 
   return StyleSheet.create({

package/src/components/display/index.ts

@@ -1,7 +1,10 @@
-export { Avatar } from './avatar'
-export { AvatarGroup } from './avatar_group'
-export { Heading } from './heading'
-export { Icon } from './icon'
-export { Image, ImageProps } from './image'
-export { Spinner } from './spinner'
-export { Text } from './text'
+export * from './avatar'
+export * from './avatar_group'
+export * from './button'
+export * from './heading'
+export * from './icon'
+export * from './image'
+export * from './spinner'
+export * from './text'
+export * from './text_button'
+export * from './text_inline_button'

package/src/components/display/spinner.tsx

@@ -1,15 +1,32 @@
 import React, { useEffect, useRef } from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
-import { useTheme } from '../../hooks'
+import { useFontScale, useTheme } from '../../hooks'
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const PREVENT_SCALING_DEFAULT = 1
+
+// =================================
+// ====== Component ================
+// =================================
 
 interface SpinnerProps {
   /**
    *  Size of the spinner in px
    * */
   size?: number
+  /**
+   * Specifies the maximum size spinner can scale to if the device's font-size is increased.
+   */
+  maxFontSizeMultiplier?: number
 }
 
-export function Spinner({ size = 20 }: SpinnerProps) {
+export function Spinner({
+  size = 20,
+  maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT,
+}: SpinnerProps) {
   const rotation = useRef(new Animated.Value(0)).current
 
   const animation = Animated.loop(
@@ -26,7 +43,7 @@ export function Spinner({ size = 20 }: SpinnerProps) {
     outputRange: ['0deg', '360deg'],
   })
 
-  const styles = useStyles(rotateValue, size)
+  const styles = useStyles({ maxFontSizeMultiplier, rotateValue, size })
 
   useEffect(() => {
     animation.start()
@@ -47,8 +64,20 @@ export function Spinner({ size = 20 }: SpinnerProps) {
   )
 }
 
-const useStyles = (rotate: Animated.AnimatedInterpolation<string | number>, size: number) => {
+// =================================
+// ====== Styles ===================
+// =================================
+
+interface Styles {
+  maxFontSizeMultiplier: number | undefined
+  rotateValue: Animated.AnimatedInterpolation<string | number>
+  size: number
+}
+
+const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {
   const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const scalableSize = size * fontScale
 
   return StyleSheet.create({
     container: {
@@ -63,15 +92,15 @@ const useStyles = (rotate: Animated.AnimatedInterpolation<string | number>, size
       opacity: 0.7,
     },
     animatedContainer: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      transform: [{ rotate }],
+      width: scalableSize,
+      height: scalableSize,
+      borderRadius: scalableSize / 2,
+      transform: [{ rotate: rotateValue }],
     },
     circle: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
+      width: scalableSize,
+      height: scalableSize,
+      borderRadius: scalableSize / 2,
       borderStyle: 'solid',
       borderWidth: 3,
     },
@@ -88,8 +117,8 @@ const useStyles = (rotate: Animated.AnimatedInterpolation<string | number>, size
       position: 'absolute',
       top: 0,
       left: 0,
-      width: size / 2,
-      height: size / 2,
+      width: scalableSize / 2,
+      height: scalableSize / 2,
       overflow: 'hidden',
       zIndex: 200,
     },