nastech-app 1.0.0

package/sources/log.ts

@@ -0,0 +1,108 @@
+/**
+ * Simple logging mechanism that writes to console and maintains internal array
+ * Keeps last 5k records in memory with change notifications for UI updates
+ */
+import { serializeForLogs } from '@/utils/truncateForLogs';
+
+type ConsoleLogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug';
+export const MAX_APP_LOG_ENTRIES = 5000;
+
+class Logger {
+    private logs: string[] = [];
+    private maxLogs = MAX_APP_LOG_ENTRIES;
+    private listeners: Array<() => void> = [];
+    private consoleCaptureEnabled = false;
+
+    private append(message: string): void {
+        this.logs.push(message);
+
+        // Maintain 5k limit with circular buffer
+        if (this.logs.length > this.maxLogs) {
+            this.logs.shift();
+        }
+
+        // Notify listeners for real-time updates
+        this.listeners.forEach(listener => listener());
+    }
+
+    private formatValue(value: unknown): string {
+        return serializeForLogs(value);
+    }
+
+    private formatConsoleMessage(level: ConsoleLogLevel, args: unknown[]): string {
+        const message = args.map(arg => this.formatValue(arg)).join('\n');
+        if (level === 'log') {
+            return message;
+        }
+        return `[${level}] ${message}`;
+    }
+
+    setConsoleCaptureEnabled(enabled: boolean): void {
+        this.consoleCaptureEnabled = enabled;
+    }
+
+    captureConsole(level: ConsoleLogLevel, args: unknown[]): void {
+        this.append(this.formatConsoleMessage(level, args));
+    }
+
+    /**
+     * Capture a pre-formatted message (avoids double serialization)
+     */
+    captureFormatted(level: ConsoleLogLevel, formatted: string): void {
+        const message = level === 'log' ? formatted : `[${level}] ${formatted}`;
+        this.append(message);
+    }
+
+    /**
+     * Log a message - writes to both console and internal array
+     */
+    log(message: string): void {
+        if (!this.consoleCaptureEnabled) {
+            this.append(message);
+        }
+
+        console.log(message);
+    }
+
+    /**
+     * Get all logs as a copy of the array
+     */
+    getLogs(): string[] {
+        return [...this.logs];
+    }
+
+    /**
+     * Clear all logs
+     */
+    clear(): void {
+        this.logs = [];
+        this.listeners.forEach(listener => listener());
+    }
+
+    /**
+     * Subscribe to log changes - returns unsubscribe function
+     */
+    onChange(listener: () => void): () => void {
+        this.listeners.push(listener);
+        return () => {
+            const index = this.listeners.indexOf(listener);
+            if (index > -1) {
+                this.listeners.splice(index, 1);
+            }
+        };
+    }
+
+    /**
+     * Get current number of logs
+     */
+    getCount(): number {
+        return this.logs.length;
+    }
+
+    getMaxLogs(): number {
+        return this.maxLogs;
+    }
+}
+
+// Export singleton instance
+export const log = new Logger();

package/sources/modal/ModalManager.ts

