SIAF-RP UI

Componentes React y design tokens del SIAF-RP, preparados para aplicaciones de producción y kits de Figma Make.

Los criterios obligatorios para elaborar nuevas pantallas están incluidos en DESIGN-STANDARDS.md.

Los prompts listos para Figma Make están incluidos en FIGMA-MAKE-PROMPTS.md.

Instalación

npm install @kennedy122112/siaf-rp-ui

Importa los estilos una sola vez en el punto de entrada de la aplicación:

import '@kennedy122112/siaf-rp-ui/styles.css'

Luego importa los componentes:

import { Button, Card, TextField } from '@kennedy122112/siaf-rp-ui'

Componentes base

• Button
• ButtonGroup
• ActionBar
• Accordion
• Alert y Snackbar
• BrandMark
• Card
• DataTable
• DateTimePicker (date y datetime)
• EmptyState
• Icon
• MaterialIcon (alias explícito compatible con los nombres usados por Angular)
• Modal
• NotificationsPanel: desplegable responsive conectado a la campana del encabezado.
• ConfirmationModal
• PageHeader
• Pagination
• SearchToolbar
• SelectField
• Tag
• Tabs
• TextField
• Checkbox, Radio y Switch
• InputCatalog: catálogo visual interactivo para revisar la paridad de campos Angular → React.
• TransversalCatalog: muestra calendarios, modales, botoneras y patrones de interacción listos para Figma Make.

Patrones transversales

• AppShell: cabecera institucional, usuario, cierre de sesión, navegación adaptable y tema claro/oscuro persistente.
• GENERIC_PROCESS_TREE: árbol demostrativo neutral con procesos, procedimientos, Documentos y registros, y Consultas y reportes; pensado para kits de Figma Make.
• AccessDeniedTemplate: página estándar para permisos insuficientes.
• FeedbackPageTemplate: página de módulo vacío, en construcción o sin resultados.

Plantillas

• LoginTemplate: acceso para entidades y proveedores externos.
• DashboardTemplate: panel o escritorio de módulos.
• VirtualDeskTemplate: panel posterior al login con bandeja, indicadores y accesos rápidos equivalentes a Angular.
• NotificationsTemplate: historial responsive con filtros de lectura, marcado masivo y paginación.
• DocumentsRecordsTemplate: encabezado, búsqueda, acciones, tabla, carga, error, estado vacío y paginación.
• DocumentsRecordsWorkspaceTemplate: plantilla funcional completa de Documentos y registros con roles creador/aprobador/consulta, pestañas, creación dependiente, filtros rápidos y personalizados, favoritos, selección y acción masiva, columnas configurables, historiales, responsive y modo oscuro.

Las plantillas son presentacionales. Reciben datos y callbacks; no incluyen autenticación, rutas, permisos ni llamadas al backend. Así pueden usarse tanto en la aplicación real como con datos simulados en Figma Make.

Responsive y modo oscuro

AppShell cambia automáticamente al menú móvil por debajo de 1024px. En móvil, Procesos, Bandeja y Crear documento se muestran como paneles de ancho completo. El selector Aspecto del menú de perfil alterna entre los temas light y dark y conserva la selección en localStorage con la clave siaf-theme.

<AppShell
  navigation={navigation}
  activeItemId="panel"
  onNavigate={setActiveItem}
  defaultTheme="light"
  onThemeChange={(theme) => console.log(theme)}
>
  <main>Contenido del panel</main>
</AppShell>

También puede controlarse externamente con la propiedad theme="light" | "dark".

Para mostrar todos los estados de campos en una sola pantalla:

import { InputCatalog } from '@kennedy122112/siaf-rp-ui'

export function App() {
  return <InputCatalog />
}

Para presentar el resto de patrones reutilizables:

import { InputCatalog, TransversalCatalog } from '@kennedy122112/siaf-rp-ui'

export function Kit() {
  return <><InputCatalog /><TransversalCatalog /></>
}

import {
  Button,
  DocumentsRecordsTemplate,
  type DataTableColumn,
} from '@kennedy122112/siaf-rp-ui'

type Documento = { id: number; numero: string; estado: string }

const columns: DataTableColumn<Documento>[] = [
  { id: 'numero', header: 'N.º documento', render: (row) => row.numero },
  { id: 'estado', header: 'Estado', render: (row) => row.estado },
]

export function Bandeja() {
  return (
    <DocumentsRecordsTemplate
      title="Documentos y registros"
      search=""
      onSearchChange={() => {}}
      rows={[{ id: 1, numero: '0001', estado: 'Elaborado' }]}
      columns={columns}
      getRowId={(row) => row.id}
      page={1}
      totalPages={1}
      onPageChange={() => {}}
      actions={<Button icon="plus">Crear documento</Button>}
    />
  )
}

Figma Make

En Create a kit, elige npm packages e instala @kennedy122112/siaf-rp-ui. El paquete expone componentes tipados, plantillas completas y el archivo styles.css con los tokens de color, tipografía, espaciado, radios y elevación.

El kit debe cargar una vez:

import '@kennedy122112/siaf-rp-ui/styles.css'

Las imágenes institucionales se pasan mediante propiedades como heroSrc, ministryLogoSrc, productLogoSrc o el nodo brand. Esto permite que cada organismo use sus archivos aprobados sin acoplarlos a la lógica del paquete.

Material Icons

El paquete incluye la misma familia material-icons que utiliza el frontend Angular. No hace falta instalarla por separado ni cargar una fuente desde Google.

import { MaterialIcon } from '@kennedy122112/siaf-rp-ui'

<MaterialIcon name="picture_as_pdf" variant="outlined" />
<MaterialIcon name="check_circle" variant="filled" size={24} />

Variantes incluidas: filled y outlined, que son las cargadas actualmente por la aplicación Angular. Icon conserva el mismo comportamiento para no romper los componentes ya creados.