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

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

@@ -0,0 +1,121 @@
+import { 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
+) => {
+  return StyleSheet.create({
+    launcher: {
+      position: "absolute",
+      right: scaling.scaleHorizontal(spacing.lg),
+      bottom: scaling.scaleVertical(spacing.lg * 7),
+      zIndex: 10,
+      padding: scaling.scaleVertical(spacing.sm),
+      borderRadius: scaling.scaleHorizontal(radius.lg),
+      borderWidth: scaling.scaleHorizontal(1),
+      borderColor: colors.border,
+      backgroundColor: colors.background,
+    },
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+      paddingVertical: scaling.scaleVertical(spacing.sm),
+      gap: scaling.scaleHorizontal(spacing.sm),
+    },
+    headerTitle: {
+      flex: 1,
+    },
+    headerAction: {
+      paddingHorizontal: scaling.scaleHorizontal(spacing.sm),
+      paddingVertical: scaling.scaleVertical(spacing.sm),
+    },
+    actionText: { color: colors.primary },
+    list: {
+      flex: 1,
+      borderTopWidth: scaling.scaleVertical(1),
+      borderTopColor: colors.border,
+    },
+    listContent: {
+      flexGrow: 1,
+      paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+      paddingBottom: scaling.scaleVertical(spacing.lg),
+    },
+    empty: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      padding: scaling.scaleHorizontal(spacing.lg),
+    },
+    card: {
+      marginTop: scaling.scaleVertical(spacing.md),
+      paddingHorizontal: scaling.scaleHorizontal(spacing.md),
+      paddingVertical: scaling.scaleVertical(spacing.sm),
+      borderRadius: scaling.scaleHorizontal(radius.sm),
+      borderWidth: scaling.scaleHorizontal(1),
+      borderColor: colors.border,
+      backgroundColor: colors.surface,
+    },
+    cardTitle: {
+      marginBottom: scaling.scaleVertical(spacing.xs),
+    },
+    section: {
+      borderLeftWidth: scaling.scaleHorizontal(3),
+      paddingLeft: scaling.scaleHorizontal(spacing.sm),
+    },
+    divider: {
+      height: scaling.scaleVertical(1),
+      backgroundColor: colors.border,
+      marginVertical: scaling.scaleVertical(spacing.sm),
+    },
+    sectionButton: {
+      flex: 1,
+      minHeight: scaling.scaleVertical(36),
+      flexDirection: "row",
+      alignItems: "center",
+      gap: scaling.scaleHorizontal(spacing.sm),
+    },
+    sectionRow: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    sectionTitle: {
+      flex: 1,
+    },
+    paramsRow: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+    },
+    paramsText: {
+      flex: 1,
+      minWidth: 0,
+    },
+    copyButton: {
+      minHeight: scaling.scaleVertical(36),
+      justifyContent: "center",
+      paddingHorizontal: scaling.scaleHorizontal(spacing.sm),
+    },
+    copyButtonTop: {
+      minHeight: scaling.scaleVertical(36),
+      justifyContent: "flex-start",
+      paddingTop: scaling.scaleVertical(spacing.xs),
+      paddingHorizontal: scaling.scaleHorizontal(spacing.sm),
+    },
+    emptySection: {
+      height: scaling.scaleVertical(spacing.sm),
+    },
+    message: {
+      color: colors.textMuted,
+      marginTop: scaling.scaleVertical(spacing.xs),
+      marginBottom: scaling.scaleVertical(spacing.sm),
+    },
+  });
+};

package/src/components/Logger/utils/groupLoggerEntries.ts

@@ -0,0 +1,40 @@
+import type { LoggerEntry } from '../types/types';
+
+export type LoggerPresentationItem =
+    | { kind: 'entry'; key: string; entry: LoggerEntry }
+    | { kind: 'exchange'; key: string; request?: LoggerEntry; response?: LoggerEntry };
+
+export const groupLoggerEntries = (logs: readonly LoggerEntry[]): LoggerPresentationItem[] => {
+    const items: LoggerPresentationItem[] = [];
+    const exchanges = new Map<string, Extract<LoggerPresentationItem, { kind: 'exchange' }>>();
+
+    for (const entry of logs) {
+        const { correlationId, phase } = entry.http ?? {};
+        if (!correlationId || !phase) {
+            items.push({ kind: 'entry', key: `entry:${entry.id}`, entry });
+            continue;
+        }
+
+        let exchange = exchanges.get(correlationId);
+        if (!exchange) {
+            exchange = { kind: 'exchange', key: `exchange:${correlationId}` };
+            exchanges.set(correlationId, exchange);
+            items.push(exchange);
+        }
+
+        if (exchange[phase]) {
+            items.push({ kind: 'entry', key: `entry:${entry.id}`, entry });
+        } else {
+            exchange[phase] = entry;
+        }
+    }
+
+    return items;
+};
+
+export const toggleExpandedEntryId = (previous: ReadonlySet<string>, id: string): Set<string> => {
+    const next = new Set(previous);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+};

