From e98f309805b76c59bb6d1ce642960b358c1cf163 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sat, 18 Jan 2025 23:01:04 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20TextField=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../yourssu/handy/demo/textfield/TextField.kt | 185 ++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt new file mode 100644 index 00000000..d48fa4a3 --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt @@ -0,0 +1,185 @@ +package com.yourssu.handy.demo.textfield + +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsFocusedAsState +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.SolidColor +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.Icon +import com.yourssu.handy.compose.foundation.HandyTypography +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.filled.Cancel +import com.yourssu.handy.compose.Text as Text1 + +@Composable +fun TextField( + value: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + textLabel: String? = null, + helperText: String? = null, + placeholder: String? = null, + trailingIcon: ImageVector? = null, + enabled: Boolean = true, + isError: Boolean = false, + isSingleLine: Boolean = true, +) { + val interactionSource = remember { MutableInteractionSource() } + val isFocused = interactionSource.collectIsFocusedAsState().value + + val borderColor = when { + !enabled -> HandyTheme.colors.bgBasicLight + isError -> HandyTheme.colors.lineStatusNegative + isFocused -> HandyTheme.colors.lineStatusPositive + else -> HandyTheme.colors.bgBasicLight + } + + val cursorColor = when { + isError && isFocused -> HandyTheme.colors.lineStatusNegative + isFocused -> HandyTheme.colors.lineStatusPositive + else -> HandyTheme.colors.textBasicPrimary + } + + val textColor = when { + !enabled -> HandyTheme.colors.textBasicDisabled + else -> HandyTheme.colors.textBasicPrimary + } + + val placeholderTextColor = when { + !enabled -> HandyTheme.colors.textBasicDisabled + else -> HandyTheme.colors.textBasicTertiary + } + + val helperTextColor = + if (isError) HandyTheme.colors.lineStatusNegative else HandyTheme.colors.textBasicTertiary + + Column( + modifier = modifier + ) { + textLabel?.let { + Text1( + text = it, + style = HandyTypography.B5Rg12, + color = HandyTheme.colors.textBasicTertiary, + ) + } + + Spacer(modifier = Modifier.height(4.dp)) + + Row( + modifier = Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(12.dp)) + .background(HandyTheme.colors.bgBasicLight) + .border(1.dp, borderColor, RoundedCornerShape(12.dp)) + .padding(start = 16.dp, end = 12.dp, top = 12.dp, bottom = 12.dp) + ) { + BasicTextField( + value = value, + onValueChange = onValueChange, + modifier = Modifier + .weight(1f) + .fillMaxWidth(), + textStyle = HandyTypography.B1Rg16.toTextStyle().copy(color = textColor), + enabled = enabled, + singleLine = isSingleLine, + keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text), + interactionSource = interactionSource, + cursorBrush = SolidColor(cursorColor), + decorationBox = { innerTextField -> + if (value.isEmpty() && placeholder != null) { + Text1( + text = placeholder, + style = HandyTypography.B1Rg16, + color = placeholderTextColor + ) + } + innerTextField() + } + ) + + Spacer(modifier = Modifier.width(12.dp)) + + trailingIcon?.let { + Icon( + imageVector = trailingIcon, + contentDescription = null, + tint = HandyTheme.colors.iconBasicTertiary, + ) + } + } + + Spacer(modifier = Modifier.height(4.dp)) + + helperText?.let { + Text1( + text = it, + style = HandyTypography.B5Rg12, + color = helperTextColor, + ) + } + } +} + + +@Preview +@Composable +fun TextFieldPreview() { + HandyTheme { + Column( + modifier = Modifier.fillMaxSize(), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } + TextField( + value = text, + textLabel = "Label", + helperText = "Helper Text", + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + onValueChange = onValueChange + ) + + TextField( + value = text, + textLabel = "Label", + helperText = "Helper Text", + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + isError = true, + onValueChange = onValueChange + ) + + TextField( + value = text, + textLabel = "Label", + helperText = "Helper Text", + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + enabled = false, + onValueChange = onValueChange + ) + } + } +} \ No newline at end of file From ee30409bd38e4901f07848fad00c8e32796ac86d Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sat, 18 Jan 2025 23:19:46 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20TextField,=20OutlinedTextField=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handy/demo/textfield/OutlinedTextField.kt | 157 ++++++++++++++++++ .../yourssu/handy/demo/textfield/TextField.kt | 103 ++---------- 2 files changed, 175 insertions(+), 85 deletions(-) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt new file mode 100644 index 00000000..420de8a5 --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt @@ -0,0 +1,157 @@ +package com.yourssu.handy.demo.textfield + +import android.util.Log +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsFocusedAsState +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.SolidColor +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.Icon +import com.yourssu.handy.compose.Text +import com.yourssu.handy.compose.foundation.HandyTypography +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.filled.Cancel + +@Composable +fun OutlinedTextField( + value: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + placeholder: String? = null, + trailingIcon: ImageVector? = null, + enabled: Boolean = true, + isError: Boolean = false, + isSingleLine: Boolean = true, + onClickTrailingIcon: () -> Unit = {} +) { + val interactionSource = remember { MutableInteractionSource() } + val isFocused = interactionSource.collectIsFocusedAsState().value + + val borderColor = when { + !enabled -> HandyTheme.colors.bgBasicLight + isError -> HandyTheme.colors.lineStatusNegative + isFocused -> HandyTheme.colors.lineStatusPositive + else -> HandyTheme.colors.bgBasicLight + } + + val cursorColor = when { + isError && isFocused -> HandyTheme.colors.lineStatusNegative + isFocused -> HandyTheme.colors.lineStatusPositive + else -> HandyTheme.colors.textBasicPrimary + } + + val textColor = when { + !enabled -> HandyTheme.colors.textBasicDisabled + else -> HandyTheme.colors.textBasicPrimary + } + + val placeholderTextColor = when { + !enabled -> HandyTheme.colors.textBasicDisabled + else -> HandyTheme.colors.textBasicTertiary + } + + Row( + modifier = modifier + .fillMaxWidth() + .clip(RoundedCornerShape(12.dp)) + .background(HandyTheme.colors.bgBasicLight) + .border(1.dp, borderColor, RoundedCornerShape(12.dp)) + .padding(start = 16.dp, end = 12.dp, top = 12.dp, bottom = 12.dp) + ) { + BasicTextField( + value = value, + onValueChange = onValueChange, + modifier = Modifier + .weight(1f) + .fillMaxWidth(), + textStyle = HandyTypography.B1Rg16.toTextStyle().copy(color = textColor), + enabled = enabled, + singleLine = isSingleLine, + keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text), + interactionSource = interactionSource, + cursorBrush = SolidColor(cursorColor), + decorationBox = { innerTextField -> + if (value.isEmpty() && placeholder != null) { + Text( + text = placeholder, + style = HandyTypography.B1Rg16, + color = placeholderTextColor + ) + } + innerTextField() + } + ) + + Spacer(modifier = Modifier.width(12.dp)) + + trailingIcon?.let { + Icon( + imageVector = trailingIcon, + contentDescription = null, + tint = HandyTheme.colors.iconBasicTertiary, + modifier = Modifier.clickable( + indication = null, + interactionSource = interactionSource, + onClick = onClickTrailingIcon + ) + ) + } + } +} + +@Preview +@Composable +fun OutlinedTextFieldPreview() { + HandyTheme { + Column( + modifier = Modifier.wrapContentSize().padding(20.dp), + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } + OutlinedTextField( + value = text, + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + onValueChange = onValueChange, + ) + + OutlinedTextField( + value = text, + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + isError = true, + onValueChange = onValueChange, + ) + + OutlinedTextField( + value = text, + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + enabled = false, + onValueChange = onValueChange, + ) + } + } +} \ No newline at end of file diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt index d48fa4a3..be6c84fe 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt @@ -1,36 +1,23 @@ package com.yourssu.handy.demo.textfield -import androidx.compose.foundation.background -import androidx.compose.foundation.border -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.interaction.collectIsFocusedAsState import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.text.BasicTextField -import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme -import com.yourssu.handy.compose.Icon +import com.yourssu.handy.compose.Text import com.yourssu.handy.compose.foundation.HandyTypography import com.yourssu.handy.compose.icons.HandyIcons import com.yourssu.handy.compose.icons.filled.Cancel -import com.yourssu.handy.compose.Text as Text1 @Composable fun TextField( @@ -44,41 +31,19 @@ fun TextField( enabled: Boolean = true, isError: Boolean = false, isSingleLine: Boolean = true, + onClickTrailingIcon: () -> Unit = {} ) { - val interactionSource = remember { MutableInteractionSource() } - val isFocused = interactionSource.collectIsFocusedAsState().value - val borderColor = when { - !enabled -> HandyTheme.colors.bgBasicLight + val helperTextColor = when { isError -> HandyTheme.colors.lineStatusNegative - isFocused -> HandyTheme.colors.lineStatusPositive - else -> HandyTheme.colors.bgBasicLight - } - - val cursorColor = when { - isError && isFocused -> HandyTheme.colors.lineStatusNegative - isFocused -> HandyTheme.colors.lineStatusPositive - else -> HandyTheme.colors.textBasicPrimary - } - - val textColor = when { - !enabled -> HandyTheme.colors.textBasicDisabled - else -> HandyTheme.colors.textBasicPrimary - } - - val placeholderTextColor = when { - !enabled -> HandyTheme.colors.textBasicDisabled else -> HandyTheme.colors.textBasicTertiary } - val helperTextColor = - if (isError) HandyTheme.colors.lineStatusNegative else HandyTheme.colors.textBasicTertiary - Column( modifier = modifier ) { textLabel?.let { - Text1( + Text( text = it, style = HandyTypography.B5Rg12, color = HandyTheme.colors.textBasicTertiary, @@ -87,53 +52,21 @@ fun TextField( Spacer(modifier = Modifier.height(4.dp)) - Row( - modifier = Modifier - .fillMaxWidth() - .clip(RoundedCornerShape(12.dp)) - .background(HandyTheme.colors.bgBasicLight) - .border(1.dp, borderColor, RoundedCornerShape(12.dp)) - .padding(start = 16.dp, end = 12.dp, top = 12.dp, bottom = 12.dp) - ) { - BasicTextField( - value = value, - onValueChange = onValueChange, - modifier = Modifier - .weight(1f) - .fillMaxWidth(), - textStyle = HandyTypography.B1Rg16.toTextStyle().copy(color = textColor), - enabled = enabled, - singleLine = isSingleLine, - keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text), - interactionSource = interactionSource, - cursorBrush = SolidColor(cursorColor), - decorationBox = { innerTextField -> - if (value.isEmpty() && placeholder != null) { - Text1( - text = placeholder, - style = HandyTypography.B1Rg16, - color = placeholderTextColor - ) - } - innerTextField() - } - ) - - Spacer(modifier = Modifier.width(12.dp)) - - trailingIcon?.let { - Icon( - imageVector = trailingIcon, - contentDescription = null, - tint = HandyTheme.colors.iconBasicTertiary, - ) - } - } + OutlinedTextField( + value = value, + onValueChange = onValueChange, + placeholder = placeholder, + trailingIcon = trailingIcon, + enabled = enabled, + isError = isError, + isSingleLine = isSingleLine, + onClickTrailingIcon = onClickTrailingIcon + ) Spacer(modifier = Modifier.height(4.dp)) helperText?.let { - Text1( + Text( text = it, style = HandyTypography.B5Rg12, color = helperTextColor, @@ -148,8 +81,8 @@ fun TextField( fun TextFieldPreview() { HandyTheme { Column( - modifier = Modifier.fillMaxSize(), - verticalArrangement = Arrangement.spacedBy(16.dp) + modifier = Modifier.wrapContentSize().padding(20.dp), + verticalArrangement = Arrangement.spacedBy(20.dp) ) { val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } TextField( From aecec9f669051a3db95513bc5fec9fd1bd7d8331 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sun, 19 Jan 2025 00:22:01 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20TextArea=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handy/demo/textfield/OutlinedTextField.kt | 11 ++- .../yourssu/handy/demo/textfield/TextArea.kt | 84 +++++++++++++++++++ 2 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt index 420de8a5..4c02257a 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt @@ -104,8 +104,6 @@ fun OutlinedTextField( } ) - Spacer(modifier = Modifier.width(12.dp)) - trailingIcon?.let { Icon( imageVector = trailingIcon, @@ -115,7 +113,7 @@ fun OutlinedTextField( indication = null, interactionSource = interactionSource, onClick = onClickTrailingIcon - ) + ).padding(start = 12.dp) ) } } @@ -152,6 +150,13 @@ fun OutlinedTextFieldPreview() { enabled = false, onValueChange = onValueChange, ) + + OutlinedTextField( + value = text, + placeholder = "placeholder", + enabled = false, + onValueChange = onValueChange, + ) } } } \ No newline at end of file diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt new file mode 100644 index 00000000..d04f2f40 --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt @@ -0,0 +1,84 @@ +package com.yourssu.handy.demo.textfield + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.Text +import com.yourssu.handy.compose.foundation.HandyTypography + +@Composable +fun TextArea( + value: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + placeholder: String? = null, + helperText: String? = null, + maxCharacters: Int = Int.MAX_VALUE, + enabled: Boolean = true, + isError: Boolean = false, +) { + val textHelperColor = when { + isError -> HandyTheme.colors.lineStatusNegative + else -> HandyTheme.colors.textBasicTertiary + } + + Column( + modifier = modifier + ) { + OutlinedTextField( + value = value, + onValueChange = { + onValueChange(it) + }, + placeholder = placeholder, + enabled = enabled, + isError = isError, + isSingleLine = false, + modifier = Modifier + ) + + helperText?.let { + Text( + text = it, + style = HandyTypography.B5Rg12, + color = textHelperColor, + modifier = Modifier.padding(top = 4.dp) + ) + } + } +} + +@Preview +@Composable +fun TextAreaPreview() { + HandyTheme { + Column( + modifier = Modifier.wrapContentSize().padding(20.dp), + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + val (text, onValueChange) = remember { + androidx.compose.runtime.mutableStateOf( + "inputText inputText asdaasdas inputText inputText asdaasdas inputText inputText asdaasdas" + ) + } + + TextArea( + value = text, + onValueChange = onValueChange, + placeholder = "Placeholder", + helperText = "Helper Text", + maxCharacters = 20, + enabled = true, + ) + } + } +} From f60d87a2e65a60204fc0f048b22f76ab288da415 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sun, 19 Jan 2025 19:25:42 +0900 Subject: [PATCH 4/8] =?UTF-8?q?chore:=20OutlinedTextField=20color=20?= =?UTF-8?q?=EA=B0=92=20=EA=B4=80=EB=A6=AC=20=ED=95=A8=EC=88=98=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handy/demo/textfield/OutlinedTextField.kt | 58 ++++++++++--------- .../yourssu/handy/demo/textfield/TextArea.kt | 2 - 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt index 4c02257a..beeb11ef 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt @@ -1,6 +1,5 @@ package com.yourssu.handy.demo.textfield -import android.util.Log import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable @@ -9,11 +8,8 @@ import androidx.compose.foundation.interaction.collectIsFocusedAsState import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField @@ -22,6 +18,7 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.input.KeyboardType @@ -49,28 +46,7 @@ fun OutlinedTextField( val interactionSource = remember { MutableInteractionSource() } val isFocused = interactionSource.collectIsFocusedAsState().value - val borderColor = when { - !enabled -> HandyTheme.colors.bgBasicLight - isError -> HandyTheme.colors.lineStatusNegative - isFocused -> HandyTheme.colors.lineStatusPositive - else -> HandyTheme.colors.bgBasicLight - } - - val cursorColor = when { - isError && isFocused -> HandyTheme.colors.lineStatusNegative - isFocused -> HandyTheme.colors.lineStatusPositive - else -> HandyTheme.colors.textBasicPrimary - } - - val textColor = when { - !enabled -> HandyTheme.colors.textBasicDisabled - else -> HandyTheme.colors.textBasicPrimary - } - - val placeholderTextColor = when { - !enabled -> HandyTheme.colors.textBasicDisabled - else -> HandyTheme.colors.textBasicTertiary - } + val (borderColor, cursorColor, textColor, placeholderTextColor) = getTextFieldStyle(enabled, isError, isFocused) Row( modifier = modifier @@ -119,6 +95,36 @@ fun OutlinedTextField( } } +data class TextFieldStyle( + val borderColor: Color, + val cursorColor: Color, + val textColor: Color, + val placeholderTextColor: Color +) + +@Composable +fun getTextFieldStyle( + enabled: Boolean, + isError: Boolean, + isFocused: Boolean +): TextFieldStyle { + return TextFieldStyle( + borderColor = when { + !enabled -> HandyTheme.colors.bgBasicLight + isError -> HandyTheme.colors.lineStatusNegative + isFocused -> HandyTheme.colors.lineStatusPositive + else -> HandyTheme.colors.bgBasicLight + }, + cursorColor = when { + isError && isFocused -> HandyTheme.colors.lineStatusNegative + isFocused -> HandyTheme.colors.lineStatusPositive + else -> HandyTheme.colors.textBasicPrimary + }, + textColor = if (!enabled) HandyTheme.colors.textBasicDisabled else HandyTheme.colors.textBasicPrimary, + placeholderTextColor = if (!enabled) HandyTheme.colors.textBasicDisabled else HandyTheme.colors.textBasicTertiary + ) +} + @Preview @Composable fun OutlinedTextFieldPreview() { diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt index d04f2f40..a3573124 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt @@ -4,8 +4,6 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize -import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.verticalScroll import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier From 92d48b5590d986afa60f7b745d41366ed371d290 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sun, 19 Jan 2025 19:29:22 +0900 Subject: [PATCH 5/8] =?UTF-8?q?move:=20=ED=8C=A8=ED=82=A4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../compose}/textfield/OutlinedTextField.kt | 25 +++++++++++++------ .../handy/compose}/textfield/TextArea.kt | 2 +- .../handy/compose}/textfield/TextField.kt | 2 +- 3 files changed, 19 insertions(+), 10 deletions(-) rename {app/src/main/kotlin/com/yourssu/handy/demo => compose/src/main/kotlin/com/yourssu/handy/compose}/textfield/OutlinedTextField.kt (91%) rename {app/src/main/kotlin/com/yourssu/handy/demo => compose/src/main/kotlin/com/yourssu/handy/compose}/textfield/TextArea.kt (98%) rename {app/src/main/kotlin/com/yourssu/handy/demo => compose/src/main/kotlin/com/yourssu/handy/compose}/textfield/TextField.kt (98%) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/OutlinedTextField.kt similarity index 91% rename from app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt rename to compose/src/main/kotlin/com/yourssu/handy/compose/textfield/OutlinedTextField.kt index beeb11ef..a6790a38 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/OutlinedTextField.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/OutlinedTextField.kt @@ -1,4 +1,4 @@ -package com.yourssu.handy.demo.textfield +package com.yourssu.handy.compose.textfield import androidx.compose.foundation.background import androidx.compose.foundation.border @@ -16,6 +16,7 @@ import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.runtime.Composable import androidx.compose.runtime.remember + import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color @@ -46,7 +47,11 @@ fun OutlinedTextField( val interactionSource = remember { MutableInteractionSource() } val isFocused = interactionSource.collectIsFocusedAsState().value - val (borderColor, cursorColor, textColor, placeholderTextColor) = getTextFieldStyle(enabled, isError, isFocused) + val (borderColor, cursorColor, textColor, placeholderTextColor) = getTextFieldStyle( + enabled, + isError, + isFocused + ) Row( modifier = modifier @@ -85,11 +90,13 @@ fun OutlinedTextField( imageVector = trailingIcon, contentDescription = null, tint = HandyTheme.colors.iconBasicTertiary, - modifier = Modifier.clickable( - indication = null, - interactionSource = interactionSource, - onClick = onClickTrailingIcon - ).padding(start = 12.dp) + modifier = Modifier + .clickable( + indication = null, + interactionSource = interactionSource, + onClick = onClickTrailingIcon + ) + .padding(start = 12.dp) ) } } @@ -130,7 +137,9 @@ fun getTextFieldStyle( fun OutlinedTextFieldPreview() { HandyTheme { Column( - modifier = Modifier.wrapContentSize().padding(20.dp), + modifier = Modifier + .wrapContentSize() + .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextArea.kt similarity index 98% rename from app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt rename to compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextArea.kt index a3573124..cc9e2518 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextArea.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextArea.kt @@ -1,4 +1,4 @@ -package com.yourssu.handy.demo.textfield +package com.yourssu.handy.compose.textfield import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt similarity index 98% rename from app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt rename to compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt index be6c84fe..49a58b43 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/textfield/TextField.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt @@ -1,4 +1,4 @@ -package com.yourssu.handy.demo.textfield +package com.yourssu.handy.compose.textfield import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column From 2f7624d98d2532da325de54125cdb568c34e7977 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sun, 19 Jan 2025 19:30:38 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20TextFieldPreview=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../yourssu/handy/demo/TextFieldPreview.kt | 56 +++++++++++++++++++ .../handy/compose/textfield/TextField.kt | 42 -------------- 2 files changed, 56 insertions(+), 42 deletions(-) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt new file mode 100644 index 00000000..bf2c39f1 --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt @@ -0,0 +1,56 @@ +package com.yourssu.handy.demo + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.filled.Cancel +import com.yourssu.handy.compose.textfield.TextField + +@Preview +@Composable +fun TextFieldPreview() { + HandyTheme { + Column( + modifier = Modifier.wrapContentSize().padding(20.dp), + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } + TextField( + value = text, + textLabel = "Label", + helperText = "Helper Text", + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + onValueChange = onValueChange + ) + + TextField( + value = text, + textLabel = "Label", + helperText = "Helper Text", + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + isError = true, + onValueChange = onValueChange + ) + + TextField( + value = text, + textLabel = "Label", + helperText = "Helper Text", + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + enabled = false, + onValueChange = onValueChange + ) + } + } +} \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt index 49a58b43..cb23ed00 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt @@ -73,46 +73,4 @@ fun TextField( ) } } -} - - -@Preview -@Composable -fun TextFieldPreview() { - HandyTheme { - Column( - modifier = Modifier.wrapContentSize().padding(20.dp), - verticalArrangement = Arrangement.spacedBy(20.dp) - ) { - val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } - TextField( - value = text, - textLabel = "Label", - helperText = "Helper Text", - placeholder = "placeholder", - trailingIcon = HandyIcons.Filled.Cancel, - onValueChange = onValueChange - ) - - TextField( - value = text, - textLabel = "Label", - helperText = "Helper Text", - placeholder = "placeholder", - trailingIcon = HandyIcons.Filled.Cancel, - isError = true, - onValueChange = onValueChange - ) - - TextField( - value = text, - textLabel = "Label", - helperText = "Helper Text", - placeholder = "placeholder", - trailingIcon = HandyIcons.Filled.Cancel, - enabled = false, - onValueChange = onValueChange - ) - } - } } \ No newline at end of file From 794b368b00814a22c4647624c5d48fcf75e841f0 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sun, 19 Jan 2025 19:33:21 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20OutlinedTextFieldPreview=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../yourssu/handy/demo/OutlinedTextField.kt | 59 +++++++++++++++++++ .../compose/textfield/OutlinedTextField.kt | 51 ---------------- .../handy/compose/textfield/TextField.kt | 9 --- 3 files changed, 59 insertions(+), 60 deletions(-) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextField.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextField.kt b/app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextField.kt new file mode 100644 index 00000000..77abb153 --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextField.kt @@ -0,0 +1,59 @@ +package com.yourssu.handy.demo + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.filled.Cancel +import com.yourssu.handy.compose.textfield.OutlinedTextField + +@Preview +@Composable +fun OutlinedTextFieldPreview() { + HandyTheme { + Column( + modifier = Modifier + .wrapContentSize() + .padding(20.dp), + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } + OutlinedTextField( + value = text, + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + onValueChange = onValueChange, + ) + + OutlinedTextField( + value = text, + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + isError = true, + onValueChange = onValueChange, + ) + + OutlinedTextField( + value = text, + placeholder = "placeholder", + trailingIcon = HandyIcons.Filled.Cancel, + enabled = false, + onValueChange = onValueChange, + ) + + OutlinedTextField( + value = text, + placeholder = "placeholder", + enabled = false, + onValueChange = onValueChange, + ) + } + } +} \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/OutlinedTextField.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/OutlinedTextField.kt index a6790a38..b99648eb 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/OutlinedTextField.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/OutlinedTextField.kt @@ -5,32 +5,25 @@ import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.collectIsFocusedAsState -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.runtime.Composable import androidx.compose.runtime.remember - import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.input.KeyboardType -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme import com.yourssu.handy.compose.Icon import com.yourssu.handy.compose.Text import com.yourssu.handy.compose.foundation.HandyTypography -import com.yourssu.handy.compose.icons.HandyIcons -import com.yourssu.handy.compose.icons.filled.Cancel @Composable fun OutlinedTextField( @@ -130,48 +123,4 @@ fun getTextFieldStyle( textColor = if (!enabled) HandyTheme.colors.textBasicDisabled else HandyTheme.colors.textBasicPrimary, placeholderTextColor = if (!enabled) HandyTheme.colors.textBasicDisabled else HandyTheme.colors.textBasicTertiary ) -} - -@Preview -@Composable -fun OutlinedTextFieldPreview() { - HandyTheme { - Column( - modifier = Modifier - .wrapContentSize() - .padding(20.dp), - verticalArrangement = Arrangement.spacedBy(20.dp) - ) { - val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } - OutlinedTextField( - value = text, - placeholder = "placeholder", - trailingIcon = HandyIcons.Filled.Cancel, - onValueChange = onValueChange, - ) - - OutlinedTextField( - value = text, - placeholder = "placeholder", - trailingIcon = HandyIcons.Filled.Cancel, - isError = true, - onValueChange = onValueChange, - ) - - OutlinedTextField( - value = text, - placeholder = "placeholder", - trailingIcon = HandyIcons.Filled.Cancel, - enabled = false, - onValueChange = onValueChange, - ) - - OutlinedTextField( - value = text, - placeholder = "placeholder", - enabled = false, - onValueChange = onValueChange, - ) - } - } } \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt index cb23ed00..f232dd6e 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/textfield/TextField.kt @@ -1,24 +1,15 @@ package com.yourssu.handy.compose.textfield -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme import com.yourssu.handy.compose.Text import com.yourssu.handy.compose.foundation.HandyTypography -import com.yourssu.handy.compose.icons.HandyIcons -import com.yourssu.handy.compose.icons.filled.Cancel - @Composable fun TextField( value: String, From c2bf0e94b280ebc6ebcb0afed89acc9ea739e609 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Sun, 19 Jan 2025 20:05:41 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20mutableStateOf=20import=20=ED=95=98?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo/{OutlinedTextField.kt => OutlinedTextFieldPreview.kt} | 3 ++- app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) rename app/src/main/kotlin/com/yourssu/handy/demo/{OutlinedTextField.kt => OutlinedTextFieldPreview.kt} (94%) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextField.kt b/app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextFieldPreview.kt similarity index 94% rename from app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextField.kt rename to app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextFieldPreview.kt index 77abb153..2ea80384 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextField.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/OutlinedTextFieldPreview.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview @@ -24,7 +25,7 @@ fun OutlinedTextFieldPreview() { .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { - val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } + val (text, onValueChange) = remember { mutableStateOf("") } OutlinedTextField( value = text, placeholder = "placeholder", diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt index bf2c39f1..c78ef2f3 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/TextFieldPreview.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview @@ -22,7 +23,7 @@ fun TextFieldPreview() { modifier = Modifier.wrapContentSize().padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { - val (text, onValueChange) = remember { androidx.compose.runtime.mutableStateOf("") } + val (text, onValueChange) = remember { mutableStateOf("") } TextField( value = text, textLabel = "Label",