Split ConfigureRoomView into multiple files

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/Avatar.kt

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.createroom.impl.components
+
+import android.net.Uri
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.AddAPhoto
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.painter.ColorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.preview.debugPlaceholderBackground
+import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.designsystem.theme.components.Icon
+
+@Composable
+fun Avatar(
+    avatarUri: Uri?,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
+) {
+    val commonModifier = modifier
+        .size(70.dp)
+        .clip(CircleShape)
+        .clickable(onClick = onClick)
+
+    if (avatarUri != null) {
+        val context = LocalContext.current
+        val model = ImageRequest.Builder(context)
+            .data(avatarUri)
+            .build()
+        AsyncImage(
+            modifier = commonModifier,
+            model = model,
+            placeholder = debugPlaceholderBackground(ColorPainter(MaterialTheme.colorScheme.surfaceVariant)),
+            contentScale = ContentScale.Crop,
+            contentDescription = null,
+        )
+    } else {
+        Box(modifier = commonModifier.background(LocalColors.current.quinary)) {
+            Icon(
+                imageVector = Icons.Outlined.AddAPhoto,
+                contentDescription = "",
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(40.dp),
+                tint = MaterialTheme.colorScheme.secondary,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AvatarLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun AvatarDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Row {
+        Avatar(null)
+        Avatar(Uri.EMPTY)
+    }
+}

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/LabelledTextField.kt

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.createroom.impl.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.features.createroom.impl.R
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TextField
+
+@Composable
+fun LabelledTextField(
+    label: String,
+    value: String,
+    modifier: Modifier = Modifier,
+    placeholder: String = "",
+    maxLines: Int = 1,
+    onValueChange: (String) -> Unit = {},
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Text(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            text = label
+        )
+
+        TextField(
+            modifier = Modifier.fillMaxWidth(),
+            value = value,
+            placeholder = { Text(placeholder) },
+            onValueChange = onValueChange,
+            maxLines = maxLines,
+        )
+    }
+}
+
+@Preview
+@Composable
+fun LabelledTextFieldLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun LabelledTextFieldDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        LabelledTextField(
+            label = stringResource(R.string.screen_create_room_room_name_label),
+            value = "",
+            placeholder = stringResource(R.string.screen_create_room_room_name_placeholder),
+        )
+        LabelledTextField(
+            label = stringResource(R.string.screen_create_room_room_name_label),
+            value = "a room name",
+            placeholder = stringResource(R.string.screen_create_room_room_name_placeholder),
+        )
+    }
+}

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/RoomPrivacyOption.kt

@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.createroom.impl.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.element.android.features.createroom.impl.configureroom.RoomPrivacyItem
+import io.element.android.features.createroom.impl.configureroom.roomPrivacyItems
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.RadioButton
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Composable
+fun RoomPrivacyOption(
+    roomPrivacyItem: RoomPrivacyItem,
+    modifier: Modifier = Modifier,
+    isSelected: Boolean = false,
+    onOptionSelected: (RoomPrivacyItem) -> Unit = {},
+) {
+    Row(
+        modifier
+            .fillMaxWidth()
+            .selectable(
+                selected = isSelected,
+                onClick = { onOptionSelected(roomPrivacyItem) },
+                role = Role.RadioButton,
+            )
+            .padding(8.dp),
+    ) {
+        Icon(
+            modifier = Modifier.padding(horizontal = 8.dp),
+            imageVector = roomPrivacyItem.icon,
+            contentDescription = "",
+            tint = MaterialTheme.colorScheme.secondary,
+        )
+
+        Column(
+            Modifier
+                .weight(1f)
+                .padding(horizontal = 8.dp)
+        ) {
+            Text(
+                text = roomPrivacyItem.title,
+                fontSize = 16.sp,
+                color = MaterialTheme.colorScheme.primary,
+            )
+            Spacer(Modifier.size(3.dp))
+            Text(
+                text = roomPrivacyItem.description,
+                fontSize = 12.sp,
+                lineHeight = 17.sp,
+                color = MaterialTheme.colorScheme.tertiary,
+            )
+        }
+
+        RadioButton(
+            modifier = Modifier
+                .align(Alignment.CenterVertically)
+                .size(48.dp),
+            selected = isSelected,
+            onClick = null // null recommended for accessibility with screenreaders
+        )
+    }
+}
+
+@Preview
+@Composable
+fun RoomPrivacyOptionLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun RoomPrivacyOptionDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    val aRoomPrivacyItem = roomPrivacyItems().first()
+    Column {
+        RoomPrivacyOption(
+            roomPrivacyItem = aRoomPrivacyItem,
+            isSelected = true,
+        )
+        RoomPrivacyOption(
+            roomPrivacyItem = aRoomPrivacyItem,
+            isSelected = false,
+        )
+    }
+}

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt

