@oxyhq/services 6.9.4 → 6.9.6

package/lib/typescript/module/ui/components/WebOxyProvider.d.ts

@@ -1,52 +0,0 @@
-/**
- * WebOxyProvider - Lightweight provider for pure React/Next.js apps
- *
- * Use this provider for web apps that DON'T use Expo/React Native.
- * For Expo apps (native + web), use `OxyProvider` instead - it works on all platforms.
- *
- * Features:
- * - Automatic cross-domain SSO via FedCM (Chrome 108+, Safari 16.4+, Edge 108+)
- * - No React Native dependencies
- * - Session management
- * - All useOxy/useAuth functionality
- *
- * Usage:
- * ```tsx
- * // For pure React/Next.js apps (no Expo):
- * import { WebOxyProvider, useAuth } from '@oxyhq/services';
- *
- * function App() {
- *   return (
- *     <WebOxyProvider baseURL="https://api.oxy.so">
- *       <YourApp />
- *     </WebOxyProvider>
- *   );
- * }
- *
- * // For Expo apps (native + web), use OxyProvider instead:
- * import { OxyProvider, useAuth } from '@oxyhq/services';
- * ```
- */
-import { type FC, type ReactNode } from 'react';
-import { createQueryClient } from '../hooks/queryClient';
-export interface WebOxyProviderProps {
-    children: ReactNode;
-    baseURL: string;
-    authWebUrl?: string;
-    onAuthStateChange?: (user: any) => void;
-    storageKeyPrefix?: string;
-    queryClient?: ReturnType<typeof createQueryClient>;
-}
-/**
- * OxyProvider for web applications
- *
- * Features:
- * - Automatic cross-domain SSO via FedCM (browser-native identity API)
- * - Works across different TLDs (alia.onl, mention.earth, homiio.com, etc.)
- * - Session persistence in localStorage
- * - TanStack Query for data fetching
- * - No React Native dependencies
- */
-declare const WebOxyProvider: FC<WebOxyProviderProps>;
-export default WebOxyProvider;
-//# sourceMappingURL=WebOxyProvider.d.ts.map

package/lib/typescript/module/ui/components/WebOxyProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WebOxyProvider.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/WebOxyProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAA+B,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;CACpD;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA2D3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/src/ui/components/AnimationExample.tsx

@@ -1,195 +0,0 @@
-import type React from 'react';
-import { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withSpring,
-  withSequence,
-  withDelay,
-  interpolateColor,
-  runOnJS,
-  Easing,
-} from 'react-native-reanimated';
-
-// Example component showcasing improved Reanimated usage
-const AnimationExample: React.FC = () => {
-  const [currentStep, setCurrentStep] = useState(0);
-
-  // Shared values for better performance
-  const opacity = useSharedValue(1);
-  const scale = useSharedValue(1);
-  const translateX = useSharedValue(0);
-  const rotation = useSharedValue(0);
-  const progress = useSharedValue(0);
-  const colorProgress = useSharedValue(0);
-
-  // Animated styles with proper interpolation
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: opacity.value,
-      transform: [
-        { scale: scale.value },
-        { translateX: translateX.value },
-        { rotate: `${rotation.value}deg` },
-      ],
-    };
-  });
-
-  const progressStyle = useAnimatedStyle(() => {
-    return {
-      width: `${progress.value * 100}%`,
-      backgroundColor: interpolateColor(
-        colorProgress.value,
-        [0, 1],
-        ['#3498db', '#e74c3c']
-      ),
-    };
-  });
-
-  const backgroundStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: interpolateColor(
-        colorProgress.value,
-        [0, 1],
-        ['#ecf0f1', '#f39c12']
-      ),
-    };
-  });
-
-  // Complex animation sequence
-  const animateSequence = () => {
-    'worklet';
-
-    // Staggered animations for smooth transitions
-    opacity.value = withTiming(0.5, { duration: 200 });
-    scale.value = withSpring(0.8, { damping: 15, stiffness: 150 });
-
-    // Delayed follow-up animations
-    translateX.value = withDelay(
-      100,
-      withSpring(50, { damping: 20, stiffness: 100 }, (finished) => {
-        if (finished) {
-          translateX.value = withSpring(0, { damping: 15, stiffness: 150 });
-        }
-      })
-    );
-
-    // Sequential animations
-    rotation.value = withSequence(
-      withTiming(10, { duration: 150 }),
-      withTiming(-10, { duration: 150 }),
-      withTiming(0, { duration: 150 })
-    );
-
-    // Progress animation with easing
-    progress.value = withTiming(1, {
-      duration: 1000,
-      easing: Easing.out(Easing.exp)
-    }, (finished) => {
-      if (finished) {
-        runOnJS(setCurrentStep)(currentStep + 1);
-      }
-    });
-
-    // Color transition
-    colorProgress.value = withTiming(1, { duration: 800 });
-
-    // Reset animations
-    setTimeout(() => {
-      opacity.value = withSpring(1);
-      scale.value = withSpring(1);
-      progress.value = withTiming(0, { duration: 500 });
-      colorProgress.value = withTiming(0, { duration: 500 });
-    }, 1500);
-  };
-
-  return (
-    <Animated.View style={[styles.container, backgroundStyle]}>
-      <Text style={styles.title}>Advanced Reanimated Example</Text>
-      <Text style={styles.subtitle}>Step: {currentStep}</Text>
-
-      <Animated.View style={[styles.box, animatedStyle]}>
-        <Text style={styles.boxText}>Animated Box</Text>
-      </Animated.View>
-
-      <View style={styles.progressContainer}>
-        <Animated.View style={[styles.progressBar, progressStyle]} />
-      </View>
-
-      <TouchableOpacity style={styles.button} onPress={animateSequence}>
-        <Text style={styles.buttonText}>Animate Sequence</Text>
-      </TouchableOpacity>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 10,
-    color: '#2c3e50',
-  },
-  subtitle: {
-    fontSize: 16,
-    marginBottom: 30,
-    color: '#7f8c8d',
-  },
-  box: {
-    width: 150,
-    height: 150,
-    backgroundColor: '#3498db',
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 30,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 8,
-  },
-  boxText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  progressContainer: {
-    width: '100%',
-    height: 10,
-    backgroundColor: '#ecf0f1',
-    borderRadius: 5,
-    marginBottom: 30,
-    overflow: 'hidden',
-  },
-  progressBar: {
-    height: '100%',
-    borderRadius: 5,
-  },
-  button: {
-    backgroundColor: '#e74c3c',
-    paddingHorizontal: 30,
-    paddingVertical: 15,
-    borderRadius: 25,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: 4,
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});
-
-export default AnimationExample;

