airbnb / Showkase

🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements
https://medium.com/airbnb-engineering/introducing-showkase-a-library-to-organize-discover-and-visualize-your-jetpack-compose-elements-d5c34ef01095
Apache License 2.0
2.11k stars 107 forks source link

Generic/Custom Showkase Annotation #381

Open eddnav opened 5 months ago

eddnav commented 5 months ago

Why can't we have a single annotation like Showkase for all the UI elements? Why did you create a different annotation for each UI element(@ShowkaseComposable for composables, @ShowkaseColor for colors & @ShowkaseTypography for text styles)? This was done mostly for future proofing. Even though these annotations have the same properties right now, it's possible that they will diverge as we add more features. Once more people start using this library, we will get a more clear idea about whether that needs to happen or not. If we find that it didn't evolve the way we expected, we will consider consildating these annotations.

I understand the decision behind specific annotations for each type, but it would be nice to also have a custom (can behave just like @ShowkaseComposable, just not grouped under "Components") annotation to allow more flexibility. An example of this is shadows. My design system has custom drop shadows, not elevation and I would like to display them in Showkase.

vinaygaba commented 4 months ago

@eddnav My current thinking on this subject is that we should probably prefer keeping the API surface simple as long as there's a reasonable way to accomplish what a developers is trying to do. Everything in a design system can be exposed as part of a component preview itself and that should accomplish what you are hoping to get out of it. For example, one could create a preview like this to demonstrate the shadows

@ShowkaseComposable(name= "High", group = "Shadows")
@Preview
fun HighShadow() {
    Box(
        modifier = Modifier.size(64.dp).shadow(CustomTheme.shadows.high)
    ) {...}
}

If you squint enough, everything can be a component preview and this is true even for annotations like @ShowkaseColor and @ShowkaseTypography. Hope this makes sense

eddnav commented 2 weeks ago

@vinaygaba sorry for the super delayed reply, but I agree, however, it'd be really nice if we could then opt-out of the permutations for RTL, scaling and so on.