Screenshots from Compose previews, and what rendering them showed (refs #2) 0a2858c0dad3

package io.oxygenhub.android

import android.content.res.Configuration

import androidx.compose.runtime.Composable

import androidx.compose.runtime.remember

import androidx.compose.ui.tooling.preview.Preview

import com.android.tools.screenshot.PreviewTest

import io.oxygenhub.android.api.DeviceCode

import io.oxygenhub.android.api.HubApi

import io.oxygenhub.android.api.Inbox

import io.oxygenhub.android.api.Issue

import io.oxygenhub.android.api.IssueState

import io.oxygenhub.android.api.Label

import io.oxygenhub.android.api.Notification

import io.oxygenhub.android.api.Repository

import io.oxygenhub.android.api.User

import io.oxygenhub.android.api.Visibility

import io.oxygenhub.android.auth.Session

import io.oxygenhub.android.ui.nav.SignedInApp

import io.oxygenhub.android.ui.nav.TopLevel

import io.oxygenhub.android.ui.signin.SignInContent

import io.oxygenhub.android.ui.signin.SignInState

import io.oxygenhub.android.ui.theme.OxygenHubTheme

import kotlinx.coroutines.Dispatchers

import kotlinx.coroutines.test.setMain

// The README's screenshots, rendered by layoutlib with no emulator:

//   ./gradlew :app:updateDebugScreenshotTest

// writes them under app/src/screenshotTestDebug/reference; scripts/screenshots.sh

// copies them to docs/screenshots. The data is made up.

private const val PHONE = "spec:width=411dp,height=891dp"

private const val FOLDABLE = "spec:width=791dp,height=820dp"

private const val TABLET = "spec:width=1280dp,height=800dp,dpi=240"

private val hour = 3_600_000L

private val day = 24 * hour

/** A hub in memory, for the pictures. */

private class SampleHub : HubApi {

    private val now = System.currentTimeMillis()

    override suspend fun user() = User("ada", "Ada Lovelace")

    override suspend fun repositories() = listOf(

        Repository("ada", "engine", "The analytical engine's notes, in Oxygen", visibility = Visibility.Public, updatedMs = now - 2 * hour),

        Repository("ada", "bernoulli", "Computing Bernoulli numbers, note G", visibility = Visibility.Private, updatedMs = now - 1 * day),

        Repository("ada", "punch-cards", "Card decks for the Jacquard loom", updatedMs = now - 3 * day),

        Repository("babbage", "difference-engine", "Engine No. 2", visibility = Visibility.Internal, updatedMs = now - 5 * hour),

        Repository("ada", "letters", "Correspondence, sealed and signed", updatedMs = now - 12 * day),

    )

    override suspend fun issues(owner: String, name: String, state: IssueState) = listOf(

        Issue(

            42, "Note G: the loop that computes B7", author = "ada", pinned = true, comments = 4,

            labels = listOf(Label("feature", "#0064e0")), createdMs = now - 3 * hour,

        ),

        Issue(41, "The mill overflows on forty-digit carries", author = "babbage", comments = 2, labels = listOf(Label("bug", "#c62d47")), createdMs = now - 1 * day),

        Issue(39, "Describe the store's capacity in the README", author = "ada", labels = listOf(Label("docs", "#00b8d4")), createdMs = now - 4 * day),

        Issue(37, "Punch-card reader skips every hundredth card", author = "menabrea", comments = 7, createdMs = now - 9 * day),

    ).filter { state == IssueState.All || it.state == state.query }

    override suspend fun inbox(limit: Int) = Inbox(

        unread = 3,

        items = listOf(

            Notification(5, now - 20 * 60_000L, "proposal.review_requested", "Carry look-ahead for the mill", actor = "babbage"),

            Notification(4, now - 2 * hour, "flow.failed", "engine main: tests failed"),

            Notification(3, now - 5 * hour, "issue.comment", "Note G: the loop that computes B7", actor = "menabrea"),

            Notification(2, now - 1 * day, "proposal.landed", "Store of a thousand numbers", actor = "ada", read = true),

            Notification(1, now - 2 * day, "issue.assigned", "The mill overflows on forty-digit carries", actor = "babbage", read = true),

        ),

    )

    override suspend fun markRead(id: Long) {}

    override suspend fun markAllRead() {}

    override suspend fun revokeToken() {}

}

private val session = Session("https://oxygenhub.io", "ada", "", listOf("repo:read", "user:read"))

@Composable

private fun App(start: TopLevel, selected: String? = null, dark: Boolean = false) {

    // layoutlib never runs the main looper, so the view models' first load

    // would never land: run it in place (the sample hub never suspends).

    remember { Dispatchers.setMain(Dispatchers.Unconfined) }

    OxygenHubTheme(darkTheme = dark, dynamicColor = false) {

        SignedInApp(session, SampleHub(), { "Hello, ada! Oxygen Native Core is active." }, {}, start, selected)

    }

}

@PreviewTest

@Preview(name = "sign-in", device = PHONE, showSystemUi = false)

@Composable

fun SignInPhone() {

    OxygenHubTheme(dynamicColor = false) {

        SignInContent("https://oxygenhub.io", SignInState.Idle(), null, {}, {}, {})

    }

}

@PreviewTest

@Preview(name = "sign-in-code", device = PHONE, uiMode = Configuration.UI_MODE_NIGHT_YES)

@Composable

fun SignInCodeDark() {

    val code = DeviceCode("", "BCDF-GHJK", "https://oxygenhub.io/device", "https://oxygenhub.io/device?code=BCDF-GHJK")

    OxygenHubTheme(darkTheme = true, dynamicColor = false) {

        SignInContent("https://oxygenhub.io", SignInState.Approving(code), null, {}, {}, {})

    }

}

@PreviewTest

@Preview(name = "dashboard-phone", device = PHONE)

@Composable

fun DashboardPhone() = App(TopLevel.Dashboard)

@PreviewTest

@Preview(name = "repositories-foldable", device = FOLDABLE)

@Composable

fun RepositoriesFoldable() = App(TopLevel.Repositories, selected = "ada/engine")

@PreviewTest

@Preview(name = "repositories-tablet-dark", device = TABLET, uiMode = Configuration.UI_MODE_NIGHT_YES)

@Composable

fun RepositoriesTabletDark() = App(TopLevel.Repositories, selected = "ada/engine", dark = true)

@PreviewTest

@Preview(name = "inbox-phone-dark", device = PHONE, uiMode = Configuration.UI_MODE_NIGHT_YES)

@Composable

fun InboxPhoneDark() = App(TopLevel.Inbox, dark = true)

#!/usr/bin/env bash

# Renders the README's screenshots from the previews in app/src/screenshotTest

# (layoutlib: no emulator or device) and copies them to docs/screenshots.

set -euo pipefail

cd "$(dirname "$0")/.."

./gradlew --max-workers=2 :app:updateDebugScreenshotTest

src=app/src/screenshotTestDebug/reference/io/oxygenhub/android/ScreenshotsKt

mkdir -p docs/screenshots

for f in "$src"/*.png; do

    # SignInPhone_sign-in_0eb2062e_0.png -> sign-in.png

    name=$(basename "$f" | sed -E 's/^[^_]+_(.+)_[0-9a-f]+_[0-9]+\.png$/\1/')

    cp "$f" "docs/screenshots/$name.png"

done

ls docs/screenshots

# Compose screenshot references: the README copies live in docs/screenshots

# (scripts/screenshots.sh); these change with the clock, so are not kept.

/app/src/screenshotTestDebug/

    alias(libs.plugins.screenshot)

    // README screenshots, rendered from previews without an emulator:

    // ./gradlew :app:updateDebugScreenshotTest (src/screenshotTest).

    experimentalProperties["android.experimental.enableScreenshotTest"] = true

    screenshotTestImplementation(libs.screenshot.validation.api)

    screenshotTestImplementation(libs.androidx.compose.ui.tooling)

    screenshotTestImplementation(libs.kotlinx.coroutines.test)

import androidx.compose.material3.ListItemDefaults

import androidx.compose.ui.graphics.Color

            colors = ListItemDefaults.colors(containerColor = Color.Transparent),

    start: TopLevel = TopLevel.Dashboard,

    /** A repository to show beside the list from the start (`owner/name`). */

    selectedRepository: String? = null,

        NavHost(nav, startDestination = start.route) {

                RepositoriesScreen(rememberViewModel { RepositoriesViewModel(api, session.username) }, selectedRepository) { slug, onBack ->

import androidx.compose.material3.adaptive.layout.ThreePaneScaffoldDestinationItem

    initialSelection: String? = null,

    val navigator = rememberListDetailPaneScaffoldNavigator(

        scaffoldDirective = directive,

        initialDestinationHistory = listOfNotNull(

            ThreePaneScaffoldDestinationItem<String>(ListDetailPaneScaffoldRole.List),

            initialSelection?.let { ThreePaneScaffoldDestinationItem(ListDetailPaneScaffoldRole.Detail, it) },

        ),

    )

import androidx.compose.ui.graphics.Color

            // Transparent: the row takes the colour of what holds it (a card, a pane).

            ListItemDefaults.colors(containerColor = Color.Transparent)

            color = MaterialTheme.colorScheme.onSurface,

// Selected chips and rows: the accent, quietly.

val DarkSelected = Color(0xFF123A66)

val LightSelected = Color(0xFFD7E5FB)

    secondaryContainer = DarkSelected,

    onSecondaryContainer = DarkInk,

    secondaryContainer = LightSelected,

    onSecondaryContainer = LightInk,

    alias(libs.plugins.screenshot) apply false

kotlin.code.style=official

# Compose Preview Screenshot Testing (the README's screenshots).

android.experimental.enableScreenshotTest=true

screenshot = "0.0.1-alpha16"

screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot" }

screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot" }