@oxyhq/services 22.8.7 → 22.10.0

package/src/ui/components/Header.tsx

@@ -1,224 +0,0 @@
-import type React from 'react';
-import { useMemo } from 'react';
-import {
-    View,
-    TouchableOpacity,
-    StyleSheet,
-    Platform,
-    ActivityIndicator,
-} from 'react-native';
-import AnimatedReanimated, { useAnimatedStyle, interpolate, Extrapolation, type SharedValue } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Ionicons } from '@expo/vector-icons';
-import { useTheme } from '@oxyhq/bloom/theme';
-import { PressableScale } from '@oxyhq/bloom/pressable-scale';
-import { H4, Text } from '@oxyhq/bloom/typography';
-
-type ThemeColors = ReturnType<typeof useTheme>['colors'];
-
-export interface HeaderAction {
-    /** Ionicons name — rendered as a circular icon button when no `text` is set. */
-    icon?: string;
-    /** Label — rendered as a filled pill button (takes precedence over `icon`). */
-    text?: string;
-    onPress: () => void;
-    loading?: boolean;
-    disabled?: boolean;
-    /** Stable identity for lists; falls back to the array index. */
-    key?: string;
-}
-
-export interface HeaderProps {
-    title: string;
-    subtitle?: string;
-    onBack?: () => void;
-    onClose?: () => void;
-    /** Trailing action buttons, rendered left-to-right before the close button. */
-    actions?: HeaderAction[];
-    showBackButton?: boolean;
-    showCloseButton?: boolean;
-    variant?: 'default' | 'minimal';
-    elevation?: 'none' | 'subtle' | 'prominent';
-    subtitleVariant?: 'default' | 'small' | 'large' | 'muted';
-    titleAlignment?: 'left' | 'center' | 'right';
-    /** Shared scroll offset — enables sticky translate-up behavior on native. */
-    scrollY?: SharedValue<number>;
-}
-
-export const getHeaderHeight = (variant: HeaderProps['variant'] = 'default', safeAreaTop = 0): number => {
-    const paddingTop = Platform.OS === 'ios' ? Math.max(safeAreaTop, 50) : 16;
-    const paddingBottom = 12;
-    const contentHeight = variant === 'minimal' ? 36 : 40;
-    return paddingTop + contentHeight + paddingBottom;
-};
-
-const HeaderActionButton: React.FC<{ action: HeaderAction; colors: ThemeColors }> = ({ action, colors }) => {
-    const isText = !!action.text;
-    return (
-        <PressableScale
-            onPress={action.onPress}
-            disabled={action.disabled || action.loading}
-            style={[
-                styles.actionButton,
-                isText ? styles.textActionButton : styles.iconActionButton,
-                { backgroundColor: isText ? colors.tint : colors.card, opacity: action.disabled ? 0.5 : 1 },
-            ]}
-        >
-            {action.loading ? (
-                <ActivityIndicator size="small" color={isText ? colors.card : colors.tint} />
-            ) : isText ? (
-                <Text style={[styles.actionText, { color: colors.card }]}>{action.text}</Text>
-            ) : (
-                <Ionicons name={action.icon as React.ComponentProps<typeof Ionicons>['name']} size={18} color={colors.tint} />
-            )}
-        </PressableScale>
-    );
-};
-
-const Header: React.FC<HeaderProps> = ({
-    title,
-    subtitle,
-    onBack,
-    onClose,
-    actions,
-    showBackButton = true,
-    showCloseButton = false,
-    variant = 'default',
-    elevation = 'subtle',
-    subtitleVariant = 'default',
-    titleAlignment = 'left',
-    scrollY,
-}) => {
-    const { colors, mode } = useTheme();
-    const insets = useSafeAreaInsets();
-    const headerHeight = getHeaderHeight(variant, insets.top);
-    const isDark = mode === 'dark';
-
-    // Sticky behavior on native: header translates up as content scrolls, clamped
-    // so it never leaves the viewport. No-op on web (uses CSS `position: sticky`).
-    const animatedHeaderStyle = useAnimatedStyle(() => {
-        if (Platform.OS === 'web' || !scrollY) return {};
-        const translateY = interpolate(scrollY.value, [0, headerHeight], [0, -headerHeight], Extrapolation.CLAMP);
-        return { transform: [{ translateY }] };
-    }, [scrollY, headerHeight]);
-
-    const elevationStyle = useMemo(() => {
-        switch (elevation) {
-            case 'subtle':
-                return Platform.select({
-                    web: { boxShadow: isDark ? '0 1px 3px rgba(0,0,0,0.3)' : '0 1px 3px rgba(0,0,0,0.1)' },
-                    default: { shadowColor: '#000000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: isDark ? 0.3 : 0.1, shadowRadius: 3, elevation: 2 },
-                });
-            case 'prominent':
-                return Platform.select({
-                    web: { boxShadow: isDark ? '0 4px 12px rgba(0,0,0,0.4)' : '0 4px 12px rgba(0,0,0,0.15)' },
-                    default: { shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: isDark ? 0.4 : 0.15, shadowRadius: 12, elevation: 8 },
-                });
-            default:
-                return {};
-        }
-    }, [elevation, isDark]);
-
-    const containerStyle = useMemo(() => [
-        styles.container,
-        { paddingTop: Platform.OS === 'ios' ? Math.max(insets.top, 50) : 16 },
-        // Header inside a ScrollView (scrollY provided) must not be absolutely positioned.
-        !scrollY && Platform.OS !== 'web' ? styles.absolute : null,
-        { borderBottomWidth: elevation === 'none' ? 0 : 1 },
-        elevationStyle,
-    ], [insets.top, elevation, elevationStyle, scrollY]);
-
-    const titleAlign = titleAlignment === 'center' ? styles.alignCenter
-        : titleAlignment === 'right' ? styles.alignRight
-            : styles.alignLeft;
-
-    const HeaderContainer = Platform.OS === 'web' || !scrollY ? View : AnimatedReanimated.View;
-    const headerStyle = Platform.OS !== 'web' && scrollY !== undefined ? [containerStyle, animatedHeaderStyle] : containerStyle;
-
-    return (
-        <HeaderContainer className="bg-bg border-border" style={headerStyle}>
-            <View style={[styles.content, variant === 'minimal' && styles.contentMinimal]}>
-                {showBackButton && onBack ? (
-                    <TouchableOpacity className="bg-card" style={styles.circleButton} onPress={onBack} activeOpacity={0.7}>
-                        <Ionicons name="chevron-back" size={18} color={colors.tint} />
-                    </TouchableOpacity>
-                ) : null}
-
-                <View style={[styles.titleContainer, titleAlign, variant === 'minimal' && styles.titleContainerMinimal]}>
-                    <H4 className="text-text" style={variant === 'minimal' ? styles.titleMinimal : styles.titleDefault} numberOfLines={1}>
-                        {title}
-                    </H4>
-                    {subtitle ? (
-                        <Text className="text-text-secondary" style={subtitleStyles[subtitleVariant]} numberOfLines={1}>
-                            {subtitle}
-                        </Text>
-                    ) : null}
-                </View>
-
-                {actions?.length ? (
-                    <View style={styles.actionsRow}>
-                        {actions.map((action, idx) => (
-                            <HeaderActionButton key={action.key ?? idx} action={action} colors={colors} />
-                        ))}
-                    </View>
-                ) : null}
-
-                {showCloseButton && onClose ? (
-                    <TouchableOpacity className="bg-card" style={[styles.circleButton, styles.closeButton]} onPress={onClose} activeOpacity={0.7}>
-                        <Ionicons name="close" size={18} color={colors.text} />
-                    </TouchableOpacity>
-                ) : null}
-            </View>
-        </HeaderContainer>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        paddingBottom: 12,
-        zIndex: 1000,
-        ...Platform.select({
-            web: { position: 'sticky' as 'relative', top: 0, left: 0, right: 0 },
-            default: {},
-        }),
-    },
-    absolute: { position: 'absolute', top: 0, left: 0, right: 0 },
-    content: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        position: 'relative',
-        minHeight: 40,
-    },
-    contentMinimal: { paddingHorizontal: 12, minHeight: 36 },
-    circleButton: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: 10,
-    },
-    closeButton: { marginRight: 0, marginLeft: 10 },
-    titleContainer: { flex: 1, justifyContent: 'center' },
-    alignLeft: { alignItems: 'flex-start' },
-    alignCenter: { alignItems: 'center' },
-    alignRight: { alignItems: 'flex-end' },
-    titleContainerMinimal: { alignItems: 'center', marginHorizontal: 16 },
-    titleDefault: { fontSize: 18, fontWeight: '700', letterSpacing: -0.5, lineHeight: 22 },
-    titleMinimal: { fontSize: 16, fontWeight: '600', letterSpacing: -0.3, lineHeight: 20 },
-    actionsRow: { flexDirection: 'row', alignItems: 'center' },
-    actionButton: { alignItems: 'center', justifyContent: 'center', marginLeft: 10 },
-    iconActionButton: { width: 32, height: 32, borderRadius: 16 },
-    textActionButton: { paddingHorizontal: 14, paddingVertical: 6, borderRadius: 18, minWidth: 56 },
-    actionText: { fontSize: 14, fontWeight: '600', letterSpacing: -0.2 },
-});
-
-const subtitleStyles = StyleSheet.create({
-    default: { fontSize: 14, fontWeight: '400', lineHeight: 17, marginTop: 1 },
-    small: { fontSize: 12, fontWeight: '400', lineHeight: 14 },
-    large: { fontSize: 16, fontWeight: '400', lineHeight: 19, marginTop: 3 },
-    muted: { fontSize: 14, fontWeight: '400', lineHeight: 17, marginTop: 1, opacity: 0.7 },
-});
-
-export default Header;

