create-nativecore 0.1.0 → 0.2.0

package/template/src/utils/markdown.ts

@@ -0,0 +1,307 @@
+/**
+ * Minimal markdown renderer for the NativeCore docs page.
+ *
+ * Scope:
+ * - headings (#, ##, ###, ####)
+ * - paragraphs
+ * - unordered / ordered lists
+ * - blockquotes
+ * - fenced code blocks
+ * - horizontal rules
+ * - inline code, links, bold, italics
+ *
+ * This intentionally avoids external runtime dependencies.
+ */
+
+export interface MarkdownHeading {
+    level: number;
+    text: string;
+    id: string;
+}
+
+export interface MarkdownRenderResult {
+    html: string;
+    headings: MarkdownHeading[];
+}
+
+export interface MarkdownRenderOptions {
+    headingIdCounts?: Map<string, number>;
+}
+
+export interface MarkdownSection {
+    id: string;
+    title: string;
+    html: string;
+    headings: MarkdownHeading[];
+    isChapter: boolean;
+    aliases: string[];
+}
+
+function escapeHtml(input: string): string {
+    return input
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+function slugify(text: string): string {
+    return text
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-');
+}
+
+function renderInline(text: string): string {
+    let out = escapeHtml(text);
+
+    out = out.replace(/`([^`]+)`/g, '<code>$1</code>');
+    out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    out = out.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    out = out.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+
+    return out;
+}
+
+export function renderMarkdown(markdown: string, options: MarkdownRenderOptions = {}): MarkdownRenderResult {
+    const lines = markdown.replace(/\r\n/g, '\n').split('\n');
+    const html: string[] = [];
+    const headings: MarkdownHeading[] = [];
+    const headingIdCounts = options.headingIdCounts ?? new Map<string, number>();
+
+    let paragraphBuffer: string[] = [];
+    let inCodeBlock = false;
+    let codeLang = '';
+    let codeLines: string[] = [];
+    let inUl = false;
+    let inOl = false;
+    let inBlockquote = false;
+
+    const flushParagraph = () => {
+        if (paragraphBuffer.length === 0) return;
+        const text = paragraphBuffer.join(' ').trim();
+        if (text) html.push(`<p>${renderInline(text)}</p>`);
+        paragraphBuffer = [];
+    };
+
+    const closeLists = () => {
+        if (inUl) {
+            html.push('</ul>');
+            inUl = false;
+        }
+        if (inOl) {
+            html.push('</ol>');
+            inOl = false;
+        }
+    };
+
+    const closeBlockquote = () => {
+        if (inBlockquote) {
+            html.push('</blockquote>');
+            inBlockquote = false;
+        }
+    };
+
+    for (const line of lines) {
+        const trimmed = line.trim();
+
+        if (trimmed.startsWith('```')) {
+            flushParagraph();
+            closeLists();
+            closeBlockquote();
+
+            if (!inCodeBlock) {
+                inCodeBlock = true;
+                codeLang = trimmed.slice(3).trim();
+                codeLines = [];
+            } else {
+                const className = codeLang ? ` class="language-${escapeHtml(codeLang)}"` : '';
+                html.push(`<pre><code${className}>${escapeHtml(codeLines.join('\n'))}</code></pre>`);
+                inCodeBlock = false;
+                codeLang = '';
+                codeLines = [];
+            }
+            continue;
+        }
+
+        if (inCodeBlock) {
+            codeLines.push(line);
+            continue;
+        }
+
+        if (!trimmed) {
+            flushParagraph();
+            closeLists();
+            closeBlockquote();
+            continue;
+        }
+
+        const headingMatch = /^(#{1,4})\s+(.+)$/.exec(trimmed);
+        if (headingMatch) {
+            flushParagraph();
+            closeLists();
+            closeBlockquote();
+
+            const level = headingMatch[1].length;
+            const text = headingMatch[2].trim();
+            const baseId = slugify(text) || 'section';
+            const nextCount = (headingIdCounts.get(baseId) || 0) + 1;
+            headingIdCounts.set(baseId, nextCount);
+            const id = nextCount === 1 ? baseId : `${baseId}-${nextCount}`;
+            headings.push({ level, text, id });
+            html.push(`<h${level} id="${id}">${renderInline(text)}</h${level}>`);
+            continue;
+        }
+
+        if (/^---+$/.test(trimmed) || /^\*\*\*+$/.test(trimmed)) {
+            flushParagraph();
+            closeLists();
+            closeBlockquote();
+            html.push('<hr>');
+            continue;
+        }
+
+        const ulMatch = /^[-*]\s+(.+)$/.exec(trimmed);
+        if (ulMatch) {
+            flushParagraph();
+            closeBlockquote();
+            if (inOl) {
+                html.push('</ol>');
+                inOl = false;
+            }
+            if (!inUl) {
+                html.push('<ul>');
+                inUl = true;
+            }
+            html.push(`<li>${renderInline(ulMatch[1])}</li>`);
+            continue;
+        }
+
+        const olMatch = /^\d+\.\s+(.+)$/.exec(trimmed);
+        if (olMatch) {
+            flushParagraph();
+            closeBlockquote();
+            if (inUl) {
+                html.push('</ul>');
+                inUl = false;
+            }
+            if (!inOl) {
+                html.push('<ol>');
+                inOl = true;
+            }
+            html.push(`<li>${renderInline(olMatch[1])}</li>`);
+            continue;
+        }
+
+        const quoteMatch = /^>\s?(.*)$/.exec(trimmed);
+        if (quoteMatch) {
+            flushParagraph();
+            closeLists();
+            if (!inBlockquote) {
+                html.push('<blockquote>');
+                inBlockquote = true;
+            }
+            html.push(`<p>${renderInline(quoteMatch[1])}</p>`);
+            continue;
+        }
+
+        paragraphBuffer.push(trimmed);
+    }
+
+    flushParagraph();
+    closeLists();
+    closeBlockquote();
+
+    if (inCodeBlock) {
+        const className = codeLang ? ` class="language-${escapeHtml(codeLang)}"` : '';
+        html.push(`<pre><code${className}>${escapeHtml(codeLines.join('\n'))}</code></pre>`);
+    }
+
+    return {
+        html: html.join('\n'),
+        headings,
+    };
+}
+
+export function renderMarkdownToc(headings: MarkdownHeading[]): string {
+    const items = headings
+        .filter(heading => heading.level >= 2 && heading.level <= 4)
+        .map(heading => `
+            <a class="docs-toc__link docs-toc__link--h${heading.level}" href="#${heading.id}">${escapeHtml(heading.text)}</a>
+        `)
+        .join('');
+
+    return items || '<span class="docs-toc__empty">No headings found.</span>';
+}
+
+export function splitMarkdownIntoSections(markdown: string): MarkdownSection[] {
+    const lines = markdown.replace(/\r\n/g, '\n').split('\n');
+    const chapterLinkAliases = new Map<string, string>();
+    const chapterStarts = lines.reduce<Array<{ index: number; title: string }>>((sections, line, index) => {
+        const headingMatch = /^##\s+(.+)$/.exec(line.trim());
+        if (headingMatch && headingMatch[1].trim().startsWith('Chapter ')) {
+            sections.push({ index, title: headingMatch[1].trim() });
+        }
+        return sections;
+    }, []);
+
+    for (const match of markdown.matchAll(/\[[^\]]+\]\(#(chapter-(\d+)[^)]+)\)/g)) {
+        const alias = match[1];
+        const chapterNumber = match[2];
+        if (!chapterLinkAliases.has(chapterNumber)) {
+            chapterLinkAliases.set(chapterNumber, alias);
+        }
+    }
+
+    if (chapterStarts.length === 0) {
+        const rendered = renderMarkdown(markdown);
+        return [{
+            id: rendered.headings[0]?.id ?? 'overview',
+            title: rendered.headings.find(heading => heading.level <= 2)?.text ?? 'Overview',
+            html: rendered.html,
+            headings: rendered.headings,
+            isChapter: false,
+            aliases: [],
+        }];
+    }
+
+    const sharedHeadingIdCounts = new Map<string, number>();
+    const sections: MarkdownSection[] = [];
+    const overviewMarkdown = lines.slice(0, chapterStarts[0].index).join('\n').trim();
+
+    if (overviewMarkdown) {
+        const renderedOverview = renderMarkdown(overviewMarkdown, { headingIdCounts: sharedHeadingIdCounts });
+        sections.push({
+            id: 'overview',
+            title: 'Overview',
+            html: renderedOverview.html,
+            headings: renderedOverview.headings,
+            isChapter: false,
+            aliases: [],
+        });
+    }
+
+    chapterStarts.forEach((chapterStart, index) => {
+        const chapterEnd = chapterStarts[index + 1]?.index ?? lines.length;
+        const chapterMarkdown = lines.slice(chapterStart.index, chapterEnd).join('\n').trim();
+        const renderedChapter = renderMarkdown(chapterMarkdown, { headingIdCounts: sharedHeadingIdCounts });
+        const chapterHeading = renderedChapter.headings.find(heading => heading.level === 2) ?? renderedChapter.headings[0];
+        const chapterNumber = /^Chapter\s+(\d+)/i.exec(chapterHeading?.text ?? chapterStart.title)?.[1];
+        const chapterAlias = chapterNumber ? chapterLinkAliases.get(chapterNumber) : undefined;
+        const sectionId = chapterAlias ?? chapterHeading?.id ?? slugify(chapterStart.title);
+        const aliases = chapterHeading?.id && chapterHeading.id !== sectionId ? [chapterHeading.id] : [];
+
+        sections.push({
+            id: sectionId,
+            title: chapterHeading?.text ?? chapterStart.title,
+            html: renderedChapter.html,
+            headings: renderedChapter.headings,
+            isChapter: true,
+            aliases,
+        });
+    });
+
+    return sections;
+}

package/template/src/utils/sidebar.ts

@@ -0,0 +1,96 @@
+/**
+ * Sidebar Initialization and Management
+ */
+import auth from '../services/auth.service.js';
+
+/**
+ * Initialize sidebar functionality
+ */
+export function initSidebar() {
+    const sidebar = document.getElementById('appSidebar');
+    const appLayout = document.querySelector('.app-layout');
+    
+    // Listen for sidebar toggle events from nc-sidebar component
+    sidebar?.addEventListener('toggle', ((e: CustomEvent) => {
+        const isCollapsed = e.detail.collapsed;
+        
+        if (appLayout) {
+            if (isCollapsed) {
+                appLayout.classList.add('sidebar-collapsed');
+            } else {
+                appLayout.classList.remove('sidebar-collapsed');
+            }
+        }
+        
+        // Save state
+        localStorage.setItem('sidebar-collapsed', isCollapsed.toString());
+    }) as EventListener);
+    
+    // Restore saved state on load
+    const savedCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
+    if (savedCollapsed && sidebar) {
+        sidebar.setAttribute('collapsed', '');
+        appLayout?.classList.add('sidebar-collapsed');
+    }
+    
+    // Update sidebar visibility based on auth state
+    function updateSidebar() {
+        const isAuthenticated = auth.isAuthenticated();
+        
+        // Toggle body class for sidebar visibility (no flash)
+        if (isAuthenticated) {
+            document.body.classList.add('sidebar-enabled');
+            if (appLayout) appLayout.classList.remove('no-sidebar');
+        } else {
+            document.body.classList.remove('sidebar-enabled');
+            if (appLayout) appLayout.classList.add('no-sidebar');
+        }
+        
+        // Toggle menu items based on auth state
+        const homeLink = document.querySelector('.sidebar-item.home-link') as HTMLElement;
+        const aboutLink = document.querySelector('.sidebar-item.about-link') as HTMLElement;
+        const dashboardLink = document.querySelector('.sidebar-item.dashboard-link') as HTMLElement;
+        const componentsLink = document.querySelector('.sidebar-item.components-link') as HTMLElement;
+        const underConstructionLink = document.querySelector('.sidebar-item.under-construction-link') as HTMLElement;
+        const logoutLink = document.querySelector('.sidebar-item.logout-link') as HTMLElement;
+        
+        if (homeLink) homeLink.style.display = isAuthenticated ? 'none' : 'flex';
+        if (aboutLink) aboutLink.style.display = isAuthenticated ? 'none' : 'flex';
+        if (dashboardLink) dashboardLink.style.display = isAuthenticated ? 'flex' : 'none';
+        if (componentsLink) componentsLink.style.display = isAuthenticated ? 'flex' : 'none';
+        if (underConstructionLink) underConstructionLink.style.display = isAuthenticated ? 'flex' : 'none';
+        if (logoutLink) logoutLink.style.display = isAuthenticated ? 'flex' : 'none';
+        
+        // Update active link
+        updateActiveSidebarLink();
+    }
+    
+    // Handle sidebar logout button
+    const sidebarLogoutBtn = document.getElementById('sidebarLogoutBtn');
+    if (sidebarLogoutBtn) {
+        sidebarLogoutBtn.addEventListener('click', () => {
+            auth.logout();
+        });
+    }
+    
+    // Update active link on page load
+    function updateActiveSidebarLink() {
+        const currentPath = window.location.pathname;
+        const sidebarItems = document.querySelectorAll('.sidebar-item');
+        
+        sidebarItems.forEach(item => {
+            item.classList.remove('active');
+            const href = item.getAttribute('href');
+            if (href === currentPath || (currentPath === '/' && href === '/')) {
+                item.classList.add('active');
+            }
+        });
+    }
+    
+    // Listen for auth changes
+    window.addEventListener('auth-change', updateSidebar);
+    window.addEventListener('pageloaded', updateActiveSidebarLink);
+    
+    // Initial update
+    updateSidebar();
+}

package/template/src/utils/smoothScroll.ts

@@ -0,0 +1,85 @@
+/**
+ * Smooth Scrolling Enhancement
+ * Makes mouse wheel scrolling smoother by intercepting wheel events
+ */
+
+export function initSmoothScroll() {
+    // Only apply on desktop (not mobile)
+    if ('ontouchstart' in window) {
+        return;
+    }
+
+    let isScrolling = false;
+    let targetScrollY = window.scrollY;
+    let currentScrollY = window.scrollY;
+    const smoothness = 0.15; // Lower = smoother but slower
+
+    function smoothScrollStep() {
+        if (Math.abs(targetScrollY - currentScrollY) < 0.5) {
+            currentScrollY = targetScrollY;
+            isScrolling = false;
+            return;
+        }
+
+        currentScrollY += (targetScrollY - currentScrollY) * smoothness;
+        window.scrollTo(0, currentScrollY);
+        requestAnimationFrame(smoothScrollStep);
+    }
+
+    window.addEventListener('wheel', (e: WheelEvent) => {
+        e.preventDefault();
+        
+        // Calculate new target scroll position
+        targetScrollY += e.deltaY;
+        
+        // Clamp to valid range
+        const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
+        targetScrollY = Math.max(0, Math.min(targetScrollY, maxScroll));
+
+        // Start smooth scrolling animation if not already running
+        if (!isScrolling) {
+            isScrolling = true;
+            requestAnimationFrame(smoothScrollStep);
+        }
+    }, { passive: false });
+
+    // Handle keyboard scrolling
+    window.addEventListener('keydown', (e: KeyboardEvent) => {
+        const scrollAmount = 100;
+        const pageScrollAmount = window.innerHeight * 0.8;
+
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                targetScrollY = Math.min(targetScrollY + scrollAmount, document.documentElement.scrollHeight - window.innerHeight);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                targetScrollY = Math.max(targetScrollY - scrollAmount, 0);
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                targetScrollY = Math.min(targetScrollY + pageScrollAmount, document.documentElement.scrollHeight - window.innerHeight);
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                targetScrollY = Math.max(targetScrollY - pageScrollAmount, 0);
+                break;
+            case 'Home':
+                e.preventDefault();
+                targetScrollY = 0;
+                break;
+            case 'End':
+                e.preventDefault();
+                targetScrollY = document.documentElement.scrollHeight - window.innerHeight;
+                break;
+            default:
+                return;
+        }
+
+        if (!isScrolling) {
+            isScrolling = true;
+            requestAnimationFrame(smoothScrollStep);
+        }
+    });
+}

