@codeplex-sac/navigation

v0.0.8

Published

3 days ago

Paquete de componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Ofrece soluciones completas para la gestión de rutas, jerarquías, menús y estructuras de paneles laterales, optimizadas para una experiencia de usuario premium y con una A

0High
0Medium
0Low

b_manuel

codeplexdev

@codeplex-sac/navigation

Paquete de componentes de navegación avanzados para el ecosistema Codeplex-SAC. Ofrece soluciones completas para la gestión de rutas, jerarquías, menús y estructuras de paneles laterales, optimizadas para una experiencia de usuario premium y con una API nativa en Español.

🚀 Instalación

bun add @codeplex-sac/navigation @mui/material @emotion/react @emotion/styled

🏗️ Componentes de Estructura y Flujo

🗄️ Grupo 1: Contenedores y Pasos

CodeplexCajonLateral (Drawer)

Panel complementario que se desliza desde los bordes de la pantalla. Ideal para menús de navegación móvil o paneles de filtrado.

Ejemplo de Uso:

import { CodeplexCajonLateral } from '@codeplex-sac/navigation';

export const MiCajon = ({ abierto, alCerrar }) => (
  <CodeplexCajonLateral 
    abierto={abierto} 
    alCerrar={alCerrar}
    ancho={320}
    cabecera={<h2>Menu Principal</h2>}
    mostrarIconoCierre
  >
    {/* Enlaces o navegación aquí */}
  </CodeplexCajonLateral>
);

CodeplexPasos (Stepper)

Guía a los usuarios a través de una serie de pasos consecutivos en un proceso.

Ejemplo de Uso:

import { CodeplexPasos } from '@codeplex-sac/navigation';

const MIS_PASOS = [
  { etiqueta: 'Identificación', descripcion: 'Datos personales' },
  { etiqueta: 'Pago', descripcion: 'Método de facturación' },
  { etiqueta: 'Resumen', opcional: true }
];

export const Ejemplo = () => (
  <CodeplexPasos 
    pasos={MIS_PASOS} 
    pasoActivo={1} 
    orientacion="horizontal"
  />
);

CodeplexPestanas (Tabs)

Organiza contenido en diferentes vistas accesibles mediante pestañas superiores o integradas.

Ejemplo de Uso:

import { CodeplexPestanas } from '@codeplex-sac/navigation';

const ITEMS = [
  { etiqueta: 'General', valor: 'v1' },
  { etiqueta: 'Seguridad', valor: 'v2', icono: <LockIcon /> }
];

export const MiSeccion = () => (
  <CodeplexPestanas 
    elementos={ITEMS} 
    valor="v1" 
    alCambiar={(_, val) => console.log(val)}
    centrado
  />
);

🗺️ Grupo 2: Rutas y Jerarquía

CodeplexMigasPan (Breadcrumbs)

Ayuda a los usuarios a visualizar su ubicación actual y volver a niveles superiores en la jerarquía de la aplicación.

Ejemplo de Uso:

import { CodeplexMigasPan } from '@codeplex-sac/navigation';

const RUTA = [
  { etiqueta: 'Artículos', href: '/blog' },
  { etiqueta: 'Tecnología', href: '/blog/tech' },
  { etiqueta: 'Componentes UI' } // Último elemento sin link
];

export const Navegacion = () => (
  <CodeplexMigasPan 
    elementos={RUTA} 
    rutaInicio="/" 
    colorActivo="primary.main"
  />
);

CodeplexEnlace (Link)

Simplifica la creación de vínculos de navegación con estilos consistentes y soporte para polimorfismo.

Ejemplo de Uso:

import { CodeplexEnlace } from '@codeplex-sac/navigation';

export const MiEnlace = () => (
  <CodeplexEnlace 
    hijos="Ver documentación" 
    href="https://google.com" 
    subrayado="hover"
    target="_blank"
  />
);

CodeplexPaginacion (Pagination)

Componente de selección de páginas para listas extensas de datos.

Ejemplo de Uso:

import { CodeplexPaginacion } from '@codeplex-sac/navigation';

export const Listado = () => (
  <CodeplexPaginacion 
    total={25} 
    pagina={1} 
    alCambiar={(e, p) => console.log('Nueva página:', p)}
    centrado
    color="primary"
  />
);

🖱️ Grupo 3: Menús y Acciones Flotantes

CodeplexMenu

Muestra una lista de opciones en una superficie temporal anclada a un componente de referencia.

Ejemplo de Uso:

import { CodeplexMenu, CodeplexBoton } from '@codeplex-sac/ui';

export const Ejemplo = () => {
  const [ancla, setAncla] = useState(null);
  const ACCIONES = [
    { etiqueta: 'Editar', icono: <EditIcon />, alHacerClick: () => alert('Editando...') },
    { etiqueta: 'Eliminar', icono: <DeleteIcon />, sx: { color: 'error.main' } }
  ];

  return (
    <>
      <CodeplexBoton texto="Opciones" alHacerClick={(e) => setAncla(e.currentTarget)} />
      <CodeplexMenu 
        abierto={Boolean(ancla)} 
        elementoAnclaje={ancla} 
        alCerrar={() => setAncla(null)}
        elementos={ACCIONES}
      />
    </>
  );
};

CodeplexMarcacionRapida (Speed Dial)

Botón flotante (FAB) que despliega una ráfaga de acciones relacionadas al interactuar con él.

Ejemplo de Uso:

import { CodeplexMarcacionRapida } from '@codeplex-sac/navigation';

const ACCIONES = [
  { icono: <SaveIcon />, tituloTooltip: 'Guardar', alHacerClick: () => save() },
  { icono: <PrintIcon />, tituloTooltip: 'Imprimir' }
];

export const MiApp = () => (
  <CodeplexMarcacionRapida 
    etiquetaAria="Acciones de archivo"
    icono={<EditIcon />} 
    acciones={ACCIONES}
    direction="up"
  />
);

CodeplexNavegacionInferior (Bottom Navigation)

Navegación principal fija en la base de la pantalla, optimizada para aplicaciones móviles.

Ejemplo de Uso:

import { CodeplexNavegacionInferior } from '@codeplex-sac/navigation';

const NAV_ITEMS = [
  { etiqueta: 'Inicio', valor: 'inicio', icono: <HomeIcon /> },
  { etiqueta: 'Favoritos', valor: 'favs', icono: <FavoriteIcon /> },
  { etiqueta: 'Perfil', valor: 'perfil', icono: <PersonIcon /> }
];

export const AppMovil = () => (
  <CodeplexNavegacionInferior 
    elementos={NAV_ITEMS} 
    valor="inicio" 
    fijo
    conPapel
  />
);

🎨 Integración y Diseño

Todos los componentes de @codeplex-sac/navigation están diseñados para heredar automáticamente la identidad visual definida en @codeplex-sac/theme, respetando los modos claro/oscuro y utilizando la tipografía Poppins.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@codeplex-sac/navigation

🚀 Instalación

🏗️ Componentes de Estructura y Flujo

🗄️ Grupo 1: Contenedores y Pasos

CodeplexCajonLateral (Drawer)

CodeplexPasos (Stepper)

CodeplexPestanas (Tabs)

🗺️ Grupo 2: Rutas y Jerarquía

CodeplexMigasPan (Breadcrumbs)

CodeplexEnlace (Link)

CodeplexPaginacion (Pagination)

🖱️ Grupo 3: Menús y Acciones Flotantes

CodeplexMenu

CodeplexMarcacionRapida (Speed Dial)

CodeplexNavegacionInferior (Bottom Navigation)

🎨 Integración y Diseño

📄 Licencia