Storybook
A library that helps you create a list of components by scanning compose functions that are marked with @Preview annotation.
Jetpack Compose is a modern toolkit for building native Android UI. Using Compose, you can build your user interface by defining a set of composable functions that take in data and emit UI elements. In other words, we can create a small composable function that acts as a common component and can be reused in several places.
Recently, I was reviewing a project that is using Compose for UI. Multiple teams are working on different features and they have created separate UI implementations for the same element in their respective modules. It created code duplication and increased the effort of changing behavior. The better idea would be to extract them into a common module specially created for common UI components.
While making the refactoring, we realized that we would need a list of components that are already available. By doing so we can have a single source of truth about components and don’t have to go to each component and wait for Android Studio to render it. It will also help us to communicate better between UI designers, BA, and developers by using the names of components.
As the number of components and developers grows over time, it becomes a bit difficult to properly update the list. At that point in time, I thought wouldn’t it be great if this list could be somehow autogenerated so we don't have to maintain it? We have already created the previews for our components so I have decided to write a KSP that will search for functions with @Preview annotation and create a list of it. This library is an outcome of the problem that we have faced.
Enough of the talks let's see it in action,
Integration
In your setting.gradle add an entry for Jitapack,
dependencyResolutionManagement {
repositories {
maven { url 'https://jitpack.io' }
}
}Now in your build.gradle add the following lines,
plugins {
id "com.google.devtools.ksp" version "ksp_version"
}
dependencies {
ksp "com.github.GaurangShaha:Storybook:1.0.2"
}The KSP version is dependent on the Kotlin compiler that you are using. You can find the KSP versions here.
Once you rebuild the project, it will generate a compose function with the name as the name of the module appended by Storybook. Eg. a module with the name ui-component will generate a compose function with the name UiComponentStorybook. You can use this function to show the list wherever you want to display it.
Using this function user can do the following things,
- See the list of components. It will be achieved by scanning functions marked with @Preview annotation and are not private. The name of the component will be derived from the name of a function.
- Search the component in a list with its name.
- On tapping any item in the list, the user can see the component rendered.
Note — The function marked with @Preview annotation need to be public or internal in order to get listed.
It supports @Preview annotation out-of-the-box. If you have created any custom annotation for preview purposes, you can pass its fully qualified name as an argument to KSP in your build.gradle file.
ksp {
arg("extendedPreviews", "com.flea.market.ui.preview.FleaMarketPreviews")
}If you have multiple annotations for preview, pass them as a comma-separated string.
Following is the recording from the samples that I have created,
