Presentando Catalyst: Un moderno kit de UI para React

Hoy es el día: acabamos de publicar la primera vista previa de desarrollo de Catalyst, justo a tiempo para tus sesiones de hacking navideñas.

Catalyst es nuestro primer kit de UI de aplicación totalmente componentizado y con todo incluido: componentes reales de React con APIs cuidadosamente diseñadas que se construyen unas sobre otras para crear una arquitectura de componentes real, de la misma manera que lo haríamos en una aplicación real.

Echa un vistazo a la demostración en vivo, lee la documentación, y si eres cliente de Tailwind UI All-Access, descárgalo y pruébalo hoy mismo en un nuevo proyecto.

Catalyst está actualmente en vista previa de desarrollo y hay mucho más por venir, pero lo estamos lanzando hoy para que puedas jugar con él de inmediato mientras continuamos construyendo nuevos componentes y encontramos formas de hacerlo una experiencia aún mejor.

Tus componentes, no los nuestros

Con Catalyst, nos propusimos construir un kit de UI que el Stripe o Linear del mañana se sentiría cómodo usando para construir sus productos: equipos obsesionados con el diseño que quieren ser dueños de sus componentes de UI y que nunca elegirían una biblioteca lista para usar.

Así que no es una dependencia que instalas, sino que descargas el código fuente y copias los componentes en tu propio proyecto, donde se convierten en el punto de partida para tu propio sistema de componentes:

¿Quieres cambiar el radio del borde en tus botones? Simplemente abre button.tsx y cambia algunas clases. No necesitas abrir un issue en GitHub e intentar convencernos de exponer una nueva opción de configuración.

Catalyst es un "kit de UI que desaparece": seis meses después de haberlo instalado, casi deberías olvidar que no fuiste tú quien construyó los componentes originales.

El diseño está en los detalles

Lograr el estilo visual correcto en un proyecto como este es difícil. Lo abordamos con algunos objetivos:

• Ser competitivos: queríamos diseñar algo que pudiera competir con algunas de las interfaces más bonitas de la web actual.
• Ser atemporales: no queríamos diseñar algo que pareciera anticuado en 6 meses porque se apoyaba demasiado en tendencias específicas.
• Ser productivos: lo que diseñáramos necesitaba sentirse rápido y eficiente para los usuarios reales, no solo verse genial en una captura de Dribbble.

Nos costó mucho trabajo y hubo muchas concesiones que equilibrar, pero estoy realmente enamorado de dónde terminamos:

Para ser competitivos, invertimos en muchos detalles como sutiles desenfoques de fondo en los menús desplegables, perfeccionando la forma en que las sombras y los bordes se mezclan entre sí en los controles de formulario, y un uso reflexivo de la animación en cosas como diálogos e interruptores.

Para ser atemporales, intentamos encontrar el equilibrio adecuado entre el diseño plano y el esqueumórfico, con suficientes señales de profundidad para que nuestros componentes se vean geniales incluso si las tendencias cambian un poco en cualquier dirección.

También nos inspiramos en el navegador y utilizamos anillos de enfoque azules sin opinión para evitar elegir un tratamiento que pronto podría parecer pasado de moda.

Para ser productivos, trabajamos cuidadosamente para asegurarnos de que todavía hubiera mucho espacio en blanco, pero que la interfaz de usuario fuera lo suficientemente densa como para mostrar mucha información en la pantalla.

También limitamos nuestro uso de transiciones y animaciones solo a lugares donde se sentía importante, e incluso entonces intentamos mantenerlas rápidas para que nunca sientas que estás esperando a la interfaz de usuario.

Catalyst también viene con soporte completo para el modo oscuro, y cualquier cosa que construyas con componentes de Catalyst se adapta automáticamente entre los modos claro y oscuro.

No es obvio, pero hay un montón de pequeños detalles que tuvimos que cambiar para que las cosas se vieran lo mejor posible en modo oscuro, como ajustar sombras, cambiar anillos exteriores por anillos interiores para imitar el cambio de iluminación, y más.

Modelado según HTML

Pasamos mucho tiempo trabajando en las APIs de los componentes, esforzándonos mucho para que las cosas fueran realmente fáciles de incorporar y usar de inmediato, sin comprometer la flexibilidad.

Es común que las bibliotecas de UI usen APIs como esta:

function Example() {
  return (
    <TextField
      name="product_name"
      label="Product name"
      description="Use the name you'd like people to see in their cart."
    />
  );
}

Pero con todos los props viviendo en el mismo componente, comienza a ser difícil hacer cosas como agregar una clase solo al elemento <input>.

