Proyecto Navigableitem-ts React Typescript Frontend

Este documento describe la librería Headband, un componente de React desarrollado con TypeScript, diseñado para proporcionar una interfaz de usuario consistente para la navegación entre sistemas y la gestión de perfiles de usuario. El componente muestra dos iconos principales: uno para el perfil de usuario y otro para la navegación entre diferentes sistemas.

Imagen del Componente

Empezando

Para utilizar o desarrollar este proyecto, sigue los siguientes pasos:

Instala las dependencias de la libreria:

npm install navigableitem-ts
# o
yarn install navigableitem-ts
# o
pnpm install navigableitem-ts

Props del Componente

Props de NavigableItem

| Propiedad | Tipo | Descripción | |---|---|---| | user_system_role | user_system_role[] | Arreglo de objetos que describen los sistemas, roles y tipos de usuario asociados al usuario actual. | | profileInfo | profileInfo | Información del perfil del usuario: nombre, email, rol, avatar y sitios asociados. | | setSessionUp | React.Dispatch<React.SetStateAction<string \| null>> | Función para actualizar el estado de la sesión del usuario. | | currentSystemId | string | ID del sistema actualmente seleccionado, usado para filtrar los tipos de usuario disponibles. | | showExitButton | boolean | Indica si se muestra el botón de salida. Por defecto es true. | | iconColor | string | (theme: any) => string | (Opcional) Permite cambiar el color del icono de navegación entre sistemas. | | token | string | Token de autenticación del usuario, utilizado para validar y realizar acciones seguras en el componente. | | FontFamily | string | (Opcional) Permite especificar la familia tipográfica a utilizar en el componente. | | baseUrl | string | (Opcional) Base URL para realizar las peticiones desde el componente. | | callBackOnLogout | () => void | (Opcional) Función de callback que se ejecuta cuando el usuario cierra la sesión. | | afterCallBackOnProfile | () => void | (Opcional) Función de callback que se ejecuta después de realizar un cambio en el perfil. | | beforeCallBackOnProfile | () => void | (Opcional) Función de callback que se ejecuta antes de realizar un cambio en el perfil. |

Como se debe importar el componente

  <NavigableItem
    user_system_role={user_system_role}
    profileInfo={profileInfo}
    setSessionUp={setSessionUp}
    currentSystemId={currentSystemId}
    token={token}
  />

Ejemplo de user_system_role

[
  {
    role: {
      id: "1",
      group_name: "Administrador",
    },
    system: {
      id: "sys1",
      name: "SOIV",
      color: "#268c74",
      url_callback: "https://google.com",
    },
    status: {
      id: "active",
      name: "Activo",
    },
    user_type: {
      id: "ut1",
      user_type: "Operativo",
    },
    motive: [],
    consultation_time_minutes: null,
    permissions: [],
    id: "usr1",
  },
]

Ejemplo de profileInfo

{
  name: "Valentina",
  email: "[email protected]",
  role: "Administrador",
  avatarUrl: "https://avatar.com/valentina.png",
  site: [
    { id: "site1", name: "Sede Central" }
  ],
  current_user: {
    role_id: "1",
    role_name: "Administrador",
    site_id: "site1",
    site_name: "Sede Central",
    system_id: "sys1",
    system_name: "SOIV",
    user_type_id: "ut1",
    user_type_name: "Operativo"
  },
  user_type_name: "Operativo",
  rol_name: "Administrador",
  user_id: '6feca67a-48d6-4d05-9277-283a9e78422e'
}

Estructura del Proyecto

navigableitem-ts/
├── src/
│   ├── components/
│   │   ├── DataSystems.ts              # Componente para organizar los sistemas en base al Id
│   │   ├── NavigableComponent.tsx      # Componente de navegación entre sistemas
|   |   ├── squaresIcon.tsx             # Componente de icono para la navegación entre sistemas
│   │   └── UserProfileComponent.tsx    # Componente de perfil de usuario
│   │   └── apiMethods.tsx              # Componente para centralizar las peticiones
│   ├── types/
│   │   └── index.tsx                   # Componente raiz
│   ├── assets/
│   │   ├── iconImage.svg               # Icono principal
│   │   └── venIcon.svg                 # Icono adicional
│   │   └── exit_icon.svg               # Icono para boton de salir
├── public/
│   └── ...                             # Archivos públicos
├── package.json                        # Configuración de npm
├── tsconfig.json                       # Configuración de TypeScript
├── README.md                           # Documentación del proyecto
├── LICENSE                             # Licencia MIT
└── vite.config.ts                      # Configuración de Vite

Scripts Disponibles

• npm run build: Compila la aplicación para producción.
• npm publish --access public: Subes tu ultima version a la libreria

Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.

Notas

• El componente con sus parametros asignados hace cambio de usuario y cambio de sistema por si solo, de igual forma al ejecutarse un evento el estado sessionUp devuelve una respuesta.

Autor

Desarrollado por Luis Colmenares.