@sendbird/uikit-react-native-foundation 2.0.3 → 2.2.0

package/src/components/RegexText/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { replaceWithRegex } from '@sendbird/uikit-utils';
+
+import Text, { TextProps } from '../Text';
+
+interface Pattern {
+  regex: RegExp;
+  replacer(params: {
+    match: string;
+    groups: string[];
+    index: number;
+    keyPrefix: string;
+    parentProps?: TextProps;
+  }): string | JSX.Element;
+}
+
+type Props = { patterns: Pattern[] } & TextProps;
+
+const RegexText = ({ children, patterns, ...props }: Props) => {
+  if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;
+
+  const matchedTexts: Array<string | JSX.Element> = [children];
+
+  patterns.forEach(({ regex, replacer }, patterIndex) => {
+    const matchedTextsTemp = matchedTexts.concat();
+    let offset = 0;
+    matchedTextsTemp.forEach((text, index) => {
+      if (typeof text === 'string' && text) {
+        const children = replaceWithRegex(
+          text,
+          regex,
+          (params) => replacer({ ...params, parentProps: props, keyPrefix: index + params.keyPrefix }),
+          String(patterIndex),
+        );
+
+        if (children.length > 1) {
+          matchedTexts.splice(index + offset, 1, ...children);
+          offset += children.length - 1;
+        }
+      }
+    });
+  });
+
+  return <Text {...props}>{matchedTexts}</Text>;
+};
+
+export default RegexText;

package/src/components/URLParsedText/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Linking } from 'react-native';
 
 import { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';
@@ -19,30 +19,28 @@ type Props = TextProps & {
   strict?: boolean;
 };
 const URLParsedText = ({ children, onPressUrl = openUrl, strict, ...props }: Props) => {
-  const parsedChildren = useMemo((): React.ReactNode => {
-    return React.Children.map(React.Children.toArray(children), (child) => {
-      if (typeof child === 'string') {
-        return replaceUrlAsComponents(
-          child,
-          (url) => {
-            return (
-              <Text
-                {...props}
-                suppressHighlighting
-                onPress={() => onPressUrl?.(url, url.startsWith('http'))}
-                style={[props.style, styles.url]}
-              >
-                {url}
-              </Text>
-            );
-          },
-          strict,
-        );
-      }
+  const parsedChildren = React.Children.map(React.Children.toArray(children), (child) => {
+    if (typeof child === 'string') {
+      return replaceUrlAsComponents(
+        child,
+        (url) => {
+          return (
+            <Text
+              {...props}
+              suppressHighlighting
+              onPress={() => onPressUrl?.(url, url.startsWith('http'))}
+              style={[props.style, styles.url]}
+            >
+              {url}
+            </Text>
+          );
+        },
+        strict,
+      );
+    }
 
-      return child;
-    });
-  }, [children]);
+    return child;
+  });
 
   return <Text {...props}>{parsedChildren}</Text>;
 };

package/src/index.ts

@@ -6,17 +6,18 @@ export { default as Divider } from './components/Divider';
 export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
 export { default as Modal } from './components/Modal';
+export { default as RegexText } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';
 export { default as URLParsedText } from './components/URLParsedText';
 
 /** UI **/
-export { default as ActionMenu, ActionMenuItem } from './ui/ActionMenu';
+export { default as ActionMenu } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';
 export { default as Avatar } from './ui/Avatar';
 export { default as Badge } from './ui/Badge';
-export { default as BottomSheet, BottomSheetItem } from './ui/BottomSheet';
+export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
@@ -24,7 +25,9 @@ export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
+export { default as OutlinedButton } from './ui/OutlinedButton';
 export { default as Placeholder } from './ui/Placeholder';
+export { default as ProfileCard } from './ui/ProfileCard';
 export { default as Prompt } from './ui/Prompt';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
 
@@ -32,9 +35,9 @@ export { default as Toast, useToast, ToastProvider } from './ui/Toast';
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';
 export { default as createScaleFactor } from './styles/createScaleFactor';
 export { default as createStyleSheet } from './styles/createStyleSheet';
-export { default as createTypography, UIKitTypographyOverrides } from './styles/createTypography';
+export { default as createTypography } from './styles/createTypography';
 export { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';
-export { HeaderStyleContext, HeaderStyleProvider, HeaderStyleContextType } from './styles/HeaderStyleContext';
+export { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';
 export { default as useHeaderStyle } from './styles/useHeaderStyle';
 
 /** Theme **/
@@ -63,3 +66,7 @@ export type {
   Component,
   GetColorTree,
 } from './types';
+export type { ActionMenuItem } from './ui/ActionMenu';
+export type { BottomSheetItem } from './ui/BottomSheet';
+export type { UIKitTypographyOverrides } from './styles/createTypography';
+export type { HeaderStyleContextType } from './styles/HeaderStyleContext';

package/src/styles/HeaderStyleContext.tsx

@@ -2,22 +2,11 @@ import React from 'react';
 import { StatusBar, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import type { BaseHeaderProps, HeaderElement } from '../types';
+import type { HeaderProps } from '../ui/Header';
 import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
-  HeaderComponent: (
-    props: BaseHeaderProps<
-      {
-        title?: HeaderElement;
-        left?: HeaderElement;
-        right?: HeaderElement;
-        onPressLeft?: () => void;
-        onPressRight?: () => void;
-      },
-      { clearTitleMargin?: boolean }
-    >,
-  ) => React.ReactElement | null;
+  HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;

package/src/styles/createStyleSheet.ts

@@ -12,7 +12,9 @@ const preProcessor: Partial<StylePreprocessor> = {
   'lineHeight': DEFAULT_SCALE_FACTOR,
   'borderRadius': DEFAULT_SCALE_FACTOR,
   'minWidth': SCALE_FACTOR_WITH_STR,
+  'maxWidth': SCALE_FACTOR_WITH_STR,
   'minHeight': SCALE_FACTOR_WITH_STR,
+  'maxHeight': SCALE_FACTOR_WITH_STR,
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,

package/src/theme/DarkUIKitTheme.ts

@@ -169,6 +169,38 @@ const DarkUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundDark01,
+            textBodyLabel: palette.onBackgroundDark02,
+            textBody: palette.onBackgroundDark01,
+            background: palette.background500,
+          },
+        },
+      },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundDark03,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.primary200,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background400,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

package/src/theme/LightUIKitTheme.ts

@@ -169,6 +169,38 @@ const LightUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundLight01,
+            textBodyLabel: palette.onBackgroundLight02,
+            textBody: palette.onBackgroundLight01,
+            background: palette.background50,
+          },
+        },
+      },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundLight03,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.primary300,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background100,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

