@cm-sigoo-temp/ui 0.2.31 → 0.2.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -102
- package/dist/lib/api/permisos.d.ts +1 -1
- package/dist/lib/cm-sigoo-temp-ui.js +458 -444
- package/dist/lib/cm-sigoo-temp-ui.js.map +1 -1
- package/dist/lib/components/Toolbar/tipos.d.ts +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,102 +1,102 @@
|
|
|
1
|
-
# Documentación
|
|
2
|
-
|
|
3
|
-
## Instalación
|
|
4
|
-
|
|
5
|
-
```
|
|
6
|
-
npm i @cm-sigoo-temp/ui
|
|
7
|
-
yarn add @cm-sigoo-temp/ui
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
## Sistema de Iconos con Material Symbols
|
|
11
|
-
|
|
12
|
-
Los iconos como string deben usar los nombres de
|
|
13
|
-
[Material Symbols](https://fonts.google.com/icons):
|
|
14
|
-
|
|
15
|
-
```typescript
|
|
16
|
-
// Ejemplos válidos:
|
|
17
|
-
icono: 'home'; // Icono simple
|
|
18
|
-
icono: 'home_outlined'; // Variante outlined
|
|
19
|
-
icono: 'settings_suggest'; // Icono compuesto
|
|
20
|
-
icono: 'cancel_presentation'; // Equivalente a CancelPresentationIcon
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Los iconos como elemento deben usar los nombres de
|
|
24
|
-
[Material icons](https://mui.com/material-ui/material-icons):
|
|
25
|
-
|
|
26
|
-
```typescript
|
|
27
|
-
// Ejemplos válidos:
|
|
28
|
-
import AcUnitIcon from '@mui/icons-material/AcUnit';
|
|
29
|
-
import AcUnitOutlinedIcon from '@mui/icons-material/AcUnitOutlined';
|
|
30
|
-
|
|
31
|
-
icono: AcUnitIcon; // Icono simple
|
|
32
|
-
icono: AcUnitOutlinedIcon; // Variante outlined
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Estructura de Menús con Permisos
|
|
36
|
-
|
|
37
|
-
```typescript
|
|
38
|
-
import { TMenuDrawer } from '@cm-sigoo-temp/ui';
|
|
39
|
-
import { DashboardIcon } from '@mui/icons-material';
|
|
40
|
-
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
|
|
41
|
-
|
|
42
|
-
export const menus: TMenuDrawer[] = [
|
|
43
|
-
{
|
|
44
|
-
id: 'principal',
|
|
45
|
-
nombre: 'Principal',
|
|
46
|
-
icono: HomeOutlinedIcon,
|
|
47
|
-
to: '/',
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
id: 'dashboard',
|
|
51
|
-
nombre: 'Dashboard',
|
|
52
|
-
icono: DashboardIcon,
|
|
53
|
-
to: '/dashboard',
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
id: 'admin',
|
|
57
|
-
nombre: 'Administración',
|
|
58
|
-
subMenus: [
|
|
59
|
-
{
|
|
60
|
-
id: 'users',
|
|
61
|
-
nombre: 'Usuarios',
|
|
62
|
-
icono: 'group',
|
|
63
|
-
to: '/admin/users',
|
|
64
|
-
},
|
|
65
|
-
],
|
|
66
|
-
},
|
|
67
|
-
];
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
## Sistema de Permisos y Autorización
|
|
71
|
-
|
|
72
|
-
El componente se integra con el servicio de autorización en:
|
|
73
|
-
`https://autorizacionv2-dev.coordinadora.com/`
|
|
74
|
-
|
|
75
|
-
### Flujo de autorización:
|
|
76
|
-
|
|
77
|
-
1. **Autenticación**: Vía Keycloak
|
|
78
|
-
2. **Obtención de permisos**: Consulta al endpoint de autorización
|
|
79
|
-
3. **Filtrado de menús**: Los menús se muestran según permisos
|
|
80
|
-
|
|
81
|
-
## Implementación
|
|
82
|
-
|
|
83
|
-
```jsx
|
|
84
|
-
import { AuthLayout } from '@cm-sigoo-temp/ui';
|
|
85
|
-
import { Link } from 'react-router';
|
|
86
|
-
import { menus } from './constantes';
|
|
87
|
-
|
|
88
|
-
function App() {
|
|
89
|
-
return (
|
|
90
|
-
<AuthLayout.Keycloak
|
|
91
|
-
idApp="ejemplo-plantilla-front"
|
|
92
|
-
nombreApp="Ejemplo Plantilla Front"
|
|
93
|
-
menus={menus}
|
|
94
|
-
LinkComponent={Link}
|
|
95
|
-
>
|
|
96
|
-
{/* Contenido */}
|
|
97
|
-
</AuthLayout.Keycloak>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
export default App;
|
|
102
|
-
```
|
|
1
|
+
# Documentación
|
|
2
|
+
|
|
3
|
+
## Instalación
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
npm i @cm-sigoo-temp/ui
|
|
7
|
+
yarn add @cm-sigoo-temp/ui
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## Sistema de Iconos con Material Symbols
|
|
11
|
+
|
|
12
|
+
Los iconos como string deben usar los nombres de
|
|
13
|
+
[Material Symbols](https://fonts.google.com/icons):
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
// Ejemplos válidos:
|
|
17
|
+
icono: 'home'; // Icono simple
|
|
18
|
+
icono: 'home_outlined'; // Variante outlined
|
|
19
|
+
icono: 'settings_suggest'; // Icono compuesto
|
|
20
|
+
icono: 'cancel_presentation'; // Equivalente a CancelPresentationIcon
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Los iconos como elemento deben usar los nombres de
|
|
24
|
+
[Material icons](https://mui.com/material-ui/material-icons):
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
// Ejemplos válidos:
|
|
28
|
+
import AcUnitIcon from '@mui/icons-material/AcUnit';
|
|
29
|
+
import AcUnitOutlinedIcon from '@mui/icons-material/AcUnitOutlined';
|
|
30
|
+
|
|
31
|
+
icono: AcUnitIcon; // Icono simple
|
|
32
|
+
icono: AcUnitOutlinedIcon; // Variante outlined
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Estructura de Menús con Permisos
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { TMenuDrawer } from '@cm-sigoo-temp/ui';
|
|
39
|
+
import { DashboardIcon } from '@mui/icons-material';
|
|
40
|
+
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
|
|
41
|
+
|
|
42
|
+
export const menus: TMenuDrawer[] = [
|
|
43
|
+
{
|
|
44
|
+
id: 'principal',
|
|
45
|
+
nombre: 'Principal',
|
|
46
|
+
icono: HomeOutlinedIcon,
|
|
47
|
+
to: '/',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
id: 'dashboard',
|
|
51
|
+
nombre: 'Dashboard',
|
|
52
|
+
icono: DashboardIcon,
|
|
53
|
+
to: '/dashboard',
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
id: 'admin',
|
|
57
|
+
nombre: 'Administración',
|
|
58
|
+
subMenus: [
|
|
59
|
+
{
|
|
60
|
+
id: 'users',
|
|
61
|
+
nombre: 'Usuarios',
|
|
62
|
+
icono: 'group',
|
|
63
|
+
to: '/admin/users',
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
];
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Sistema de Permisos y Autorización
|
|
71
|
+
|
|
72
|
+
El componente se integra con el servicio de autorización en:
|
|
73
|
+
`https://autorizacionv2-dev.coordinadora.com/`
|
|
74
|
+
|
|
75
|
+
### Flujo de autorización:
|
|
76
|
+
|
|
77
|
+
1. **Autenticación**: Vía Keycloak
|
|
78
|
+
2. **Obtención de permisos**: Consulta al endpoint de autorización
|
|
79
|
+
3. **Filtrado de menús**: Los menús se muestran según permisos
|
|
80
|
+
|
|
81
|
+
## Implementación
|
|
82
|
+
|
|
83
|
+
```jsx
|
|
84
|
+
import { AuthLayout } from '@cm-sigoo-temp/ui';
|
|
85
|
+
import { Link } from 'react-router';
|
|
86
|
+
import { menus } from './constantes';
|
|
87
|
+
|
|
88
|
+
function App() {
|
|
89
|
+
return (
|
|
90
|
+
<AuthLayout.Keycloak
|
|
91
|
+
idApp="ejemplo-plantilla-front"
|
|
92
|
+
nombreApp="Ejemplo Plantilla Front"
|
|
93
|
+
menus={menus}
|
|
94
|
+
LinkComponent={Link}
|
|
95
|
+
>
|
|
96
|
+
{/* Contenido */}
|
|
97
|
+
</AuthLayout.Keycloak>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export default App;
|
|
102
|
+
```
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TPermisosResponse } from '../tipos';
|
|
2
|
-
export declare const obtenerPermisos: (usuario: string, plataforma: string) => Promise<TPermisosResponse>;
|
|
2
|
+
export declare const obtenerPermisos: (usuario: string, plataforma: string, token?: string | null) => Promise<TPermisosResponse>;
|