@oneplatformdev/react-native-uikit 0.0.0-stage → 1.1.0

package/src/components/BottomModal/types/types.ts

@@ -0,0 +1,23 @@
+import type { ReactNode, RefObject } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TypographyVariant } from '../../../theme';
+
+export interface BottomModalCloseAction {
+    icon: ReactNode;
+    accessibilityLabel: string;
+    accessibilityHint?: string;
+}
+
+export interface BottomModalProps {
+    visible: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    closeRef?: RefObject<(() => void) | null>;
+    title?: string;
+    titleVariant?: TypographyVariant;
+    customHeader?: ReactNode;
+    closeAction?: BottomModalCloseAction;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    isFullScreen?: boolean;
+    shouldAvoidKeyboard?: boolean;
+}

package/src/components/BottomModal/ui/BottomModal.tsx

@@ -0,0 +1,110 @@
+import { useMemo } from 'react';
+import { Animated, Modal, Pressable, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { Typography } from '../../Typography';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { useBottomModal } from '../presenters/useBottomModal';
+import type { BottomModalProps } from '../types/types';
+import { getStyles, useBottomModalAnimatedStyles } from './styles';
+
+export const BottomModal = ({
+    visible,
+    onClose,
+    children,
+    closeRef,
+    title,
+    titleVariant = 'title',
+    customHeader,
+    closeAction,
+    contentContainerStyle,
+    isFullScreen = false,
+    shouldAvoidKeyboard = true,
+}: BottomModalProps) => {
+    const { colors, spacing, radius } = useUITheme();
+    const scaling = useScaling();
+    const {
+        bottomInset,
+        height,
+        topInset,
+        translateY,
+        backdropOpacity,
+        onClosePress,
+        onShow,
+        panHandlers,
+    } = useBottomModal({ onClose, closeRef });
+
+    const {
+        modalContentStyle,
+        animatedBackdropStyle,
+        animatedKeyboardContainerStyle,
+        animatedKeyboardBackgroundStyle,
+    } = useBottomModalAnimatedStyles(
+        height, topInset, bottomInset, translateY, backdropOpacity, isFullScreen, shouldAvoidKeyboard,
+    );
+
+    const styles = useMemo(
+        () => getStyles(colors, spacing, radius, scaling, bottomInset),
+        [bottomInset, colors, radius, scaling, spacing],
+    );
+
+    return (
+        <Modal visible={visible} transparent animationType="none" statusBarTranslucent onRequestClose={onClosePress} onShow={onShow}>
+            <View style={styles.modalContainer}>
+                <Animated.View pointerEvents="none" style={[styles.backdrop, animatedBackdropStyle]} />
+                <Reanimated.View pointerEvents="none" style={[styles.keyboardBackground, animatedKeyboardBackgroundStyle]} />
+                <Pressable
+                    accessible={false}
+                    importantForAccessibility="no"
+                    onPress={onClosePress}
+                    style={StyleSheet.absoluteFill}
+                />
+
+                <Reanimated.View style={animatedKeyboardContainerStyle}>
+                    <Animated.View
+                        accessibilityViewIsModal
+                        onAccessibilityEscape={onClosePress}
+                        style={[styles.modalContent, modalContentStyle]}
+                    >
+                        <View style={[styles.container, isFullScreen && styles.fullScreenContainer]}>
+                            <View {...panHandlers}>
+                                <TouchableWithoutFeedback>
+                                    {customHeader ? (
+                                        <View>{customHeader}</View>
+                                    ) : (
+                                        <View style={styles.header}>
+                                            <View style={styles.closeButton} />
+                                            {title ? (
+                                                <View style={styles.titleContainer} pointerEvents="none">
+                                                    <Typography text={title} variant={titleVariant} style={styles.title} />
+                                                </View>
+                                            ) : null}
+                                            {closeAction ? (
+                                                <Pressable
+                                                    accessibilityRole="button"
+                                                    accessibilityLabel={closeAction.accessibilityLabel}
+                                                    accessibilityHint={closeAction.accessibilityHint ?? title}
+                                                    onPress={onClosePress}
+                                                    style={styles.closeButton}
+                                                >
+                                                    {closeAction.icon}
+                                                </Pressable>
+                                            ) : <View style={styles.closeButton} />}
+                                        </View>
+                                    )}
+                                </TouchableWithoutFeedback>
+                            </View>
+                            <View style={[
+                                styles.contentContainer,
+                                isFullScreen && styles.fullScreenContentContainer,
+                                contentContainerStyle,
+                            ]}>
+                                {children}
+                            </View>
+                        </View>
+                    </Animated.View>
+                </Reanimated.View>
+            </View>
+        </Modal>
+    );
+};

package/src/components/BottomModal/ui/styles.ts

@@ -0,0 +1,115 @@
+import { useMemo } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { useAnimatedStyle } from 'react-native-reanimated';
+import { useAnimatedKeyboard } from 'react-native-keyboard-controller';
+import type { UIColors, UIRadius, UISpacing } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+
+export const getStyles = (
+    colors: UIColors,
+    spacing: UISpacing,
+    radius: UIRadius,
+    scaling: ScalingFunctions,
+    bottomInset: number,
+) => {
+    const styles = StyleSheet.create({
+        modalContainer: {
+            flex: 1,
+            justifyContent: 'flex-end',
+        },
+        backdrop: {
+            ...StyleSheet.absoluteFill,
+            backgroundColor: colors.text,
+        },
+        keyboardBackground: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: colors.background,
+        },
+        modalContent: {
+            backgroundColor: colors.background,
+            borderTopLeftRadius: scaling.scaleHorizontal(radius.lg),
+            borderTopRightRadius: scaling.scaleHorizontal(radius.lg),
+            overflow: 'hidden',
+            flexShrink: 1,
+        },
+        container: {
+            overflow: 'hidden',
+            flexShrink: 1,
+        },
+        fullScreenContainer: {
+            flex: 1,
+            minHeight: 0,
+        },
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+            paddingTop: scaling.scaleVertical(spacing.lg),
+            position: 'relative',
+        },
+        titleContainer: {
+            flex: 1,
+            flexShrink: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: scaling.scaleVertical(spacing.sm),
+        },
+        closeButton: {
+            width: scaling.scaleHorizontal(40),
+            height: scaling.scaleHorizontal(40),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        title: {
+            textAlign: 'center',
+            color: colors.text,
+        },
+        contentContainer: {
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+            paddingBottom: bottomInset + scaling.scaleVertical(spacing.lg),
+            flexShrink: 1,
+        },
+        fullScreenContentContainer: {
+            flex: 1,
+            minHeight: 0,
+        },
+    });
+
+    return styles;
+};
+
+export const useBottomModalAnimatedStyles = (
+    height: number,
+    topInset: number,
+    bottomInset: number,
+    translateY: Animated.Value,
+    backdropOpacity: Animated.Value,
+    isFullScreen: boolean,
+    shouldAvoidKeyboard: boolean,
+) => {
+    const maxHeight = height - topInset;
+    const { height: keyboardHeight } = useAnimatedKeyboard();
+    const animatedBackdropStyle = useMemo(
+        () => ({ opacity: backdropOpacity.interpolate({ inputRange: [0, 1], outputRange: [0, 0.5] }) }),
+        [backdropOpacity],
+    );
+    const animatedKeyboardContainerStyle = useAnimatedStyle(() => {
+        if (!shouldAvoidKeyboard) return { marginBottom: 0, maxHeight };
+        const keyboardOffset = Math.max(keyboardHeight.value - bottomInset, 0);
+        return { marginBottom: keyboardOffset, maxHeight: Math.max(maxHeight - keyboardOffset, 0) };
+    });
+    const animatedKeyboardBackgroundStyle = useAnimatedStyle(() => ({
+        height: shouldAvoidKeyboard ? Math.max(keyboardHeight.value - bottomInset, 0) : 0,
+    }));
+    const modalContentStyle = useMemo<ViewStyle>(
+        () => ({ maxHeight, height: isFullScreen ? maxHeight : undefined, transform: [{ translateY }] }),
+        [isFullScreen, maxHeight, translateY],
+    );
+
+    return { animatedBackdropStyle, animatedKeyboardContainerStyle, animatedKeyboardBackgroundStyle, modalContentStyle };
+};

