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

package/src/assets/icon/index.ts

@@ -0,0 +1,62 @@
+const IconAssets = {
+  'chat-hide': require('./ic-chat-hide.png'),
+  'chat-show': require('./ic-chat-show.png'),
+  'add': require('./icon-add.png'),
+  'archive': require('./icon-archive.png'),
+  'arrow-left': require('./icon-arrow-left.png'),
+  'ban': require('./icon-ban.png'),
+  'broadcast': require('./icon-broadcast.png'),
+  'camera': require('./icon-camera.png'),
+  'channels': require('./icon-channels.png'),
+  'chat-filled': require('./icon-chat-filled.png'),
+  'chat': require('./icon-chat.png'),
+  'checkbox-off': require('./icon-checkbox-off.png'),
+  'checkbox-on': require('./icon-checkbox-on.png'),
+  'chevron-down': require('./icon-chevron-down.png'),
+  'chevron-right': require('./icon-chevron-right.png'),
+  'close': require('./icon-close.png'),
+  'copy': require('./icon-copy.png'),
+  'create': require('./icon-create.png'),
+  'delete': require('./icon-delete.png'),
+  'document': require('./icon-document.png'),
+  'done-all': require('./icon-done-all.png'),
+  'done': require('./icon-done.png'),
+  'download': require('./icon-download.png'),
+  'edit': require('./icon-edit.png'),
+  'emoji-more': require('./icon-emoji-more.png'),
+  'error': require('./icon-error.png'),
+  'file-audio': require('./icon-file-audio.png'),
+  'file-document': require('./icon-file-document.png'),
+  'freeze': require('./icon-freeze.png'),
+  'gif': require('./icon-gif.png'),
+  'info': require('./icon-info.png'),
+  'leave': require('./icon-leave.png'),
+  'members': require('./icon-members.png'),
+  'message': require('./icon-message.png'),
+  'moderations': require('./icon-moderations.png'),
+  'more': require('./icon-more.png'),
+  'mute': require('./icon-mute.png'),
+  'notifications-filled': require('./icon-notifications-filled.png'),
+  'notifications-off-filled': require('./icon-notifications-off-filled.png'),
+  'notifications': require('./icon-notifications.png'),
+  'operator': require('./icon-operator.png'),
+  'photo': require('./icon-photo.png'),
+  'play': require('./icon-play.png'),
+  'plus': require('./icon-plus.png'),
+  'question': require('./icon-question.png'),
+  'refresh': require('./icon-refresh.png'),
+  'remove': require('./icon-remove.png'),
+  'reply-filled': require('./icon-reply-filled.png'),
+  'reply': require('./icon-reply.png'),
+  'search': require('./icon-search.png'),
+  'send': require('./icon-send.png'),
+  'settings-filled': require('./icon-settings-filled.png'),
+  'spinner': require('./icon-spinner.png'),
+  'streaming': require('./icon-streaming.png'),
+  'supergroup': require('./icon-supergroup.png'),
+  'theme': require('./icon-theme.png'),
+  'thumbnail-none': require('./icon-thumbnail-none.png'),
+  'unarchive': require('./icon-unarchive.png'),
+  'user': require('./icon-user.png'),
+};
+export default IconAssets;

package/src/components/Image/Image.fastimage.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import _FastImage, { FastImageProps, ResizeMode, Source } from 'react-native-fast-image';
+
+import type { SendbirdImageComponent, SendbirdImageProps } from './index';
+
+function convertCache(
+  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached' | undefined,
+): 'immutable' | 'web' | 'cacheOnly' {
+  switch (cache) {
+    case 'force-cache':
+    case 'only-if-cached':
+      return 'cacheOnly';
+    default:
+      return 'immutable';
+  }
+}
+
+function convertSource(source: SendbirdImageProps['source']): Source | number {
+  if (Array.isArray(source)) {
+    return convertSource(source[0]);
+  }
+
+  if (typeof source === 'number') {
+    return source;
+  }
+
+  return {
+    uri: source.uri,
+    headers: source.headers,
+    cache: convertCache(source.cache), //'immutable' | 'web' | 'cacheOnly'
+  };
+}
+
+function convertResizeMode(mode?: SendbirdImageProps['resizeMode']): ResizeMode | undefined {
+  switch (mode) {
+    case 'center':
+      return 'center';
+    case 'contain':
+      return 'contain';
+    case 'cover':
+      return 'cover';
+    case 'stretch':
+      return 'stretch';
+    default:
+      return undefined;
+  }
+}
+
+const FastImage = _FastImage as (props: FastImageProps) => JSX.Element;
+
+const Image_FastImage: SendbirdImageComponent = ({ source, resizeMode, onLoad, onError, style, ...props }) => {
+  return (
+    <FastImage
+      {...props}
+      onLoad={onLoad && ((e) => onLoad(e.nativeEvent))}
+      onError={onError && (() => onError({}))}
+      style={style as FastImageProps['style']}
+      source={convertSource(source)}
+      resizeMode={convertResizeMode(resizeMode)}
+    />
+  );
+};
+
+export default Image_FastImage;

