pi-kiosk-shared 1.0.0

package/dist/config/logger.js

@@ -0,0 +1,117 @@
+// Centralized logging system with environment-aware configuration
+import { getEnvironmentConfig, getCurrentEnvironment } from './environments';
+class Logger {
+    constructor() {
+        this.config = getEnvironmentConfig();
+        this.sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    shouldLog(level) {
+        const levels = {
+            debug: 0,
+            info: 1,
+            warn: 2,
+            error: 3
+        };
+        // Default to 'info' level if not specified in config
+        const configLevel = this.config.showDebugInfo ? 'debug' : 'info';
+        return levels[level] >= levels[configLevel];
+    }
+    formatMessage(level, message, context, data) {
+        return {
+            level,
+            message,
+            context,
+            data,
+            timestamp: new Date().toISOString(),
+            environment: getCurrentEnvironment(),
+            sessionId: this.sessionId
+        };
+    }
+    log(level, message, context, data) {
+        if (!this.shouldLog(level))
+            return;
+        const logEntry = this.formatMessage(level, message, context, data);
+        // Console logging with appropriate method
+        const consoleMethod = level === 'debug' ? 'log' : level;
+        const prefix = `[${level.toUpperCase()}] ${logEntry.timestamp}`;
+        const contextStr = context ? ` [${context}]` : '';
+        console[consoleMethod](`${prefix}${contextStr}: ${message}`, data || '');
+        // Send to external logging service in production
+        if (!this.config.showDebugInfo && (level === 'error' || level === 'warn')) {
+            this.sendToExternalService(logEntry);
+        }
+        // Store in local storage for debugging (development only)
+        if (this.config.showDebugInfo) {
+            this.storeLogEntry(logEntry);
+        }
+    }
+    sendToExternalService(logEntry) {
+        // TODO: Integrate with Sentry, LogRocket, or other monitoring service
+        // For now, just log to console in production
+        console.warn('External logging not implemented yet:', logEntry);
+    }
+    storeLogEntry(logEntry) {
+        try {
+            const storageKey = 'kiosk-logs';
+            const existingLogs = JSON.parse(localStorage.getItem(storageKey) || '[]');
+            const updatedLogs = [...existingLogs.slice(-99), logEntry]; // Keep last 100 entries
+            localStorage.setItem(storageKey, JSON.stringify(updatedLogs));
+        }
+        catch (error) {
+            console.warn('Failed to store log entry:', error);
+        }
+    }
+    debug(message, context, data) {
+        this.log('debug', message, context, data);
+    }
+    info(message, context, data) {
+        this.log('info', message, context, data);
+    }
+    warn(message, context, data) {
+        this.log('warn', message, context, data);
+    }
+    error(message, context, data) {
+        this.log('error', message, context, data);
+    }
+    // Kiosk-specific logging methods
+    kioskAction(action, kioskId, data) {
+        this.info(`Kiosk action: ${action}`, `kiosk-${kioskId}`, data);
+    }
+    paymentEvent(event, paymentId, data) {
+        this.info(`Payment event: ${event}`, `payment-${paymentId}`, data);
+    }
+    apiCall(method, endpoint, duration, error) {
+        const message = `API ${method} ${endpoint}${duration ? ` (${duration}ms)` : ''}`;
+        if (error) {
+            this.error(message, 'api-client', { error: error.message, stack: error.stack });
+        }
+        else {
+            this.debug(message, 'api-client');
+        }
+    }
+    // Get logs for debugging
+    getLogs() {
+        try {
+            return JSON.parse(localStorage.getItem('kiosk-logs') || '[]');
+        }
+        catch {
+            return [];
+        }
+    }
+    // Clear stored logs
+    clearLogs() {
+        localStorage.removeItem('kiosk-logs');
+    }
+}
+// Export singleton instance
+export const logger = new Logger();
+// Export convenience functions
+export const log = {
+    debug: (message, context, data) => logger.debug(message, context, data),
+    info: (message, context, data) => logger.info(message, context, data),
+    warn: (message, context, data) => logger.warn(message, context, data),
+    error: (message, context, data) => logger.error(message, context, data),
+    kioskAction: (action, kioskId, data) => logger.kioskAction(action, kioskId, data),
+    paymentEvent: (event, paymentId, data) => logger.paymentEvent(event, paymentId, data),
+    apiCall: (method, endpoint, duration, error) => logger.apiCall(method, endpoint, duration, error),
+};

package/dist/constants.d.ts

@@ -0,0 +1,66 @@
+export declare const APP_CONFIG: {
+    readonly DEFAULT_API_URL: "http://localhost:3015";
+    readonly DEFAULT_WS_URL: "ws://localhost:3015";
+    readonly API_TIMEOUT: 10000;
+    readonly RETRY_ATTEMPTS: 3;
+    readonly RETRY_DELAY: 1000;
+    readonly WS_RECONNECT_ATTEMPTS: 5;
+    readonly WS_RECONNECT_INTERVAL: 3000;
+    readonly WS_HEARTBEAT_INTERVAL: 30000;
+    readonly LOADING_DEBOUNCE: 300;
+    readonly ERROR_DISPLAY_DURATION: 5000;
+    readonly MIN_USERNAME_LENGTH: 3;
+    readonly MIN_PASSWORD_LENGTH: 6;
+    readonly MAX_PRODUCT_NAME_LENGTH: 100;
+    readonly MAX_DESCRIPTION_LENGTH: 500;
+    readonly DEFAULT_KIOSK_ID: 1;
+    readonly PAYMENT_POLLING_INTERVAL: 3000;
+    readonly PRODUCT_CACHE_TTL: 300000;
+    readonly PAYMENT_ACCOUNT_NUMBER: "1234567890";
+    readonly PAYMENT_CURRENCY: "CZK";
+    readonly QR_CODE_WIDTH: 300;
+    readonly QR_CODE_FORMAT: "SPD*1.0";
+};
+export declare const UI_MESSAGES: {
+    readonly LOADING_PRODUCTS: "Načítání produktů...";
+    readonly LOADING_PAYMENT: "Zpracovávám platbu...";
+    readonly GENERATING_QR: "Generuji QR kód...";
+    readonly PAYMENT_SUCCESS: "Platba byla úspěšně zpracována!";
+    readonly PRODUCT_SAVED: "Produkt byl úspěšně uložen!";
+    readonly NETWORK_ERROR: "Problém s připojením. Zkuste to znovu.";
+    readonly VALIDATION_ERROR: "Zkontrolujte zadané údaje.";
+    readonly UNKNOWN_ERROR: "Něco se pokazilo. Zkuste to znovu.";
+    readonly NO_PRODUCTS: "Žádné produkty nejsou k dispozici";
+    readonly NO_TRANSACTIONS: "Žádné transakce";
+    readonly COMING_SOON: "Připravujeme pro vás...";
+    readonly REQUIRED_FIELD: "Toto pole je povinné";
+    readonly INVALID_EMAIL: "Zadejte platnou emailovou adresu";
+    readonly INVALID_PRICE: "Cena musí být větší než 0";
+};
+export declare const CSS_CLASSES: {
+    readonly CONTAINER: "container";
+    readonly GRID: "grid";
+    readonly FLEX: "flex";
+    readonly LOADING: "loading";
+    readonly ERROR: "error";
+    readonly SUCCESS: "success";
+    readonly DISABLED: "disabled";
+    readonly ACTIVE: "active";
+    readonly BUTTON_PRIMARY: "btn-primary";
+    readonly BUTTON_SECONDARY: "btn-secondary";
+    readonly INPUT: "input";
+    readonly CARD: "card";
+    readonly ONLINE: "online";
+    readonly OFFLINE: "offline";
+    readonly CONNECTED: "connected";
+    readonly DISCONNECTED: "disconnected";
+};
+export declare const ROUTES: {
+    readonly KIOSK_HOME: "/";
+    readonly KIOSK_PAYMENT: "/payment";
+    readonly KIOSK_CONFIRMATION: "/confirmation";
+    readonly ADMIN_LOGIN: "/admin/login";
+    readonly ADMIN_DASHBOARD: "/admin";
+    readonly ADMIN_PRODUCTS: "/admin/products";
+    readonly ADMIN_KIOSKS: "/admin/kiosks";
+};

package/dist/constants.js

@@ -0,0 +1,85 @@
+// Shared constants across all packages
+export const APP_CONFIG = {
+    // API Configuration
+    DEFAULT_API_URL: 'http://localhost:3015',
+    DEFAULT_WS_URL: 'ws://localhost:3015',
+    // Timeouts
+    API_TIMEOUT: 10000, // 10 seconds
+    RETRY_ATTEMPTS: 3,
+    RETRY_DELAY: 1000, // 1 second
+    // WebSocket
+    WS_RECONNECT_ATTEMPTS: 5,
+    WS_RECONNECT_INTERVAL: 3000,
+    WS_HEARTBEAT_INTERVAL: 30000,
+    // UI
+    LOADING_DEBOUNCE: 300,
+    ERROR_DISPLAY_DURATION: 5000,
+    // Validation
+    MIN_USERNAME_LENGTH: 3,
+    MIN_PASSWORD_LENGTH: 6,
+    MAX_PRODUCT_NAME_LENGTH: 100,
+    MAX_DESCRIPTION_LENGTH: 500,
+    // Business Rules
+    DEFAULT_KIOSK_ID: 1,
+    PAYMENT_POLLING_INTERVAL: 3000,
+    PRODUCT_CACHE_TTL: 300000, // 5 minutes
+    // Payment Configuration
+    PAYMENT_ACCOUNT_NUMBER: '1234567890',
+    PAYMENT_CURRENCY: 'CZK',
+    QR_CODE_WIDTH: 300,
+    QR_CODE_FORMAT: 'SPD*1.0', // Czech QR payment standard
+};
+export const UI_MESSAGES = {
+    // Loading states
+    LOADING_PRODUCTS: 'Načítání produktů...',
+    LOADING_PAYMENT: 'Zpracovávám platbu...',
+    GENERATING_QR: 'Generuji QR kód...',
+    // Success messages
+    PAYMENT_SUCCESS: 'Platba byla úspěšně zpracována!',
+    PRODUCT_SAVED: 'Produkt byl úspěšně uložen!',
+    // Error messages
+    NETWORK_ERROR: 'Problém s připojením. Zkuste to znovu.',
+    VALIDATION_ERROR: 'Zkontrolujte zadané údaje.',
+    UNKNOWN_ERROR: 'Něco se pokazilo. Zkuste to znovu.',
+    // Empty states
+    NO_PRODUCTS: 'Žádné produkty nejsou k dispozici',
+    NO_TRANSACTIONS: 'Žádné transakce',
+    COMING_SOON: 'Připravujeme pro vás...',
+    // Form validation
+    REQUIRED_FIELD: 'Toto pole je povinné',
+    INVALID_EMAIL: 'Zadejte platnou emailovou adresu',
+    INVALID_PRICE: 'Cena musí být větší než 0',
+};
+export const CSS_CLASSES = {
+    // Layout
+    CONTAINER: 'container',
+    GRID: 'grid',
+    FLEX: 'flex',
+    // States
+    LOADING: 'loading',
+    ERROR: 'error',
+    SUCCESS: 'success',
+    DISABLED: 'disabled',
+    ACTIVE: 'active',
+    // Components
+    BUTTON_PRIMARY: 'btn-primary',
+    BUTTON_SECONDARY: 'btn-secondary',
+    INPUT: 'input',
+    CARD: 'card',
+    // Status indicators
+    ONLINE: 'online',
+    OFFLINE: 'offline',
+    CONNECTED: 'connected',
+    DISCONNECTED: 'disconnected',
+};
+export const ROUTES = {
+    // Kiosk routes
+    KIOSK_HOME: '/',
+    KIOSK_PAYMENT: '/payment',
+    KIOSK_CONFIRMATION: '/confirmation',
+    // Admin routes
+    ADMIN_LOGIN: '/admin/login',
+    ADMIN_DASHBOARD: '/admin',
+    ADMIN_PRODUCTS: '/admin/products',
+    ADMIN_KIOSKS: '/admin/kiosks',
+};

package/dist/errors.d.ts

@@ -0,0 +1,29 @@
+export declare class AppError extends Error {
+    readonly code: string;
+    readonly statusCode: number;
+    readonly isOperational: boolean;
+    constructor(message: string, code?: string, statusCode?: number, isOperational?: boolean);
+}
+export declare class ValidationError extends AppError {
+    constructor(message: string, _field?: string);
+}
+export declare class NetworkError extends AppError {
+    constructor(message?: string);
+}
+export declare class AuthenticationError extends AppError {
+    constructor(message?: string);
+}
+export declare class NotFoundError extends AppError {
+    constructor(resource?: string);
+}
+export interface ErrorResponse {
+    success: false;
+    error: {
+        code: string;
+        message: string;
+        timestamp: string;
+        details?: any;
+    };
+}
+export declare const formatError: (error: Error | AppError, details?: any) => ErrorResponse;
+export declare const getErrorMessage: (error: Error | AppError) => string;

package/dist/errors.js

@@ -0,0 +1,73 @@
+// Shared error handling system
+export class AppError extends Error {
+    constructor(message, code = 'UNKNOWN_ERROR', statusCode = 500, isOperational = true) {
+        super(message);
+        this.name = 'AppError';
+        this.code = code;
+        this.statusCode = statusCode;
+        this.isOperational = isOperational;
+        // Ensure the stack trace is captured
+        Error.captureStackTrace(this, this.constructor);
+    }
+}
+// Predefined error types
+export class ValidationError extends AppError {
+    constructor(message, _field) {
+        super(message, 'VALIDATION_ERROR', 400);
+        this.name = 'ValidationError';
+    }
+}
+export class NetworkError extends AppError {
+    constructor(message = 'Chyba připojení k serveru') {
+        super(message, 'NETWORK_ERROR', 503);
+        this.name = 'NetworkError';
+    }
+}
+export class AuthenticationError extends AppError {
+    constructor(message = 'Neplatné přihlašovací údaje') {
+        super(message, 'AUTH_ERROR', 401);
+        this.name = 'AuthenticationError';
+    }
+}
+export class NotFoundError extends AppError {
+    constructor(resource = 'Zdroj') {
+        super(`${resource} nebyl nalezen`, 'NOT_FOUND', 404);
+        this.name = 'NotFoundError';
+    }
+}
+export const formatError = (error, details) => {
+    const isAppError = error instanceof AppError;
+    return {
+        success: false,
+        error: {
+            code: isAppError ? error.code : 'UNKNOWN_ERROR',
+            message: error.message || 'Došlo k neočekávané chybě',
+            timestamp: new Date().toISOString(),
+            ...(details && { details })
+        }
+    };
+};
+// Error handler hook for React components
+export const getErrorMessage = (error) => {
+    if (error instanceof NetworkError) {
+        return 'Problém s připojením. Zkuste to znovu.';
+    }
+    if (error instanceof ValidationError) {
+        return error.message;
+    }
+    if (error instanceof AuthenticationError) {
+        return 'Neplatné přihlašovací údaje.';
+    }
+    if (error instanceof NotFoundError) {
+        return error.message;
+    }
+    // Check for specific error messages
+    if (error.message.includes('Failed to fetch') || error.message.includes('fetch')) {
+        return 'Problém s připojením. Zkuste to znovu.';
+    }
+    if (error.message.includes('401') || error.message.includes('Unauthorized')) {
+        return 'Neplatné přihlašovací údaje.';
+    }
+    // Return original message if available, otherwise generic
+    return error.message || 'Něco se pokazilo. Zkuste to znovu.';
+};

package/dist/hooks/useApi.d.ts

@@ -0,0 +1,20 @@
+import { APIClient } from '../api';
+export interface ApiState<T> {
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+}
+export declare function useApi<T = any>(_apiClient: APIClient): {
+    execute: (apiCall: () => Promise<T>, options?: {
+        onSuccess?: (data: T) => void;
+        onError?: (error: Error) => void;
+        skipLoading?: boolean;
+    }) => Promise<T>;
+    reset: () => void;
+    isLoading: boolean;
+    hasError: boolean;
+    hasData: boolean;
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+};

package/dist/hooks/useApi.js

@@ -0,0 +1,51 @@
+import { useState, useCallback } from 'react';
+import { NetworkError, AppError } from '../errors';
+export function useApi(_apiClient) {
+    const [state, setState] = useState({
+        data: null,
+        loading: false,
+        error: null
+    });
+    const execute = useCallback(async (apiCall, options) => {
+        try {
+            if (!options?.skipLoading) {
+                setState(prev => ({ ...prev, loading: true, error: null }));
+            }
+            const data = await apiCall();
+            setState({
+                data,
+                loading: false,
+                error: null
+            });
+            options?.onSuccess?.(data);
+            return data;
+        }
+        catch (error) {
+            const appError = error instanceof AppError
+                ? error
+                : new NetworkError('Chyba při komunikaci se serverem');
+            setState(prev => ({
+                ...prev,
+                loading: false,
+                error: appError
+            }));
+            options?.onError?.(appError);
+            throw appError;
+        }
+    }, []);
+    const reset = useCallback(() => {
+        setState({
+            data: null,
+            loading: false,
+            error: null
+        });
+    }, []);
+    return {
+        ...state,
+        execute,
+        reset,
+        isLoading: state.loading,
+        hasError: !!state.error,
+        hasData: !!state.data
+    };
+}

package/dist/hooks/useAsyncOperation.d.ts

@@ -0,0 +1,21 @@
+interface UseAsyncOperationOptions<T> {
+    onSuccess?: (data: T) => void;
+    onError?: (error: Error) => void;
+    initialData?: T;
+}
+/**
+ * Consistent hook for handling async operations with loading states and error handling
+ */
+export declare function useAsyncOperation<T = any>(options?: UseAsyncOperationOptions<T>): {
+    execute: (operation: () => Promise<T>, context?: string) => Promise<T | null>;
+    reset: () => void;
+    setData: (data: T) => void;
+    isLoading: boolean;
+    hasError: boolean;
+    hasData: boolean;
+    isIdle: boolean;
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+};
+export {};

package/dist/hooks/useAsyncOperation.js

@@ -0,0 +1,58 @@
+import { useState, useCallback } from 'react';
+import { useErrorHandler } from './useErrorHandler';
+/**
+ * Consistent hook for handling async operations with loading states and error handling
+ */
+export function useAsyncOperation(options = {}) {
+    const [state, setState] = useState({
+        data: options.initialData || null,
+        loading: false,
+        error: null
+    });
+    const { handleError } = useErrorHandler();
+    const execute = useCallback(async (operation, context) => {
+        setState(prev => ({ ...prev, loading: true, error: null }));
+        try {
+            const result = await operation();
+            setState({
+                data: result,
+                loading: false,
+                error: null
+            });
+            options.onSuccess?.(result);
+            return result;
+        }
+        catch (error) {
+            const errorObj = error instanceof Error ? error : new Error(String(error));
+            setState(prev => ({
+                ...prev,
+                loading: false,
+                error: errorObj
+            }));
+            handleError(errorObj, context || 'useAsyncOperation');
+            options.onError?.(errorObj);
+            return null;
+        }
+    }, [handleError, options]);
+    const reset = useCallback(() => {
+        setState({
+            data: options.initialData || null,
+            loading: false,
+            error: null
+        });
+    }, [options.initialData]);
+    const setData = useCallback((data) => {
+        setState(prev => ({ ...prev, data }));
+    }, []);
+    return {
+        ...state,
+        execute,
+        reset,
+        setData,
+        // Computed properties
+        isLoading: state.loading,
+        hasError: !!state.error,
+        hasData: !!state.data,
+        isIdle: !state.loading && !state.error && !state.data
+    };
+}

package/dist/hooks/useErrorHandler.d.ts

@@ -0,0 +1,14 @@
+import { AppError } from '../errors';
+export interface ErrorState {
+    error: AppError | Error | null;
+    message: string;
+    isVisible: boolean;
+}
+export declare function useErrorHandler(): {
+    error: Error | AppError | null;
+    errorMessage: string;
+    isErrorVisible: boolean;
+    handleError: (error: Error | AppError, context?: string) => void;
+    clearError: () => void;
+    retryAction: (action: () => Promise<void> | void) => void;
+};

package/dist/hooks/useErrorHandler.js

@@ -0,0 +1,54 @@
+import { useCallback, useState } from 'react';
+import { getErrorMessage, formatError } from '../errors';
+export function useErrorHandler() {
+    const [errorState, setErrorState] = useState({
+        error: null,
+        message: '',
+        isVisible: false
+    });
+    const handleError = useCallback((error, context) => {
+        console.error(`Error in ${context || 'unknown context'}:`, error);
+        const userMessage = getErrorMessage(error);
+        setErrorState({
+            error,
+            message: userMessage,
+            isVisible: true
+        });
+        // Auto-hide error after 5 seconds
+        setTimeout(() => {
+            setErrorState(prev => ({ ...prev, isVisible: false }));
+        }, 5000);
+        // Send to monitoring service in production
+        if (process.env.NODE_ENV === 'production') {
+            // TODO: Integrate with monitoring service (Sentry, LogRocket, etc.)
+            console.warn('Production error logged:', formatError(error));
+        }
+    }, []);
+    const clearError = useCallback(() => {
+        setErrorState({
+            error: null,
+            message: '',
+            isVisible: false
+        });
+    }, []);
+    const retryAction = useCallback((action) => {
+        clearError();
+        try {
+            const result = action();
+            if (result instanceof Promise) {
+                result.catch(handleError);
+            }
+        }
+        catch (error) {
+            handleError(error);
+        }
+    }, [handleError, clearError]);
+    return {
+        error: errorState.error,
+        errorMessage: errorState.message,
+        isErrorVisible: errorState.isVisible,
+        handleError,
+        clearError,
+        retryAction
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from './types';
+export * from './api';
+export * from './constants';
+export * from './validation';
+export * from './errors';
+export * from './utils';
+export * from './hooks/useErrorHandler';
+export * from './hooks/useApi';
+export * from './hooks/useAsyncOperation';
+export * from './components/LoadingSpinner';
+export * from './components/ErrorDisplay';
+export * from './config/environments';
+export * from './config/logger';

package/dist/index.js

@@ -0,0 +1,15 @@
+// Shared package entry point
+export * from './types';
+export * from './api';
+export * from './constants';
+export * from './validation';
+export * from './errors';
+export * from './utils';
+// Note: ./utils exports getErrorMessage which shadows the one from ./errors
+export * from './hooks/useErrorHandler';
+export * from './hooks/useApi';
+export * from './hooks/useAsyncOperation';
+export * from './components/LoadingSpinner';
+export * from './components/ErrorDisplay';
+export * from './config/environments';
+export * from './config/logger';

package/dist/types.d.ts

@@ -0,0 +1,56 @@
+export interface Product {
+    id: number;
+    name: string;
+    price: number;
+    description: string;
+    image?: string;
+    imageUrl?: string;
+    quantityInStock: number;
+    clickedOn: number;
+    numberOfPurchases: number;
+}
+export interface PaymentData {
+    productId: number;
+    productName: string;
+    amount: number;
+    customerEmail: string;
+    qrCode: string;
+    paymentId: string;
+}
+export interface AdminProduct {
+    id: number;
+    name: string;
+    price: number;
+    description: string;
+    image: string;
+    imageUrl?: string;
+    active: boolean;
+    clickedOn: number;
+    qrCodesGenerated: number;
+    numberOfPurchases: number;
+    createdAt: string;
+    updatedAt: string;
+    quantityInStock?: number;
+}
+export interface ApiResponse<T> {
+    success: boolean;
+    data?: T;
+    message?: string;
+    error?: string;
+}
+export interface KioskStatus {
+    id: number;
+    name: string;
+    location: string;
+    online: boolean;
+    lastSeen: Date;
+    salesToday: number;
+}
+export interface WebSocketMessage {
+    type: string;
+    updateType?: string;
+    data?: any;
+    kioskId?: number;
+    timestamp?: string;
+}
+export type ScreenType = 'products' | 'payment' | 'confirmation' | 'admin-login' | 'admin-dashboard';

package/dist/types.js

@@ -0,0 +1,2 @@
+// Shared types across all packages
+export {};