create-nativecore 0.1.0 → 0.2.0

package/template/src/services/logger.service.ts

@@ -0,0 +1,74 @@
+/**
+ * Logger Service
+ */
+
+type LogLevel = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
+
+class Logger {
+    private levels = {
+        DEBUG: 0,
+        INFO: 1,
+        WARN: 2,
+        ERROR: 3,
+    };
+    
+    private currentLevel: number;
+    private enableRemoteLogging = false;
+    
+    constructor() {
+        this.currentLevel = this.isDevelopment() ? this.levels.DEBUG : this.levels.WARN;
+    }
+    
+    private isDevelopment(): boolean {
+        return window.location.hostname === 'localhost';
+    }
+    
+    setLevel(level: LogLevel): void {
+        this.currentLevel = this.levels[level] ?? this.levels.INFO;
+    }
+    
+    setRemoteLogging(enabled: boolean): void {
+        this.enableRemoteLogging = enabled;
+    }
+    
+    debug(message: string, ...data: any[]): void {
+        if (this.currentLevel <= this.levels.DEBUG) {
+            console.log(`[DEBUG] ${message}`, ...data);
+        }
+    }
+    
+    info(message: string, ...data: any[]): void {
+        if (this.currentLevel <= this.levels.INFO) {
+            console.log(`[INFO] ${message}`, ...data);
+        }
+    }
+    
+    warn(message: string, ...data: any[]): void {
+        if (this.currentLevel <= this.levels.WARN) {
+            console.warn(`[WARN] ${message}`, ...data);
+        }
+        this.sendToRemote('warn', message, data);
+    }
+    
+    error(message: string, ...data: any[]): void {
+        if (this.currentLevel <= this.levels.ERROR) {
+            console.error(`[ERROR] ${message}`, ...data);
+        }
+        this.sendToRemote('error', message, data);
+    }
+    
+    logRequest(method: string, url: string, data?: any): void {
+        this.debug(`API Request: ${method} ${url}`, data);
+    }
+    
+    logResponse(method: string, url: string, status: number, data?: any): void {
+        this.debug(`API Response: ${method} ${url} ${status}`, data);
+    }
+    
+    private sendToRemote(_level: string, _message: string, _data: any[]): void {
+        if (!this.enableRemoteLogging) return;
+        // TODO: Implement remote logging
+    }
+}
+
+export default new Logger();

package/template/src/services/storage.service.ts

@@ -0,0 +1,88 @@
+/**
+ * Secure Storage Service
+ * Handles secure storage of sensitive data
+ */
+
+type StorageStrategy = 'memory' | 'session' | 'local';
+
+class StorageService {
+    private memory: Record<string, string> = {};
+    private strategy: StorageStrategy = 'session';
+    
+    /**
+     * Set storage strategy
+     */
+    setStrategy(strategy: StorageStrategy): void {
+        if (['memory', 'session', 'local'].includes(strategy)) {
+            this.strategy = strategy;
+        }
+    }
+    
+    /**
+     * Get item from storage
+     */
+    get(key: string): string | null {
+        switch (this.strategy) {
+            case 'memory':
+                return this.memory[key] || null;
+            case 'session':
+                return sessionStorage.getItem(key);
+            case 'local':
+                return localStorage.getItem(key);
+            default:
+                return null;
+        }
+    }
+    
+    /**
+     * Set item in storage
+     */
+    set(key: string, value: string): void {
+        switch (this.strategy) {
+            case 'memory':
+                this.memory[key] = value;
+                break;
+            case 'session':
+                sessionStorage.setItem(key, value);
+                break;
+            case 'local':
+                localStorage.setItem(key, value);
+                break;
+        }
+    }
+    
+    /**
+     * Remove item from storage
+     */
+    remove(key: string): void {
+        switch (this.strategy) {
+            case 'memory':
+                delete this.memory[key];
+                break;
+            case 'session':
+                sessionStorage.removeItem(key);
+                break;
+            case 'local':
+                localStorage.removeItem(key);
+                break;
+        }
+    }
+    
+    /**
+     * Clear all storage
+     */
+    clear(): void {
+        this.memory = {};
+        sessionStorage.clear();
+        localStorage.clear();
+    }
+    
+    /**
+     * Check if key exists
+     */
+    has(key: string): boolean {
+        return this.get(key) !== null;
+    }
+}
+
+export default new StorageService();

package/template/src/stores/appStore.ts