package/src/components/Image/Image.reactnative.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import type { SendbirdImageComponent } from './index';
+
+const Image_ReactNative: SendbirdImageComponent = ({ onLoad, onError, style, tintColor, ...props }) => {
+  return (
+    <Image
+      {...props}
+      style={[style, { tintColor }]}
+      onError={onError && ((e) => onError(e.nativeEvent))}
+      onLoad={onLoad && ((e) => onLoad(e.nativeEvent.source))}
+    />
+  );
+};
+
+export default Image_ReactNative;

package/src/components/Image/index.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import type { ImageProps as NativeImageProps } from 'react-native';
+import { NativeModules } from 'react-native';
+
+export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'onError'> {
+  onLoad?: (event: { width: number; height: number }) => void;
+  onError?: (event: { error?: unknown }) => void;
+  tintColor?: string;
+}
+
+export type SendbirdImageComponent = React.FC<SendbirdImageProps>;
+
+function getImageModule(): SendbirdImageComponent {
+  const hasFastImage = Boolean(NativeModules.FastImageView);
+  if (hasFastImage) {
+    try {
+      require('react-native-fast-image');
+      return require('./Image.fastimage').default;
+    } catch (e) {
+      return require('./Image.reactnative').default;
+    }
+  } else {
+    return require('./Image.reactnative').default;
+  }
+}
+
+export default getImageModule();

package/src/index.ts

@@ -0,0 +1,64 @@
+/** Assets **/
+export { default as IconAssets } from './assets/icon';
+/** Component **/
+export { default as Image } from './components/Image';
+
+/** UI **/
+export { default as ActionMenu, ActionMenuItem } 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 Button } from './ui/Button';
+export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
+export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
+export { default as Divider } from './ui/Divider';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
+export { default as Header } from './ui/Header';
+export { default as Icon } from './ui/Icon';
+export { default as LoadingSpinner } from './ui/LoadingSpinner';
+export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
+export { default as Modal } from './ui/Modal';
+export { default as Placeholder } from './ui/Placeholder';
+export { default as Prompt } from './ui/Prompt';
+export { default as Switch } from './ui/Switch';
+export { default as Text } from './ui/Text';
+export { default as TextInput } from './ui/TextInput';
+export { default as Toast, useToast, ToastProvider } from './ui/Toast';
+export { default as URLParsedText } from './ui/URLParsedText';
+
+/** Styles **/
+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 getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';
+export { HeaderStyleContext, HeaderStyleProvider, HeaderStyleContextType } from './styles/HeaderStyleContext';
+export { default as useHeaderStyle } from './styles/useHeaderStyle';
+
+/** Theme **/
+export { default as createTheme } from './theme/createTheme';
+export { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';
+export { default as LightUIKitTheme } from './theme/LightUIKitTheme';
+export { default as Palette } from './theme/Palette';
+export { default as UIKitThemeContext } from './theme/UIKitThemeContext';
+export { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';
+export { default as useUIKitTheme } from './theme/useUIKitTheme';
+
+/** Types **/
+export type {
+  TypoName,
+  UIKitTheme,
+  UIKitTypography,
+  FontAttributes,
+  BaseHeaderProps,
+  UIKitColorScheme,
+  UIKitColors,
+  ComponentColorTree,
+  UIKitPalette,
+  HeaderElement,
+  HeaderPartProps,
+  ComponentColors,
+  Component,
+  GetColorTree,
+} from './types';

package/src/styles/HeaderStyleContext.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StatusBar } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import type { BaseHeaderProps, HeaderElement } from '../types';
+
+export type HeaderStyleContextType = {
+  HeaderComponent: (
+    props: BaseHeaderProps<
+      {
+        title?: HeaderElement;
+        left?: HeaderElement;
+        right?: HeaderElement;
+        onPressLeft?: () => void;
+        onPressRight?: () => void;
+      },
+      { clearTitleMargin?: boolean }
+    >,
+  ) => React.ReactElement | null;
+  defaultTitleAlign: 'left' | 'center';
+  statusBarTranslucent: boolean;
+  topInset: number;
+};
+export const HeaderStyleContext = React.createContext<HeaderStyleContextType>({
+  HeaderComponent: () => null,
+  defaultTitleAlign: 'left',
+  statusBarTranslucent: true,
+  topInset: StatusBar.currentHeight ?? 0,
+});
+
+type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
+export const HeaderStyleProvider: React.FC<Props> = ({
+  children,
+  HeaderComponent = () => null,
+  defaultTitleAlign,
+  statusBarTranslucent,
+}) => {
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <HeaderStyleContext.Provider
+      value={{
+        HeaderComponent,
+        defaultTitleAlign,
+        statusBarTranslucent,
+        topInset: statusBarTranslucent ? top : 0,
+      }}
+    >
+      {children}
+    </HeaderStyleContext.Provider>
+  );
+};

