@sendbird/uikit-react-native-foundation 1.0.0-rc.1

package/src/ui/ActionMenu/index.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Logger } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import DialogBox from '../Dialog/DialogBox';
+import LoadingSpinner from '../LoadingSpinner';
+import Modal from '../Modal';
+import Text from '../Text';
+
+export type ActionMenuItem = {
+  title?: string;
+  menuItems: {
+    title: string;
+    onPress?: (() => Promise<void>) | (() => void);
+    onError?: () => void;
+  }[];
+};
+
+type Props = {
+  visible: boolean;
+  onHide: () => void;
+  onError?: (error: unknown) => void;
+  onDismiss?: () => void;
+} & ActionMenuItem;
+const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, title, menuItems }) => {
+  const { statusBarTranslucent } = useHeaderStyle();
+  const { colors } = useUIKitTheme();
+  const [pending, setPending] = useState(false);
+  const _onHide = () => {
+    if (!pending) onHide();
+  };
+
+  return (
+    <Modal
+      onClose={_onHide}
+      onDismiss={onDismiss}
+      statusBarTranslucent={statusBarTranslucent}
+      visible={visible}
+      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}
+    >
+      <DialogBox>
+        <View style={styles.title}>
+          <Text
+            h1
+            color={colors.ui.dialog.default.none.text}
+            numberOfLines={1}
+            // style={{ flex: 1 }}
+            style={{ maxWidth: pending ? '86%' : '100%' }}
+          >
+            {title}
+          </Text>
+          {pending && (
+            <LoadingSpinner
+              size={20}
+              color={colors.ui.dialog.default.none.highlight}
+              style={{ width: '10%', marginLeft: '4%' }}
+            />
+          )}
+        </View>
+        <View style={styles.buttonContainer}>
+          {menuItems.map((item, index) => {
+            return (
+              <TouchableOpacity
+                activeOpacity={0.75}
+                key={item.title + index}
+                style={styles.button}
+                disabled={pending}
+                onPress={async () => {
+                  setPending(true);
+                  try {
+                    await item.onPress?.();
+                  } catch (e: unknown) {
+                    const errorHandler = onError ?? item.onError;
+                    errorHandler?.(e);
+                    if (!errorHandler) Logger.error('ActionMenu onPress error', e);
+                  } finally {
+                    onHide();
+                    setPending(false);
+                  }
+                }}
+              >
+                <Text subtitle2 color={colors.ui.dialog.default.none.text} numberOfLines={1}>
+                  {item.title}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </DialogBox>
+    </Modal>
+  );
+};
+
+const styles = createStyleSheet({
+  title: {
+    flexDirection: 'row',
+    paddingHorizontal: 24,
+    paddingVertical: 20,
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+});
+
+export default ActionMenu;

package/src/ui/Alert/index.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { AlertButton, View } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Button from '../Button';
+import DialogBox from '../Dialog/DialogBox';
+import Modal from '../Modal';
+import Text from '../Text';
+
+export type AlertItem = {
+  title?: string;
+  message?: string;
+  buttons?: AlertButton[];
+};
+
+type Props = {
+  visible: boolean;
+  onHide: () => void;
+  onDismiss?: () => void;
+} & AlertItem;
+const Alert: React.FC<Props> = ({
+  onDismiss,
+  visible,
+  onHide,
+  title = '',
+  message = '',
+  buttons = [{ text: 'OK' }],
+}) => {
+  const { statusBarTranslucent } = useHeaderStyle();
+  const { colors } = useUIKitTheme();
+
+  return (
+    <Modal
+      onClose={onHide}
+      onDismiss={onDismiss}
+      statusBarTranslucent={statusBarTranslucent}
+      visible={visible}
+      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}
+    >
+      <DialogBox style={styles.container}>
+        {Boolean(title) && (
+          <View style={styles.titleContainer}>
+            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>
+              {title}
+            </Text>
+          </View>
+        )}
+
+        <View style={styles.messageContainer}>
+          {Boolean(message) && (
+            <Text
+              subtitle2={!title}
+              body3={Boolean(title)}
+              color={!title ? colors.ui.dialog.default.none.text : colors.ui.dialog.default.none.message}
+              numberOfLines={3}
+            >
+              {message}
+            </Text>
+          )}
+        </View>
+
+        <View style={styles.buttonContainer}>
+          {buttons.map(({ text = 'OK', style = 'default', onPress }, index) => {
+            return (
+              <Button
+                key={text + index}
+                variant={'text'}
+                style={styles.button}
+                onPress={async () => {
+                  try {
+                    onPress?.();
+                  } finally {
+                    onHide();
+                  }
+                }}
+                contentColor={
+                  style === 'destructive'
+                    ? colors.ui.dialog.default.none.destructive
+                    : colors.ui.dialog.default.none.highlight
+                }
+              >
+                {text}
+              </Button>
+            );
+          })}
+        </View>
+      </DialogBox>
+    </Modal>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingTop: 20,
+  },
+  titleContainer: {
+    paddingBottom: 16,
+    paddingHorizontal: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  messageContainer: {
+    paddingHorizontal: 24,
+    marginBottom: 12,
+  },
+  button: {
+    marginLeft: 8,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: 12,
+  },
+});
+
+export default Alert;

package/src/ui/Avatar/AvatarGroup.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+const MAX = 4;
+
+type Props = { size?: number; containerStyle?: StyleProp<ViewStyle> };
+const AvatarGroup: React.FC<Props> = ({ children, containerStyle, size = 56 }) => {
+  const childAmount = React.Children.count(children);
+
+  if (childAmount === 0) {
+    return (
+      <View
+        style={[
+          containerStyle,
+          {
+            overflow: 'hidden',
+            width: size,
+            height: size,
+            borderRadius: size,
+            backgroundColor: 'rgba(120,120,120,0.2)',
+          },
+        ]}
+      />
+    );
+  }
+
+  const avatars = useMemo(() => {
+    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 });
+
+        const top = getTopPoint(index, childAmount) * size;
+        const left = getLeftPoint(index) * size;
+        const width = getWidthPoint(index, childAmount) * size;
+        const height = getHeightPoint(index, childAmount) * size;
+        const innerLeft = -getInnerLeft(index, childAmount) * size;
+        const innerTop = -getInnerTop(childAmount) * size;
+
+        return (
+          <View style={{ overflow: 'hidden', position: 'absolute', top, left, width, height }}>
+            {React.cloneElement(child, { 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}
+    </View>
+  );
+};
+
+const getHeightPoint = (_: number, total: number) => {
+  if (total === 2) return 1;
+  return 0.5;
+};
+const getWidthPoint = (idx: number, total: number) => {
+  if (total === 3 && idx === 0) return 1;
+  return 0.5;
+};
+const getTopPoint = (idx: number, total: number) => {
+  if (total === 2) return -0.025;
+  if (total === 3 && idx === 0) return -0.025;
+  if (total === 3 && idx !== 0) return 0.525;
+  if (idx === 0 || idx === 1) return -0.025;
+  return 0.525;
+};
+const getLeftPoint = (idx: number) => {
+  if (idx === 0 || idx === 2) return -0.025;
+  return 0.525;
+};
+const getInnerLeft = (idx: number, total: number) => {
+  if (total === 3 && idx === 0) return 0;
+  return 0.25;
+};
+const getInnerTop = (total: number) => {
+  if (total === 2) return 0;
+  return 0.25;
+};
+
+export default AvatarGroup;

package/src/ui/Avatar/AvatarIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+
+type Props = {
+  icon: keyof typeof Icon.Assets;
+  size?: number;
+  backgroundColor?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+const AvatarIcon: React.FC<Props> = ({ size = 56, icon, containerStyle, backgroundColor }) => {
+  const { colors, palette } = useUIKitTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: backgroundColor ?? palette.background300,
+        },
+        containerStyle,
+      ]}
+    >
+      <Icon icon={icon} size={size / 2} color={colors.onBackgroundReverse01} />
+    </View>
+  );
+};
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+export default AvatarIcon;

package/src/ui/Avatar/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import Image from '../../components/Image';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import AvatarGroup from './AvatarGroup';
+import AvatarIcon from './AvatarIcon';
+
+type SubComponents = { Group: typeof AvatarGroup; Icon: typeof AvatarIcon };
+type Props = {
+  uri?: string;
+  size?: number;
+  square?: boolean;
+  muted?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+const Avatar: React.FC<Props> & SubComponents = ({ uri, square, muted = false, size = 56, containerStyle }) => {
+  const { colors, palette } = useUIKitTheme();
+  const [loadFailure, setLoadFailure] = useState(false);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { width: size, height: size, borderRadius: square ? 0 : size / 2, backgroundColor: palette.background300 },
+        containerStyle,
+      ]}
+    >
+      {conditionChaining(
+        [Boolean(uri) && !loadFailure],
+        [
+          <Image
+            onError={() => setLoadFailure(true)}
+            source={{ uri }}
+            resizeMode={'cover'}
+            style={StyleSheet.absoluteFill}
+          />,
+          <Icon icon={'user'} size={size / 2} color={colors.onBackgroundReverse01} />,
+        ],
+      )}
+      {muted && <MutedOverlay size={size} />}
+    </View>
+  );
+};
+
+const MutedOverlay: React.FC<{ size: number }> = ({ size }) => {
+  const { palette } = useUIKitTheme();
+  return (
+    <View style={[styles.container, StyleSheet.absoluteFill]}>
+      <View style={[StyleSheet.absoluteFill, { backgroundColor: palette.primary300, opacity: 0.5 }]} />
+      <Icon color={palette.onBackgroundDark01} icon={'mute'} size={size * 0.72} />
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+});
+
+Avatar.Group = AvatarGroup;
+Avatar.Icon = AvatarIcon;
+export default Avatar;