@@ -0,0 +1,57 @@
+/**
+ * Global Application Store
+ * Manages global application state
+ */
+import { useState } from '../core/state.js';
+import type { State } from '../core/state.js';
+
+export interface User {
+    id: string | number;
+    email: string;
+    name?: string;
+    [key: string]: any;
+}
+
+class AppStore {
+    user: State<User | null>;
+    isLoading: State<boolean>;
+    error: State<string | null>;
+    count: State<number>;
+    
+    constructor() {
+        this.user = useState<User | null>(null);
+        this.isLoading = useState<boolean>(false);
+        this.error = useState<string | null>(null);
+        this.count = useState<number>(0);
+    }
+    
+    setUser(user: User | null): void {
+        this.user.value = user;
+    }
+    
+    setLoading(loading: boolean): void {
+        this.isLoading.value = loading;
+    }
+    
+    setError(error: string | null): void {
+        this.error.value = error;
+    }
+    
+    clearError(): void {
+        this.error.value = null;
+    }
+    
+    incrementCount(amount: number = 1): void {
+        this.count.value += amount;
+    }
+    
+    decrementCount(amount: number = 1): void {
+        this.count.value -= amount;
+    }
+    
+    resetCount(): void {
+        this.count.value = 0;
+    }
+}
+
+export const store = new AppStore();

package/template/src/stores/uiStore.ts

@@ -0,0 +1,36 @@
+/**
+ * UI State Store
+ * Manages UI-specific state
+ */
+import { useState } from '../core/state.js';
+import type { State } from '../core/state.js';
+
+class UIStore {
+    sidebarOpen: State<boolean>;
+    theme: State<'light' | 'dark'>;
+    notifications: State<any[]>;
+    
+    constructor() {
+        this.sidebarOpen = useState<boolean>(false);
+        this.theme = useState<'light' | 'dark'>('light');
+        this.notifications = useState<any[]>([]);
+    }
+    
+    toggleSidebar(): void {
+        this.sidebarOpen.value = !this.sidebarOpen.value;
+    }
+    
+    setTheme(theme: 'light' | 'dark'): void {
+        this.theme.value = theme;
+    }
+    
+    addNotification(notification: any): void {
+        this.notifications.value = [...this.notifications.value, notification];
+    }
+    
+    removeNotification(id: string): void {
+        this.notifications.value = this.notifications.value.filter(n => n.id !== id);
+    }
+}
+
+export const uiStore = new UIStore();

package/template/src/styles/core-variables.css