package/src/components/Logger/utils/loggerPresentation.ts

@@ -0,0 +1,69 @@
+import type { LoggerEntry, LoggerLabels } from '../types/types';
+import type { UIColorKey } from '../../../theme';
+
+const nonBlank = (value: string | undefined): string | undefined => value?.trim() ? value : undefined;
+
+const isRequest = (entry: LoggerEntry): boolean => entry.http?.phase === 'request' || entry.type === 'request';
+
+export const getLoggerSectionContext = (entry: LoggerEntry, labels: LoggerLabels): string => {
+    const phase = entry.http?.phase ?? (entry.type === 'request' || entry.type === 'response' ? entry.type : undefined);
+    return phase === 'request' ? labels.request : phase === 'response' ? labels.response : labels.typeLabels?.[entry.type] ?? entry.type;
+};
+
+export const getLoggerPayload = (entry: LoggerEntry): string | undefined => {
+    const message = entry.message.trim();
+    if (!message || (entry.http && (message === 'undefined' || message === 'null'))) return undefined;
+    return entry.message;
+};
+
+export const getRequestParams = (entry: LoggerEntry, labels: LoggerLabels): string | undefined => {
+    if (!isRequest(entry)) return undefined;
+    const params = nonBlank(entry.requestData?.params);
+    if (!params) return undefined;
+    return nonBlank(entry.requestData?.body) ? `${labels.params}\n${params}` : params;
+};
+
+export const getExpandablePayload = (entry: LoggerEntry, labels: LoggerLabels): string | undefined => {
+    if (!isRequest(entry)) return getLoggerPayload(entry);
+    const body = nonBlank(entry.requestData?.body) ?? getLoggerPayload(entry);
+    if (!body) return undefined;
+    return nonBlank(entry.requestData?.params) ? `${labels.body}\n${body}` : body;
+};
+
+export const getCopyableText = (entry: LoggerEntry, labels: LoggerLabels): string | undefined => {
+    if (!isRequest(entry)) return getLoggerPayload(entry);
+    const params = nonBlank(entry.requestData?.params);
+    const body = nonBlank(entry.requestData?.body) ?? getLoggerPayload(entry);
+    if (params && body) return `${labels.params}\n${params}\n\n${labels.body}\n${body}`;
+    return params ?? body;
+};
+
+export const shouldRenderLoggerSection = (entry: LoggerEntry, labels: LoggerLabels): boolean =>
+    !isRequest(entry) || getRequestParams(entry, labels) !== undefined || getExpandablePayload(entry, labels) !== undefined;
+
+export const getResponseSummary = (entry: LoggerEntry, labels: LoggerLabels): string => {
+    if (entry.http?.phase !== 'response') return '';
+    return [
+        entry.http.status === undefined ? undefined : `${labels.status}: ${entry.http.status}`,
+        entry.http.durationMs === undefined ? undefined : `${entry.http.durationMs} ms`,
+    ].filter(value => value !== undefined).join(' · ');
+};
+
+export const getResponseDurationSuffix = (entry: LoggerEntry): string =>
+    entry.http?.phase === 'response' && entry.http.durationMs !== undefined
+        ? ` · ${entry.http.durationMs} ms`
+        : '';
+
+export const getStatusColorKey = (status: number): UIColorKey => {
+    if (status >= 200 && status < 300) return 'success';
+    if (status >= 300 && status < 400) return 'icon';
+    if (status >= 400 && status < 500) return 'warning';
+    if (status >= 500 && status < 600) return 'error';
+    return 'text';
+};
+
+export const getVisibleSectionText = (entry: LoggerEntry, labels: LoggerLabels): string => {
+    if (isRequest(entry)) return getExpandablePayload(entry, labels) ? labels.payload : '';
+    if (entry.http || entry.type === 'response') return getResponseSummary(entry, labels);
+    return getLoggerSectionContext(entry, labels);
+};