@@ -14,61 +14,43 @@
  * limitations under the License.
  */
 
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package io.element.android.features.createroom.impl.configureroom
 
 import android.net.Uri
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.selection.selectable
 import androidx.compose.foundation.selection.selectableGroup
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.AddAPhoto
-import androidx.compose.material.icons.outlined.Lock
-import androidx.compose.material.icons.outlined.Public
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import coil.compose.AsyncImage
-import coil.request.ImageRequest
 import io.element.android.features.createroom.impl.R
+import io.element.android.features.createroom.impl.components.Avatar
+import io.element.android.features.createroom.impl.components.LabelledTextField
+import io.element.android.features.createroom.impl.components.RoomPrivacyOption
 import io.element.android.features.userlist.api.SelectedUsersList
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.CenterAlignedTopAppBar
-import io.element.android.libraries.designsystem.theme.components.Icon
-import io.element.android.libraries.designsystem.theme.components.RadioButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
-import io.element.android.libraries.designsystem.theme.components.TextField
 import io.element.android.libraries.ui.strings.R as StringR
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ConfigureRoomView(
     state: ConfigureRoomState,
@@ -117,7 +99,6 @@ fun ConfigureRoomView(
     }
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ConfigureRoomToolbar(
     isNextActionEnabled: Boolean,
@@ -177,41 +158,6 @@ fun RoomNameWithAvatar(
     }
 }
 
-@Composable
-fun Avatar(
-    avatarUri: Uri?,
-    modifier: Modifier = Modifier,
-    onClick: () -> Unit = {},
-) {
-    val commonModifier = modifier
-        .size(70.dp)
-        .clip(CircleShape)
-        .clickable(onClick = onClick)
-
-    if (avatarUri != null) {
-        val context = LocalContext.current
-        val model = ImageRequest.Builder(context)
-            .data(avatarUri)
-            .build()
-        AsyncImage(
-            modifier = commonModifier,
-            model = model,
-            contentDescription = null,
-        )
-    } else {
-        Box(modifier = commonModifier.background(LocalColors.current.quinary)) {
-            Icon(
-                imageVector = Icons.Outlined.AddAPhoto,
-                contentDescription = "",
-                modifier = Modifier
-                    .align(Alignment.Center)
-                    .size(40.dp),
-                tint = MaterialTheme.colorScheme.secondary,
-            )
-        }
-    }
-}
-
 @Composable
 fun RoomTopic(
     topic: String,
@@ -228,35 +174,13 @@ fun RoomTopic(
     )
 }
 
-data class RoomPrivacyItem(
-    val privacy: RoomPrivacy,
-    val icon: ImageVector,
-    val title: String,
-    val description: String,
-)
-
 @Composable
 fun RoomPrivacyOptions(
     selected: RoomPrivacy?,
     modifier: Modifier = Modifier,
     onOptionSelected: (RoomPrivacyItem) -> Unit = {},
 ) {
-    val items = RoomPrivacy.values().map {
-        when (it) {
-            RoomPrivacy.Public -> RoomPrivacyItem(
-                privacy = it,
-                icon = Icons.Outlined.Lock,
-                title = stringResource(R.string.screen_create_room_private_option_title),
-                description = stringResource(R.string.screen_create_room_private_option_description),
-            )
-            RoomPrivacy.Private -> RoomPrivacyItem(
-                privacy = it,
-                icon = Icons.Outlined.Public,
-                title = stringResource(R.string.screen_create_room_public_option_title),
-                description = stringResource(R.string.screen_create_room_public_option_description),
-            )
-        }
-    }
+    val items = roomPrivacyItems()
     Column(modifier = modifier.selectableGroup()) {
         items.forEach { item ->
             RoomPrivacyOption(
@@ -268,88 +192,6 @@ fun RoomPrivacyOptions(
     }
 }
 
-@Composable
-fun RoomPrivacyOption(
-    roomPrivacyItem: RoomPrivacyItem,
-    modifier: Modifier = Modifier,
-    isSelected: Boolean = false,
-    onOptionSelected: (RoomPrivacyItem) -> Unit = {},
-) {
-    Row(
-        modifier
-            .fillMaxWidth()
-            .selectable(
-                selected = isSelected,
-                onClick = { onOptionSelected(roomPrivacyItem) },
-                role = Role.RadioButton,
-            )
-            .padding(8.dp),
-    ) {
-        Icon(
-            modifier = Modifier.padding(horizontal = 8.dp),
-            imageVector = roomPrivacyItem.icon,
-            contentDescription = "",
-            tint = MaterialTheme.colorScheme.secondary,
-        )
-
-        Column(
-            Modifier
-                .weight(1f)
-                .padding(horizontal = 8.dp)
-        ) {
-            Text(
-                text = roomPrivacyItem.title,
-                fontSize = 16.sp,
-                color = MaterialTheme.colorScheme.primary,
-            )
-            Spacer(Modifier.size(3.dp))
-            Text(
-                text = roomPrivacyItem.description,
-                fontSize = 12.sp,
-                lineHeight = 17.sp,
-                color = MaterialTheme.colorScheme.tertiary,
-            )
-        }
-
-        RadioButton(
-            modifier = Modifier
-                .align(Alignment.CenterVertically)
-                .size(48.dp),
-            selected = isSelected,
-            onClick = null // null recommended for accessibility with screenreaders
-        )
-    }
-}
-
-// Move this composable to design module if we want to reuse it in other screens
-@Composable
-fun LabelledTextField(
-    label: String,
-    value: String,
-    modifier: Modifier = Modifier,
-    placeholder: String = "",
-    maxLines: Int = 1,
-    onValueChange: (String) -> Unit,
-) {
-    Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-    ) {
-        Text(
-            modifier = Modifier.padding(horizontal = 16.dp),
-            text = label
-        )
-
-        TextField(
-            modifier = Modifier.fillMaxWidth(),
-            value = value,
-            placeholder = { Text(placeholder) },
-            onValueChange = onValueChange,
-            maxLines = maxLines,
-        )
-    }
-}
-
 @Preview
 @Composable
 fun ConfigureRoomViewLightPreview(@PreviewParameter(ConfigureRoomStateProvider::class) state: ConfigureRoomState) =

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/RoomPrivacyItem.kt

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.createroom.impl.configureroom
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Lock
+import androidx.compose.material.icons.outlined.Public
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import io.element.android.features.createroom.impl.R
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
+
+data class RoomPrivacyItem(
+    val privacy: RoomPrivacy,
+    val icon: ImageVector,
+    val title: String,
+    val description: String,
+)
+
+@Composable
+fun roomPrivacyItems(): ImmutableList<RoomPrivacyItem> {
+    return RoomPrivacy.values()
+        .map {
+            when (it) {
+                RoomPrivacy.Public -> RoomPrivacyItem(
+                    privacy = it,
+                    icon = Icons.Outlined.Lock,
+                    title = stringResource(R.string.screen_create_room_private_option_title),
+                    description = stringResource(R.string.screen_create_room_private_option_description),
+                )
+                RoomPrivacy.Private -> RoomPrivacyItem(
+                    privacy = it,
+                    icon = Icons.Outlined.Public,
+                    title = stringResource(R.string.screen_create_room_public_option_title),
+                    description = stringResource(R.string.screen_create_room_public_option_description),
+                )
+            }
+        }
+        .toImmutableList()
+}