@@ -0,0 +1,203 @@
+import { Platform, Alert } from 'react-native';
+import { t } from '@/text';
+import { AlertButton, ModalConfig, CustomModalConfig, IModal } from './types';
+
+class ModalManagerClass implements IModal {
+    private showModalFn: ((config: Omit<ModalConfig, 'id'>) => string) | null = null;
+    private hideModalFn: ((id: string) => void) | null = null;
+    private hideAllModalsFn: (() => void) | null = null;
+    private confirmResolvers: Map<string, (value: boolean) => void> = new Map();
+    private promptResolvers: Map<string, (value: string | null) => void> = new Map();
+
+    setFunctions(
+        showModal: (config: Omit<ModalConfig, 'id'>) => string,
+        hideModal: (id: string) => void,
+        hideAllModals: () => void
+    ) {
+        this.showModalFn = showModal;
+        this.hideModalFn = hideModal;
+        this.hideAllModalsFn = hideAllModals;
+    }
+
+    private generateId(): string {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2);
+    }
+
+    alert(title: string, message?: string, buttons?: AlertButton[]): void {
+        if (Platform.OS === 'web') {
+            // Show custom web modal
+            if (!this.showModalFn) {
+                console.error('ModalManager not initialized. Make sure ModalProvider is mounted.');
+                return;
+            }
+
+            this.showModalFn({
+                type: 'alert',
+                title,
+                message,
+                buttons: buttons || [{ text: t('common.ok') }]
+            } as Omit<ModalConfig, 'id'>);
+        } else {
+            // Use native alert
+            Alert.alert(title, message, buttons);
+        }
+    }
+
+    async confirm(
+        title: string,
+        message?: string,
+        options?: {
+            cancelText?: string;
+            confirmText?: string;
+            destructive?: boolean;
+        }
+    ): Promise<boolean> {
+        if (Platform.OS === 'web') {
+            // Show custom web modal
+            if (!this.showModalFn) {
+                console.error('ModalManager not initialized. Make sure ModalProvider is mounted.');
+                return false;
+            }
+
+            const modalId = this.showModalFn({
+                type: 'confirm',
+                title,
+                message,
+                cancelText: options?.cancelText,
+                confirmText: options?.confirmText,
+                destructive: options?.destructive
+            } as Omit<ModalConfig, 'id'>);
+
+            return new Promise<boolean>((resolve) => {
+                this.confirmResolvers.set(modalId, resolve);
+            });
+        } else {
+            // Use native alert
+            return new Promise<boolean>((resolve) => {
+                Alert.alert(
+                    title,
+                    message,
+                    [
+                        {
+                            text: options?.cancelText || t('common.cancel'),
+                            style: 'cancel',
+                            onPress: () => resolve(false)
+                        },
+                        {
+                            text: options?.confirmText || t('common.ok'),
+                            style: options?.destructive ? 'destructive' : 'default',
+                            onPress: () => resolve(true)
+                        }
+                    ],
+                    { cancelable: false }
+                );
+            });
+        }
+    }
+
+    show(config: Omit<CustomModalConfig, 'id' | 'type'>): string {
+        if (!this.showModalFn) {
+            console.error('ModalManager not initialized. Make sure ModalProvider is mounted.');
+            return '';
+        }
+
+        return this.showModalFn({
+            ...config,
+            type: 'custom'
+        });
+    }
+
+    hide(id: string): void {
+        if (!this.hideModalFn) {
+            console.error('ModalManager not initialized. Make sure ModalProvider is mounted.');
+            return;
+        }
+
+        this.hideModalFn(id);
+    }
+
+    hideAll(): void {
+        if (!this.hideAllModalsFn) {
+            console.error('ModalManager not initialized. Make sure ModalProvider is mounted.');
+            return;
+        }
+
+        this.hideAllModalsFn();
+    }
+
+    resolveConfirm(id: string, value: boolean): void {
+        const resolver = this.confirmResolvers.get(id);
+        if (resolver) {
+            resolver(value);
+            this.confirmResolvers.delete(id);
+        }
+    }
+
+    resolvePrompt(id: string, value: string | null): void {
+        const resolver = this.promptResolvers.get(id);
+        if (resolver) {
+            resolver(value);
+            this.promptResolvers.delete(id);
+        }
+    }
+
+    async prompt(
+        title: string,
+        message?: string,
+        options?: {
+            placeholder?: string;
+            defaultValue?: string;
+            cancelText?: string;
+            confirmText?: string;
+            inputType?: 'default' | 'secure-text' | 'email-address' | 'numeric';
+        }
+    ): Promise<string | null> {
+        if (Platform.OS === 'ios' && !options?.inputType) {
+            // Use native Alert.prompt on iOS (only supports basic text input)
+            return new Promise<string | null>((resolve) => {
+                // @ts-ignore - Alert.prompt is iOS only
+                Alert.prompt(
+                    title,
+                    message,
+                    [
+                        {
+                            text: options?.cancelText || t('common.cancel'),
+                            style: 'cancel',
+                            onPress: () => resolve(null)
+                        },
+                        {
+                            text: options?.confirmText || t('common.ok'),
+                            onPress: (text?: string) => resolve(text || null)
+                        }
+                    ],
+                    'plain-text',
+                    options?.defaultValue,
+                    'default'
+                );
+            });
+        } else {
+            // Use custom modal for web and Android
+            if (!this.showModalFn) {
+                console.error('ModalManager not initialized. Make sure ModalProvider is mounted.');
+                return null;
+            }
+
+            const modalId = this.showModalFn({
+                type: 'prompt',
+                title,
+                message,
+                placeholder: options?.placeholder,
+                defaultValue: options?.defaultValue,
+                cancelText: options?.cancelText,
+                confirmText: options?.confirmText,
+                inputType: options?.inputType
+            } as Omit<ModalConfig, 'id'>);
+
+            return new Promise<string | null>((resolve) => {
+                this.promptResolvers.set(modalId, resolve);
+            });
+        }
+    }
+}
+
+export const Modal = new ModalManagerClass();

