create-nativecore 0.1.1 → 0.2.0

package/template/src/utils/form.ts

@@ -0,0 +1,176 @@
+import { computed, useState } from '@core/state.js';
+import type { ComputedState, State } from '@core/state.js';
+import { validateForm } from '@utils/validation.js';
+
+type Validator = (value: any) => boolean;
+type FieldStates<T extends Record<string, any>> = { [K in keyof T]: State<T[K]> };
+type FieldFlags<T extends Record<string, any>> = { [K in keyof T]: State<boolean> };
+type ValidationRules<T extends Record<string, any>> = Partial<Record<keyof T, Validator[]>>;
+
+export interface UseFormOptions<T extends Record<string, any>> {
+    initialValues: T;
+    rules?: ValidationRules<T>;
+}
+
+export interface UseFormResult<T extends Record<string, any>> {
+    fields: FieldStates<T>;
+    touched: FieldFlags<T>;
+    dirty: FieldFlags<T>;
+    errors: ComputedState<Record<string, string>>;
+    isDirty: ComputedState<boolean>;
+    isValid: ComputedState<boolean>;
+    getValues(): T;
+    reset(values?: Partial<T>): void;
+    markAsPristine(): void;
+    bindField<K extends keyof T>(fieldName: K, target: string | HTMLElement): () => void;
+    submit(handler: (values: T) => void | Promise<void>): (event?: Event) => Promise<boolean>;
+}
+
+export function useForm<T extends Record<string, any>>(options: UseFormOptions<T>): UseFormResult<T> {
+    const initialSnapshot = { ...options.initialValues };
+    const fields = {} as FieldStates<T>;
+    const touched = {} as FieldFlags<T>;
+    const dirty = {} as FieldFlags<T>;
+
+    for (const [key, value] of Object.entries(options.initialValues)) {
+        const typedKey = key as keyof T;
+        fields[typedKey] = useState(value as T[keyof T]);
+        touched[typedKey] = useState(false);
+        dirty[typedKey] = useState(false);
+    }
+
+    const errors = computed(() => validateForm(getValues(), options.rules ?? {}));
+    const isDirty = computed(() => Object.values(dirty).some(flag => flag.value));
+    const isValid = computed(() => Object.keys(errors.value).length === 0);
+
+    return {
+        fields,
+        touched,
+        dirty,
+        errors,
+        isDirty,
+        isValid,
+        getValues,
+        reset,
+        markAsPristine,
+        bindField,
+        submit
+    };
+
+    function getValues(): T {
+        const values = {} as T;
+
+        for (const key of Object.keys(fields) as Array<keyof T>) {
+            values[key] = fields[key].value;
+        }
+
+        return values;
+    }
+
+    function reset(values: Partial<T> = {}): void {
+        for (const key of Object.keys(fields) as Array<keyof T>) {
+            const nextValue = key in values ? values[key] : initialSnapshot[key];
+            fields[key].value = nextValue as T[keyof T];
+            touched[key].value = false;
+            dirty[key].value = false;
+        }
+    }
+
+    function markAsPristine(): void {
+        for (const key of Object.keys(fields) as Array<keyof T>) {
+            touched[key].value = false;
+            dirty[key].value = false;
+        }
+    }
+
+    function bindField<K extends keyof T>(fieldName: K, target: string | HTMLElement): () => void {
+        const element = resolveFieldElement(target);
+        if (!element) return () => {};
+
+        syncElementFromState(fieldName, element);
+
+        const inputHandler = () => {
+            fields[fieldName].value = readElementValue(element) as T[K];
+            touched[fieldName].value = true;
+            dirty[fieldName].value = !Object.is(fields[fieldName].value, initialSnapshot[fieldName]);
+        };
+
+        const blurHandler = () => {
+            touched[fieldName].value = true;
+        };
+
+        const eventName = getBindingEventName(element);
+        element.addEventListener(eventName, inputHandler);
+        element.addEventListener('blur', blurHandler);
+
+        return () => {
+            element.removeEventListener(eventName, inputHandler);
+            element.removeEventListener('blur', blurHandler);
+        };
+    }
+
+    function submit(handler: (values: T) => void | Promise<void>): (event?: Event) => Promise<boolean> {
+        return async (event?: Event) => {
+            event?.preventDefault();
+
+            for (const key of Object.keys(touched) as Array<keyof T>) {
+                touched[key].value = true;
+            }
+
+            if (!isValid.value) {
+                return false;
+            }
+
+            await handler(getValues());
+            markAsPristine();
+            return true;
+        };
+    }
+
+    function syncElementFromState<K extends keyof T>(fieldName: K, element: FormControlElement): void {
+        const value = fields[fieldName].value;
+
+        if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+            element.checked = Boolean(value);
+            return;
+        }
+
+        element.value = value == null ? '' : String(value);
+    }
+}
+
+type FormControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+function resolveFieldElement(target: string | HTMLElement): FormControlElement | null {
+    const element = typeof target === 'string' ? document.querySelector<HTMLElement>(target) : target;
+
+    if (
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement
+    ) {
+        return element;
+    }
+
+    return null;
+}
+
+function getBindingEventName(element: FormControlElement): 'input' | 'change' {
+    if (element instanceof HTMLSelectElement) {
+        return 'change';
+    }
+
+    if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+        return 'change';
+    }
+
+    return 'input';
+}
+
+function readElementValue(element: FormControlElement): string | boolean {
+    if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+        return element.checked;
+    }
+
+    return element.value;
+}

