Documentación

Instalación

npm i @cm-sigoo-temp/ui
yarn add @cm-sigoo-temp/ui

Sistema de Iconos con Material Symbols

Los iconos como string deben usar los nombres de Material Symbols:

// Ejemplos válidos:
icono: 'home'; // Icono simple
icono: 'home_outlined'; // Variante outlined
icono: 'settings_suggest'; // Icono compuesto
icono: 'cancel_presentation'; // Equivalente a CancelPresentationIcon

Los iconos como elemento deben usar los nombres de Material icons:

// Ejemplos válidos:
import AcUnitIcon from '@mui/icons-material/AcUnit';
import AcUnitOutlinedIcon from '@mui/icons-material/AcUnitOutlined';

icono: AcUnitIcon; // Icono simple
icono: AcUnitOutlinedIcon; // Variante outlined

Estructura de Menús con Permisos

import { TMenuDrawer } from '@cm-sigoo-temp/ui';
import { DashboardIcon } from '@mui/icons-material';
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';

export const menus: TMenuDrawer[] = [
  {
    id: 'principal',
    nombre: 'Principal',
    icono: HomeOutlinedIcon,
    to: '/',
  },
  {
    id: 'dashboard',
    nombre: 'Dashboard',
    icono: DashboardIcon,
    to: '/dashboard',
  },
  {
    id: 'admin',
    nombre: 'Administración',
    subMenus: [
      {
        id: 'users',
        nombre: 'Usuarios',
        icono: 'group',
        to: '/admin/users',
      },
    ],
  },
];

Sistema de Permisos y Autorización

El componente se integra con el servicio de autorización en: https://autorizacionv2-dev.coordinadora.com/

Flujo de autorización:

1. Autenticación: Vía Keycloak
2. Obtención de permisos: Consulta al endpoint de autorización
3. Filtrado de menús: Los menús se muestran según permisos

Implementación

import { AuthLayout } from '@cm-sigoo-temp/ui';
import { Link } from 'react-router';
import { menus } from './constantes';

function App() {
  return (
    <AuthLayout.Keycloak
      idApp="ejemplo-plantilla-front"
      nombreApp="Ejemplo Plantilla Front"
      menus={menus}
      LinkComponent={Link}
    >
      {/* Contenido */}
    </AuthLayout.Keycloak>
  );
}

export default App;