@nano-app/frontend 0.3.3 → 0.3.4

package/dist/auto-register.mjs

@@ -28,7 +28,9 @@ export default [
     "name": "app",
     "type": "app",
     "data": {
-      "isRegister": false,
+      "login": {
+        "isRegister": false
+      },
       "navbar": {
         "tabs": [],
         "selectedTabKey": "home",
@@ -44,7 +46,6 @@ export default [
         "formType": "",
         "title": ""
       },
-      "totales": {},
       "config": {
         "theme": "dark"
       }
@@ -62,7 +63,7 @@ export default [
     { key: "admin", href: "/admin", label: "Administración", minRole: -1 },
     { key: "uli", href: "/", label: "Uli :v", minRole: -1 },
     { key: "luka", href: "/", label: "Lucas :v", minRole: -1 }].
-    filter((tab) => tab.minRole >= rolId),
+    filter((tab) => tab.minRole <= rolId),
       "initialForms": {
         "User": {
           "rolId": 1,
@@ -113,7 +114,11 @@ export default [
           {
             "fieldName": "password",
             "inputType": "password",
-            "isRequired": true
+            "isRequired": true,
+            "validateFn": (oForm) =>
+  (oForm.password?.length || 0) < 4 ?
+  "La contraseña debe tener al menos 4 caracteres" :
+  ""
           }
         ],
         "register": [
@@ -133,12 +138,20 @@ export default [
           {
             "fieldName": "password",
             "inputType": "password",
-            "isRequired": true
+            "isRequired": true,
+            "validateFn": (oForm) =>
+  (oForm.password?.length || 0) < 4 ?
+  "La contraseña debe tener al menos 4 caracteres" :
+  ""
           },
           {
             "fieldName": "confirmPassword",
             "inputType": "password",
-            "isRequired": true
+            "isRequired": true,
+            "validateFn": (oForm) =>
+  oForm.confirmPassword != oForm.password ?
+  'Las contraseñas no coinciden' :
+  ''
           }
         ],
         "Users": [
@@ -254,10 +267,14 @@ export default [
     "name": "i18n",
     "type": "app",
     "data": {
-      "login": {
-        "header": (isRegister) => isRegister ? "REGISTRARSE" : "INICIAR SESIÓN",
-        "footer": (isRegister) => isRegister ? "o iniciar sesión" : "o registrarse",
-        "buttonText": (isRegister) => isRegister ? "Crear" : "Ingresar"
+      "loginTexts": (isRegister) => ({
+      headerText: isRegister ? "REGISTRARSE" : "INICIAR SESIÓN",
+      footerText: isRegister ? "o iniciar sesión" : "o registrarse",
+      buttonText: isRegister ? "Crear" : "Ingresar",
+      formType: isRegister ? "register" : "login"
+    }),
+      "button": {
+        "confirm": "Confirmar"
       },
       "create": (entity) => `Crear ${entity}`,
       "edit": (entity) => `Editar ${entity}`,

package/dist/store/ApiStore.js

@@ -16,7 +16,7 @@ class ApiStore extends AppStore_1.AppStore {
     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);
+        this.set(`${path}`, response.result);
         return response;
     };
     update = (entity, body) => this.request("PUT", entity, body);

package/dist/store/AppStore.js

@@ -52,8 +52,8 @@ class AppStore {
      * @param value - El valor a asignar
      */
     set(path, value) {
-        RenderManager_1.default.refresh(path, this.name);
         this.manageState(path, value);
+        RenderManager_1.default.refresh(path, this.name);
     }
 }
 exports.AppStore = AppStore;

package/dist/ui/Controller.d.ts

@@ -1,9 +1,12 @@
-import { ReactParams } from "./createComponent";
 import { ApiResponse } from "@nano-app/backend";
+import { ReactNode } from "react";
+export type ReactParams = Record<string, any> & {
+    children?: ReactNode;
+    hook?: () => void;
+};
 export declare abstract class Controller {
     private componentId;
-    params: ReactParams;
-    constructor(params: ReactParams);
+    constructor(hook: () => void, params: any);
     get<T = any>(path: string, name?: string): T;
     read<T = any>(path: string, params?: {}, name?: string): Promise<ApiResponse<T>>;
     set(path: string, value: any, name?: string): void;
@@ -11,6 +14,7 @@ export declare abstract class Controller {
     update<T = any>(path: string, body: any, name?: string): Promise<ApiResponse<T>>;
     delete<T = any>(path: string, id: any, name?: string): Promise<ApiResponse<T>>;
     destroy(): void;
-    onInit(): void;
-    onRender(): void;
+    onInit(params?: any): void;
+    onRender(params?: any): void;
+    useHooks(): void;
 }

package/dist/ui/Controller.js

@@ -8,17 +8,12 @@ const StoreManager_1 = __importDefault(require("../store/StoreManager"));
 const RenderManager_1 = __importDefault(require("../store/RenderManager"));
 class Controller {
     componentId;
-    params;
-    // public router!: ReturnType<typeof useRouter>;
-    // public pathname!: string | null;
-    constructor(params) {
+    constructor(hook, params) {
         // Registra el componente para reactividad
         this.componentId = Symbol();
-        RenderManager_1.default.register(this.componentId, params.hook || (() => { }));
-        // Inicializa los parámetros
-        this.params = params;
+        RenderManager_1.default.register(this.componentId, hook);
         // Inicializa el controller
-        this.onInit();
+        this.onInit(params);
     }
     get(path, name = 'app') {
         // Registra el path como dependencia
@@ -28,7 +23,7 @@ class Controller {
     }
     read(path, params = {}, name = 'api') {
         // Registra el path como dependencia
-        RenderManager_1.default.dependsOn(this.componentId, path, "api");
+        RenderManager_1.default.dependsOn(this.componentId, path, name);
         // Retorna el valor de la api
         return StoreManager_1.default.getStore(name)?.read(path, params);
     }
@@ -47,7 +42,8 @@ class Controller {
     destroy() {
         RenderManager_1.default.unregister(this.componentId);
     }
-    onInit() { }
-    onRender() { }
+    onInit(params) { }
+    onRender(params) { }
+    useHooks() { }
 }
 exports.Controller = Controller;

package/dist/ui/createComponent.d.ts

@@ -1,13 +1,12 @@
 import { ReactNode } from "react";
 import { Controller } from "./Controller";
-export type ReactParams = Record<string, unknown> & {
+export type ViewParams = any & {
     children?: ReactNode;
-    hook?: () => void;
 };
+export type View<C> = (controller: C, params: ViewParams) => ReactNode;
 export type CreateComponentProps<C> = {
-    controller?: new (params: ReactParams) => C;
-    view?: (controller: C) => ReactNode;
-    hooks?: (controller: C) => void;
+    controller?: new (hook: () => void, params: any) => C;
+    view?: View<C>;
 };
 /**
  * Crea un componente reactivo que se actualiza automáticamente cuando los datos de los stores cambian.
@@ -15,4 +14,4 @@ export type CreateComponentProps<C> = {
  * @param view - Función que renderiza el componente
  * @returns - Función que retorna el componente reactivo
  */
-export declare function createComponent<C extends Controller = Controller>({ controller, view, hooks }: CreateComponentProps<C>): (params?: ReactParams) => ReactNode;
+export declare function createComponent<C extends Controller = Controller>({ controller, view }: CreateComponentProps<C>): (params: ViewParams) => ReactNode;

package/dist/ui/createComponent.js

@@ -5,27 +5,28 @@ const react_1 = require("react");
 const Controller_1 = require("./Controller");
 class BaseController extends Controller_1.Controller {
 }
-const BaseView = ({ params: { children } }) => children;
+const BaseView = (_, { children }) => children;
 /**
  * Crea un componente reactivo que se actualiza automáticamente cuando los datos de los stores cambian.
  * @param ControllerClass - Clase del controller
  * @param view - Función que renderiza el componente
  * @returns - Función que retorna el componente reactivo
  */
-function createComponent({ controller, view, hooks }) {
+function createComponent({ controller, view }) {
     return function (params) {
         // Hook para re-renderizar el componente
         const [, setTick] = (0, react_1.useState)(0);
         // Instancia el controller
         const controllerRef = (0, react_1.useRef)();
         if (!controllerRef.current) {
-            controllerRef.current = new (controller || BaseController)({ ...params, hook: () => setTick((t) => t + 1) });
+            controllerRef.current = new (controller || BaseController)(() => setTick((t) => t + 1), params);
         }
+        // Ejecuta el método onRender del controller
+        controllerRef.current.onRender(params);
         // Ejecuta las hooks del usuario
-        if (hooks)
-            hooks(controllerRef.current);
+        controllerRef.current.useHooks();
         // Cleanup del componente
         (0, react_1.useEffect)(() => () => controllerRef.current?.destroy(), []);
-        return view ? view(controllerRef.current) : BaseView(controllerRef.current);
+        return view ? view(controllerRef.current, params) : BaseView(controllerRef.current, params);
     };
 }

package/dist/utils/QueryBuilder.js

@@ -10,8 +10,10 @@ function buildFilters(filters) {
 }
 class QueryBuilder {
     static build(path, params = {}) {
-        const { skip, filters, expand, orderby, top } = params;
-        const queryParams = [];
+        const { skip, filters, expand, orderby, top, ...extraParams } = params;
+        const queryParams = [
+            ...Object.entries(extraParams).map(([key, value]) => `${key}=${value}`)
+        ];
         const filtersQuery = buildFilters(filters);
         if (filtersQuery)
             queryParams.push(`filter=${filtersQuery}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano-app/frontend",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "View + Controller frontend architecture for React/Next.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/auto-register.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    name: string;
-    type: string;
-    data: {};
-}[];
-export default _default;

package/dist/auto-register.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = [
-    {
-        name: "app",
-        type: "app",
-        data: {},
-    }
-];

package/dist/auto-register.ts

@@ -1,336 +0,0 @@
-// Auto-generado por @nano-app
-// No editar manualmente.
-export default [
-  {
-    "name": "api",
-    "type": "api",
-    "path": "/api",
-    "data": {
-      "busy": true,
-      "refresh": false,
-      "DefaultItems": [],
-      "UserStatusItems": [
-        {
-          "key": "SUSPENDED",
-          "text": "Suspendido"
-        },
-        {
-          "key": "PENDING",
-          "text": "Pendiente"
-        },
-        {
-          "key": "ACTIVE",
-          "text": "Activo"
-        }
-      ]
-    }
-  },
-  {
-    "name": "app",
-    "type": "app",
-    "data": {
-      "isRegister": false,
-      "navbar": {
-        "tabs": [],
-        "selectedTabKey": "home",
-        "selectedTab": {},
-        "isMenuOpen": false
-      },
-      "form": {
-        "data": {},
-        "validate": []
-      },
-      "drawer": {
-        "isOpen": false,
-        "formType": "",
-        "title": ""
-      },
-      "totales": {},
-      "config": {
-        "theme": "dark"
-      }
-    }
-  },
-  {
-    "name": "const",
-    "type": "app",
-    "data": {
-      "alias": "42974117.prex",
-      "stepSkipTop": 20,
-      "tabs": [
-        {
-          "key": "home",
-          "href": "/",
-          "label": "Home",
-          "minRole": 1
-        },
-        {
-          "key": "resumen",
-          "href": "/resumen",
-          "label": "Resumen",
-          "minRole": 2
-        },
-        {
-          "key": "admin",
-          "href": "/admin",
-          "label": "Administración",
-          "minRole": 3
-        },
-        {
-          "key": "uli",
-          "href": "/",
-          "label": "Uli :v",
-          "minRole": 1
-        },
-        {
-          "key": "luka",
-          "href": "/",
-          "label": "Lucas :v",
-          "minRole": 1
-        }
-      ],
-      "initialForms": {
-        "User": {
-          "rolId": 1,
-          "status": "PENDING"
-        },
-        "Collection": {
-          "total_months": 1,
-          "start_date": "2026-03-01T00:00:00.000Z"
-        }
-      },
-      "tableColumns": {
-        "Users": [
-          "name",
-          "phone",
-          "mail",
-          "pending",
-          "favor",
-          "rol.name",
-          "status"
-        ],
-        "Collections": [
-          "user.name",
-          "price",
-          "description",
-          "start_date",
-          "total_months",
-          "subscription.description"
-        ],
-        "Subscriptions": [
-          "description",
-          "price"
-        ]
-      },
-      "formField": {
-        "pay": [
-          {
-            "fieldName": "total",
-            "valueType": "price",
-            "isRequired": true
-          }
-        ],
-        "login": [
-          {
-            "fieldName": "mail",
-            "inputType": "email",
-            "isRequired": true
-          },
-          {
-            "fieldName": "password",
-            "inputType": "password",
-            "isRequired": true
-          }
-        ],
-        "register": [
-          {
-            "fieldName": "name",
-            "isRequired": true
-          },
-          {
-            "fieldName": "phone",
-            "isRequired": true
-          },
-          {
-            "fieldName": "mail",
-            "inputType": "email",
-            "isRequired": true
-          },
-          {
-            "fieldName": "password",
-            "inputType": "password",
-            "isRequired": true
-          },
-          {
-            "fieldName": "confirmPassword",
-            "inputType": "password",
-            "isRequired": true
-          }
-        ],
-        "Users": [
-          {
-            "fieldName": "name",
-            "isRequired": true
-          },
-          {
-            "fieldName": "mail",
-            "inputType": "email",
-            "isRequired": true
-          },
-          {
-            "fieldName": "rolId",
-            "valueType": "number",
-            "isRequired": true,
-            "inputType": "select",
-            "select": {
-              "items": "/Roles",
-              "itemKey": "id",
-              "showValues": [
-                "name"
-              ]
-            }
-          },
-          {
-            "fieldName": "status",
-            "inputType": "select",
-            "isRequired": true,
-            "select": {
-              "items": "/UserStatusItems",
-              "itemKey": "key",
-              "showValues": [
-                "text"
-              ]
-            }
-          },
-          {
-            "fieldName": "pending",
-            "valueType": "price"
-          },
-          {
-            "fieldName": "favor",
-            "valueType": "price"
-          }
-        ],
-        "Collections": [
-          {
-            "fieldName": "userId",
-            "valueType": "number",
-            "inputType": "select",
-            "isRequired": true,
-            "select": {
-              "items": "Users",
-              "itemKey": "id",
-              "showValues": [
-                "name"
-              ]
-            }
-          },
-          {
-            "fieldName": "price",
-            "valueType": "price",
-            "isRequired": true
-          },
-          {
-            "fieldName": "description",
-            "isRequired": true
-          },
-          {
-            "fieldName": "total_months",
-            "valueType": "number",
-            "isRequired": true
-          },
-          {
-            "fieldName": "start_date",
-            "valueType": "date",
-            "inputType": "date",
-            "isRequired": true
-          },
-          {
-            "fieldName": "subscriptionId",
-            "valueType": "number",
-            "inputType": "select",
-            "select": {
-              "items": "Subscriptions",
-              "itemKey": "id",
-              "showValues": [
-                "description"
-              ]
-            }
-          }
-        ],
-        "Subscriptions": [
-          {
-            "fieldName": "description",
-            "isRequired": true
-          },
-          {
-            "fieldName": "price",
-            "valueType": "price",
-            "isRequired": true
-          }
-        ]
-      },
-      "expandFields": {
-        "Users": "rol",
-        "Collections": "user,subscription"
-      }
-    }
-  },
-  {
-    "name": "i18n",
-    "type": "app",
-    "data": {
-      "login": {
-        "header": (isRegister) => isRegister ? "REGISTRARSE" : "INICIAR SESIÓN",
-        "footer": (isRegister) => isRegister ? "o iniciar sesión" : "o registrarse",
-        "buttonText": (isRegister) => isRegister ? "Crear" : "Ingresar"
-      },
-      "create": (entity) => `Crear ${entity}`,
-      "edit": (entity) => `Editar ${entity}`,
-      "mapping": {
-        "name": "Nombre",
-        "phone": "Teléfono",
-        "mail": "Mail",
-        "pending": "Pendiente",
-        "favor": "A favor",
-        "rolId": "Rol",
-        "rol.name": "Rol",
-        "status": "Estado",
-        "password": "Contraseña",
-        "confirmPassword": "Repetir contraseña",
-        "user.name": "Usuario",
-        "userId": "Usuario",
-        "price": "Precio",
-        "description": "Descripción",
-        "start_date": "Fecha de inicio",
-        "total_months": "Meses totales",
-        "subscription.description": "Subscripción",
-        "subscriptionId": "Subscripción",
-        "last_pay": "Último pago",
-        "first_month": "Mes de inicio",
-        "current_month": "Último mes pagado",
-        "payed_months": "Meses pagados",
-        "actions": "Acciones",
-        "created_at": "Creado",
-        "Users": "Usuarios",
-        "Collections": "Cuotas",
-        "Subscriptions": "Subscripciones",
-        "total": "TOTAL"
-      },
-      "months": {
-        "1": "Enero",
-        "2": "Febrero",
-        "3": "Marzo",
-        "4": "Abril",
-        "5": "Mayo",
-        "6": "Junio",
-        "7": "Julio",
-        "8": "Agosto",
-        "9": "Septiembre",
-        "10": "Octubre",
-        "11": "Noviembre",
-        "12": "Diciembre"
-      }
-    }
-  }
-];

package/dist/state/RenderManager.d.ts

@@ -1,47 +0,0 @@
-type ComponentId = symbol;
-/**
-{
-  store1: {
-    path1: {
-      component1: true,
-      component2: true,
-    },
-    path2: {
-      component1: true,
-    },
-    path3: {
-      component1: true,
-    },
-  }
-}
- */
-export declare class RenderManager {
-    private dependenciesMap;
-    private hooksMap;
-    /**
-     * Registra un hook de re-render para un componente
-     * @param componentId - El id del componente
-     * @param hook - El hook de re-render
-     */
-    register(componentId: ComponentId, hook: () => void): void;
-    /**
-     * Agrega una dependencia de path a un componente
-     * @param componentId - El id del componente
-     * @param path - El path del estado
-     * @param storeName - El nombre del store
-     */
-    dependsOn(componentId: ComponentId, path: string, storeName: string): void;
-    /**
-     * Actualiza los componentes que dependen de este path
-     * @param path - El path del estado
-     * @param storeName - El nombre del store
-     */
-    refresh(path: string, storeName: string): void;
-    /**
-     * Elimina un componente del manager
-     * @param componentId - El id del componente
-     */
-    unregister(componentId: ComponentId): void;
-}
-declare const _default: RenderManager;
-export default _default;

package/dist/state/RenderManager.js

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderManager = void 0;
-/**
-{
-  store1: {
-    path1: {
-      component1: true,
-      component2: true,
-    },
-    path2: {
-      component1: true,
-    },
-    path3: {
-      component1: true,
-    },
-  }
-}
- */
-class RenderManager {
-    dependenciesMap = new Map();
-    hooksMap = new Map();
-    /**
-     * Registra un hook de re-render para un componente
-     * @param componentId - El id del componente
-     * @param hook - El hook de re-render
-     */
-    register(componentId, hook) {
-        this.hooksMap.set(componentId, hook);
-    }
-    /**
-     * Agrega una dependencia de path a un componente
-     * @param componentId - El id del componente
-     * @param path - El path del estado
-     * @param storeName - El nombre del store
-     */
-    dependsOn(componentId, path, storeName) {
-        // Si no existe el store, crea un nuevo mapa
-        if (!this.dependenciesMap.has(storeName)) {
-            this.dependenciesMap.set(storeName, new Map());
-        }
-        // Si no existe el path, crea un nuevo conjunto
-        if (!this.dependenciesMap.get(storeName)?.has(path)) {
-            this.dependenciesMap.get(storeName)?.set(path, new Set());
-        }
-        // Agrega el componente al conjunto de dependencias
-        this.dependenciesMap.get(storeName)?.get(path)?.add(componentId);
-    }
-    /**
-     * Actualiza los componentes que dependen de este path
-     * @param path - El path del estado
-     * @param storeName - El nombre del store
-     */
-    refresh(path, storeName) {
-        // Obtiene los componentes que dependen de este path
-        const components = this.dependenciesMap.get(storeName)?.get(path);
-        // Si hay componentes que dependen de este path, actualiza cada uno
-        if (components) {
-            components.forEach((componentId) => {
-                this.hooksMap.get(componentId)?.();
-            });
-        }
-    }
-    /**
-     * Elimina un componente del manager
-     * @param componentId - El id del componente
-     */
-    unregister(componentId) {
-        this.hooksMap.delete(componentId);
-        this.dependenciesMap.forEach((store) => {
-            store.forEach((path) => {
-                path.delete(componentId);
-            });
-        });
-    }
-}
-exports.RenderManager = RenderManager;
-exports.default = new RenderManager();

package/dist/store/StateManager.d.ts

@@ -1,4 +0,0 @@
-export declare class StateManager {
-    private state;
-    constructor(initialState?: Record<string, any>);
-}

package/dist/store/StateManager.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StateManager = void 0;
-class StateManager {
-    state = {};
-    constructor(initialState = {}) {
-        this.state = initialState;
-    }
-}
-exports.StateManager = StateManager;

package/dist/store/stores.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    name: string;
-    type: string;
-    data: {};
-}[];
-export default _default;

package/dist/store/stores.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = [
-    {
-        name: "app",
-        type: "app",
-        data: {},
-    }
-];

package/dist/utils/pathUtils.d.ts

@@ -1,14 +0,0 @@
-/**
- * Resuelve un path slash-based sobre un objeto y retorna el valor en esa ruta.
- * Retorna undefined de forma segura si algún segmento no existe.
- *
- * Ejemplo: resolvePath(state, "/user/profile/name")
- */
-export declare function resolvePath(obj: unknown, path: string): unknown;
-/**
- * Retorna un nuevo objeto con el valor en el path slash-based asignado de forma inmutable.
- * Los objetos intermedios se clonan superficialmente. Los nodos intermedios faltantes se crean.
- *
- * Ejemplo: setPath(state, "/user/profile/name", "Alice")
- */
-export declare function setPath(obj: unknown, path: string, value: unknown): Record<string, unknown>;

package/dist/utils/pathUtils.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolvePath = resolvePath;
-exports.setPath = setPath;
-/**
- * Resuelve un path slash-based sobre un objeto y retorna el valor en esa ruta.
- * Retorna undefined de forma segura si algún segmento no existe.
- *
- * Ejemplo: resolvePath(state, "/user/profile/name")
- */
-function resolvePath(obj, path) {
-    const segments = path.split("/").filter((s) => s !== "");
-    let current = obj;
-    for (const segment of segments) {
-        if (current === null || current === undefined || typeof current !== "object") {
-            return undefined;
-        }
-        current = current[segment];
-    }
-    return current;
-}
-/**
- * Retorna un nuevo objeto con el valor en el path slash-based asignado de forma inmutable.
- * Los objetos intermedios se clonan superficialmente. Los nodos intermedios faltantes se crean.
- *
- * Ejemplo: setPath(state, "/user/profile/name", "Alice")
- */
-function setPath(obj, path, value) {
-    const segments = path.split("/").filter((s) => s !== "");
-    const root = obj && typeof obj === "object" ? { ...obj } : {};
-    if (segments.length === 0)
-        return root;
-    let node = root;
-    for (let i = 0; i < segments.length - 1; i++) {
-        const key = segments[i];
-        const child = node[key];
-        const cloned = child && typeof child === "object" ? { ...child } : {};
-        node[key] = cloned;
-        node = cloned;
-    }
-    node[segments[segments.length - 1]] = value;
-    return root;
-}