vercel/building-components

¿Qué hace building-components?

Guía para construir componentes de interfaz de usuario modernos, accesibles y componibles. Útil al crear nuevos componentes, implementar accesibilidad, diseñar APIs componibles, configurar tokens de diseño, publicar en npm/registry o escribir documentación de componentes.

Introducción

Esta guía proporciona las mejores prácticas para desarrollar componentes de UI que sean:

• Modernos: Utilizando patrones y tecnologías actuales (React, Vue, Svelte, etc.).
• Accesibles: Cumpliendo con las pautas WCAG y ARIA para garantizar la inclusión.
• Componibles: Diseñados con APIs flexibles que permiten combinarlos fácilmente.

Principios clave

1. Accesibilidad primero: Implementar roles, etiquetas y atributos ARIA desde el inicio.
2. API predecible: Usar props y slots coherentes, siguiendo convenciones del framework.
3. Separación de estilos: Utilizar tokens de diseño (colores, espaciados, tipografía) para mantener la consistencia.
4. Documentación clara: Incluir ejemplos de uso, propiedades, eventos y variantes.

Implementación

Construyendo un componente accesible

// Ejemplo en React
function Button({ children, variant = 'primary', onClick }) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      aria-label={typeof children === 'string' ? children : undefined}
    >
      {children}
    </button>
  );
}

Uso de tokens de diseño

Define tokens en un archivo de configuración:

{
  "colors": {
    "primary": "#0070f3",
    "secondary": "#ff0080"
  },
  "spacing": {
    "sm": "4px",
    "md": "8px",
    "lg": "16px"
  }
}

Publicación en npm/registry

1. Construye el componente (por ejemplo, con npm run build).
2. Asegúrate de que package.json incluya main, module y types.
3. Publica con npm publish o usa yarn publish.

Recursos adicionales

• Guía de ARIA - MDN
• Tokens de diseño en CSS

Nota: Adapta los ejemplos según el framework que estés usando.