package/sources/modal/ModalProvider.tsx

@@ -0,0 +1,103 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { ModalState, ModalConfig, ModalContextValue } from './types';
+import { Modal } from './ModalManager';
+import { WebAlertModal } from './components/WebAlertModal';
+import { WebPromptModal } from './components/WebPromptModal';
+import { CustomModal } from './components/CustomModal';
+
+const ModalContext = createContext<ModalContextValue | undefined>(undefined);
+
+export function useModal() {
+    const context = useContext(ModalContext);
+    if (!context) {
+        throw new Error('useModal must be used within a ModalProvider');
+    }
+    return context;
+}
+
+export function ModalProvider({ children }: { children: React.ReactNode }) {
+    const [state, setState] = useState<ModalState>({
+        modals: []
+    });
+
+    const generateId = useCallback(() => {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2);
+    }, []);
+
+    const showModal = useCallback((config: Omit<ModalConfig, 'id'>): string => {
+        const id = generateId();
+        const modalConfig: ModalConfig = { ...config, id } as ModalConfig;
+        
+        setState(prev => ({
+            modals: [...prev.modals, modalConfig]
+        }));
+        
+        return id;
+    }, [generateId]);
+
+    const hideModal = useCallback((id: string) => {
+        setState(prev => ({
+            modals: prev.modals.filter(modal => modal.id !== id)
+        }));
+    }, []);
+
+    const hideAllModals = useCallback(() => {
+        setState({ modals: [] });
+    }, []);
+
+    // Initialize ModalManager with functions
+    useEffect(() => {
+        Modal.setFunctions(showModal, hideModal, hideAllModals);
+    }, [showModal, hideModal, hideAllModals]);
+
+    const contextValue: ModalContextValue = {
+        state,
+        showModal,
+        hideModal,
+        hideAllModals
+    };
+
+    const currentModal = state.modals[state.modals.length - 1];
+
+    return (
+        <ModalContext.Provider value={contextValue}>
+            {children}
+            {currentModal && (
+                <>
+                    {currentModal.type === 'alert' && (
+                        <WebAlertModal
+                            config={currentModal}
+                            onClose={() => hideModal(currentModal.id)}
+                        />
+                    )}
+                    {currentModal.type === 'confirm' && (
+                        <WebAlertModal
+                            config={currentModal}
+                            onClose={() => hideModal(currentModal.id)}
+                            onConfirm={(value) => {
+                                Modal.resolveConfirm(currentModal.id, value);
+                                hideModal(currentModal.id);
+                            }}
+                        />
+                    )}
+                    {currentModal.type === 'prompt' && (
+                        <WebPromptModal
+                            config={currentModal}
+                            onClose={() => hideModal(currentModal.id)}
+                            onConfirm={(value) => {
+                                Modal.resolvePrompt(currentModal.id, value);
+                                hideModal(currentModal.id);
+                            }}
+                        />
+                    )}
+                    {currentModal.type === 'custom' && (
+                        <CustomModal
+                            config={currentModal}
+                            onClose={() => hideModal(currentModal.id)}
+                        />
+                    )}
+                </>
+            )}
+        </ModalContext.Provider>
+    );
+}

