@pubflow/react 0.1.0

package/dist/types/components/OfflineIndicator.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Offline Indicator Component for React
+ *
+ * Displays a banner when the user is offline
+ */
+import React from 'react';
+/**
+ * Offline Indicator props
+ */
+export interface OfflineIndicatorProps {
+    /**
+     * Text to display when offline
+     */
+    offlineText?: string;
+    /**
+     * Text to display when back online
+     */
+    onlineText?: string;
+    /**
+     * Duration to show the online message (in ms)
+     */
+    onlineDuration?: number;
+    /**
+     * Style for the container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Style for the offline text
+     */
+    offlineTextStyle?: React.CSSProperties;
+    /**
+     * Style for the online text
+     */
+    onlineTextStyle?: React.CSSProperties;
+    /**
+     * Whether to show the indicator
+     */
+    visible?: boolean;
+    /**
+     * Position of the indicator
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Custom CSS class
+     */
+    className?: string;
+}
+/**
+ * Component for displaying an offline indicator
+ */
+export declare function OfflineIndicator({ offlineText, onlineText, onlineDuration, style, offlineTextStyle, onlineTextStyle, visible, position, className }: OfflineIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Hook to get network status
+ */
+export declare function useNetworkStatus(): {
+    isOnline: boolean;
+    isOffline: boolean;
+};

package/dist/types/components/auth/AccountCreationForm.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Account Creation Form Component for React
+ *
+ * Professional account creation form with validation
+ */
+import React from 'react';
+/**
+ * Account creation form configuration
+ */
+export interface AccountCreationFormConfig {
+    /**
+     * Primary color for branding
+     */
+    primaryColor?: string;
+    /**
+     * Application name
+     */
+    appName?: string;
+    /**
+     * Logo URL or component
+     */
+    logo?: string | React.ReactNode;
+    /**
+     * API base URL
+     */
+    apiBaseUrl?: string;
+    /**
+     * Custom styling
+     */
+    className?: string;
+    /**
+     * Required fields
+     */
+    requiredFields?: string[];
+}
+/**
+ * Account creation form props
+ */
+export interface AccountCreationFormProps {
+    /**
+     * Configuration options
+     */
+    config?: AccountCreationFormConfig;
+    /**
+     * Success callback
+     */
+    onSuccess?: () => void;
+    /**
+     * Error callback
+     */
+    onError?: (error: string) => void;
+    /**
+     * Back to login callback
+     */
+    onBackToLogin?: () => void;
+}
+/**
+ * Professional account creation form component
+ */
+export declare function AccountCreationForm({ config, onSuccess, onError, onBackToLogin }: AccountCreationFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/auth/LoginForm.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Login Form Component for React
+ *
+ * Professional login form with dynamic styling based on environment variables
+ */
+import React from 'react';
+/**
+ * Login form configuration
+ */
+export interface LoginFormConfig {
+    /**
+     * Primary color for branding
+     */
+    primaryColor?: string;
+    /**
+     * Secondary color for accents
+     */
+    secondaryColor?: string;
+    /**
+     * Application name
+     */
+    appName?: string;
+    /**
+     * Logo URL or component
+     */
+    logo?: string | React.ReactNode;
+    /**
+     * Show password reset link
+     */
+    showPasswordReset?: boolean;
+    /**
+     * Show account creation link
+     */
+    showAccountCreation?: boolean;
+    /**
+     * Custom styling
+     */
+    className?: string;
+    /**
+     * Redirect path after successful login
+     */
+    redirectPath?: string;
+}
+/**
+ * Login form props
+ */
+export interface LoginFormProps {
+    /**
+     * Configuration options
+     */
+    config?: LoginFormConfig;
+    /**
+     * Success callback
+     */
+    onSuccess?: (user: any) => void;
+    /**
+     * Error callback
+     */
+    onError?: (error: string) => void;
+    /**
+     * Password reset callback
+     */
+    onPasswordReset?: () => void;
+    /**
+     * Account creation callback
+     */
+    onAccountCreation?: () => void;
+    /**
+     * Pubflow instance ID
+     */
+    instanceId?: string;
+}
+/**
+ * Professional login form component
+ */
+export declare function LoginForm({ config, onSuccess, onError, onPasswordReset, onAccountCreation, instanceId }: LoginFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/auth/PasswordResetForm.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Password Reset Form Component for React
+ *
+ * Professional password reset form with step-by-step flow
+ */
+import React from 'react';
+/**
+ * Password reset form configuration
+ */
+export interface PasswordResetFormConfig {
+    /**
+     * Primary color for branding
+     */
+    primaryColor?: string;
+    /**
+     * Application name
+     */
+    appName?: string;
+    /**
+     * Logo URL or component
+     */
+    logo?: string | React.ReactNode;
+    /**
+     * API base URL
+     */
+    apiBaseUrl?: string;
+    /**
+     * Custom styling
+     */
+    className?: string;
+}
+/**
+ * Password reset form props
+ */
+export interface PasswordResetFormProps {
+    /**
+     * Configuration options
+     */
+    config?: PasswordResetFormConfig;
+    /**
+     * Success callback
+     */
+    onSuccess?: () => void;
+    /**
+     * Error callback
+     */
+    onError?: (error: string) => void;
+    /**
+     * Back to login callback
+     */
+    onBackToLogin?: () => void;
+    /**
+     * Reset token from URL (for reset step)
+     */
+    resetToken?: string;
+}
+/**
+ * Professional password reset form component
+ */
+export declare function PasswordResetForm({ config, onSuccess, onError, onBackToLogin, resetToken }: PasswordResetFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/auth/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Authentication Components
+ *
+ * Export all authentication-related components
+ */
+export * from './LoginForm';
+export * from './PasswordResetForm';
+export * from './AccountCreationForm';

package/dist/types/components/theme/ThemeProvider.d.ts

@@ -0,0 +1,255 @@
+/**
+ * Theme Provider for React
+ *
+ * Provides dynamic styling system based on environment variables
+ */
+import { ReactNode } from 'react';
+/**
+ * Theme configuration interface
+ */
+export interface ThemeConfig {
+    /**
+     * Primary color for branding
+     */
+    primaryColor: string;
+    /**
+     * Secondary color for accents
+     */
+    secondaryColor: string;
+    /**
+     * Application name
+     */
+    appName: string;
+    /**
+     * Logo URL or component
+     */
+    logo?: string | ReactNode;
+    /**
+     * Success color
+     */
+    successColor: string;
+    /**
+     * Error color
+     */
+    errorColor: string;
+    /**
+     * Warning color
+     */
+    warningColor: string;
+    /**
+     * Background colors
+     */
+    backgroundColor: string;
+    surfaceColor: string;
+    /**
+     * Text colors
+     */
+    textPrimary: string;
+    textSecondary: string;
+    textMuted: string;
+    /**
+     * Border colors
+     */
+    borderColor: string;
+    borderColorFocus: string;
+    /**
+     * Shadow colors
+     */
+    shadowColor: string;
+    /**
+     * Font family
+     */
+    fontFamily: string;
+    /**
+     * Border radius
+     */
+    borderRadius: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    /**
+     * Spacing
+     */
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}
+/**
+ * Theme provider props
+ */
+export interface ThemeProviderProps {
+    children: ReactNode;
+    theme?: Partial<ThemeConfig>;
+}
+/**
+ * Theme provider component
+ */
+export declare function ThemeProvider({ children, theme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to use theme
+ */
+export declare function useTheme(): ThemeConfig;
+/**
+ * Generate CSS variables from theme
+ */
+export declare function generateCSSVariables(theme: ThemeConfig): Record<string, string>;
+/**
+ * CSS-in-JS style generator
+ */
+export declare function createStyles(theme: ThemeConfig): {
+    container: {
+        maxWidth: string;
+        margin: string;
+        padding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        border: string;
+        fontFamily: string;
+    };
+    logoSection: {
+        textAlign: "center";
+        marginBottom: string;
+    };
+    logo: {
+        maxWidth: string;
+        height: string;
+        marginBottom: string;
+    };
+    title: {
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        marginBottom: string;
+        letterSpacing: string;
+    };
+    subtitle: {
+        fontSize: string;
+        color: string;
+        fontWeight: string;
+        marginBottom: string;
+    };
+    inputGroup: {
+        marginBottom: string;
+    };
+    inputLabel: {
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        marginBottom: string;
+        letterSpacing: string;
+        display: string;
+    };
+    inputContainer: {
+        position: "relative";
+        display: string;
+        alignItems: string;
+        backgroundColor: string;
+        borderRadius: string;
+        border: string;
+        padding: string;
+        height: string;
+        boxShadow: string;
+        transition: string;
+    };
+    inputContainerFocus: {
+        borderColor: string;
+    };
+    input: {
+        flex: number;
+        fontSize: string;
+        color: string;
+        border: string;
+        outline: string;
+        backgroundColor: string;
+        fontWeight: string;
+    };
+    button: {
+        width: string;
+        borderRadius: string;
+        height: string;
+        backgroundColor: string;
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+        border: string;
+        cursor: string;
+        marginTop: string;
+        boxShadow: string;
+        letterSpacing: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        gap: string;
+        transition: string;
+    };
+    buttonSecondary: {
+        backgroundColor: string;
+        boxShadow: string;
+    };
+    buttonDisabled: {
+        opacity: number;
+        cursor: string;
+    };
+    linkButton: {
+        background: string;
+        border: string;
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+        cursor: string;
+        textDecoration: string;
+        padding: string;
+        textAlign: "center";
+    };
+    errorContainer: {
+        display: string;
+        alignItems: string;
+        backgroundColor: string;
+        padding: string;
+        borderRadius: string;
+        marginBottom: string;
+        border: string;
+    };
+    successContainer: {
+        display: string;
+        alignItems: string;
+        backgroundColor: string;
+        padding: string;
+        borderRadius: string;
+        marginBottom: string;
+        border: string;
+    };
+    warningContainer: {
+        display: string;
+        alignItems: string;
+        backgroundColor: string;
+        padding: string;
+        borderRadius: string;
+        marginBottom: string;
+        border: string;
+    };
+    errorText: {
+        color: string;
+        fontSize: string;
+        marginLeft: string;
+        fontWeight: string;
+    };
+    successText: {
+        color: string;
+        fontSize: string;
+        marginLeft: string;
+        fontWeight: string;
+    };
+    warningText: {
+        color: string;
+        fontSize: string;
+        marginLeft: string;
+        fontWeight: string;
+    };
+};

package/dist/types/components/theme/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Theme Components
+ *
+ * Export all theme-related components and utilities
+ */
+export * from './ThemeProvider';

package/dist/types/context/PubflowProvider.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Pubflow Provider for React
+ *
+ * Provides a context provider for Pubflow in React applications
+ */
+import React from 'react';
+import { PubflowInstanceConfig, ApiClient, AuthService, User } from '@pubflow/core';
+/**
+ * Pubflow context value
+ */
+export interface PubflowContextValue {
+    instances: Record<string, PubflowInstance>;
+    defaultInstance: string;
+}
+/**
+ * Pubflow instance
+ */
+export interface PubflowInstance {
+    config: PubflowInstanceConfig;
+    apiClient: ApiClient;
+    authService: AuthService;
+    user: User | null | undefined;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    login: (credentials: {
+        email?: string;
+        userName?: string;
+        password: string;
+    }) => Promise<any>;
+    logout: () => Promise<void>;
+    validateSession: () => Promise<{
+        isValid: boolean;
+        expiresAt?: string;
+        user?: User;
+    }>;
+}
+/**
+ * Create Pubflow context
+ */
+export declare const PubflowContext: React.Context<PubflowContextValue>;
+/**
+ * Persistent cache configuration
+ */
+export interface PersistentCacheConfig {
+    /**
+     * Whether to enable persistent cache
+     */
+    enabled: boolean;
+    /**
+     * Cache provider function
+     */
+    provider?: () => Map<any, any>;
+    /**
+     * Cache options
+     */
+    options?: any;
+}
+/**
+ * Pubflow provider props
+ */
+export interface PubflowProviderProps {
+    children: React.ReactNode;
+    config?: PubflowInstanceConfig;
+    instances?: PubflowInstanceConfig[];
+    defaultInstance?: string;
+    onSessionExpired?: () => void;
+    onSessionRefreshed?: () => void;
+    showSessionAlerts?: boolean;
+    /**
+     * Persistent cache configuration
+     */
+    persistentCache?: PersistentCacheConfig;
+    /**
+     * Login redirect path (for automatic redirects)
+     */
+    loginRedirectPath?: string;
+    /**
+     * Public paths that don't require authentication
+     */
+    publicPaths?: string[];
+    /**
+     * Enable debug tools
+     * When enabled, debug utilities will be available
+     * Default: false
+     */
+    enableDebugTools?: boolean;
+    /**
+     * Theme configuration
+     */
+    theme?: {
+        primaryColor?: string;
+        secondaryColor?: string;
+        appName?: string;
+        logo?: string | React.ReactNode;
+    };
+}
+/**
+ * Pubflow provider for React
+ */
+export declare function PubflowProvider({ children, config, instances, defaultInstance, onSessionExpired, onSessionRefreshed, showSessionAlerts, persistentCache, loginRedirectPath, publicPaths, enableDebugTools, theme }: PubflowProviderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/hooks/useAuth.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Authentication Hook for React
+ *
+ * Provides a hook for accessing authentication functionality
+ */
+import { User } from '@pubflow/core';
+/**
+ * Authentication hook result
+ */
+export interface UseAuthResult {
+    user: User | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    login: (credentials: {
+        email?: string;
+        userName?: string;
+        password: string;
+    }) => Promise<any>;
+    logout: () => Promise<void>;
+    validateSession: () => Promise<{
+        isValid: boolean;
+        expiresAt?: string;
+    }>;
+    refreshUser: () => Promise<User | null>;
+}
+/**
+ * Hook for accessing authentication functionality
+ *
+ * @param instanceId Pubflow instance ID
+ * @returns Authentication hook result
+ */
+export declare function useAuth(instanceId?: string): UseAuthResult;

package/dist/types/hooks/useBridgeApi.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Bridge API Hook for React
+ *
+ * Provides a hook for accessing Bridge API functionality
+ */
+import { BridgeApiService, EntityConfig, EntityData } from '@pubflow/core';
+/**
+ * Hook for accessing Bridge API functionality
+ *
+ * @param config Entity configuration
+ * @param instanceId Pubflow instance ID
+ * @returns Bridge API service
+ */
+export declare function useBridgeApi<T extends EntityData>(config: EntityConfig, instanceId?: string): BridgeApiService<T>;