@oxyhq/services 0.1.18 → 5.1.8

package/src/index.ts

@@ -0,0 +1,57 @@
+/**
+ * OxyHQServices Main Export File
+ */
+
+// ------------- Core Imports -------------
+import OxyCore from './core';
+import { OxyServices } from './core';
+
+// ------------- UI Imports -------------
+import { 
+  // Context and Hooks
+  OxyProvider, 
+  OxyContextProvider, 
+  useOxy, 
+  
+  // Screens
+  SignInScreen, 
+  SignUpScreen, 
+  AccountCenterScreen,
+  
+  // Components
+  OxySignInButton,
+  OxyLogo,
+  Avatar,
+  FontLoader
+} from './ui';
+
+// ------------- Type Imports -------------
+import { OxyContextState, OxyContextProviderProps } from './ui/context/OxyContext';
+
+// ------------- Core Exports -------------
+export default OxyCore; // Default export for backward compatibility
+export { OxyServices };
+export * from './core';
+
+// ------------- UI Exports -------------
+export { 
+  // Context and Hooks
+  OxyProvider, 
+  OxyContextProvider, 
+  useOxy, 
+  
+  // Screens
+  SignInScreen, 
+  SignUpScreen,
+  AccountCenterScreen,
+  
+  // Components
+  OxySignInButton,
+  OxyLogo,
+  Avatar,
+  FontLoader
+};
+
+// ------------- Type Exports -------------
+export { OxyContextState, OxyContextProviderProps };
+export * from './ui/navigation/types';

package/src/models/interfaces.ts

@@ -0,0 +1,128 @@
+export interface OxyConfig {
+  baseURL: string;
+  // Add other config options as needed
+}
+
+export interface User {
+  id: string;
+  username: string;
+  email?: string;
+  avatarUrl?: string;
+  // Add other user fields as needed
+}
+
+export interface LoginResponse {
+  accessToken?: string;
+  refreshToken?: string;
+  token?: string; // For backwards compatibility
+  user: User;
+  message?: string;
+}
+
+export interface Notification {
+  id: string;
+  message: string;
+  // Add other notification fields as needed
+}
+
+export interface Wallet {
+  id: string;
+  balance: number;
+  // Add other wallet fields as needed
+}
+
+export interface Transaction {
+  id: string;
+  amount: number;
+  type: string;
+  timestamp: string;
+  // Add other transaction fields as needed
+}
+
+export interface TransferFundsRequest {
+  fromUserId: string;
+  toUserId: string;
+  amount: number;
+}
+
+export interface PurchaseRequest {
+  userId: string;
+  itemId: string;
+  amount: number;
+}
+
+export interface WithdrawalRequest {
+  userId: string;
+  amount: number;
+  address: string;
+}
+
+export interface TransactionResponse {
+  success: boolean;
+  transaction: Transaction;
+}
+
+export interface KarmaRule {
+  id: string;
+  description: string;
+  // Add other karma rule fields as needed
+}
+
+export interface KarmaHistory {
+  id: string;
+  userId: string;
+  points: number;
+  // Add other karma history fields as needed
+}
+
+export interface KarmaLeaderboardEntry {
+  userId: string;
+  total: number;
+}
+
+export interface KarmaAwardRequest {
+  userId: string;
+  points: number;
+  reason?: string;
+}
+
+export interface ApiError {
+  message: string;
+  code: string;
+  status: number;
+  details?: any;
+}
+
+export interface PaymentMethod {
+  id: string;
+  type: string;
+  // Add other payment method fields as needed
+}
+
+export interface PaymentRequest {
+  userId: string;
+  planId: string;
+  paymentMethodId: string;
+}
+
+export interface PaymentResponse {
+  transactionId: string;
+  status: string;
+}
+
+export interface AnalyticsData {
+  userId: string;
+  // Add other analytics fields as needed
+}
+
+export interface FollowerDetails {
+  userId: string;
+  followers: number;
+  // Add other follower details as needed
+}
+
+export interface ContentViewer {
+  userId: string;
+  viewedAt: string;
+  // Add other content viewer fields as needed
+}

