@airoom/nextmin-react 2.0.2 → 2.0.3

package/dist/providers/NextMinProvider.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
 import { NextMinClient } from '../lib/api';
+import { ThemeConfig } from './themeResolver';
 export interface NextMinContextType {
     client: NextMinClient;
+    theme: ThemeConfig | null;
+    navigate?: (url: string) => void;
 }
 export declare function useNextMin(): NextMinContextType;
-export declare function NextMinProvider({ children, navigate, apiUrl, apiKey }: {
+export declare function NextMinProvider({ children, navigate, apiUrl, apiKey, theme }: {
     children: React.ReactNode;
     navigate?: (url: string) => void;
     apiUrl?: string;
     apiKey?: string;
+    theme?: ThemeConfig;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/providers/NextMinProvider.js

@@ -7,6 +7,7 @@ import { nextminstore } from '../state/store';
 import { fetchSchemas, setSchemas } from '../state/schemasSlice';
 import { RealtimeClient } from '../lib/RealtimeClient';
 import { AuthClient } from '../lib/AuthClient';
+import { loadThemeConfigServer } from './themeResolver';
 function Bootstrapper() {
     const dispatch = useDispatch();
     const status = useSelector((s) => s.schemas.status);
@@ -29,6 +30,7 @@ function Bootstrapper() {
     return null;
 }
 import { NextMinClient } from '../lib/api';
+import { getThemeConfig } from './themeResolver';
 const NextMinContext = React.createContext(undefined);
 export function useNextMin() {
     const context = React.useContext(NextMinContext);
@@ -36,7 +38,7 @@ export function useNextMin() {
         throw new Error('useNextMin must be used within NextMinProvider');
     return context;
 }
-export function NextMinProvider({ children, navigate, apiUrl, apiKey }) {
+export function NextMinProvider({ children, navigate, apiUrl, apiKey, theme }) {
     const client = React.useMemo(() => {
         if (apiUrl)
             AuthClient.setBaseURL(apiUrl);
@@ -55,5 +57,13 @@ export function NextMinProvider({ children, navigate, apiUrl, apiKey }) {
             apiKey: apiKey
         });
     }, [apiUrl, apiKey]);
-    return (_jsx(Provider, { store: nextminstore, children: _jsx(NextMinContext.Provider, { value: { client }, children: _jsxs(HeroUIProvider, { navigate: navigate, children: [_jsx(Bootstrapper, {}), children] }) }) }));
+    const themeConfig = loadThemeConfigServer();
+    const resolvedTheme = React.useMemo(() => {
+        if (theme)
+            return theme;
+        return getThemeConfig();
+    }, [theme]);
+    return (_jsxs(Provider, { store: nextminstore, children: [themeConfig && !theme && (_jsx("script", { id: "nextmin-theme-state", dangerouslySetInnerHTML: {
+                    __html: `window.__NEXTMIN_THEME__ = ${JSON.stringify(themeConfig)};`,
+                } })), _jsx(NextMinContext.Provider, { value: { client, theme: resolvedTheme, navigate }, children: _jsxs(HeroUIProvider, { navigate: navigate, children: [_jsx(Bootstrapper, {}), children] }) })] }));
 }

package/dist/providers/themeResolver.d.ts

@@ -0,0 +1,25 @@
+export interface ThemeConfig {
+    mainAdminBgColor?: string;
+    sidebarColor?: string;
+    activeMenuBgColor?: string;
+    activeMenuTextColor?: string;
+    menuTextColor?: string;
+    menuHoverBgColor?: string;
+    menuHoverTextColor?: string;
+    sidebarTextColor?: string;
+    sidebarBorderColor?: string;
+    topNavBgColor?: string;
+    topNavHeight?: string | number;
+    inputHeight?: string | number;
+    inputRadius?: string | number;
+    sidebarWidth?: string | number;
+    sidebarPosition?: 'left' | 'right' | (string & {});
+    primaryColor?: string;
+}
+export declare function isTailwindClass(val: unknown): boolean;
+export declare function resolveHeightValue(val: unknown): string | undefined;
+export declare function resolveRadiusValue(val: unknown): string | undefined;
+export declare function resolveSidebarWidth(val: unknown): string | undefined;
+export declare function hexToHslComponents(hex: string): string | null;
+export declare function loadThemeConfigServer(): ThemeConfig | null;
+export declare function getThemeConfig(): ThemeConfig | null;

package/dist/providers/themeResolver.js

@@ -0,0 +1,174 @@
+'use client';
+const tailwindHeights = {
+    'h-6': '1.5rem',
+    'h-7': '1.75rem',
+    'h-8': '2rem',
+    'h-9': '2.25rem',
+    'h-10': '2.5rem',
+    'h-11': '2.75rem',
+    'h-12': '3rem',
+    'h-14': '3.5rem',
+    'h-16': '4rem',
+    'h-20': '5rem',
+    'h-24': '6rem',
+};
+const tailwindRadii = {
+    'rounded-none': '0px',
+    'rounded-sm': '0.125rem',
+    'rounded': '0.25rem',
+    'rounded-md': '0.375rem',
+    'rounded-lg': '0.5rem',
+    'rounded-xl': '0.75rem',
+    'rounded-2xl': '1rem',
+    'rounded-3xl': '1.5rem',
+    'rounded-full': '9999px',
+};
+export function isTailwindClass(val) {
+    if (typeof val !== 'string')
+        return false;
+    const s = val.trim();
+    return (s.startsWith('bg-') ||
+        s.startsWith('text-') ||
+        s.startsWith('border-') ||
+        s.startsWith('h-') ||
+        s.startsWith('w-') ||
+        s.startsWith('rounded-') ||
+        s.includes(':') ||
+        s.startsWith('from-') ||
+        s.startsWith('to-'));
+}
+export function resolveHeightValue(val) {
+    if (typeof val === 'number')
+        return `${val}px`;
+    if (typeof val === 'string') {
+        const s = val.trim();
+        const match = s.match(/^h-\[(.+)\]$/);
+        if (match)
+            return match[1];
+        if (s.startsWith('h-'))
+            return tailwindHeights[s] || undefined;
+        if (/^\d+$/.test(s))
+            return `${s}px`;
+        return s;
+    }
+    return undefined;
+}
+export function resolveRadiusValue(val) {
+    if (typeof val === 'number')
+        return `${val}px`;
+    if (typeof val === 'string') {
+        const s = val.trim();
+        const match = s.match(/^rounded-\[(.+)\]$/);
+        if (match)
+            return match[1];
+        if (s.startsWith('rounded-'))
+            return tailwindRadii[s] || undefined;
+        if (/^\d+$/.test(s))
+            return `${s}px`;
+        return s;
+    }
+    return undefined;
+}
+export function resolveSidebarWidth(val) {
+    if (typeof val === 'number')
+        return `${val}px`;
+    if (typeof val === 'string') {
+        const s = val.trim();
+        const match = s.match(/^w-\[(.+)\]$/);
+        if (match)
+            return match[1];
+        if (/^\d+$/.test(s))
+            return `${s}px`;
+        return s;
+    }
+    return undefined;
+}
+export function hexToHslComponents(hex) {
+    let cleanHex = hex.replace(/[^0-9a-fA-F]/g, '');
+    if (cleanHex.length === 3) {
+        cleanHex = cleanHex[0] + cleanHex[0] + cleanHex[1] + cleanHex[1] + cleanHex[2] + cleanHex[2];
+    }
+    if (cleanHex.length !== 6 && cleanHex.length !== 8) {
+        return null;
+    }
+    const r = parseInt(cleanHex.slice(0, 2), 16) / 255;
+    const g = parseInt(cleanHex.slice(2, 4), 16) / 255;
+    const b = parseInt(cleanHex.slice(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === r) {
+            h = (g - b) / d + (g < b ? 6 : 0);
+        }
+        else if (max === g) {
+            h = (b - r) / d + 2;
+        }
+        else if (max === b) {
+            h = (r - g) / d + 4;
+        }
+        h /= 6;
+    }
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+function parseThemeFile(content) {
+    try {
+        const firstBrace = content.indexOf('{');
+        const lastBrace = content.lastIndexOf('}');
+        if (firstBrace === -1 || lastBrace === -1)
+            return null;
+        const jsonLike = content.slice(firstBrace, lastBrace + 1);
+        // Evaluate it safely using Function constructor
+        const fn = new Function(`return (${jsonLike})`);
+        return fn();
+    }
+    catch (e) {
+        console.error('Error parsing nextmin-theme config:', e);
+        return null;
+    }
+}
+let serverLoadedConfig = null;
+let hasAttemptedServerLoad = false;
+export function loadThemeConfigServer() {
+    if (typeof window !== 'undefined')
+        return null;
+    const isDev = process.env.NODE_ENV === 'development';
+    if (!isDev && hasAttemptedServerLoad)
+        return serverLoadedConfig;
+    hasAttemptedServerLoad = true;
+    try {
+        const r = eval('require');
+        const p = r('path');
+        const f = r('fs');
+        const cwd = process.cwd();
+        const tsPath = p.join(cwd, 'nextmin-theme.ts');
+        const jsPath = p.join(cwd, 'nextmin-theme.js');
+        let content = '';
+        if (f.existsSync(tsPath)) {
+            content = f.readFileSync(tsPath, 'utf-8');
+        }
+        else if (f.existsSync(jsPath)) {
+            content = f.readFileSync(jsPath, 'utf-8');
+        }
+        if (content) {
+            serverLoadedConfig = parseThemeFile(content);
+        }
+        else {
+            serverLoadedConfig = null; // Clear if file was removed
+        }
+    }
+    catch (err) {
+        // Ignore server-side loading errors
+    }
+    return serverLoadedConfig;
+}
+export function getThemeConfig() {
+    if (typeof window !== 'undefined') {
+        return window.__NEXTMIN_THEME__ || null;
+    }
+    return loadThemeConfigServer();
+}

package/dist/router/NextMinRouter.d.ts

@@ -1,2 +1 @@
-import '../components/editor/editor.css';
 export declare function NextMinRouter(): import("react/jsx-runtime").JSX.Element;

package/dist/router/NextMinRouter.js

@@ -10,7 +10,6 @@ import { DashboardPage } from '../views/DashboardPage';
 import { SectionLoader } from '../components/SectionLoader';
 import SettingsEdit from '../views/SettingsEdit';
 import ProfilePage from '../views/ProfilePage';
-import '../components/editor/editor.css';
 export function NextMinRouter() {
     const pathname = usePathname();
     const router = useRouter();

package/dist/views/CreateEditPage.js

@@ -1,25 +1,31 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { useRouter } from 'next/navigation';
 import { useSelector } from 'react-redux';
 import { api } from '../lib/api';
 import { SchemaForm } from '../components/SchemaForm';
-import Link from 'next/link';
 import { Button, Divider } from '@heroui/react';
+import { useAppNavigation } from '../hooks/useAppNavigation';
 function extractFieldErrors(err) {
-    // Try common shapes: axios error -> err.response.data.fields
-    const data = err?.response?.data ?? err?.data ?? err;
-    const fields = Array.isArray(data?.fields) ? data.fields : [];
-    return fields
+    // Try common shapes: ApiError -> err.info.fields, Axios -> err.response.data.fields, etc.
+    const data = err?.info ?? err?.response?.data ?? err?.data ?? err;
+    const rawFields = Array.isArray(data?.fields)
+        ? data.fields
+        : Array.isArray(err?.fields)
+            ? err.fields
+            : Array.isArray(err?.info)
+                ? err.info
+                : [];
+    return rawFields
         .filter((f) => f && typeof f === 'object')
         .map((f) => ({
+        error: Boolean(f.error ?? true),
         field: String(f.field ?? ''),
         message: String(f.message ?? 'Invalid value'),
     }));
 }
 export function CreateEditPage({ model, id }) {
-    const router = useRouter();
+    const navigateTo = useAppNavigation();
     const { items } = useSelector((s) => s.schemas);
     const schema = useMemo(() => items.find((s) => s.modelName.toLowerCase() === model.toLowerCase()), [items, model]);
     const [initialValues, setInitialValues] = useState({});
@@ -50,6 +56,9 @@ export function CreateEditPage({ model, id }) {
             cancelled = true;
         };
     }, [id, model]);
+    const navigateToList = () => {
+        navigateTo(`/admin/${model}`);
+    };
     const handleSubmit = async (values) => {
         setBusy(true);
         setError(undefined);
@@ -61,11 +70,11 @@ export function CreateEditPage({ model, id }) {
             else {
                 await api.create(model, values);
             }
-            router.push(`/admin/${model}`);
-            router.refresh();
+            navigateToList();
         }
         catch (e) {
-            setFieldErrors(e.fields ?? []);
+            const extracted = extractFieldErrors(e);
+            setFieldErrors(extracted);
             setError(e?.message || 'Save failed');
         }
         finally {
@@ -74,5 +83,5 @@ export function CreateEditPage({ model, id }) {
     };
     if (!schema)
         return _jsx("div", { className: "text-danger text-sm", children: "Schema not found" });
-    return (_jsxs("div", { className: "grid gap-4 px-4", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("h2", { className: "m-0 text-xl font-semibold", children: id ? `Edit ${schema.modelName}` : `Create ${schema.modelName}` }), _jsx("div", { className: "flex items-center gap-3", children: _jsx(Button, { as: Link, href: `/admin/${model}`, size: "sm", variant: "flat", color: "danger", isDisabled: busy, children: "Cancel" }) })] }), _jsx(Divider, { className: "my-3" }), error && _jsx("div", { className: "text-danger text-sm", children: error }), fieldErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-danger-200 bg-danger-50 px-3 py-2 text-warning-800 text-sm", children: _jsx("ul", { className: "list-disc pl-5", children: fieldErrors.map((fe, idx) => (_jsxs("li", { children: [_jsx("span", { className: "font-medium", children: fe.field }), ": ", fe.message] }, `${fe.field}-${idx}`))) }) })), _jsx(SchemaForm, { model: model, schemaOverride: schema, initialValues: initialValues, submitLabel: id ? 'Save' : 'Create', busy: busy, onSubmit: handleSubmit, fieldErrors: fieldErrors })] }));
+    return (_jsxs("div", { className: "grid gap-4 px-4", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("h2", { className: "m-0 text-xl font-semibold", children: id ? `Edit ${schema.modelName}` : `Create ${schema.modelName}` }), _jsx("div", { className: "flex items-center gap-3", children: _jsx(Button, { size: "sm", variant: "flat", color: "danger", isDisabled: busy, onPress: navigateToList, children: "Cancel" }) })] }), _jsx(Divider, { className: "my-3" }), error && _jsx("div", { className: "text-danger text-sm", children: error }), fieldErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-danger-200 bg-danger-50 px-3 py-2 text-warning-800 text-sm", children: _jsx("ul", { className: "list-disc pl-5", children: fieldErrors.map((fe, idx) => (_jsxs("li", { children: [_jsx("span", { className: "font-medium", children: fe.field }), ": ", fe.message] }, `${fe.field}-${idx}`))) }) })), _jsx(SchemaForm, { model: model, schemaOverride: schema, initialValues: initialValues, submitLabel: id ? 'Save' : 'Create', busy: busy, onSubmit: handleSubmit, fieldErrors: fieldErrors, isEdit: !!id })] }));
 }

package/dist/views/DashboardPage.js

@@ -38,7 +38,7 @@ export function DashboardPage() {
                 if (!c.model)
                     return [c.key, null];
                 try {
-                    const res = await api.list(c.model, { page: 1, limit: 1 });
+                    const res = await api.list(c.model, { page: 1, limit: 1, select: 'id' });
                     const total = res?.pagination?.totalRows ?? res?.data?.length ?? 0;
                     return [c.key, total];
                 }

package/dist/views/ListPage.js

@@ -13,6 +13,8 @@ export function ListPage({ model }) {
     const [page, setPage] = useState(1); // 1-based
     const [pageSize, setPageSize] = useState(10);
     const [filters, setFilters] = useState({});
+    const [sort, setSort] = useState('createdAt');
+    const [sortType, setSortType] = useState('desc');
     // schema
     const { items } = useSelector((s) => s.schemas);
     const schema = useMemo(() => items.find((s) => s.modelName.toLowerCase() === model.toLowerCase()), [items, model]);
@@ -40,12 +42,9 @@ export function ListPage({ model }) {
         setPage(1);
         setPageSize(10);
         setFilters({});
+        setSort('createdAt');
+        setSortType('desc');
     }, [model]);
-    // data
-    const [{ rows, total, loading, forbidden, err }, refetch] = useListData(model, page, pageSize, {
-        q: filters.q,
-        searchKey: filters.searchKey,
-    });
     // columns (ALWAYS call hooks; derive from schema or empty object)
     const attributes = (viewSchema?.attributes ?? {});
     // Generic password detectors (hide from table columns as well)
@@ -117,6 +116,35 @@ export function ListPage({ model }) {
         }
         return visible;
     }, [allColumns, visibleColumns, schema]);
+    const selectProjection = useMemo(() => {
+        const keys = new Set(['id', '_id', ...tableColumns]);
+        if (attributes?.slug) {
+            keys.add('slug');
+        }
+        if (schema?.actions && Array.isArray(schema.actions)) {
+            for (const act of schema.actions) {
+                const str = String(act?.url || act?.urlTemplate || act.href || '');
+                const matches = str.match(/\{([a-zA-Z0-9_]+)\}/g);
+                if (matches) {
+                    for (const m of matches) {
+                        const field = m.replace(/[{}]/g, '');
+                        if (attributes[field]) {
+                            keys.add(field);
+                        }
+                    }
+                }
+            }
+        }
+        return Array.from(keys).join(',');
+    }, [tableColumns, attributes, schema]);
+    // data
+    const [{ rows, total, loading, forbidden, err }, refetch] = useListData(model, page, pageSize, {
+        q: filters.q,
+        searchKey: filters.searchKey,
+        sort,
+        sortType,
+        select: selectProjection,
+    });
     const baseHref = useMemo(() => `/admin/${model}`, [model]);
     const handleRefetch = useCallback(async () => {
         await refetch();
@@ -154,7 +182,10 @@ export function ListPage({ model }) {
                             schema: viewSchema,
                             data: dataToView,
                         });
+                    }, sort: sort, sortType: sortType, onSortChange: (col, dir) => {
+                        setSort(col);
+                        setSortType(dir);
                     } })] }));
     }
