juxscript 1.0.59 → 1.0.61

package/lib/jux.ts

@@ -4,6 +4,7 @@
  */
 
 import { state } from './reactivity/state.js';
+import { fetchAPI, type FetchConfig, type FetchResult } from './utils/fetch.js';
 import { Guard, type GuardOptions, guard } from './components/guard.js';
 import { Data, data } from './components/data.js';
 import { table, Table, type TableOptions } from './components/table.js';
@@ -54,14 +55,8 @@ import { divider, Divider, type DividerOptions } from './components/divider.js';
 import { icon as iconComponent, Icon, type IconOptions } from './components/icon.js';
 import { renderIcon, renderEmoji } from './components/icons.js';
 import { sidebar, Sidebar, type SidebarOptions } from './components/sidebar.js';
+import { grid, Grid } from './components/grid.js';
 
-// ✅ NEW: Chart imports from /charts folder
-import { chart, Chart, type ChartOptions } from './components/charts/lib/chart.js';
-import { barchart, BarChart, type BarChartOptions } from './components/charts/barchart.js';
-import { areachart, AreaChart, type AreaChartOptions } from './components/charts/areachart.js';
-import { doughnutchart, DoughnutChart, type DoughnutChartOptions } from './components/charts/doughnutchart.js';
-import { kpicard, KPICard, type KPICardOptions } from './components/kpicard.js';
-import type { ChartDataPoint } from './components/charts/lib/BaseChart.js';
 
 /* -------------------------
  * Type Exports
@@ -83,7 +78,6 @@ export type {
   NavItem,
   ViewOptions,
   TableOptions,
-  ChartOptions,
   CodeOptions,
   InputOptions,
   CardOptions,
@@ -112,11 +106,6 @@ export type {
   RequestInfo,
   HeadingOptions,
   ParagraphOptions,
-  BarChartOptions,
-  AreaChartOptions,
-  DoughnutChartOptions,
-  KPICardOptions,
-  ChartDataPoint,
   DividerOptions,
   IconOptions,
   SidebarOptions
@@ -139,7 +128,6 @@ export {
   Tabs,
   Menu,
   Nav,
-  Chart,
   Code,
   Input,
   View,
@@ -167,13 +155,10 @@ export {
   Req,
   Heading,
   Paragraph,
-  BarChart,
-  AreaChart,
-  DoughnutChart,
-  KPICard,
   Divider,
   Icon,
-  Sidebar
+  Sidebar,
+  Grid
 };
 
 /* -------------------------
@@ -185,6 +170,7 @@ export interface JuxAPI {
   apiUrl: string;
   param(name: string): string | null;
   req: typeof req;
+  fetch: typeof fetchAPI;
 
   // Icon utilities
   icon: typeof renderIcon;
@@ -213,7 +199,6 @@ export interface JuxAPI {
   nav: typeof nav;
   div: typeof div;
   span: typeof span;
-  chart: typeof chart;
   code: typeof code;
 
   view: typeof view;
@@ -240,10 +225,6 @@ export interface JuxAPI {
   fileupload: typeof fileupload;
   heading: typeof heading;
   paragraph: typeof paragraph;
-  barchart: typeof barchart;
-  areachart: typeof areachart;
-  doughnutchart: typeof doughnutchart;
-  kpicard: typeof kpicard;
   divider: typeof divider;
 
   // Input factories
@@ -259,6 +240,7 @@ export interface JuxAPI {
   date: typeof date;
   time: typeof time;
   color: typeof color;
+  grid: typeof grid;
 }
 
 /* -------------------------
@@ -287,6 +269,9 @@ class Jux implements JuxAPI {
   // Request utilities
   req = req;
 
+  // Fetch utility
+  fetch = fetchAPI;
+
   // Icon utilities
   icon = renderIcon;
   emoji = renderEmoji;
@@ -315,7 +300,6 @@ class Jux implements JuxAPI {
   nav = nav;
   div = div;
   span = span;
-  chart = chart;
   view = view;
   app = app;
   include = include;
@@ -340,10 +324,6 @@ class Jux implements JuxAPI {
   fileupload = fileupload;
   heading = heading;
   paragraph = paragraph;
-  barchart = barchart;
-  areachart = areachart;
-  doughnutchart = doughnutchart;
-  kpicard = kpicard;
   divider = divider;
 
   // Input factories
@@ -359,6 +339,7 @@ class Jux implements JuxAPI {
   date = date;
   time = time;
   color = color;
+  grid = grid;
 }
 /**
  * Global jux singleton instance

package/lib/utils/fetch.ts

@@ -0,0 +1,553 @@
+/**
+ * Jux Fetch Utility
+ * 
+ * A lightweight fetch wrapper with sensible defaults, error handling, and method chaining.
+ * Includes configuration helpers for juxconfig.js integration.
+ * 
+ * Usage:
+ *   // Configure once (optional)
+ *   jux.fetch.config({
+ *     baseUrl: 'https://api.example.com',
+ *     credentials: 'include',
+ *     timeout: 10000,
+ *     log: 'errors',
+ *     onUnauthorized: () => window.location.href = '/login'
+ *   });
+ *   
+ *   // Simple GET
+ *   const { data, error } = await jux.fetch('/users').send();
+ *   
+ *   // Method chaining
+ *   const { data, error } = await jux.fetch('/users')
+ *     .method('POST')
+ *     .body({ name: 'John' })
+ *     .params({ limit: 10 })
+ *     .timeout(5000)
+ *     .log(true)
+ *     .send();
+ *   
+ *   // With juxconfig services
+ *   const { data } = await jux.fetch('/users')
+ *     .baseUrl(jux.fetch.getServiceUrl('database'))
+ *     .send();
+ *   
+ *   // Service client helper
+ *   const db = jux.fetch.serviceClient('database');
+ *   const { data } = await db.fetch('/users').send();
+ */
+
+export type LogLevel = boolean | 'errors';
+
+export interface FetchConfig {
+    baseUrl?: string;
+    credentials?: RequestCredentials;
+    headers?: Record<string, string>;
+    timeout?: number;
+    log?: LogLevel;
+    onUnauthorized?: () => void;
+    onError?: (error: FetchError) => void;
+}
+
+export interface FetchOptions extends Omit<RequestInit, 'body'> {
+    params?: Record<string, any>;
+    body?: any;
+    timeout?: number;
+    log?: LogLevel;
+    onUnauthorized?: () => void;
+    onError?: (error: FetchError) => void;
+    parseResponse?: boolean;
+}
+
+export interface FetchError {
+    message: string;
+    status?: number;
+    statusText?: string;
+    data?: any;
+}
+
+export interface FetchResult<T = any> {
+    data: T | null;
+    error: FetchError | null;
+    status: number;
+    response: Response;
+}
+
+// Global configuration
+let globalConfig: FetchConfig = {
+    credentials: 'same-origin',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    timeout: 30000,
+    log: false
+};
+
+/**
+ * Configure global fetch defaults
+ */
+export function configureFetch(config: FetchConfig): void {
+    globalConfig = {
+        ...globalConfig,
+        ...config,
+        headers: {
+            ...globalConfig.headers,
+            ...config.headers
+        }
+    };
+}
+
+/**
+ * Build URL with query parameters
+ */
+function buildUrl(url: string, params?: Record<string, any>): string {
+    if (!params || Object.keys(params).length === 0) {
+        return url;
+    }
+
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            searchParams.append(key, String(value));
+        }
+    });
+
+    const queryString = searchParams.toString();
+    if (!queryString) return url;
+
+    return url.includes('?')
+        ? `${url}&${queryString}`
+        : `${url}?${queryString}`;
+}
+
+/**
+ * Main fetch function
+ */
+async function executeFetch<T = any>(
+    url: string,
+    options: FetchOptions = {}
+): Promise<FetchResult<T>> {
+    const {
+        params,
+        body,
+        timeout = globalConfig.timeout,
+        log = globalConfig.log,
+        onUnauthorized = globalConfig.onUnauthorized,
+        onError = globalConfig.onError,
+        parseResponse = true,
+        headers = {},
+        ...fetchOptions
+    } = options;
+
+    // Build full URL
+    let fullUrl = url;
+
+    // Add base URL if configured and URL is relative
+    if (globalConfig.baseUrl && !url.startsWith('http://') && !url.startsWith('https://')) {
+        fullUrl = `${globalConfig.baseUrl}${url.startsWith('/') ? url : `/${url}`}`;
+    }
+
+    // Add query params
+    fullUrl = buildUrl(fullUrl, params);
+
+    // Merge headers
+    const mergedHeaders = {
+        ...globalConfig.headers,
+        ...headers
+    };
+
+    // Prepare request init
+    const requestInit: RequestInit = {
+        ...fetchOptions,
+        headers: mergedHeaders,
+        credentials: options.credentials ?? globalConfig.credentials
+    };
+
+    // Stringify body if it's an object
+    if (body !== undefined) {
+        if (body instanceof FormData) {
+            requestInit.body = body;
+            // Remove Content-Type header for FormData (browser sets it with boundary)
+            delete (requestInit.headers as Record<string, string>)['Content-Type'];
+        } else if (typeof body === 'object') {
+            requestInit.body = JSON.stringify(body);
+        } else {
+            requestInit.body = body;
+        }
+    }
+
+    // Log request
+    if (log === true) {
+        console.log(`[JUX Fetch] ${requestInit.method || 'GET'} ${fullUrl}`, {
+            headers: requestInit.headers,
+            body: requestInit.body,
+            params
+        });
+    }
+
+    // Setup timeout
+    const controller = new AbortController();
+    const timeoutId = timeout ? setTimeout(() => controller.abort(), timeout) : null;
+
+    if (!requestInit.signal) {
+        requestInit.signal = controller.signal;
+    }
+
+    try {
+        const response = await fetch(fullUrl, requestInit);
+
+        if (timeoutId) clearTimeout(timeoutId);
+
+        // Handle unauthorized
+        if (response.status === 401 || response.status === 403) {
+            if (onUnauthorized) {
+                onUnauthorized();
+            }
+        }
+
+        // Parse response
+        let data: T | null = null;
+        let errorData: any = null;
+
+        if (parseResponse) {
+            const contentType = response.headers.get('content-type');
+
+            if (contentType?.includes('application/json')) {
+                try {
+                    const json = await response.json();
+                    if (response.ok) {
+                        data = json;
+                    } else {
+                        errorData = json;
+                    }
+                } catch (e) {
+                    // JSON parse error
+                }
+            } else if (response.ok) {
+                // Non-JSON response, try to get text
+                try {
+                    data = (await response.text()) as any;
+                } catch (e) {
+                    // Ignore text parse errors
+                }
+            }
+        }
+
+        // Check if request was successful
+        if (!response.ok) {
+            const error: FetchError = {
+                message: errorData?.message || errorData?.error || response.statusText || 'Request failed',
+                status: response.status,
+                statusText: response.statusText,
+                data: errorData
+            };
+
+            // Log error
+            if (log === true || log === 'errors') {
+                console.error(`[JUX Fetch Error] ${requestInit.method || 'GET'} ${fullUrl}`, error);
+            }
+
+            if (onError) {
+                onError(error);
+            }
+
+            return {
+                data: null,
+                error,
+                status: response.status,
+                response
+            };
+        }
+
+        // Log success
+        if (log === true) {
+            console.log(`[JUX Fetch Success] ${requestInit.method || 'GET'} ${fullUrl}`, {
+                status: response.status,
+                data
+            });
+        }
+
+        return {
+            data,
+            error: null,
+            status: response.status,
+            response
+        };
+
+    } catch (err: any) {
+        if (timeoutId) clearTimeout(timeoutId);
+
+        const error: FetchError = {
+            message: err.name === 'AbortError'
+                ? 'Request timeout'
+                : err.message || 'Network error',
+            status: 0
+        };
+
+        // Log error
+        if (log === true || log === 'errors') {
+            console.error(`[JUX Fetch Error] ${requestInit.method || 'GET'} ${fullUrl}`, error);
+        }
+
+        if (onError) {
+            onError(error);
+        }
+
+        return {
+            data: null,
+            error,
+            status: 0,
+            response: null as any
+        };
+    }
+}
+
+/**
+ * FetchBuilder class for method chaining
+ */
+class FetchBuilder<T = any> {
+    public url: string;
+    public options: FetchOptions = {};
+
+    constructor(url: string, options: FetchOptions = {}) {
+        this.url = url;
+        this.options = options;
+    }
+
+    method(value: string): this {
+        this.options.method = value;
+        return this;
+    }
+
+    body(value: any): this {
+        this.options.body = value;
+        return this;
+    }
+
+    params(value: Record<string, any>): this {
+        this.options.params = value;
+        return this;
+    }
+
+    headers(value: Record<string, string>): this {
+        this.options.headers = { ...this.options.headers, ...value };
+        return this;
+    }
+
+    header(key: string, value: string): this {
+        this.options.headers = { ...this.options.headers, [key]: value };
+        return this;
+    }
+
+    timeout(value: number): this {
+        this.options.timeout = value;
+        return this;
+    }
+
+    credentials(value: RequestCredentials): this {
+        this.options.credentials = value;
+        return this;
+    }
+
+    log(value: LogLevel): this {
+        this.options.log = value;
+        return this;
+    }
+
+    parseResponse(value: boolean): this {
+        this.options.parseResponse = value;
+        return this;
+    }
+
+    onUnauthorized(callback: () => void): this {
+        this.options.onUnauthorized = callback;
+        return this;
+    }
+
+    onError(callback: (error: FetchError) => void): this {
+        this.options.onError = callback;
+        return this;
+    }
+
+    /**
+     * Execute the fetch request
+     */
+    send(): Promise<FetchResult<T>> {
+        return executeFetch<T>(this.url, this.options);
+    }
+
+    /**
+     * Alias for send()
+     */
+    fetch(): Promise<FetchResult<T>> {
+        return this.send();
+    }
+
+    /**
+     * Make the builder thenable (Promise-like) so it can be awaited directly
+     * This allows: await jux.fetch('/users') without needing .send()
+     */
+    then<TResult1 = FetchResult<T>, TResult2 = never>(
+        onfulfilled?: ((value: FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null,
+        onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
+    ): Promise<TResult1 | TResult2> {
+        return this.send().then(onfulfilled, onrejected);
+    }
+
+    /**
+     * Make the builder catchable for Promise.catch()
+     */
+    catch<TResult = never>(
+        onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null
+    ): Promise<FetchResult<T> | TResult> {
+        return this.send().catch(onrejected);
+    }
+
+    /**
+     * Make the builder finally-able for Promise.finally()
+     */
+    finally(onfinally?: (() => void) | null): Promise<FetchResult<T>> {
+        return this.send().finally(onfinally);
+    }
+}
+
+/**
+ * Create a fetch builder
+ */
+export function juxFetch<T = any>(url: string, options: FetchOptions = {}): FetchBuilder<T> {
+    return new FetchBuilder<T>(url, options);
+}
+
+/**
+ * Convenience methods for common HTTP verbs
+ */
+export const fetchHelpers = {
+    get: <T = any>(url: string, options?: Omit<FetchOptions, 'method'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'GET' }),
+
+    post: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'POST', body }),
+
+    put: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'PUT', body }),
+
+    patch: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'PATCH', body }),
+
+    delete: <T = any>(url: string, options?: Omit<FetchOptions, 'method'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'DELETE' })
+};
+
+/**
+ * Fetch multiple URLs in parallel
+ */
+export async function fetchAll<T = any>(
+    urls: string[],
+    options?: FetchOptions
+): Promise<FetchResult<T>[]> {
+    return Promise.all(urls.map(url => executeFetch<T>(url, options)));
+}
+
+/**
+ * Get a service URL from window.juxConfig
+ */
+export function getServiceUrl(serviceName: string): string | null {
+    if (typeof window === 'undefined') return null;
+
+    const juxConfig = (window as any).juxConfig;
+    if (!juxConfig?.services) return null;
+
+    return juxConfig.services[serviceName] || null;
+}
+
+/**
+ * Create a fetch instance preconfigured for a specific service
+ * 
+ * Usage:
+ *   const api = jux.fetch.serviceClient('database');
+ *   const { data } = await api.fetch('/users').send();
+ */
+export function serviceClient(serviceName: string) {
+    const baseUrl = getServiceUrl(serviceName);
+
+    if (!baseUrl) {
+        console.warn(`[JUX Fetch] Service '${serviceName}' not found in juxConfig.services`);
+    }
+
+    return {
+        fetch: (url: string, options?: any) => {
+            return juxFetch(url, {
+                ...options,
+                baseUrl: baseUrl || undefined
+            });
+        },
+        baseUrl
+    };
+}
+
+/**
+ * Setup fetch from juxconfig
+ * Call this in your bootstrap function
+ * 
+ * Usage:
+ *   export default {
+ *     bootstrap: [
+ *       async function initFetch() {
+ *         await jux.fetch.setupConfig();
+ *       }
+ *     ]
+ *   };
+ */
+export async function setupConfig() {
+    if (typeof window === 'undefined') {
+        console.warn('[JUX Fetch] setupConfig() called outside browser environment');
+        return;
+    }
+
+    const juxConfig = (window as any).juxConfig;
+
+    if (!juxConfig) {
+        console.warn('[JUX Fetch] No juxConfig found on window. Make sure your juxconfig.js is loaded.');
+        return;
+    }
+
+    const services = juxConfig.services || {};
+
+    if (Object.keys(services).length === 0) {
+        console.log('[JUX Fetch] No services configured in juxConfig');
+        return;
+    }
+
+    // Configure fetch with common defaults
+    const fetchConfig: FetchConfig = {
+        timeout: juxConfig.fetchTimeout || 30000,
+        log: juxConfig.fetchLog || false,
+        credentials: 'include'
+    };
+
+    // Add service-specific handlers
+    if (services.auth) {
+        fetchConfig.onUnauthorized = () => {
+            console.warn('[JUX Fetch] Unauthorized - consider redirecting to login');
+        };
+    }
+
+    configureFetch(fetchConfig);
+
+    // Log configured services
+    console.log('[JUX Fetch] Configured with services:', Object.keys(services));
+
+    return {
+        services,
+        getServiceUrl
+    };
+}
+
+// Export combined API
+export const fetchAPI = Object.assign(juxFetch, {
+    config: configureFetch,
+    setupConfig,
+    getServiceUrl,
+    serviceClient,
+    ...fetchHelpers,
+    all: fetchAll
+});