@nano-app/frontend 0.1.0

package/dist/api/ApiClient.d.ts

@@ -0,0 +1,16 @@
+import type { ApiResponse } from "@nano-app/backend";
+import { StoreClient } from "../store/StoreClient";
+export type ApiRequest = (query: string, body?: unknown) => Promise<ApiResponse>;
+/**
+ * Cliente de API que extiende StoreClient y expone CRUD.
+ * @param baseUrl - Prefijo de todas las peticiones. Por defecto "/api".
+ */
+export declare class ApiClient extends StoreClient {
+    private baseUrl;
+    constructor(baseUrl?: string);
+    create: ApiRequest;
+    read: ApiRequest;
+    update: ApiRequest;
+    delete: ApiRequest;
+    private request;
+}

package/dist/api/ApiClient.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiClient = void 0;
+const StoreClient_1 = require("../store/StoreClient");
+const QueryBuilder_1 = require("./QueryBuilder");
+const TokenHelper_1 = require("../utils/TokenHelper");
+const Toast_1 = require("../utils/Toast");
+/**
+ * Cliente de API que extiende StoreClient y expone CRUD.
+ * @param baseUrl - Prefijo de todas las peticiones. Por defecto "/api".
+ */
+class ApiClient extends StoreClient_1.StoreClient {
+    baseUrl;
+    constructor(baseUrl = "/api") {
+        super();
+        this.baseUrl = baseUrl;
+    }
+    create = async (entity, body) => {
+        return this.request("POST", entity, body);
+    };
+    read = async (query, params = {}) => {
+        const path = query.split("?")[0];
+        const response = await this.request("GET", QueryBuilder_1.QueryBuilder.build(query, params));
+        this.set(`/${path}`, response.result);
+        return response;
+    };
+    update = async (entity, body) => {
+        return this.request("PUT", entity, body);
+    };
+    delete = async (entity, id) => {
+        return this.request("DELETE", entity, id);
+    };
+    async request(method, path, body) {
+        let oResponse = {
+            result: null,
+            success: false,
+            message: "",
+            warning: false,
+        };
+        this.set("/busyCount", (this.get("/busyCount") || 0) + 1);
+        this.set("/busy", true);
+        try {
+            oResponse = await fetch(`${this.baseUrl}${path}`, {
+                method,
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${TokenHelper_1.TokenHelper.get()}`,
+                },
+                body: body ? JSON.stringify(body) : undefined,
+            })
+                .then((response) => response.json())
+                .then((response) => Toast_1.Toast.apiResponse(response));
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            this.set("/busyCount", this.get("/busyCount") - 1);
+            if (this.get("/busyCount") <= 0) {
+                this.set("/busy", false);
+            }
+            if (method !== "GET") {
+                this.set("/refresh", !this.get("/refresh"));
+            }
+        }
+        return oResponse;
+    }
+}
+exports.ApiClient = ApiClient;

package/dist/api/QueryBuilder.d.ts

@@ -0,0 +1,8 @@
+export declare class QueryBuilder {
+    private static readonly ISO_DATE_REGEX;
+    private static buildFilters;
+    /**
+     * Construye una query OData a partir de un objeto de filtros.
+     */
+    static build(path: string, params?: Record<string, unknown>): string;
+}

package/dist/api/QueryBuilder.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryBuilder = void 0;
+const DEFAULT_STEP_SKIP_TOP = 10;
+class QueryBuilder {
+    static ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(\.\d+)?Z?)?$/;
+    static buildFilters(filters = {}) {
+        const filterParts = [];
+        Object.entries(filters).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                if (typeof value === "string") {
+                    if (QueryBuilder.ISO_DATE_REGEX.test(value)) {
+                        filterParts.push(`${key} ge ${value}`);
+                    }
+                    else {
+                        filterParts.push(`${key} contains ${value}`);
+                    }
+                }
+                else {
+                    filterParts.push(`${key} eq ${value}`);
+                }
+            }
+        });
+        return filterParts.length > 0 ? filterParts.join(" and ") : "";
+    }
+    /**
+     * Construye una query OData a partir de un objeto de filtros.
+     */
+    static build(path, params = {}) {
+        const { skip, filters, expand, orderby, top = 10, ...otherParams } = params;
+        const queryParams = Object.entries(otherParams).map(([key, value]) => `${key}=${value}`);
+        const filtersQuery = this.buildFilters(filters ?? {});
+        if (filtersQuery) {
+            queryParams.push(`filter=${filtersQuery}`);
+        }
+        if (expand) {
+            queryParams.push(`expand=${expand}`);
+        }
+        if (orderby) {
+            queryParams.push(`orderby=${orderby}`);
+        }
+        if (top) {
+            queryParams.push(`top=${top}`);
+        }
+        if (skip) {
+            queryParams.push(`skip=${skip}`);
+        }
+        return `${path}?${queryParams.join("&")}`;
+    }
+}
+exports.QueryBuilder = QueryBuilder;

package/dist/components/Controller.d.ts

@@ -0,0 +1,16 @@
+import { usePathname, useRouter } from "next/navigation";
+import { ApiClient } from "../api/ApiClient";
+import { StoreClient } from "../store/StoreClient";
+export declare abstract class Controller {
+    private storeManager;
+    private isInitialized;
+    protected router?: ReturnType<typeof useRouter>;
+    protected pathname?: ReturnType<typeof usePathname>;
+    protected onInit(): void;
+    protected getStore(model: 'api'): ApiClient;
+    protected getStore(model?: 'app'): StoreClient;
+    protected getStore(model: string): ApiClient | StoreClient;
+    params: any;
+    deps(): any[];
+    render(params: any): void;
+}

package/dist/components/Controller.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Controller = void 0;
+const navigation_1 = require("next/navigation");
+const StoreManager_1 = require("../store/StoreManager");
+class Controller {
+    storeManager = new StoreManager_1.StoreManager();
+    isInitialized = false;
+    router;
+    pathname;
+    onInit() { }
+    getStore(model = 'app') {
+        return this.storeManager.getStore(model);
+    }
+    params = {};
+    deps() { return []; }
+    render(params) {
+        this.params = params;
+        this.router = (0, navigation_1.useRouter)();
+        this.pathname = (0, navigation_1.usePathname)();
+        // Inicializa el controlador si no ha sido inicializado
+        if (!this.isInitialized) {
+            this.isInitialized = true;
+            this.onInit();
+            this.storeManager.init();
+        }
+    }
+}
+exports.Controller = Controller;

package/dist/config/index.d.ts

@@ -0,0 +1,21 @@
+export type LocalStoreEntry = {
+    type: "local";
+    /** Path relativo a la raíz del proyecto. Ej: "src/models/app.json" */
+    path?: string;
+    /** Datos inline (alternativa a path) */
+    data?: Record<string, any>;
+};
+export type ApiStoreEntry = {
+    type: "api";
+    /** Prefijo base para todas las peticiones de este store. Ej: "/api/users" */
+    baseUrl?: string;
+};
+export type StoreEntry = LocalStoreEntry | ApiStoreEntry;
+export type NanoAppConfig = {
+    stores: Record<string, StoreEntry>;
+};
+/**
+ * Define la configuración del paquete con tipado completo.
+ * Usar en nano-app.config.ts en la raíz del proyecto.
+ */
+export declare function defineConfig(config: NanoAppConfig): NanoAppConfig;

package/dist/config/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineConfig = defineConfig;
+/**
+ * Define la configuración del paquete con tipado completo.
+ * Usar en nano-app.config.ts en la raíz del proyecto.
+ */
+function defineConfig(config) {
+    return config;
+}

package/dist/hooks/useComponent.d.ts

@@ -0,0 +1,8 @@
+import { Controller } from "../components/Controller";
+type useComponentParams<CI> = {
+    controller: new () => CI;
+    view: (controller: CI) => React.ReactNode;
+};
+export type useComponent = <CI extends Controller>(p: useComponentParams<CI>) => (params?: Object) => React.ReactNode;
+export declare const useComponent: useComponent;
+export {};

package/dist/hooks/useComponent.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponent = void 0;
+const react_1 = require("react");
+const useComponent = ({ controller, view }) => (params = {}) => {
+    const c = (0, react_1.useMemo)(() => new controller(), [controller]);
+    c.render(params);
+    return (0, react_1.useMemo)(() => view(c), c.deps());
+};
+exports.useComponent = useComponent;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./api/ApiClient";
+export * from "./api/QueryBuilder";
+export { default as StoreManager } from "./store/StoreManager";
+export * from "./store/StoreClient";
+export * from "./ui/createComponent";
+export * from "./ui/Controller";
+export * from "./utils/Toast";
+export * from "./utils/TokenHelper";
+export type { ApiResponse } from "@nano-app/backend";

package/dist/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoreManager = void 0;
+__exportStar(require("./api/ApiClient"), exports);
+__exportStar(require("./api/QueryBuilder"), exports);
+var StoreManager_1 = require("./store/StoreManager");
+Object.defineProperty(exports, "StoreManager", { enumerable: true, get: function () { return __importDefault(StoreManager_1).default; } });
+__exportStar(require("./store/StoreClient"), exports);
+__exportStar(require("./ui/createComponent"), exports);
+__exportStar(require("./ui/Controller"), exports);
+__exportStar(require("./utils/Toast"), exports);
+__exportStar(require("./utils/TokenHelper"), exports);

package/dist/plugin/index.d.ts

@@ -0,0 +1,11 @@
+type NextConfig = Record<string, any>;
+/**
+ * Envuelve la configuración de Next.js agregando el plugin de nano-app.
+ * Usar en next.config.ts:
+ *
+ * @example
+ * import { withNanoApp } from "@nano-app/frontend/plugin";
+ * export default withNanoApp();
+ */
+export declare function withNanoApp(nextConfig?: NextConfig): NextConfig;
+export {};

package/dist/plugin/index.js

@@ -0,0 +1,134 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withNanoApp = withNanoApp;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const VIRTUAL_MODULE_ID = "@nano-app/stores";
+const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
+/**
+ * Lee nano-app.config.ts desde la raíz del proyecto usando jiti
+ * para poder ejecutar TypeScript en Node.js sin compilar.
+ */
+function loadConfig(projectRoot) {
+    const configPath = path_1.default.join(projectRoot, "nano-app.config.ts");
+    if (!fs_1.default.existsSync(configPath)) {
+        throw new Error(`[nano-app] No se encontró nano-app.config.ts en ${projectRoot}`);
+    }
+    // jiti permite ejecutar TS directamente en Node.js (lo usa Next.js internamente)
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const jiti = require("jiti")(projectRoot, { interopDefault: true });
+    return jiti(configPath);
+}
+/**
+ * Resuelve los stores del config: lee los JSONs de los paths indicados
+ * y devuelve un mapa con todos los datos ya inlineados.
+ */
+function resolveStores(config, projectRoot) {
+    const resolved = {};
+    Object.entries(config.stores).forEach(([name, entry]) => {
+        if (entry.type === "local") {
+            if (entry.path) {
+                const filePath = path_1.default.join(projectRoot, entry.path);
+                if (!fs_1.default.existsSync(filePath)) {
+                    throw new Error(`[nano-app] Store "${name}": no se encontró el archivo ${filePath}`);
+                }
+                const raw = fs_1.default.readFileSync(filePath, "utf-8");
+                resolved[name] = { type: "local", data: JSON.parse(raw) };
+            }
+            else {
+                resolved[name] = { type: "local", data: entry.data ?? {} };
+            }
+        }
+        else if (entry.type === "api") {
+            resolved[name] = { type: "api", baseUrl: entry.baseUrl ?? "/api" };
+        }
+    });
+    return resolved;
+}
+/**
+ * Genera el código del módulo virtual "@nano-app/stores"
+ * con todos los stores ya resueltos y serializados.
+ */
+function generateVirtualModule(stores) {
+    return `export const stores = ${JSON.stringify(stores, null, 2)};`;
+}
+/**
+ * Plugin de Webpack que:
+ * 1. Lee nano-app.config.ts en build time
+ * 2. Resuelve los paths a JSONs
+ * 3. Inyecta un módulo virtual "@nano-app/stores" con todos los datos
+ */
+class NanoAppPlugin {
+    projectRoot;
+    constructor(projectRoot) {
+        this.projectRoot = projectRoot;
+    }
+    apply(compiler) {
+        const pluginName = "NanoAppPlugin";
+        const projectRoot = this.projectRoot;
+        compiler.hooks.normalModuleFactory.tap(pluginName, (factory) => {
+            factory.hooks.resolve.tap(pluginName, (resolveData) => {
+                if (resolveData.request === VIRTUAL_MODULE_ID) {
+                    resolveData.request = RESOLVED_VIRTUAL_MODULE_ID;
+                }
+            });
+        });
+        compiler.hooks.compilation.tap(pluginName, (compilation) => {
+            compilation.hooks.normalModuleLoader.tap(pluginName, (_, module) => {
+                if (module.resource === RESOLVED_VIRTUAL_MODULE_ID) {
+                    module.loaders = [];
+                }
+            });
+        });
+        // Resuelve el módulo virtual a código generado
+        compiler.resolverFactory.hooks.resolver
+            .for("normal")
+            .tap(pluginName, (resolver) => {
+            resolver.hooks.resolve.tapAsync(pluginName, (request, resolveContext, callback) => {
+                if (request.request === RESOLVED_VIRTUAL_MODULE_ID) {
+                    const config = loadConfig(projectRoot);
+                    const stores = resolveStores(config, projectRoot);
+                    const code = generateVirtualModule(stores);
+                    return callback(null, {
+                        path: RESOLVED_VIRTUAL_MODULE_ID,
+                        query: "",
+                        file: true,
+                        module: true,
+                        source: code,
+                    });
+                }
+                callback();
+            });
+        });
+    }
+}
+/**
+ * Envuelve la configuración de Next.js agregando el plugin de nano-app.
+ * Usar en next.config.ts:
+ *
+ * @example
+ * import { withNanoApp } from "@nano-app/frontend/plugin";
+ * export default withNanoApp();
+ */
+function withNanoApp(nextConfig = {}) {
+    return {
+        ...nextConfig,
+        webpack(config, options) {
+            const projectRoot = options.dir ?? process.cwd();
+            // Módulo virtual para los stores resueltos
+            config.plugins.push(new NanoAppPlugin(projectRoot));
+            // Resuelve symlinks relativos a la app consumidora (necesario para file: links)
+            config.resolve.symlinks = false;
+            // Permite que el módulo virtual sea importado
+            config.resolve.alias = {
+                ...config.resolve.alias,
+                [VIRTUAL_MODULE_ID]: RESOLVED_VIRTUAL_MODULE_ID,
+            };
+            // Encadena con el webpack config del usuario si existe
+            return nextConfig.webpack?.(config, options) ?? config;
+        },
+    };
+}

package/dist/store/StoreClient.d.ts

@@ -0,0 +1,25 @@
+export type StoreData = Record<string, any>;
+/**
+ * Clase base para manejar el estado de Zustand
+ * Zustand solo almacena valores, los métodos se ejecutan desde la clase
+ */
+export declare class StoreClient {
+    private getStore;
+    private setFn;
+    private getFn;
+    constructor(initialData?: StoreData);
+    /**
+     * Ejecuta el hook para suscribirse al store (reactividad)
+     */
+    use: () => StoreData;
+    /**
+     * Setter y Getter del store
+     */
+    set(path: string, value: any): void;
+    get(path: string): any;
+    /**
+     * Maneja el estado (Set o Get) navegando por el path
+     * @private
+     */
+    private manageState;
+}

package/dist/store/StoreClient.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoreClient = void 0;
+const zustand_1 = require("zustand");
+/**
+ * Clase base para manejar el estado de Zustand
+ * Zustand solo almacena valores, los métodos se ejecutan desde la clase
+ */
+class StoreClient {
+    getStore;
+    setFn = () => { };
+    getFn = () => ({});
+    constructor(initialData = {}) {
+        this.getStore = (0, zustand_1.create)()((set, get) => {
+            this.setFn = set;
+            this.getFn = get;
+            return initialData;
+        });
+    }
+    /**
+     * Ejecuta el hook para suscribirse al store (reactividad)
+     */
+    use = () => this.getStore();
+    /**
+     * Setter y Getter del store
+     */
+    set(path, value) {
+        if (!this.setFn)
+            return;
+        const { oNewState } = this.manageState(path, true, value);
+        this.setFn((state) => ({ ...state, ...oNewState }));
+    }
+    get(path) {
+        if (!this.getFn)
+            return undefined;
+        const { value } = this.manageState(path);
+        return value;
+    }
+    /**
+     * Maneja el estado (Set o Get) navegando por el path
+     * @private
+     */
+    manageState(sPath, isSet = false, value) {
+        // Obtiene el path y el último valor
+        const aPath = sPath.split("/").filter(s => s !== "");
+        const lastProp = aPath.pop() || "";
+        // Valida si es el path inicial (Utiliza todo el objeto)
+        const oNewState = aPath.length === 0
+            ? this.getFn()
+            : // Llega al final del path generando objetos si es necesario
+                aPath.reduce((oObject, sKey) => {
+                    if (!oObject[sKey]) {
+                        oObject[sKey] = {};
+                    }
+                    return oObject[sKey];
+                }, this.getFn());
+        // Setea el nuevo valor si debe
+        if (isSet) {
+            oNewState[lastProp] = value;
+        }
+        // Retorna el nuevo estado y el valor de la property enviada
+        return { oNewState, value: lastProp ? oNewState[lastProp] : oNewState };
+    }
+}
+exports.StoreClient = StoreClient;

package/dist/store/StoreManager.d.ts

@@ -0,0 +1,11 @@
+import { ApiClient } from "../api/ApiClient";
+import { StoreClient } from "./StoreClient";
+export type StoresMap = Record<string, ApiClient | StoreClient>;
+export declare class StoreManager {
+    private stores;
+    constructor();
+    addStore(name: string, store: ApiClient | StoreClient): void;
+    getStore(name: string): ApiClient | StoreClient;
+}
+declare const _default: StoreManager;
+export default _default;

package/dist/store/StoreManager.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoreManager = void 0;
+const path_1 = __importDefault(require("path"));
+const ApiClient_1 = require("../api/ApiClient");
+const StoreClient_1 = require("./StoreClient");
+let userConfig = {};
+try {
+    // Carga nano-app.config.cjs desde la raíz del proyecto del usuario.
+    // .cjs es CommonJS puro — Node.js lo ejecuta sincrónicamente sin compilador.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require(path_1.default.join(process.cwd(), "nano-app.config.cjs"));
+    userConfig = mod?.default ?? mod;
+}
+catch {
+    // sin config → el manager empieza vacío
+}
+function readJsonPath(filePath) {
+    try {
+        // fs solo existe en Node.js — en el browser este bloque nunca se ejecuta
+        // porque el StoreManager ya fue inicializado en el servidor
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const fs = require("fs");
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const path = require("path");
+        const abs = path.resolve(process.cwd(), filePath);
+        return JSON.parse(fs.readFileSync(abs, "utf-8"));
+    }
+    catch {
+        return {};
+    }
+}
+class StoreManager {
+    stores = {};
+    constructor() {
+        if (!userConfig?.stores)
+            return;
+        Object.entries(userConfig.stores).forEach(([name, entry]) => {
+            if (entry.type === "api") {
+                this.stores[name] = new ApiClient_1.ApiClient(entry.baseUrl ?? "/api");
+            }
+            else {
+                const data = entry.path
+                    ? readJsonPath(entry.path)
+                    : (entry.data ?? {});
+                this.stores[name] = new StoreClient_1.StoreClient(data);
+            }
+        });
+    }
+    addStore(name, store) {
+        this.stores[name] = store;
+    }
+    getStore(name) {
+        return this.stores[name];
+    }
+}
+exports.StoreManager = StoreManager;
+exports.default = new StoreManager();

package/dist/store/bootstrapApp.d.ts

@@ -0,0 +1,19 @@
+import { StoreData } from "./StoreClient";
+export type StoreManifestEntry = {
+    type: "local" | string;
+    data: StoreData;
+} | {
+    type: "api" | string;
+    baseUrl?: string;
+    data?: never;
+};
+export type AppManifest = {
+    stores: Record<string, StoreManifestEntry>;
+};
+/**
+ * Lee el manifest y registra todos los stores en el StoreManager.
+ * Debe llamarse una sola vez en el layout raíz de la app.
+ */
+export declare function bootstrapApp(manifest: {
+    stores: Record<string, any>;
+}): void;

package/dist/store/bootstrapApp.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bootstrapApp = bootstrapApp;
+const ApiClient_1 = require("../api/ApiClient");
+const StoreClient_1 = require("./StoreClient");
+const StoreManager_1 = __importDefault(require("./StoreManager"));
+/**
+ * Lee el manifest y registra todos los stores en el StoreManager.
+ * Debe llamarse una sola vez en el layout raíz de la app.
+ */
+function bootstrapApp(manifest) {
+    const { stores } = manifest;
+    Object.entries(stores).forEach(([name, config]) => {
+        if (config.type === "api") {
+            StoreManager_1.default.addStore(name, new ApiClient_1.ApiClient());
+        }
+        else {
+            // type: "local" o cualquier otro — usa los datos provistos
+            StoreManager_1.default.addStore(name, new StoreClient_1.StoreClient(config.data ?? {}));
+        }
+    });
+}

package/dist/store/setStores.d.ts

@@ -0,0 +1,8 @@
+import { ApiClient } from "../api/ApiClient";
+import { StoreClient, StoreData } from "./StoreClient";
+export type storesConfig = {
+    appData?: StoreData;
+    apiData?: StoreData;
+    stores: Record<string, ApiClient | StoreClient>;
+};
+export declare function setStores({ stores, appData, apiData }: storesConfig): void;

package/dist/store/setStores.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setStores = setStores;
+const ApiClient_1 = require("../api/ApiClient");
+const StoreClient_1 = require("./StoreClient");
+const StoreManager_1 = __importDefault(require("./StoreManager"));
+function setStores({ stores, appData, apiData }) {
+    // Agrega los stores pasados
+    Object.entries(stores)
+        .forEach(([model, store]) => {
+        StoreManager_1.default.addStore(model, store);
+    });
+    // Inicializa la info del app y api stores
+    if (appData) {
+        StoreManager_1.default.addStore("app", new StoreClient_1.StoreClient(appData));
+    }
+    if (apiData) {
+        StoreManager_1.default.addStore("api", new ApiClient_1.ApiClient(apiData));
+    }
+}

package/dist/types/api.d.ts

@@ -0,0 +1,7 @@
+export type ApiResponse<T = unknown> = {
+    result?: T;
+    success?: boolean;
+    message?: string;
+    warning?: boolean;
+};
+export type ApiRequest = (query: string, body?: unknown) => Promise<ApiResponse>;

package/dist/types/api.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ui/Component.d.ts

@@ -0,0 +1,4 @@
+export declare abstract class Component {
+    method: Function;
+    constructor(path: string);
+}

package/dist/ui/Component.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Component = void 0;
+class Component {
+    method = () => { };
+    // Importa dinámicamente el archivo especificado en path
+    constructor(path) {
+        Promise.resolve(`${path}`).then(s => __importStar(require(s))).then((module) => {
+            this.method = module.default;
+        })
+            .catch((error) => {
+            throw `Error importing module at ${path}: ${error}`;
+        });
+    }
+}
+exports.Component = Component;

package/dist/ui/Controller.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { ApiClient } from "../api/ApiClient";
+import { StoreClient } from "../store/StoreClient";
+export declare abstract class Controller<Params = {}> {
+    router: ReturnType<typeof useRouter>;
+    pathname: ReturnType<typeof usePathname>;
+    params: Params & {
+        children?: ReactNode;
+    };
+    store: Record<string, ApiClient | StoreClient>;
+    onInit(): void;
+    onRender(): void;
+}

package/dist/ui/Controller.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Controller = void 0;
+class Controller {
+    router;
+    pathname;
+    params = {};
+    store = {};
+    onInit() { }
+    onRender() { }
+}
+exports.Controller = Controller;

package/dist/ui/StoreProvider.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+type ResolvedStore = {
+    type: "local";
+    data: Record<string, any>;
+} | {
+    type: "api";
+    baseUrl?: string;
+};
+type StoreProviderProps = {
+    stores: Record<string, ResolvedStore>;
+    children: React.ReactNode;
+};
+/**
+ * Inicializa los stores definidos en nano-app.config.ts (resueltos por el plugin)
+ * y los registra en el StoreManager. Debe envolver toda la app en el layout raíz.
+ */
+export declare function StoreProvider({ stores, children }: StoreProviderProps): React.JSX.Element;
+export {};

package/dist/ui/StoreProvider.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoreProvider = StoreProvider;
+const react_1 = __importStar(require("react"));
+const ApiClient_1 = require("../api/ApiClient");
+const StoreClient_1 = require("../store/StoreClient");
+const StoreManager_1 = __importDefault(require("../store/StoreManager"));
+/**
+ * Inicializa los stores definidos en nano-app.config.ts (resueltos por el plugin)
+ * y los registra en el StoreManager. Debe envolver toda la app en el layout raíz.
+ */
+function StoreProvider({ stores, children }) {
+    const initialized = (0, react_1.useRef)(false);
+    if (!initialized.current) {
+        initialized.current = true;
+        Object.entries(stores).forEach(([name, entry]) => {
+            if (entry.type === "api") {
+                StoreManager_1.default.addStore(name, new ApiClient_1.ApiClient(entry.baseUrl ?? "/api"));
+            }
+            else {
+                StoreManager_1.default.addStore(name, new StoreClient_1.StoreClient(entry.data ?? {}));
+            }
+        });
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}

package/dist/ui/createComponent.d.ts

@@ -0,0 +1,11 @@
+import { Controller } from "./Controller";
+export type ControllerClass<C extends Controller> = new () => C;
+export type ViewFn<C extends Controller> = (controller: C) => React.ReactNode;
+/**
+ * Crea un componente React uniendo stores, controller y view.
+ *
+ * @param stores     - Nombres de los stores a los que se suscribe el componente.
+ * @param ControllerClass - Clase del controller (se instancia una vez al montar).
+ * @param view       - Función que recibe la instancia del controller y retorna JSX.
+ */
+export declare function createComponent<C extends Controller>(stores: string[], ControllerClass: ControllerClass<C>, view: ViewFn<C>): (params?: Record<string, any>) => React.ReactNode;

package/dist/ui/createComponent.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponent = createComponent;
+const react_1 = require("react");
+const navigation_1 = require("next/navigation");
+const StoreManager_1 = __importDefault(require("../store/StoreManager"));
+/**
+ * Crea un componente React uniendo stores, controller y view.
+ *
+ * @param stores     - Nombres de los stores a los que se suscribe el componente.
+ * @param ControllerClass - Clase del controller (se instancia una vez al montar).
+ * @param view       - Función que recibe la instancia del controller y retorna JSX.
+ */
+function createComponent(stores, ControllerClass, view) {
+    return function (params = {}) {
+        // Suscribe reactivamente a cada store declarado — Zustand re-renderiza cuando cambian
+        stores.forEach((name) => StoreManager_1.default.getStore(name)?.use());
+        // Instancia el controller una sola vez por montaje
+        const ref = (0, react_1.useRef)(null);
+        if (!ref.current) {
+            ref.current = new ControllerClass();
+            ref.current.onInit();
+        }
+        const c = ref.current;
+        // Inyecta hooks de Next.js y params en cada render
+        c.router = (0, navigation_1.useRouter)();
+        c.pathname = (0, navigation_1.usePathname)();
+        c.params = params;
+        // Inyecta el mapa de stores en cada render para que los métodos lean valores frescos
+        stores.forEach((name) => {
+            c.store[name] = StoreManager_1.default.getStore(name);
+        });
+        // Ejecuta onRender en cada render
+        c.onRender();
+        return view(c);
+    };
+}

package/dist/ui/defineController.d.ts

@@ -0,0 +1,23 @@
+import { ApiClient } from "../api/ApiClient";
+import { StoreClient } from "../store/StoreClient";
+export type ControllerStores = Record<string, ApiClient | StoreClient>;
+/** Contexto disponible en onInit, onRender y todos los métodos */
+export type ControllerContext = {
+    store: ControllerStores;
+    params: Record<string, any>;
+};
+export type ControllerSetup<T extends Record<string, any>> = (ctx: ControllerContext) => T;
+export type ControllerDescriptor<T extends Record<string, any>> = {
+    _isDescriptor: true;
+    stores: string[];
+    setup: ControllerSetup<T>;
+};
+/**
+ * Define la lógica de un componente.
+ *
+ * @param stores - Nombres de los stores a los que se suscribe el componente.
+ * @param setup  - Función que recibe el contexto (store, params) y retorna
+ *                 un objeto con propiedades y métodos expuestos a la view.
+ *                 Se ejecuta una sola vez al montar el componente.
+ */
+export declare function defineController<T extends Record<string, any>>(stores: string[], setup: ControllerSetup<T>): ControllerDescriptor<T>;

package/dist/ui/defineController.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineController = defineController;
+/**
+ * Define la lógica de un componente.
+ *
+ * @param stores - Nombres de los stores a los que se suscribe el componente.
+ * @param setup  - Función que recibe el contexto (store, params) y retorna
+ *                 un objeto con propiedades y métodos expuestos a la view.
+ *                 Se ejecuta una sola vez al montar el componente.
+ */
+function defineController(stores, setup) {
+    return { _isDescriptor: true, stores, setup };
+}

package/dist/ui/defineView.d.ts

@@ -0,0 +1,3 @@
+import { Controller } from "./Controller";
+export declare const defineView: (controller: Controller, view: (controller: InstanceType<typeof Controller>) => React.ReactNode) => Promise<() => import("react").ReactNode>;
+export declare const defineComponent: (controllerPath: string, viewPath: string) => Promise<() => any>;

package/dist/ui/defineView.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineComponent = exports.defineView = void 0;
+const defineView = async (controller, view) => () => view(controller);
+exports.defineView = defineView;
+const defineComponent = async (controllerPath, viewPath) => {
+    const controller = (new (await Promise.resolve(`${controllerPath}`).then(s => __importStar(require(s)))).default)();
+    const view = await Promise.resolve(`${viewPath}`).then(s => __importStar(require(s)));
+    return () => view(controller);
+};
+exports.defineComponent = defineComponent;

package/dist/ui/definers.d.ts

@@ -0,0 +1 @@
+export declare const defineComponent: (componentName: string) => Promise<string>;

package/dist/ui/definers.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineComponent = void 0;
+const path_1 = __importDefault(require("path"));
+const controllersPath = path_1.default.join(process.cwd(), "src", "controllers");
+const viewsPath = path_1.default.join(process.cwd(), "src", "views");
+const defineComponent = async (componentName) => {
+    try {
+        const [ControllerModule, ViewModule] = await Promise.all([
+            Promise.resolve(`${path_1.default.join(controllersPath, componentName)}`).then(s => __importStar(require(s))),
+            Promise.resolve(`${path_1.default.join(viewsPath, componentName)}`).then(s => __importStar(require(s))),
+        ]);
+        const controller = new ControllerModule.default();
+        // console.log(ViewModule.default?.(controller))
+        // ViewModule.default?.(controller) ?? null;
+        return '';
+    }
+    catch (error) {
+        console.error(`[defineComponent] Error loading "${componentName}":`, error);
+        return '';
+    }
+};
+exports.defineComponent = defineComponent;

package/dist/ui/useComponent.d.ts

@@ -0,0 +1,2 @@
+import { Controller } from "./Controller";
+export declare const useComponent: <ControllerInstance extends Controller>(view: (controller: ControllerInstance) => React.ReactNode, controller: new () => ControllerInstance) => () => import("react").ReactNode;

package/dist/ui/useComponent.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponent = void 0;
+const useComponent = (view, controller) => {
+    return () => {
+        return view(new controller());
+    };
+};
+exports.useComponent = useComponent;

package/dist/utils/Toast.d.ts

@@ -0,0 +1,12 @@
+import type { ApiResponse } from "@nano-app/backend";
+/**
+ * Toast: implementación por defecto no-op.
+ * La app puede reasignar los métodos (ej. Toast.error = (m) => addToast(...))
+ * para mostrar notificaciones con su UI.
+ */
+export declare class Toast {
+    static error(_message: string): void;
+    static success(_message: string): void;
+    static warning(_message: string): void;
+    static apiResponse<T>(response: ApiResponse<T>): ApiResponse<T>;
+}

package/dist/utils/Toast.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+/**
+ * Toast: implementación por defecto no-op.
+ * La app puede reasignar los métodos (ej. Toast.error = (m) => addToast(...))
+ * para mostrar notificaciones con su UI.
+ */
+class Toast {
+    static error(_message) { }
+    static success(_message) { }
+    static warning(_message) { }
+    static apiResponse(response) {
+        if (response.message) {
+            if (response.warning) {
+                Toast.warning(response.message);
+            }
+            else if (response.success) {
+                Toast.success(response.message);
+            }
+            else {
+                Toast.error(response.message);
+            }
+        }
+        return response;
+    }
+}
+exports.Toast = Toast;

package/dist/utils/TokenHelper.d.ts

@@ -0,0 +1,5 @@
+export declare class TokenHelper {
+    private static TOKEN_KEY;
+    static set(token: string): void;
+    static get(): string;
+}

package/dist/utils/TokenHelper.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenHelper = void 0;
+class TokenHelper {
+    static TOKEN_KEY = "app_token";
+    static set(token) {
+        if (typeof localStorage !== "undefined") {
+            localStorage.setItem(this.TOKEN_KEY, token);
+        }
+    }
+    static get() {
+        if (typeof localStorage === "undefined")
+            return "";
+        return localStorage.getItem(this.TOKEN_KEY) ?? "";
+    }
+}
+exports.TokenHelper = TokenHelper;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@nano-app/frontend",
+  "version": "0.1.0",
+  "description": "View + Controller frontend architecture for React/Next.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugin": {
+      "require": "./dist/plugin/index.js",
+      "types": "./dist/plugin/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": ["architecture", "typescript", "react", "next", "controller", "view"],
+  "author": "Cristian Serrano",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nano-Nathan/nano-app.git"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "zustand": ">=5.0.0",
+    "@nano-app/backend": "file:../backend"
+  },
+  "dependencies": {
+    "jiti": "^1.21.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.3.0",
+    "zustand": "^5.0.0"
+  }
+}