Feature/sort previews (#473)

* chore: Move previews from Android packages to common packages

* feat: Add more previews

Author: ethanbfc

mockzilla-management-ui/mockzilla-desktop/build.gradle.kts

@@ -36,6 +36,7 @@ kotlin {
             implementation(compose.runtime)
             implementation(compose.material3)
             implementation(compose.components.resources)
+            implementation(compose.components.uiToolingPreview)
             implementation(compose.materialIconsExtended)
             implementation(libs.navigation.compose)
 

mockzilla-management-ui/mockzilla-desktop/src/androidMain/kotlin/previews/DeviceConnectionWidgetPreviews.kt

@@ -27,10 +27,12 @@ import com.apadmi.mockzilla.ui.di.utils.getViewModel
 import com.apadmi.mockzilla.ui.engine.connection.DetectedDevice
 import com.apadmi.mockzilla.ui.i18n.LocalStrings
 import com.apadmi.mockzilla.ui.i18n.Strings
+import com.apadmi.mockzilla.ui.ui.common.components.PreviewSurface
 import com.apadmi.mockzilla.ui.ui.common.components.StandardTextTooltip
 import com.apadmi.mockzilla.ui.ui.common.theme.alternatingBackground
 import com.apadmi.mockzilla.ui.ui.common.utils.mockzillaLogoResource
 import com.apadmi.mockzilla.ui.utils.Platform
+import org.jetbrains.compose.ui.tooling.preview.Preview
 
 private fun DetectedDevice.State.toolTipText(strings: Strings) = when (this) {
     DetectedDevice.State.NotYourSimulator -> strings.widgets.deviceConnection.tooltips.notYourSimulator
@@ -52,7 +54,11 @@ fun DeviceConnectionWidget() {
     val viewModel = getViewModel<DeviceConnectionViewModel>()
     val state by viewModel.state.collectAsState()
 
-    DeviceConnectionContent(state, viewModel::onIpAndPortChanged, viewModel::connectToDevice)
+    DeviceConnectionContent(
+        state,
+        viewModel::onIpAndPortChanged,
+        viewModel::connectToDevice
+    )
 }
 
 @Composable
@@ -111,6 +117,32 @@ fun DeviceConnectionContent(
     }
 }
 
+@Preview
+@Composable
+private fun DeviceConnectionWidgetPreview() = PreviewSurface {
+    Box(modifier = Modifier.padding(horizontal = 16.dp)) {
+        DeviceConnectionContent(
+            state = State(
+                ipAndPort = "127.0.0.1:60000",
+                connectionState = State.ConnectionState.Connecting,
+                devices = listOf(
+                    DetectedDevice(
+                        connectionName = "iPhone",
+                        metaData = null,
+                        hostAddress = "127.0.0.1",
+                        hostAddresses = listOf(),
+                        port = 60000,
+                        adbConnection = null,
+                        state = DetectedDevice.State.ReadyToConnect
+                    )
+                ),
+            ),
+            onIpAndPortChanged = {},
+            onTapDevice = {}
+        )
+    }
+}
+
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 private fun DevicesList(

mockzilla-management-ui/mockzilla-desktop/src/commonMain/kotlin/com/apadmi/mockzilla/desktop/ui/deviceconnection/DeviceConnectionWidget.kt

@@ -19,10 +19,13 @@ import com.apadmi.mockzilla.desktop.ui.devicetabs.DeviceTabsViewModel.*
 
 import com.apadmi.mockzilla.desktop.ui.utils.desktopTertiaryPointerClick
 import com.apadmi.mockzilla.ui.di.utils.getViewModel
+import com.apadmi.mockzilla.ui.engine.device.Device
 import com.apadmi.mockzilla.ui.i18n.LocalStrings
 import com.apadmi.mockzilla.ui.i18n.Strings
+import com.apadmi.mockzilla.ui.ui.common.components.PreviewSurface
 import com.apadmi.mockzilla.ui.ui.common.scaffold.HorizontalTab
 import com.apadmi.mockzilla.ui.ui.common.scaffold.HorizontalTabList
+import org.jetbrains.compose.ui.tooling.preview.Preview
 
 import kotlin.collections.plus
 
@@ -109,3 +112,29 @@ fun DeviceTabsWidgetContent(
         )
     }
 }
+
+@Preview
+@Composable
+private fun DeviceTabsWidgetPreview() = PreviewSurface {
+    DeviceTabsWidgetContent(
+        state = State(
+            devices = listOf(
+                State.DeviceTabEntry(
+                    name = "Device 1",
+                    isActive = true,
+                    isConnected = true,
+                    underlyingDevice = Device(ip = "", port = "")
+                ),
+                State.DeviceTabEntry(
+                    name = "Device 2",
+                    isActive = false,
+                    isConnected = false,
+                    underlyingDevice = Device(ip = "", port = "")
+                )
+            )
+        ),
+        onSelect = {},
+        onAddNewDevice = {},
+        onCloseTab = {}
+    )
+}

mockzilla-management-ui/mockzilla-desktop/src/commonMain/kotlin/com/apadmi/mockzilla/desktop/ui/devicetabs/DeviceTabsWidget.kt

@@ -11,6 +11,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.apadmi.mockzilla.desktop.ui.utils.horizontalResizeCursor
 import com.apadmi.mockzilla.desktop.ui.utils.verticalResizeCursor
+import com.apadmi.mockzilla.ui.ui.common.components.PreviewSurface
+import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
 internal fun HorizontalDraggableDivider(
@@ -53,3 +55,33 @@ internal fun VerticalDraggableDivider(
             )
     )
 }
+
+@Preview
+@Composable
+private fun HorizontalDraggableDividerPreview() = PreviewSurface {
+    Box(
+        modifier = Modifier
+            .size(100.dp)
+            .padding(20.dp)
+    ) {
+        HorizontalDraggableDivider(
+            onDrag = {},
+            onDragStopped = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun VerticalDraggableDividerPreview() = PreviewSurface {
+    Box(
+        modifier = Modifier
+            .size(100.dp)
+            .padding(20.dp)
+    ) {
+        VerticalDraggableDivider(
+            onDrag = {},
+            onDragStopped = {}
+        )
+    }
+}

mockzilla-management-ui/mockzilla-desktop/src/commonMain/kotlin/com/apadmi/mockzilla/desktop/ui/scaffold/Dividers.kt

@@ -49,6 +49,7 @@ kotlin {
             implementation(compose.runtime)
             implementation(compose.material3)
             implementation(compose.components.resources)
+            implementation(compose.components.uiToolingPreview)
             implementation(compose.materialIconsExtended)
             implementation(libs.navigation.compose)
 
@@ -127,6 +128,11 @@ kotlin {
     }
 }
 
+dependencies {
+    /* Compose Previews */
+    debugImplementation(compose.uiTooling)
+}
+
 android {
     namespace = "$group.mockzilla.mobile.ui"
     compileSdk = AndroidConfig.targetSdk