Catalyst

Traducido del post escrito por Adam Wathan en el blog de Tailwind.

El diciembre 20 de 2023 el equipo detrás de Tailwind CSS lanzó la primera prewview de desarrollo de Catalyst.

Catalyst es el primer kit de UI (interfaz de usuario) de aplicaciones totalmente hecho de componentes y con “pilas” incluidas: componentes de React reales con API(s) cuidadosamente diseñadas que se basan unas en otras para crear una arquitectura de componentes práctica, de la misma forma que lo haríamos en una aplicación real.

Puedes echar un vistazo a la demostración en vivo, leer la documentación y, si eres cliente de Tailwind UI All-Access, descargarlo y probarlo en un nuevo proyecto hoy mismo.

Catalyst está actualmente en desarrollo y hay mucho más por venir, pero el lanzamiento tiene el fin de que puedas jugar con él de inmediato, ya que se siguen construyendo nuevos componentes a la vez que se buscan otras maneras de hacer que sea una experiencia aún mejor.

Tus componentes, no los nuestros

Con Catalyst, fue propuesto crear un kit de interfaz de usuario con el que las futuras Stripe o Linear se sintieran cómodas a la hora de crear sus productos: equipos obsesionados con el diseño que quieren ser dueños de sus componentes de interfaz de usuario y que nunca elegirían una biblioteca estándar.

Así que no es una dependencia que se instala, sino que se descarga el código fuente y se copian los componentes en su propio proyecto, donde se convierten en el punto de partida para su propio sistema de componentes:

¿Quieres cambiar el radio del borde de tus botones? Sólo tienes que abrir button.tsx y cambiar algunas clases. No necesitas abrir una incidencia en GitHub e intentar convencer de que se exponga una nueva opción de configuración.

Catalyst es un “kit de interfaz de usuario 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

Conseguir el estilo visual adecuado en un proyecto como éste es difícil. El desarrollo de Catalyst se hizo con varios objetivos en mente:

• Ser competitivos: se quería diseñar algo que pudiera competir con algunas de las interfaces más bonitas de la web.
• Ser atemporal: no se buscaba diseñar algo que pareciera anticuado dentro de 6 meses porque se inclinaba demasiado por tendencias específicas o “bleeding-edge”
• Ser productivos: todo lo que se diseñara tenía que ser rápido y eficaz para los usuarios reales, no solo bonito en una foto de Dribbble.

Costó mucho trabajo y hubo que equilibrar muchas concesiones, pero resultado final es genial:

Para ser competitivos, se invirtió en muchos detalles, como sutiles desenfoques de fondo en los menús desplegables, perfeccionamiento de la forma en que las sombras y los bordes se mezclan entre sí en los controles de formularios, y un cuidadoso uso de la animación en elementos como cuadros de diálogo e interruptores de palanca.

Para ser atemporales, se intentó encontrar el equilibrio adecuado entre el diseño plano y el esqueuomórfico, con las suficientes señales de profundidad para que los componentes tengan un aspecto estupendo aunque las tendencias cambien un poco en cualquier dirección.

Hubo inspiración en el navegador y utilizamos anillos de enfoque azules sin estilos predefindo para evitar elegir un tratamiento que podría pronto parecer fuera de moda.

Para ser productivos, se trabajó cuidadosamente para asegurarnos de que aún hubiera mucho espacio en blanco, pero que la interfaz de usuario fuera lo suficientemente densa como para que cupiera mucha información en la pantalla.

También se limitó el uso de transiciones y animaciones a los lugares en los que parecían importantes, e incluso en esos casos se ha intentado que sean rápidas para que no dé la sensación de estar esperando en la interfaz de usuario.

Catalyst también es totalmente compatible con el modo oscuro, y todo lo que se construye con componentes Catalyst se adapta automáticamente entre los modos claro y oscuro.

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

Modelado según HTML

Se trabajo por mucho tiempo en las API de los componentes, esforzándose por hacer las cosas realmente fáciles de instalar y usar de inmediato, sin comprometer la flexibilidad.

Es habitual que las bibliotecas de interfaz de usuario utilicen API de este tipo:

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, empieza a ser difícil hacer cosas como añadir una clase sólo al elemento <input>.

En última instancia, eso llevó a las APIs que reflejaban estrechamente HTML, donde es raro que un solo componente renderice más de un elemento.

Crear un campo de texto con Catalyst tiene este aspecto, 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, hace que sea muy fácil hacer cosas como restringir el ancho de la entrada, sin restringir el ancho de cualquiera 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 el desplazamiento de la descripción por debajo de la entrada, en lugar de por encima:

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>
	);
}

Fue necesario experimentar mucho para encontrar la forma correcta de hacer que estas API funcionaran, especialmente en detalles como añadir estilos de diseño a los hijos correctos, pero la recompensa mereció la pena, y estos componentes son realmente una delicia de usar.

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

La primera versión de Headless UI fue lanzada en el verano de 2020, pero ha pasado poco más de un año desde la última versión importante debido a todo el trabajo con Tailwind CSS en sí.

Catalyst fue la excusa perfecta para volver a trabajar con Headless UI, y rápidamente encontramos muchas formas de mejorar el proyecto para simplificar el código en Catalyst mismo.

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

• Posicionamiento de anclaje incorporado: utilizando Floating UI, componentes como Menu, Listbox y más ahora pueden posicionar automáticamente sus popover para estar anclados a su disparador, adaptándose según sea necesario a los cambios en el viewport.
• Componente de casilla de verificación sin cabeza: se ha agregado un componente de Checkbox sin cabeza para complementar nuestro componente RadioGroup existente, facilitando la construcción de controles de casilla de verificación totalmente personalizados.
• Componentes de formulario HTML: se han agregado componentes Input, Select, Textarea, Label, Description, Fieldset y Legend que manejan toda la generación de ID y mapeo de atributos aria-* que necesita hacer para conectar los campos del formulario.
• Detección mejorada de hover y focus-visible: utilizando ganchos de la increíble biblioteca React Aria bajo el capó, Headless UI ahora agrega atributos data-hover y data-focus más inteligentes a sus controles que se comportan de manera más consistente en diferentes dispositivos que las pseudo-clases nativas.
• Virtualización de lista de 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, incluido un selector de fecha, tooltips y más.

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

La documentación publicada para esto llegará muy pronto, pero no se pudo resistir a lanzar Catalyst antes de las vacaciones, incluso si eso significaba publicar la documentación de Headless UI unos días más tarde.

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 este primer lanzamiento hoy mismo.

Se ha dedicado mucho trabajo a conseguir que todo lo lanzado hoy sea perfecto, más de lo que podrías imaginar, pero se busca por recibir comentarios y formas de mejorarlo, así que construye algunas cosas con él y di qué piensas.

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