create check box input component

common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt

@@ -31,6 +31,7 @@ import org.hisp.dhis.common.screens.Components
 import org.hisp.dhis.common.screens.FormShellsScreen
 import org.hisp.dhis.common.screens.FormsComponentsScreen
 import org.hisp.dhis.common.screens.IconButtonScreen
+import org.hisp.dhis.common.screens.InputCheckBoxScreen
 import org.hisp.dhis.common.screens.InputIntegerScreen
 import org.hisp.dhis.common.screens.InputLetterScreen
 import org.hisp.dhis.common.screens.InputLongTextScreen
@@ -139,6 +140,7 @@ fun Main() {
             Components.BADGES -> BadgesScreen()
             Components.SWITCH -> SwitchScreen()
             Components.INPUT_RADIO_BUTTON -> InputRadioButtonScreen()
+            Components.INPUT_CHECK_BOX -> InputCheckBoxScreen()
         }
     }
 }

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/CheckboxScreen.kt

@@ -4,6 +4,11 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.CheckboxPreview
 import org.hisp.dhis.common.screens.previews.TextCheckboxPreview
@@ -21,60 +26,85 @@ fun CheckboxScreen() {
     val option3 = "Option 3"
     val option4 = "Option 4"
 
-    val state1 = true
-    val state2 = false
-    val state3 = true
-    val state4 = false
+    var state1 by remember { mutableStateOf(true) }
+    var state2 by remember { mutableStateOf(false) }
+    var state3 by remember { mutableStateOf(true) }
+    var state4 by remember { mutableStateOf(false) }
 
-    val checkBoxesStatesHorizontal = listOf(
-        CheckBoxData("4", checked = true, enabled = true, textInput = option1),
-        CheckBoxData("5", checked = false, enabled = true, textInput = option2),
-        CheckBoxData("6", checked = true, enabled = false, textInput = option3),
-        CheckBoxData("7", checked = false, enabled = false, textInput = option4),
-    )
+    var state5 by remember { mutableStateOf(true) }
+    var state6 by remember { mutableStateOf(true) }
+    var state7 by remember { mutableStateOf(false) }
+    var state8 by remember { mutableStateOf(false) }
 
-    val checkBoxesStatesVertical = listOf(
-        CheckBoxData("0", checked = true, enabled = true, textInput = option1),
-        CheckBoxData("1", checked = false, enabled = true, textInput = option2),
-        CheckBoxData("2", checked = true, enabled = false, textInput = option3),
-        CheckBoxData("3", checked = false, enabled = false, textInput = option4),
-    )
+    val checkBoxesStatesHorizontal = remember {
+        mutableStateListOf(
+            CheckBoxData("4", checked = true, enabled = true, textInput = option1),
+            CheckBoxData("5", checked = false, enabled = true, textInput = option2),
+            CheckBoxData("6", checked = true, enabled = false, textInput = option3),
+            CheckBoxData("7", checked = false, enabled = false, textInput = option4),
+        )
+    }
+
+    val checkBoxesStatesVertical = remember {
+        mutableStateListOf(
+            CheckBoxData("0", checked = true, enabled = true, textInput = option1),
+            CheckBoxData("1", checked = false, enabled = true, textInput = option2),
+            CheckBoxData("2", checked = true, enabled = false, textInput = option3),
+            CheckBoxData("3", checked = false, enabled = false, textInput = option4),
+        )
+    }
 
     ColumnComponentContainer(
         title = "CheckBox",
         content = {
             SubTitle(
                 text = "Text Check Box",
             )
-            TextCheckboxPreview(state1, true, option1)
-            TextCheckboxPreview(state2, true, option2)
-            TextCheckboxPreview(state3, false, option3)
-            TextCheckboxPreview(state4, enabled = false, text = option4)
+            TextCheckboxPreview(state1, true, option1) {
+                state1 = it
+            }
+            TextCheckboxPreview(state2, true, option2) { state2 = it }
+            TextCheckboxPreview(state3, false, option3) { state3 = it }
+            TextCheckboxPreview(state4, enabled = false, text = option4) { state4 = it }
             Spacer(Modifier.size(Spacing.Spacing18))
 
             SubTitle(
                 text = "Simple Check Box",
             )
             Row {
-                CheckboxPreview(true, enabled = true)
-                CheckboxPreview(true, enabled = false)
+                CheckboxPreview(state5, enabled = true) { state5 = it }
+                CheckboxPreview(state6, enabled = false) { state6 = it }
             }
             Row {
-                CheckboxPreview(false, enabled = true)
-                CheckboxPreview(false, enabled = false)
+                CheckboxPreview(state7, enabled = true) { state7 = it }
+                CheckboxPreview(state8, enabled = false) { state8 = it }
             }
             Spacer(Modifier.size(Spacing.Spacing18))
 
             SubTitle(
                 text = "Horizontal Check Box Block",
             )
-            CheckBoxBlock(Orientation.HORIZONTAL, checkBoxesStatesHorizontal) {}
+            CheckBoxBlock(
+                Orientation.HORIZONTAL,
+                checkBoxesStatesHorizontal,
+                onItemChange = { checkBoxData ->
+                    val index = checkBoxesStatesHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                    checkBoxesStatesHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+                },
+            )
             Spacer(Modifier.size(Spacing.Spacing18))
 
             SubTitle(
                 text = "Vertical Check Box Block",
             )
-            CheckBoxBlock(Orientation.VERTICAL, checkBoxesStatesVertical) {}
+            CheckBoxBlock(
+                Orientation.VERTICAL,
+                checkBoxesStatesVertical,
+                onItemChange = { checkBoxData ->
+                    val index = checkBoxesStatesVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                    checkBoxesStatesVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+                },
+            )
         },
     )
 }

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt

@@ -30,4 +30,5 @@ enum class Components(val label: String) {
     METADATA_AVATAR("Metadata Avatar"),
     INPUT_RADIO_BUTTON("Input Radio Button"),
     SWITCH("Switch"),
+    INPUT_CHECK_BOX("Input Check Box"),
 }

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputCheckBoxScreen.kt

@@ -0,0 +1,104 @@
+package org.hisp.dhis.common.screens
+
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.InputCheckBox
+import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
+import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
+import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+
+@Composable
+fun InputCheckBoxScreen() {
+    val option1 = "Option 1"
+    val option2 = "Option 2"
+    val option3 = "Option 3"
+    val option4 = "Option 4"
+    val option5 = "Option 5"
+    val option6 = "Option 6"
+
+    val checkBoxDataItemsVertical = remember {
+        mutableStateListOf(
+            CheckBoxData("0", checked = true, enabled = true, textInput = option1),
+            CheckBoxData("1", checked = false, enabled = true, textInput = option2),
+            CheckBoxData("2", checked = false, enabled = true, textInput = option3),
+        )
+    }
+
+    val checkBoxDataItemsError = remember {
+        mutableStateListOf(
+            CheckBoxData("3", checked = true, enabled = true, textInput = option1),
+            CheckBoxData("4", checked = false, enabled = true, textInput = option2),
+            CheckBoxData("5", checked = false, enabled = true, textInput = option3),
+        )
+    }
+
+    val checkBoxDataItemsDisabled = remember {
+        mutableStateListOf(
+            CheckBoxData("6", checked = true, enabled = true, textInput = option1),
+            CheckBoxData("7", checked = false, enabled = true, textInput = option2),
+            CheckBoxData("8", checked = false, enabled = true, textInput = option3),
+        )
+    }
+
+    val checkBoxDataItemsHorizontal = remember {
+        mutableStateListOf(
+            CheckBoxData("9", checked = true, enabled = true, textInput = option1),
+            CheckBoxData("10", checked = false, enabled = true, textInput = option2),
+            CheckBoxData("11", checked = false, enabled = true, textInput = option3),
+            CheckBoxData("12", checked = false, enabled = true, textInput = option4),
+            CheckBoxData("13", checked = false, enabled = true, textInput = option5),
+            CheckBoxData("14", checked = false, enabled = true, textInput = option6),
+        )
+    }
+
+    ColumnComponentContainer("Checkboxes") {
+        SubTitle("Vertical")
+        InputCheckBox(
+            title = "Label",
+            checkBoxData = checkBoxDataItemsVertical,
+            onItemChange = { checkBoxData ->
+                val index = checkBoxDataItemsVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                checkBoxDataItemsVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+            },
+            onClearSelection = { checkBoxDataItemsVertical.replaceAll { it.copy(checked = false) } },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
+        InputCheckBox(
+            title = "Label",
+            checkBoxData = checkBoxDataItemsError,
+            state = InputShellState.ERROR,
+            onItemChange = { checkBoxData ->
+                val index = checkBoxDataItemsError.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                checkBoxDataItemsError[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+            },
+            onClearSelection = { checkBoxDataItemsError.replaceAll { it.copy(checked = false) } },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
+        InputCheckBox(
+            title = "Label",
+            checkBoxData = checkBoxDataItemsDisabled,
+            state = InputShellState.DISABLED,
+            onItemChange = { },
+            onClearSelection = { },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
+        SubTitle("Horizontal")
+        InputCheckBox(
+            title = "Label",
+            checkBoxData = checkBoxDataItemsHorizontal,
+            orientation = Orientation.HORIZONTAL,
+            onItemChange = { checkBoxData ->
+                val index = checkBoxDataItemsHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                checkBoxDataItemsHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+            },
+            onClearSelection = { checkBoxDataItemsHorizontal.replaceAll { it.copy(checked = false) } },
+        )
+    }
+}

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/CheckboxPreview.kt

@@ -5,19 +5,28 @@ import org.hisp.dhis.mobile.ui.designsystem.component.CheckBox
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
 
 @Composable
-internal fun CheckboxPreview(checked: Boolean, enabled: Boolean = true) {
+internal fun CheckboxPreview(
+    checked: Boolean,
+    enabled: Boolean = true,
+    changeOption: (Boolean) -> Unit,
+) {
     CheckBox(
         CheckBoxData("", checked, enabled, null),
-    ) {}
+    ) {
+        changeOption(it)
+    }
 }
 
 @Composable
 internal fun TextCheckboxPreview(
     checked: Boolean,
     enabled: Boolean = true,
     text: String = "Option",
+    changeOption: (Boolean) -> Unit,
 ) {
     CheckBox(
         CheckBoxData("", checked, enabled, text),
-    ) {}
+    ) {
+        changeOption(it)
+    }
 }

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/CheckBox.kt

@@ -12,12 +12,10 @@ import androidx.compose.material3.CheckboxDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
 import org.hisp.dhis.mobile.ui.designsystem.theme.InternalSizeValues
 import org.hisp.dhis.mobile.ui.designsystem.theme.Outline
 import org.hisp.dhis.mobile.ui.designsystem.theme.Ripple
@@ -41,9 +39,6 @@ fun CheckBox(
     modifier: Modifier = Modifier,
     onCheckedChange: ((Boolean) -> Unit),
 ) {
-    var isChecked by remember {
-        mutableStateOf(checkBoxData.checked)
-    }
     val interactionSource =
         if (checkBoxData.enabled) remember { MutableInteractionSource() } else MutableInteractionSource()
     val textColor = if (checkBoxData.enabled) {
@@ -61,8 +56,7 @@ fun CheckBox(
                 indication = null,
                 onClick = {
                     if (checkBoxData.enabled) {
-                        isChecked = !isChecked
-                        onCheckedChange.invoke(isChecked)
+                        onCheckedChange.invoke(!checkBoxData.checked)
                     }
                 },
                 enabled = checkBoxData.enabled,
@@ -71,17 +65,17 @@ fun CheckBox(
     ) {
         CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
             Checkbox(
-                checked = isChecked,
+                checked = checkBoxData.checked,
                 onCheckedChange = {
                     if (checkBoxData.enabled) {
-                        isChecked = it
-                        onCheckedChange.invoke(isChecked)
+                        onCheckedChange.invoke(!checkBoxData.checked)
                     }
                 },
                 interactionSource = interactionSource,
                 enabled = checkBoxData.enabled,
                 modifier = Modifier
-                    .size(InternalSizeValues.Size40),
+                    .size(InternalSizeValues.Size40)
+                    .testTag("CHECK_BOX_${checkBoxData.uid}"),
                 colors = CheckboxDefaults.colors(
                     checkedColor = SurfaceColor.Primary,
                     uncheckedColor = Outline.Dark,