-    return (_jsxs("div", { className: "grid gap-3 px-4", children: [_jsx(ListHeader, { title: schema?.modelName ?? model, createHref: `${baseHref}/create`, loading: loading }), content] }));
+    return (_jsxs("div", { className: "grid gap-3 px-4", children: [_jsx(ListHeader, { title: schema?.modelName ?? model, createHref: `${baseHref}/create`, hideCreate: !schema?.allowedMethods?.create, loading: loading }), content] }));
 }

package/dist/views/SettingsEdit.js

@@ -105,6 +105,6 @@ export function SettingsEdit() {
         return (_jsxs("div", { className: "px-4", children: [_jsx(ListHeader, { title: title, createHref: "", loading: false }), _jsx(NoAccess, { message: forbidden })] }));
     }
     const hasCleanupData = cleanupReport && Object.keys(cleanupReport).length > 0;
-    return (_jsxs("div", { className: "grid gap-3 px-4", children: [_jsx(ListHeader, { title: title, hideCreate: true, createHref: "", loading: loading || saving || cleaning, children: _jsx(Button, { size: "sm", color: "danger", variant: "flat", isLoading: cleaning, onPress: handleCleanup, children: "Cleanup Database" }) }), error && _jsx("div", { className: "text-danger text-sm", children: error }), hasCleanupData && (_jsxs("div", { className: "p-3 bg-success-50 rounded-lg border border-success-200", children: [_jsx("div", { className: "font-semibold text-success-700 text-sm mb-1", children: "Cleanup Summary:" }), _jsx("ul", { className: "text-xs text-success-600 list-disc list-inside", children: Object.entries(cleanupReport).map(([model, fields]) => (_jsxs("li", { children: [_jsx("span", { className: "font-medium", children: model }), ": ", fields.join(', ')] }, model))) })] })), !error && (_jsx(SchemaForm, { model: MODEL, schemaOverride: schema, initialValues: doc ?? undefined, submitLabel: "Save", busy: loading || saving || cleaning, onSubmit: handleSubmit, showReset: false }))] }));
+    return (_jsxs("div", { className: "grid gap-3 px-4", children: [_jsx(ListHeader, { title: title, hideCreate: true, createHref: "", loading: loading || saving || cleaning, children: _jsx(Button, { size: "sm", color: "danger", variant: "flat", isLoading: cleaning, onPress: handleCleanup, children: "Cleanup Database" }) }), error && _jsx("div", { className: "text-danger text-sm", children: error }), hasCleanupData && (_jsxs("div", { className: "p-3 bg-success-50 rounded-lg border border-success-200", children: [_jsx("div", { className: "font-semibold text-success-700 text-sm mb-1", children: "Cleanup Summary:" }), _jsx("ul", { className: "text-xs text-success-600 list-disc list-inside", children: Object.entries(cleanupReport).map(([model, fields]) => (_jsxs("li", { children: [_jsx("span", { className: "font-medium", children: model }), ": ", fields.join(', ')] }, model))) })] })), !error && (_jsx(SchemaForm, { model: MODEL, schemaOverride: schema, initialValues: doc ?? undefined, submitLabel: "Save", busy: loading || saving || cleaning, onSubmit: handleSubmit, showReset: false, isEdit: true }))] }));
 }
 export default SettingsEdit;

package/dist/views/list/DataTableHero.d.ts

@@ -13,15 +13,15 @@ type Props = {
     baseHref: string;
     loading?: boolean;
     error?: string | null;
-    /** optional hook so parent can refetch or optimistically remove */
-    onDeleted?: (id: string) => void;
-    /** optional schema for dynamic viewing */
+    onDeleted?: (id?: string) => void;
     schema?: SchemaDef;
-    /** request to view a row in a drawer */
     onRequestView?: (row: any) => void;
+    sort?: string;
+    sortType?: 'asc' | 'desc';
+    onSortChange?: (field: string, direction: 'asc' | 'desc') => void;
 };
 /** ---------- truncation helper ---------- */
 export declare function truncateText(text: unknown, maxLength?: number): string;
 /** ---------- component ---------- */
-export declare function DataTableHero({ modelName, columns, rows, total, page, pageSize, onPageChange, onPageSizeChange, baseHref, loading, error, onDeleted, topContent, schema, onRequestView, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableHero({ modelName, columns, rows, total, page, pageSize, onPageChange, onPageSizeChange, baseHref, loading, error, onDeleted, topContent, schema, onRequestView, sort, sortType, onSortChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};