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

package/src/components/ConnectionContainer/ui/ConnectionContainer.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Typography } from '../../Typography';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { getStyles } from './styles';
+import type { ConnectionContainerProps } from '../types/types';
+import { useConnectionContainer } from '../presenters/useConnectionContainer';
+
+export const ConnectionContainer = ({
+    isConnected,
+    disconnectedText,
+    reconnectedText,
+    children,
+    disconnectedIcon,
+    reconnectedIcon,
+    dismissAccessibilityHint,
+    style,
+}: ConnectionContainerProps) => {
+    const { colors, spacing } = useUITheme();
+    const scaling = useScaling();
+    const styles = useMemo(() => getStyles(colors, spacing, scaling), [colors, scaling, spacing]);
+    const { visible, isReconnected, text, onHideBanner } = useConnectionContainer({
+        isConnected,
+        disconnectedText,
+        reconnectedText,
+    });
+
+    if (!visible) return children == null ? null : <>{children}</>;
+
+    return (
+        <>
+            {children}
+            <SafeAreaView edges={['top', 'left', 'right']} pointerEvents="box-none" style={[styles.container, style]}>
+                <TouchableOpacity
+                    accessibilityRole="button"
+                    accessibilityLabel={text}
+                    accessibilityHint={dismissAccessibilityHint}
+                    activeOpacity={0.8}
+                    onPress={onHideBanner}
+                >
+                    <View style={[styles.content, isReconnected ? styles.reconnected : styles.disconnected]}>
+                        {isReconnected ? reconnectedIcon : disconnectedIcon}
+                        <Typography text={text} variant="label" weight="bold" style={styles.text} accessibilityLiveRegion="polite" />
+                    </View>
+                </TouchableOpacity>
+            </SafeAreaView>
+        </>
+    );
+};

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

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import type { UIColors, UISpacing } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+
+export const getStyles = (colors: UIColors, spacing: UISpacing, scaling: ScalingFunctions) => {
+    const styles = StyleSheet.create({
+        container: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 10,
+        },
+        reconnected: {
+            backgroundColor: colors.success,
+        },
+        disconnected: {
+            backgroundColor: colors.error,
+        },
+        content: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: scaling.scaleHorizontal(spacing.sm),
+            paddingVertical: scaling.scaleVertical(spacing.md),
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+        },
+        text: {
+            flexShrink: 1,
+            color: colors.onPrimary,
+        },
+    });
+
+    return styles;
+};

package/src/components/CustomAlert/index.ts

@@ -0,0 +1,2 @@
+export { CustomAlert } from './ui/CustomAlert';
+export type { CustomAlertCloseAction, CustomAlertProps } from './types/types';

package/src/components/CustomAlert/presenters/useCustomAlert.ts

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import type { CustomAlertProps } from '../types/types';
+
+export const useCustomAlert = ({ visible, onClose }: Pick<CustomAlertProps, 'visible' | 'onClose'>) => {
+    const [isVisible, setIsVisible] = useState(visible);
+    const backdropOpacity = useRef(new Animated.Value(0)).current;
+    const scaleAnim = useRef(new Animated.Value(0.8)).current;
+    const onClosePress = useCallback(() => onClose(), [onClose]);
+
+    useEffect(() => {
+        if (visible) setIsVisible(true);
+        const animation = Animated.parallel([
+            Animated.timing(backdropOpacity, { toValue: visible ? 1 : 0, duration: 200, useNativeDriver: true }),
+            Animated.timing(scaleAnim, { toValue: visible ? 1 : 0.8, duration: 200, useNativeDriver: true }),
+        ]);
+        animation.start(({ finished }) => {
+            if (finished && !visible) setIsVisible(false);
+        });
+        return () => animation.stop();
+    }, [visible, backdropOpacity, scaleAnim]);
+
+    return { isVisible, backdropOpacity, scaleAnim, onClosePress };
+};

package/src/components/CustomAlert/types/types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface CustomAlertCloseAction {
+    icon: ReactNode;
+    accessibilityLabel: string;
+    accessibilityHint?: string;
+}
+
+export interface CustomAlertProps {
+    visible: boolean;
+    onClose: () => void;
+    header?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    showHandle?: boolean;
+    closeAction?: CustomAlertCloseAction;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+}

