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

package/src/components/Input/ui/Input.tsx

@@ -0,0 +1,161 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Pressable, TextInput, View } from 'react-native';
+import { Typography } from '../../Typography';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { useInput } from '../presenters/useInput';
+import type { InputProps, InputRef } from '../types/types';
+import { getPasswordHitSlop, getStyles } from './styles';
+
+const InputComponent = forwardRef<InputRef, InputProps>(
+    (
+        {
+            accessibilityHint,
+            accessibilityLabel,
+            accessibilityState,
+            containerStyle,
+            disabled = false,
+            editable,
+            endAccessory,
+            errorText,
+            errorTextProps,
+            helperText,
+            helperTextProps,
+            inputContainerStyle,
+            invalid = false,
+            label,
+            labelProps,
+            multiline,
+            onBlur,
+            onFocus,
+            passwordToggle,
+            placeholderTextColor,
+            secureTextEntry,
+            startAccessory,
+            style,
+            ...nativeProps
+        },
+        ref,
+    ) => {
+        const {
+            canTogglePassword,
+            errorColor,
+            errorVariant,
+            helperColor,
+            helperVariant,
+            isFocused,
+            isInvalid,
+            labelColor,
+            labelVariant,
+            onInputBlur,
+            onInputFocus,
+            onPasswordVisibilityToggle,
+            passwordAction,
+            resolvedAccessibilityHint,
+            resolvedAccessibilityLabel,
+            resolvedAccessibilityState,
+            resolvedEditable,
+            resolvedPlaceholderTextColor,
+            resolvedSecureTextEntry,
+            showHelperText,
+        } = useInput({
+            accessibilityHint,
+            accessibilityLabel,
+            accessibilityState,
+            disabled,
+            editable,
+            errorText,
+            errorTextProps,
+            helperText,
+            helperTextProps,
+            invalid,
+            label,
+            labelProps,
+            onBlur,
+            onFocus,
+            passwordToggle,
+            placeholderTextColor,
+            secureTextEntry,
+        });
+
+        const { colors, fonts, input } = useUITheme();
+        const scaling = useScaling();
+        const styles = useMemo(
+            () => getStyles(colors, fonts, input, scaling, isFocused, isInvalid, disabled),
+            [colors, disabled, fonts, input, isFocused, isInvalid, scaling],
+        );
+        const textInputStyle = [styles.text, multiline && styles.multilineText, style];
+        const passwordHitSlop = canTogglePassword && passwordAction ? getPasswordHitSlop(scaling) : undefined;
+
+        return (
+            <View style={[styles.container, containerStyle]}>
+                {label ? (
+                    <View style={styles.labelContainer}>
+                        <Typography
+                            {...labelProps}
+                            text={label}
+                            variant={labelVariant}
+                            color={labelColor}
+                            style={labelProps?.style}
+                        />
+                    </View>
+                ) : null}
+
+                <View style={[styles.field, inputContainerStyle]}>
+                    {startAccessory != null ? <View style={styles.startAccessory}>{startAccessory}</View> : null}
+                    <TextInput
+                        {...nativeProps}
+                        ref={ref}
+                        accessibilityLabel={resolvedAccessibilityLabel}
+                        accessibilityHint={resolvedAccessibilityHint}
+                        accessibilityState={resolvedAccessibilityState}
+                        editable={resolvedEditable}
+                        multiline={multiline}
+                        placeholderTextColor={resolvedPlaceholderTextColor}
+                        secureTextEntry={resolvedSecureTextEntry}
+                        onFocus={onInputFocus}
+                        onBlur={onInputBlur}
+                        style={textInputStyle}
+                    />
+                    {endAccessory != null ? <View style={styles.endAccessory}>{endAccessory}</View> : null}
+                    {canTogglePassword && passwordAction ? (
+                        <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel={passwordAction.label}
+                            disabled={disabled}
+                            hitSlop={passwordHitSlop}
+                            onPress={onPasswordVisibilityToggle}
+                            style={styles.passwordToggle}
+                        >
+                            {passwordAction.icon}
+                        </Pressable>
+                    ) : null}
+                </View>
+
+                {errorText ? (
+                    <Typography
+                        {...errorTextProps}
+                        text={errorText}
+                        variant={errorVariant}
+                        color={errorColor}
+                        accessibilityRole="alert"
+                        accessibilityLiveRegion="polite"
+                        style={[styles.supportingText, errorTextProps?.style]}
+                    />
+                ) : showHelperText && helperText ? (
+                    <Typography
+                        {...helperTextProps}
+                        text={helperText}
+                        variant={helperVariant}
+                        color={helperColor}
+                        style={[styles.supportingText, helperTextProps?.style]}
+                    />
+                ) : null}
+            </View>
+        );
+    },
+);
+
+InputComponent.displayName = 'Input';
+
+export const Input = memo(InputComponent);

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

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { UIColors, UIFonts, UIInputTheme } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+
+export const getStyles = (
+    colors: UIColors,
+    fonts: UIFonts,
+    input: UIInputTheme,
+    scaling: ScalingFunctions,
+    focused: boolean,
+    invalid: boolean,
+    disabled: boolean,
+) => {
+    const { geometry, typography, colors: tokens } = input;
+    const border = disabled
+        ? tokens.disabledBorder
+        : invalid
+            ? tokens.errorBorder
+            : focused
+                ? tokens.focusedBorder
+                : tokens.border;
+    const field: ViewStyle = {
+        minHeight: scaling.scaleVertical(geometry.minHeight),
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: scaling.scaleHorizontal(geometry.paddingHorizontal),
+        borderWidth: scaling.scaleHorizontal(geometry.borderWidth),
+        borderColor: colors[border],
+        borderRadius: scaling.scaleHorizontal(geometry.radius),
+        backgroundColor: colors[disabled ? tokens.disabledBackground : tokens.background],
+    };
+    const text: TextStyle = {
+        flex: 1,
+        minWidth: 0,
+        minHeight: scaling.scaleVertical(geometry.textMinHeight),
+        paddingVertical: 0,
+        ...fonts[typography.inputFont],
+        fontSize: scaling.scaleFontSize(typography.inputFontSize),
+        includeFontPadding: typography.includeFontPadding,
+        color: colors[disabled ? tokens.disabledText : tokens.text],
+    };
+
+    const styles = StyleSheet.create({
+        container: {
+            marginBottom: scaling.scaleVertical(geometry.marginBottom),
+        },
+        labelContainer: {
+            marginBottom: scaling.scaleVertical(geometry.labelGap),
+        },
+        field,
+        text,
+        multilineText: {
+            textAlignVertical: 'top',
+            paddingVertical: scaling.scaleVertical(geometry.multilinePaddingVertical),
+        },
+        startAccessory: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginEnd: scaling.scaleHorizontal(geometry.startAccessoryGap),
+        },
+        endAccessory: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginStart: scaling.scaleHorizontal(geometry.endAccessoryGap),
+        },
+        passwordToggle: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginStart: scaling.scaleHorizontal(geometry.passwordToggleGap),
+        },
+        supportingText: {
+            marginTop: scaling.scaleVertical(geometry.supportingGap),
+        },
+    });
+
+    return styles;
+};
+
+export const getPasswordHitSlop = (scaling: ScalingFunctions) => scaling.scaleHorizontal(12);

