@planningcenter/chat-react-native 2.2.0-rc.0 → 2.2.0-rc.1

package/src/components/display/utils/status_colors.ts

@@ -0,0 +1,85 @@
+import { useTheme } from '../../../hooks'
+
+// =================================
+// ====== Exports ==================
+// =================================
+
+export { useStatusColorAppearanceMap }
+export type { StatusAppearanceUnion }
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const STATUS_APPEARANCES = {
+  error: 'error',
+  info: 'info',
+  neutral: 'neutral',
+  success: 'success',
+  warning: 'warning',
+} as const
+
+type StatusAppearanceUnion = (typeof STATUS_APPEARANCES)[keyof typeof STATUS_APPEARANCES]
+
+type StatusAppearanceColors = Record<
+  StatusAppearanceUnion,
+  {
+    background: string
+    text: string
+    icon: string
+  }
+>
+
+// =================================
+// ====== Hooks ====================
+// =================================
+
+function useStatusColorAppearanceMap(): StatusAppearanceColors {
+  const {
+    colors: {
+      statusErrorBackground,
+      statusErrorText,
+      statusErrorIcon,
+      statusInfoBackground,
+      statusInfoText,
+      statusInfoIcon,
+      statusNeutralBackground,
+      statusNeutralText,
+      statusNeutralIcon,
+      statusSuccessBackground,
+      statusSuccessText,
+      statusSuccessIcon,
+      statusWarningBackground,
+      statusWarningText,
+      statusWarningIcon,
+    },
+  } = useTheme()
+
+  return {
+    error: {
+      background: statusErrorBackground,
+      text: statusErrorText,
+      icon: statusErrorIcon,
+    },
+    info: {
+      background: statusInfoBackground,
+      text: statusInfoText,
+      icon: statusInfoIcon,
+    },
+    neutral: {
+      background: statusNeutralBackground,
+      text: statusNeutralText,
+      icon: statusNeutralIcon,
+    },
+    success: {
+      background: statusSuccessBackground,
+      text: statusSuccessText,
+      icon: statusSuccessIcon,
+    },
+    warning: {
+      background: statusWarningBackground,
+      text: statusWarningText,
+      icon: statusWarningIcon,
+    },
+  }
+}

package/src/components/primitive/banner_primitive.tsx