package/src/components/CustomAlert/ui/CustomAlert.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { Animated, Modal, Pressable, ScrollView, View } from 'react-native';
+import { Typography } from '../../Typography';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { useCustomAlert } from '../presenters/useCustomAlert';
+import { getAlertAnimatedStyles, getStyles } from './styles';
+import type { CustomAlertProps } from '../types/types';
+
+export const CustomAlert = ({
+    visible,
+    onClose,
+    header,
+    children,
+    footer,
+    showHandle = false,
+    closeAction,
+    style,
+    contentStyle,
+}: CustomAlertProps) => {
+    const { colors, spacing, radius } = useUITheme();
+    const scaling = useScaling();
+    const styles = useMemo(() => getStyles(colors, spacing, radius, scaling), [colors, radius, scaling, spacing]);
+    const { isVisible, backdropOpacity, scaleAnim, onClosePress } = useCustomAlert({ visible, onClose });
+    const { backdropStyle, alertStyle } = useMemo(
+        () => getAlertAnimatedStyles(backdropOpacity, scaleAnim),
+        [backdropOpacity, scaleAnim],
+    );
+
+    if (!isVisible) return null;
+
+    return (
+        <Modal visible={isVisible} transparent animationType="none" statusBarTranslucent onRequestClose={onClosePress}>
+            <View style={styles.modalContainer}>
+                <Animated.View pointerEvents="none" style={[styles.backdrop, backdropStyle]} />
+                <Pressable
+                    accessible={false}
+                    importantForAccessibility="no"
+                    onPress={onClosePress}
+                    style={styles.backdropTouch}
+                />
+
+                <Animated.View
+                    accessibilityViewIsModal
+                    onAccessibilityEscape={onClosePress}
+                    style={[styles.alertContainer, alertStyle, style]}
+                >
+                    <ScrollView bounces={false} showsVerticalScrollIndicator={false}>
+                        {showHandle ? <View style={styles.handle} /> : null}
+                        {header != null || closeAction ? (
+                            <View style={styles.header}>
+                                <View style={styles.headerRow}>
+                                    {typeof header === 'string' ? (
+                                        <Typography text={header} variant="title" style={styles.headerText} />
+                                    ) : header}
+                                    {closeAction ? (
+                                        <Pressable
+                                            accessibilityRole="button"
+                                            accessibilityLabel={closeAction.accessibilityLabel}
+                                            accessibilityHint={closeAction.accessibilityHint}
+                                            onPress={onClosePress}
+                                            style={styles.closeButton}
+                                        >
+                                            {closeAction.icon}
+                                        </Pressable>
+                                    ) : null}
+                                </View>
+                            </View>
+                        ) : null}
+                        {children != null ? <View style={[styles.content, contentStyle]}>{children}</View> : null}
+                        {footer != null ? <View style={styles.footer}>{footer}</View> : null}
+                    </ScrollView>
+                </Animated.View>
+            </View>
+        </Modal>
+    );
+};

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

