@planningcenter/chat-react-native 3.13.0-rc.0 → 3.13.0-rc.2

package/src/components/display/icon_button.tsx

@@ -147,17 +147,18 @@ export function IconButton({
       }}
       {...props}
     >
-      {loading && (
+      {loading ? (
         <Spinner
           size={styles.spinner.fontSize}
           maxFontSizeMultiplier={maxFontSizeMultiplier || 0}
         />
+      ) : (
+        <Icon
+          name={name}
+          style={[styles.icon, iconStyle, disabled && styles.iconDisabled]}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
+        />
       )}
-      <Icon
-        name={name}
-        style={[styles.icon, iconStyle, disabled && styles.disabled, loading && styles.loading]}
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-      />
     </Pressable>
   )
 }
@@ -227,12 +228,9 @@ const useStyles = ({
       fontSize: sizeStyleMap[size].fontSize,
       color: colorOptionMap[colorKey],
     },
-    disabled: {
+    iconDisabled: {
       color: colors.iconColorDefaultDisabled,
     },
-    loading: {
-      opacity: 0,
-    },
     spinner: {
       fontSize: sizeStyleMap[size].fontSize,
     },

package/src/components/display/image.tsx

@@ -100,7 +100,7 @@ export function Image({
       />
       {!hideLoader && isLoading && (
         <View style={[styles.loadingBackground, loadingBackgroundStyles]}>
-          <Spinner size={loaderSize} />
+          <Spinner size={loaderSize} style={styles.spinner} />
         </View>
       )}
     </View>
@@ -135,5 +135,12 @@ const useStyles = ({ width, height, borderRadius }: Styles) => {
       width,
       height,
     },
+    spinner: {
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+    },
   })
 }

package/src/components/display/person.tsx

@@ -5,7 +5,6 @@ import { MemberResource } from '../../types'
 import { Avatar } from './avatar'
 import { Text } from './text'
 import { Badge } from './badge'
-import { space } from '../../utils'
 
 // =================================
 // ====== Components ===============
@@ -43,10 +42,10 @@ const useStyles = () => {
     wrapper: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: space(1),
+      gap: 8,
     },
     content: {
-      gap: space(0.25),
+      gap: 2,
       flexShrink: 1,
     },
     name: {
@@ -54,7 +53,7 @@ const useStyles = () => {
     },
     badges: {
       flexDirection: 'row',
-      gap: space(0.5),
+      gap: 4,
     },
   })
 }

package/src/components/display/spinner.tsx

@@ -1,5 +1,12 @@
-import React, { useEffect, useRef } from 'react'
-import { Animated, Easing, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import React, { useEffect } from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated'
 import { useFontScale, useTheme } from '../../hooks'
 
 // =================================
@@ -32,34 +39,32 @@ export function Spinner({
   maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT,
   style,
 }: SpinnerProps) {
-  const rotation = useRef(new Animated.Value(0)).current
+  const styles = useStyles({ maxFontSizeMultiplier, size })
 
-  const animation = Animated.loop(
-    Animated.timing(rotation, {
-      toValue: 1,
-      duration: 1000,
-      easing: Easing.linear,
-      useNativeDriver: true,
-    })
-  )
-
-  const rotateValue = rotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
+  const rotation = useSharedValue(0)
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ rotate: `${rotation.value}deg` }],
+    }
   })
 
-  const styles = useStyles({ maxFontSizeMultiplier, rotateValue, size })
-
   useEffect(() => {
-    animation.start()
-    return () => animation.stop()
-  }, [animation])
+    rotation.value = withRepeat(
+      withTiming(360, {
+        duration: 1000,
+        easing: Easing.linear,
+      }),
+      -1 // loops animation infinitely
+    )
 