package/src/ui/components/ErrorBoundary.tsx

@@ -1,154 +0,0 @@
-import React, { Component, type ErrorInfo, type ReactNode } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-
-interface Props {
-    children: ReactNode;
-    fallback?: ReactNode;
-    onError?: (error: Error, errorInfo: ErrorInfo) => void;
-}
-
-interface State {
-    hasError: boolean;
-    error: Error | null;
-    errorInfo: ErrorInfo | null;
-}
-
-/**
- * Error Boundary Component
- * 
- * Catches JavaScript errors anywhere in the child component tree,
- * logs those errors, and displays a fallback UI instead of crashing.
- * 
- * Usage:
- * <ErrorBoundary>
- *   <YourComponent />
- * </ErrorBoundary>
- */
-export class ErrorBoundary extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            hasError: false,
-            error: null,
-            errorInfo: null,
-        };
-    }
-
-    static getDerivedStateFromError(error: Error): Partial<State> {
-        // Update state so the next render will show the fallback UI
-        return {
-            hasError: true,
-            error,
-        };
-    }
-
-    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        // Log error to console in development
-        if (__DEV__) {
-            console.error('ErrorBoundary caught an error:', error, errorInfo);
-        }
-
-        // Call optional error handler
-        if (this.props.onError) {
-            this.props.onError(error, errorInfo);
-        }
-
-        // Update state with error info
-        this.setState({
-            error,
-            errorInfo,
-        });
-    }
-
-    handleReset = () => {
-        this.setState({
-            hasError: false,
-            error: null,
-            errorInfo: null,
-        });
-    };
-
-    render() {
-        if (this.state.hasError) {
-            // Use custom fallback if provided
-            if (this.props.fallback) {
-                return this.props.fallback;
-            }
-
-            // Default fallback UI
-            return (
-                <View style={styles.container}>
-                    <View style={styles.errorContainer}>
-                        <Text style={styles.errorTitle}>Something went wrong</Text>
-                        <Text style={styles.errorMessage}>
-                            {this.state.error?.message || 'An unexpected error occurred'}
-                        </Text>
-                        {__DEV__ && this.state.errorInfo && (
-                            <Text style={styles.errorDetails}>
-                                {this.state.errorInfo.componentStack}
-                            </Text>
-                        )}
-                        <TouchableOpacity
-                            style={styles.resetButton}
-                            onPress={this.handleReset}
-                        >
-                            <Text style={styles.resetButtonText}>Try Again</Text>
-                        </TouchableOpacity>
-                    </View>
-                </View>
-            );
-        }
-
-        return this.props.children;
-    }
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 20,
-        backgroundColor: '#fff',
-    },
-    errorContainer: {
-        maxWidth: 400,
-        width: '100%',
-        padding: 20,
-        borderRadius: 8,
-        backgroundColor: '#f5f5f5',
-        borderWidth: 1,
-        borderColor: '#e0e0e0',
-    },
-    errorTitle: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        marginBottom: 10,
-        color: '#d32f2f',
-    },
-    errorMessage: {
-        fontSize: 14,
-        marginBottom: 15,
-        color: '#666',
-    },
-    errorDetails: {
-        fontSize: 12,
-        marginBottom: 15,
-        color: '#999',
-        fontFamily: 'monospace',
-    },
-    resetButton: {
-        backgroundColor: '#007AFF',
-        padding: 12,
-        borderRadius: 6,
-        alignItems: 'center',
-    },
-    resetButtonText: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-});
-
-export default ErrorBoundary;
-