package/src/types.ts

@@ -39,7 +39,10 @@ export type Component =
   | 'Placeholder'
   | 'Message'
   | 'DateSeparator'
-  | 'GroupChannelPreview';
+  | 'GroupChannelPreview'
+  | 'ProfileCard'
+  | 'Reaction';
+
 export type GetColorTree<
   Tree extends {
     Variant: {
@@ -65,6 +68,8 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'incoming' | 'outgoing';
     DateSeparator: 'default';
     GroupChannelPreview: 'default';
+    ProfileCard: 'default';
+    Reaction: 'default' | 'rounded';
   };
   State: {
     Header: 'none';
@@ -76,6 +81,8 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'enabled' | 'pressed';
     DateSeparator: 'none';
     GroupChannelPreview: 'none';
+    ProfileCard: 'none';
+    Reaction: 'enabled' | 'selected';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -96,6 +103,8 @@ export type ComponentColorTree = GetColorTree<{
       | 'coverBackground'
       | 'bodyIconBackground'
       | 'separator';
+    ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
+    Reaction: 'background' | 'highlight';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -139,6 +148,8 @@ export interface UIKitColors {
     message: ComponentColors<'Message'>;
     dateSeparator: ComponentColors<'DateSeparator'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
+    profileCard: ComponentColors<'ProfileCard'>;
+    reaction: ComponentColors<'Reaction'>;
   };
 }
 

package/src/ui/ActionMenu/index.tsx

@@ -15,6 +15,7 @@ export type ActionMenuItem = {
   title?: string;
   menuItems: {
     title: string;
+    style?: 'destructive';
     onPress?: (() => Promise<void>) | (() => void);
     onError?: () => void;
   }[];
@@ -83,7 +84,15 @@ const ActionMenu = ({ visible, onHide, onError, onDismiss, title, menuItems }: P
                   }
                 }}
               >
-                <Text subtitle2 color={colors.ui.dialog.default.none.text} numberOfLines={1}>
+                <Text
+                  subtitle2
+                  color={
+                    item.style === 'destructive'
+                      ? colors.ui.dialog.default.none.destructive
+                      : colors.ui.dialog.default.none.text
+                  }
+                  numberOfLines={1}
+                >
                   {item.title}
                 </Text>
               </TouchableOpacity>

package/src/ui/Avatar/AvatarGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactElement } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 const MAX = 4;
@@ -27,13 +27,13 @@ const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
     );
   }
 
