¿Qué es Showkase?

Showkase es una librería Android basada en annotation processing que te ayuda a organizar, descubrir, buscar y visualizar elementos de UI construidos con Jetpack Compose. Genera automáticamente un navegador visual donde puedes explorar tus componentes composables, colores y tipografías.

Al detectar @Composable, @ShowkaseColor o @ShowkaseTypography, Showkase genera vistas alternativas (modo oscuro, texto escalado, RTL, etc.), lo que permite detectar problemas visuales durante el desarrollo.

¿Por qué usarlo?

• Cuando tu base de UI crece, los componentes se vuelven difíciles de encontrar y reutilizar, lo cual puede provocar duplicación y baja consistencia.
• Showkase elimina el trabajo manual de construir un “component browser” propio.
• El navegador generado mejora la reusabilidad y consistencia del diseño en todo el equipo.
• Te permite visualizar elementos en múltiples configuraciones sin esfuerzo adicional, acelerando el ciclo de desarrollo.
• Soporta documentación KDoc, búsqueda por nombre o grupo, y multi-módulo.

Instalación

✅ En tu libs.toml (Version Catalog)

[versions]
showkase = "1.0.5"

[libraries]
showkase = { group = "com.airbnb.android", name = "showkase", version.ref = "showkase" }
showkase-annotation = { group = "com.airbnb.android", name = "showkase-annotation", version.ref = "showkase" }
showkase-processor = { group = "com.airbnb.android", name = "showkase-processor", version.ref = "showkase" }

✅ En el módulo (KTS)

Para incluirlo solo en debug builds (recomendado):

dependencies {
  debugImplementation(libs.showkase)
  implementation(libs.showkase_annotation)
  kspDebug(libs.showkase_processor)
}

Si necesitas que funcione también en release:

dependencies {
  implementation(libs.showkase)
  implementation(libs.showkase_annotation)
  ksp(libs.showkase_processor)
}

Primeros pasos

1. Anota tus elementos UI

Composables:
Si ya usas @Preview, no es necesario añadir @ShowkaseComposable. Si no, agrega:

@ShowkaseComposable(name = "Button", group = "Buttons")
@Composable
fun MyButtonTemplate() { ... }

Colores:

@ShowkaseColor(name = "Primary", group = "Palette")
val primary = Color(0xFF6200EE)

Tipografías:

@ShowkaseTypography(name = «Heading», group = «Typography»)
val headingStyle = TextStyle(…)

2. Define el módulo raíz

En tu módulo principal, crea una clase:

@ShowkaseRoot
class RootModule : ShowkaseRootModule

3. Reconstrúyelo y lanza el navegador

Tras compilar, se genera automáticamente Showkase.getBrowserIntent(context) o createShowkaseBrowserIntent(context). Luego:

startActivity(Showkase.getBrowserIntent(this))

Esto lanza la UI browser con todos los elementos anotados.

Nota: si no hay composables o colores anotados, el método getBrowserIntent() podría no generarse

4. Ignorar previews privadas (opcional)

Si estás utilizando @Preview en funciones private, Showkase generará un error al procesarlas, ya que requiere que las composables sean accesibles públicamente. Para evitar esto sin cambiar la visibilidad, puedes añadir la siguiente configuración en tu build.gradle.kts:

android {
    ...
    ksp {
        arg("skipPrivatePreviews", "true")
    }
}

Esto le indica a Showkase que ignore las previews privadas durante el procesamiento de anotaciones, evitando errores sin afectar la estructura de tu código.

Ejemplo de uso mínimo

@ShowkaseRoot
class RootModule : ShowkaseRootModule

@ShowkaseComposable(name = "Greeting Card", group = "Cards")
@Composable
fun GreetingCardPreview() {
  Card { Text("Hello!") }
}

@ShowkaseColor(name = "Accent", group = "Palette")
val accent = Color(0xFF03DAC5)

@ShowkaseTypography(name = "Body", group = "Typography")
val bodyStyle = TextStyle(fontSize = 16.sp)

...

// En Activity de debug:
startActivity(Showkase.getBrowserIntent(this))

Una vez lanzado, verás una UI que agrupa tus componentes por grupo y nombre, permite búsqueda, y muestra automáticamente variaciones (dark mode, RTL, escalado)…

---

Conclusión

Showkase es una herramienta poderosa si trabajas con Jetpack Compose y necesitas mantener un catálogo visual de tus componentes, colores y tipografías. Con configuración mínima, genera un navegador que agiliza la detección de errores visuales, mejora la documentación y promueve la reutilización de UI. Ideal para mantener consistencia en proyectos grandes o equipos que usan diseño basado en componentes.