@planningcenter/chat-react-native 1.6.2-rc.1 → 1.6.2-rc.3

package/src/components/display/badge.tsx

@@ -0,0 +1,323 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import type { ViewStyle, TextStyle } from 'react-native'
+import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'
+import { useFontScale, useTheme } from '../../hooks'
+import { Icon } from './icon'
+import { Text } from './text'
+import { platformFontWeightMedium, space } from '../../utils'
+import { tokens } from '../../vendor/tapestry/tokens'
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const APPEARANCES = {
+  error: 'error',
+  info: 'info',
+  neutral: 'neutral',
+  success: 'success',
+  warning: 'warning',
+} as const
+
+type AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES]
+
+type AppearanceColors = Record<
+  AppearanceUnion,
+  {
+    background: string
+    text: string
+    icon: string
+  }
+>
+
+const VARIANTS = {
+  default: 'default',
+  meta: 'meta',
+  metaSubtle: 'metaSubtle',
+} as const
+
+type VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]
+
+type VariantStyles = Record<
+  VariantUnion,
+  {
+    backgroundColor: string
+    paddingHorizontal: number
+    paddingVertical: number
+    borderWidth: number
+    borderRadius: number
+    textColor: string
+    gap: number
+    metaLabelPaddingLeft: number
+    fontWeight: TextStyle['fontWeight']
+  }
+>
+
+const LOGO_NAMES = {
+  groups: 'groups',
+  services: 'services',
+} as const
+
+type PoductLogoNameUnion = (typeof LOGO_NAMES)[keyof typeof LOGO_NAMES]
+
+const PRODUCT_LOGO_COMPONENT_MAP = {
+  groups: GroupsLogo,
+  services: ServicesIcon,
+} as const
+
+// =================================
+// ====== Component ================
+// =================================
+
+interface BadgeProps {
+  /**
+   * Renders the main text.
+   */
+  label: string
+  /**
+   * Renders secondary meta text to the right of the label.
+   */
+  metaLabel?: string
+  /**
+   * Changes the status color for the badge and icon.
+   */
+  appearance?: AppearanceUnion
+  /**
+   * Changes form of the logo to support a meta label and badge
+   */
+  variant?: VariantUnion
+  /**
+   * Adds a product logo to the left of the text.
+   */
+  productLogoName?: PoductLogoNameUnion
+  /**
+   * Shows an icon of the user choice to the left of the text.
+   */
+  iconName?: string
+  /**
+   * Styles badge wrapper.
+   */
+  style?: ViewStyle
+  /**
+   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+   */
+  maxFontSizeMultiplier?: number
+}
+
+export function Badge({
+  appearance = 'neutral',
+  metaLabel,
+  style,
+  iconName,
+  label,
+  productLogoName,
+  variant = 'default',
+  maxFontSizeMultiplier,
+}: BadgeProps) {
+  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
+  const { showBadgeLogo } = useTheme()
+
+  const isMetaSubtle = variant === 'metaSubtle'
+  const isMeta = variant === 'meta'
+  const hasMetaLabel = Boolean(metaLabel)
+
+  const showLogo = showBadgeLogo && productLogoName && isMeta
+  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]
+  const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label
+
+  return (
+    <View style={[styles.badgeWrapper, style]}>
+      <View style={styles.badge}>
+        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}
+        {iconName && <Icon name={iconName} style={styles.icon} />}
+        <Text variant="footnote" style={styles.label}>
+          {badgeLabel}
+        </Text>
+      </View>
+      {hasMetaLabel && (
+        <Text variant="footnote" style={styles.metaLabel} numberOfLines={1}>
+          {metaLabel}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({
+  appearance = 'neutral',
+  maxFontSizeMultiplier,
+  variant = 'default',
+}: Partial<BadgeProps>) => {
+  const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+
+  const apparenceColorMap: AppearanceColors = {
+    error: {
+      background: colors.statusErrorBackground,
+      text: colors.statusErrorText,
+      icon: colors.statusErrorIcon,
+    },
+    info: {
+      background: colors.statusInfoBackground,
+      text: colors.statusInfoText,
+      icon: colors.statusInfoIcon,
+    },
+    neutral: {
+      background: colors.statusNeutralBackground,
+      text: colors.statusNeutralText,
+      icon: colors.statusNeutralIcon,
+    },
+    success: {
+      background: colors.statusSuccessBackground,
+      text: colors.statusSuccessText,
+      icon: colors.statusSuccessIcon,
+    },
+    warning: {
+      background: colors.statusWarningBackground,
+      text: colors.statusWarningText,
+      icon: colors.statusWarningIcon,
+    },
+  }
+
+  const badgePaddingHorizontal = space(1) * fontScale
+  const badgePaddingVertical = space(0.5) * fontScale
+  const badgeGap = space(0.5) * fontScale
+  const badgeFontSize = 12
+
+  const variantStylesMap: VariantStyles = {
+    default: {
+      gap: badgeGap,
+      backgroundColor: apparenceColorMap[appearance].background,
+      metaLabelPaddingLeft: badgePaddingHorizontal,
+      paddingHorizontal: badgePaddingHorizontal,
+      paddingVertical: badgePaddingVertical,
+      borderWidth: tokens.borderSizeDefault * fontScale,
+      borderRadius: tokens.borderRadiusMd,
+      textColor: apparenceColorMap[appearance].text,
+      fontWeight: 'normal',
+    },
+    meta: {
+      gap: badgeGap,
+      backgroundColor: apparenceColorMap[appearance].background,
+      metaLabelPaddingLeft: badgePaddingHorizontal,
+      paddingHorizontal: badgePaddingHorizontal,
+      paddingVertical: badgePaddingVertical,
+      borderWidth: tokens.borderSizeDefault * fontScale,
+      borderRadius: tokens.borderRadiusMd,
+      textColor: apparenceColorMap[appearance].text,
+      fontWeight: platformFontWeightMedium,
+    },
+    metaSubtle: {
+      gap: badgeGap,
+      backgroundColor: 'transparent',
+      metaLabelPaddingLeft: badgeGap,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      borderWidth: 0,
+      borderRadius: 0,
+      textColor: colors.textColorDefaultSecondary,
+      fontWeight: platformFontWeightMedium,
+    },
+  }
+
+  return StyleSheet.create({
+    badgeWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: variantStylesMap[variant].borderRadius,
+      borderWidth: variantStylesMap[variant].borderWidth,
+      borderColor: apparenceColorMap[appearance].background,
+    },
+    badge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: variantStylesMap[variant].gap,
+      paddingVertical: variantStylesMap[variant].paddingVertical,
+      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
+      backgroundColor: variantStylesMap[variant].backgroundColor,
+      borderRadius: variantStylesMap[variant].borderRadius - 2,
+    },
+    icon: {
+      color: apparenceColorMap[appearance].icon,
+      fontSize: badgeFontSize,
+    },
+    logo: {
+      fontSize: badgeFontSize * fontScale,
+    },
+    label: {
+      color: variantStylesMap[variant].textColor,
+      fontWeight: variantStylesMap[variant].fontWeight,
+      fontSize: badgeFontSize,
+    },
+    metaLabel: {
+      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
+      fontSize: badgeFontSize,
+      flexShrink: 1,
+      paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
+    },
+  })
+}
+
+// =================================
+// ====== Product Logos ============
+// =================================
+
+interface ProductLogoProps {
+  logoSize: number
+}
+
+function GroupsLogo({ logoSize }: ProductLogoProps) {
+  return (
+    <Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z"
+        fill="url(#paint0_linear_2632_26363)"
+      />
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_2632_26363"
+          x1={-5.6338}
+          y1={5.6338}
+          x2={5.6338}
+          y2={16.9014}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF962D" />
+          <Stop offset={1} stopColor="#FC7638" />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}
+
+function ServicesIcon({ logoSize }: ProductLogoProps) {
+  return (
+    <Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z"
+        fill="url(#paint0_linear_2632_56586)"
+      />
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_2632_56586"
+          x1={-5.51759}
+          y1={5.6338}
+          x2={5.75001}
+          y2={16.9014}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#6BB23D" />
+          <Stop offset={1} stopColor="#659630" />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}

package/src/components/display/index.ts

@@ -1,11 +1,13 @@
 export * from './avatar'
 export * from './avatar_group'
+export * from './badge'
 export * from './button'
 export * from './heading'
 export * from './icon'
 export * from './icon_button'
 export * from './image'
 export * from './spinner'
+export * from './switch'
 export * from './text'
 export * from './text_button'
 export * from './text_inline_button'

package/src/components/display/switch.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Switch as ReactNativeSwitch } from 'react-native'
+import type { SwitchProps } from 'react-native'
+import { useTheme } from '../../hooks'
+
+// =================================
+// ====== Component ================
+// =================================
+
+export function Switch({ disabled, ...props }: SwitchProps) {
+  const { colors } = useTheme()
+
+  return (
+    <ReactNativeSwitch
+      {...props}
+      trackColor={{
+        true: colors.switchTrackTrue,
+        false: colors.switchTrackFalse,
+      }}
+      thumbColor={disabled ? undefined : colors.switchThumbColor}
+    />
+  )
+}