package/src/styles/createScaleFactor.ts

@@ -0,0 +1,17 @@
+import { Dimensions, PixelRatio } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+const DESIGNED_DEVICE_WIDTH = 360;
+
+const createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {
+  const ratio = Math.min(width, height) / deviceWidth;
+  return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);
+};
+
+createScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {
+  DEFAULT_SCALE_FACTOR = scaleFactor;
+};
+
+export let DEFAULT_SCALE_FACTOR = createScaleFactor();
+export default createScaleFactor;

package/src/styles/createSelectByColorScheme.ts

@@ -0,0 +1,17 @@
+import type { UIKitColorScheme, UIKitTheme } from '../types';
+
+/**
+ * select method factory
+ * Select method returns the most fitting value for the color scheme you are currently running on.
+ * @param colorScheme
+ * @returns Function
+ * */
+const createSelectByColorScheme = (colorScheme: UIKitColorScheme): UIKitTheme['select'] => {
+  return (options) => {
+    const value = options[colorScheme ?? 'default'] ?? options['light'] ?? options['dark'] ?? options['default'];
+    if (!value) throw Error('Not provided any selectable color scheme values');
+    return value;
+  };
+};
+
+export default createSelectByColorScheme;

package/src/styles/createStyleSheet.ts

@@ -0,0 +1,59 @@
+import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';
+
+import { DEFAULT_SCALE_FACTOR } from './createScaleFactor';
+
+type Styles = ViewStyle | TextStyle | ImageStyle;
+type StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };
+
+const SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));
+
+const preProcessor: Partial<StylePreprocessor> = {
+  'fontSize': DEFAULT_SCALE_FACTOR,
+  'lineHeight': DEFAULT_SCALE_FACTOR,
+  'borderRadius': DEFAULT_SCALE_FACTOR,
+  'minWidth': SCALE_FACTOR_WITH_STR,
+  'minHeight': SCALE_FACTOR_WITH_STR,
+  'height': SCALE_FACTOR_WITH_STR,
+  'width': SCALE_FACTOR_WITH_STR,
+  'padding': SCALE_FACTOR_WITH_STR,
+  'paddingTop': SCALE_FACTOR_WITH_STR,
+  'paddingBottom': SCALE_FACTOR_WITH_STR,
+  'paddingLeft': SCALE_FACTOR_WITH_STR,
+  'paddingRight': SCALE_FACTOR_WITH_STR,
+  'margin': SCALE_FACTOR_WITH_STR,
+  'marginTop': SCALE_FACTOR_WITH_STR,
+  'marginBottom': SCALE_FACTOR_WITH_STR,
+  'marginLeft': SCALE_FACTOR_WITH_STR,
+  'marginRight': SCALE_FACTOR_WITH_STR,
+  'left': SCALE_FACTOR_WITH_STR,
+  'right': SCALE_FACTOR_WITH_STR,
+  'top': SCALE_FACTOR_WITH_STR,
+  'bottom': SCALE_FACTOR_WITH_STR,
+};
+
+const preProcessorKeys = Object.keys(preProcessor);
+const preProcessorLen = preProcessorKeys.length;
+
+/**
+ * Create StyleSheet with customized pre-processor
+ * Return a StyleSheet that pre-processed
+ * @param styles
+ * @returns StyleSheet
+ * */
+const createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {
+  Object.values(styles).forEach((style) => {
+    // @ts-ignore
+    const styleKeys = Object.keys(style);
+    const styleLen = styleKeys.length;
+
+    const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;
+    keys.forEach((key) => {
+      // @ts-ignore
+      if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);
+    });
+  });
+
+  return StyleSheet.create<T>(styles);
+};
+
+export default createStyleSheet;