@@ -0,0 +1,247 @@
+import React, { createContext, FC, ReactNode, useContext } from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  useStatusColorAppearanceMap,
+  type StatusAppearanceUnion,
+} from '../display/utils/status_colors'
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, space } from '../../utils'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Heading, Icon, Text, TextInlineButton } from '../display'
+import { useFontScale } from '../../hooks'
+
+// ========================================
+// ====== Exports =========================
+// ========================================
+
+const Banner = {
+  Root: BannerRoot,
+  StaticLayout: BannerStaticLayout,
+  Content: BannerContent,
+  StatusIcon: BannerStatusIcon,
+  Heading: BannerHeading,
+  Text: BannerText,
+  Link: BannerLink,
+} as const
+
+type BannerComponents = {
+  Root: FC<BannerRootProps>
+  StaticLayout: FC<BannerStaticLayoutProps>
+  Content: FC<BannerContentProps>
+  StatusIcon: FC<BannerStatusIconProps>
+  Heading: FC<BannerHeadingProps>
+  Text: FC<BannerTextProps>
+  Link: FC<BannerLinkProps>
+}
+
+export default Banner as BannerComponents
+export type {
+  BannerRootProps,
+  BannerStaticLayoutProps,
+  BannerContentProps,
+  BannerStatusIconProps,
+  BannerHeadingProps,
+  BannerTextProps,
+  BannerLinkProps,
+}
+
+// ========================================
+// ====== Context =========================
+// ========================================
+
+interface BannerContextType {
+  appearance?: StatusAppearanceUnion
+}
+
+const BannerContext = createContext<BannerContextType | null>(null)
+
+function useBannerContext() {
+  const context = useContext(BannerContext)
+  if (!context) {
+    throw new Error('Banner components must be used within Banner.Root')
+  }
+  return context
+}
+
+// ========================================
+// ====== BannerRoot ======================
+// ========================================
+
+interface BannerRootProps {
+  children: ReactNode
+  appearance?: StatusAppearanceUnion
+}
+
+function BannerRoot({ children, appearance = 'neutral' }: BannerRootProps) {
+  return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>
+}
+
+BannerRoot.displayName = 'Banner.Root'
+
+// ========================================
+// ====== BannerStaticLayout ==============
+// ========================================
+
+interface BannerStaticLayoutProps {
+  children: ReactNode
+}
+
+function BannerStaticLayout({ children }: BannerStaticLayoutProps) {
+  const { appearance } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return <View style={styles.staticLayout}>{children}</View>
+}
+
+BannerStaticLayout.displayName = 'Banner.StaticLayout'
+
+// ========================================
+// ====== BannerContent ===================
+// ========================================
+
+interface BannerContentProps {
+  children: ReactNode
+}
+
+function BannerContent({ children }: BannerContentProps) {
+  const styles = useStyles()
+
+  return <View style={styles.content}>{children}</View>
+}
+
+BannerContent.displayName = 'Banner.Content'
+
+// ========================================
+// ====== BannerStatusIcon ================
+// ========================================
+
+interface BannerStatusIconProps {
+  iconName?: string
+}
+
+function BannerStatusIcon({ iconName }: BannerStatusIconProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  const iconNameMap = {
+    error: 'general.exclamationTriangle',
+    info: 'general.outlinedInfoCircle',
+    neutral: 'general.outlinedInfoCircle',
+    success: 'general.check',
+    warning: 'general.exclamationTriangle',
+  } as const
+
+  return (
+    <Icon
+      name={iconName || iconNameMap[appearance]}
+      style={styles.icon}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+    />
+  )
+}
+
+BannerStatusIcon.displayName = 'Banner.StatusIcon'
+
+// ========================================
+// ====== BannerHeading ===================
+// ========================================
+
+interface BannerHeadingProps {
+  children: ReactNode
+}
+
+function BannerHeading({ children }: BannerHeadingProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return (
+    <Heading variant="h3" style={styles.heading}>
+      {children}
+    </Heading>
+  )
+}
+
+BannerHeading.displayName = 'Banner.Heading'
+
+// ========================================
+// ====== BannerText ======================
+// ========================================
+
+interface BannerTextProps {
+  children: ReactNode
+}
+
+function BannerText({ children }: BannerTextProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return (
+    <Text variant="tertiary" style={styles.text}>
+      {children}
+    </Text>
+  )
+}
+
+BannerText.displayName = 'Banner.Text'
+
+// ========================================
+// ====== BannerLink ======================
+// ========================================
+
+interface BannerLinkProps {
+  children: ReactNode
+  onPress?: () => void
+}
+
+function BannerLink({ children, onPress }: BannerLinkProps) {
+  const { appearance = 'neutral' } = useBannerContext()
+  const styles = useStyles({ appearance })
+
+  return (
+    <TextInlineButton variant="tertiary" style={styles.text} onPress={onPress}>
+      {children}
+    </TextInlineButton>
+  )
+}
+
+BannerLink.displayName = 'Banner.Link'
+
+// ========================================
+// ====== Styles ==========================
+// ========================================
+
+interface Styles {
+  appearance?: StatusAppearanceUnion
+}
+
+const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
+  const statusColorMap = useStatusColorAppearanceMap()
+  const fontScale = useFontScale()
+
+  return StyleSheet.create({
+    staticLayout: {
+      flexDirection: 'row',
+      backgroundColor: statusColorMap[appearance].background,
+      padding: space(1.5),
+      gap: space(1),
+      borderRadius: tokens.borderRadiusMd,
+      flex: 1,
+    },
+    content: {
+      gap: space(0.5),
+      flex: 1,
+    },
+    icon: {
+      color: statusColorMap[appearance].icon,
+      fontSize: tokens.fontSizeMd,
+      marginTop: space(0.5) * fontScale,
+    },
+    heading: {
+      color: statusColorMap[appearance].text,
+      fontWeight: platformFontWeightMedium,
+      fontSize: tokens.fontSizeMd,
+    },
+    text: {
+      color: statusColorMap[appearance].text,
+    },
+  })
+}

package/src/hooks/use_font_scale.ts

@@ -1,6 +1,8 @@
 import { useWindowDimensions } from 'react-native'
 
