pi-kiosk-shared 1.0.0

package/README.md

@@ -0,0 +1,85 @@
+# @pi-kiosk/shared
+
+Shared components, utilities, and types for the Pi Kiosk system.
+
+## Installation
+
+```bash
+npm install @pi-kiosk/shared
+```
+
+## Usage
+
+### Components
+
+```tsx
+import { ErrorDisplay, LoadingSpinner } from '@pi-kiosk/shared';
+
+function MyComponent() {
+  return (
+    <div>
+      <LoadingSpinner />
+      <ErrorDisplay error={new Error('Something went wrong')} />
+    </div>
+  );
+}
+```
+
+### Types
+
+```tsx
+import { Product, ApiResponse, KioskStatus } from '@pi-kiosk/shared';
+
+const product: Product = {
+  id: 1,
+  name: 'Coffee',
+  price: 25.0,
+  description: 'Fresh coffee',
+  image: '☕',
+  quantityInStock: 10,
+  clickedOn: 0,
+  numberOfPurchases: 0,
+};
+```
+
+### Hooks
+
+```tsx
+import { useApi, useErrorHandler } from '@pi-kiosk/shared';
+
+function MyComponent() {
+  const api = useApi();
+  const { handleError } = useErrorHandler();
+
+  // Use the hooks...
+}
+```
+
+### Utilities
+
+```tsx
+import { formatPrice, validateEmail } from '@pi-kiosk/shared';
+
+const price = formatPrice(25.5); // "25,50 Kč"
+const isValid = validateEmail('user@example.com'); // true
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Run tests
+npm test
+
+# Watch mode for development
+npm run dev
+```
+
+## License
+
+MIT

package/dist/api.d.ts

@@ -0,0 +1,20 @@
+export declare const API_ENDPOINTS: {
+    readonly PRODUCTS: "/api/products";
+    readonly PRODUCT_CLICK: "/api/products/:id/click";
+    readonly ADMIN_LOGIN: "/admin/login";
+    readonly ADMIN_PRODUCTS: "/admin/products";
+    readonly ADMIN_KIOSKS: "/admin/kiosks";
+    readonly HEALTH: "/health";
+    readonly CHECK_TRANSACTIONS: "/api/check-new-transactions";
+};
+export declare class APIClient {
+    private baseUrl;
+    private kioskSecret?;
+    constructor(baseUrl: string, kioskSecret?: string);
+    private request;
+    get<T>(endpoint: string): Promise<T>;
+    post<T>(endpoint: string, data?: any): Promise<T>;
+    put<T>(endpoint: string, data?: any): Promise<T>;
+    delete<T>(endpoint: string): Promise<T>;
+}
+export declare const createAPIClient: (baseUrl?: string, kioskSecret?: string) => APIClient;

package/dist/api.js