-  const avatars = useMemo(() => {
+  const renderAvatars = () => {
     return (
       React.Children.map(children, (child, index) => {
         if (index + 1 > MAX) return child;
         if (!React.isValidElement(child)) return child;
 
-        if (childAmount === 1) return React.cloneElement(child, { size, containerStyle });
+        if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });
 
         const top = getTopPoint(index, childAmount) * size;
         const left = getLeftPoint(index) * size;
@@ -44,16 +44,20 @@ const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
 
         return (
           <View style={{ overflow: 'hidden', position: 'absolute', top, left, width, height }}>
-            {React.cloneElement(child, { size, square: true, containerStyle: { left: innerLeft, top: innerTop } })}
+            {React.cloneElement(child as ReactElement, {
+              size,
+              square: true,
+              containerStyle: { left: innerLeft, top: innerTop },
+            })}
           </View>
         );
       })?.slice(0, 4) ?? []
     );
-  }, [children]);
+  };
 
   return (
     <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>
-      {avatars}
+      {renderAvatars()}
     </View>
   );
 };

package/src/ui/Badge/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, StyleProp, View, ViewStyle } from 'react-native';
 
-import { truncatedBadgeCount } from '@sendbird/uikit-utils';
+import { truncatedCount } from '@sendbird/uikit-utils';
 
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
@@ -29,7 +29,7 @@ const Badge = ({ count, maxCount, badgeColor, textColor, style, size = 'default'
       ]}
     >
       <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>
-        {truncatedBadgeCount(count, maxCount)}
+        {truncatedCount(count, maxCount)}
       </Text>
     </View>
   );

package/src/ui/BottomSheet/index.tsx

@@ -7,6 +7,7 @@ import Modal from '../../components/Modal';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import DialogSheet from '../Dialog/DialogSheet';
 