package/src/ui/components/Avatar.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet, StyleProp, ViewStyle, ImageStyle, TextStyle, ActivityIndicator, Platform } from 'react-native';
+import { useThemeColors } from '../styles';
+import { fontFamilies } from '../styles/fonts';
+
+export interface AvatarProps {
+    /**
+     * URL of the avatar image
+     */
+    imageUrl?: string;
+
+    /**
+     * Text to display when no image is available
+     * Defaults to first letter of name if name is provided
+     */
+    text?: string;
+
+    /**
+     * Full name to derive the initials from (takes first letter)
+     */
+    name?: string;
+
+    /**
+     * Size of the avatar in pixels
+     * @default 40
+     */
+    size?: number;
+
+    /**
+     * Theme to use for colors
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+
+    /**
+     * Background color for text avatar
+     * Defaults to theme primary color
+     */
+    backgroundColor?: string;
+
+    /**
+     * Text color for text avatar
+     * @default '#FFFFFF'
+     */
+    textColor?: string;
+
+    /**
+     * Additional styles for the container
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /**
+     * Additional styles for the image
+     * Only used when imageUrl is provided
+     */
+    imageStyle?: StyleProp<ImageStyle>;
+
+    /**
+     * Additional styles for the text
+     */
+    textStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Is loading state
+     * @default false
+     */
+    isLoading?: boolean;
+}
+
+/**
+ * Avatar component that displays either an image or text avatar
+ * Falls back to displaying the first letter of the name if no image is provided
+ */
+const Avatar: React.FC<AvatarProps> = ({
+    imageUrl,
+    text,
+    name,
+    size = 40,
+    theme = 'light',
+    backgroundColor,
+    textColor = '#FFFFFF',
+    style,
+    imageStyle,
+    textStyle,
+    isLoading = false,
+}) => {
+    // Get theme colors
+    const colors = useThemeColors(theme);
+
+    // Use the primary color from theme as default background if not specified
+    const bgColor = backgroundColor || colors.primary;
+
+    // Calculate font size based on avatar size
+    const fontSize = Math.floor(size * 0.4);
+
+    // Determine what text to display for fallback
+    const displayText = text ||
+        (name ? name.charAt(0).toUpperCase() : '');
+
+    // Style for container based on size
+    const containerStyle = {
+        width: size,
+        height: size,
+        borderRadius: size / 2, // Make it circular
+    };
+
+    if (isLoading) {
+        return (
+            <View style={[styles.container, containerStyle, { backgroundColor: colors.inputBackground }, style]}>
+                <ActivityIndicator color={colors.primary} size={size > 50 ? 'large' : 'small'} />
+            </View>
+        );
+    }
+
+    // If an image URL is provided, use Image component
+    if (imageUrl) {
+        return (
+            <Image
+                source={{ uri: imageUrl }}
+                style={[styles.container, containerStyle, imageStyle]}
+            />
+        );
+    }
+
+    // Otherwise show text avatar
+    return (
+        <View style={[styles.container, containerStyle, { backgroundColor: bgColor }, style]}>
+            <Text style={[
+                styles.text,
+                {
+                    fontSize,
+                    fontFamily: fontFamilies.phuduBold,
+                },
+                { color: textColor },
+                textStyle
+            ]}>
+                {displayText}
+            </Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        // Font family is applied directly in the component to use the constants
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web
+    },
+});
+
+export default Avatar;