package/src/ui/components/OxyAccountDialog.tsx

@@ -1,243 +0,0 @@
-/**
- * OxyAccountDialog — the ONE unified account dialog for `@oxyhq/services`.
- *
- * Bloom `<Dialog>` chrome (header, back button, placement, scroll body) around
- * the headless chooser logic, which lives in `OxyAuthChooser` — the account
- * switcher, sign-in, sign-up, and QR views are ALL there, extracted so the
- * same chooser can be mounted bare by a future host with no Dialog chrome
- * (e.g. an auth.oxy.so hub page driving the cross-origin passkey popup, b2).
- * This file owns ONLY the chrome: the title/subtitle per view, the back
- * button, and the Bloom `<Dialog>` surface itself.
- *
- * The surface is Bloom's `<Dialog>` (`@oxyhq/bloom/dialog`) with a responsive
- * `placement` — a bottom sheet on narrow viewports, a centered card on wide ones.
- * It REPLACES the hand-rolled RN `<Modal>` + `<GestureHandlerRootView>` + manual
- * backdrop/card wrapper this component used before. That RN `<Modal>` is invisible
- * under React StrictMode on web: react-native-web's `ModalPortal` appends its host
- * node during render but removes it in an effect cleanup and never re-attaches, so
- * the dialog never paints in a dev Vite build. Bloom's `<Dialog>` renders through
- * its own Portal and has no such lifecycle hazard.
- *
- * Open/close is CONTROLLED by `isAccountDialogOpen` (the `open` prop); the Dialog
- * stays mounted whenever the controller exists so it can animate its own close.
- * Backdrop / swipe-to-dismiss is disabled (`dismissOnBackdrop={false}`) on purpose:
- * Bloom's controlled `bottom` placement does not fire `onClose` on a gesture or
- * backdrop dismissal, so allowing it would desync `isAccountDialogOpen` from the
- * sheet and block reopening. The header close button (and `OxyAuthChooser`'s
- * `onComplete`) drive `closeAccountDialog`, which flips `open` and runs the exit
- * animation.
- */
-
-import type React from 'react';
-import { useCallback, useSyncExternalStore } from 'react';
-import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Dialog } from '@oxyhq/bloom/dialog';
-import { Text } from '@oxyhq/bloom/typography';
-import { useTheme } from '@oxyhq/bloom/theme';
-import type { AccountDialogSnapshot } from '@oxyhq/core';
-import { useOxy } from '../context/OxyContext';
-import { useI18n } from '../hooks/useI18n';
-import OxyAuthChooser from './OxyAuthChooser';
-import { LogoIcon } from './logo/LogoIcon';
-
-type Theme = ReturnType<typeof useTheme>;
-type Translate = ReturnType<typeof useI18n>['t'];
-
-/**
- * The unified account dialog. Mounted once by `OxyProvider`; opened imperatively
- * via `useOxy().openAccountDialog(view?)` or imperative `openAccountDialog('signin')`.
- */
-const OxyAccountDialog: React.FC = () => {
-  const { accountDialogController: controller, isAccountDialogOpen, closeAccountDialog } = useOxy();
-  const theme = useTheme();
-  const { t } = useI18n();
-
-  // A lightweight, header-only binding to the same controller `OxyAuthChooser`
-  // binds independently — cheap, and the established pattern here (
-  // `useSwitchableAccounts` also binds to this controller on its own).
-  const subscribe = useCallback(
-    (listener: () => void) => (controller ? controller.subscribe(listener) : () => undefined),
-    [controller],
-  );
-  const getSnapshot = useCallback(
-    () => (controller ? controller.getSnapshot() : EMPTY_SNAPSHOT),
-    [controller],
-  );
-  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-
-  if (!controller) {
-    return null;
-  }
-
-  const { view } = snapshot;
-  const showBack =
-    view === 'qr' || view === 'signup' || (view === 'add' && snapshot.accounts.length > 0);
-
-  return (
-    <Dialog
-      open={isAccountDialogOpen}
-      onClose={closeAccountDialog}
-      placement={{ base: 'bottom', md: 'center' }}
-      dismissOnBackdrop={false}
-      maxWidth={420}
-      label={headerCopy(view, snapshot.accounts.length, t).title}
-    >
-      <DialogHeader
-        snapshot={snapshot}
-        theme={theme}
-        t={t}
-        showBack={showBack}
-        onBack={() => controller.setView('accounts')}
-        onClose={closeAccountDialog}
-      />
-      <ScrollView style={styles.body} contentContainerStyle={styles.bodyContent} showsVerticalScrollIndicator={false}>
-        <OxyAuthChooser onComplete={closeAccountDialog} />
-      </ScrollView>
-    </Dialog>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
-
-interface HeaderProps {
-  snapshot: AccountDialogSnapshot;
-  theme: Theme;
-  t: Translate;
-  showBack: boolean;
-  onBack: () => void;
-  onClose: () => void;
-}
-
-const DialogHeader: React.FC<HeaderProps> = ({ snapshot, theme, t, showBack, onBack, onClose }) => {
-  const { title, subtitle } = headerCopy(snapshot.view, snapshot.accounts.length, t);
-  return (
-    <View style={styles.header}>
-      <View style={styles.headerBar}>
-        {showBack ? (
-          <Pressable
-            onPress={onBack}
-            style={[styles.iconButton, { backgroundColor: theme.colors.backgroundSecondary }]}
-            accessibilityRole="button"
-            accessibilityLabel={t('common.actions.back') || 'Back'}
-          >
-            <MaterialCommunityIcons name="chevron-left" size={22} color={theme.colors.textSecondary} />
-          </Pressable>
-        ) : (
-          <View style={styles.iconButton} />
-        )}
-        <LogoIcon height={34} color={theme.colors.primary} />
-        <Pressable
-          onPress={onClose}
-          style={[styles.iconButton, { backgroundColor: theme.colors.backgroundSecondary }]}
-          accessibilityRole="button"
-          accessibilityLabel={t('common.actions.close') || 'Close'}
-        >
-          <MaterialCommunityIcons name="close" size={20} color={theme.colors.textSecondary} />
-        </Pressable>
-      </View>
-      <Text style={[styles.title, { color: theme.colors.text }]} numberOfLines={1}>
-        {title}
-      </Text>
-      {subtitle ? (
-        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]} numberOfLines={2}>
-          {subtitle}
-        </Text>
-      ) : null}
-    </View>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Copy + helpers
-// ---------------------------------------------------------------------------
-
-function headerCopy(
-  view: AccountDialogSnapshot['view'],
-  accountCount: number,
-  t: Translate,
-): { title: string; subtitle: string | null } {
-  switch (view) {
-    case 'accounts':
-      return {
-        title: t('accountSwitcher.sections.yourAccounts') || 'Your accounts',
-        subtitle: t('signin.chooser.subtitle') || 'Choose which account to continue with.',
-      };
-    case 'qr':
-      return {
-        title: t('accountSwitcher.scanTitle') || 'Sign in with Oxy',
-        subtitle: t('accountSwitcher.scanSubtitle') || 'Scan with Commons on your phone.',
-      };
-    case 'signup':
-      return {
-        title: t('signup.title') || 'Create your account',
-        subtitle: t('signup.subtitle') || 'One identity for the whole ecosystem.',
-      };
-    default:
-      return accountCount > 0
-        ? {
-            title: t('signin.addAccountTitle') || 'Add another account',
-            subtitle: t('signin.addAccountSubtitle') || 'Sign in with another account.',
-          }
-        : {
-            title: t('signin.title') || 'Sign in',
-            subtitle: t('signin.subtitle') || 'One identity for the whole ecosystem.',
-          };
-  }
-}
-
-const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
-  view: 'accounts',
-  accounts: [],
-  activeAccountId: null,
-  loading: false,
-  error: null,
-  switchingAccountId: null,
-  signIn: { phase: 'idle', authorizeCode: null, qrPayload: null, expiresAt: null, error: null },
-  commonsAvailability: 'unknown',
-};
-
-const styles = StyleSheet.create({
-  header: {
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  headerBar: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 8,
-  },
-  iconButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: '800',
-    letterSpacing: -0.4,
-    textAlign: 'center',
-    marginTop: 6,
-  },
-  subtitle: {
-    fontSize: 14,
-    lineHeight: 19,
-    textAlign: 'center',
-    marginTop: 4,
-  },
-  body: {
-    width: '100%',
-  },
-  bodyContent: {
-    paddingTop: 4,
-    paddingBottom: 4,
-  },
-});
-
-export default OxyAccountDialog;