package/template/src/utils/templates.ts

@@ -0,0 +1,23 @@
+/**
+ * Template Literal Helpers
+ * 
+ * These are no-op functions that exist purely for syntax highlighting.
+ * They have ZERO runtime overhead - just pass through the string unchanged.
+ */
+
+/**
+ * HTML template literal tag for syntax highlighting
+ * Usage: html`<div>content</div>`
+ * 
+ * This does nothing at runtime - it's only for VS Code highlighting.
+ * Install "lit-html" extension for full HTML/CSS syntax highlighting.
+ */
+export const html = (strings: TemplateStringsArray, ...values: any[]): string => 
+    String.raw({ raw: strings }, ...values);
+
+/**
+ * CSS template literal tag for syntax highlighting
+ * Usage: css`.class { color: red; }`
+ */
+export const css = (strings: TemplateStringsArray, ...values: any[]): string => 
+    String.raw({ raw: strings }, ...values);

package/template/src/utils/validation.ts

@@ -0,0 +1,73 @@
+/**
+ * Validation Utilities
+ */
+
+export function isValidEmail(email: string): boolean {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+}
+
+export function isRequired(value: any): boolean {
+    if (value === null || value === undefined) return false;
+    if (typeof value === 'string') return value.trim().length > 0;
+    return true;
+}
+
+export function minLength(min: number): (value: any) => boolean {
+    return (value: any) => {
+        if (!value) return false;
+        return String(value).length >= min;
+    };
+}
+
+export function maxLength(max: number): (value: any) => boolean {
+    return (value: any) => {
+        if (!value) return true;
+        return String(value).length <= max;
+    };
+}
+
+export function matchesPattern(pattern: RegExp): (value: any) => boolean {
+    return (value: any) => {
+        if (!value) return false;
+        return pattern.test(String(value));
+    };
+}
+
+export function isNumber(value: any): boolean {
+    return !isNaN(parseFloat(value)) && isFinite(value);
+}
+
+export function isInteger(value: any): boolean {
+    return Number.isInteger(Number(value));
+}
+
+export function isValidURL(url: string): boolean {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export function isValidDate(date: any): boolean {
+    return date instanceof Date && !isNaN(date.getTime());
+}
+
+type Validator = (value: any) => boolean;
+
+export function validateForm(values: Record<string, any>, rules: Record<string, Validator[]>): Record<string, string> {
+    const errors: Record<string, string> = {};
+    
+    for (const [field, validators] of Object.entries(rules)) {
+        for (const validator of validators) {
+            if (!validator(values[field])) {
+                errors[field] = `Validation failed for ${field}`;
+                break;
+            }
+        }
+    }
+    
+    return errors;
+}