@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/ProfileCard.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const useI18n_1 = require("../hooks/useI18n");
+const Avatar_1 = __importDefault(require("./Avatar"));
+const OxyContext_1 = require("../context/OxyContext");
+const hooks_1 = require("../hooks");
+const fonts_1 = require("../styles/fonts");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const ProfileCard = ({ user, theme, onEditPress, onClosePress, showCloseButton = false, }) => {
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme, colorScheme);
+    const { oxyServices } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const textColor = themeStyles.textColor;
+    const secondaryBackgroundColor = themeStyles.secondaryBackgroundColor;
+    const primaryColor = '#0066CC';
+    const avatarUrl = (0, hooks_1.useFileDownloadUrl)(oxyServices, user?.avatar, { variant: 'thumb' }).url || undefined;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.headerSection, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                styles.profileCard,
+                styles.firstGroupedItem,
+                styles.lastGroupedItem,
+                { backgroundColor: secondaryBackgroundColor }
+            ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.userProfile, children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { uri: user?.avatar ? avatarUrl : undefined, name: user?.name?.full || user?.username, size: 60, theme: theme }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.userInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.userName, { color: textColor }], children: user.username }), user.email && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.userEmail, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: user.email })), onEditPress && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.editProfileButton, onPress: onEditPress, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.editProfileText, { color: primaryColor }], children: t('editProfile.title') || 'Edit Profile' }) }))] })] }), showCloseButton && onClosePress && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: onClosePress, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close", size: 24, color: textColor }) }))] }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    headerSection: {
+        padding: 16,
+        paddingTop: 20,
+    },
+    profileCard: {
+        padding: 20,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    firstGroupedItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastGroupedItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    userProfile: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    userInfo: {
+        marginLeft: 16,
+        flex: 1,
+    },
+    userName: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        fontFamily: fonts_1.fontFamilies.interBold,
+        marginBottom: 4,
+    },
+    userEmail: {
+        fontSize: 14,
+        marginBottom: 8,
+    },
+    editProfileButton: {
+        alignSelf: 'flex-start',
+    },
+    editProfileText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    closeButton: {
+        padding: 8,
+    },
+});
+exports.default = ProfileCard;

package/src/ui/components/QuickActions.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+interface QuickAction {
+    id: string;
+    icon: string;
+    iconColor: string;
+    title: string;
+    onPress: () => void;
+}
+interface QuickActionsProps {
+    actions: QuickAction[];
+    theme: 'light' | 'dark';
+}
+declare const QuickActions: React.FC<QuickActionsProps>;
+export default QuickActions;

package/src/ui/components/QuickActions.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const QuickActions = ({ actions, theme }) => {
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme, colorScheme);
+    const textColor = themeStyles.textColor;
+    const secondaryBackgroundColor = themeStyles.secondaryBackgroundColor;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            styles.quickActionsContainer,
+            styles.firstGroupedItem,
+            styles.lastGroupedItem,
+            { backgroundColor: secondaryBackgroundColor }
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.quickActionsRow, children: actions.map((action) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.quickActionItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.quickActionCircle,
+                            { backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
+                        ], onPress: action.onPress, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: action.icon, size: 24, color: action.iconColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.quickActionText, { color: textColor }], children: action.title })] }, action.id))) }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    quickActionsContainer: {
+        padding: 16,
+        marginBottom: 8,
+    },
+    firstGroupedItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastGroupedItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    quickActionsRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-around',
+        flexWrap: 'wrap',
+    },
+    quickActionItem: {
+        alignItems: 'center',
+        minWidth: 70,
+        marginBottom: 8,
+    },
+    quickActionCircle: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 8,
+    },
+    quickActionText: {
+        fontSize: 12,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+});
+exports.default = QuickActions;