package/src/ui/navigation/__tests__/getSheetConfig.test.ts

@@ -1,36 +0,0 @@
-import { getSheetConfig } from '../routes';
-
-/**
- * `getSheetConfig` drives which surface `BottomSheetRouter` mounts a route in.
- * The flagship image picker (FileManagement in image-only select mode) resolves
- * to `presentation: 'dialog'`; every other route stays `'sheet'`. These guard
- * the routing contract so the ~28 sheet screens keep the in-tree BottomSheet.
- */
-describe('getSheetConfig presentation', () => {
-    const imageOnlyPickerProps = {
-        selectMode: true,
-        disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
-    };
-
-    it('defaults every route to the in-tree sheet', () => {
-        expect(getSheetConfig('ManageAccount', {}).presentation).toBe('sheet');
-        expect(getSheetConfig('AvatarCrop', {}).presentation).toBe('sheet');
-        expect(getSheetConfig(null, {}).presentation).toBe('sheet');
-    });
-
-    it('routes the FileManagement image-only picker to the Dialog', () => {
-        expect(getSheetConfig('FileManagement', imageOnlyPickerProps).presentation).toBe('dialog');
-    });
-
-    it('keeps FileManagement on the sheet when it is not an image-only picker', () => {
-        // Browse mode (no selectMode) — the standard file manager.
-        expect(getSheetConfig('FileManagement', {}).presentation).toBe('sheet');
-        // Select mode that still allows non-image types is not the flagship picker.
-        expect(
-            getSheetConfig('FileManagement', {
-                selectMode: true,
-                disabledMimeTypes: ['video/'],
-            }).presentation,
-        ).toBe('sheet');
-    });
-});