juxscript 1.0.20 → 1.0.21

package/lib/components/fileupload.ts

@@ -1,5 +1,9 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { FormInput, FormInputState } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change', 'filesSelected', 'clear'] as const;
 
 export interface FileUploadOptions {
     label?: string;
@@ -7,61 +11,62 @@ export interface FileUploadOptions {
     multiple?: boolean;
     disabled?: boolean;
     name?: string;
+    icon?: string;
+    required?: boolean;
     style?: string;
     class?: string;
+    onValidate?: (files: File[]) => boolean | string;
 }
 
-type FileUploadState = {
+interface FileUploadState extends FormInputState {
     files: File[];
-    label: string;
     accept: string;
     multiple: boolean;
-    disabled: boolean;
-    name: string;
-    style: string;
-    class: string;
-};
-
-export class FileUpload {
-    state: FileUploadState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // CRITICAL: Store bind/sync instructions for deferred wiring
-    private _bindings: Array<{ event: string, handler: Function }> = [];
-    private _syncBindings: Array<{
-        property: string,
-        stateObj: State<any>,
-        toState?: Function,
-        toComponent?: Function
-    }> = [];
+    icon: string;
+}
 
-    constructor(id: string, options: FileUploadOptions = {}) {
-        this._id = id;
-        this.id = id;
+export class FileUpload extends FormInput<FileUploadState> {
+    private _fileListElement: HTMLElement | null = null;
 
-        this.state = {
+    constructor(id: string, options: FileUploadOptions = {}) {
+        super(id, {
             files: [],
-            label: options.label ?? '',
             accept: options.accept ?? '',
             multiple: options.multiple ?? false,
+            icon: options.icon ?? 'upload',
+            label: options.label ?? '',
+            required: options.required ?? false,
             disabled: options.disabled ?? false,
             name: options.name ?? id,
             style: options.style ?? '',
-            class: options.class ?? ''
-        };
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
+
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
 
-    label(value: string): this {
-        this.state.label = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
+
     accept(value: string): this {
         this.state.accept = value;
         return this;
@@ -72,194 +77,224 @@ export class FileUpload {
         return this;
     }
 
-    disabled(value: boolean): this {
-        this.state.disabled = value;
-        this._updateElement();
+    icon(value: string): this {
+        this.state.icon = value;
         return this;
     }
 
-    name(value: string): this {
-        this.state.name = value;
+    clear(): this {
+        this.state.files = [];
+        if (this._inputElement) {
+            (this._inputElement as HTMLInputElement).value = '';
+        }
+        if (this._fileListElement) {
+            this._updateFileList([]);
+        }
+        // 🎯 Fire the clear callback event
+        this._triggerCallback('clear');
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
-        return this;
+    getValue(): File[] {
+        return this.state.files;
     }
 
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`FileUpload.sync: Expected a State object for property "${property}"`);
+    setValue(files: File[]): this {
+        this.state.files = files;
+        if (this._fileListElement) {
+            this._updateFileList(files);
         }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
+    getFiles(): File[] {
+        return this.getValue();
+    }
 
-    private _updateElement(): void {
-        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
-        const button = document.getElementById(`${this._id}-button`) as HTMLButtonElement;
+    protected _validateValue(files: File[]): boolean | string {
+        const { required } = this.state;
 
-        if (input) {
-            input.disabled = this.state.disabled;
+        if (required && files.length === 0) {
+            return 'Please select at least one file';
         }
-        if (button) {
-            button.disabled = this.state.disabled;
+
+        if (this._onValidate) {
+            const result = this._onValidate(files);
+            if (result !== true) {
+                return result || 'Invalid files';
+            }
         }
-    }
 
-    getFiles(): File[] {
-        return this.state.files;
+        return true;
     }
 
-    clear(): void {
-        this.state.files = [];
-        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
-        const fileList = document.getElementById(`${this._id}-list`);
+    protected _buildInputElement(): HTMLElement {
+        const { accept, multiple, required, disabled, name } = this.state;
 
-        if (input) {
-            input.value = '';
-        }
-        if (fileList) {
-            this._updateFileList(fileList, []);
-        }
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.className = 'jux-fileupload-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.required = required;
+        input.disabled = disabled;
+
+        if (accept) input.accept = accept;
+        if (multiple) input.multiple = multiple;
+
+        return input;
     }
 
-    /* -------------------------
-     * Render (5-Step Pattern)
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        // === 1. SETUP: Get or create container ===
-        let container: HTMLElement;
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`FileUpload: Target "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state and check sync flags ===
-        const { label, accept, multiple, disabled, name, style, class: className } = this.state;
-        const hasFilesSync = this._syncBindings.some(b => b.property === 'files');
+        const { icon, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
+        // Build wrapper
         const wrapper = document.createElement('div');
-        wrapper.className = 'jux-fileupload';
+        wrapper.className = 'jux-input jux-fileupload';
         wrapper.id = this._id;
         if (className) wrapper.className += ` ${className}`;
         if (style) wrapper.setAttribute('style', style);
 
-        if (label) {
-            const labelEl = document.createElement('label');
-            labelEl.className = 'jux-fileupload-label';
-            labelEl.textContent = label;
-            wrapper.appendChild(labelEl);
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
         }
 
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.className = 'jux-fileupload-input';
-        input.id = `${this._id}-input`;
-        input.name = name;
-        input.disabled = disabled;
-        if (accept) input.accept = accept;
-        if (multiple) input.multiple = multiple;
+        // Hidden file input
+        const inputEl = this._buildInputElement() as HTMLInputElement;
+        this._inputElement = inputEl;
+        wrapper.appendChild(inputEl);
+
+        // Button container
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'jux-fileupload-button-container';
+
+        if (icon) {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-fileupload-icon';
+            iconEl.appendChild(renderIcon(icon));
+            buttonContainer.appendChild(iconEl);
+        }
 
         const button = document.createElement('button');
         button.type = 'button';
         button.className = 'jux-fileupload-button';
-        button.id = `${this._id}-button`;
         button.textContent = 'Choose File(s)';
-        button.disabled = disabled;
+        button.disabled = this.state.disabled;
 
+        buttonContainer.appendChild(button);
+        wrapper.appendChild(buttonContainer);
+
+        // File list
         const fileList = document.createElement('div');
         fileList.className = 'jux-fileupload-list';
-        fileList.id = `${this._id}-list`;
-
-        wrapper.appendChild(button);
-        wrapper.appendChild(input);
+        this._fileListElement = fileList;
         wrapper.appendChild(fileList);
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
+        // Error element
+        wrapper.appendChild(this._renderError());
 
         // Button click triggers file input
-        button.addEventListener('click', () => input.click());
+        button.addEventListener('click', () => inputEl.click());
 
-        // Default file change behavior (only if NOT using sync)
-        if (!hasFilesSync) {
-            input.addEventListener('change', () => {
-                this.state.files = Array.from(input.files || []);
-                this._updateFileList(fileList, this.state.files);
+        // Wire events
+        this._wireStandardEvents(wrapper);
+
+        // Wire file-specific sync
+        const filesSync = this._syncBindings.find(b => b.property === 'files' || b.property === 'value');
+
+        if (filesSync) {
+            const { stateObj, toState, toComponent } = filesSync;
+
+            const transformToState = toState || ((v: File[]) => v);
+            const transformToComponent = toComponent || ((v: any) => v);
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
             });
-        }
 
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            wrapper.addEventListener(event, handler as EventListener);
-        });
+            // Component → State
+            inputEl.addEventListener('change', () => {
+                if (isUpdating) return;
+                isUpdating = true;
 
-        // Wire sync bindings from .sync() calls
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'files') {
-                const transformToState = toState || ((v: any) => v);
-                const transformToComponent = toComponent || ((v: any) => v);
+                const files = Array.from(inputEl.files || []);
+                this.state.files = files;
+                this._updateFileList(files);
+                this._clearError();
 
-                let isUpdating = false;
+                const transformed = transformToState(files);
+                stateObj.set(transformed);
 
-                // State → Component
-                stateObj.subscribe((val: any) => {
-                    if (isUpdating) return;
-                    const transformed = transformToComponent(val);
-                    this.state.files = transformed;
-                    this._updateFileList(fileList, transformed);
-                });
+                // 🎯 Fire the callback events
+                this._triggerCallback('change', files);
+                this._triggerCallback('filesSelected', files);
 
-                // Component → State
-                input.addEventListener('change', () => {
-                    if (isUpdating) return;
-                    isUpdating = true;
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputEl.addEventListener('change', () => {
+                const files = Array.from(inputEl.files || []);
+                this.state.files = files;
+                this._updateFileList(files);
+                this._clearError();
+
+                // 🎯 Fire the callback events
+                this._triggerCallback('change', files);
+                this._triggerCallback('filesSelected', files);
+            });
+        }
 
-                    const files = Array.from(input.files || []);
-                    this.state.files = files;
-                    this._updateFileList(fileList, files);
+        // Always add blur validation
+        inputEl.addEventListener('blur', () => {
+            this.validate();
+        });
 
-                    const transformed = transformToState(files);
-                    stateObj.set(transformed);
+        // Sync label changes
+        const labelSync = this._syncBindings.find(b => b.property === 'label');
+        if (labelSync) {
+            const transform = labelSync.toComponent || ((v: any) => String(v));
+            labelSync.stateObj.subscribe((val: any) => {
+                this.label(transform(val));
+            });
+        }
 
-                    setTimeout(() => { isUpdating = false; }, 0);
-                });
+        container.appendChild(wrapper);
+        this._injectFileUploadStyles();
+        this._injectFormStyles();
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
             }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
-        container.appendChild(wrapper);
         return this;
     }
 
-    private _updateFileList(fileList: HTMLElement, files: File[]): void {
-        fileList.innerHTML = '';
+    private _updateFileList(files: File[]): void {
+        if (!this._fileListElement) return;
+
+        this._fileListElement.innerHTML = '';
 
         if (files.length === 0) {
-            fileList.textContent = 'No files selected';
+            this._fileListElement.textContent = 'No files selected';
             return;
         }
 
@@ -267,7 +302,7 @@ export class FileUpload {
             const fileItem = document.createElement('div');
             fileItem.className = 'jux-fileupload-item';
             fileItem.textContent = `${file.name} (${this._formatFileSize(file.size)})`;
-            fileList.appendChild(fileItem);
+            this._fileListElement!.appendChild(fileItem);
         });
     }
 
@@ -277,11 +312,62 @@ export class FileUpload {
         return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('FileUpload.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectFileUploadStyles(): void {
+        const styleId = 'jux-fileupload-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-fileupload-input {
+        display: none;
+      }
+
+      .jux-fileupload-button-container {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .jux-fileupload-icon svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      .jux-fileupload-button {
+        padding: 8px 16px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .jux-fileupload-button:hover:not(:disabled) {
+        background: #2563eb;
+      }
+
+      .jux-fileupload-button:disabled {
+        background: #9ca3af;
+        cursor: not-allowed;
+      }
+
+      .jux-fileupload-list {
+        margin-top: 12px;
+        font-size: 14px;
+        color: #6b7280;
+      }
+
+      .jux-fileupload-item {
+        padding: 8px;
+        background: #f3f4f6;
+        border-radius: 4px;
+        margin-bottom: 4px;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }
 

package/lib/components/guard.ts

@@ -0,0 +1,92 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { State } from '../reactivity/state.js';
+
+// Extend Window interface to include Jux navigation hooks
+declare global {
+    interface Window {
+        juxBeforeNavigate?: (from: string, to: string) => boolean | string;
+        juxAfterNavigate?: (path: string) => void;
+    }
+}
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['blocked', 'allowed'] as const;
+
+export interface GuardOptions {
+    authState?: State<boolean>;       // Check if user is authenticated
+    loginPath?: string;               // Where to redirect if blocked
+    protectedPaths?: string[];        // Paths that require auth
+}
+
+type GuardState = {
+    authState: State<boolean> | null;
+    loginPath: string;
+    protectedPaths: string[];
+    isActive: boolean;
+};
+
+/**
+ * ⚠️ DEPRECATED: Guard component is no longer supported after removing global middleware.
+ * 
+ * Recommended alternatives:
+ * 1. Server-side authentication (Express, FastAPI, Laravel)
+ * 2. Manual route checks in each view
+ * 3. Custom wrapper components
+ * 
+ * This component will be removed in a future version.
+ */
+export class Guard extends BaseComponent<GuardState> {
+    constructor(id: string, options: GuardOptions = {}) {
+        super(id, {
+            authState: options.authState ?? null,
+            loginPath: options.loginPath ?? '/login',
+            protectedPaths: options.protectedPaths ?? [],
+            isActive: false
+        });
+
+        console.warn(
+            '[Jux Guard] DEPRECATED: Guard component no longer supported after middleware removal.\n' +
+            'Use server-side auth or manual checks instead.'
+        );
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API (No-ops now)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    requireAuth(authState: State<boolean>, loginPath?: string): this {
+        console.warn('[Jux Guard] DEPRECATED: requireAuth() has no effect');
+        return this;
+    }
+
+    protect(...paths: string[]): this {
+        console.warn('[Jux Guard] DEPRECATED: protect() has no effect');
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER (No-op)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        console.warn('[Jux Guard] DEPRECATED: Guard rendering has no effect');
+        return this;
+    }
+
+    deactivate(): this {
+        return this;
+    }
+}
+
+export function guard(id: string, options?: GuardOptions): Guard {
+    return new Guard(id, options);
+}