Scaffold Remote Component

Step 1: Create Component Implementation

Create the file at relative to the root of the remote-material3 project: src/main/java/androidx/wear/compose/remote/material3/$COMPONENT_NAME.kt

Use this base template:

package androidx.wear.compose.remote.material3

import androidx.compose.runtime.Composable
import androidx.compose.remote.creation.compose.modifier.RemoteModifier

@Composable
public fun $COMPONENT_NAME(
    modifier: RemoteModifier = RemoteModifier,
    // Add other relevant parameters here
) {
    // TODO: Implement the component
}

Step 2: Create the Sample

Create the sample file relative to the root of the remote-material3 project: samples/src/main/java/androidx/wear/compose/remote/material3/samples/${COMPONENT_NAME}Sample.kt

Use this base template:

package androidx.wear.compose.remote.material3.samples

import androidx.annotation.Sampled
import androidx.compose.runtime.Composable
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.wear.compose.remote.material3.$COMPONENT_NAME

@Sampled
@Composable
fun ${COMPONENT_NAME}Sample(modifier: RemoteModifier = RemoteModifier) {
    $COMPONENT_NAME(
        modifier = modifier
    )
}

@WearPreviewDevices
@Composable
fun ${COMPONENT_NAME}SamplePreview(
    @PreviewParameter(ProfilePreviewParameterProvider::class) profile: Profile
) = RemotePreview(profile = profile) {
    Container { ${COMPONENT_NAME}Sample() }
}

Step 3: Create the Preview

Create the preview file relative to the root of the remote-material3 project: samples/src/main/java/androidx/wear/compose/remote/material3/previews/${COMPONENT_NAME}Preview.kt

Use this base template, separating out components into clear descriptive variations describing what they contain.

package androidx.wear.compose.remote.material3.previews

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.wear.compose.material3.ui.util.WearPreviewDevices
import androidx.wear.compose.remote.material3.${COMPONENT_NAME}
import androidx.compose.remote.creation.compose.preview.RemotePreview
import androidx.compose.remote.creation.compose.preview.Profile
import androidx.compose.remote.creation.compose.preview.ProfilePreviewParameterProvider

@WearPreviewDevices
@Composable
fun ${COMPONENT_NAME}DefaultPreview(
    @PreviewParameter(ProfilePreviewParameterProvider::class) profile: Profile
) = RemotePreview(profile = profile) { Container { ${COMPONENT_NAME}Default() } }

@WearPreviewDevices
@Composable
fun ${COMPONENT_NAME}WithVariantPreview(
    @PreviewParameter(ProfilePreviewParameterProvider::class) profile: Profile
) = RemotePreview(profile = profile) { Container { ${COMPONENT_NAME}WithVariant() } }

@Composable
@RemoteComposable
fun ${COMPONENT_NAME}Default() {
    ${COMPONENT_NAME}()
}

@Composable
@RemoteComposable
fun ${COMPONENT_NAME}WithVariant() {
    ${COMPONENT_NAME}(/* Configure explicitly */)
}

@Composable
@RemoteComposable
private fun Container(
    modifier: RemoteModifier = RemoteModifier.fillMaxSize().padding(16.rdp),
    content: @Composable @RemoteComposable () -> Unit,
) {
    RemoteBox(modifier, contentAlignment = RemoteAlignment.Center, content = content)
}

Step 4: Create the Screenshot Test

Create the test file relative to the root of the remote-material3 project: src/androidTest/java/androidx/wear/compose/remote/material3/${COMPONENT_NAME}Test.kt

Use this boilerplate, ensuring a separate @Test method exists for each explicit preview variation you generated in Step 3:

package androidx.wear.compose.remote.material3

import androidx.wear.compose.remote.material3.previews.${COMPONENT_NAME}Default
import androidx.wear.compose.remote.material3.previews.${COMPONENT_NAME}WithVariant
import androidx.compose.remote.creation.CreationDisplayInfo
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

@MediumTest
@SdkSuppress(minSdkVersion = 35, maxSdkVersion = 35)
@RunWith(AndroidJUnit4::class)
class ${COMPONENT_NAME}Test {
    @get:Rule
    val remoteComposeTestRule = RemoteComposeScreenshotTestRule(
        moduleDirectory = SCREENSHOT_GOLDEN_DIRECTORY,
    )

    private val creationDisplayInfo = CreationDisplayInfo(
        500,
        500,
        ApplicationProvider.getApplicationContext().resources.displayMetrics.densityDpi
    )

    @Test
    fun ${COMPONENT_NAME}Default() {
        remoteComposeTestRule.runScreenshotTest(creationDisplayInfo = creationDisplayInfo) {
            ${COMPONENT_NAME}Default()
        }
    }

    @Test
    fun ${COMPONENT_NAME}WithVariant() {
        remoteComposeTestRule.runScreenshotTest(creationDisplayInfo = creationDisplayInfo) {
            ${COMPONENT_NAME}WithVariant()
        }
    }
}

Step 5: Create the Screenshot Test for Sample

Create screenshot test for the sample at: src/androidTest/java/androidx/wear/compose/remote/material3/samples/

Use this boilerplate:

package androidx.wear.compose.remote.material3.samples

import androidx.test.core.app.ApplicationProvider
import androidx.test.ext.junit.runners.AndroidJUnit4
import androidx.test.filters.MediumTest
import androidx.test.filters.SdkSuppress
import androidx.compose.remote.creation.CreationDisplayInfo
import androidx.wear.compose.remote.material3.samples.${COMPONENT_NAME}Sample
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

@MediumTest
@SdkSuppress(minSdkVersion = 35, maxSdkVersion = 35)
@RunWith(AndroidJUnit4::class)
class ${COMPONENT_NAME}SampleTest {
    @get:Rule
    val remoteComposeTestRule = RemoteComposeScreenshotTestRule(
        moduleDirectory = SCREENSHOT_GOLDEN_DIRECTORY,
    )

    private val creationDisplayInfo = CreationDisplayInfo(
        500,
        500,
        ApplicationProvider.getApplicationContext().resources.displayMetrics.densityDpi
    )

    @Test
    fun ${COMPONENT_NAME}SampleTest() {
        remoteComposeTestRule.runScreenshotTest(creationDisplayInfo = creationDisplayInfo) {
            ${COMPONENT_NAME}Sample()
        }
    }
}

Step 6: Wrap up

Notify the user that the component boilerplate has been generated and ask if they'd like to implement specific behavior for the $COMPONENT_NAME component now.