-export const useFontScale = ({ maxFontSizeMultiplier }: { maxFontSizeMultiplier?: number }) => {
+export const useFontScale = ({
+  maxFontSizeMultiplier,
+}: { maxFontSizeMultiplier?: number } = {}) => {
   const { fontScale: nativeFontScale } = useWindowDimensions()
   const scaleLimit = maxFontSizeMultiplier || nativeFontScale
   const fontScale = Math.min(scaleLimit, nativeFontScale)

package/src/screens/design_system_screen.tsx

@@ -6,6 +6,7 @@ import {
   Avatar,
   AvatarGroup,
   Badge,
+  Banner,
   Button,
   Heading,
   Icon,
@@ -23,6 +24,7 @@ import {
   platformPressedOpacityStyle,
   platformFontWeightMedium,
 } from '../utils'
+import BannerPrimitive from '../components/primitive/banner_primitive'
 
 // =================================
 // ====== Docs Utils ===============
@@ -756,6 +758,47 @@ function StatusComponentsSection({ isLast }: SectionProps) {
           <Badge variant="metaSubtle" productLogoName="services" label="Team" />
         </Row>
       </Group>
+      <Group
+        title="Banner"
+        description="Banners that can convey a status with color and an optional icon. They render a description and optional heading. A `Banner.Link` can be used by wrapping it in `Banner.Text` and passing it to `description`. Target products can change colors via theming."
+      >
+        <Column>
+          <Banner
+            appearance="neutral"
+            showIcon={false}
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+          <Banner
+            appearance="info"
+            heading="Banner heading"
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+          <Banner
+            appearance="success"
+            heading="Banner heading"
+            description={
+              <BannerPrimitive.Text>
+                Et sint Quis non excepturi{' '}
+                <BannerPrimitive.Link onPress={buttonPress}>
+                  enim et conseq atur porro est
+                </BannerPrimitive.Link>{' '}
+                galisum labore ea volupt.
+              </BannerPrimitive.Text>
+            }
+          />
+          <Banner
+            appearance="warning"
+            iconName="general.shieldExclamation"
+            heading="13 members under age 13"
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+          <Banner
+            appearance="error"
+            heading="Banner heading"
+            description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."
+          />
+        </Column>
+      </Group>
     </CollapsableSection>
   )
 }
@@ -818,6 +861,16 @@ function Row({ children, style }: RowProps) {
   return <View style={[styles.row, style]}>{children}</View>
 }
 
+interface ColumnProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+function Column({ children, style }: ColumnProps) {
+  const styles = useStyles()
+  return <View style={[styles.column, style]}>{children}</View>
+}
+
 function TextGroup({ children }: { children: React.ReactNode }) {
   const styles = useStyles()
   return <View style={styles.textGroup}>{children}</View>
@@ -893,6 +946,9 @@ const useStyles = () => {
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
+    column: {
+      gap: space(2),
+    },
     textRow: {
       gap: space(1.5),
     },

package/build/components/display/button_color_utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button_color_utils.d.ts","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAA;AACjG,YAAY,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,CAAA;AAMhE,QAAA,MAAM,kBAAkB;;;CAGd,CAAA;AAEV,KAAK,qBAAqB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAA;AAEzF,QAAA,MAAM,uBAAuB;;;;CAGnB,CAAA;AAEV,KAAK,yBAAyB,GAC5B,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAA;AAExE,QAAA,MAAM,oBAAoB;;;;CAGhB,CAAA;AAEV,KAAK,sBAAsB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAA;AAE9F,QAAA,MAAM,yBAAyB;;;;;CAGrB,CAAA;AAEV,KAAK,0BAA0B,GAC7B,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,OAAO,yBAAyB,CAAC,CAAA;AAM5E,KAAK,oBAAoB,GAAG,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAA;AAClE,iBAAS,uBAAuB,IAAI,oBAAoB,CAQvD;AAED,KAAK,wBAAwB,GAAG,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAA;AAC1E,iBAAS,2BAA2B,IAAI,wBAAwB,CAS/D;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AACxE,iBAAS,mBAAmB,IAAI,gBAAgB,CAc/C;AAMD,UAAU,eAAe;IACvB,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,qBAAqB,GAAG,yBAAyB,CAAA;CAC9D;AACD,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,eAAe,qDAGtE"}

package/build/components/display/button_color_utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button_color_utils.js","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAA;AAGjG,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,kBAAkB,GAAG;IACzB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;CAClB,CAAA;AAIV,MAAM,uBAAuB,GAAG;IAC9B,GAAG,kBAAkB;IACrB,OAAO,EAAE,SAAS;CACV,CAAA;AAKV,MAAM,oBAAoB,GAAG;IAC3B,GAAG,kBAAkB;IACrB,QAAQ,EAAE,UAAU;CACZ,CAAA;AAIV,MAAM,yBAAyB,GAAG;IAChC,GAAG,oBAAoB;IACvB,GAAG,uBAAuB;CAClB,CAAA;AAUV,SAAS,uBAAuB;IAC9B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO;QACL,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,MAAM,EAAE,MAAM,CAAC,0BAA0B;QACzC,QAAQ,EAAE,MAAM,CAAC,wBAAwB;KAC1C,CAAA;AACH,CAAC;AAGD,SAAS,2BAA2B;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO;QACL,MAAM,EAAE,MAAM,CAAC,0BAA0B;QACzC,QAAQ,EAAE,MAAM,CAAC,wBAAwB;QACzC,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,OAAO,EAAE,MAAM,CAAC,yBAAyB;KAC1C,CAAA;AACH,CAAC;AAGD,SAAS,mBAAmB;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAA;IAClE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAA;IAE9D,OAAO;QACL,WAAW,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC;QACjD,MAAM,EAAE,CAAC,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,0BAA0B,CAAC;QAC9E,QAAQ,EAAE;YACR,MAAM,CAAC,mCAAmC;YAC1C,MAAM,CAAC,mCAAmC;SAC3C;KACF,CAAA;AACH,CAAC;AAWD,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAmB;IACrE,IAAI,QAAQ,IAAI,OAAO;QAAE,OAAO,UAAU,CAAA;IAC1C,OAAO,UAAU,CAAA;AACnB,CAAC","sourcesContent":["import { useTheme } from '../../hooks'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\nexport { getColorKey, useButtonColorOptionMap, useGradientColorMap, useIconButtonColorOptionMap }\nexport type { ButtonAppearanceUnion, IconButtonAppearanceUnion }\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst BUTTON_APPEARANCES = {\n  danger: 'danger',\n  interaction: 'interaction',\n} as const\n\ntype ButtonAppearanceUnion = (typeof BUTTON_APPEARANCES)[keyof typeof BUTTON_APPEARANCES]\n\nconst ICON_BUTTON_APPEARANCES = {\n  ...BUTTON_APPEARANCES,\n  neutral: 'neutral',\n} as const\n\ntype IconButtonAppearanceUnion =\n  (typeof ICON_BUTTON_APPEARANCES)[keyof typeof ICON_BUTTON_APPEARANCES]\n\nconst BUTTON_COLOR_OPTIONS = {\n  ...BUTTON_APPEARANCES,\n  disabled: 'disabled',\n} as const\n\ntype ButtonColorOptionUnion = (typeof BUTTON_COLOR_OPTIONS)[keyof typeof BUTTON_COLOR_OPTIONS]\n\nconst ICON_BUTTON_COLOR_OPTIONS = {\n  ...BUTTON_COLOR_OPTIONS,\n  ...ICON_BUTTON_APPEARANCES,\n} as const\n\ntype IconButtonColorOptionUnion =\n  (typeof ICON_BUTTON_COLOR_OPTIONS)[keyof typeof ICON_BUTTON_COLOR_OPTIONS]\n\n// =================================\n// ====== Hooks ====================\n// =================================\n\ntype ButtonColorOptionMap = Record<ButtonColorOptionUnion, string>\nfunction useButtonColorOptionMap(): ButtonColorOptionMap {\n  const { colors } = useTheme()\n\n  return {\n    interaction: colors.interaction,\n    danger: colors.fillColorStatusErrorMedium,\n    disabled: colors.textColorDefaultDisabled,\n  }\n}\n\ntype IconButtonColorOptionMap = Record<IconButtonColorOptionUnion, string>\nfunction useIconButtonColorOptionMap(): IconButtonColorOptionMap {\n  const { colors } = useTheme()\n\n  return {\n    danger: colors.fillColorStatusErrorMedium,\n    disabled: colors.textColorDefaultDisabled,\n    interaction: colors.interaction,\n    neutral: colors.iconColorDefaultSecondary,\n  }\n}\n\ntype GradientColorMap = Record<ButtonColorOptionUnion, [string, string]>\nfunction useGradientColorMap(): GradientColorMap {\n  const { colors } = useTheme()\n\n  const defaultColorStart = colors.buttonStart || colors.interaction\n  const defaultColorEnd = colors.buttonEnd || colors.interaction\n\n  return {\n    interaction: [defaultColorStart, defaultColorEnd],\n    danger: [colors.fillColorStatusErrorMedium, colors.fillColorStatusErrorMedium],\n    disabled: [\n      colors.fillColorButtonNeutralSolidDisabled,\n      colors.fillColorButtonNeutralSolidDisabled,\n    ],\n  }\n}\n\n// =================================\n// ====== Functions ================\n// =================================\n\ninterface GetColorKeyArgs {\n  disabled: boolean | null\n  loading?: boolean\n  appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion\n}\nfunction getColorKey({ disabled, loading, appearance }: GetColorKeyArgs) {\n  if (disabled || loading) return 'disabled'\n  return appearance\n}\n"]}