@@ -0,0 +1,57 @@
+// Shared API utilities
+export const API_ENDPOINTS = {
+    PRODUCTS: '/api/products',
+    PRODUCT_CLICK: '/api/products/:id/click',
+    ADMIN_LOGIN: '/admin/login',
+    ADMIN_PRODUCTS: '/admin/products',
+    ADMIN_KIOSKS: '/admin/kiosks',
+    HEALTH: '/health',
+    CHECK_TRANSACTIONS: '/api/check-new-transactions'
+};
+export class APIClient {
+    constructor(baseUrl, kioskSecret) {
+        this.baseUrl = baseUrl.replace(/\/$/, ''); // Remove trailing slash
+        this.kioskSecret = kioskSecret;
+    }
+    async request(endpoint, options = {}) {
+        const url = `${this.baseUrl}${endpoint}`;
+        const headers = {
+            'Content-Type': 'application/json',
+            ...(options.headers || {}),
+        };
+        // Add kiosk secret if available
+        if (this.kioskSecret) {
+            headers['X-Kiosk-Secret'] = this.kioskSecret;
+        }
+        const response = await fetch(url, {
+            ...options,
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async get(endpoint) {
+        return this.request(endpoint, { method: 'GET' });
+    }
+    async post(endpoint, data) {
+        return this.request(endpoint, {
+            method: 'POST',
+            body: data ? JSON.stringify(data) : undefined,
+        });
+    }
+    async put(endpoint, data) {
+        return this.request(endpoint, {
+            method: 'PUT',
+            body: data ? JSON.stringify(data) : undefined,
+        });
+    }
+    async delete(endpoint) {
+        return this.request(endpoint, { method: 'DELETE' });
+    }
+}
+export const createAPIClient = (baseUrl, kioskSecret) => {
+    const url = baseUrl || process.env.REACT_APP_API_URL || 'http://localhost:3015';
+    return new APIClient(url, kioskSecret);
+};

package/dist/components/ErrorDisplay.d.ts

@@ -0,0 +1,12 @@
+import { AppError } from '../errors';
+interface ErrorDisplayProps {
+    error: Error | AppError;
+    onRetry?: () => void;
+    onDismiss?: () => void;
+    className?: string;
+    showDetails?: boolean;
+    retryLabel?: string;
+    dismissLabel?: string;
+}
+export declare function ErrorDisplay({ error, onRetry, onDismiss, className, showDetails, retryLabel, dismissLabel }: ErrorDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ErrorDisplay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getErrorMessage } from '../errors';
+import { CSS_CLASSES } from '../constants';
+export function ErrorDisplay({ error, onRetry, onDismiss, className = '', showDetails = false, retryLabel = 'Zkusit znovu', dismissLabel = 'Zavřít' }) {
+    const userMessage = getErrorMessage(error);
+    const isNetworkError = error.name === 'NetworkError';
+    return (_jsx("div", { className: `error-display ${CSS_CLASSES.ERROR} ${className}`, role: "alert", "aria-live": "assertive", children: _jsxs("div", { className: "error-content", children: [_jsx("div", { className: "error-icon", "aria-hidden": "true", children: isNetworkError ? '🌐' : '❌' }), _jsxs("div", { className: "error-text", children: [_jsx("h3", { className: "error-title", children: isNetworkError ? 'Problém s připojením' : 'Došlo k chybě' }), _jsx("p", { className: "error-message", children: userMessage })] }), showDetails && process.env.NODE_ENV === 'development' && (_jsxs("details", { className: "error-details", children: [_jsx("summary", { children: "Technick\u00E9 detaily" }), _jsx("pre", { className: "error-stack", children: _jsx("code", { children: error.stack || error.message }) })] })), _jsxs("div", { className: "error-actions", children: [onRetry && (_jsxs("button", { onClick: onRetry, className: `retry-btn ${CSS_CLASSES.BUTTON_PRIMARY}`, type: "button", children: ["\uD83D\uDD04 ", retryLabel] })), onDismiss && (_jsxs("button", { onClick: onDismiss, className: `dismiss-btn ${CSS_CLASSES.BUTTON_SECONDARY}`, type: "button", children: ["\u2715 ", dismissLabel] }))] })] }) }));
+}

package/dist/components/LoadingSpinner.d.ts

@@ -0,0 +1,8 @@
+interface LoadingSpinnerProps {
+    size?: 'small' | 'medium' | 'large';
+    message?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function LoadingSpinner({ size, message, className, 'aria-label': ariaLabel }: LoadingSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingSpinner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CSS_CLASSES } from '../constants';
+export function LoadingSpinner({ size = 'medium', message, className = '', 'aria-label': ariaLabel = 'Loading' }) {
+    const sizeClass = {
+        small: 'spinner-small',
+        medium: 'spinner-medium',
+        large: 'spinner-large'
+    }[size];
+    return (_jsxs("div", { className: `loading-container ${CSS_CLASSES.LOADING} ${className}`, children: [_jsx("div", { className: `spinner ${sizeClass}`, role: "status", "aria-label": ariaLabel, children: _jsx("span", { className: "sr-only", children: ariaLabel }) }), message && (_jsx("p", { className: "loading-message", "aria-live": "polite", children: message }))] }));
+}

package/dist/config/deployment.d.ts

@@ -0,0 +1,96 @@
+export interface DeploymentConfig {
+    railway: {
+        testService: string;
+        stagingService: string;
+        productionService: string;
+    };
+    environmentVariables: {
+        test: Record<string, string>;
+        staging: Record<string, string>;
+        production: Record<string, string>;
+    };
+    database: {
+        test: string;
+        staging: string;
+        production: string;
+    };
+}
+export declare const deploymentConfig: DeploymentConfig;
+export declare const railwayConfigs: {
+    test: {
+        build: {
+            builder: string;
+        };
+        deploy: {
+            healthcheckPath: string;
+            healthcheckTimeout: number;
+            restartPolicyType: string;
+        };
+        services: ({
+            name: string;
+            source: string;
+            env: {
+                PORT: string;
+                FIO_API_MODE: string;
+            };
+            buildCommand?: undefined;
+            startCommand?: undefined;
+        } | {
+            name: string;
+            source: string;
+            buildCommand: string;
+            startCommand: string;
+            env: Record<string, string>;
+        })[];
+    };
+    staging: {
+        build: {
+            builder: string;
+        };
+        deploy: {
+            healthcheckPath: string;
+            healthcheckTimeout: number;
+            restartPolicyType: string;
+        };
+        services: ({
+            name: string;
+            source: string;
+            env: {
+                PORT: string;
+            };
+            buildCommand?: undefined;
+            startCommand?: undefined;
+        } | {
+            name: string;
+            source: string;
+            buildCommand: string;
+            startCommand: string;
+            env: Record<string, string>;
+        })[];
+    };
+    production: {
+        build: {
+            builder: string;
+        };
+        deploy: {
+            healthcheckPath: string;
+            healthcheckTimeout: number;
+            restartPolicyType: string;
+        };
+        services: ({
+            name: string;
+            source: string;
+            env: {
+                PORT: string;
+            };
+            buildCommand?: undefined;
+            startCommand?: undefined;
+        } | {
+            name: string;
+            source: string;
+            buildCommand: string;
+            startCommand: string;
+            env: Record<string, string>;
+        })[];
+    };
+};

package/dist/config/deployment.js

@@ -0,0 +1,153 @@
+// Deployment configuration for different modes and platforms
+export const deploymentConfig = {
+    railway: {
+        testService: 'kiosk-test',
+        stagingService: 'kiosk-staging',
+        productionService: 'kiosk-production'
+    },
+    environmentVariables: {
+        test: {
+            'NODE_ENV': 'test',
+            'REACT_APP_ENVIRONMENT': 'test',
+            'REACT_APP_API_URL': 'https://kiosk-test.railway.app',
+            'REACT_APP_WS_URL': 'wss://kiosk-test.railway.app',
+            'REACT_APP_PAYMENT_MODE': 'mock',
+            'REACT_APP_ENABLE_MOCK_PAYMENTS': 'true',
+            'REACT_APP_SHOW_DEBUG_INFO': 'true',
+            'REACT_APP_LOG_LEVEL': 'debug'
+        },
+        staging: {
+            'NODE_ENV': 'production',
+            'REACT_APP_ENVIRONMENT': 'staging',
+            'REACT_APP_API_URL': 'https://kiosk-staging.railway.app',
+            'REACT_APP_WS_URL': 'wss://kiosk-staging.railway.app',
+            'REACT_APP_PAYMENT_MODE': 'sandbox',
+            'REACT_APP_ENABLE_MOCK_PAYMENTS': 'false',
+            'REACT_APP_SHOW_DEBUG_INFO': 'false',
+            'REACT_APP_LOG_LEVEL': 'info',
+            'REACT_APP_ENABLE_ERROR_REPORTING': 'true'
+        },
+        production: {
+            'NODE_ENV': 'production',
+            'REACT_APP_ENVIRONMENT': 'production',
+            'REACT_APP_API_URL': 'https://kiosk-prod.railway.app',
+            'REACT_APP_WS_URL': 'wss://kiosk-prod.railway.app',
+            'REACT_APP_PAYMENT_MODE': 'production',
+            'REACT_APP_ENABLE_MOCK_PAYMENTS': 'false',
+            'REACT_APP_SHOW_DEBUG_INFO': 'false',
+            'REACT_APP_LOG_LEVEL': 'warn',
+            'REACT_APP_ENABLE_ERROR_REPORTING': 'true'
+        }
+    },
+    database: {
+        test: 'postgresql://test_user:test_pass@localhost:5432/kiosk_test',
+        staging: '${DATABASE_URL}', // Railway provides this
+        production: '${DATABASE_URL}' // Railway provides this
+    }
+};
+// Railway deployment configuration files
+export const railwayConfigs = {
+    test: {
+        build: {
+            builder: 'NIXPACKS'
+        },
+        deploy: {
+            healthcheckPath: '/health',
+            healthcheckTimeout: 300,
+            restartPolicyType: 'ON_FAILURE'
+        },
+        services: [
+            {
+                name: 'kiosk-backend-test',
+                source: './packages/backend',
+                env: {
+                    ...deploymentConfig.environmentVariables.test,
+                    PORT: '3000',
+                    FIO_API_MODE: 'test'
+                }
+            },
+            {
+                name: 'kiosk-frontend-test',
+                source: './packages/kiosk-app',
+                buildCommand: 'npm run build',
+                startCommand: 'npx serve -s dist -l 5173',
+                env: deploymentConfig.environmentVariables.test
+            },
+            {
+                name: 'admin-frontend-test',
+                source: './packages/admin-app',
+                buildCommand: 'npm run build',
+                startCommand: 'npx serve -s dist -l 5174',
+                env: deploymentConfig.environmentVariables.test
+            }
+        ]
+    },
+    staging: {
+        build: {
+            builder: 'NIXPACKS'
+        },
+        deploy: {
+            healthcheckPath: '/health',
+            healthcheckTimeout: 300,
+            restartPolicyType: 'ON_FAILURE'
+        },
+        services: [
+            {
+                name: 'kiosk-backend-staging',
+                source: './packages/backend',
+                env: {
+                    ...deploymentConfig.environmentVariables.staging,
+                    PORT: '3000'
+                }
+            },
+            {
+                name: 'kiosk-frontend-staging',
+                source: './packages/kiosk-app',
+                buildCommand: 'npm run build',
+                startCommand: 'npx serve -s dist -l 5173',
+                env: deploymentConfig.environmentVariables.staging
+            },
+            {
+                name: 'admin-frontend-staging',
+                source: './packages/admin-app',
+                buildCommand: 'npm run build',
+                startCommand: 'npx serve -s dist -l 5174',
+                env: deploymentConfig.environmentVariables.staging
+            }
+        ]
+    },
+    production: {
+        build: {
+            builder: 'NIXPACKS'
+        },
+        deploy: {
+            healthcheckPath: '/health',
+            healthcheckTimeout: 300,
+            restartPolicyType: 'ON_FAILURE'
+        },
+        services: [
+            {
+                name: 'kiosk-backend-prod',
+                source: './packages/backend',
+                env: {
+                    ...deploymentConfig.environmentVariables.production,
+                    PORT: '3000'
+                }
+            },
+            {
+                name: 'kiosk-frontend-prod',
+                source: './packages/kiosk-app',
+                buildCommand: 'npm run build',
+                startCommand: 'npx serve -s dist -l 5173',
+                env: deploymentConfig.environmentVariables.production
+            },
+            {
+                name: 'admin-frontend-prod',
+                source: './packages/admin-app',
+                buildCommand: 'npm run build',
+                startCommand: 'npx serve -s dist -l 5174',
+                env: deploymentConfig.environmentVariables.production
+            }
+        ]
+    }
+};

package/dist/config/environments.d.ts

@@ -0,0 +1,13 @@
+export type Environment = 'development' | 'production';
+export interface EnvironmentConfig {
+    apiUrl: string;
+    wsUrl: string;
+    enableMockPayments: boolean;
+    paymentAccountNumber: string;
+    showDebugInfo: boolean;
+}
+export declare const environments: Record<Environment, EnvironmentConfig>;
+export declare const getCurrentEnvironment: () => Environment;
+export declare const getEnvironmentConfig: () => EnvironmentConfig;
+export declare const isDevelopment: () => boolean;
+export declare const isProduction: () => boolean;

package/dist/config/environments.js

@@ -0,0 +1,29 @@
+// Simple environment configuration
+export const environments = {
+    development: {
+        apiUrl: 'http://localhost:3015',
+        wsUrl: 'ws://localhost:3015',
+        enableMockPayments: true,
+        paymentAccountNumber: '1234567890',
+        showDebugInfo: true,
+    },
+    production: {
+        apiUrl: process.env.REACT_APP_API_URL || 'https://kiosk-prod.railway.app',
+        wsUrl: process.env.REACT_APP_WS_URL || 'wss://kiosk-prod.railway.app',
+        enableMockPayments: false,
+        paymentAccountNumber: process.env.REACT_APP_PAYMENT_ACCOUNT || '1234567890',
+        showDebugInfo: false,
+    }
+};
+// Simple environment detection
+export const getCurrentEnvironment = () => {
+    return process.env.NODE_ENV === 'production' ? 'production' : 'development';
+};
+// Get current environment configuration
+export const getEnvironmentConfig = () => {
+    const env = getCurrentEnvironment();
+    return environments[env];
+};
+// Simple environment checks
+export const isDevelopment = () => getCurrentEnvironment() === 'development';
+export const isProduction = () => getCurrentEnvironment() === 'production';

package/dist/config/environments.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/config/environments.test.js

@@ -0,0 +1,49 @@
+// Tests for environment configuration
+import { getCurrentEnvironment, getEnvironmentConfig, isDevelopment, isProduction } from './environments';
+describe('Environment Configuration', () => {
+    const originalEnv = process.env.NODE_ENV;
+    afterEach(() => {
+        process.env.NODE_ENV = originalEnv;
+    });
+    describe('getCurrentEnvironment', () => {
+        test('returns development for non-production environments', () => {
+            process.env.NODE_ENV = 'development';
+            expect(getCurrentEnvironment()).toBe('development');
+            process.env.NODE_ENV = 'test';
+            expect(getCurrentEnvironment()).toBe('development');
+            delete process.env.NODE_ENV;
+            expect(getCurrentEnvironment()).toBe('development');
+        });
+        test('returns production for production environment', () => {
+            process.env.NODE_ENV = 'production';
+            expect(getCurrentEnvironment()).toBe('production');
+        });
+    });
+    describe('getEnvironmentConfig', () => {
+        test('returns development config by default', () => {
+            process.env.NODE_ENV = 'development';
+            const config = getEnvironmentConfig();
+            expect(config.apiUrl).toBe('http://localhost:3015');
+            expect(config.enableMockPayments).toBe(true);
+            expect(config.showDebugInfo).toBe(true);
+        });
+        test('returns production config for production', () => {
+            process.env.NODE_ENV = 'production';
+            const config = getEnvironmentConfig();
+            expect(config.enableMockPayments).toBe(false);
+            expect(config.showDebugInfo).toBe(false);
+        });
+    });
+    describe('environment checks', () => {
+        test('isDevelopment works correctly', () => {
+            process.env.NODE_ENV = 'development';
+            expect(isDevelopment()).toBe(true);
+            expect(isProduction()).toBe(false);
+        });
+        test('isProduction works correctly', () => {
+            process.env.NODE_ENV = 'production';
+            expect(isDevelopment()).toBe(false);
+            expect(isProduction()).toBe(true);
+        });
+    });
+});

package/dist/config/logger.d.ts

@@ -0,0 +1,40 @@
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+export interface LogEntry {
+    level: LogLevel;
+    message: string;
+    context?: string;
+    data?: any;
+    timestamp: string;
+    environment: string;
+    sessionId: string;
+}
+declare class Logger {
+    private sessionId;
+    private config;
+    constructor();
+    private shouldLog;
+    private formatMessage;
+    private log;
+    private sendToExternalService;
+    private storeLogEntry;
+    debug(message: string, context?: string, data?: any): void;
+    info(message: string, context?: string, data?: any): void;
+    warn(message: string, context?: string, data?: any): void;
+    error(message: string, context?: string, data?: any): void;
+    kioskAction(action: string, kioskId: number, data?: any): void;
+    paymentEvent(event: string, paymentId: string, data?: any): void;
+    apiCall(method: string, endpoint: string, duration?: number, error?: Error): void;
+    getLogs(): LogEntry[];
+    clearLogs(): void;
+}
+export declare const logger: Logger;
+export declare const log: {
+    debug: (message: string, context?: string, data?: any) => void;
+    info: (message: string, context?: string, data?: any) => void;
+    warn: (message: string, context?: string, data?: any) => void;
+    error: (message: string, context?: string, data?: any) => void;
+    kioskAction: (action: string, kioskId: number, data?: any) => void;
+    paymentEvent: (event: string, paymentId: string, data?: any) => void;
+    apiCall: (method: string, endpoint: string, duration?: number, error?: Error) => void;
+};
+export {};