package/src/components/Button/index.ts

@@ -0,0 +1,8 @@
+export { Button } from './ui/Button';
+export type {
+    ButtonLabelProps,
+    ButtonLoadingAppearance,
+    ButtonProps,
+    ButtonSize,
+    ButtonVariant,
+} from './types/types';

package/src/components/Button/presenters/useButton.ts

@@ -0,0 +1,72 @@
+import { useUITheme } from "../../../theme";
+import type { ButtonProps } from "../types/types";
+
+type UseButtonProps = Pick<
+  ButtonProps,
+  | "accessibilityLabel"
+  | "accessibilityRole"
+  | "accessibilityState"
+  | "children"
+  | "text"
+  | "disabled"
+  | "labelProps"
+  | "loading"
+  | "loadingAppearance"
+  | "loadingIndicatorColor"
+  | "size"
+  | "variant"
+>;
+
+export const useButton = ({
+  accessibilityLabel,
+  accessibilityRole,
+  accessibilityState,
+  children,
+  text,
+  disabled,
+  labelProps,
+  loading,
+  loadingAppearance,
+  loadingIndicatorColor,
+  size,
+  variant,
+}: UseButtonProps) => {
+  const { button, colors } = useUITheme();
+  const variantTheme = button.variants[variant ?? "primary"];
+  const sizeTheme = button.sizes[size ?? "md"];
+  const interactionDisabled = Boolean(disabled || loading);
+  const visuallyDisabled = Boolean(
+    disabled || (loading && loadingAppearance === "disabled")
+  );
+  const textColor = visuallyDisabled
+    ? variantTheme.disabledForeground
+    : variantTheme.foreground;
+  const content = text ?? children;
+  const isTextChild =
+    typeof content === "string" || typeof content === "number";
+
+  return {
+    content,
+    colors,
+    interactionDisabled,
+    isTextChild,
+    labelColor: labelProps?.color ?? textColor,
+    labelNumberOfLines: labelProps?.numberOfLines ?? button.numberOfLines,
+    labelVariant: labelProps?.variant ?? sizeTheme.labelVariant,
+    labelWeight: labelProps?.weight ?? sizeTheme.labelWeight,
+    sizeTheme,
+    variantTheme,
+    visuallyDisabled,
+    loaderColor: loading
+      ? loadingIndicatorColor ?? colors[textColor]
+      : undefined,
+    resolvedAccessibilityLabel:
+      accessibilityLabel ?? (isTextChild ? String(content) : undefined),
+    resolvedAccessibilityRole: accessibilityRole ?? "button",
+    resolvedAccessibilityState: {
+      ...accessibilityState,
+      disabled: interactionDisabled,
+      busy: loading,
+    },
+  };
+};