+type HeaderProps = { onClose: () => Promise<void> };
 export type BottomSheetItem = {
   sheetItems: {
     icon?: keyof typeof Icon.Assets;
@@ -15,6 +16,7 @@ export type BottomSheetItem = {
     titleColor?: string;
     onPress: () => void;
   }[];
+  HeaderComponent?: (props: HeaderProps) => JSX.Element;
 };
 type Props = {
   visible: boolean;
@@ -22,7 +24,7 @@ type Props = {
   onError?: (error: unknown) => void;
   onDismiss?: () => void;
 } & BottomSheetItem;
-const BottomSheet = ({ onDismiss, onHide, visible, sheetItems }: Props) => {
+const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { width } = useWindowDimensions();
   const { bottom, left, right } = useSafeAreaInsets();
@@ -36,6 +38,7 @@ const BottomSheet = ({ onDismiss, onHide, visible, sheetItems }: Props) => {
       backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
     >
       <DialogSheet style={{ width, paddingBottom: bottom }}>
+        {HeaderComponent && <HeaderComponent onClose={onHide} />}
         {sheetItems.map(({ onPress, ...props }, idx) => (
           <TouchableOpacity
             activeOpacity={0.75}

package/src/ui/Dialog/index.tsx

@@ -154,6 +154,7 @@ export const DialogProvider = ({ defaultLabels, children }: Props) => {
                 onDismiss={consumeQueue}
                 visible={visibleState.current}
                 sheetItems={workingDialogJob.current.props.sheetItems}
+                HeaderComponent={workingDialogJob.current.props.HeaderComponent}
               />
             )}
           </BottomSheetContext.Provider>

package/src/ui/GroupChannelPreview/index.tsx

@@ -28,6 +28,9 @@ type Props = {
 
   frozen?: boolean;
   notificationOff?: boolean;
+  broadcast?: boolean;
+  mentioned?: boolean;
+  mentionTrigger?: string;
 };
 
 const GroupChannelPreview = ({
@@ -43,6 +46,9 @@ const GroupChannelPreview = ({
   titleCaptionLeft,
   frozen,
   notificationOff,
+  broadcast,
+  mentioned,
+  mentionTrigger = '@',
 }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
@@ -65,6 +71,14 @@ const GroupChannelPreview = ({
       <View style={styles.rightSection}>
         <View style={styles.rightTopSection}>
           <View style={styles.channelInfoContainer}>
+            {broadcast && (
+              <Icon
+                size={16}
+                icon={'broadcast'}
+                color={colors.secondary}
+                containerStyle={styles.channelInfoBroadcast}
+              />
+            )}
             <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>
               {title}
             </Text>
@@ -105,7 +119,14 @@ const GroupChannelPreview = ({
               </Text>
             </View>
           </View>
-          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
+          <View style={styles.unreadContainer}>
+            {mentioned && (
+              <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>
+                {mentionTrigger}
+              </Text>
+            )}
+            {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}
+          </View>
         </View>
         <Separator color={color.default.none.separator} />
       </View>
@@ -148,6 +169,9 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row',
   },
+  channelInfoBroadcast: {
+    marginRight: 4,
+  },
   channelInfoTitle: {
     flexShrink: 1,
     marginRight: 4,
@@ -191,12 +215,12 @@ const styles = createStyleSheet({
     height: 26,
     marginRight: 4,
   },
-  unreadBadge: {
-    minWidth: 20,
-    minHeight: 20,
-    borderRadius: 99,
-    alignItems: 'center',
-    justifyContent: 'center',
+  unreadContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  unreadMention: {
+    marginRight: 4,
   },
   separator: {
     position: 'absolute',

package/src/ui/Header/index.tsx

@@ -11,7 +11,7 @@ import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
 type HeaderElement = string | React.ReactElement | null;
-type HeaderProps = BaseHeaderProps<
+export type HeaderProps = BaseHeaderProps<
   {
     title?: HeaderElement;
     left?: HeaderElement;
@@ -19,7 +19,10 @@ type HeaderProps = BaseHeaderProps<
     onPressLeft?: () => void;
     onPressRight?: () => void;
   },
-  { clearTitleMargin?: boolean }
+  {
+    clearTitleMargin?: boolean;
+    statusBarTopInsetAs?: 'padding' | 'margin';
+  }
 >;
 
 const AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;
@@ -36,8 +39,10 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
   onPressLeft,
   onPressRight,
   clearTitleMargin = false,
+  statusBarTopInsetAs = 'padding',
 }) => {
   const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
+
   const { colors } = useUIKitTheme();
   const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
 
@@ -54,9 +59,9 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
       style={[
         styles.container,
         {
+          [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: topInset,
           paddingLeft: paddingLeft + styles.container.paddingHorizontal,
           paddingRight: paddingRight + styles.container.paddingHorizontal,
-          paddingTop: topInset,
           backgroundColor: colors.ui.header.nav.none.background,
           borderBottomColor: colors.ui.header.nav.none.borderBottom,
         },

package/src/ui/MenuBar/index.tsx

@@ -14,6 +14,7 @@ export type MenuBarProps = {
 
   onPress: () => void;
   disabled?: boolean;
+  visible?: boolean;
 
   icon: keyof typeof Icon.Assets;
   iconColor?: string;
@@ -26,6 +27,7 @@ export type MenuBarProps = {
 const MenuBar = ({
   variant = 'default',
   disabled,
+  visible = true,
   onPress,
   name,
   icon,
@@ -36,6 +38,8 @@ const MenuBar = ({
 }: MenuBarProps) => {
   const { palette, colors } = useUIKitTheme();
 
+  if (!visible) return null;
+
   return (
     <View>
       <Pressable disabled={disabled} onPress={onPress} style={styles.container}>

package/src/ui/OutlinedButton/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Pressable, StyleProp, ViewStyle } from 'react-native';
+
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type OutlinedButtonProps = {
+  children: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+};
+
+const OutlinedButton = ({ children, onPress, containerStyle }: OutlinedButtonProps) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.outlinedButton, { borderColor: colors.onBackground01 }, containerStyle]}
+    >
+      <Text button color={colors.onBackground01} numberOfLines={1} style={styles.outlinedButtonText}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  outlinedButton: {
+    borderRadius: 4,
+    padding: 16,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  outlinedButtonText: {
+    textAlign: 'center',
+    width: '100%',
+  },
+});
+
+export default OutlinedButton;