@@ -0,0 +1,219 @@
+/**
+ * NativeCore Framework - Core Variables
+ * 
+ * ⚠️ FRAMEWORK INTERNAL USE ONLY - DO NOT MODIFY ⚠️
+ * 
+ * These variables are reserved for NativeCore's built-in components.
+ * All variables are prefixed with --nc- to prevent conflicts.
+ * 
+ * For your own components and customization, use variables.css instead.
+ * 
+ * Optional Theming: You can override framework colors by setting
+ * --nc-theme-* variables in variables.css (see examples at bottom).
+ */
+
+:root {
+    /* ============================================
+       CORE BRAND COLORS (Framework Reserved)
+       ============================================ */
+    --nc-primary: var(--nc-theme-primary, #10b981);
+    --nc-primary-light: var(--nc-theme-primary-light, #34d399);
+    --nc-primary-dark: var(--nc-theme-primary-dark, #059669);
+    --nc-secondary: var(--nc-theme-secondary, #3b82f6);
+    --nc-accent: var(--nc-theme-accent, #0f172a);
+    
+    /* ============================================
+       SEMANTIC COLORS
+       ============================================ */
+    --nc-success: #10b981;
+    --nc-success-light: #34d399;
+    --nc-success-dark: #059669;
+    
+    --nc-warning: #f59e0b;
+    --nc-warning-light: #fbbf24;
+    --nc-warning-dark: #d97706;
+    
+    --nc-danger: #ef4444;
+    --nc-danger-light: #f87171;
+    --nc-danger-dark: #dc2626;
+    
+    --nc-info: #3b82f6;
+    --nc-info-light: #60a5fa;
+    --nc-info-dark: #2563eb;
+    
+    /* ============================================
+       NEUTRAL COLORS
+       ============================================ */
+    --nc-white: #ffffff;
+    --nc-black: #000000;
+    
+    --nc-gray-50: #f8fafc;
+    --nc-gray-100: #f1f5f9;
+    --nc-gray-200: #e2e8f0;
+    --nc-gray-300: #cbd5e1;
+    --nc-gray-400: #94a3b8;
+    --nc-gray-500: #64748b;
+    --nc-gray-600: #475569;
+    --nc-gray-700: #334155;
+    --nc-gray-800: #1e293b;
+    --nc-gray-900: #0f172a;
+    
+    /* ============================================
+       TEXT COLORS
+       ============================================ */
+    --nc-text: #0f172a;
+    --nc-text-secondary: #64748b;
+    --nc-text-muted: #94a3b8;
+    --nc-text-inverse: var(--nc-white);
+    
+    /* ============================================
+       BACKGROUND COLORS
+       ============================================ */
+    --nc-bg: var(--nc-white);
+    --nc-bg-secondary: var(--nc-gray-50);
+    --nc-bg-tertiary: var(--nc-gray-100);
+    --nc-bg-dark: var(--nc-gray-900);
+    
+    /* ============================================
+       BORDER & DIVIDERS
+       ============================================ */
+    --nc-border: var(--nc-gray-200);
+    --nc-border-dark: var(--nc-gray-300);
+    --nc-divider: var(--nc-gray-100);
+    
+    /* ============================================
+       GRADIENTS
+       ============================================ */
+    --nc-gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    --nc-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    --nc-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    --nc-gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    --nc-gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 100%);
+    
+    /* ============================================
+       SHADOWS
+       ============================================ */
+    --nc-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --nc-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+    --nc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+    --nc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
+    --nc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --nc-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+    --nc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    
+    /* Colored shadows for components */
+    --nc-shadow-primary: 0 4px 12px rgba(16, 185, 129, 0.25);
+    --nc-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.25);
+    --nc-shadow-danger: 0 4px 12px rgba(239, 68, 68, 0.25);
+    
+    /* ============================================
+       TYPOGRAPHY
+       ============================================ */
+    --nc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --nc-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+    
+    --nc-font-size-xs: 0.75rem;      /* 12px */
+    --nc-font-size-sm: 0.875rem;     /* 14px */
+    --nc-font-size-base: 1rem;       /* 16px */
+    --nc-font-size-lg: 1.125rem;     /* 18px */
+    --nc-font-size-xl: 1.25rem;      /* 20px */
+    --nc-font-size-2xl: 1.5rem;      /* 24px */
+    
+    --nc-font-weight-normal: 400;
+    --nc-font-weight-medium: 500;
+    --nc-font-weight-semibold: 600;
+    --nc-font-weight-bold: 700;
+    
+    --nc-line-height-tight: 1.25;
+    --nc-line-height-normal: 1.5;
+    --nc-line-height-relaxed: 1.75;
+    
+    /* ============================================
+       SPACING SYSTEM
+       ============================================ */
+    --nc-spacing-xs: 0.25rem;    /* 4px */
+    --nc-spacing-sm: 0.5rem;     /* 8px */
+    --nc-spacing-md: 1rem;       /* 16px */
+    --nc-spacing-lg: 1.5rem;     /* 24px */
+    --nc-spacing-xl: 2rem;       /* 32px */
+    --nc-spacing-2xl: 3rem;      /* 48px */
+    
+    /* ============================================
+       BORDER RADIUS
+       ============================================ */
+    --nc-radius-sm: 0.25rem;     /* 4px */
+    --nc-radius-md: 0.5rem;      /* 8px */
+    --nc-radius-lg: 0.75rem;     /* 12px */
+    --nc-radius-xl: 1rem;        /* 16px */
+    --nc-radius-2xl: 1.5rem;     /* 24px */
+    --nc-radius-full: 9999px;
+    
+    /* ============================================
+       TRANSITIONS & ANIMATIONS
+       ============================================ */
+    --nc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --nc-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --nc-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+    
+    --nc-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --nc-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --nc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    
+    /* ============================================
+       Z-INDEX SCALE
+       ============================================ */
+    --nc-z-base: 1;
+    --nc-z-dropdown: 1000;
+    --nc-z-sticky: 1020;
+    --nc-z-fixed: 1030;
+    --nc-z-modal-backdrop: 1040;
+    --nc-z-modal: 1050;
+    --nc-z-popover: 1060;
+    --nc-z-tooltip: 1070;
+    --nc-z-notification: 1080;
+    
+    /* ============================================
+       COMPONENT-SPECIFIC
+       ============================================ */
+    
+    /* Buttons */
+    --nc-button-padding-sm: var(--nc-spacing-xs) var(--nc-spacing-md);
+    --nc-button-padding-md: var(--nc-spacing-sm) var(--nc-spacing-lg);
+    --nc-button-padding-lg: var(--nc-spacing-md) var(--nc-spacing-xl);
+    --nc-button-radius: var(--nc-radius-md);
+    
+    /* Inputs */
+    --nc-input-padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+    --nc-input-radius: var(--nc-radius-md);
+    --nc-input-border: 1px solid var(--nc-border);
+    --nc-input-focus-border: var(--nc-primary);
+    
+    /* Cards */
+    --nc-card-padding: var(--nc-spacing-lg);
+    --nc-card-radius: var(--nc-radius-lg);
+    --nc-card-shadow: var(--nc-shadow-sm);
+    
+    /* Header */
+    --nc-header-height: 70px;
+    --nc-header-bg: var(--nc-bg);
+    --nc-header-border: var(--nc-border);
+    
+    /* Sidebar */
+    --nc-sidebar-width: 280px;
+    --nc-sidebar-bg: var(--nc-bg);
+    --nc-sidebar-border: var(--nc-border);
+}
+
+/* ============================================
+   THEMING EXAMPLE (for developers)
+   ============================================
+   
+   To customize the framework's primary color, add this to variables.css:
+   
+   :root {
+     --nc-theme-primary: #your-color;
+     --nc-theme-primary-light: #your-light-color;
+     --nc-theme-primary-dark: #your-dark-color;
+   }
+   
+   ============================================ */