@quadcore-lib/admin-core

Infraestructura compartida para componer paneles administrativos modulares a partir de módulos admin-* independientes.

Instalación

npm install @quadcore-lib/admin-core

Uso

import { createAdminPanel } from "@quadcore-lib/admin-core";
import { BrowserRouter } from "react-router-dom";
import { createAdminProductsModule } from "@quadcore-lib/admin-products";
import { createAdminOrdersModule } from "@quadcore-lib/admin-orders";

const { AdminApp } = createAdminPanel({
  modules: [
    createAdminProductsModule({ apiUrl: "https://api.miapp.com" }),
    createAdminOrdersModule({ apiUrl: "https://api.miapp.com" }),
  ],
  resolvePermissions: (role) =>
    role === "admin" ? ["products:read", "products:write", "orders:read"] : ["products:read"],
});

function Admin() {
  return (
    <BrowserRouter>
      <AdminApp role="admin" title="Panel administrativo" />
    </BrowserRouter>
  );
}

Cada módulo admin-* es una factory function que recibe su configuración (al menos apiUrl) y devuelve un AdminModule. El panel no conoce los módulos hasta que createAdminPanel los recibe.

import type { AdminModule } from "@quadcore-lib/admin-core";
import { ProductsPage } from "./ProductsPage";
import { ProductFormPage } from "./ProductFormPage";

export function createAdminProductsModule(config: { apiUrl: string }): AdminModule<"products"> {
  const { apiUrl } = config;
  return {
    id: "products",
    label: "Productos",
    permission: "products:read",
    routes: [
      { path: "", component: () => <ProductsPage apiUrl={apiUrl} /> },
      { path: "new", component: () => <ProductFormPage apiUrl={apiUrl} /> },
    ],
  };
}

API

| Export | Tipo | Descripción | |---|---|---| | createAdminPanel(config) | función | Registra los módulos y devuelve { registry, AdminApp } | | AdminApp | componente | (props: { role, title?, children? }) => JSX generado por createAdminPanel | | AdminRegistry | clase | Registro de módulos: register, getModule, getModules, getRoutes, getNavItems | | AdminProvider | componente | Provee registry + permissions al árbol vía contexto | | useAdminContext | hook | Acceso bajo nivel a { registry, permissions } | | usePermissions | hook | Devuelve { permissions, can(permission?) } | | RequirePermission | componente | Renderiza children o fallback según can(permission) | | buildNavTree(modules, permissions) | función | Construye los items de navegación visibles para el usuario | | Layout, Sidebar, Topbar | componentes | Shell visual del panel (usa el registry vía contexto) | | AdminRouter | componente | Resuelve las rutas de todos los módulos registrados (requiere un Router ancestro de react-router-dom) | | DashboardBase | componente | Grid de widgets aportados por dashboardWidgets de cada módulo |

Tipos del contrato

AdminModule, AdminRoute, AdminWidget, NavItem, AdminModuleContext, ResolvedAdminRoute, AdminPanelConfig, AdminAppProps, AdminPanelInstance.

Estilos

import "@quadcore-lib/admin-core/styles";

Clases con prefijo qc-admin- (qc-admin-layout, qc-admin-sidebar, qc-admin-topbar, qc-admin-dashboard, etc.).

Requisitos

• react >= 18
• react-dom >= 18
• react-router-dom >= 6 (el host debe envolver AdminApp en un BrowserRouter/MemoryRouter)