@dhis2/dhis2-mobile-ui is a Compose Multiplatform DHIS2 design system library for Kotlin Multiplatform applications.

DHIS2 Mobile UI library is based in the DHIS2 Mobile Design System Figma library.

This library currently supports desktop and Android targets, in the next versions it will support iOS and web.

In the module build.gradle.kts:

dependencies {
  implementation("org.hisp.dhis.mobile:designsystem:0.2-SNAPSHOT")
}

setContent {
  DHIS2Theme {
    // A surface container using the 'background' color from the theme
    Surface(
      modifier = Modifier.fillMaxSize(),
      color = SurfaceColor.Container
    ) {
      Components()
    }
  }
}

Button(
  text = provideStringResource("show_more"),
  icon = {
    Icon(
      painter = provideDHIS2Icon(resourceName = "dhis2_blood_a_n_positive"),
      contentDescription = ""
    )
  },
  style = ButtonStyle.KEYBOARDKEY
) {}

The Compose Compiler plugin can generate reports / metrics around certain compose-specific concepts that can be useful to understand what is happening with some of your compose code at a fine-grained level. You can read more about it here.

To generate the reports / metrics, run the following Gradle command

./gradlew assembleDebug -PenableComposeCompilerReports=true

This would generate the output at <module>/build/compose_metrics

We are using Paparazzi for screenshot testing.

class InputChipSnapshotTest {

  @get:Rule
  val paparazzi = paparazzi()

  @Test
  fun launchChip() {
    paparazzi.snapshot {
      ColumnComponentContainer {
        InputChip(label = "Label", selected = false, badge = "3")
        InputChip(label = "Label", selected = true, badge = "3")
      }
    }
  }
}

./gradlew designsystem:testDebugUnitTest

Runs tests and generates an HTML report at /build/reports/paparazzi/ showing all test runs and snapshots.

./gradlew designsystem:recordPaparazziDebug

Saves snapshots as golden values to a predefined source-controlled location (defaults to /src/test/snapshots).

./gradlew designsystem:verifyPaparazziDebug

Runs tests and verifies against previously-recorded golden values. Failures generate diffs at /build/paparazzi/failures.