package/src/components/ScreenContainer/index.ts

@@ -0,0 +1,2 @@
+export { ScreenContainer } from './ui/ScreenContainer';
+export type { ScreenContainerGradient, ScreenContainerProps } from './types/types';

package/src/components/ScreenContainer/presenters/useScreenContainer.ts

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { Keyboard } from 'react-native';
+
+export const useScreenContainer = () => {
+    const onContainerStartShouldSetResponder = useCallback(() => false, []);
+    const onContainerResponderRelease = useCallback(() => Keyboard.dismiss(), []);
+
+    return {
+        onContainerStartShouldSetResponder,
+        onContainerResponderRelease,
+    };
+};

package/src/components/ScreenContainer/types/types.ts

@@ -0,0 +1,19 @@
+import type { ReactNode, Ref } from 'react';
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
+import type { KeyboardAwareScrollViewRef } from 'react-native-keyboard-controller';
+import type { LinearGradientProps } from 'react-native-linear-gradient';
+import type { Edge } from 'react-native-safe-area-context';
+
+export type ScreenContainerGradient = Pick<LinearGradientProps, 'colors' | 'locations' | 'start' | 'end'>;
+
+export interface ScreenContainerProps extends Omit<ScrollViewProps, 'children' | 'style' | 'contentContainerStyle'> {
+    children?: ReactNode;
+    edges?: Edge[];
+    isKeyboardAvoiding?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    headerComponent?: ReactNode;
+    footerComponent?: ReactNode;
+    keyboardScrollViewRef?: Ref<KeyboardAwareScrollViewRef>;
+    gradient?: ScreenContainerGradient;
+}