@@ -0,0 +1,71 @@
+import { Animated, StyleSheet } from 'react-native';
+import type { UIColors, UIRadius, UISpacing } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+
+export const getStyles = (colors: UIColors, spacing: UISpacing, radius: UIRadius, scaling: ScalingFunctions) => {
+    const styles = StyleSheet.create({
+        modalContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        backdrop: {
+            ...StyleSheet.absoluteFill,
+            backgroundColor: colors.text,
+        },
+        backdropTouch: {
+            ...StyleSheet.absoluteFill,
+        },
+        alertContainer: {
+            width: '90%',
+            maxHeight: '85%',
+            backgroundColor: colors.background,
+            borderRadius: scaling.scaleHorizontal(radius.lg),
+            borderWidth: scaling.scaleHorizontal(1),
+            borderColor: colors.border,
+            overflow: 'hidden',
+        },
+        handle: {
+            width: scaling.scaleHorizontal(56),
+            height: scaling.scaleVertical(5),
+            borderRadius: scaling.scaleHorizontal(radius.full),
+            backgroundColor: colors.border,
+            alignSelf: 'center',
+            marginTop: scaling.scaleVertical(spacing.md),
+        },
+        header: {
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+            paddingVertical: scaling.scaleVertical(spacing.md),
+        },
+        headerRow: {
+            minHeight: scaling.scaleVertical(28),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        headerText: {
+            paddingHorizontal: scaling.scaleHorizontal(36),
+            textAlign: 'center',
+        },
+        closeButton: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            padding: scaling.scaleHorizontal(spacing.xs),
+        },
+        content: {
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+        },
+        footer: {
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+            paddingTop: scaling.scaleVertical(spacing.md),
+            paddingBottom: scaling.scaleVertical(spacing.xl),
+        },
+    });
+
+    return styles;
+};
+
+export const getAlertAnimatedStyles = (backdropOpacity: Animated.Value, scaleAnim: Animated.Value) => ({
+    backdropStyle: { opacity: backdropOpacity.interpolate({ inputRange: [0, 1], outputRange: [0, 0.5] }) },
+    alertStyle: { opacity: backdropOpacity, transform: [{ scale: scaleAnim }] },
+});

package/src/components/HeaderWithBackButton/index.ts

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

package/src/components/HeaderWithBackButton/presenters/useHeaderWithBackButton.ts

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import type { HeaderWithBackButtonProps } from '../types/types';
+
+export const useHeaderWithBackButton = (titleAlign: HeaderWithBackButtonProps['titleAlign']) => {
+    const [leftWidth, setLeftWidth] = useState<number>();
+    const [rightWidth, setRightWidth] = useState<number>();
+    const centered = titleAlign === 'center';
+
+    return {
+        centered,
+        leftWidth,
+        rightWidth,
+        setLeftWidth,
+        setRightWidth,
+        sideWidth: Math.max(leftWidth ?? 0, rightWidth ?? 0),
+    };
+};

package/src/components/HeaderWithBackButton/types/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TypographyProps } from '../../Typography';
+
+export interface HeaderWithBackButtonProps {
+    title: string | number;
+    subtitle?: string;
+    onBackPress: () => void;
+    backIcon: ReactNode;
+    backAccessibilityLabel: string;
+    backAccessibilityHint?: string;
+    backDisabled?: boolean;
+    rightAccessory?: ReactNode;
+    titleAlign?: 'left' | 'center';
+    titleVariant?: TypographyProps['variant'];
+    titleSize?: TypographyProps['size'];
+    subtitleVariant?: TypographyProps['variant'];
+    subtitleSize?: TypographyProps['size'];
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+}

