diff --git a/app/src/main/java/com/example/ui_kit/MainActivity.kt b/app/src/main/java/com/example/ui_kit/MainActivity.kt index f0f12e4..331a030 100644 --- a/app/src/main/java/com/example/ui_kit/MainActivity.kt +++ b/app/src/main/java/com/example/ui_kit/MainActivity.kt @@ -4,12 +4,14 @@ import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import com.example.libary.theme.UikitTheme @@ -19,11 +21,15 @@ class MainActivity : ComponentActivity() { enableEdgeToEdge() setContent { UikitTheme { - Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -> - Greeting( - name = "Android", + Scaffold( + modifier = Modifier.fillMaxSize(), + containerColor = Color.White + ) { innerPadding -> + Column( modifier = Modifier.padding(innerPadding) - ) + ) { + StoryBook() + } } } } diff --git a/app/src/main/java/com/example/ui_kit/StoryBook.kt b/app/src/main/java/com/example/ui_kit/StoryBook.kt new file mode 100644 index 0000000..54d463d --- /dev/null +++ b/app/src/main/java/com/example/ui_kit/StoryBook.kt @@ -0,0 +1,406 @@ +package com.example.ui_kit + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.AbsoluteRoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +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.draw.clip +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.example.libary.BaseCard +import com.example.libary.BigButton +import com.example.libary.BigButtonState +import com.example.libary.BottomSheet +import com.example.libary.CartButton +import com.example.libary.CartCard +import com.example.libary.ChipButton +import com.example.libary.ChipButtonState +import com.example.libary.Header +import com.example.libary.HeaderState +import com.example.libary.Input +import com.example.libary.LoginButton +import com.example.libary.LoginState +import com.example.libary.PrimaryCard +import com.example.libary.ProjectCard +import com.example.libary.SearchInput +import com.example.libary.Select +import com.example.libary.SmallButton +import com.example.libary.SmallButtonState +import com.example.libary.TabBar +import com.example.libary.defaultTabBarData +import com.example.libary.theme.BlackColor +import com.example.libary.theme.IconsColor + +@Composable +fun StoryBook( + +) { + var modal by remember { mutableStateOf(false) } + + var inVal by remember { mutableStateOf("") } + var passinVal by remember { mutableStateOf("123456789") } + + val searchInput = remember { mutableStateOf("") } + val valSelect = remember { mutableStateOf("") } + val valSelect1 = remember { mutableStateOf("Гарвард Троцкий") } + + val valueTabBar1 = remember { mutableStateOf(defaultTabBarData[0]) } + val valueTabBar2 = remember { mutableStateOf(defaultTabBarData[1]) } + val valueTabBar3 = remember { mutableStateOf(defaultTabBarData[2]) } + val valueTabBar4 = remember { mutableStateOf(defaultTabBarData[3]) } + + if (modal) { + BottomSheet { + Row { + Text( + text = "Рубашка Воскресенье для машинного вязания", + color = BlackColor, + fontSize = 20.sp, + fontWeight = FontWeight.W800, + modifier = Modifier.weight(1f) + ) + + Box( + contentAlignment = Alignment.Center, + modifier = Modifier.size(24.dp) + .background(IconsColor.copy(0.3f), AbsoluteRoundedCornerShape(90.dp)) + .clip(AbsoluteRoundedCornerShape(90.dp)) + ) { + Image( + painter = painterResource(com.example.libary.R.drawable.delete), + contentDescription = null + ) + } + } + + Spacer(Modifier.height(84.dp)) + } + } + + LazyColumn( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally + ) { + item { + Spacer(Modifier.height(20.dp)) + + Header( + state = HeaderState.Big, + title = "Корзина" + ) + + Spacer(Modifier.height(39.dp)) + + Header( + state = HeaderState.Small, + title = "Корзина" + ) + + Spacer(Modifier.height(40.dp)) + + + BigButton( + state = BigButtonState.Property, + text = "Открытить модальное окно", + onClick = { + modal = !modal + } + ) + + Spacer(Modifier.height(40.dp)) + + BaseCard( + modifier = Modifier.height(138.dp).width(335.dp) + ) {} + + Spacer(Modifier.height(18.dp)) + + PrimaryCard( + name = "Рубашка Воскресенье для машинного вязания", + category = "Мужская одежда", + price = "300", + isAdd = true, + modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp) + ) + + Spacer(Modifier.height(18.dp)) + + PrimaryCard( + name = "Рубашка Воскресенье для машинного вязания", + category = "Мужская одежда", + price = "300", + isAdd = false, + modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp) + ) + + Spacer(Modifier.height(18.dp)) + + CartCard( + name = "Рубашка воскресенье для машинного вязания", + modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), + price = "300", + count = "1" + ) + + Spacer(Modifier.height(18.dp)) + + ProjectCard( + name = "Мой первый проект", + date = "Прошло 2 дня", + modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp) + ) + + Spacer(Modifier.height(40.dp)) + + Input( + value = inVal, + modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + placeholder = "Введите имя", + onValueChange = { + inVal = it + } + ) + + Spacer(Modifier.height(18.dp)) + + Input( + value = "Иван", + modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + placeholder = "Иван", + onValueChange = { + inVal = it + } + ) + + Spacer(Modifier.height(18.dp)) + + Input( + value = inVal, + modifier = Modifier.fillMaxWidth(), + modifierColumn = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + topText = "Имя", + placeholder = "Введите имя", + onValueChange = { + inVal = it + } + ) + + Spacer(Modifier.height(18.dp)) + + Input( + value = inVal, + modifier = Modifier.fillMaxWidth(), + modifierColumn = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + placeholder = "Иван", + errorText = "Введите ваше имя", + onValueChange = { + inVal = it + } + ) + + Spacer(Modifier.height(18.dp)) + + Input( + value = inVal, + modifier = Modifier.fillMaxWidth(), + modifierColumn = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + topText = "Имя", + placeholder = "Введите имя", + onValueChange = { + inVal = it + } + ) + + Spacer(Modifier.height(18.dp)) + + Input( + value = "Введите имя", + modifier = Modifier.fillMaxWidth(), + modifierColumn = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + topText = "Имя", + placeholder = "Введите имя", + onValueChange = { + inVal = it + } + ) + + Spacer(Modifier.height(18.dp)) + + Input( + value = passinVal, + modifier = Modifier.fillMaxWidth(), + modifierColumn = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + topText = "Имя", + placeholder = "Введите имя", + pasMode = true, + onValueChange = { + passinVal = it + } + ) + + Spacer(Modifier.height(18.dp)) + + Input( + value = inVal, + modifier = Modifier.fillMaxWidth(), + modifierColumn = Modifier.fillMaxWidth().padding(start = 16.dp, end = 26.dp), + placeholder = "--.--.----", + onValueChange = { + inVal = it + } + ) + + Spacer(Modifier.height(40.dp)) + + Select( + value = valSelect, + modifier = Modifier.fillMaxWidth() + .padding(start = 16.dp, end = 26.dp), + placeholder = "Пол", + data = listOf( + "Мужской", + "Женский" + ) + ) + + Spacer(Modifier.height(18.dp)) + + Select( + value = valSelect1, + modifier = Modifier.fillMaxWidth() + .padding(start = 16.dp, end = 26.dp), + leadingIcon = { + Image( + painter = painterResource(R.drawable.user_icon), + contentDescription = null, + modifier = Modifier.size(24.dp) + ) + }, + data = listOf( + "Гарвард Троцкий", + "Гарвард Троцкий" + ) + ) + + Spacer(Modifier.height(40.dp)) + + SearchInput( + value = searchInput.value, + onValueChange = { + searchInput.value = it + } + ) + + Spacer(Modifier.height(40.dp)) + + BigButtonState.entries.forEach { + BigButton( + state = it, + text = "Подтвердить", + modifier = Modifier.fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 16.dp) + ) + } + + Spacer(Modifier.height(40.dp)) + + SmallButton( + state = SmallButtonState.Property, + text = "Добавить" + ) + + Spacer(Modifier.height(5.dp)) + + SmallButton( + state = SmallButtonState.Secondary, + text = "Убрать" + ) + + Spacer(Modifier.height(5.dp)) + + SmallButton( + state = SmallButtonState.Inactive, + text = "Добавить" + ) + + Spacer(Modifier.height(5.dp)) + + SmallButton( + state = SmallButtonState.Tetriary, + text = "Подтвердить" + ) + + Spacer(Modifier.height(40.dp)) + + ChipButton( + state = ChipButtonState.On, + text = "Популярные" + ) + + Spacer(Modifier.height(5.dp)) + + ChipButton( + state = ChipButtonState.Off, + text = "Популярные" + ) + + Spacer(Modifier.height(40.dp)) + + CartButton( + price = "500" + ) + + Spacer(Modifier.height(40.dp)) + + LoginState.entries.forEach { + LoginButton( + state = it + ) + + Spacer(Modifier.height(5.dp)) + } + + Spacer(Modifier.height(40.dp)) + + TabBar( + value = valueTabBar1 + ) + + Spacer(Modifier.height(15.dp)) + + TabBar( + value = valueTabBar2 + ) + + Spacer(Modifier.height(15.dp)) + + TabBar( + value = valueTabBar3 + ) + + Spacer(Modifier.height(15.dp)) + + TabBar( + value = valueTabBar4 + ) + } + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/user_icon.png b/app/src/main/res/drawable/user_icon.png new file mode 100644 index 0000000..1d3ff15 Binary files /dev/null and b/app/src/main/res/drawable/user_icon.png differ diff --git a/libary/src/main/java/com/example/libary/BottomSheet.kt b/libary/src/main/java/com/example/libary/BottomSheet.kt index 7d91fed..55dd868 100644 --- a/libary/src/main/java/com/example/libary/BottomSheet.kt +++ b/libary/src/main/java/com/example/libary/BottomSheet.kt @@ -23,7 +23,7 @@ fun BottomSheet( modifier = modifier, onDismissRequest = {}, containerColor = WhiteColor, - shape = AbsoluteRoundedCornerShape(24.dp), + shape = AbsoluteRoundedCornerShape(topLeft = 24.dp, topRight = 24.dp), dragHandle = null ) { Column( diff --git a/libary/src/main/java/com/example/libary/Buttons.kt b/libary/src/main/java/com/example/libary/Buttons.kt index 7c4a2f1..25ea702 100644 --- a/libary/src/main/java/com/example/libary/Buttons.kt +++ b/libary/src/main/java/com/example/libary/Buttons.kt @@ -25,6 +25,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.example.libary.theme.AccentColor @@ -136,7 +137,7 @@ fun SmallButton( colors = ButtonDefaults.buttonColors( containerColor = state.containerColor ), - contentPadding = PaddingValues(0.dp) + contentPadding = PaddingValues(horizontal = 13.5.dp, vertical = 0.dp) ) { Text( text = text, diff --git a/libary/src/main/java/com/example/libary/Cards.kt b/libary/src/main/java/com/example/libary/Cards.kt index ce2ee70..38fcdf0 100644 --- a/libary/src/main/java/com/example/libary/Cards.kt +++ b/libary/src/main/java/com/example/libary/Cards.kt @@ -24,7 +24,6 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow -import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview @@ -68,7 +67,7 @@ fun PrimaryCard( category: String, price: String, isAdd: Boolean, - onClick: () -> Unit + onClick: () -> Unit = {} ) { BaseCard( modifier = modifier diff --git a/libary/src/main/java/com/example/libary/Input.kt b/libary/src/main/java/com/example/libary/Input.kt index 92f1961..382079b 100644 --- a/libary/src/main/java/com/example/libary/Input.kt +++ b/libary/src/main/java/com/example/libary/Input.kt @@ -33,6 +33,7 @@ import com.example.libary.theme.InputStroke @Composable fun Input( modifier: Modifier = Modifier, + modifierColumn: Modifier = Modifier, value: String = "", placeholder: String = "", topText: String = "", @@ -42,7 +43,7 @@ fun Input( ) { var vis by remember { mutableStateOf(false) } - Column { + Column(modifierColumn) { if (topText.isNotEmpty()) { Text( text = topText, @@ -96,7 +97,7 @@ fun Input( focusedTextColor = BlackColor, unfocusedTextColor = BlackColor, - focusedIndicatorColor = if (errorText.isNotEmpty()) Error1Color else InputStroke, + focusedIndicatorColor = if (errorText.isNotEmpty()) Error1Color else AccentColor, unfocusedIndicatorColor = if (errorText.isNotEmpty()) Error1Color else InputStroke, focusedContainerColor = if (errorText.isNotEmpty()) Error1Color.copy(0.1f) else InputBGColor, diff --git a/libary/src/main/java/com/example/libary/Select.kt b/libary/src/main/java/com/example/libary/Select.kt index 08e332b..ecb1582 100644 --- a/libary/src/main/java/com/example/libary/Select.kt +++ b/libary/src/main/java/com/example/libary/Select.kt @@ -32,8 +32,9 @@ fun Select( modifier: Modifier = Modifier, value: MutableState, data: List, - placeholder: String = "" -) { + placeholder: String = "", + leadingIcon: @Composable (() -> Unit)? = null, + ) { var modal by remember { mutableStateOf(false) } OutlinedTextField( @@ -41,6 +42,7 @@ fun Select( onValueChange = {}, modifier = modifier, shape = AbsoluteRoundedCornerShape(10.dp), + leadingIcon = leadingIcon, placeholder = { Text( text = placeholder,