package/src/components/Loader/index.ts

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

package/src/components/Loader/types/types.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { ActivityIndicatorProps, StyleProp, ViewStyle } from 'react-native';
+
+export interface LoaderProps {
+    indicator?: ReactNode;
+    inline?: boolean;
+    transparent?: boolean;
+    color?: ActivityIndicatorProps['color'];
+    size?: ActivityIndicatorProps['size'];
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}

package/src/components/Loader/ui/Loader.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { useUITheme } from '../../../theme';
+import { getStyles } from './styles';
+import type { LoaderProps } from '../types/types';
+
+export const Loader = ({
+    indicator,
+    inline = false,
+    transparent = false,
+    color,
+    size = 'large',
+    accessibilityLabel,
+    style,
+}: LoaderProps) => {
+    const { colors } = useUITheme();
+    const styles = useMemo(() => getStyles(colors, inline, transparent), [colors, inline, transparent]);
+
+    return (
+        <View
+            accessibilityRole="progressbar"
+            accessibilityLabel={accessibilityLabel}
+            accessibilityState={{ busy: true }}
+            style={[styles.container, style]}
+        >
+            {indicator === undefined ? <ActivityIndicator color={color ?? colors.primary} size={size} /> : indicator}
+        </View>
+    );
+};

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

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import type { UIColors } from '../../../theme';
+
+export const getStyles = (colors: UIColors, inline: boolean, transparent: boolean) => StyleSheet.create({
+    container: {
+        zIndex: 5,
+        position: inline ? 'relative' : 'absolute',
+        width: '100%',
+        height: inline ? undefined : '100%',
+        backgroundColor: transparent ? colors.transparent : colors.background,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/src/components/Logger/index.ts

@@ -0,0 +1,2 @@
+export { Logger } from './ui/Logger';
+export type { LoggerEntry, LoggerEntryType, LoggerHttpMetadata, LoggerRequestData, LoggerLabels, LoggerProps } from './types/types';

package/src/components/Logger/presenters/useLogger.ts

@@ -0,0 +1,13 @@
+import { useCallback, useMemo, useState } from 'react';
+import { groupLoggerEntries, toggleExpandedEntryId } from '../utils/groupLoggerEntries';
+import type { LoggerEntry } from '../types/types';
+
+export const useLogger = (logs: readonly LoggerEntry[]) => {
+    const items = useMemo(() => groupLoggerEntries(logs), [logs]);
+    const [expandedEntryIds, setExpandedEntryIds] = useState<Set<string>>(() => new Set());
+    const onToggleEntry = useCallback((id: string) => {
+        setExpandedEntryIds(previous => toggleExpandedEntryId(previous, id));
+    }, []);
+
+    return { items, expandedEntryIds, onToggleEntry };
+};

package/src/components/Logger/types/types.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type LoggerEntryType = 'request' | 'response' | 'error' | 'library' | 'info' | 'warning';
+
+export interface LoggerHttpMetadata {
+    /** Unique per HTTP exchange, including concurrent calls to the same endpoint. */
+    correlationId: string;
+    phase: 'request' | 'response';
+    status?: number;
+    durationMs?: number;
+}
+
+/** Sanitized, display-ready request data supplied by the application. */
+export interface LoggerRequestData {
+    params?: string;
+    body?: string;
+}
+
+export interface LoggerEntry {
+    id: string;
+    type: LoggerEntryType;
+    name: string;
+    message: string;
+    http?: LoggerHttpMetadata;
+    requestData?: LoggerRequestData;
+}
+
+export interface LoggerLabels {
+    title: string;
+    clear: string;
+    close: string;
+    empty: string;
+    request: string;
+    response: string;
+    params: string;
+    body: string;
+    payload: string;
+    status: string;
+    copy: string;
+    typeLabels?: Partial<Record<LoggerEntryType, string>>;
+}
+
+export interface LoggerProps {
+    /** Pass entries newest-first. Storage and retention remain application-owned. */
+    logs: readonly LoggerEntry[];
+    visible: boolean;
+    onClose: () => void;
+    onOpen?: () => void;
+    onClear?: () => void;
+    onCopyEntry?: (entry: LoggerEntry, text: string) => void | Promise<void>;
+    labels: LoggerLabels;
+    openIcon?: ReactNode;
+    copyIcon?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}

package/src/components/Logger/ui/Logger.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+import { FlatList, Modal, TouchableOpacity, View } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { Typography } from '../../Typography';
+import { LoggerItem } from './components/LoggerItem';
+import { getStyles } from './styles';
+import { useLogger } from '../presenters/useLogger';
+import type { LoggerPresentationItem } from '../utils/groupLoggerEntries';
+import type { LoggerProps } from '../types/types';
+
+export const Logger = ({ logs, visible, onClose, onOpen, onClear, onCopyEntry, labels, openIcon, copyIcon, style }: LoggerProps) => {
+    const { colors, spacing, radius } = useUITheme();
+    const scaling = useScaling();
+    const styles = useMemo(() => getStyles(colors, spacing, radius, scaling), [colors, spacing, radius, scaling]);
+    const { items, expandedEntryIds, onToggleEntry } = useLogger(logs);
+
+    return (
+        <>
+            {onOpen ? (
+                <TouchableOpacity
+                    accessibilityRole="button"
+                    accessibilityLabel={labels.title}
+                    onPress={onOpen}
+                    style={styles.launcher}
+                >
+                    {openIcon ?? <Typography text={labels.title} variant="label" />}
+                </TouchableOpacity>
+            ) : null}
+
+            <Modal visible={visible} onRequestClose={onClose} animationType="slide">
+                <SafeAreaProvider>
+                    <SafeAreaView style={[styles.container, style]}>
+                        <View style={styles.header}>
+                            <Typography text={labels.title} variant="title" style={styles.headerTitle} />
+                            {onClear ? (
+                                <TouchableOpacity
+                                    accessibilityRole="button"
+                                    accessibilityLabel={labels.clear}
+                                    onPress={onClear}
+                                    style={styles.headerAction}
+                                >
+                                    <Typography text={labels.clear} variant="label" style={styles.actionText} />
+                                </TouchableOpacity>
+                            ) : null}
+                            <TouchableOpacity
+                                accessibilityRole="button"
+                                accessibilityLabel={labels.close}
+                                onPress={onClose}
+                                style={styles.headerAction}
+                            >
+                                <Typography text={labels.close} variant="label" style={styles.actionText} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <FlatList<LoggerPresentationItem>
+                            data={items}
+                            keyExtractor={item => item.key}
+                            renderItem={({ item }) => (
+                                <LoggerItem
+                                    item={item}
+                                    labels={labels}
+                                    colors={colors}
+                                    styles={styles}
+                                    expandedEntryIds={expandedEntryIds}
+                                    onToggleEntry={onToggleEntry}
+                                    onCopyEntry={onCopyEntry}
+                                    copyIcon={copyIcon}
+                                />
+                            )}
+                            style={styles.list}
+                            contentContainerStyle={styles.listContent}
+                            ListEmptyComponent={
+                                <View style={styles.empty}>
+                                    <Typography text={labels.empty} variant="body" color="textMuted" />
+                                </View>
+                            }
+                        />
+                    </SafeAreaView>
+                </SafeAreaProvider>
+            </Modal>
+        </>
+    );
+};

package/src/components/Logger/ui/components/LoggerItem.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import type { UIColors } from '../../../../theme';
+import { Typography } from '../../../Typography';
+import type { LoggerPresentationItem } from '../../utils/groupLoggerEntries';
+import {
+    getCopyableText,
+    getExpandablePayload,
+    getLoggerSectionContext,
+    getRequestParams,
+    getResponseDurationSuffix,
+    getResponseSummary,
+    getStatusColorKey,
+    getVisibleSectionText,
+    shouldRenderLoggerSection,
+} from '../../utils/loggerPresentation';
+import type { LoggerEntry, LoggerLabels, LoggerProps } from '../../types/types';
+import type { getStyles } from '../styles';
+
+interface LoggerItemProps {
+    item: LoggerPresentationItem;
+    labels: LoggerLabels;
+    colors: UIColors;
+    styles: ReturnType<typeof getStyles>;
+    expandedEntryIds: ReadonlySet<string>;
+    onToggleEntry: (id: string) => void;
+    onCopyEntry: LoggerProps['onCopyEntry'];
+    copyIcon: LoggerProps['copyIcon'];
+}
+
+const sectionColor = (entry: LoggerEntry, colors: UIColors): string => {
+    if (entry.type === 'error' || (entry.http?.status !== undefined && entry.http.status >= 400)) return colors.error;
+    if (entry.type === 'warning') return colors.warning;
+    if (entry.http?.phase === 'response' || entry.type === 'response') return colors.success;
+    if (entry.http?.phase === 'request' || entry.type === 'request') return colors.primary;
+    return colors.icon;
+};
+
+export const LoggerItem = ({ item, labels, colors, styles, expandedEntryIds, onToggleEntry, onCopyEntry, copyIcon }: LoggerItemProps) => {
+    const entries = item.kind === 'exchange'
+        ? [item.request, item.response].filter((entry): entry is LoggerEntry => entry !== undefined && shouldRenderLoggerSection(entry, labels))
+        : shouldRenderLoggerSection(item.entry, labels) ? [item.entry] : [];
+    const name = item.kind === 'exchange' ? item.request?.name ?? item.response?.name : item.entry.name;
+
+    return (
+        <View style={styles.card}>
+            <Typography text={name ?? ''} variant="label" weight="bold" style={styles.cardTitle} />
+            {entries.map((entry, index) => {
+                const expanded = expandedEntryIds.has(entry.id);
+                const payload = getExpandablePayload(entry, labels);
+                const hasPayload = payload !== undefined;
+                const requestParams = getRequestParams(entry, labels);
+                const copyText = onCopyEntry ? getCopyableText(entry, labels) : undefined;
+                const context = getLoggerSectionContext(entry, labels);
+                const summary = getResponseSummary(entry, labels);
+                const visibleText = getVisibleSectionText(entry, labels);
+                const accessibilityLabel = `${context} ${entry.name}${summary ? ` ${summary}` : ''}`;
+                const status = entry.http?.phase === 'response' ? entry.http.status : undefined;
+                const visibleLabel = visibleText ? status === undefined ? (
+                    <Typography text={visibleText} variant="caption" weight="medium" style={styles.sectionTitle} />
+                ) : (
+                    <Typography variant="caption" weight="medium" style={styles.sectionTitle}>
+                        {`${labels.status}: `}
+                        <Text style={{ color: colors[getStatusColorKey(status)] }}>{status}</Text>
+                        {getResponseDurationSuffix(entry)}
+                    </Typography>
+                ) : <View style={styles.sectionTitle} />;
+                const copyButton = onCopyEntry && copyText !== undefined ? (
+                    <TouchableOpacity
+                        accessibilityRole="button"
+                        accessibilityLabel={`${labels.copy} ${accessibilityLabel}`}
+                        onPress={() => { onCopyEntry(entry, copyText); }}
+                        style={requestParams ? styles.copyButtonTop : styles.copyButton}
+                    >
+                        {copyIcon ?? <Typography text={labels.copy} variant="caption" />}
+                    </TouchableOpacity>
+                ) : null;
+                const showRow = hasPayload || !!visibleText || (!requestParams && copyButton !== null);
+                return (
+                    <React.Fragment key={entry.id}>
+                        {index > 0 ? <View style={styles.divider} /> : null}
+                        <View style={[styles.section, { borderLeftColor: sectionColor(entry, colors) }]}>
+                            {requestParams ? (
+                                <View style={styles.paramsRow}>
+                                    <Typography text={requestParams} variant="caption" selectable style={[styles.message, styles.paramsText]} />
+                                    {copyButton}
+                                </View>
+                            ) : null}
+                            {showRow ? (
+                                <View style={styles.sectionRow}>
+                                    {hasPayload ? (
+                                        <TouchableOpacity
+                                            accessibilityRole="button"
+                                            accessibilityLabel={accessibilityLabel}
+                                            accessibilityState={{ expanded }}
+                                            onPress={() => onToggleEntry(entry.id)}
+                                            style={styles.sectionButton}
+                                        >
+                                            {visibleLabel}
+                                            <Typography text={expanded ? '−' : '+'} variant="label" />
+                                        </TouchableOpacity>
+                                    ) : visibleText ? (
+                                        <View accessible accessibilityLabel={accessibilityLabel} style={styles.sectionButton}>
+                                            {visibleLabel}
+                                        </View>
+                                    ) : <View style={styles.sectionTitle} />}
+                                    {!requestParams ? copyButton : null}
+                                </View>
+                            ) : requestParams ? null : <View accessible accessibilityLabel={accessibilityLabel} style={styles.emptySection} />}
+                            {expanded && hasPayload ? <Typography text={payload} variant="body" selectable style={styles.message} /> : null}
+                        </View>
+                    </React.Fragment>
+                );
+            })}
+        </View>
+    );
+};