package/src/components/ScreenContainer/ui/ScreenContainer.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+import { KeyboardAwareScrollView, KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { LinearGradient } from 'react-native-linear-gradient';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { getBottomOffset, getStyles } from './styles';
+import type { ScreenContainerProps } from '../types/types';
+import { useScreenContainer } from '../presenters/useScreenContainer';
+
+export const ScreenContainer = ({
+    children,
+    edges = ['top', 'bottom'],
+    scrollEnabled = false,
+    isKeyboardAvoiding = false,
+    containerStyle,
+    contentContainerStyle,
+    headerComponent,
+    footerComponent,
+    scrollViewRef,
+    keyboardScrollViewRef,
+    keyboardShouldPersistTaps = 'handled',
+    showsVerticalScrollIndicator = false,
+    gradient,
+    ...scrollProps
+}: ScreenContainerProps) => {
+    const { colors, spacing } = useUITheme();
+    const scaling = useScaling();
+    const styles = useMemo(() => getStyles(colors), [colors]);
+    const bottomOffset = getBottomOffset(spacing, scaling);
+    const { onContainerStartShouldSetResponder, onContainerResponderRelease } = useScreenContainer();
+
+    return (
+        <View style={styles.root}>
+            {gradient ? <LinearGradient {...gradient} pointerEvents="none" style={styles.gradient} /> : null}
+            <SafeAreaView edges={edges} style={styles.safeArea}>
+                {headerComponent}
+
+                {scrollEnabled ? (
+                    isKeyboardAvoiding ? (
+                        <KeyboardAwareScrollView
+                            {...scrollProps}
+                            ref={keyboardScrollViewRef}
+                            bottomOffset={bottomOffset}
+                            style={[styles.container, containerStyle]}
+                            contentContainerStyle={[styles.content, contentContainerStyle]}
+                            keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+                        >
+                            {children}
+                        </KeyboardAwareScrollView>
+                    ) : (
+                        <ScrollView
+                            {...scrollProps}
+                            ref={scrollViewRef}
+                            style={[styles.container, containerStyle]}
+                            contentContainerStyle={[styles.content, contentContainerStyle]}
+                            keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+                        >
+                            {children}
+                        </ScrollView>
+                    )
+                ) : isKeyboardAvoiding ? (
+                    <KeyboardAvoidingView behavior="padding" style={[styles.container, containerStyle]}>
+                        <View
+                            style={styles.container}
+                            onStartShouldSetResponder={onContainerStartShouldSetResponder}
+                            onResponderRelease={onContainerResponderRelease}
+                        >
+                            {children}
+                        </View>
+                    </KeyboardAvoidingView>
+                ) : (
+                    <View style={[styles.container, containerStyle]}>{children}</View>
+                )}
+
+                {footerComponent}
+            </SafeAreaView>
+        </View>
+    );
+};

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

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import type { UIColors } from '../../../theme';
+import type { UISpacing } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+
+export const getStyles = (colors: UIColors) => {
+    const styles = StyleSheet.create({
+        root: {
+            flex: 1,
+            backgroundColor: colors.background,
+        },
+        gradient: {
+            ...StyleSheet.absoluteFill,
+        },
+        safeArea: {
+            flex: 1,
+            backgroundColor: colors.transparent,
+        },
+        container: {
+            flex: 1,
+            backgroundColor: colors.transparent,
+        },
+        content: {
+            flexGrow: 1,
+        },
+    });
+
+    return styles;
+};
+
+export const getBottomOffset = (spacing: UISpacing, scaling: ScalingFunctions) => scaling.scaleVertical(spacing.xl);

package/src/components/Typography/index.ts

@@ -0,0 +1,2 @@
+export * from './ui/Typography';
+export * from './types/types';

package/src/components/Typography/types/types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { TextProps } from 'react-native';
+import type { UIColorKey, UIFontKey, TypographyVariant } from '../../../theme';
+
+export type TypographyProps = Omit<TextProps, 'children'> & {
+    variant?: TypographyVariant;
+    weight?: UIFontKey;
+    color?: UIColorKey;
+    size?: number;
+    lineHeight?: number;
+} & (
+    | { text: string | number; children?: never }
+    | { text?: never; children?: ReactNode }
+);

package/src/components/Typography/ui/Typography.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Text } from 'react-native';
+import type { TextInstance } from 'react-native';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { getTypographyStyle } from './styles';
+import type { TypographyProps } from '../types/types';
+
+const TypographyComponent = forwardRef<TextInstance, TypographyProps>(
+    (
+        {
+            text,
+            children,
+            variant,
+            weight,
+            color,
+            size,
+            lineHeight,
+            style,
+            ...props
+        },
+        ref,
+    ) => {
+        const theme = useUITheme();
+        const scaling = useScaling();
+        const resolvedStyle = useMemo(
+            () => getTypographyStyle(theme, scaling, { variant, weight, color, size, lineHeight }),
+            [theme, scaling, variant, weight, color, size, lineHeight],
+        );
+
+        return <Text ref={ref} {...props} style={[resolvedStyle, style]}>{text ?? children}</Text>;
+    },
+);
+
+TypographyComponent.displayName = 'Typography';
+
+export const Typography = memo(TypographyComponent);

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

@@ -0,0 +1,26 @@
+import type { TextStyle } from 'react-native';
+import type { UITheme, UITypographyToken } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+import type { TypographyProps } from '../types/types';
+
+type TypographyStyleProps = Pick<TypographyProps, 'variant' | 'weight' | 'color' | 'size' | 'lineHeight'>;
+
+export const getTypographyStyle = (
+    { colors, fonts, typography }: UITheme,
+    scaling: ScalingFunctions,
+    { variant = 'body', weight, color = 'text', size, lineHeight }: TypographyStyleProps,
+): TextStyle => {
+    const token = typography[variant] as UITypographyToken;
+    const font = fonts[weight ?? token.font];
+    const resolvedLineHeight = lineHeight ?? token.lineHeight;
+
+    return {
+        ...font,
+        color: colors[color],
+        fontSize: scaling.scaleFontSize(size ?? token.fontSize),
+        lineHeight: resolvedLineHeight === undefined ? undefined : scaling.scaleLineHeight(resolvedLineHeight),
+        letterSpacing: token.letterSpacing,
+        includeFontPadding: token.includeFontPadding,
+        flexShrink: token.flexShrink,
+    };
+};

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from './components/Button';
+export * from './components/BottomModal';
+export * from './components/ConnectionContainer';
+export * from './components/CustomAlert';
+export * from './components/HeaderWithBackButton';
+export * from './components/Input';
+export * from './components/Loader';
+export * from './components/Logger';
+export * from './components/ScreenContainer';
+export * from './components/Typography';
+export * from './provider';
+export * from './theme';
+export * from './utils';

