@cm-sigoo-temp/ui 0.2.21 → 0.2.23

package/README.md

@@ -1,20 +1,102 @@
-# Introduction 
-TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project. 
-
-# Getting Started
-TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:
-1.	Installation process
-2.	Software dependencies
-3.	Latest releases
-4.	API references
-
-# Build and Test
-TODO: Describe and show how to build your code and run the tests. 
-
-# Contribute
-TODO: Explain how other users and developers can contribute to make your code better. 
-
-If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files:
-- [ASP.NET Core](https://github.com/aspnet/Home)
-- [Visual Studio Code](https://github.com/Microsoft/vscode)
-- [Chakra Core](https://github.com/Microsoft/ChakraCore)
+# 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](https://fonts.google.com/icons):
+
+```typescript
+// 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](https://mui.com/material-ui/material-icons):
+
+```typescript
+// 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
+
+```typescript
+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
+
+```jsx
+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;
+```