package/src/styles/createTypography.ts

@@ -0,0 +1,103 @@
+import type { FontAttributes, UIKitTypography } from '../types';
+import { DEFAULT_SCALE_FACTOR } from './createScaleFactor';
+
+export type UIKitTypographyOverrides = Partial<UIKitTypography> & {
+  shared?: Partial<FontAttributes>;
+};
+
+const createTypography = (
+  overrides: UIKitTypographyOverrides = {},
+  scaleFactor: (dp: number) => number = DEFAULT_SCALE_FACTOR,
+): UIKitTypography => {
+  return {
+    h1: {
+      fontWeight: '500',
+      fontSize: scaleFactor(18),
+      lineHeight: scaleFactor(20),
+      ...overrides.h1,
+      ...overrides.shared,
+    },
+    h2: {
+      fontWeight: 'bold',
+      fontSize: scaleFactor(16),
+      lineHeight: scaleFactor(20),
+      letterSpacing: scaleFactor(-0.2),
+      ...overrides.h2,
+      ...overrides.shared,
+    },
+    subtitle1: {
+      fontWeight: '500',
+      fontSize: scaleFactor(16),
+      lineHeight: scaleFactor(22),
+      letterSpacing: scaleFactor(-0.2),
+      ...overrides.subtitle1,
+      ...overrides.shared,
+    },
+    subtitle2: {
+      fontWeight: 'normal',
+      fontSize: scaleFactor(16),
+      lineHeight: scaleFactor(22),
+      ...overrides.subtitle2,
+      ...overrides.shared,
+    },
+    body1: {
+      fontWeight: 'normal',
+      fontSize: scaleFactor(16),
+      lineHeight: scaleFactor(20),
+      ...overrides.body1,
+      ...overrides.shared,
+    },
+    body2: {
+      fontWeight: '500',
+      fontSize: scaleFactor(14),
+      lineHeight: scaleFactor(16),
+      ...overrides.body2,
+      ...overrides.shared,
+    },
+    body3: {
+      fontWeight: 'normal',
+      fontSize: scaleFactor(14),
+      lineHeight: scaleFactor(20),
+      ...overrides.body3,
+      ...overrides.shared,
+    },
+    button: {
+      fontWeight: 'bold',
+      fontSize: scaleFactor(14),
+      lineHeight: scaleFactor(16),
+      letterSpacing: scaleFactor(0.4),
+      ...overrides.button,
+      ...overrides.shared,
+    },
+    caption1: {
+      fontWeight: 'bold',
+      fontSize: scaleFactor(12),
+      lineHeight: scaleFactor(12),
+      ...overrides.caption1,
+      ...overrides.shared,
+    },
+    caption2: {
+      fontWeight: 'normal',
+      fontSize: scaleFactor(12),
+      lineHeight: scaleFactor(12),
+      ...overrides.caption2,
+      ...overrides.shared,
+    },
+    caption3: {
+      fontWeight: 'bold',
+      fontSize: scaleFactor(11),
+      lineHeight: scaleFactor(12),
+      ...overrides.caption3,
+      ...overrides.shared,
+    },
+    caption4: {
+      fontWeight: 'normal',
+      fontSize: scaleFactor(11),
+      lineHeight: scaleFactor(12),
+      ...overrides.caption4,
+      ...overrides.shared,
+    },
+  };
+};
+
+export default createTypography;

package/src/styles/getDefaultHeaderHeight.ts

@@ -0,0 +1,9 @@
+const DEFAULT_LANDSCAPE_HEIGHT = 48;
+const DEFAULT_HEIGHT = 56;
+
+const getDefaultHeaderHeight = (isLandscape: boolean) => {
+  if (isLandscape) return DEFAULT_LANDSCAPE_HEIGHT;
+  return DEFAULT_HEIGHT;
+};
+
+export default getDefaultHeaderHeight;

package/src/styles/useHeaderStyle.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+
+import { HeaderStyleContext } from './HeaderStyleContext';
+
+const useHeaderStyle = () => {
+  return useContext(HeaderStyleContext);
+};
+
+export default useHeaderStyle;