Todos los componentes (204)

Proveedor AMSET

Más · AmsetProvider

Qué es y cuándo usarlo

Todo lo que la librería necesita alrededor, en una línea: <AmsetProvider>{children}</AmsetProvider>. Por dentro son tres: el idioma (LocaleProvider, que decide cómo se escriben fechas, números e importes y hacia qué lado se escribe), la cola de notificaciones (useNotifications) y el diálogo de confirmación (useConfirmation).

Cuándo usarlo

Una vez, arriba del todo: en el layout raíz de Next o alrededor de la aplicación.
locale fija el idioma (por defecto, es-ES) y notifications pasa sus opciones a la cola (cuántas caben, en qué esquina salen).
theme y density para fijarlos al arrancar. Sin ellos no se toca nada: manda lo que ya tenga el <html> (lo que puso el script del tema, o el sistema operativo).

Cuándo no

- Si la aplicación trae su propio diálogo de confirmación: withoutConfirm, o las piezas por separado (LocaleProvider, NotificationProvider, ConfirmProvider). - Para rutas, estado global o un cliente HTTP: no los trae a propósito. Un proveedor que monta todo eso es lo que impide usar una librería en el proyecto de al lado. Teclado: no tiene, es un proveedor. Las notificaciones y el diálogo que monta traen el suyo.

Accesibilidad: las notificaciones van en una región con nombre («Notificaciones»): las normales se anuncian con role="status", que espera a que el lector termine, y los errores con role="alert", que interrumpe. El diálogo de confirmación responde false si se cierra, con Escape o si se desmonta el proveedor: el await de quien preguntaba nunca se queda colgado.

Aspecto fino: no pinta nada propio. theme escribe data-theme en el <html> (y lo guarda) y density, data-density: en esta ficha afectan a toda la vista previa.

Cómo se ve

Dentro del proveedor: el idioma de los importes (1234,50 €), las confirmaciones y los avisos.

<AmsetProvider locale="es-ES">
  <App />
</AmsetProvider>

// Y dentro, desde cualquier componente:
const { confirm } = useConfirmation()
const { show } = useNotifications()
if (await confirm({ title: 'Archivar el pedido 1042?' })) show({ tone: 'success', title: 'Archivado' })

Props

Se importa con import { AmsetProvider } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`catalogs`	`Readonly<Record<string, CatalogSource>>`	Idiomas enteros de la aplicacion por etiqueta BCP-47; ver `LocaleProvider`.
`density`	`"compact" \| "comfortable"`	`compact` baja el alto de los controles (30 px en vez de 36) para pantallas con muchos datos. Sin esto no se toca: manda el atributo `data-density` que ya tenga el `<html>`.
`locale`	`string`	Etiqueta BCP-47. Por defecto `es-ES`.
`messages`	`MessageOverrides`	Textos sueltos que mandan sobre la biblioteca y sobre `catalogs`.
`notifications`	`Omit<NotificationProviderProps, "children">`	—
`onCatalogError`	`CatalogErrorHandler`	Se llama si un catalogo perezoso no se pudo cargar; ver `LocaleProvider`.
`theme`	`ThemePreference`	Tema al arrancar. Sin esto no se toca nada: manda lo que ya haya puesto el script que evita el parpadeo, y si no, el sistema operativo.
`withoutConfirm`	`boolean`	Quita el dialogo de confirmacion, si la aplicacion trae el suyo.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: