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

package/src/ui/Switch/index.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Platform, Pressable } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+interface SwitchProps {
+  trackColor?: string;
+  thumbColor?: string;
+  inactiveThumbColor?: string;
+  inactiveTrackColor?: string;
+
+  value: boolean;
+  onChangeValue: (val: boolean) => void;
+}
+const Switch: React.FC<SwitchProps> = ({
+  value,
+  onChangeValue,
+  inactiveThumbColor,
+  inactiveTrackColor,
+  trackColor,
+  thumbColor,
+}) => {
+  const { select, palette, colors } = useUIKitTheme();
+  const position = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.timing(position, {
+      toValue: value ? styles.thumbOn.left : styles.thumbOff.left,
+      duration: 150,
+      useNativeDriver: false,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [value]);
+
+  const createInterpolate = <T extends string>(offValue: T, onValue: T) => {
+    return position.interpolate({
+      inputRange: [styles.thumbOff.left, styles.thumbOn.left],
+      outputRange: [offValue, onValue],
+      extrapolate: 'clamp',
+    });
+  };
+  const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);
+  const _thumbColor = createInterpolate(
+    inactiveThumbColor ?? palette.background300,
+    thumbColor ?? select({ light: palette.primary400, dark: palette.primary300 }),
+  );
+
+  return (
+    <Pressable onPress={() => onChangeValue(!value)} style={[styles.container]}>
+      <Animated.View style={[styles.track, { backgroundColor: _trackColor }]} />
+      <Animated.View style={[styles.thumb, { backgroundColor: _thumbColor, transform: [{ translateX: position }] }]} />
+    </Pressable>
+  );
+};
+
+const OFFSET = { W: 20, H: 16 };
+const styles = createStyleSheet({
+  container: {
+    width: OFFSET.W + OFFSET.H,
+    height: OFFSET.H,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  track: {
+    width: '100%',
+    height: '100%',
+    borderRadius: OFFSET.H / 2,
+    position: 'absolute',
+  },
+  thumb: {
+    width: OFFSET.W,
+    height: OFFSET.W,
+    borderRadius: OFFSET.W / 2,
+    ...Platform.select({
+      android: {
+        elevation: 2,
+      },
+      ios: {
+        shadowColor: 'black',
+        shadowRadius: 1,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.4,
+      },
+    }),
+  },
+  thumbOn: {
+    left: OFFSET.H / 2,
+  },
+  thumbOff: {
+    left: -OFFSET.H / 2,
+  },
+});
+
+export default Switch;

package/src/ui/Text/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Text as RNText, TextProps as RNTextProps } from 'react-native';
+
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { TypoName, UIKitTheme } from '../../types';
+
+type TypographyProps = Partial<Record<TypoName, boolean>>;
+export type TextProps = RNTextProps & TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string };
+const Text: React.FC<TextProps> = ({ children, color, style, ...props }) => {
+  const { colors } = useUIKitTheme();
+  const typoStyle = useTypographyFilter(props);
+  return (
+    <RNText
+      style={[{ color: typeof color === 'string' ? color : color?.(colors) ?? colors.text }, typoStyle, style]}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+const useTypographyFilter = ({
+  h1,
+  h2,
+  subtitle1,
+  subtitle2,
+  body1,
+  body2,
+  body3,
+  button,
+  caption1,
+  caption2,
+  caption3,
+  caption4,
+}: TypographyProps) => {
+  const { typography } = useUIKitTheme();
+  if (h1) return typography.h1;
+  if (h2) return typography.h2;
+  if (subtitle1) return typography.subtitle1;
+  if (subtitle2) return typography.subtitle2;
+  if (body1) return typography.body1;
+  if (body2) return typography.body2;
+  if (body3) return typography.body3;
+  if (button) return typography.button;
+  if (caption1) return typography.caption1;
+  if (caption2) return typography.caption2;
+  if (caption3) return typography.caption3;
+  if (caption4) return typography.caption4;
+  return {};
+};
+
+export default Text;

package/src/ui/TextInput/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TextInput as RNTextInput, TextInputProps } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { UIKitTheme } from '../../types';
+
+type Props = { variant?: keyof UIKitTheme['colors']['ui']['input'] } & TextInputProps;
+const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
+  { children, style, variant = 'default', editable = true, ...props },
+  ref,
+) {
+  const { typography, colors } = useUIKitTheme();
+
+  const variantStyle = colors['ui']['input'][variant];
+  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;
+  const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };
+
+  return (
+    <RNTextInput
+      ref={ref}
+      editable={editable}
+      selectionColor={inputStyle.highlight}
+      placeholderTextColor={inputStyle.placeholder}
+      style={[
+        typography.body3,
+        styles.input,
+        { color: inputStyle.text, backgroundColor: inputStyle.background },
+        underlineStyle,
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </RNTextInput>
+  );
+});
+
+const styles = createStyleSheet({
+  input: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+});
+
+export default TextInput;