package/src/components/Button/types/types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { PressableProps } from 'react-native';
+import type { TypographyProps } from '../../Typography';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export type ButtonLoadingAppearance = 'active' | 'disabled';
+
+export type ButtonLabelProps = Omit<
+    TypographyProps,
+    | 'children'
+    | 'text'
+    | 'onPress'
+    | 'onLongPress'
+    | 'onPressIn'
+    | 'onPressOut'
+    | 'accessible'
+    | 'accessibilityLabel'
+    | 'accessibilityHint'
+    | 'accessibilityRole'
+    | 'accessibilityState'
+>;
+
+export type ButtonProps = Omit<PressableProps, 'children'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    loadingAppearance?: ButtonLoadingAppearance;
+    loadingIndicatorColor?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    fullWidth?: boolean;
+    labelProps?: ButtonLabelProps;
+} & (
+    | { text: string | number; children?: never }
+    | { text?: never; children?: ReactNode }
+);

package/src/components/Button/ui/Button.tsx

@@ -0,0 +1,121 @@
+import { forwardRef, memo, useCallback, useMemo } from "react";
+import { ActivityIndicator, Pressable, View } from "react-native";
+import type { PressableInstance, PressableStateCallbackType } from "react-native";
+import { Typography } from "../../Typography";
+import { useButton } from "../presenters/useButton";
+import type { ButtonProps } from "../types/types";
+import { useScaling } from '../../../utils';
+import { getStyles, resolveButtonStyle } from './styles';
+
+const ButtonComponent = forwardRef<PressableInstance, ButtonProps>(
+  (
+    {
+      accessibilityLabel,
+      accessibilityRole,
+      accessibilityState,
+      children,
+      text,
+      disabled = false,
+      fullWidth = false,
+      labelProps,
+      leftIcon,
+      loading = false,
+      loadingAppearance = "active",
+      loadingIndicatorColor,
+      rightIcon,
+      size = "md",
+      style,
+      variant = "primary",
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      content,
+      colors,
+      interactionDisabled,
+      isTextChild,
+      labelColor,
+      labelNumberOfLines,
+      labelVariant,
+      labelWeight,
+      loaderColor,
+      resolvedAccessibilityLabel,
+      resolvedAccessibilityRole,
+      resolvedAccessibilityState,
+      sizeTheme,
+      variantTheme,
+      visuallyDisabled,
+    } = useButton({
+      accessibilityLabel,
+      accessibilityRole,
+      accessibilityState,
+      children,
+      text,
+      disabled,
+      labelProps,
+      loading,
+      loadingAppearance,
+      loadingIndicatorColor,
+      size,
+      variant,
+    });
+
+    const scaling = useScaling();
+    const styles = useMemo(
+      () => getStyles(colors, scaling, variantTheme, sizeTheme),
+      [colors, scaling, variantTheme, sizeTheme]
+    );
+    const resolveStyle = useCallback(
+      ({ pressed }: PressableStateCallbackType) => resolveButtonStyle(
+        styles, pressed, style, interactionDisabled, visuallyDisabled, fullWidth
+      ),
+      [styles, style, interactionDisabled, visuallyDisabled, fullWidth]
+    );
+
+    return (
+      <Pressable
+        {...props}
+        ref={ref}
+        accessibilityLabel={resolvedAccessibilityLabel}
+        accessibilityRole={resolvedAccessibilityRole}
+        accessibilityState={resolvedAccessibilityState}
+        disabled={interactionDisabled}
+        style={resolveStyle}
+      >
+        <View
+          accessibilityElementsHidden={loading}
+          importantForAccessibility={loading ? "no-hide-descendants" : "auto"}
+          style={[styles.content, loading && styles.hidden]}
+        >
+          {leftIcon ? <View style={styles.icon}>{leftIcon}</View> : null}
+          {isTextChild ? (
+            <Typography
+              {...labelProps}
+              numberOfLines={labelNumberOfLines}
+              color={labelColor}
+              variant={labelVariant}
+              weight={labelWeight}
+              style={[styles.text, labelProps?.style]}
+            >
+              {content}
+            </Typography>
+          ) : (
+            content
+          )}
+          {rightIcon ? <View style={styles.icon}>{rightIcon}</View> : null}
+        </View>
+
+        {loading ? (
+          <View pointerEvents="none" style={styles.loader}>
+            <ActivityIndicator color={loaderColor} size="small" />
+          </View>
+        ) : null}
+      </Pressable>
+    );
+  }
+);
+
+ButtonComponent.displayName = "Button";
+
+export const Button = memo(ButtonComponent);

