create-nativecore 0.1.1 → 0.2.0

package/template/src/app.ts

@@ -0,0 +1,115 @@
+/**
+ * Main Application Entry Point
+ */
+import router from './core/router.js';
+import auth from './services/auth.service.js';
+import type { User } from './services/auth.service.js';
+import api from './services/api.service.js';
+import { authMiddleware } from './middleware/auth.middleware.js';
+import { registerRoutes, protectedRoutes } from './routes/routes.js';
+import { initSidebar } from './utils/sidebar.js';
+import { initLazyComponents } from './core/lazyComponents.js';
+import './utils/dom.js';
+import './components/registry.js';
+
+function isLocalhost(): boolean {
+    const hostname = window.location.hostname;
+    return hostname === 'localhost' || 
+        hostname === '127.0.0.1' || 
+        hostname.startsWith('192.168.') ||
+        hostname.endsWith('.local');
+}
+
+function updateSidebarVisibility() {
+    const isAuthenticated = auth.isAuthenticated();
+    const currentPath = window.location.pathname;
+    const isProtectedRoute = protectedRoutes.some(route => currentPath.startsWith(route));
+    const app = document.getElementById('app');
+
+    // Show sidebar only when authenticated AND on a protected route
+    if (isAuthenticated && isProtectedRoute) {
+        document.body.classList.add('sidebar-enabled');
+        app?.classList.remove('no-sidebar');
+    } else {
+        document.body.classList.remove('sidebar-enabled');
+        app?.classList.add('no-sidebar');
+    }
+}
+
+async function verifyExistingSession(): Promise<void> {
+    if (!auth.getToken()) {
+        return;
+    }
+
+    try {
+        const response = await api.get<{ authenticated: boolean; user?: User }>('/auth/verify');
+        if (!response?.authenticated || !response.user) {
+            auth.logout();
+            return;
+        }
+
+        auth.setUser(response.user);
+    } catch {
+        auth.logout();
+    }
+}
+
+async function init(){
+    await verifyExistingSession();
+    await initLazyComponents();
+    
+    // Expose router globally for components
+    (window as any).router = router;
+    
+    router.use(authMiddleware);
+    registerRoutes(router);
+    router.start();
+    
+    initSidebar();
+    
+    // Update sidebar on auth changes
+    window.addEventListener('auth-change', () => {
+        const isAuth = auth.isAuthenticated();
+        if (!isAuth) {
+            router.replace('/login');
+            document.body.classList.remove('sidebar-enabled');
+            document.getElementById('app')?.classList.remove('sidebar-collapsed');
+            document.getElementById('app')?.classList.add('no-sidebar');
+        } else {
+            updateSidebarVisibility();
+        }
+    });
+    
+    // Update sidebar on navigation
+    window.addEventListener('pageloaded', () => {
+        updateSidebarVisibility();
+    });
+    
+    // Initialize Dev Tools (ONLY in development - localhost)
+    initDevTools();
+}
+
+/**
+ * Initialize Dev Tools
+ * SECURITY: Only loads on localhost, completely excluded from production builds
+ */
+function initDevTools(): void {
+    if (!isLocalhost()) {
+        return; // SECURITY: Never load dev tools on production
+    }
+    
+    // Load HMR and dev tools (both TypeScript modules now)
+    Promise.all([
+        import('./dev/hmr.js'),
+        import('./dev/denc-tools.js')
+    ])
+        .then(() => {
+            console.warn('[NativeCore] Dev tools loaded');
+            (window as any).__NATIVECORE_DEV__ = true;
+        })
+        .catch(() => {
+            // Dev tools not available - that's fine in production
+        });
+}
+
+init();

package/template/src/components/appRegistry.ts

@@ -0,0 +1,8 @@
+import { componentRegistry } from '@core/lazyComponents.js';
+
+export function registerAppComponents(): void {
+    componentRegistry.register('app-footer', './core/app-footer.js');
+    componentRegistry.register('app-header', './core/app-header.js');
+    componentRegistry.register('app-sidebar', './core/app-sidebar.js');
+    componentRegistry.register('dashboard-signal-lab', './ui/dashboard-signal-lab.js');
+}