package/src/provider/LocalizationContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { UILocalizationAdapter } from './types';
+
+export const UILocalizationContext = createContext<UILocalizationAdapter | undefined>(undefined);
+
+export const useUILocalization = (): UILocalizationAdapter => {
+    const localization = useContext(UILocalizationContext);
+
+    if (!localization) {
+        throw new Error('useUILocalization requires the localization prop on UIProvider.');
+    }
+
+    return localization;
+};

package/src/provider/ModeContext.tsx

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+import { defaultTheme } from '../theme/defaultTheme';
+import type { UIModeContextValue } from './types';
+
+export const UIModeContext = createContext<UIModeContextValue>({
+    mode: defaultTheme.mode,
+});
+
+export const useUIMode = (): UIModeContextValue => useContext(UIModeContext);

package/src/provider/index.ts

@@ -0,0 +1,12 @@
+export { useUILocalization } from './LocalizationContext';
+export { useUIMode } from './ModeContext';
+export type {
+    ChangeLocale,
+    ChangeMode,
+    MaybePromise,
+    Translate,
+    TranslationParams,
+    UILocalizationAdapter,
+    UIModeContextValue,
+    UIProviderProps,
+} from './types';

package/src/provider/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { ThemeMode, UIThemeOverride } from '../theme/types';
+
+export type MaybePromise<T> = T | Promise<T>;
+
+export type ChangeMode = (mode: ThemeMode) => MaybePromise<void>;
+
+export interface UIModeContextValue {
+    mode: ThemeMode;
+    changeMode?: ChangeMode;
+}
+
+export type TranslationParams = Readonly<Record<string, unknown>>;
+
+export type Translate = (key: string, params?: TranslationParams) => string;
+
+export type ChangeLocale = (locale: string) => MaybePromise<void>;
+
+export interface UILocalizationAdapter {
+    locale: string;
+    t: Translate;
+    changeLocale?: ChangeLocale;
+    direction?: 'ltr' | 'rtl';
+}
+
+export interface UIProviderProps {
+    children: ReactNode;
+    theme?: UIThemeOverride;
+    onModeChange?: ChangeMode;
+    localization?: UILocalizationAdapter;
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,7 @@
+export {
+    UIProvider,
+    UIKitThemeProvider,
+    useUITheme,
+    useUIKitTheme,
+} from './UIProvider';
+export type { UIProviderProps } from './UIProvider';

package/src/theme/UIProvider.tsx

@@ -0,0 +1,60 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { UILocalizationContext } from '../provider/LocalizationContext';
+import { UIModeContext } from '../provider/ModeContext';
+import type {
+    UILocalizationAdapter,
+    UIModeContextValue,
+    UIProviderProps,
+} from '../provider/types';
+import { createTheme } from './createTheme';
+import { defaultTheme } from './defaultTheme';
+import type { UITheme } from './types';
+
+const UIThemeContext = createContext<UITheme>(defaultTheme as UITheme);
+
+export type { UIProviderProps } from '../provider/types';
+
+export const UIProvider = ({ children, theme, onModeChange, localization }: UIProviderProps) => {
+    const locale = localization?.locale;
+    const translate = localization?.t;
+    const changeLocale = localization?.changeLocale;
+    const direction = localization?.direction;
+    const value = useMemo<UITheme>(
+        () => (theme ? createTheme(theme) : (defaultTheme as UITheme)),
+        [theme],
+    );
+    const modeValue = useMemo<UIModeContextValue>(
+        () => ({ mode: value.mode, changeMode: onModeChange }),
+        [onModeChange, value.mode],
+    );
+    const localizationValue = useMemo<UILocalizationAdapter | undefined>(
+        () =>
+            locale !== undefined && translate !== undefined
+                ? {
+                    locale,
+                    t: translate,
+                    changeLocale,
+                    direction,
+                }
+                : undefined,
+        [changeLocale, direction, locale, translate],
+    );
+
+    return (
+        <UIThemeContext.Provider value={value}>
+            <UIModeContext.Provider value={modeValue}>
+                <UILocalizationContext.Provider value={localizationValue}>
+                    {children}
+                </UILocalizationContext.Provider>
+            </UIModeContext.Provider>
+        </UIThemeContext.Provider>
+    );
+};
+
+export const useUITheme = (): UITheme => useContext(UIThemeContext);
+
+/** @deprecated Use UIProvider. */
+export const UIKitThemeProvider = UIProvider;
+
+/** @deprecated Use useUITheme. */
+export const useUIKitTheme = useUITheme;