user10/ui-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

StoryBook

Browse Source
This commit is contained in:
Ваше Имя 2025-05-26 16:27:07 +03:00
parent 3aa41efc75
commit 6340000c1d
8 changed files with 427 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/src/main/java/com/example/ui_kit/MainActivity.kt
View File

@ -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()
}
}
}
}

406
app/src/main/java/com/example/ui_kit/StoryBook.kt Normal file
View File

@ -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
)
}
}
}

BIN
app/src/main/res/drawable/user_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
libary/src/main/java/com/example/libary/BottomSheet.kt
View File

@ -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(

3
libary/src/main/java/com/example/libary/Buttons.kt
View File

@ -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,

3
libary/src/main/java/com/example/libary/Cards.kt
View File

@ -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

5
libary/src/main/java/com/example/libary/Input.kt
View File

@ -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,

6
libary/src/main/java/com/example/libary/Select.kt
View File

@ -32,8 +32,9 @@ fun Select(
modifier: Modifier = Modifier,
value: MutableState<String>,
data: List<String>,
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,