Finalmente, eso nos llevó a APIs que reflejaban de cerca HTML, donde es raro que un solo componente renderice más de un elemento.

Crear un campo de texto con Catalyst se ve así, por ejemplo:

import { Description, Field, Label } from "@/components/fieldset";
import { Input } from "@/components/input";
function Example() {
  return (
    <Field>
      <Label>Product name</Label>
      <Description>Use the name you'd like people to see in their cart.</Description>
      <Input name="product_name" />
    </Field>
  );
}

Al mantener las cosas componibles de esta manera, es realmente fácil hacer cosas como restringir el ancho de la entrada, sin restringir el ancho de ninguno de los otros elementos:

import { Description, Field, Label } from "@/components/fieldset";
import { Input } from "@/components/input";
function Example() {
  return (
    <Field>
      <Label>Product name</Label>
      <Description>Use the name you'd like people to see in their cart.</Description>
      <Input name="product_name" />
      <Input name="product_name" className="max-w-sm" />
    </Field>
  );
}

También facilita mover la descripción debajo de la entrada, en lugar de arriba:

import { Description, Field, Label } from '@/components/fieldset'
import { Input } from '@/components/input'
function Example() {
  return (
    <Field>
      <Label>Product name</Label>
      <Description>Use the name you'd like people to see in their cart.</Description>
      <Input name="product_name" className="max-w-sm" />
      <Description>Use the name you'd like people to see in their cart.</Description>
    </Field>
  )
}

Costó mucha experimentación descubrir la forma correcta de hacer funcionar estas APIs, especialmente en detalles como agregar estilos de diseño a los hijos correctos, pero la recompensa valió la pena, y estos componentes son realmente un placer de usar.

Impulsado por la próxima generación de Headless UI

Lanzamos la primera versión de Headless UI en el verano de 2020, but ha pasado poco más de un año desde el último lanzamiento significativo de características debido a todo el trabajo en el que nos hemos centrado con Tailwind CSS.

Catalyst fue la excusa perfecta para ensuciarnos las manos con Headless UI nuevamente, y rápidamente encontramos muchas formas de mejorar el proyecto para simplificar el código en Catalyst.

Acabamos de publicar Headless UI v2.0.0-alpha.1, que incluye un montón de cosas nuevas:

• Posicionamiento de anclaje incorporado: usando Floating UI, componentes como Menu, Listbox y más ahora pueden posicionar automáticamente sus popovers para que estén anclados a su disparador, adaptándose según sea necesario a los cambios en el viewport.
• Componente de checkbox headless: hemos agregado un componente Checkbox headless para complementar nuestro componente RadioGroup existente, lo que facilita la creación de controles de checkbox totalmente personalizados.
• Componentes de formulario HTML: hemos agregado componentes Input, Select, Textarea, Label, Description, Fieldset y Legend que manejan toda la generación de ID y el mapeo de atributos aria-* que necesitas hacer para conectar los campos de formulario.
• Detección mejorada de hover y focus-visible: usando hooks de la increíble biblioteca React Aria bajo el capó, Headless UI ahora agrega atributos data-hover y data-focus más inteligentes a tus controles que se comportan de manera más consistente en diferentes dispositivos que las pseudoclases nativas.
• Virtualización de listas Combobox: la próxima versión de Headless UI ahora puede manejar listas gigantes de opciones de combobox sin problemas de rendimiento.

...con muchas otras mejoras por venir, incluyendo un selector de fechas, tooltips y más.

Estas mejoras son solo para React por ahora durante este período alfa temprano, pero planeamos llevar todas estas mejoras a Vue también antes de etiquetar v2.0.

Pronto publicaremos la documentación para estas cosas, pero no pudimos resistirnos a sacar Catalyst antes de las vacaciones, incluso si eso significaba publicar la documentación de Headless UI unos días después.

Pruébalo

Catalyst es una actualización gratuita para todos los clientes de Tailwind UI All-Access, y puedes descargarlo y comenzar a jugar con esta primera versión hoy.

Se invirtió más trabajo del que puedas imaginar para que todo lo que estamos lanzando hoy quede perfecto, pero estamos ansiosos por recibir comentarios y formas en que podría mejorarse, así que construye algunas cosas con él y cuéntanos qué piensas.

Nos tomaremos un par de semanas para recargar energías durante las vacaciones, pero volveremos a Catalyst en el nuevo año, trabajando en nuevos componentes como diseños de aplicaciones, comboboxes, paletas de comandos, tooltips y más.