package/src/components/HeaderWithBackButton/ui/HeaderWithBackButton.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { Typography } from '../../Typography';
+import { useHeaderWithBackButton } from '../presenters/useHeaderWithBackButton';
+import { getStyles } from './styles';
+import type { HeaderWithBackButtonProps } from '../types/types';
+
+export const HeaderWithBackButton = ({
+    title,
+    subtitle,
+    onBackPress,
+    backIcon,
+    backAccessibilityLabel,
+    backAccessibilityHint,
+    backDisabled = false,
+    rightAccessory,
+    titleAlign = 'left',
+    titleVariant = 'h3',
+    titleSize,
+    subtitleVariant = 'caption',
+    subtitleSize,
+    style,
+    contentStyle,
+}: HeaderWithBackButtonProps) => {
+    const { colors, spacing } = useUITheme();
+    const scaling = useScaling();
+    const styles = useMemo(() => getStyles(colors, spacing, scaling), [colors, spacing, scaling]);
+    const { leftWidth, rightWidth, setLeftWidth, setRightWidth, centered, sideWidth } = useHeaderWithBackButton(titleAlign);
+
+    return (
+        <View style={[styles.container, style]}>
+            <View style={centered ? { width: sideWidth } : undefined}>
+                <View
+                    style={styles.left}
+                    onLayout={centered ? event => setLeftWidth(event.nativeEvent.layout.width) : undefined}
+                >
+                    {!backDisabled && (
+                        <TouchableOpacity
+                            accessibilityRole="button"
+                            accessibilityLabel={backAccessibilityLabel}
+                            accessibilityHint={backAccessibilityHint}
+                            activeOpacity={0.7}
+                            hitSlop={styles.hitSlop}
+                            onPress={onBackPress}
+                            style={styles.backButton}
+                        >
+                            {backIcon}
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+
+            <View
+                style={[
+                    styles.content,
+                    centered && leftWidth !== undefined && rightWidth !== undefined ? null : centered ? { opacity: 0 } : null,
+                    contentStyle,
+                ]}
+            >
+                <Typography
+                    text={title}
+                    variant={titleVariant}
+                    size={titleSize}
+                    numberOfLines={1}
+                    style={[styles.title, centered && styles.centeredText]}
+                />
+                {subtitle ? (
+                    <Typography
+                        text={subtitle}
+                        variant={subtitleVariant}
+                        size={subtitleSize}
+                        numberOfLines={1}
+                        style={[styles.subtitle, centered && styles.centeredText]}
+                    />
+                ) : null}
+            </View>
+
+            <View style={centered ? { width: sideWidth } : undefined}>
+                <View
+                    style={rightAccessory ? styles.right : undefined}
+                    onLayout={centered ? event => setRightWidth(event.nativeEvent.layout.width) : undefined}
+                >
+                    {rightAccessory}
+                </View>
+            </View>
+        </View>
+    );
+};

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

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import type { UIColors, UISpacing } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+
+export const getStyles = (colors: UIColors, spacing: UISpacing, scaling: ScalingFunctions) => {
+    const backSize = scaling.scaleVertical(18);
+    const sideGap = scaling.scaleHorizontal(spacing.md);
+
+    return StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+            paddingVertical: scaling.scaleVertical(spacing.xs),
+        },
+        left: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            alignSelf: 'flex-start',
+            minWidth: backSize + sideGap,
+            paddingRight: sideGap,
+        },
+        backButton: {
+            width: backSize,
+            height: backSize,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        hitSlop: {
+            top: scaling.scaleVertical(spacing.sm),
+            bottom: scaling.scaleVertical(spacing.sm),
+            left: scaling.scaleHorizontal(spacing.sm),
+            right: scaling.scaleHorizontal(spacing.sm),
+        },
+        content: {
+            flex: 1,
+            minWidth: 0,
+            justifyContent: 'center',
+        },
+        centeredText: {
+            textAlign: 'center',
+        },
+        title: {
+            color: colors.text,
+        },
+        subtitle: {
+            color: colors.textMuted,
+        },
+        right: {
+            minWidth: scaling.scaleVertical(34) + sideGap,
+            minHeight: scaling.scaleVertical(34),
+            alignSelf: 'flex-end',
+            paddingLeft: sideGap,
+            alignItems: 'flex-end',
+            justifyContent: 'center',
+        },
+    });
+};

package/src/components/Input/index.ts

@@ -0,0 +1,8 @@
+export { Input } from './ui/Input';
+export type {
+    InputPasswordToggle,
+    InputPasswordToggleAction,
+    InputProps,
+    InputRef,
+    InputTextProps,
+} from './types/types';

