esafirm/compose-ui-book

UI Component Explorer for Android

Compose UI Book

Simple and extensible UI component explorer for Jetpack Compose and Android View

You can check the demo video here

Getting Started

Usually the UI component explorer is separated from the main app despite you have Android only or KMP project. So the first thing you should do is to create a module with this build.gradle.kts (or build.gradle if you're using Groovy)

Setup Module - KMP

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.multiplatform")
    id("org.jetbrains.compose")
    id("com.google.devtools.ksp")
}

// This could be in settings.gradle or root build.gradle
repositories {
    mavenCentral()
}

kotlin {
    jvm("desktop")
    android()

    sourceSets {
        named("commonMain") {
            dependencies {
                implementation("io.github.esafirm.uibook:browser-app:x.y.z")
            }
        }
        named("androidMain") {
            dependencies {
                // This is optional. If you use app compat then include this
                implementation("androidx.appcompat:appcompat:1.3.1")
                implementation("com.google.android.material:material:1.4.0")
            }
        }
        named("desktopMain") {
            dependencies {
                // This is mandatory as the current OS is not packaged in POM file
                implementation(compose.desktop.currentOs)
            }
        }
    }
}

android {
    // Insert Android related configuration in here
}

compose.desktop {
    // Insert compose desktop related configuration in here
}

dependencies {
    val processorDep = "io.github.esafirm.uibook:annotations-processor:x.y.z"
    add("kspAndroid", processorDep)
    add("kspDesktop", processorDep)
}

❗ Info: Please check the minimum KMP example for more complete setup.

Setup Module - Android Only

plugins {
    id("com.android.application")
    id("org.jetbrains.compose")
    id("com.google.devtools.ksp")
    kotlin("android")
}

android {
    // Insert Android related configuration in here
}

dependencies {
    implementation("io.github.esafirm.uibook:browser-app:x.y.z")
    implementation("androidx.appcompat:appcompat:1.3.1")
    implementation("com.google.android.material:material:1.4.0")

    ksp("io.github.esafirm.uibook:annotations-processor:x:y:z")
}

❗ Info: Please check the minimum android example for more complete setup.

change x.y.z to version in the release page

Create First Book

To create book simple create an extension function that extend BookHost and give the function @UIBook annotation. In this case I will create a Kotlin file with name Catalogue.kt and then create this function:

@UIBook(name = "Compose Button")
@Composable
fun BookHost.SimpleCouter() {
    val (count, setCount) = remember { mutableStateOf(0) }
    Button(onClick = { setCount(count + 1) }) {
        Text(text = "Counter $count")
    }
}

That's it now run the new module that you just created.

Android View Support

For Android target, it supports the Android View, just add the return type to the function

@UIBook(name = "Android TextView")
fun BookHost.SimpleTextView(): TextView {
    /**
     * This will draw text
     */
    return TextView(context).apply {
        text = "Hello World"
    }
}

Advanced

You can check the demo module for complete features.

Development

To develop the project, you need to use Android Studio Dolphin above.

It have some strange issue with IntelliJ Idea 2022.3 EAP.

Running the Demo

To run the Android sample run this command:

./gradlew :examples:demo:installDebug

To run the Desktop sample run this command:

./gradlew :examples:demo:run

Support

License

Esa @ MIT