package/src/ui/Badge/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Platform, StyleProp, View, ViewStyle } from 'react-native';
+
+import { truncatedBadgeCount } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Text from '../Text';
+
+type Props = {
+  count: number;
+  maxCount?: number;
+  badgeColor?: string;
+  textColor?: string;
+  style?: StyleProp<ViewStyle>;
+  size?: 'small' | 'default';
+};
+
+const Badge: React.FC<Props> = ({ count, maxCount, badgeColor, textColor, style, size = 'default' }) => {
+  const { colors } = useUIKitTheme();
+  const isSmall = size === 'small';
+  return (
+    <View
+      style={[
+        isSmall ? styles.badgeSmall : styles.badgeDefault,
+        { backgroundColor: badgeColor ?? colors.ui.badge.default.none.background },
+        count >= 10 && (isSmall ? styles.badgeSmallPadding : styles.badgeDefaultPadding),
+        style,
+      ]}
+    >
+      <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>
+        {truncatedBadgeCount(count, maxCount)}
+      </Text>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  badgeDefault: {
+    paddingTop: Platform.select({ ios: 2, android: 2 }),
+    minWidth: 20,
+    minHeight: 20,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeDefaultPadding: {
+    paddingHorizontal: 8,
+  },
+  badgeSmall: {
+    paddingTop: Platform.select({ ios: 3, android: 2 }),
+    minWidth: 16,
+    minHeight: 16,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeSmallPadding: {
+    paddingHorizontal: 4,
+  },
+});
+
+export default Badge;

package/src/ui/BottomSheet/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TouchableOpacity, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import DialogSheet from '../Dialog/DialogSheet';
+import type Icon from '../Icon';
+import Modal from '../Modal';
+
+export type BottomSheetItem = {
+  sheetItems: {
+    icon?: keyof typeof Icon.Assets;
+    iconColor?: string;
+    title: string;
+    titleColor?: string;
+    onPress: () => void;
+  }[];
+};
+type Props = {
+  visible: boolean;
+  onHide: () => Promise<void>;
+  onError?: (error: unknown) => void;
+  onDismiss?: () => void;
+} & BottomSheetItem;
+const BottomSheet: React.FC<Props> = ({ onDismiss, onHide, visible, sheetItems }) => {
+  const { statusBarTranslucent } = useHeaderStyle();
+  const { width } = useWindowDimensions();
+  const { bottom, left, right } = useSafeAreaInsets();
+  return (
+    <Modal
+      type={'slide'}
+      onClose={onHide}
+      onDismiss={onDismiss}
+      statusBarTranslucent={statusBarTranslucent}
+      visible={visible}
+      backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
+    >
+      <DialogSheet style={{ width, paddingBottom: bottom }}>
+        {sheetItems.map(({ onPress, ...props }, idx) => (
+          <TouchableOpacity
+            activeOpacity={0.75}
+            key={props.title + idx}
+            style={{ paddingLeft: left, paddingRight: right }}
+            onPress={async () => {
+              await onHide();
+              try {
+                onPress();
+              } catch {}
+            }}
+          >
+            <DialogSheet.Item {...props} />
+          </TouchableOpacity>
+        ))}
+      </DialogSheet>
+    </Modal>
+  );
+};
+
+export default BottomSheet;

package/src/ui/Button/index.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Pressable, StyleProp, ViewStyle } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import Text from '../Text';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  icon?: keyof typeof Icon.Assets;
+  variant?: 'contained' | 'text';
+  disabled?: boolean;
+  onPress?: () => void;
+  buttonColor?: string;
+  contentColor?: string;
+};
+const Button: React.FC<Props> = ({
+  icon,
+  variant = 'contained',
+  buttonColor,
+  contentColor,
+  disabled,
+  onPress,
+  style,
+  children,
+}) => {
+  const { colors } = useUIKitTheme();
+
+  const getStateColor = (pressed: boolean, disabled?: boolean) => {
+    const stateColors = colors.ui.button[variant];
+    if (disabled) return stateColors.disabled;
+    if (pressed) return stateColors.pressed;
+    return stateColors.enabled;
+  };
+
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => {
+        const stateColor = getStateColor(pressed, disabled);
+        return [{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style];
+      }}
+    >
+      {({ pressed }) => {
+        const stateColor = getStateColor(pressed, disabled);
+
+        return (
+          <>
+            {icon && (
+              <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />
+            )}
+            <Text button color={contentColor ?? stateColor.content} style={styles.text}>
+              {children}
+            </Text>
+          </>
+        );
+      }}
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'row',
+    padding: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: { marginVertical: -4, marginRight: 8 },
+  text: {},
+});
+
+export default Button;

package/src/ui/ChannelFrozenBanner/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Text from '../Text';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  text?: string;
+  textColor?: string;
+  backgroundColor?: string;
+};
+
+const ChannelFrozenBanner: React.FC<Props> = ({ text = 'Channel is frozen', backgroundColor, textColor, style }) => {
+  const { palette } = useUIKitTheme();
+
+  return (
+    <View
+      pointerEvents={'none'}
+      style={[styles.container, { backgroundColor: backgroundColor ?? palette.information }, style]}
+    >
+      <Text caption2 color={textColor ?? palette.onBackgroundLight01}>
+        {text}
+      </Text>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    borderRadius: 4,
+  },
+});
+
+export default ChannelFrozenBanner;

package/src/ui/Dialog/DialogBox.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+};
+const DialogBox: React.FC<Props> = ({ style, children }) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>
+      {children}
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: 280,
+    borderRadius: 4,
+  },
+});
+
+export default DialogBox;