Merge pull request #137 from tarkalabs/mohan/component/table_cell

Table cell UI Component
tarkalabs · Nov 16, 2023 · baad287 · baad287
2 parents 135d38d + d9976d6
commit baad287
Show file tree

Hide file tree

Showing 20 changed files with 342 additions and 1 deletion.
diff --git a/tarkaui/build.gradle.kts b/tarkaui/build.gradle.kts
@@ -64,7 +64,7 @@ publishing {
       run {
         groupId = "com.tarkalabs"
         artifactId = getLibraryArtifactId()
-        version = "0.55-alpha"
+        version = "0.56-alpha"
         artifact("$buildDir/outputs/aar/${getLibraryArtifactId()}-release.aar")
       }
     }

diff --git a/...eCell_darkTheme_false_isHeader_false_isTopBorder_false_isBottomBorder_false.png b/...eCell_darkTheme_false_isHeader_false_isTopBorder_false_isBottomBorder_false.png
diff --git a/...leCell_darkTheme_false_isHeader_false_isTopBorder_false_isBottomBorder_true.png b/...leCell_darkTheme_false_isHeader_false_isTopBorder_false_isBottomBorder_true.png
diff --git a/...leCell_darkTheme_false_isHeader_false_isTopBorder_true_isBottomBorder_false.png b/...leCell_darkTheme_false_isHeader_false_isTopBorder_true_isBottomBorder_false.png
diff --git a/...bleCell_darkTheme_false_isHeader_false_isTopBorder_true_isBottomBorder_true.png b/...bleCell_darkTheme_false_isHeader_false_isTopBorder_true_isBottomBorder_true.png
diff --git a/...leCell_darkTheme_false_isHeader_true_isTopBorder_false_isBottomBorder_false.png b/...leCell_darkTheme_false_isHeader_true_isTopBorder_false_isBottomBorder_false.png
diff --git a/...bleCell_darkTheme_false_isHeader_true_isTopBorder_false_isBottomBorder_true.png b/...bleCell_darkTheme_false_isHeader_true_isTopBorder_false_isBottomBorder_true.png
diff --git a/...bleCell_darkTheme_false_isHeader_true_isTopBorder_true_isBottomBorder_false.png b/...bleCell_darkTheme_false_isHeader_true_isTopBorder_true_isBottomBorder_false.png
diff --git a/...ableCell_darkTheme_false_isHeader_true_isTopBorder_true_isBottomBorder_true.png b/...ableCell_darkTheme_false_isHeader_true_isTopBorder_true_isBottomBorder_true.png
diff --git a/...leCell_darkTheme_true_isHeader_false_isTopBorder_false_isBottomBorder_false.png b/...leCell_darkTheme_true_isHeader_false_isTopBorder_false_isBottomBorder_false.png
diff --git a/...bleCell_darkTheme_true_isHeader_false_isTopBorder_false_isBottomBorder_true.png b/...bleCell_darkTheme_true_isHeader_false_isTopBorder_false_isBottomBorder_true.png
diff --git a/...bleCell_darkTheme_true_isHeader_false_isTopBorder_true_isBottomBorder_false.png b/...bleCell_darkTheme_true_isHeader_false_isTopBorder_true_isBottomBorder_false.png
diff --git a/...ableCell_darkTheme_true_isHeader_false_isTopBorder_true_isBottomBorder_true.png b/...ableCell_darkTheme_true_isHeader_false_isTopBorder_true_isBottomBorder_true.png
diff --git a/...bleCell_darkTheme_true_isHeader_true_isTopBorder_false_isBottomBorder_false.png b/...bleCell_darkTheme_true_isHeader_true_isTopBorder_false_isBottomBorder_false.png
diff --git a/...ableCell_darkTheme_true_isHeader_true_isTopBorder_false_isBottomBorder_true.png b/...ableCell_darkTheme_true_isHeader_true_isTopBorder_false_isBottomBorder_true.png
diff --git a/...ableCell_darkTheme_true_isHeader_true_isTopBorder_true_isBottomBorder_false.png b/...ableCell_darkTheme_true_isHeader_true_isTopBorder_true_isBottomBorder_false.png
diff --git a/...TableCell_darkTheme_true_isHeader_true_isTopBorder_true_isBottomBorder_true.png b/...TableCell_darkTheme_true_isHeader_true_isTopBorder_true_isBottomBorder_true.png
diff --git a/tarkaui/src/androidTest/java/com/tarkalabs/uicomponents/TUITableCellTest.kt b/tarkaui/src/androidTest/java/com/tarkalabs/uicomponents/TUITableCellTest.kt
@@ -0,0 +1,32 @@
+package com.tarkalabs.uicomponents
+
+import androidx.compose.ui.test.assertIsDisplayed
+import androidx.compose.ui.test.assertTextEquals
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithTag
+import com.tarkalabs.uicomponents.components.TUITableCell
+import com.tarkalabs.uicomponents.components.TUITableCellTags
+import com.tarkalabs.uicomponents.theme.TUITheme
+import org.junit.Rule
+import org.junit.Test
+
+class TUITableCellTest {
+  @get:Rule val composeTestRule = createComposeRule()
+
+  private val testTags: TUITableCellTags = TUITableCellTags()
+
+  @Test fun tuiTableCellDisplayed() {
+    val cellValue = "Label"
+    composeTestRule.setContent {
+      TUITheme {
+        TUITableCell(
+          cellValue = cellValue,
+          isHeader = true,
+          isTopBorderVisible = true,
+          isBottomBorderVisible = true
+        )
+      }
+    }
+    composeTestRule.onNodeWithTag(testTags.parentTag).assertExists().assertIsDisplayed()
+  }
+}
diff --git a/...src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUITableCellScreenShotTest.kt b/...src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUITableCellScreenShotTest.kt
@@ -0,0 +1,56 @@
+package com.tarkalabs.uicomponents.screenshots
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.tarkalabs.uicomponents.components.TUITableCell
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.junit.runners.Parameterized
+
+@RunWith(Parameterized::class)
+class TUITableCellScreenShotTest(
+  private val testName: String,
+  private val darkTheme: Boolean,
+  private val isHeader: Boolean,
+  private val isTopBorderVisible: Boolean,
+  private val isBottomBorderVisible: Boolean,
+) : ComposeScreenshotComparator() {
+
+  companion object {
+    @JvmStatic
+    @Parameterized.Parameters
+    fun data(): Collection<Array<Any>> {
+      return mutableListOf<Array<Any>>().apply {
+        for (darkTheme in listOf(true, false)) {
+          for (isHeader in listOf(true, false)) {
+            for (isTopBorderVisible in listOf(true, false)) {
+              for (isBottomBorderVisible in listOf(true, false)) {
+                val testName =
+                  "darkTheme_${darkTheme}_isHeader_${isHeader}_isTopBorder_${isTopBorderVisible}_isBottomBorder_${isBottomBorderVisible}"
+                add(
+                  arrayOf(testName, darkTheme, isHeader, isTopBorderVisible, isBottomBorderVisible)
+                )
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @Test fun tableCellWithBottomBorder() =
+    compareScreenshotFor(darkTheme, "TableCell_$testName") {
+      Box(
+        modifier = Modifier.padding(10.dp)
+      ) {
+        TUITableCell(
+          cellValue = "Label",
+          isHeader = isHeader,
+          isTopBorderVisible = isTopBorderVisible,
+          isBottomBorderVisible = isBottomBorderVisible
+        )
+      }
+    }
+}
diff --git a/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUITableCell.kt b/tarkaui/src/main/java/com/tarkalabs/uicomponents/components/TUITableCell.kt
@@ -0,0 +1,253 @@
+package com.tarkalabs.uicomponents.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize.Max
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.tarkalabs.uicomponents.theme.TUITheme
+
+/**
+ * Represents a table cell, this composable function creates the Table Cell with border. It is typically used to create the table.
+ *
+ * Note: If the table cell is used in the Row, need to provide the height modifier add intrinsicSize.MAX and provide the child element modifier add fillMaxHeight()
+ * @param modifier Modifier for the Table cell layout and appearance.
+ * @param cellValue The text value to display in the table cell
+ * @param isHeader Boolean value represents the cell value is header or not.
+ * @param tags Tags used for testing and identifying this Composable.
+ * @param isTopBorderVisible Boolean value which represents the top border is visible or not.
+ * @param isBottomBorderVisible Boolean value which represents the bottom border is visible or not.
+ *
+ */
+
+@Composable fun TUITableCell(
+  modifier: Modifier = Modifier,
+  cellValue: String,
+  isHeader: Boolean,
+  tags: TUITableCellTags = TUITableCellTags(),
+  isTopBorderVisible: Boolean = false,
+  isBottomBorderVisible: Boolean = false,
+) {
+  val borderColor = TUITheme.colors.surfaceVariantHover
+  Row(
+    modifier = modifier
+      .drawBehind {
+        if (isTopBorderVisible) {
+          drawLine(
+            color = borderColor,
+            start = Offset(x = 0f, y = 0f),
+            end = Offset(x = size.width, y = 0f),
+            strokeWidth = Stroke.HairlineWidth
+          )
+        }
+        if (isBottomBorderVisible) {
+          drawLine(
+            color = borderColor,
+            start = Offset(x = 0f, y = size.height),
+            end = Offset(x = size.width, y = size.height),
+            strokeWidth = Stroke.HairlineWidth
+          )
+        }
+      }
+      .testTag(tags.parentTag),
+    horizontalArrangement = Arrangement.Start,
+    verticalAlignment = Alignment.CenterVertically
+  ) {
+    Text(
+      modifier = Modifier
+        .padding(top = 8.dp, bottom = 8.dp)
+        .fillMaxWidth(),
+      style = TUITheme.typography.body7,
+      text = cellValue,
+      color = if (isHeader)
+        TUITheme.colors.utilityDisabledContent
+      else
+        TUITheme.colors.onSurface,
+    )
+  }
+}
+
+data class TUITableCellTags(
+  val parentTag: String = "TUITableCell",
+)
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewTUITableCell() {
+  TUITheme {
+    Box {
+      Column(modifier = Modifier.padding(10.dp)) {
+        Row(modifier = Modifier.height(Max)) {
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = true,
+            isBottomBorderVisible = true,
+            isTopBorderVisible = false
+          )
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = true,
+            isBottomBorderVisible = false,
+            isTopBorderVisible = true
+          )
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = true,
+            isBottomBorderVisible = true,
+            isTopBorderVisible = true
+          )
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = true,
+            isBottomBorderVisible = false,
+            isTopBorderVisible = false
+          )
+        }
+        Row(modifier = Modifier.height(Max)) {
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = false,
+            isBottomBorderVisible = true,
+            isTopBorderVisible = false
+          )
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = false,
+            isBottomBorderVisible = false,
+            isTopBorderVisible = true
+          )
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = false,
+            isBottomBorderVisible = true,
+            isTopBorderVisible = true
+          )
+          TUITableCell(
+            modifier = Modifier
+              .weight(1f)
+              .padding(5.dp)
+              .fillMaxHeight(),
+            cellValue = "Label",
+            isHeader = false,
+            isBottomBorderVisible = false,
+            isTopBorderVisible = false
+          )
+        }
+      }
+    }
+  }
+}
+
+@Preview @Composable
+fun PreviewCombinedTUITableCell() {
+  TUITheme(true) {
+    Column(modifier = Modifier.padding(10.dp)) {
+      Row(
+        modifier = Modifier.height(Max),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
+      ) {
+        TUITableCell(
+          modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight(),
+          cellValue = "",
+          isHeader = true,
+          isBottomBorderVisible = true,
+          isTopBorderVisible = false
+        )
+        TUITableCell(
+          modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight(),
+          cellValue = "Pending to be synced",
+          isHeader = true,
+          isBottomBorderVisible = true,
+          isTopBorderVisible = false
+        )
+        TUITableCell(
+          modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight(),
+          cellValue = "Errored out",
+          isHeader = true,
+          isBottomBorderVisible = true,
+          isTopBorderVisible = false
+        )
+      }
+      Row(
+        modifier = Modifier.height(Max),
+      ) {
+        TUITableCell(
+          modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight(),
+          cellValue = "General",
+          isHeader = false,
+          isBottomBorderVisible = true,
+          isTopBorderVisible = false
+        )
+        TUITableCell(
+          modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight(),
+          cellValue = "3",
+          isHeader = false,
+          isBottomBorderVisible = true,
+          isTopBorderVisible = false
+        )
+        TUITableCell(
+          modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight(),
+          cellValue = "2",
+          isHeader = false,
+          isBottomBorderVisible = true,
+          isTopBorderVisible = false
+        )
+      }
+    }
+  }
+}