package/src/ui/components/FontLoader.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import { Text, View, ActivityIndicator, StyleSheet, Platform } from 'react-native';
+import * as Font from 'expo-font';
+
+/**
+ * Get the Phudu font sources for both native and web environments 
+ * This is specifically designed to work when distributed as an npm package
+ */
+const getPhuduFonts = () => {
+    try {
+        // For both development and when used as a package
+        // Load all static font weights
+        return {
+            'Phudu-Light': require('../../assets/fonts/Phudu/Phudu-Light.ttf'),
+            'Phudu-Regular': require('../../assets/fonts/Phudu/Phudu-Regular.ttf'),
+            'Phudu-Medium': require('../../assets/fonts/Phudu/Phudu-Medium.ttf'),
+            'Phudu-SemiBold': require('../../assets/fonts/Phudu/Phudu-SemiBold.ttf'),
+            'Phudu-Bold': require('../../assets/fonts/Phudu/Phudu-Bold.ttf'),
+            'Phudu-ExtraBold': require('../../assets/fonts/Phudu/Phudu-ExtraBold.ttf'),
+            'Phudu-Black': require('../../assets/fonts/Phudu/Phudu-Black.ttf'),
+        };
+    } catch (error) {
+        console.warn('Failed to load Phudu fonts:', error);
+        return null;
+    }
+};
+
+/**
+ * FontLoader component that loads custom fonts before rendering children
+ * This works in both the package development and when consumed as an npm package
+ */
+export const FontLoader = ({
+    children,
+    fallbackContent,
+}: {
+    children: React.ReactNode;
+    fallbackContent?: React.ReactNode;
+}) => {
+    const [fontState, setFontState] = useState<'loading' | 'loaded' | 'error'>('loading');
+
+    useEffect(() => {
+        const loadFonts = async () => {
+            try {
+                // Get all the font weights
+                const phuduFonts = getPhuduFonts();
+
+                if (!phuduFonts) {
+                    throw new Error('Phudu font files not found');
+                }
+
+                // Load all the static Phudu fonts with their respective weights
+                await Font.loadAsync(phuduFonts);
+
+                setFontState('loaded');
+            } catch (error) {
+                console.error('Error loading fonts:', error);
+                // Fallback to render without custom fonts
+                setFontState('error');
+            }
+        };
+
+        loadFonts();
+    }, []);
+
+    if (fontState === 'loading') {
+        // Render a loading placeholder while fonts are loading
+        if (fallbackContent) {
+            return <>{fallbackContent}</>;
+        }
+        return (
+            <View style={styles.loaderContainer}>
+                <ActivityIndicator size="small" color="#d169e5" />
+            </View>
+        );
+    }
+
+    if (fontState === 'error') {
+        console.warn('Fonts failed to load. Using system fonts instead.');
+    }
+
+    // Return children even on error - the app will use system fonts as fallback
+    return <>{children}</>;
+};
+
+/**
+ * Setup fonts for applications consuming this package
+ * This should be called by applications using your package
+ */
+export const setupFonts = async () => {
+    try {
+        const phuduFonts = getPhuduFonts();
+
+        if (!phuduFonts) {
+            throw new Error('Phudu font files not found');
+        }
+
+        if (Platform.OS === 'web') {
+            // For web platform, dynamically inject CSS to load the fonts
+            if (typeof document !== 'undefined') {
+                // Create a style element
+                const style = document.createElement('style');
+
+                // Define @font-face rules for each font weight
+                const fontFaceRules = `
+                    @font-face {
+                        font-family: 'Phudu';
+                        src: url(${phuduFonts['Phudu-Light']}) format('truetype');
+                        font-weight: 300;
+                        font-style: normal;
+                    }
+                    @font-face {
+                        font-family: 'Phudu';
+                        src: url(${phuduFonts['Phudu-Regular']}) format('truetype');
+                        font-weight: 400;
+                        font-style: normal;
+                    }
+                    @font-face {
+                        font-family: 'Phudu';
+                        src: url(${phuduFonts['Phudu-Medium']}) format('truetype');
+                        font-weight: 500;
+                        font-style: normal;
+                    }
+                    @font-face {
+                        font-family: 'Phudu';
+                        src: url(${phuduFonts['Phudu-SemiBold']}) format('truetype');
+                        font-weight: 600;
+                        font-style: normal;
+                    }
+                    @font-face {
+                        font-family: 'Phudu';
+                        src: url(${phuduFonts['Phudu-Bold']}) format('truetype');
+                        font-weight: 700;
+                        font-style: normal;
+                    }
+                    @font-face {
+                        font-family: 'Phudu';
+                        src: url(${phuduFonts['Phudu-ExtraBold']}) format('truetype');
+                        font-weight: 800;
+                        font-style: normal;
+                    }
+                    @font-face {
+                        font-family: 'Phudu';
+                        src: url(${phuduFonts['Phudu-Black']}) format('truetype');
+                        font-weight: 900;
+                        font-style: normal;
+                    }
+                `;
+
+                style.textContent = fontFaceRules;
+                // Append to the document head
+                document.head.appendChild(style);
+                console.info('All Phudu web fonts have been dynamically loaded');
+            }
+        } else {
+            // For native platforms, guidance for the package users
+            console.info('Fonts should be linked in native projects to use Phudu fonts');
+
+            // Attempt to load the fonts anyway (this works if the consumer has linked the assets)
+            await Font.loadAsync(phuduFonts);
+        }
+
+        return true;
+    } catch (error: any) {
+        console.warn('Error setting up fonts:', error?.message || error);
+        return false;
+    }
+};
+
+const styles = StyleSheet.create({
+    loaderContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+    },
+});

