@sendbird/uikit-react-native-foundation 2.0.0 → 2.0.2

package/lib/typescript/src/ui/GroupChannelPreview/index.d.ts

@@ -13,6 +13,7 @@ declare type Props = {
     maxBadgeCount?: number;
     frozen?: boolean;
     notificationOff?: boolean;
+    broadcast?: boolean;
 };
-declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, }: Props) => JSX.Element;
+declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, broadcast, }: Props) => JSX.Element;
 export default GroupChannelPreview;

package/lib/typescript/src/ui/OutlinedButton/index.d.ts

@@ -0,0 +1,8 @@
+import { StyleProp, ViewStyle } from 'react-native';
+declare type OutlinedButtonProps = {
+    children: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+};
+declare const OutlinedButton: ({ children, onPress, containerStyle }: OutlinedButtonProps) => JSX.Element;
+export default OutlinedButton;

package/lib/typescript/src/ui/ProfileCard/index.d.ts

@@ -0,0 +1,11 @@
+import { StyleProp, ViewStyle } from 'react-native';
+declare type Props = {
+    uri: string;
+    username: string;
+    button?: JSX.Element;
+    bodyLabel: string;
+    body: string;
+    containerStyle?: StyleProp<ViewStyle>;
+};
+declare const ProfileCard: ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => JSX.Element;
+export default ProfileCard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "2.0.0"
+    "@sendbird/uikit-utils": "2.0.2"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -80,5 +80,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "955f7adf0891976d8553d9c3b4c171225c775bc9"
+  "gitHead": "95323825da753f20b931b4a8b7e187cd8dc6284e"
 }

package/src/index.ts

@@ -24,7 +24,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';
 

package/src/theme/DarkUIKitTheme.ts

@@ -169,6 +169,16 @@ const DarkUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundDark01,
+            textBodyLabel: palette.onBackgroundDark02,
+            textBody: palette.onBackgroundDark01,
+            background: palette.background500,
+          },
+        },
+      },
     },
   }),
 });

package/src/theme/LightUIKitTheme.ts

@@ -169,6 +169,16 @@ const LightUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundLight01,
+            textBodyLabel: palette.onBackgroundLight02,
+            textBody: palette.onBackgroundLight01,
+            background: palette.background50,
+          },
+        },
+      },
     },
   }),
 });

package/src/types.ts

@@ -39,7 +39,9 @@ export type Component =
   | 'Placeholder'
   | 'Message'
   | 'DateSeparator'
-  | 'GroupChannelPreview';
+  | 'GroupChannelPreview'
+  | 'ProfileCard';
+
 export type GetColorTree<
   Tree extends {
     Variant: {
@@ -65,6 +67,7 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'incoming' | 'outgoing';
     DateSeparator: 'default';
     GroupChannelPreview: 'default';
+    ProfileCard: 'default';
   };
   State: {
     Header: 'none';
@@ -76,6 +79,7 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'enabled' | 'pressed';
     DateSeparator: 'none';
     GroupChannelPreview: 'none';
+    ProfileCard: 'none';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -96,6 +100,7 @@ export type ComponentColorTree = GetColorTree<{
       | 'coverBackground'
       | 'bodyIconBackground'
       | 'separator';
+    ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -139,6 +144,7 @@ export interface UIKitColors {
     message: ComponentColors<'Message'>;
     dateSeparator: ComponentColors<'DateSeparator'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
+    profileCard: ComponentColors<'ProfileCard'>;
   };
 }
 

package/src/ui/GroupChannelPreview/index.tsx

@@ -28,6 +28,7 @@ type Props = {
 
   frozen?: boolean;
   notificationOff?: boolean;
+  broadcast?: boolean;
 };
 
 const GroupChannelPreview = ({
@@ -43,6 +44,7 @@ const GroupChannelPreview = ({
   titleCaptionLeft,
   frozen,
   notificationOff,
+  broadcast,
 }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
@@ -65,6 +67,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>
@@ -148,6 +158,9 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row',
   },
+  channelInfoBroadcast: {
+    marginRight: 4,
+  },
   channelInfoTitle: {
     flexShrink: 1,
     marginRight: 4,

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;

package/src/ui/ProfileCard/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import Divider from '../../components/Divider';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+
+type Props = {
+  uri: string;
+  username: string;
+
+  button?: JSX.Element;
+
+  bodyLabel: string;
+  body: string;
+
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const ProfileCard = ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.profileCard.default.none;
+
+  return (
+    <View style={[styles.container, { backgroundColor: color.background }, containerStyle]}>
+      <View style={styles.profileContainer}>
+        <Avatar uri={uri} size={80} containerStyle={styles.profileAvatar} />
+        <Text h1 color={color.textUsername} numberOfLines={1}>
+          {username}
+        </Text>
+      </View>
+      {button && <View style={styles.messageButtonArea}>{button}</View>}
+      <Divider space={16} />
+      <View style={styles.profileInfoContainer}>
+        <Text body2 color={color.textBodyLabel} style={styles.profileInfoBodyLabel}>
+          {bodyLabel}
+        </Text>
+        <Text body3 numberOfLines={1} color={color.textBody}>
+          {body}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingTop: 32,
+    width: '100%',
+  },
+  profileContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 24,
+  },
+  profileAvatar: {
+    marginBottom: 8,
+  },
+  profileInfoContainer: {
+    padding: 16,
+  },
+  profileInfoBodyLabel: {
+    marginBottom: 4,
+  },
+  messageButtonArea: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+});
+
+export default ProfileCard;

package/src/ui/Toast/index.tsx

@@ -1,5 +1,5 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Icon from '../../components/Icon';
@@ -22,10 +22,10 @@ type Props = React.PropsWithChildren<{
 
 const useOpacity = () => {
   const opacity = useRef(new Animated.Value(0)).current;
-  const transition = useCallback(
-    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),
-    [],
-  );
+  const transition = (value: number) => {
+    Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start();
+  };
+
   return {
     opacity,
     show: () => transition(1),
@@ -87,9 +87,15 @@ export const ToastProvider = ({
   return (
     <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>
       {children}
-      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>
-        {state.text}
-      </Toast>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'position' : undefined}
+        keyboardVerticalOffset={-bottom}
+        pointerEvents={'none'}
+      >
+        <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>
+          {state.text}
+        </Toast>
+      </KeyboardAvoidingView>
     </ToastContext.Provider>
   );
 };