package/template/src/components/core/app-footer.ts

@@ -0,0 +1,27 @@
+/**
+ * App Footer Component
+ * Reusable footer
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+class AppFooter extends Component {
+    template() {
+        const year = new Date().getFullYear();
+        
+        return `
+            <footer class="app-footer">
+                <div class="container">
+                    <p>&copy; ${year} MyApp. All rights reserved.</p>
+                    <div class="footer-links">
+                        <a href="/about" data-link>About</a>
+                        <a href="/privacy" data-link>Privacy</a>
+                        <a href="/terms" data-link>Terms</a>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+defineComponent('app-footer', AppFooter);
+export default AppFooter;

package/template/src/components/core/app-header.ts

@@ -0,0 +1,175 @@
+/**
+ * App Header Component
+ * Beautiful responsive header with mobile side drawer
+ */
+import { Component, defineComponent } from '@core/component.js';
+import router from '@core/router.js';
+import auth from '@services/auth.service.js';
+import './nc-avatar.js';
+
+class AppHeader extends Component {
+    // Bound references so addEventListener and removeEventListener use the same fn
+    private readonly _handleClick = (e: Event) => this._onClick(e);
+    private readonly _onAuthChange = () => this.updateAuthSection();
+    private readonly _onUnauthorized = () => this.updateAuthSection();
+    private readonly _onPageLoaded = (event: Event) => {
+        const routeEvent = event as CustomEvent<{ path?: string }>;
+        this.updateActiveLink(routeEvent.detail?.path);
+    };
+    private _onScroll: (() => void) | null = null;
+
+    constructor() {
+        super();
+    }
+
+    private renderUserMenu(): string {
+        const user = auth.getUser();
+        const userName = user?.name || 'User';
+
+        return `
+            <div class="user-menu desktop-only">
+                <nc-avatar alt="${userName}" size="sm" variant="primary"></nc-avatar>
+                <span class="user-name">${userName}</span>
+                <button class="header-logout-btn" id="logoutBtn">Sign out</button>
+            </div>
+        `;
+    }
+
+    template() {
+        const isAuthenticated = auth.isAuthenticated();
+        const logoHref = isAuthenticated ? '/dashboard' : '/';
+
+        return `
+                <div class="header-container">
+                    <div class="header-left">
+                        ${isAuthenticated ? `
+                            <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle sidebar">
+                                <span class="burger-line"></span>
+                                <span class="burger-line"></span>
+                                <span class="burger-line"></span>
+                            </button>
+                        ` : ''}
+
+                        <a href="${logoHref}" class="logo" id="logoLink">
+                            <img class="logo-mark" src="/assets/logo.svg" alt="NativeCore logo">
+                            <span class="logo-title">NativeCore</span>
+                        </a>
+                    </div>
+
+                    <nav class="header-nav desktop-nav">
+                        ${!isAuthenticated ? `
+                            <a href="/" data-link class="nanc-link">Home</a>
+                            <a href="/docs" data-link class="nanc-link">Docs</a>
+                            <a href="/components" data-link class="nanc-link">Components</a>
+                        ` : ''}
+                    </nav>
+
+                    <div class="header-right">
+                        ${isAuthenticated ? `
+                            ${this.renderUserMenu()}
+                        ` : `
+                            <a href="/login" data-link class="header-login-btn desktop-only">Sign in</a>
+                        `}
+                    </div>
+                </div>
+        `;
+    }
+
+    onMount() {
+        // Single delegated click handler — covers all interactive elements,
+        // even those re-rendered by updateAuthSection()
+        this.addEventListener('click', this._handleClick);
+
+        window.addEventListener('auth-change', this._onAuthChange);
+        window.addEventListener('unauthorized', this._onUnauthorized);
+        window.addEventListener('pageloaded', this._onPageLoaded);
+
+        this._onScroll = () => {
+            this.classList.toggle('scrolled', window.scrollY > 10);
+        };
+        window.addEventListener('scroll', this._onScroll, { passive: true });
+        this._onScroll();
+
+        this.updateActiveLink(router.getCurrentRoute()?.path);
+    }
+
+    onUnmount() {
+        this.removeEventListener('click', this._handleClick);
+        window.removeEventListener('auth-change', this._onAuthChange);
+        window.removeEventListener('unauthorized', this._onUnauthorized);
+        window.removeEventListener('pageloaded', this._onPageLoaded);
+        if (this._onScroll) window.removeEventListener('scroll', this._onScroll);
+    }
+
+    private _onClick(e: Event) {
+        const target = e.target as HTMLElement;
+
+        if (target.closest('#logoutBtn')) {
+            auth.logout();
+            return;
+        }
+
+        if (target.closest('#logoLink')) {
+            e.preventDefault();
+            router.navigate(auth.isAuthenticated() ? '/dashboard' : '/');
+            return;
+        }
+
+        if (target.closest('#mobileMenuToggle')) {
+            e.preventDefault();
+            window.dispatchEvent(new CustomEvent('sidebar-toggle'));
+            return;
+        }
+    }
+
+    updateAuthSection() {
+        const isAuthenticated = auth.isAuthenticated();
+        const headerRight = this.$('.header-right');
+        const headerNav = this.$('.header-nav');
+        const logoLink = this.$<HTMLAnchorElement>('#logoLink');
+
+        if (logoLink) {
+            logoLink.setAttribute('href', isAuthenticated ? '/dashboard' : '/');
+        }
+
+        if (headerRight) {
+            headerRight.innerHTML = isAuthenticated ? `
+                ${this.renderUserMenu()}
+            ` : `
+                <a href="/login" data-link class="header-login-btn desktop-only">Sign in</a>
+            `;
+        }
+
+        if (headerNav) {
+            headerNav.innerHTML = !isAuthenticated ? `
+                <a href="/" data-link class="nanc-link">Home</a>
+                <a href="/docs" data-link class="nanc-link">Docs</a>
+                <a href="/components" data-link class="nanc-link">Components</a>
+            ` : '';
+        }
+
+        this.updateActiveLink(router.getCurrentRoute()?.path);
+    }
+
+    private normalizePath(path: string | null | undefined): string {
+        if (!path || path === '/') {
+            return '/';
+        }
+
+        const normalizedPath = path.replace(/[?#].*$/, '').replace(/\/+$/, '');
+        return normalizedPath || '/';
+    }
+
+    updateActiveLink(routePath?: string) {
+        const currentPath = this.normalizePath(routePath ?? router.getCurrentRoute()?.path ?? window.location.pathname);
+        this.$$('.nanc-link').forEach(link => {
+            link.classList.remove('active');
+            const href = this.normalizePath(link.getAttribute('href'));
+            if (href === currentPath) {
+                link.classList.add('active');
+            }
+        });
+    }
+}
+
+defineComponent('app-header', AppHeader);

package/template/src/components/core/app-sidebar.ts

@@ -0,0 +1,238 @@
+import { Component, defineComponent } from '@core/component.js';
+import { useState } from '@core/state.js';
+import type { State } from '@core/state.js';
+import { html } from '@utils/templates.js';
+import { dom } from '@utils/dom.js';
+import auth from '@services/auth.service.js';
+import router from '@core/router.js';
+
+export class AppSidebar extends Component {
+    isCollapsed: State<boolean>;
+    isMobileOpen: State<boolean>;
+
+    private _unwatchCollapsed?: () => void;
+    private _unwatchMobileOpen?: () => void;
+    private _overlayEl: HTMLDivElement | null = null;
+    private readonly _handleClick = (e: Event) => {
+        const target = e.target as HTMLElement;
+
+        if (target.closest('.sidebar-collapse-btn')) {
+            this.toggle();
+            return;
+        }
+
+        if (target.closest('#sidebarLogoutBtn')) {
+            auth.logout();
+            return;
+        }
+
+        const sidebarLink = target.closest('.sidebar-item[data-link]') as HTMLAnchorElement | null;
+        if (sidebarLink && this.isMobileViewport()) {
+            this.closeMobileSidebar();
+        }
+    };
+    private readonly _onSidebarToggle = () => {
+        if (this.isMobileViewport()) {
+            this.toggleMobileSidebar();
+            return;
+        }
+        this.toggle();
+    };
+    private readonly _onOverlayClick = () => this.closeMobileSidebar();
+    private readonly _onPageLoaded = () => {
+        this.updateActiveLink();
+        if (this.isMobileViewport()) {
+            this.closeMobileSidebar();
+        }
+    };
+    private readonly _onResize = () => {
+        if (!this.isMobileViewport()) {
+            this.closeMobileSidebar();
+        }
+    };
+
+    static get observedAttributes() {
+        return ['collapsed', 'width', 'sticky'];
+    }
+
+    constructor() {
+        super();
+        this.isCollapsed = useState(this.hasAttribute('collapsed'));
+        this.isMobileOpen = useState(false);
+    }
+
+    template() {
+        return html`
+            <div class="app-sidebar ${this.isCollapsed.value ? 'collapsed' : ''}">
+                <div class="sidebar-header">
+                    <div class="sidebar-branding">
+                        <span class="sidebar-branding__eyebrow">Protected</span>
+                        <strong class="sidebar-branding__title">Workspace</strong>
+                    </div>
+
+                    <button
+                        class="sidebar-collapse-btn ${this.isCollapsed.value ? 'is-collapsed' : 'is-expanded'}"
+                        type="button"
+                        aria-label="${this.isCollapsed.value ? 'Expand sidebar' : 'Collapse sidebar'}"
+                    >
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <rect x="4" y="5" width="16" height="14" rx="3"></rect>
+                            <path d="M9 5v14" class="sidebar-collapse-btn__divider"></path>
+                            <path d="M15 9l-3 3 3 3" class="sidebar-collapse-btn__chevron"></path>
+                        </svg>
+                    </button>
+                </div>
+
+                <nav class="sidebar-nav">
+                    <a href="/dashboard" data-link class="sidebar-item dashboard-link">
+                        <span class="sidebar-icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="3" y1="9" x2="21" y2="9"></line>
+                                <line x1="9" y1="21" x2="9" y2="9"></line>
+                            </svg>
+                        </span>
+                        <span class="sidebar-text">Dashboard</span>
+                    </a>
+                </nav>
+
+                <div class="sidebar-footer">
+                    <button class="sidebar-item logout-link" id="sidebarLogoutBtn" type="button">
+                        <span class="sidebar-icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                                <polyline points="16 17 21 12 16 7"></polyline>
+                                <line x1="21" y1="12" x2="9" y2="12"></line>
+                            </svg>
+                        </span>
+                        <span class="sidebar-text">Logout</span>
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+        if (name === 'collapsed') {
+            this.isCollapsed.value = newValue !== null;
+        } else if (this._mounted) {
+            this.render();
+        }
+    }
+
+    onMount() {
+        // Restore saved collapsed state
+        const savedCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
+        if (savedCollapsed) {
+            this.isCollapsed.value = true;
+            this.setAttribute('collapsed', '');
+        }
+
+        // Watch state — update classes without full re-render
+        this._unwatchCollapsed = this.isCollapsed.watch(() => {
+            this.updateSidebar();
+        });
+        this._unwatchMobileOpen = this.isMobileOpen.watch(() => {
+            this.updateMobileState();
+        });
+
+        this.ensureOverlay();
+        this.updateSidebar();
+        this.updateMobileState();
+        this.updateActiveLink();
+
+        this.addEventListener('click', this._handleClick);
+        window.addEventListener('sidebar-toggle', this._onSidebarToggle);
+        window.addEventListener('pageloaded', this._onPageLoaded);
+        window.addEventListener('resize', this._onResize);
+    }
+
+    onUnmount() {
+        this.removeEventListener('click', this._handleClick);
+        window.removeEventListener('sidebar-toggle', this._onSidebarToggle);
+        window.removeEventListener('pageloaded', this._onPageLoaded);
+        window.removeEventListener('resize', this._onResize);
+        this._unwatchCollapsed?.();
+        this._unwatchMobileOpen?.();
+        if (this._overlayEl) {
+            this._overlayEl.removeEventListener('click', this._onOverlayClick);
+            this._overlayEl.remove();
+            this._overlayEl = null;
+        }
+    }
+
+    toggle() {
+        if (this.isMobileViewport()) {
+            this.toggleMobileSidebar();
+            return;
+        }
+
+        this.isCollapsed.value = !this.isCollapsed.value;
+
+        if (this.isCollapsed.value) {
+            this.setAttribute('collapsed', '');
+        } else {
+            this.removeAttribute('collapsed');
+        }
+
+        localStorage.setItem('sidebar-collapsed', this.isCollapsed.value.toString());
+
+        this.emitEvent('toggle', { collapsed: this.isCollapsed.value }, {
+            bubbles: true,
+            composed: true
+        });
+    }
+
+    private isMobileViewport(): boolean {
+        return window.innerWidth <= 768;
+    }
+
+    private toggleMobileSidebar() {
+        this.isMobileOpen.value = !this.isMobileOpen.value;
+    }
+
+    private closeMobileSidebar() {
+        this.isMobileOpen.value = false;
+    }
+
+    private ensureOverlay() {
+        let overlay = dom.query<HTMLDivElement>('.sidebar-overlay');
+        if (!overlay) {
+            overlay = document.createElement('div');
+            overlay.className = 'sidebar-overlay';
+            document.body.appendChild(overlay);
+        }
+
+        overlay.removeEventListener('click', this._onOverlayClick);
+        overlay.addEventListener('click', this._onOverlayClick);
+        this._overlayEl = overlay;
+    }
+
+    private updateActiveLink() {
+        const currentPath = router.getCurrentRoute()?.path ?? window.location.pathname;
+        this.$$('.sidebar-item[data-link]').forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === currentPath) {
+                link.classList.add('active');
+            }
+        });
+    }
+
+    updateSidebar() {
+        const sidebar = this.$('.app-sidebar');
+        sidebar?.classList.toggle('collapsed', this.isCollapsed.value);
+        this.classList.toggle('collapsed', this.isCollapsed.value);
+
+        // Drive the grid column via a class on #app
+        const app = dom.query<HTMLElement>('#app');
+        app?.classList.toggle('sidebar-collapsed', this.isCollapsed.value);
+    }
+
+    private updateMobileState() {
+        this.classList.toggle('mobile-open', this.isMobileOpen.value);
+        document.body.classList.toggle('sidebar-open', this.isMobileOpen.value);
+        this._overlayEl?.classList.toggle('active', this.isMobileOpen.value);
+    }
+}
+
+defineComponent('app-sidebar', AppSidebar);

package/template/src/components/core/loading-spinner.ts

@@ -0,0 +1,25 @@
+/**
+ * Loading Spinner Component
+ * Simple reusable loading indicator
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+class LoadingSpinner extends Component {
+    static get observedAttributes() {
+        return ['size', 'message'];
+    }
+    
+    template() {
+        const size = this.attr('size', 'medium');
+        const message = this.attr('message', 'Loading...');
+        
+        return `
+            <div class="loading-spinner ${size}">
+                <div class="spinner"></div>
+                ${message ? `<p class="loading-message">${message}</p>` : ''}
+            </div>
+        `;
+    }
+}
+
+defineComponent('loading-spinner', LoadingSpinner);