package/src/ui/Toast/index.tsx

@@ -0,0 +1,122 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import Text from '../Text';
+
+type ToastType = 'normal' | 'error' | 'success';
+type Context = { show(text: string, type?: ToastType): void };
+
+const ToastContext = createContext<Context | null>(null);
+
+type Props = {
+  top?: number;
+  bottom?: number;
+  visible: boolean;
+  type: ToastType;
+  children: string;
+};
+
+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(),
+    [],
+  );
+  return {
+    opacity,
+    show: () => transition(1),
+    hide: () => transition(0),
+  };
+};
+const Toast: React.FC<Props> = ({ visible, type, children, top, bottom }) => {
+  const { colors, select, palette } = useUIKitTheme();
+  const { opacity, show, hide } = useOpacity();
+
+  const color = useMemo(() => {
+    if (type === 'error') {
+      return select({ dark: palette.error300, light: palette.error200 });
+    }
+    if (type === 'success') {
+      return select({ dark: palette.secondary300, light: palette.secondary200 });
+    }
+    return 'transparent';
+  }, [type, select]);
+
+  const backgroundColor = useMemo(() => {
+    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });
+  }, [select]);
+
+  useEffect(() => {
+    visible ? show() : hide();
+  }, [visible]);
+
+  return (
+    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>
+      {type !== 'normal' && (
+        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />
+      )}
+      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>
+        {children}
+      </Text>
+    </Animated.View>
+  );
+};
+
+const VISIBLE_MS = 3000;
+export const ToastProvider: React.FC<{ dismissTimeout?: number }> = ({ children, dismissTimeout = VISIBLE_MS }) => {
+  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });
+  const { bottom } = useSafeAreaInsets();
+
+  useEffect(() => {
+    if (!state.visible) return;
+
+    const hideTimeout = setTimeout(() => {
+      setState((prev) => ({ ...prev, visible: false }));
+    }, dismissTimeout);
+    return () => clearTimeout(hideTimeout);
+  });
+
+  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>
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');
+  return context;
+};
+
+const styles = createStyleSheet({
+  toast: {
+    position: 'absolute',
+    height: 48,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    borderRadius: 24,
+    flexDirection: 'row',
+  },
+  icon: {
+    marginRight: 4,
+  },
+  text: {
+    maxWidth: 240,
+    paddingHorizontal: 4,
+  },
+  toastPosition: {
+    bottom: 60,
+  },
+});
+
+export default Toast;

package/src/ui/URLParsedText/index.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import { Linking } from 'react-native';
+
+import { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import type { TextProps } from '../Text';
+import Text from '../Text';
+
+type OnPressUrl = (url: string, httpProtocol: boolean) => void;
+
+const openUrl: OnPressUrl = (url, httpProtocol) => {
+  const targetUrl = httpProtocol ? url : 'https://' + url;
+  Linking.openURL(targetUrl).catch((err) => Logger.warn('[URLParsedText]', 'Cannot open url', err));
+};
+
+type Props = TextProps & {
+  onPressUrl?: OnPressUrl;
+  strict?: boolean;
+};
+const URLParsedText: React.FC<Props> = ({ children, onPressUrl = openUrl, strict, ...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,
+        );
+      }
+
+      return child;
+    });
+  }, [children]);
+
+  return <Text {...props}>{parsedChildren}</Text>;
+};
+const styles = createStyleSheet({
+  url: { textDecorationLine: 'underline' },
+});
+export default URLParsedText;