-  useEffect(() => () => rotation.setValue(0), [rotation])
+    return () => {
+      rotation.value = 0 // Reset rotation when Spinner unmounts
+    }
+  }, [rotation])
 
   return (
     <View style={[styles.container, style]}>
-      <Animated.View style={styles.animatedContainer}>
+      <Animated.View style={[styles.animatedContainer, animatedStyle]}>
         <View style={styles.clipping}>
           <View style={[styles.circle, styles.spinner]} />
         </View>
@@ -75,32 +80,22 @@ export function Spinner({
 
 interface Styles {
   maxFontSizeMultiplier: number | undefined
-  rotateValue: Animated.AnimatedInterpolation<string | number>
   size: number
 }
 
-const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {
+const useStyles = ({ maxFontSizeMultiplier, size }: Styles) => {
   const { colors } = useTheme()
   const fontScale = useFontScale({ maxFontSizeMultiplier })
   const scalableSize = size * fontScale
 
   return StyleSheet.create({
     container: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      zIndex: 200,
-      justifyContent: 'center',
-      alignItems: 'center',
       opacity: 0.7,
     },
     animatedContainer: {
       width: scalableSize,
       height: scalableSize,
       borderRadius: scalableSize / 2,
-      transform: [{ rotate: rotateValue }],
     },
     circle: {
       width: scalableSize,
@@ -110,9 +105,6 @@ const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {
       borderWidth: 3,
     },
     spinner: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
       borderColor: colors.fillColorNeutral020,
     },
     track: {

package/src/components/display/video_attachment_preview.tsx

@@ -29,9 +29,7 @@ export const VideoAttachmentPreview = ({
   if (loading) {
     return (
       <View style={styles.container}>
-        <View style={styles.loadingContainer}>
-          <Spinner size={20} />
-        </View>
+        <Spinner size={20} style={styles.spinner} />
       </View>
     )
   }
@@ -98,13 +96,6 @@ const useStyles = ({ error }: Partial<VideoAttachmentPreviewProps>) => {
       borderRadius,
       padding: 4,
     },
-    loadingContainer: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    },
     contentContainer: {
       flexDirection: 'row',
       gap: 8,
@@ -149,5 +140,8 @@ const useStyles = ({ error }: Partial<VideoAttachmentPreviewProps>) => {
       transform: [{ translateX: 1 }],
       fontSize: 10,
     },
+    spinner: {
+      marginHorizontal: 'auto',
+    },
   })
 }

package/src/components/primitive/banner_primitive.tsx

@@ -8,7 +8,6 @@ import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformFontWeightMedium,
   platformPressedOpacityStyle,
-  space,
 } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { useCreateAndroidRippleColor, useFontScale } from '../../hooks'
@@ -275,18 +274,18 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
     staticLayout: {
       flexDirection: 'row',
       backgroundColor: statusColorMap[appearance].background,
-      padding: space(1.5),
-      gap: space(1),
+      padding: 12,
+      gap: 8,
       borderRadius: tokens.borderRadiusMd,
     },
     content: {
-      gap: space(0.5),
+      gap: 4,
       flex: 1,
     },
     icon: {
       color: statusColorMap[appearance].icon,
       fontSize: tokens.fontSizeMd,
-      marginTop: (space(0.5) - LINE_HEIGHT_OFFSET) * fontScale,
+      marginTop: (4 - LINE_HEIGHT_OFFSET) * fontScale,
     },
     heading: {
       color: statusColorMap[appearance].text,

package/src/screens/conversation_details_screen.tsx

@@ -32,7 +32,6 @@ import {
 import { MemberResource, isDefined } from '../types'
 import { HeaderSubmitButton } from '../components/display/platform_modal_header_buttons'
 import { FlashList } from '@shopify/flash-list'
-import { space } from '../utils'
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
@@ -519,7 +518,8 @@ function TeamsGroup({ teams }: { teams: GroupResource[] }) {
 
 const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {
   const { colors } = useTheme()
-  const headerBottomPadding = space(0.5)
+  const headerBottomPadding = 4
+  const sectionBorderRadius = 8
 
   return StyleSheet.create({
     listContainer: {
@@ -527,50 +527,50 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
       backgroundColor: colors.surfaceColor080,
     },
     contentContainer: {
-      padding: space(2),
+      padding: 16,
     },
     sectionOuterBase: {
-      paddingLeft: space(2),
+      paddingLeft: 16,
       backgroundColor: colors.surfaceColor100,
-      borderTopLeftRadius: isStart ? space(1) : 0,
-      borderTopRightRadius: isStart ? space(1) : 0,
-      borderBottomLeftRadius: isEnd ? space(1) : 0,
-      borderBottomRightRadius: isEnd ? space(1) : 0,
-      marginBottom: isEnd ? space(2) : 0,
+      borderTopLeftRadius: isStart ? sectionBorderRadius : 0,
+      borderTopRightRadius: isStart ? sectionBorderRadius : 0,
+      borderBottomLeftRadius: isEnd ? sectionBorderRadius : 0,
+      borderBottomRightRadius: isEnd ? sectionBorderRadius : 0,
+      marginBottom: isEnd ? 16 : 0,
     },
     sectionInnerBase: {
-      paddingRight: space(2),
-      paddingTop: isStart ? space(2) : space(1.5),
-      paddingBottom: isEnd ? space(2) : space(1.5),
+      paddingRight: 16,
+      paddingTop: isStart ? 16 : 12,
+      paddingBottom: isEnd ? 16 : 12,
     },
     sectionInnerHeader: {
       paddingBottom: headerBottomPadding,
     },
     sectionInnerHeaderWithBottomBorder: {
-      paddingBottom: space(2),
+      paddingBottom: 16,
     },
     sectionInnerBottomBorder: {
       borderBottomColor: colors.borderColorDefaultBase,
       borderBottomWidth: isEnd ? 0 : 1,
     },
     sectionInnerTitleInput: {
-      paddingTop: space(1.5), // paddingVertical doesn't override the sectionInner padding
-      paddingBottom: space(1.5),
+      paddingTop: 12, // paddingVertical doesn't override the sectionInner padding
+      paddingBottom: 12,
     },
     sectionInnerChildNotice: {
       paddingBottom: headerBottomPadding,
     },
     sectionInnerMiddleMiddle: {
       paddingTop: 0,
-      paddingBottom: space(1.5),
+      paddingBottom: 12,
     },
     sectionInnerFirstMember: {
-      paddingTop: space(1.5),
-      paddingBottom: space(1.5),
+      paddingTop: 12,
+      paddingBottom: 12,
     },
     sectionInnerLastMember: {
       paddingTop: 0,
-      paddingBottom: space(2),
+      paddingBottom: 16,
     },
     titleContainer: {
       gap: 4,
@@ -605,7 +605,7 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      gap: space(1),
+      gap: 8,
     },
     settingRowContent: {
       flex: 1,

package/src/screens/design_system_screen.tsx

@@ -24,7 +24,6 @@ import {
   ImageAttachmentPreview,
 } from '../components/display'
 import {
-  space,
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
   platformFontWeightMedium,
@@ -211,15 +210,13 @@ function ThemeSection({ isLast }: SectionProps) {
 // }
 
 function IndicatorsSection({ isLast }: SectionProps) {
-  const styles = useStyles()
-
   return (
     <CollapsableSection title="Indicators" isLast={isLast}>
       <Group
         title="Spinner"
         description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading."
       >
-        <Row style={styles.spinnerContainer}>
+        <Row>
           <Spinner size={24} />
         </Row>
       </Group>
@@ -1159,11 +1156,11 @@ const useStyles = () => {
       backgroundColor: colors.fillColorNeutral100Inverted,
     },
     container: {
-      padding: space(3),
+      padding: 24,
     },
     listItem: { color: colors.fillColorNeutral020 },
     section: {
-      gap: space(1),
+      gap: 8,
       borderColor: colors.fillColorNeutral020,
     },
     sectionBorderTop: {
@@ -1176,30 +1173,30 @@ const useStyles = () => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingVertical: space(3),
+      paddingVertical: 24,
     },
     sectionChildren: {
-      paddingBottom: space(3),
-      gap: space(6),
+      paddingBottom: 24,
+      gap: 48,
     },
     row: {
-      gap: space(2),
+      gap: 16,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
     column: {
-      gap: space(2),
+      gap: 16,
     },
     columnCenter: {
       alignItems: 'center',
     },
     textRow: {
-      gap: space(1.5),
+      gap: 12,
     },
     textGroup: {
-      gap: space(2.5),
+      gap: 20,
     },
     mediumWeight: {
       fontWeight: platformFontWeightMedium,
@@ -1208,13 +1205,10 @@ const useStyles = () => {
       justifyContent: 'flex-start',
     },
     group: {
-      gap: space(3),
+      gap: 24,
     },
     groupHeading: {
-      gap: space(1),
-    },
-    spinnerContainer: {
-      height: space(2.5),
+      gap: 8,
     },
     image: {
       width: 100,

package/src/utils/index.ts

@@ -1,7 +1,6 @@
 export * from './session'
 export * from './theme'
 export * from './styles'
-export * from './space'
 export * from './client'
 export * from './uri'
 export * from './cache'

package/build/utils/space.d.ts

@@ -1,3 +0,0 @@
-export type SpacingValues = 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5;
-export declare function space(value: SpacingValues): number;
-//# sourceMappingURL=space.d.ts.map

package/build/utils/space.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../src/utils/space.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GACrB,IAAI,GACJ,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,CAAA;AAEP,wBAAgB,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAalD"}

package/build/utils/space.js

@@ -1,22 +0,0 @@
-import { tokens } from '../vendor/tapestry/tokens';
-export function space(value) {
-    if (value === 0.25)
-        return tokens.spacingFourth;
-    if (value === 0.5)
-        return tokens.spacingHalf;
-    if (value < 1 || value > 7.5)
-        return handleInvalidSpace(value);
-    // Reject fractional values that are not 0 or 0.5
-    const wholeValue = Math.floor(value);
-    const fractionalValue = value % 1;
-    if (fractionalValue !== 0 && fractionalValue !== 0.5)
-        return handleInvalidSpace(value);
-    // Deliver a whole value or add a half spacing token to it
-    const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0;
-    return tokens[`spacing${wholeValue}`] + remainderValue;
-}
-function handleInvalidSpace(value) {
-    console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`);
-    return 0;
-}
-//# sourceMappingURL=space.js.map

package/build/utils/space.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAoBlD,MAAM,UAAU,KAAK,CAAC,KAAoB;IACxC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC,aAAa,CAAA;IAC/C,IAAI,KAAK,KAAK,GAAG;QAAE,OAAO,MAAM,CAAC,WAAW,CAAA;IAC5C,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,GAAG;QAAE,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAE9D,iDAAiD;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAA8B,CAAA;IACjE,MAAM,eAAe,GAAG,KAAK,GAAG,CAAC,CAAA;IACjC,IAAI,eAAe,KAAK,CAAC,IAAI,eAAe,KAAK,GAAG;QAAE,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAEtF,0DAA0D;IAC1D,MAAM,cAAc,GAAG,eAAe,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;IACvE,OAAO,MAAM,CAAC,UAAU,UAAU,EAAE,CAAC,GAAG,cAAc,CAAA;AACxD,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAa;IACvC,OAAO,CAAC,IAAI,CAAC,wBAAwB,KAAK,gDAAgD,CAAC,CAAA;IAC3F,OAAO,CAAC,CAAA;AACV,CAAC","sourcesContent":["import { tokens } from '../vendor/tapestry/tokens'\n\nexport type SpacingValues =\n  | 0.25\n  | 0.5\n  | 1\n  | 1.5\n  | 2\n  | 2.5\n  | 3\n  | 3.5\n  | 4\n  | 4.5\n  | 5\n  | 5.5\n  | 6\n  | 6.5\n  | 7\n  | 7.5\n\nexport function space(value: SpacingValues): number {\n  if (value === 0.25) return tokens.spacingFourth\n  if (value === 0.5) return tokens.spacingHalf\n  if (value < 1 || value > 7.5) return handleInvalidSpace(value)\n\n  // Reject fractional values that are not 0 or 0.5\n  const wholeValue = Math.floor(value) as 1 | 2 | 3 | 4 | 5 | 6 | 7\n  const fractionalValue = value % 1\n  if (fractionalValue !== 0 && fractionalValue !== 0.5) return handleInvalidSpace(value)\n\n  // Deliver a whole value or add a half spacing token to it\n  const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0\n  return tokens[`spacing${wholeValue}`] + remainderValue\n}\n\nfunction handleInvalidSpace(value: number) {\n  console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`)\n  return 0\n}\n"]}

package/src/__tests__/utils/space.tsx

@@ -1,60 +0,0 @@
-import { space, SpacingValues } from '../../utils/space'
-import { tokens } from '../../vendor/tapestry/tokens'
-
-describe('space function', () => {
-  // Spy on console.warn to check for invalid inputs
-  beforeEach(() => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-  })
-
-  afterEach(() => {
-    jest.restoreAllMocks()
-  })
-
-  const validTokenValues: Record<SpacingValues, number> = {
-    0.25: tokens.spacingFourth,
-    0.5: tokens.spacingHalf,
-    1: tokens.spacing1,
-    1.5: tokens.spacing1 + tokens.spacingHalf,
-    2: tokens.spacing2,
-    2.5: tokens.spacing2 + tokens.spacingHalf,
-    3: tokens.spacing3,
-    3.5: tokens.spacing3 + tokens.spacingHalf,
-    4: tokens.spacing4,
-    4.5: tokens.spacing4 + tokens.spacingHalf,
-    5: tokens.spacing5,
-    5.5: tokens.spacing5 + tokens.spacingHalf,
-    6: tokens.spacing6,
-    6.5: tokens.spacing6 + tokens.spacingHalf,
-    7: tokens.spacing7,
-    7.5: tokens.spacing7 + tokens.spacingHalf,
-  }
-
-  it('should return the correct token values for all valid SpacingValues', () => {
-    Object.entries(validTokenValues).forEach(([value, expected]) => {
-      expect(space(Number(value) as SpacingValues)).toBe(expected)
-    })
-  })
-
-  it('should warn and return 0 for an invalid value less than 1 (e.g., 0.8)', () => {
-    const result = space(0.8 as SpacingValues)
-    expect(result).toBe(0)
-    expect(console.warn).toHaveBeenCalledWith(warnText('0.8'))
-  })
-
-  it('should warn and return 0 for an invalid fractional value (e.g., 1.8)', () => {
-    const result = space(1.8 as SpacingValues)
-    expect(result).toBe(0)
-    expect(console.warn).toHaveBeenCalledWith(warnText('1.8'))
-  })
-
-  it('should warn and return 0 for a value greater than 7.5 (e.g., 19)', () => {
-    const result = space(19 as SpacingValues)
-    expect(result).toBe(0)
-    expect(console.warn).toHaveBeenCalledWith(warnText('19'))
-  })
-})
-
-function warnText(value: string) {
-  return `Invalid space value: ${value} — Must be a whole or half number between 1–7.`
-}

package/src/utils/space.ts

@@ -1,39 +0,0 @@
-import { tokens } from '../vendor/tapestry/tokens'
-
-export type SpacingValues =
-  | 0.25
-  | 0.5
-  | 1
-  | 1.5
-  | 2
-  | 2.5
-  | 3
-  | 3.5
-  | 4
-  | 4.5
-  | 5
-  | 5.5
-  | 6
-  | 6.5
-  | 7
-  | 7.5
-
-export function space(value: SpacingValues): number {
-  if (value === 0.25) return tokens.spacingFourth
-  if (value === 0.5) return tokens.spacingHalf
-  if (value < 1 || value > 7.5) return handleInvalidSpace(value)
-
-  // Reject fractional values that are not 0 or 0.5
-  const wholeValue = Math.floor(value) as 1 | 2 | 3 | 4 | 5 | 6 | 7
-  const fractionalValue = value % 1
-  if (fractionalValue !== 0 && fractionalValue !== 0.5) return handleInvalidSpace(value)
-
-  // Deliver a whole value or add a half spacing token to it
-  const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0
-  return tokens[`spacing${wholeValue}`] + remainderValue
-}
-
-function handleInvalidSpace(value: number) {
-  console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`)
-  return 0
-}