package/template/src/utils/formatters.ts

@@ -0,0 +1,169 @@
+/**
+ * Formatter Utilities
+ * Common formatting functions for display
+ */
+
+/**
+ * Format currency
+ * @param {number} amount - Amount to format
+ * @param {string} currency - Currency code (default: USD)
+ * @returns {string} Formatted currency
+ */
+export function formatCurrency(amount, currency = 'USD') {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency,
+    }).format(amount);
+}
+
+/**
+ * Format date
+ * @param {Date|string} date - Date to format
+ * @param {string} format - Format style (short, medium, long, full)
+ * @returns {string} Formatted date
+ */
+export function formatDate(date, format = 'medium') {
+    const d = new Date(date);
+    const options = {
+        short: { month: 'numeric', day: 'numeric', year: '2-digit' },
+        medium: { month: 'short', day: 'numeric', year: 'numeric' },
+        long: { month: 'long', day: 'numeric', year: 'numeric' },
+        full: { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' },
+    };
+    
+    return new Intl.DateTimeFormat('en-US', options[format] || options.medium).format(d);
+}
+
+/**
+ * Format time
+ * @param {Date|string} date - Date to format
+ * @returns {string} Formatted time
+ */
+export function formatTime(date) {
+    const d = new Date(date);
+    return new Intl.DateTimeFormat('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true,
+    }).format(d);
+}
+
+/**
+ * Format date and time
+ * @param {Date|string} date - Date to format
+ * @returns {string} Formatted date and time
+ */
+export function formatDateTime(date) {
+    return `${formatDate(date)} at ${formatTime(date)}`;
+}
+
+/**
+ * Format relative time (e.g., "2 hours ago")
+ * @param {Date|string} date - Date to format
+ * @returns {string} Relative time string
+ */
+export function formatRelativeTime(date: Date | string): string {
+    const d = new Date(date);
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - d.getTime()) / 1000);
+    
+    const intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1,
+    };
+    
+    for (const [unit, secondsInUnit] of Object.entries(intervals)) {
+        const interval = Math.floor(seconds / secondsInUnit);
+        if (interval >= 1) {
+            return interval === 1 ? `1 ${unit} ago` : `${interval} ${unit}s ago`;
+        }
+    }
+    
+    return 'just now';
+}
+
+/**
+ * Format number with thousands separator
+ * @param {number} num - Number to format
+ * @returns {string} Formatted number
+ */
+export function formatNumber(num) {
+    return new Intl.NumberFormat('en-US').format(num);
+}
+
+/**
+ * Format file size
+ * @param {number} bytes - Size in bytes
+ * @returns {string} Formatted size
+ */
+export function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+/**
+ * Format percentage
+ * @param {number} value - Value to format (0-1 or 0-100)
+ * @param {number} decimals - Decimal places
+ * @returns {string} Formatted percentage
+ */
+export function formatPercentage(value, decimals = 0) {
+    const percent = value <= 1 ? value * 100 : value;
+    return `${percent.toFixed(decimals)}%`;
+}
+
+/**
+ * Truncate text
+ * @param {string} text - Text to truncate
+ * @param {number} maxLength - Maximum length
+ * @param {string} suffix - Suffix to add (default: '...')
+ * @returns {string} Truncated text
+ */
+export function truncate(text, maxLength, suffix = '...') {
+    if (!text || text.length <= maxLength) return text;
+    return text.substring(0, maxLength - suffix.length) + suffix;
+}
+
+/**
+ * Capitalize first letter
+ * @param {string} str - String to capitalize
+ * @returns {string} Capitalized string
+ */
+export function capitalize(str) {
+    if (!str) return '';
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Title case
+ * @param {string} str - String to convert
+ * @returns {string} Title cased string
+ */
+export function titleCase(str) {
+    if (!str) return '';
+    return str.toLowerCase().split(' ').map(capitalize).join(' ');
+}
+
+export default {
+    formatCurrency,
+    formatDate,
+    formatTime,
+    formatDateTime,
+    formatRelativeTime,
+    formatNumber,
+    formatFileSize,
+    formatPercentage,
+    truncate,
+    capitalize,
+    titleCase,
+};

package/template/src/utils/helpers.ts

@@ -0,0 +1,195 @@
+/**
+ * Utility Helper Functions
+ * Reusable utility functions for common tasks
+ */
+
+/**
+ * Debounce function calls
+ * @param {Function} func - Function to debounce
+ * @param {number} wait - Wait time in milliseconds
+ */
+export function debounce(func, wait = 300) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+/**
+ * Throttle function calls
+ * @param {Function} func - Function to throttle
+ * @param {number} limit - Time limit in milliseconds
+ */
+export function throttle(func, limit = 300) {
+    let inThrottle;
+    return function executedFunction(...args) {
+        if (!inThrottle) {
+            func(...args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}
+
+/**
+ * Format date to readable string
+ * @param {Date|string} date - Date to format
+ * @param {object} options - Intl.DateTimeFormat options
+ */
+export function formatDate(date: Date | string, options: Intl.DateTimeFormatOptions = {}): string {
+    const defaultOptions: Intl.DateTimeFormatOptions = {
+        year: 'numeric' as const,
+        month: 'short' as const,
+        day: 'numeric' as const,
+    };
+    return new Intl.DateTimeFormat('en-US', { ...defaultOptions, ...options })
+        .format(new Date(date));
+}
+
+/**
+ * Format number with thousands separator
+ * @param {number} num - Number to format
+ */
+export function formatNumber(num) {
+    return new Intl.NumberFormat('en-US').format(num);
+}
+
+/**
+ * Format currency
+ * @param {number} amount - Amount to format
+ * @param {string} currency - Currency code (default: USD)
+ */
+export function formatCurrency(amount, currency = 'USD') {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency,
+    }).format(amount);
+}
+
+/**
+ * Truncate string to max length
+ * @param {string} str - String to truncate
+ * @param {number} maxLength - Maximum length
+ */
+export function truncate(str, maxLength = 50) {
+    if (str.length <= maxLength) return str;
+    return str.slice(0, maxLength - 3) + '...';
+}
+
+/**
+ * Generate unique ID
+ */
+export function generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Deep clone object
+ * @param {object} obj - Object to clone
+ */
+export function deepClone(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * Check if object is empty
+ * @param {object} obj - Object to check
+ */
+export function isEmpty(obj) {
+    return Object.keys(obj).length === 0;
+}
+
+/**
+ * Sleep/delay function
+ * @param {number} ms - Milliseconds to sleep
+ */
+export function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Sanitize HTML string to prevent XSS
+ * @param {string} str - String to sanitize
+ */
+export function sanitizeHTML(str) {
+    const temp = document.createElement('div');
+    temp.textContent = str;
+    return temp.innerHTML;
+}
+
+/**
+ * Parse query string to object
+ * @param {string} queryString - Query string (with or without ?)
+ */
+export function parseQueryString(queryString) {
+    const params = new URLSearchParams(queryString);
+    const result = {};
+    for (const [key, value] of params) {
+        result[key] = value;
+    }
+    return result;
+}
+
+/**
+ * Build query string from object
+ * @param {object} params - Parameters object
+ */
+export function buildQueryString(params) {
+    return new URLSearchParams(params).toString();
+}
+
+/**
+ * Validate email format
+ * @param {string} email - Email to validate
+ */
+export function isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+}
+
+/**
+ * Copy text to clipboard
+ * @param {string} text - Text to copy
+ */
+export async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    } catch (err) {
+        console.error('Failed to copy:', err);
+        return false;
+    }
+}
+
+/**
+ * Check if element is in viewport
+ * @param {HTMLElement} element - Element to check
+ */
+export function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+}
+
+/**
+ * Scroll element into view smoothly
+ * @param {HTMLElement|string} elementOrSelector - Element or selector
+ */
+export function scrollToElement(elementOrSelector) {
+    const element = typeof elementOrSelector === 'string' 
+        ? document.querySelector(elementOrSelector)
+        : elementOrSelector;
+    
+    if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}