complete restyling

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/BuilderView.kt

@@ -5,6 +5,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import dev.inmo.kmppscriptbuilder.core.models.Config
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultBox
 import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultDivider
 
 @Composable
@@ -44,10 +45,12 @@ class BuilderView : View() {
             config = it
         }
 
-        projectTypeView.build()
+        DefaultBox {
-        DefaultDivider()
+            projectTypeView.build()
-        licensesView.build()
+            DefaultDivider()
-        DefaultDivider()
+            licensesView.build()
-        mavenInfoView.build()
+            DefaultDivider()
+            mavenInfoView.build()
+        }
     }
 }

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/DevelopersView.kt

@@ -2,11 +2,13 @@ package dev.inmo.kmppscriptbuilder.core.ui
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import dev.inmo.kmppscriptbuilder.core.models.Developer
+import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonText
 import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonTextField
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultBox
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultSmallVerticalMargin
 
 class DeveloperState(
     id: String = "",
@@ -38,17 +40,19 @@ class DevelopersView : ListView<DeveloperState>("Developers info") {
     override fun createItem(): DeveloperState = DeveloperState()
     @Composable
     override fun buildView(item: DeveloperState) {
+        CommonText("Developer username")
         CommonTextField(
             item.id,
-            "Developer username",
         ) { item.id = it }
+        DefaultSmallVerticalMargin()
+        CommonText("Developer name")
         CommonTextField(
             item.name,
-            "Developer name",
         ) { item.name = it }
+        DefaultSmallVerticalMargin()
+        CommonText("Developer E-Mail")
         CommonTextField(
             item.eMail,
-            "Developer E-Mail",
         ) { item.eMail = it }
     }
 }

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/LicensesView.kt

@@ -5,18 +5,19 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import dev.inmo.kmppscriptbuilder.core.models.License
 import dev.inmo.kmppscriptbuilder.core.models.getLicenses
+import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonText
 import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonTextField
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultSmallVerticalMargin
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
 import io.ktor.client.HttpClient
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 
-internal class LicenseState(
+class LicenseState(
     id: String = "",
     title: String = "",
     url: String? = null
@@ -32,13 +33,12 @@ internal fun License.toLicenseState() = LicenseState(id, title, url)
 
 expect object LicensesDrawer : Drawer<LicensesView>
 
-class LicensesView: VerticalView("Licenses") {
+class LicensesView : ListView<LicenseState>("Licenses") {
-    internal var licensesListState = mutableStateListOf<LicenseState>()
     var licenses: List<License>
-        get() = licensesListState.map { it.toLicense() }
+        get() = itemsList.map { it.toLicense() }
         set(value) {
-            licensesListState.clear()
+            itemsList.clear()
-            licensesListState.addAll(value.map { it.toLicenseState() })
+            itemsList.addAll(value.map { it.toLicenseState() })
         }
     internal val availableLicensesState = mutableStateListOf<License>()
     internal var licenseSearchFilter by mutableStateOf("")
@@ -50,6 +50,9 @@ class LicensesView: VerticalView("Licenses") {
         }
     }
 
+    override val addItemText: String
+        get() = "Add empty license"
+
     init {
         CoroutineScope(Dispatchers.Default).launch {
             val client = HttpClient()
@@ -58,6 +61,27 @@ class LicensesView: VerticalView("Licenses") {
         }
     }
 
+    override fun createItem(): LicenseState = LicenseState()
+
+    @Composable
+    override fun buildView(item: LicenseState) {
+        CommonText("License ID")
+        CommonTextField(
+            item.id,
+            "Short name like \"Apache-2.0\"",
+        ) { item.id = it }
+        CommonText("License title")
+        CommonTextField(
+            item.title,
+            "Official title of license (like \"Apache Software License 2.0\")",
+        ) { item.title = it }
+        CommonText("License URL")
+        CommonTextField(
+            item.url ?: "",
+            "Link to your LICENSE file OR official license file (like \"https://opensource.org/licenses/Apache-2.0\")",
+        ) { item.url = it }
+    }
+
     override val content: @Composable () -> Unit = {
         CommonTextField(
             licenseSearchFilter,
@@ -68,7 +92,12 @@ class LicensesView: VerticalView("Licenses") {
         ) { filterText ->
             licenseSearchFilter = filterText
         }
+        DefaultSmallVerticalMargin()
 
         with(LicensesDrawer) { draw() }
+
+        DefaultSmallVerticalMargin()
+
+        super.content()
     }
 }

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/MavenInfoView.kt

@@ -7,7 +7,9 @@ import dev.inmo.kmppscriptbuilder.core.models.SonatypeRepository
 import dev.inmo.kmppscriptbuilder.core.models.defaultProjectDescription
 import dev.inmo.kmppscriptbuilder.core.models.defaultProjectName
 import dev.inmo.kmppscriptbuilder.core.ui.utils.ButtonsPanel
+import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonText
 import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonTextField
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultSmallVerticalMargin
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
 import dev.inmo.kmppscriptbuilder.core.ui.utils.SwitchWithLabel
 
@@ -56,21 +58,28 @@ class MavenInfoView : VerticalView("Project information") {
     private val gpgSigningDrawer = GpgSigningOptionDrawerWithView(this)
 
     override val content: @Composable () -> Unit = {
+        CommonText("Public project name")
         CommonTextField(
             projectNameProperty,
-            "Public project name",
+            "\${project.name}",
         ) { projectNameProperty = it }
+        DefaultSmallVerticalMargin()
+        CommonText("Public project description")
         CommonTextField(
             projectDescriptionProperty,
-            "Public project description",
+            "\${project.name}",
         ) { projectDescriptionProperty = it }
+        DefaultSmallVerticalMargin()
+        CommonText("Public project URL")
         CommonTextField(
             projectUrlProperty,
-            "Public project URL",
+            "Type url to github or other source with readme",
         ) { projectUrlProperty = it }
+        DefaultSmallVerticalMargin()
+        CommonText("Public project VCS URL (with .git)")
         CommonTextField(
             projectVcsUrlProperty,
-            "Public project VCS URL (with .git)",
+            "Type url to github .git file"
         ) { projectVcsUrlProperty = it }
 
         ButtonsPanel(

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ProjectTypeView.kt

@@ -9,6 +9,7 @@ import dev.inmo.kmppscriptbuilder.core.models.JVMProjectType
 import dev.inmo.kmppscriptbuilder.core.models.MultiplatformProjectType
 import dev.inmo.kmppscriptbuilder.core.models.ProjectType
 import dev.inmo.kmppscriptbuilder.core.ui.utils.ButtonsPanel
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultSmallVerticalMargin
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
 
 expect class ProjectTypeDrawer : Drawer<ProjectType>

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/RepositoriesView.kt

@@ -2,12 +2,12 @@ package dev.inmo.kmppscriptbuilder.core.ui
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import dev.inmo.kmppscriptbuilder.core.models.MavenPublishingRepository
+import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonText
 import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonTextField
-import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultSmallVerticalMargin
 
 class RepositoryState(
     name: String = "",
@@ -38,13 +38,16 @@ class RepositoriesView : ListView<RepositoryState>("Repositories info") {
 
     @Composable
     override fun buildView(item: RepositoryState) {
+        CommonText("Repository name")
         CommonTextField(
             item.name,
-            "Repository name",
+            "This name will be used to identify repository in gradle"
         ) { item.name = it }
+        DefaultSmallVerticalMargin()
+        CommonText("Repository url")
         CommonTextField(
             item.url,
-            "Repository url",
+            "For example: https://repo.maven.apache.org/maven2/"
         ) { item.url = it }
     }
 

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/VerticalView.kt

@@ -1,11 +1,14 @@
 package dev.inmo.kmppscriptbuilder.core.ui
 
 import androidx.compose.runtime.Composable
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultBox
 
 abstract class VerticalView(protected val title: String) : View() {
     abstract val content: @Composable () -> Unit
     @Composable
     override fun build() {
-        DrawVertically(title, content)
+        DefaultBox {
+            DrawVertically(title, content)
+        }
     }
 }

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/utils/UIElements.kt

@@ -11,7 +11,7 @@ expect fun CommonText(text: String, onClick: (() -> Unit)? = null)
 @Composable
 expect fun CommonTextField(
     presetText: String,
-    hint: String,
+    hint: String? = null,
     onFocusChanged: (Boolean) -> Unit = {},
     onChange: (String) -> Unit
 )
@@ -41,3 +41,9 @@ fun <T> ButtonsPanel(
 
 @Composable
 expect fun DefaultDivider()
+
+@Composable
+expect fun DefaultSmallVerticalMargin()
+
+@Composable
+expect fun DefaultBox(block: @Composable () -> Unit)

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/GpgSigningOptionDrawer.kt

@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.elements.DefaultButton
 import dev.inmo.jsuikit.modifiers.UIKitButton
 import dev.inmo.jsuikit.modifiers.UIKitMargin
+import dev.inmo.jsuikit.modifiers.UIKitTooltipModifier
 import dev.inmo.jsuikit.modifiers.UIKitUtility
 import dev.inmo.kmppscriptbuilder.core.models.GpgSigning
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
@@ -14,10 +15,17 @@ actual class GpgSigningOptionDrawer(
 ) : Drawer<GpgSigning> {
     @Composable
     override fun GpgSigning.draw() {
+        val tooltipModifier = UIKitTooltipModifier(
+            when (this) {
+                GpgSigning.Disabled -> "Signing will not be added"
+                GpgSigning.Enabled -> "Signing will be always enabled"
+                GpgSigning.Optional -> "Signing will be added, but disabled in case of absence 'signatory.keyId'"
+            }
+        )
         if (mavenInfoView.gpgSignProperty == this) {
-            DefaultButton(name, UIKitButton.Type.Primary, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded)
+            DefaultButton(name, UIKitButton.Type.Primary, UIKitButton.Size.Small, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded, tooltipModifier)
         } else {
-            DefaultButton(name, UIKitButton.Type.Default, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
+            DefaultButton(name, UIKitButton.Type.Default, UIKitButton.Size.Small, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded, tooltipModifier) {
                 mavenInfoView.gpgSignProperty = this
             }
         }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/LicensesDrawer.kt

@@ -28,34 +28,10 @@ actual object LicensesDrawer : Drawer<LicensesView> {
                 it.title,
                 UIKitButton.Type.Text
             ) { _ ->
-                licensesListState.add(it.toLicenseState())
+                itemsList.add(it.toLicenseState())
                 licenseSearchFilter = ""
             }
             Divider.Common()
         }
-
-        DefaultButton("Add empty license", UIKitButton.Type.Primary, UIKitMargin.Small, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
-            licensesListState.add(LicenseState())
-        }
-
-        licensesListState.forEach { license ->
-            Div(UIKitMargin.Small.builder()) {
-                CommonTextField(
-                    license.id,
-                    "License ID",
-                ) { license.id = it }
-                CommonTextField(
-                    license.title,
-                    "License title",
-                ) { license.title = it }
-                CommonTextField(
-                    license.url ?: "",
-                    "License URL",
-                ) { license.url = it }
-                DefaultButton("Remove", UIKitButton.Type.Default, UIKitMargin.Small, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
-                    licensesListState.remove(license)
-                }
-            }
-        }
     }
 }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ListViewDrawer.kt

@@ -6,6 +6,7 @@ import dev.inmo.jsuikit.modifiers.UIKitButton
 import dev.inmo.jsuikit.modifiers.UIKitMargin
 import dev.inmo.jsuikit.modifiers.UIKitUtility
 import dev.inmo.jsuikit.modifiers.builder
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultBox
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
 import dev.inmo.kmppscriptbuilder.core.ui.utils.NoTransform
 import org.jetbrains.compose.web.dom.Div
@@ -13,14 +14,17 @@ import org.jetbrains.compose.web.dom.Div
 actual class ListViewDrawer<T> : Drawer<ListView<T>> {
     @Composable
     override fun ListView<T>.draw() {
-        DefaultButton(addItemText, UIKitButton.Type.Primary, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded ) { itemsList.add(createItem()) }
         itemsList.forEach { item ->
-            Div(UIKitMargin.Small.builder()) {
+            DefaultBox {
                 buildView(item)
                 DefaultButton(removeItemText, UIKitButton.Type.Default, UIKitMargin.Small, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
                     itemsList.remove(item)
                 }
             }
+            DefaultButton(addItemText, UIKitButton.Type.Primary, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded ) { itemsList.add(createItem()) }
+        }
+        if (itemsList.isEmpty()) {
+            DefaultButton(addItemText, UIKitButton.Type.Primary, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded ) { itemsList.add(createItem()) }
         }
     }
 }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ProjectTypeDrawer.kt

@@ -16,9 +16,9 @@ actual class ProjectTypeDrawer(
     @Composable
     override fun ProjectType.draw() {
         if (projectTypeView.projectType == this) {
-            DefaultButton(name, UIKitButton.Type.Primary, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded)
+            DefaultButton(name, UIKitButton.Type.Primary, UIKitButton.Size.Small, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded)
         } else {
-            DefaultButton(name, UIKitButton.Type.Default, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
+            DefaultButton(name, UIKitButton.Type.Default, UIKitButton.Size.Small, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
                 projectTypeView.projectType = this
             }
         }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/TopAppBar.kt

@@ -6,10 +6,16 @@ import dev.inmo.jsuikit.elements.NavItemElement
 import dev.inmo.jsuikit.elements.Navbar
 import dev.inmo.jsuikit.elements.NavbarNav
 import dev.inmo.jsuikit.elements.drawAsLink
+import dev.inmo.jsuikit.modifiers.UIKitBackground
+import dev.inmo.jsuikit.modifiers.UIKitInverse
 import dev.inmo.jsuikit.modifiers.UIKitMargin
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.UIKitNavbar
 import dev.inmo.jsuikit.modifiers.UIKitPadding
+import dev.inmo.jsuikit.modifiers.UIKitSection
 import dev.inmo.jsuikit.modifiers.UIKitText
 import dev.inmo.jsuikit.modifiers.UIKitTooltipModifier
+import dev.inmo.jsuikit.modifiers.attrsBuilder
 import dev.inmo.jsuikit.modifiers.builder
 import dev.inmo.jsuikit.modifiers.include
 import dev.inmo.jsuikit.utils.AttrsWithContentBuilder
@@ -20,6 +26,7 @@ import dev.inmo.kmppscriptbuilder.core.utils.saveConfig
 import org.jetbrains.compose.web.dom.A
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Img
+import org.jetbrains.compose.web.dom.Section
 import org.jetbrains.compose.web.dom.Text
 
 @Composable
@@ -29,54 +36,57 @@ actual fun TopAppBar(
     onSaveAvailable: (Boolean) -> Unit,
     onNewConfig: (Config) -> Unit
 ) {
-    Navbar(
+    Section(attrsBuilder(UIKitSection.Style.Primary, UIKitInverse.Light)) {
-        leftBuilder = AttrsWithContentBuilder {
+        Navbar(
-            Div(
+            leftBuilder = AttrsWithContentBuilder {
-                {
+                Div(
-                    onClick {
+                    {
-                        console.log(config)
+                        onClick {
+                            console.log(config)
+                        }
+                        include(UIKitPadding.Size.Small, UIKitText.Style.Lead)
                     }
-                    include(UIKitPadding.Size.Small, UIKitText.Style.Lead)
+                ) {
+                    Text("Kotlin publication scripts builder")
                 }
-            ) {
+                Div(UIKitMargin.Small.builder()) {
-                Text("Kotlin publication scripts builder")
+                    A("https://github.com/InsanusMokrassar/KotlinPublicationScriptsBuilder") {
-            }
+                        Img("https://img.shields.io/github/stars/InsanusMokrassar/KotlinPublicationScriptsBuilder?label=Github&style=plastic")
-            Div(UIKitMargin.Small.builder()) {
+                    }
-                A("https://github.com/InsanusMokrassar/KotlinPublicationScriptsBuilder") {
-                    Img("https://img.shields.io/github/stars/InsanusMokrassar/KotlinPublicationScriptsBuilder?label=Github&style=plastic")
                 }
-            }
+            },
-        },
+            rightBuilder = AttrsWithContentBuilder {
-        rightBuilder = AttrsWithContentBuilder {
+                NavbarNav(
-            NavbarNav(
+                    AttrsWithContentBuilder {
-                AttrsWithContentBuilder {
+                        NavItemElement(
-                    NavItemElement(
+                            UIKitTooltipModifier("Open file")
-                        UIKitTooltipModifier("Open file")
+                        ) {
-                    ) {
+                            Icon.Storage.Pull.drawAsLink {
-                        Icon.Storage.Pull.drawAsLink {
+                                openNewConfig(onNewConfig)
-                            openNewConfig(onNewConfig)
+                            }
                         }
-                    }
+                    },
-                },
+                    AttrsWithContentBuilder {
-                AttrsWithContentBuilder {
+                        NavItemElement(
-                    NavItemElement(
+                            UIKitTooltipModifier("Save config")
-                        UIKitTooltipModifier("Save config")
+                        ) {
-                    ) {
+                            Icon.Storage.Push.drawAsLink {
-                        Icon.Storage.Push.drawAsLink {
+                                saveConfig(config)
-                            saveConfig(config)
+                            }
                         }
-                    }
+                    },
-                },
+                    AttrsWithContentBuilder {
-                AttrsWithContentBuilder {
+                        NavItemElement(
-                    NavItemElement(
+                            UIKitTooltipModifier("Export gradle script")
-                        UIKitTooltipModifier("Export gradle script")
+                        ) {
-                    ) {
+                            Icon.Storage.Upload.drawAsLink {
-                        Icon.Storage.Upload.drawAsLink {
+                                exportGradle(config)
-                            exportGradle(config)
+                            }
                         }
-                    }
+                    },
-                },
+                )
-            )
+            },
-        }
+            navModifiers = arrayOf(UIKitNavbar.Transparent)
-    )
+        )
+    }
 }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/View.kt

@@ -3,6 +3,7 @@ package dev.inmo.kmppscriptbuilder.core.ui
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitForm
 import dev.inmo.jsuikit.modifiers.builder
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultSmallVerticalMargin
 import org.jetbrains.compose.web.dom.Legend
 import org.jetbrains.compose.web.dom.Text
 
@@ -16,5 +17,7 @@ actual fun View.DrawVertically(title: String, block: @Composable () -> Unit) {
     Legend(UIKitForm.Legend.builder()) {
         Text(title)
     }
+    DefaultSmallVerticalMargin()
     block()
+    DefaultSmallVerticalMargin()
 }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/utils/ActualUIElements.kt

@@ -6,21 +6,17 @@ import dev.inmo.jsuikit.elements.DefaultInput
 import dev.inmo.jsuikit.elements.Divider
 import dev.inmo.jsuikit.elements.Flex
 import dev.inmo.jsuikit.elements.Icon
-import dev.inmo.jsuikit.elements.Label
 import dev.inmo.jsuikit.elements.drawAsFormInputPart
 import dev.inmo.jsuikit.modifiers.UIKitButton
-import dev.inmo.jsuikit.modifiers.UIKitCustom
 import dev.inmo.jsuikit.modifiers.UIKitFlex
 import dev.inmo.jsuikit.modifiers.UIKitForm
 import dev.inmo.jsuikit.modifiers.UIKitInverse
 import dev.inmo.jsuikit.modifiers.UIKitMargin
-import dev.inmo.jsuikit.modifiers.UIKitText
 import dev.inmo.jsuikit.modifiers.UIKitUtility
+import dev.inmo.jsuikit.modifiers.attrsBuilder
 import dev.inmo.jsuikit.modifiers.builder
 import dev.inmo.jsuikit.modifiers.include
-import dev.inmo.jsuikit.utils.Attrs
 import kotlinx.browser.window
-import kotlinx.coroutines.withTimeout
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Legend
@@ -51,7 +47,7 @@ actual fun CommonText(text: String, onClick: (() -> Unit)?) {
 @Composable
 actual fun CommonTextField(
     presetText: String,
-    hint: String,
+    hint: String?,
     onFocusChanged: (Boolean) -> Unit,
     onChange: (String) -> Unit
 ) {
@@ -118,3 +114,15 @@ actual fun <T> ButtonsPanel(
 actual fun DefaultDivider() {
     Divider.Common()
 }
+
+@Composable
+actual fun DefaultSmallVerticalMargin() {
+    Div(UIKitMargin.Small.Top.builder())
+}
+
+@Composable
+actual fun DefaultBox(block: @Composable () -> Unit) {
+    Div(attrsBuilder(UIKitMargin.Small.Horizontal, UIKitMargin.Small.Vertical)) {
+        block()
+    }
+}

core/src/jvmMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ActualView.kt

@@ -8,10 +8,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultSmallVerticalMargin
 import dev.inmo.kmppscriptbuilder.core.ui.utils.TitleText
 
 actual abstract class View {
-    internal open val defaultModifier = Modifier.fillMaxWidth().padding(8.dp)
+    internal open val defaultModifier = Modifier.fillMaxWidth()
     @Composable
     actual abstract fun build()
 }
@@ -22,10 +23,11 @@ actual fun View.DrawVertically(
     block: @Composable () -> Unit
 ) {
     TitleText(title)
+    DefaultSmallVerticalMargin()
 
     Column(defaultModifier) {
         block()
     }
 
-    Spacer(Modifier.fillMaxWidth().height(8.dp))
+    DefaultSmallVerticalMargin()
 }

core/src/jvmMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/GpgSigningOptionDrawer.kt

@@ -20,7 +20,7 @@ actual class GpgSigningOptionDrawer(
     @Composable
     override fun GpgSigning.draw() {
         if (mavenInfoView.gpgSignProperty == this) {
-            Button({}, Modifier.padding(8.dp)) {
+            Button({}, Modifier.padding(8.dp, 0.dp)) {
                 Text(name)
             }
         } else {
@@ -28,7 +28,7 @@ actual class GpgSigningOptionDrawer(
                 {
                     mavenInfoView.gpgSignProperty = this
                 },
-                Modifier.padding(8.dp)
+                Modifier.padding(8.dp, 0.dp)
             ) {
                 Text(name)
             }

core/src/jvmMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/LicensesDrawer.kt

@@ -5,8 +5,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Button
 import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonText
@@ -21,7 +19,7 @@ actual object LicensesDrawer : Drawer<LicensesView> {
                 licensesOffersToShow.value.forEach {
                     Column(Modifier.padding(16.dp, 8.dp, 8.dp, 8.dp)) {
                         CommonText(it.title) {
-                            licensesListState.add(it.toLicenseState())
+                            itemsList.add(it.toLicenseState())
                             licenseSearchFilter = ""
                         }
                         Divider()
@@ -29,29 +27,5 @@ actual object LicensesDrawer : Drawer<LicensesView> {
                 }
             }
         }
-
-        Button({ licensesListState.add(LicenseState()) }, Modifier.padding(8.dp)) {
-            CommonText("Add empty license")
-        }
-
-        licensesListState.forEach { license ->
-            Column(Modifier.padding(8.dp)) {
-                CommonTextField(
-                    license.id,
-                    "License ID",
-                ) { license.id = it }
-                CommonTextField(
-                    license.title,
-                    "License title",
-                ) { license.title = it }
-                CommonTextField(
-                    license.url ?: "",
-                    "License URL",
-                ) { license.url = it }
-                Button({ licensesListState.remove(license) }, Modifier.padding(8.dp)) {
-                    CommonText("Remove",)
-                }
-            }
-        }
     }
 }

core/src/jvmMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ListViewDrawer.kt

@@ -3,25 +3,32 @@ package dev.inmo.kmppscriptbuilder.core.ui
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Button
+import androidx.compose.material.OutlinedButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonText
+import dev.inmo.kmppscriptbuilder.core.ui.utils.DefaultBox
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
 
 actual class ListViewDrawer<T> : Drawer<ListView<T>> {
     @Composable
     override fun ListView<T>.draw() {
-        Button({ itemsList.add(createItem()) }) {
-            CommonText(addItemText,)
-        }
         itemsList.forEach { item ->
-            Column(Modifier.padding(8.dp)) {
+            DefaultBox {
                 buildView(item)
-                Button({ itemsList.remove(item) }, Modifier.padding(8.dp)) {
+                OutlinedButton({ itemsList.remove(item) }, Modifier.padding(8.dp)) {
                     CommonText(removeItemText,)
                 }
             }
+            Button({ itemsList.add(createItem()) }) {
+                CommonText(addItemText,)
+            }
+        }
+        if (itemsList.isEmpty()) {
+            Button({ itemsList.add(createItem()) }) {
+                CommonText(addItemText,)
+            }
         }
     }
 }

core/src/jvmMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ProjectTypeDrawer.kt

@@ -21,7 +21,7 @@ actual class ProjectTypeDrawer(
     @Composable
     override fun ProjectType.draw() {
         if (projectTypeView.projectType == this) {
-            Button({}, Modifier.padding(8.dp)) {
+            Button({}, Modifier.padding(8.dp, 0.dp)) {
                 Text(name)
             }
         } else {
@@ -29,7 +29,7 @@ actual class ProjectTypeDrawer(
                 {
                     projectTypeView.projectType = this
                 },
-                Modifier.padding(8.dp)
+                Modifier.padding(8.dp, 0.dp)
             ) {
                 Text(name)
             }

core/src/jvmMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/utils/ActualUIElements.kt

@@ -3,7 +3,9 @@ package dev.inmo.kmppscriptbuilder.core.ui.utils
 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.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Divider
@@ -50,7 +52,7 @@ actual fun SwitchWithLabel(
 @Composable
 actual fun CommonTextField(
     presetText: String,
-    hint: String,
+    hint: String?,
     onFocusChanged: (Boolean) -> Unit,
     onChange: (String) -> Unit
 ) {
@@ -61,8 +63,10 @@ actual fun CommonTextField(
             onFocusChanged(it.isFocused)
         },
         singleLine = true,
-        label = {
+        label = hint ?.let {
-            CommonText(hint,)
+            {
+                CommonText(hint)
+            }
         }
     )
 }
@@ -94,3 +98,15 @@ actual fun <T> ButtonsPanel(
 actual fun DefaultDivider() {
     Divider()
 }
+
+@Composable
+actual fun DefaultSmallVerticalMargin() {
+    Spacer(Modifier.padding(0.dp, 4.dp))
+}
+
+@Composable
+actual fun DefaultBox(block: @Composable () -> Unit) {
+    Column(Modifier.padding(8.dp)) {
+        block()
+    }
+}