package/src/components/Input/presenters/useInput.ts

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { TextInputProps } from 'react-native';
+import { useUITheme } from '../../../theme';
+import type { InputProps } from '../types/types';
+
+type UseInputProps = Pick<
+    InputProps,
+    | 'accessibilityHint'
+    | 'accessibilityLabel'
+    | 'accessibilityState'
+    | 'disabled'
+    | 'editable'
+    | 'errorText'
+    | 'errorTextProps'
+    | 'helperText'
+    | 'helperTextProps'
+    | 'invalid'
+    | 'label'
+    | 'labelProps'
+    | 'onBlur'
+    | 'onFocus'
+    | 'passwordToggle'
+    | 'placeholderTextColor'
+    | 'secureTextEntry'
+>;
+
+export const useInput = ({
+    accessibilityHint,
+    accessibilityLabel,
+    accessibilityState,
+    disabled = false,
+    editable,
+    errorText,
+    errorTextProps,
+    helperText,
+    helperTextProps,
+    invalid = false,
+    label,
+    labelProps,
+    onBlur,
+    onFocus,
+    passwordToggle,
+    placeholderTextColor,
+    secureTextEntry,
+}: UseInputProps) => {
+    const { colors, input } = useUITheme();
+    const canTogglePassword = Boolean(secureTextEntry && passwordToggle);
+    const [visibility, setVisibility] = useState({ enabled: canTogglePassword, visible: false });
+    const [isFocused, setFocused] = useState(false);
+
+    useEffect(() => {
+        setVisibility(current => current.enabled === canTogglePassword
+            ? current
+            : { enabled: canTogglePassword, visible: false });
+    }, [canTogglePassword]);
+
+    const isPasswordVisible = canTogglePassword && visibility.enabled === canTogglePassword && visibility.visible;
+    const isInvalid = invalid || Boolean(errorText);
+
+    const onInputFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(
+        event => {
+            setFocused(true);
+            onFocus?.(event);
+        },
+        [onFocus],
+    );
+    const onInputBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(
+        event => {
+            setFocused(false);
+            onBlur?.(event);
+        },
+        [onBlur],
+    );
+    const onPasswordVisibilityToggle = useCallback(() => {
+        setVisibility(current => ({
+            enabled: canTogglePassword,
+            visible: !(current.enabled === canTogglePassword && current.visible),
+        }));
+    }, [canTogglePassword]);
+    const passwordAction = isPasswordVisible ? passwordToggle?.hide : passwordToggle?.show;
+
+    return {
+        canTogglePassword,
+        errorColor: errorTextProps?.color ?? input.colors.error,
+        errorVariant: errorTextProps?.variant ?? input.typography.errorVariant,
+        helperColor: helperTextProps?.color ?? input.colors.helper,
+        helperVariant: helperTextProps?.variant ?? input.typography.helperVariant,
+        labelColor: labelProps?.color ?? input.colors.label,
+        labelVariant: labelProps?.variant ?? input.typography.labelVariant,
+        isFocused,
+        isInvalid,
+        onInputBlur,
+        onInputFocus,
+        onPasswordVisibilityToggle,
+        passwordAction,
+        resolvedAccessibilityHint: accessibilityHint ?? (errorText || undefined),
+        resolvedAccessibilityLabel: accessibilityLabel ?? label,
+        resolvedAccessibilityState: disabled ? { ...accessibilityState, disabled: true } : accessibilityState,
+        resolvedEditable: disabled ? false : editable,
+        resolvedPlaceholderTextColor: placeholderTextColor ?? colors[input.colors.placeholder],
+        resolvedSecureTextEntry: secureTextEntry ? !isPasswordVisible : secureTextEntry,
+        showHelperText: !isInvalid && Boolean(helperText),
+    };
+};

package/src/components/Input/types/types.ts

@@ -0,0 +1,36 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { StyleProp, TextInput, TextInputProps, ViewStyle } from 'react-native';
+import type { TypographyProps } from '../../Typography';
+
+export type InputRef = ComponentRef<typeof TextInput>;
+
+export type InputTextProps = Pick<
+    TypographyProps,
+    'variant' | 'weight' | 'color' | 'style' | 'numberOfLines'
+>;
+
+export interface InputPasswordToggleAction {
+    label: string;
+    icon: ReactNode;
+}
+
+export interface InputPasswordToggle {
+    show: InputPasswordToggleAction;
+    hide: InputPasswordToggleAction;
+}
+
+export interface InputProps extends Omit<TextInputProps, 'ref'> {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    startAccessory?: ReactNode;
+    endAccessory?: ReactNode;
+    passwordToggle?: InputPasswordToggle;
+    containerStyle?: StyleProp<ViewStyle>;
+    inputContainerStyle?: StyleProp<ViewStyle>;
+    labelProps?: InputTextProps;
+    helperTextProps?: InputTextProps;
+    errorTextProps?: InputTextProps;
+}