package/src/ui/components/OxyLogo.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Svg, { Circle, Path } from 'react-native-svg';
+import { ViewStyle } from 'react-native';
+import { useThemeColors } from '../styles/theme';
+
+interface OxyLogoProps {
+    width?: number;
+    height?: number;
+    style?: ViewStyle;
+    /**
+     * Primary fill color for the logo
+     * If not provided, the theme's primary color will be used
+     */
+    fillColor?: string;
+    /**
+     * Secondary fill color for the inner glow effect
+     * If not provided, a lighter shade of the fillColor will be used
+     */
+    secondaryFillColor?: string;
+    /**
+     * Theme to use for the logo colors
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+}
+
+/**
+ * SVG logo component for Oxy
+ * This component renders the Oxy logo as an SVG and uses theme colors by default
+ */
+export const OxyLogo: React.FC<OxyLogoProps> = ({
+    width = 24,
+    height = 24,
+    style,
+    fillColor,
+    secondaryFillColor,
+    theme = 'light'
+}) => {
+    // Get colors from theme
+    const themeColors = useThemeColors(theme);
+
+    // Use theme primary color if no fillColor is provided
+    const primaryColor = fillColor || themeColors.primary;
+
+    const innerFillColor = secondaryFillColor || themeColors.background;
+
+    return (
+        <Svg width={width} height={height} viewBox="0 0 294.84 174.42" style={style}>
+            <Path
+                d="M241.03 24.83c-3.42-9.32-9.47-19.01-19.05-22.86-6.33-2.55-13.1-2.6-19.49-.26-.52.19-2.22 1.12-2.54 1.12-.22 0-3.3-1.39-4.05-1.61-15.97-4.57-30.37 9.5-39.44 20.8-1.15 1.43-2.29 2.92-3.27 4.48-.35.28-.56-.8-.69-1.06C146.04 12.12 135.23-.4 118.95 1 106.2 2.09 97.86 12.26 96.36 24.5 89.8 16.6 81.31 9.75 71.2 7.08c-15.67-4.13-33.09-.39-45.34 10.17C-3.79 42.81-5.21 97.16 7.9 131.37c9.4 24.5 28.9 43.2 56.85 40.1 11.33-1.25 21.77-5.76 29.87-13.81.13-.03 1.58 1.62 1.9 1.91 2.63 2.38 5.97 4.23 9.43 5.07 17.29 4.17 30.59-11.83 39.99-23.82.21-.05.29.13.41.26 1.22 1.26 2.48 3.38 3.67 4.83 4.4 5.34 10.34 11.44 16.49 14.67 6.58 3.46 14.76 4.48 21.74 1.59 6.43 11.54 20.66 15.21 32.49 9.8 15.49-7.08 28.86-30.53 36.97-45.03 9.26-16.56 18.94-34.11 26.22-51.62 7.51-18.09 19.12-51.35 2.09-67.08-13.19-12.18-31.47-2.47-40.24 9.94l-4.77 6.65z"
+                fill={primaryColor}
+            />
+            <Path
+                d="M241.03 24.83l4.77-6.65c8.77-12.41 27.04-22.12 40.24-9.94 17.03 15.73 5.42 48.99-2.09 67.08-7.27 17.51-16.96 35.06-26.22 51.62-8.11 14.5-21.48 37.95-36.97 45.03-11.83 5.41-26.07 1.74-32.49-9.8-6.98 2.89-15.16 1.87-21.74-1.59-6.15-3.23-12.09-9.34-16.49-14.67-1.19-1.45-2.46-3.56-3.67-4.83-.12-.13-.2-.3-.41-.26-9.4 11.99-22.7 28-39.99 23.82-3.46-.84-6.8-2.69-9.43-5.07-.32-.29-1.77-1.94-1.9-1.91-8.1 8.04-18.53 12.55-29.87 13.81-27.95 3.09-47.46-15.6-56.85-40.1C-5.21 97.16-3.79 42.81 25.86 17.24 38.11 6.68 55.52 2.94 71.2 7.07c10.11 2.67 18.6 9.52 25.16 17.42 1.5-12.24 9.84-22.4 22.59-23.5 16.29-1.4 27.1 11.12 33.56 24.44.13.26.34 1.34.69 1.06.98-1.56 2.12-3.05 3.27-4.48 9.07-11.31 23.46-25.37 39.44-20.8.75.22 3.83 1.61 4.05 1.61.32 0 2.02-.93 2.54-1.12 6.4-2.33 13.16-2.28 19.49.26 9.58 3.85 15.64 13.54 19.05 22.86zm-6.67 48c-.88-9.38-1.79-18.77-3.55-28.03s-6.28-28.62-17.53-29.63-15.8 12.97-16.25 22.08c-.74 15.27 4.07 34.76 8.66 49.33 1.38 4.37 3 10.74 6.08 14.08 2.11 2.28 5.31 4.24 8.25 5.17-7.02 9.48-14.5 19.44-18.34 30.74-2.02 5.96-3.84 17.45 2.68 21.32 9.11 5.41 18.68-5.84 23.72-12.25 5.64-7.18 10.62-15.76 15.13-23.7 7.64-13.46 15.57-27.88 22.11-41.89 6.55-14.02 15.36-34.93 14.36-50.48-.25-3.85-2.02-10.44-6.3-11.53-8.54-2.18-17.65 11.65-21.44 17.8-7.07 11.49-12.42 24.19-17.22 36.77l-.37.21zm-83.67-14.84c-.11.08-.3-.27-.36-.38-.89-1.66-1.61-4.13-2.39-5.94-3.05-7.11-6.55-15.22-10.16-22.01s-11.12-16.46-20.3-12.96-6.07 17.71-4.28 24.7c3.59 13.98 9.21 27.75 14.81 41.02-5.93 11.33-11.94 22.65-17.47 34.19-3.8 7.92-10.58 22.31-4.93 30.54 6.13 8.92 18.44-3.44 22.73-8.57l19.09-23.41.39.27c6.19 10.08 12.58 21.57 21.85 29.14 6.31 5.16 15.72 6.95 17.45-3.38 1.09-6.53-3.31-16.75-5.87-22.86-4.2-10-9.25-19.64-14.62-29.05l-.13-.52c1.51-2.98 3.38-5.75 5.03-8.65 4-7.06 7.7-14.28 11.61-21.39 4.97-9.05 14.77-23.79 13.86-34.3-.31-3.61-2.31-8.51-6.42-8.92-8.41-.84-18.76 11.28-23.48 17.35-6.12 7.86-11.53 16.49-16.43 25.15zM55 20.71c-28.18 1.93-38.49 35.65-39.8 59.2-1.68 30.16 10.02 82.97 50.53 76.2 32.13-5.37 37.37-46.47 34.97-72.86S88.19 18.44 55 20.71zm140.7 93.28c.31.07.32-.1.47-.28 1-1.16 1.69-3.21 2.78-4.4l.06-.37c-3.26-4.14-4.87-9.22-6.52-14.16-1.44-4.32-2.5-8.78-3.91-13.09-.07-.2-.12-.7-.38-.7-1.27 2.82-3.17 5.34-4.31 8.21 4.29 8.08 8.46 16.26 11.81 24.79z"
+                fill={primaryColor}
+            />
+            <Path
+                d="M55 20.71c33.19-2.27 43.33 36.41 45.7 62.54s-2.84 67.49-34.97 72.86c-40.5 6.77-52.21-46.03-50.53-76.2 1.31-23.56 11.62-57.27 39.8-59.2zm.99 38.66c-4.57.62-7.12 6.56-8.21 10.46-3.47 12.39-1.15 36.95 5.85 47.99 4 6.3 10.59 7.71 14.1.13 5.48-11.82 4.06-35.72-.36-47.87-1.84-5.06-5-11.57-11.38-10.7zM150.69 57.99c4.9-8.66 10.31-17.29 16.43-25.15 4.73-6.07 15.07-18.19 23.48-17.35 4.11.41 6.1 5.31 6.42 8.92.91 10.52-8.89 25.26-13.86 34.3-3.9 7.11-7.61 14.33-11.61 21.39-1.64 2.9-3.52 5.67-5.03 8.65l.13.52c5.37 9.41 10.42 19.05 14.62 29.05 2.57 6.11 6.97 16.33 5.87 22.86-1.73 10.33-11.14 8.54-17.45 3.38-9.27-7.57-15.67-19.07-21.85-29.14l-.39-.27-19.09 23.41c-4.29 5.13-16.6 17.49-22.73 8.57-5.66-8.23 1.13-22.63 4.93-30.54 5.53-11.54 11.54-22.86 17.47-34.19-5.61-13.27-11.22-27.03-14.81-41.02-1.8-6.99-4.69-21.27 4.28-24.7s16.55 5.88 20.3 12.96 7.11 14.9 10.16 22.01c.78 1.81 1.5 4.29 2.39 5.94.06.11.25.46.36.38zM234.36 72.83l.37-.21c4.8-12.59 10.15-25.29 17.22-36.77 3.79-6.16 12.9-19.98 21.44-17.8 4.28 1.09 6.06 7.68 6.3 11.53.99 15.56-7.82 36.47-14.36 50.48-6.54 14.01-14.47 28.42-22.11 41.89-4.51 7.95-9.49 16.53-15.13 23.7-5.03 6.41-14.61 17.66-23.72 12.25-6.52-3.87-4.71-15.36-2.68-21.32 3.84-11.31 11.32-21.27 18.34-30.74-2.94-.93-6.15-2.89-8.25-5.17-3.09-3.34-4.71-9.71-6.08-14.08-4.59-14.57-9.4-34.06-8.66-49.33.44-9.11 4.77-23.11 16.25-22.08s15.83 20.68 17.53 29.63 2.67 18.65 3.55 28.03z"
+                fill={innerFillColor}
+            />
+            <Path
+                d="M195.7 113.99c-3.35-8.52-7.52-16.71-11.81-24.79 1.14-2.87 3.04-5.39 4.31-8.21.25 0 .31.5.38.7 1.41 4.31 2.47 8.77 3.91 13.09 1.65 4.94 3.26 10.02 6.52 14.16l-.06.37c-1.09 1.19-1.78 3.24-2.78 4.4-.15.17-.16.35-.47.28z"
+                fill={primaryColor}
+            />
+            <Path
+                d="M55.99 59.37c6.38-.87 9.53 5.65 11.38 10.7 4.42 12.14 5.84 36.05.36 47.87-3.51 7.58-10.1 6.17-14.1-.13-7-11.03-9.32-35.6-5.85-47.99 1.09-3.9 3.64-9.84 8.21-10.46z"
+                fill={primaryColor}
+            />
+        </Svg>
+    );
+};
+
+export default OxyLogo;