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 ->
+                Scaffold(
-                    Greeting(
+                    modifier = Modifier.fillMaxSize(),
-                        name = "Android",
+                    containerColor = Color.White
+                ) { innerPadding ->
+                    Column(
                         modifier = Modifier.padding(innerPadding)
-                    )
+                    ) {
+                        StoryBook()
+                    }
                 }
             }
         }

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

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(

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,

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

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,

libary/src/main/java/com/example/libary/Select.kt

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