package/src/ui/components/Section.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface SectionProps {
+    title?: string;
+    theme?: 'light' | 'dark';
+    children: React.ReactNode;
+    isFirst?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Section: React.FC<SectionProps>;
+export default Section;

package/src/ui/components/Section.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const SectionTitle_1 = __importDefault(require("./SectionTitle"));
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const Section = ({ title, theme, children, isFirst = false, style }) => {
+    const colorScheme = (0, themeUtils_1.normalizeColorScheme)((0, useColorScheme_1.useColorScheme)(), theme);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.section, isFirst && styles.firstSection, style], children: [title && (0, jsx_runtime_1.jsx)(SectionTitle_1.default, { title: title, theme: colorScheme }), children] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    section: {
+        marginBottom: 10,
+        gap: 12,
+    },
+    firstSection: {
+        marginTop: 8,
+    },
+});
+exports.default = Section;

package/src/ui/components/SectionTitle.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { type StyleProp, type TextStyle } from 'react-native';
+interface SectionTitleProps {
+    title: string;
+    theme?: 'light' | 'dark';
+    style?: StyleProp<TextStyle>;
+}
+declare const SectionTitle: React.FC<SectionTitleProps>;
+export default SectionTitle;

package/src/ui/components/SectionTitle.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const fonts_1 = require("../styles/fonts");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const SectionTitle = ({ title, theme, style }) => {
+    const colorScheme = (0, themeUtils_1.normalizeColorScheme)((0, useColorScheme_1.useColorScheme)(), theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme || colorScheme, colorScheme);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: themeStyles.textColor }, style], children: title }));
+};
+const styles = react_native_1.StyleSheet.create({
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+    },
+});
+exports.default = SectionTitle;

package/src/ui/components/SettingRow.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface SettingRowProps {
+    title: string;
+    description?: string;
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    textColor?: string;
+    mutedTextColor?: string;
+    borderColor?: string;
+    /** Active color for the switch track (default: #d169e5) */
+    activeColor?: string;
+    /** Inactive color for the switch track (default: #767577) */
+    inactiveColor?: string;
+    /** Accessibility label for the switch */
+    accessibilityLabel?: string;
+}
+declare const _default: React.NamedExoticComponent<SettingRowProps>;
+export default _default;

package/src/ui/components/SettingRow.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * Reusable setting row component with switch
+ * Extracted from PrivacySettingsScreen for reuse across settings screens
+ */
+const SettingRow = ({ title, description, value, onValueChange, disabled = false, textColor, mutedTextColor, borderColor, activeColor = '#d169e5', inactiveColor = '#767577', accessibilityLabel, }) => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.settingRow, borderColor ? { borderBottomColor: borderColor } : undefined], accessibilityRole: "none", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.settingInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.settingTitle, textColor ? { color: textColor } : undefined], accessibilityRole: "text", children: title }), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.settingDescription, mutedTextColor ? { color: mutedTextColor } : undefined], accessibilityRole: "text", children: description }))] }), (0, jsx_runtime_1.jsx)(react_native_1.Switch, { value: value, onValueChange: onValueChange, disabled: disabled, trackColor: { false: inactiveColor, true: activeColor }, thumbColor: value ? '#fff' : '#f4f3f4', accessibilityRole: "switch", accessibilityLabel: accessibilityLabel || title, accessibilityState: { checked: value, disabled }, accessibilityHint: description })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    settingRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+    },
+    settingInfo: {
+        flex: 1,
+        marginRight: 16,
+    },
+    settingTitle: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 4,
+    },
+    settingDescription: {
+        fontSize: 14,
+        opacity: 0.7,
+    },
+});
+exports.default = react_1.default.memo(SettingRow);

package/src/ui/components/SignInModal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SignInModal - Full screen sign-in modal with QR code
+ *
+ * A semi-transparent full-screen modal that displays:
+ * - QR code for scanning with Oxy Accounts app
+ * - Button to open Oxy Auth popup
+ *
+ * Animates with fade-in effect.
+ */
+import type React from 'react';
+export declare const showSignInModal: () => void;
+export declare const hideSignInModal: () => void;
+export declare const isSignInModalVisible: () => boolean;
+/** Subscribe to modal visibility changes */
+export declare const subscribeToSignInModal: (listener: (visible: boolean) => void) => (() => void);
+declare const SignInModal: React.FC;
+export default SignInModal;