package/sources/modal/components/BaseModal.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useRef } from 'react';
+import {
+    View,
+    Modal,
+    TouchableWithoutFeedback,
+    Animated,
+    StyleSheet,
+    KeyboardAvoidingView,
+    Platform
+} from 'react-native';
+
+// On web, stop events from propagating to expo-router's modal overlay
+// which intercepts clicks when it applies pointer-events: none to body
+const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagation();
+const webEventHandlers = Platform.OS === 'web'
+    ? { onClick: stopPropagation, onPointerDown: stopPropagation, onTouchStart: stopPropagation }
+    : {};
+
+interface BaseModalProps {
+    visible: boolean;
+    onClose?: () => void;
+    children: React.ReactNode;
+    animationType?: 'fade' | 'slide' | 'none';
+    transparent?: boolean;
+    closeOnBackdrop?: boolean;
+}
+
+export function BaseModal({
+    visible,
+    onClose,
+    children,
+    animationType = 'fade',
+    transparent = true,
+    closeOnBackdrop = true
+}: BaseModalProps) {
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        if (visible) {
+            Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: true
+            }).start();
+        } else {
+            Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true
+            }).start();
+        }
+    }, [visible, fadeAnim]);
+
+    const handleBackdropPress = () => {
+        if (closeOnBackdrop && onClose) {
+            onClose();
+        }
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            transparent={transparent}
+            animationType={animationType}
+            onRequestClose={onClose}
+        >
+            <KeyboardAvoidingView
+                style={styles.container}
+                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                {...webEventHandlers}
+            >
+                <TouchableWithoutFeedback onPress={handleBackdropPress}>
+                    <Animated.View 
+                        style={[
+                            styles.backdrop,
+                            {
+                                opacity: fadeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0, 0.5]
+                                })
+                            }
+                        ]}
+                    />
+                </TouchableWithoutFeedback>
+                
+                <Animated.View
+                    style={[
+                        styles.content,
+                        {
+                            opacity: fadeAnim,
+                            transform: [{
+                                scale: fadeAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0.9, 1]
+                                })
+                            }]
+                        }
+                    ]}
+                >
+                    {children}
+                </Animated.View>
+            </KeyboardAvoidingView>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // On web, ensure modal can receive pointer events when body has pointer-events: none
+        ...Platform.select({ web: { pointerEvents: 'auto' as const } })
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'black'
+    },
+    content: {
+        zIndex: 1
+    }
+});

package/sources/modal/components/CustomModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BaseModal } from './BaseModal';
+import { CustomModalConfig } from '../types';
+import { CommandPaletteModal } from '@/components/CommandPalette/CommandPaletteModal';
+import { CommandPalette } from '@/components/CommandPalette';
+
+interface CustomModalProps {
+    config: CustomModalConfig;
+    onClose: () => void;
+}
+
+export function CustomModal({ config, onClose }: CustomModalProps) {
+    const Component = config.component;
+    
+    // Use special modal wrapper for CommandPalette with animation support
+    if (Component === CommandPalette) {
+        return <CommandPaletteWithAnimation config={config} onClose={onClose} />;
+    }
+    
+    return (
+        <BaseModal visible={true} onClose={onClose}>
+            <Component {...config.props} onClose={onClose} />
+        </BaseModal>
+    );
+}
+
+// Helper component to manage CommandPalette animation state
+function CommandPaletteWithAnimation({ config, onClose }: CustomModalProps) {
+    const [isClosing, setIsClosing] = React.useState(false);
+    
+    const handleClose = React.useCallback(() => {
+        setIsClosing(true);
+        // Wait for animation to complete before unmounting
+        setTimeout(onClose, 200);
+    }, [onClose]);
+    
+    return (
+        <CommandPaletteModal visible={!isClosing} onClose={onClose}>
+            <CommandPalette {...config.props} onClose={handleClose} />
+        </CommandPaletteModal>
+    );
+}