package/src/ui/components/WebOxyProvider.tsx

@@ -1,117 +0,0 @@
-/**
- * WebOxyProvider - Lightweight provider for pure React/Next.js apps
- *
- * Use this provider for web apps that DON'T use Expo/React Native.
- * For Expo apps (native + web), use `OxyProvider` instead - it works on all platforms.
- *
- * Features:
- * - Automatic cross-domain SSO via FedCM (Chrome 108+, Safari 16.4+, Edge 108+)
- * - No React Native dependencies
- * - Session management
- * - All useOxy/useAuth functionality
- *
- * Usage:
- * ```tsx
- * // For pure React/Next.js apps (no Expo):
- * import { WebOxyProvider, useAuth } from '@oxyhq/services';
- *
- * function App() {
- *   return (
- *     <WebOxyProvider baseURL="https://api.oxy.so">
- *       <YourApp />
- *     </WebOxyProvider>
- *   );
- * }
- *
- * // For Expo apps (native + web), use OxyProvider instead:
- * import { OxyProvider, useAuth } from '@oxyhq/services';
- * ```
- */
-
-import { useEffect, useRef, useState, type FC, type ReactNode } from 'react';
-import { OxyContextProvider } from '../context/OxyContext';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { createQueryClient } from '../hooks/queryClient';
-import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
-
-export interface WebOxyProviderProps {
-  children: ReactNode;
-  baseURL: string;
-  authWebUrl?: string;
-  onAuthStateChange?: (user: any) => void;
-  storageKeyPrefix?: string;
-  queryClient?: ReturnType<typeof createQueryClient>;
-}
-
-/**
- * OxyProvider for web applications
- *
- * Features:
- * - Automatic cross-domain SSO via FedCM (browser-native identity API)
- * - Works across different TLDs (alia.onl, mention.earth, homiio.com, etc.)
- * - Session persistence in localStorage
- * - TanStack Query for data fetching
- * - No React Native dependencies
- */
-const WebOxyProvider: FC<WebOxyProviderProps> = ({
-  children,
-  baseURL,
-  authWebUrl,
-  onAuthStateChange,
-  storageKeyPrefix,
-  queryClient: providedQueryClient,
-}) => {
-  const storageRef = useRef<StorageInterface | null>(null);
-  const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
-  const [queryClient, setQueryClient] = useState<ReturnType<typeof createQueryClient> | null>(null);
-
-  useEffect(() => {
-    if (providedQueryClient) {
-      queryClientRef.current = providedQueryClient;
-      setQueryClient(providedQueryClient);
-      return;
-    }
-
-    let mounted = true;
-    createPlatformStorage()
-      .then((storage) => {
-        if (mounted && !queryClientRef.current) {
-          storageRef.current = storage;
-          const client = createQueryClient(storage);
-          queryClientRef.current = client;
-          setQueryClient(client);
-        }
-      })
-      .catch(() => {
-        if (mounted && !queryClientRef.current) {
-          const client = createQueryClient(null);
-          queryClientRef.current = client;
-          setQueryClient(client);
-        }
-      });
-
-    return () => {
-      mounted = false;
-    };
-  }, [providedQueryClient]);
-
-  // Wait for query client to be ready
-  if (!queryClient) {
-    return null;
-  }
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <OxyContextProvider
-        baseURL={baseURL}
-        authWebUrl={authWebUrl}
-        storageKeyPrefix={storageKeyPrefix}
-        onAuthStateChange={onAuthStateChange}
-      >
-        {children}
-      </OxyContextProvider>
-    </QueryClientProvider>
-  );
-};
-
-export default WebOxyProvider;