package/src/components/Button/ui/styles.ts

@@ -0,0 +1,82 @@
+import { StyleSheet } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { UIColors, UIButtonSizeTheme, UIButtonVariantTheme } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+import type { ButtonProps } from '../types/types';
+
+export const getStyles = (
+    colors: UIColors,
+    scaling: ScalingFunctions,
+    variant: UIButtonVariantTheme,
+    size: UIButtonSizeTheme,
+) => {
+    const container: ViewStyle = {
+        minHeight: scaling.scaleVertical(size.minHeight),
+        paddingHorizontal: scaling.scaleHorizontal(size.paddingHorizontal),
+        paddingVertical: scaling.scaleVertical(size.paddingVertical),
+        borderRadius: scaling.scaleHorizontal(size.radius),
+        borderWidth: scaling.scaleHorizontal(variant.borderWidth ?? size.borderWidth),
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors[variant.background],
+        borderColor: colors[variant.border],
+    };
+
+    const text: TextStyle = {
+        flexShrink: 1,
+        minWidth: 0,
+        textAlign: 'center',
+    };
+
+    const styles = StyleSheet.create({
+        container,
+        content: {
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: scaling.scaleHorizontal(size.gap),
+        },
+        disabled: {
+            backgroundColor: colors[variant.disabledBackground],
+            borderColor: colors[variant.disabledBorder],
+        },
+        fullWidth: {
+            width: '100%',
+        },
+        hidden: {
+            opacity: 0,
+        },
+        icon: {
+            flexShrink: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        loader: {
+            ...StyleSheet.absoluteFill,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        pressed: {
+            opacity: 0.82,
+        },
+        text,
+    });
+
+    return styles;
+};
+
+export const resolveButtonStyle = (
+    styles: ReturnType<typeof getStyles>,
+    pressed: boolean,
+    style: ButtonProps['style'],
+    interactionDisabled: boolean,
+    visuallyDisabled: boolean,
+    fullWidth: boolean,
+): StyleProp<ViewStyle> => [
+    styles.container,
+    pressed && !interactionDisabled && styles.pressed,
+    visuallyDisabled && styles.disabled,
+    fullWidth && styles.fullWidth,
+    typeof style === 'function' ? style({ pressed }) : style,
+];

package/src/components/ConnectionContainer/index.ts

@@ -0,0 +1,2 @@
+export { ConnectionContainer } from './ui/ConnectionContainer';
+export type { ConnectionContainerProps } from './types/types';

package/src/components/ConnectionContainer/presenters/useConnectionContainer.ts

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ConnectionContainerProps } from '../types/types';
+
+type ConnectionStatus = 'disconnected' | 'reconnected' | null;
+
+const DISCONNECT_DELAY = 3000;
+const RECONNECT_VISIBLE_TIME = 3000;
+
+export const useConnectionContainer = ({
+    isConnected,
+    disconnectedText,
+    reconnectedText,
+}: Pick<ConnectionContainerProps, 'isConnected' | 'disconnectedText' | 'reconnectedText'>) => {
+    const [status, setStatus] = useState<ConnectionStatus>(null);
+    const initializedRef = useRef(false);
+    const disconnectedBannerShownRef = useRef(false);
+    const disconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const clearDisconnectTimeout = useCallback(() => {
+        if (disconnectTimeoutRef.current !== null) {
+            clearTimeout(disconnectTimeoutRef.current);
+            disconnectTimeoutRef.current = null;
+        }
+    }, []);
+    const clearHideTimeout = useCallback(() => {
+        if (hideTimeoutRef.current !== null) {
+            clearTimeout(hideTimeoutRef.current);
+            hideTimeoutRef.current = null;
+        }
+    }, []);
+    const onHideBanner = useCallback(() => {
+        clearHideTimeout();
+        setStatus(null);
+    }, [clearHideTimeout]);
+
+    useEffect(() => {
+        if (isConnected === null) return;
+        if (!initializedRef.current) {
+            initializedRef.current = true;
+            if (isConnected) return;
+        }
+
+        if (!isConnected) {
+            if (disconnectTimeoutRef.current !== null || disconnectedBannerShownRef.current) return;
+            clearHideTimeout();
+            disconnectTimeoutRef.current = setTimeout(() => {
+                disconnectTimeoutRef.current = null;
+                disconnectedBannerShownRef.current = true;
+                setStatus('disconnected');
+            }, DISCONNECT_DELAY);
+            return;
+        }
+
+        clearDisconnectTimeout();
+        if (!disconnectedBannerShownRef.current) return;
+        disconnectedBannerShownRef.current = false;
+        clearHideTimeout();
+        setStatus('reconnected');
+        hideTimeoutRef.current = setTimeout(() => {
+            hideTimeoutRef.current = null;
+            setStatus(null);
+        }, RECONNECT_VISIBLE_TIME);
+    }, [isConnected, clearDisconnectTimeout, clearHideTimeout]);
+
+    useEffect(() => () => {
+        clearDisconnectTimeout();
+        clearHideTimeout();
+    }, [clearDisconnectTimeout, clearHideTimeout]);
+
+    return {
+        visible: status !== null,
+        isReconnected: status === 'reconnected',
+        text: status === 'reconnected' ? reconnectedText : disconnectedText,
+        onHideBanner,
+    };
+};

package/src/components/ConnectionContainer/types/types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface ConnectionContainerProps {
+    /** null means connectivity is not yet known. */
+    isConnected: boolean | null;
+    disconnectedText: string;
+    reconnectedText: string;
+    children?: ReactNode;
+    disconnectedIcon?: ReactNode;
+    reconnectedIcon?: ReactNode;
+    dismissAccessibilityHint?: string;
+    style?: StyleProp<ViewStyle>;
+}