Examples refactoring

13 files changed, 122 insertions, 910 deletions

diff --git a/build.gradle b/build.gradle
index fc703e2f..b374249a 100644
--- a/build.gradle
+++ b/build.gradle
@@ -1,5 +1,7 @@
 buildscript {
     ext.kotlin_version = '1.2.20'
+    ext.production = (findProperty('prod') ?: 'false') == 'true'
+    ext.npmdeps = new File("npm.dependencies").getText()
 
     repositories {
         jcenter()
@@ -14,13 +16,18 @@ buildscript {
     }
 }
 
-group = 'pl.treksoft'
-version = '0.0.1-SNAPSHOT'
+plugins {
+    id "maven-publish"
+    id "com.jfrog.bintray" version "1.7.3"
+}
 
 apply plugin: 'kotlin2js'
 apply plugin: 'org.jetbrains.kotlin.frontend'
 apply plugin: "io.gitlab.arturbosch.detekt"
 
+group = 'pl.treksoft'
+version = '0.0.1'
+
 repositories {
     jcenter()
     maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' }
@@ -31,36 +38,17 @@ dependencies {
     compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
     compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version" // for now only compile configuration is supported
     compile "com.github.snabbdom:snabbdom-kotlin:0.1.1"
-    compile "pl.treksoft:navigo-kotlin:0.0.1"
-    compile "pl.treksoft:jquery-kotlin:0.0.2"
-    compile "pl.treksoft:kotlin-observable-js:0.0.2"
+    compile "pl.treksoft:navigo-kotlin:0.0.2"
+    compile "pl.treksoft:jquery-kotlin:0.0.3"
+    compile "pl.treksoft:kotlin-observable-js:0.0.3"
 }
 
 kotlinFrontend {
     npm {
-        dependency "jquery"
-        dependency "bootstrap"
-        dependency "css-loader"
-        dependency "style-loader"
-        dependency "less"
-        dependency "less-loader"
-        dependency "imports-loader"
-        dependency "bootstrap-webpack"
-        dependency "font-awesome"
-        dependency("font-awesome-webpack", "0.0.5-beta.2")
-        dependency "file-loader"
-        dependency "url-loader"
-        dependency("awesome-bootstrap-checkbox", "0.3.7")
-        dependency "bootstrap-select"
-        dependency "ajax-bootstrap-select"
-        dependency "trix"
-        dependency "fecha"
-        dependency "bootstrap-datetime-picker"
-        dependency "bootstrap-touchspin"
-        dependency("snabbdom", "0.6.9")
-        dependency "snabbdom-virtualize"
-        dependency "navigo"
-        dependency "jquery-resizable-dom"
+        npmdeps.eachLine { line ->
+            def (name, version) = line.tokenize(" ")
+            dependency(name, version)
+        }
         devDependency("karma")
     }
 
@@ -69,12 +57,26 @@ kotlinFrontend {
         contentPath = file('src/main/web')
     }
 
-    define "PRODUCTION", false
+    define "PRODUCTION", production
+
+}
+
+task cleanLibs(type: Delete) {
+  delete 'build/js', 'build/libs'
+}
 
+if (project.gradle.startParameter.taskNames.contains("jar")){
+    compileKotlin2Js.dependsOn 'cleanLibs'
 }
 
 jar {
     duplicatesStrategy = DuplicatesStrategy.EXCLUDE
+    excludes = [ "package.json" ]
+}
+
+task sourcesJar(type: Jar, dependsOn: classes) {
+    classifier = 'sources'
+    from sourceSets.main.allSource
 }
 
 detekt {
@@ -89,23 +91,73 @@ detekt {
 compileKotlin2Js {
     kotlinOptions.metaInfo = true
     kotlinOptions.outputFile = "$project.buildDir.path/js/${project.name}.js"
-    kotlinOptions.sourceMap = true
+    kotlinOptions.sourceMap = !production
     kotlinOptions.moduleKind = 'commonjs'
 }
 
 compileTestKotlin2Js {
     kotlinOptions.metaInfo = true
     kotlinOptions.outputFile = "$project.buildDir.path/js-tests/${project.name}-tests.js"
-    kotlinOptions.sourceMap = true
+    kotlinOptions.sourceMap = !production
     kotlinOptions.moduleKind = 'commonjs'
 }
 
 task copyResources(type: Copy) {
-    from "src/main/assets"
+    from "src/main/resources"
     into file(buildDir.path + "/js")
 }
 
+task copyResourcesForTests(type: Copy) {
+    from "src/main/resources"
+    into file(buildDir.path + "/js-tests/")
+}
+
 afterEvaluate {
     tasks.getByName("webpack-bundle") { dependsOn(copyResources) }
-    tasks.getByName("webpack-run") { dependsOn(copyResources) }
+    tasks.getByName("webpack-run") { dependsOn(copyResources, copyResourcesForTests) }
+}
+
+publishing {
+    publications {
+        maven(MavenPublication) {
+            from components.java
+            pom.withXml {
+                asNode().dependencies.'*'.findAll() {
+                    it.artifactId.text() == 'kotlin-test-js'
+                }.each() {
+                    it.scope*.value = 'test'
+                }
+            }
+        }
+    }
+}
+
+model {
+    tasks.generatePomFileForMavenPublication {
+        destination = file("$buildDir/libs/${project.name}-${version}.pom")
+    }
+}
+
+bintray {
+    user = findProperty('buser')
+    key = findProperty('bkey')
+    pkg {
+        repo = 'kotlin'
+        name = "${project.name}"
+        licenses = ['MIT']
+        vcsUrl = "https://github.com/rjaros/${project.name}.git"
+        version {
+            name = "${project.version}"
+            desc = 'Object oriented Web UI framework for Kotlin.'
+            released = new Date()
+        }
+    }
+    filesSpec {
+        from "${project.buildDir}/libs/"
+        into "pl/treksoft/${project.name}/${project.version}"
+    }
+}
+
+bintrayUpload {
+    dependsOn "generatePomFileForMavenPublication"
 }
diff --git a/examples/helloworld/src/main/resources/css/style.css b/examples/helloworld/src/main/resources/css/style.css
new file mode 100644
index 00000000..76482c15
--- /dev/null
+++ b/examples/helloworld/src/main/resources/css/style.css
@@ -0,0 +1,3 @@
+.helloworld {
+    font-size: 30px;
+}
diff --git a/npm.dependencies b/npm.dependencies
new file mode 100644
index 00000000..50a8bb4e
--- /dev/null
+++ b/npm.dependencies
@@ -0,0 +1,24 @@
+css-loader *
+style-loader *
+less *
+less-loader *
+imports-loader *
+uglifyjs-webpack-plugin *
+file-loader *
+url-loader *
+jquery 3.3.1
+bootstrap 3.3.7
+bootstrap-webpack 0.0.6
+font-awesome 4.7.0
+font-awesome-webpack 0.0.5-beta.2
+awesome-bootstrap-checkbox 0.3.7
+bootstrap-select 1.12.4
+ajax-bootstrap-select 1.4.3
+trix 0.11.1
+fecha 2.3.2
+bootstrap-datetime-picker 2.4.4
+bootstrap-touchspin 3.1.1
+snabbdom 0.6.9
+snabbdom-virtualize 0.7.0
+navigo 7.0.0
+jquery-resizable-dom 0.26.0
diff --git a/src/main/kotlin/pl/treksoft/kvision/Main.kt b/src/main/kotlin/pl/treksoft/kvision/Main.kt
deleted file mode 100644
index e4816888..00000000
--- a/src/main/kotlin/pl/treksoft/kvision/Main.kt
+++ /dev/null
@@ -1,37 +0,0 @@
-package pl.treksoft.kvision
-
-import pl.treksoft.kvision.core.KVManager
-import kotlin.browser.document
-
-fun main(args: Array<String>) {
-    var application: ApplicationBase? = null
-
-    val state: dynamic = module.hot?.let { hot ->
-        hot.accept()
-
-        hot.dispose { data ->
-            data.appState = application?.dispose()
-            KVManager.shutdown()
-            application = null
-        }
-
-        hot.data
-    }
-
-    if (document.body != null) {
-        application = start(state)
-    } else {
-        KVManager.init()
-        application = null
-        document.addEventListener("DOMContentLoaded", { application = start(state) })
-    }
-}
-
-fun start(state: dynamic): ApplicationBase? {
-    if (document.getElementById("showcase") == null) return null
-    val application = Showcase()
-    @Suppress("UnsafeCastFromDynamic")
-    application.start(state?.appState ?: emptyMap())
-    return application
-}
-
diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
deleted file mode 100644
index 51f0213b..00000000
--- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
+++ /dev/null
@@ -1,823 +0,0 @@
-package pl.treksoft.kvision
-
-import com.lightningkite.kotlin.observable.list.observableListOf
-import pl.treksoft.kvision.basic.Label
-import pl.treksoft.kvision.core.*
-import pl.treksoft.kvision.data.DataComponent
-import pl.treksoft.kvision.data.DataContainer
-import pl.treksoft.kvision.dropdown.DD.*
-import pl.treksoft.kvision.dropdown.DropDown
-import pl.treksoft.kvision.form.Form
-import pl.treksoft.kvision.form.FormPanel
-import pl.treksoft.kvision.form.INPUTSIZE
-import pl.treksoft.kvision.form.bool
-import pl.treksoft.kvision.form.check.CheckBox
-import pl.treksoft.kvision.form.check.Radio
-import pl.treksoft.kvision.form.check.RadioGroup
-import pl.treksoft.kvision.form.date
-import pl.treksoft.kvision.form.select.AjaxOptions
-import pl.treksoft.kvision.form.select.SELECTWIDTHTYPE
-import pl.treksoft.kvision.form.select.Select
-import pl.treksoft.kvision.form.select.SelectInput
-import pl.treksoft.kvision.form.select.SelectOptGroup
-import pl.treksoft.kvision.form.select.SelectOption
-import pl.treksoft.kvision.form.spinner.FORCETYPE
-import pl.treksoft.kvision.form.spinner.Spinner
-import pl.treksoft.kvision.form.spinner.SpinnerInput
-import pl.treksoft.kvision.form.string
-import pl.treksoft.kvision.form.text.Password
-import pl.treksoft.kvision.form.text.RichText
-import pl.treksoft.kvision.form.text.TEXTINPUTTYPE
-import pl.treksoft.kvision.form.text.Text
-import pl.treksoft.kvision.form.text.TextArea
-import pl.treksoft.kvision.form.text.TextAreaInput
-import pl.treksoft.kvision.form.text.TextInput
-import pl.treksoft.kvision.form.time.DateTime
-import pl.treksoft.kvision.form.time.DateTimeInput
-import pl.treksoft.kvision.html.*
-import pl.treksoft.kvision.html.TAG.DIV
-import pl.treksoft.kvision.html.TAG.H1
-import pl.treksoft.kvision.modal.Alert
-import pl.treksoft.kvision.modal.Confirm
-import pl.treksoft.kvision.modal.Modal
-import pl.treksoft.kvision.panel.*
-import pl.treksoft.kvision.routing.routing
-import pl.treksoft.kvision.snabbdom.obj
-import pl.treksoft.kvision.utils.perc
-import pl.treksoft.kvision.utils.px
-import pl.treksoft.kvision.utils.toDateF
-import kotlin.js.Date
-
-class Showcase : ApplicationBase() {
-
-    override fun start(state: Map<String, Any>) {
-        data class DataForm(val a: String?, val b: Boolean?, val c: Date?)
-
-        val f = DataForm("ala", true, Date())
-        val form = Form {
-            DataForm(it.string("a"), it.bool("b"), it.date("c"))
-        }
-        form.add("a", Text())
-        form.add("b", CheckBox())
-        form.add("c", DateTime())
-        form.setData(f)
-        val ret = form.getData()
-        console.log(ret)
-
-        class DataFormMap(map: Map<String, Any?>) {
-            val name: String by map
-            val age: Date     by map
-        }
-
-        val fm = DataFormMap(mapOf("name" to "Ala", "age" to Date()))
-        val formm = Form {
-            DataFormMap(it)
-        }
-        formm.add("name", Text())
-        formm.add("age", DateTime())
-        formm.setData(fm)
-        val retm = formm.getData()
-        console.log(retm.name)
-        console.log(retm.age)
-
-        val root = Root("showcase")
-
-        class Model(p: Boolean, t: String) : DataComponent() {
-            var p: Boolean by obs(p)
-            var t: String by obs(t)
-        }
-
-        val model = observableListOf(Model(true, "Pierwszy"), Model(false, "Drugi"), Model(false, "Trzeci"))
-        val datac = DataContainer(model, { element, index ->
-            CheckBox(
-                value = element.p,
-                label = if (element.p) "<b>" + (index + 1) + " " + element.t + "</b>" else element.t,
-                rich = true
-            ).setEventListener<CheckBox>({
-                click = {
-                    element.p = self.value
-                }
-            })
-        })
-        root.add(datac)
-
-        val mbutton = Button("Pokaż wartości").setEventListener<Button> {
-            click = {
-                println(model.collection)
-            }
-            dblclick = {
-                model.add(Model(true, "XXX"))
-            }
-        }
-        root.add(mbutton)
-        val mbutton2 = Button("Zaznacz").setEventListener<Button> {
-            click = {
-                model.forEach { it.p = true }
-            }
-            dblclick = {
-                model.forEach { it.p = false }
-            }
-        }
-        root.add(mbutton2)
-        val textField = TextInput(value = "abc").apply { placeholder = "Wprowadź hasło ..." }
-        val mbutton3 = Button("Ukryj/Pokaż").setEventListener<Button> {
-            click = {
-                if (datac.visible) datac.hide() else datac.show()
-                if (textField.visible) textField.hide() else textField.show()
-            }
-        }
-        root.add(mbutton3)
-
-        val select = SelectInput(listOf("klucz1" to "Klucz 1", "klucz2" to "Klucz 2"), "klucz2,klucz1", multiple = true)
-        root.add(select)
-
-        val mbuttons = Button("Select").setEventListener<Button> {
-            click = {
-                println(select.value)
-            }
-        }
-        root.add(mbuttons)
-
-        val select2 = SelectInput(value = "klucz1")
-        select2.add(SelectOption("klucz0", "Klucz 0", "Subtext 0", "flag"))
-        select2.add(SelectOption(divider = true))
-        select2.add(SelectOption("klucz1", "Klucz 1", "Subtext 1", "fa-flag"))
-        select2.add(SelectOption("klucz2", "Klucz 2", disabled = true))
-        root.add(select2)
-
-        val select3 = SelectInput().apply {
-            placeholder = "Wybierz opcje"
-            emptyOption = true
-            liveSearch = true
-            style = BUTTONSTYLE.WARNING
-            selectWidthType = SELECTWIDTHTYPE.FIT
-        }
-        select3.add(SelectOptGroup("Opcje pierwsze", listOf("k" to "Opcja pierwsza 1", "m" to "Opcja pierwsza 2")))
-        val sopt = SelectOptGroup("Opcje drugie", maxOptions = 2)
-        sopt.add(SelectOption("a", "Opcja druga 1", "Subtext 1"))
-        sopt.add(SelectOption("b", "Opcja druga 2"))
-        sopt.add(SelectOption("c", "Opcja druga 3").apply { color = Color(COLOR.RED) })
-        select3.add(sopt)
-        root.add(select3)
-
-        val mbuttons3 = Button("Select").setEventListener<Button> {
-            click = {
-                println(select3.value)
-                select3.toggleOptions()
-            }
-        }
-        root.add(mbuttons3)
-
-        val rg = RadioGroup(listOf("o1" to "Pierwsza opcja", "o2" to "Druga opcja"), label = "Radio buttony")
-        root.add(rg)
-        val rgbutton = Button("Sprawdź radio").setEventListener<Button> {
-            click = {
-                println(rg.value)
-            }
-        }
-        root.add(rgbutton)
-        val rg2button = Button("Ustaw radio").setEventListener<Button> {
-            click = {
-                rg.value = "o2"
-            }
-            dblclick = {
-                rg.value = null
-            }
-        }
-        root.add(rg2button)
-
-        val select5 = Select(listOf("a" to "Pierwsza", "b" to "Druga"), "a", label = "Lista wyboru")
-        root.add(select5)
-
-        val text = Text(label = "To jest pole").apply {
-            placeholder = "Pole formularza"
-            maxlength = 5
-        }
-
-        val select6 = Select(label = "Lista wyboru 2", value = "b")
-        select6.add(SelectOption("a", "Opcja 1"))
-        select6.add(SelectOption("b", "Opcja 2"))
-        select6.add(SelectOption("c", "Opcja 3"))
-        select6.setEventListener<Select> {
-            showBsSelect = { e ->
-                println("show")
-            }
-            shownBsSelect = { e ->
-                println("shown")
-            }
-            hideBsSelect = { e ->
-                println("hide")
-                e.detail.preventDefault()
-            }
-            hiddenBsSelect = { e ->
-                println("hidden")
-            }
-            renderedBsSelect = { e ->
-                println("rendered")
-            }
-            refreshedBsSelect = { e ->
-                println("refreshed")
-            }
-            loadedBsSelect = { e ->
-                println("loaded")
-            }
-            changedBsSelect = { e ->
-                println(e.detail.clickedIndex)
-                if (e.detail.clickedIndex == 0) {
-                    self.options = listOf("x" to "x", "y" to "y", "z" to "z")
-                    self.value = "y"
-                    text.value = "ole"
-                    textField.value = "ole2"
-                } else {
-                    self.add(SelectOption("x", "XXX"))
-                }
-            }
-        }
-        root.add(select6)
-
-        val select7 = SelectInput().apply {
-            ajaxOptions = AjaxOptions("https://api.github.com/search/repositories", processData = {
-                it.items.map { item ->
-                    obj {
-                        this.value = item.id
-                        this.text = item.name
-                        this.data = obj {
-                            this.subtext = item.owner.login
-                        }
-                    }
-                }
-            }, processParams = obj {
-                q = "{{{q}}}"
-            })
-        }
-        root.add(select7)
-
-        val select8 = Select(label = "Wybierz repozytorium").apply {
-            emptyOption = true
-            ajaxOptions = AjaxOptions("https://api.github.com/search/repositories", processData = {
-                it.items.map { item ->
-                    obj {
-                        this.value = item.id
-                        this.text = item.name
-                        this.data = obj {
-                            this.subtext = item.owner.login
-                        }
-                    }
-                }
-            }, processParams = obj {
-                q = "{{{q}}}"
-            }, minLength = 3, requestDelay = 1000)
-            setEventListener<Select> {
-                change = { _ ->
-                    println(self.value)
-                }
-            }
-        }
-        root.add(select8)
-        val mbuttons8 = Button("Sprawdz repozytorium").setEventListener<Button> {
-            click = {
-                println(select8.value)
-                select8.value = null
-            }
-        }
-        root.add(mbuttons8)
-
-        val htmlArea = RichText("test<b>Boldzik</b>", "Pole html").apply {
-            size = INPUTSIZE.SMALL
-            placeholder = "Wprowadź rich text"
-            width = 50.perc()
-            inputHeight = 200.px()
-        }
-        root.add(htmlArea)
-        htmlArea.setEventListener<RichText> {
-            change = {
-                console.log(self.value)
-            }
-        }
-        val mbuttons9 = Button("Sprawdz html").setEventListener<Button> {
-            click = {
-                println(htmlArea.value)
-            }
-        }
-        root.add(mbuttons9)
-
-        val date = DateTimeInput().apply {
-            placeholder = "Wprowadź datę"
-            size = INPUTSIZE.LARGE
-            todayBtn = true
-            showMeridian = true
-            daysOfWeekDisabled = arrayOf(0, 6)
-
-        }
-        root.add(date)
-
-        val date2 = DateTimeInput(Date(), format = "DD-MM-YY").apply {
-            disabled = true
-        }
-        root.add(date2)
-
-        val date3 = DateTimeInput(Date(), format = "DD-MM-YYYY hh:mm A").apply {
-            readonly = true
-            showMeridian = true
-        }
-        root.add(date3)
-
-        val date4 = DateTime(Date(), format = "HH:mm", label = "Wprowadź datę wpływu")
-        date4.setEventListener<DateTime> {
-            showBsDateTime = {
-                println("show dt")
-            }
-            hideBsDateTime = {
-                println("hide dt")
-            }
-        }
-        root.add(date4)
-
-        val mbuttons10 = Button("Sprawdz daty").setEventListener<Button> {
-            click = {
-                println(date.value)
-                println(date.getValueAsString())
-                println(date2.value)
-                println(date2.getValueAsString())
-                println(date3.value)
-                println(date3.getValueAsString())
-                println(date4.value)
-                println(date4.getValueAsString())
-                date.value = "2017-01-16".toDateF("YYYY-MM-DD")
-                date.showPopup()
-                date.weekStart = 1
-                date4.value = null
-                date4.format = "mm:HH"
-                date4.disabled = !date4.disabled
-            }
-        }
-        root.add(mbuttons10)
-
-        val container = SimplePanel(setOf("abc", "def"))
-        val h1 = Tag(H1, "To jest <i>test pisania</i> tekstu", false, null, classes = setOf("test", "test2"))
-        container.add(h1)
-        val label = Label("KVLabel1")
-        container.add(label)
-        val label2 = Label("KVLabel2")
-        container.add(label2)
-        root.add(container)
-        label.hide()
-        label.show()
-
-        val link = Link("test", "http://www.google.pl")
-        link.add(Tag(TAG.P, "Cośtam"))
-        root.add(link)
-
-        root.add(textField)
-        textField.setEventListener<TextInput> {
-            input = { e ->
-                println("i" + self.value)
-            }
-            change = { e ->
-                println("c" + self.value)
-            }
-        }
-        val passwordField = TextInput(TEXTINPUTTYPE.PASSWORD)
-        root.add(passwordField)
-
-        val textField2 = TextInput().apply { placeholder = "Disabled" }
-        textField2.disabled = true
-        textField2.size = INPUTSIZE.LARGE
-        root.add(textField2)
-
-        val checkbox = CheckBox(true, label = "Kliknij aby <b>przetestować</b>", rich = true)
-        root.add(checkbox)
-        checkbox.setEventListener<CheckBox> {
-            click = { e ->
-                println("click" + self.value)
-            }
-            change = { e -> println("change" + self.value) }
-        }
-
-/*        val radio = Radio(true, name = "radios", label = "Opcja 1", inline = true,
-                style = RADIOSTYLE.DANGER, extraValue = "o1")
-        val radio2 = Radio(false, name = "radios", label = "Opcja 2", rich = true, inline = true,
-                style = RADIOSTYLE.WARNING, extraValue = "o2")
-        val radio3 = Radio(false, name = "radios", label = "Opcja 3", inline = true,
-                style = RADIOSTYLE.PRIMARY, squared = true, extraValue = "o3")
-        root.add(radio)
-        root.add(radio2)
-        root.add(radio3)
-        radio.setEventListener<CheckBox> {
-            click = { e ->
-                println("rclick" + self.value)
-            }
-            change = { e -> println("rchange" + self.value) }
-        }*/
-        root.add(text)
-
-        val textareainput =
-            TextAreaInput(cols = 5, rows = 2, value = "To jest tekst\nTo jest <b>te</b></textarea>kst2").apply {
-                placeholder = "..."
-            }
-        root.add(textareainput)
-
-        val textarea = TextArea(
-            cols = 5,
-            rows = 2,
-            value = "To jest tekst\nTo jest <b>te</b></textarea>kst2",
-            label = "Pole długie"
-        ).apply {
-            placeholder = "..."
-        }
-        root.add(textarea)
-        textarea.setEventListener<TextArea> {
-            input = { e ->
-                println("ta i" + self.value)
-            }
-            change = { e ->
-                println("ta c" + self.value)
-            }
-        }
-
-        class Formularz(val map: Map<String, Any?>) {
-            val text: String? by map
-            val password: String? by map
-            val textarea: String? by map
-            val richtext: String? by map
-            val data: Date? by map
-            val checkbox: Boolean by map
-            val radio: Boolean by map
-            val select: String? by map
-            val spinner: Double? by map
-            val radiogroup: String? by map
-        }
-
-        val formPanel = FormPanel {
-            Formularz(it)
-        }.apply {
-            add("text", Text(label = "Tekst"), required = true, validatorMessage = { "Wprowadź tylko cyfry" }) {
-                it.getValue()?.matches("^[0-9]+$")
-            }
-            add("password", Password(label = "Hasło"), required = true,
-                validatorMessage = { "Wprowadź co najmniej 5 znaków" }) {
-                (it.getValue()?.length ?: 0) >= 5
-            }
-            add("textarea", TextArea(label = "Obszar"), required = true)
-            add("richtext", RichText(label = "Obszar WYSIWYG"), required = true)
-            add("data", DateTime(format = "YYYY-MM-DD", label = "Data"), required = true)
-            add("checkbox", CheckBox(label = "Checkbox")) { it.getValue() }
-            add("radio", Radio(label = "Radiobutton")) { it.getValue() }
-            add("select", Select(
-                options = listOf("a" to "Pierwsza opcja", "b" to "Druga opcja"),
-                label = "Wybierz opcje"
-            ).apply {
-                //                selectWidthType = SELECTWIDTHTYPE.FIT
-                emptyOption = true
-            }, required = true
-            )
-            add("spinner", Spinner(label = "Spinner"), required = true)
-            add("radiogroup", RadioGroup(
-                listOf("o1" to "Pierwsza opcja", "o2" to "Druga opcja"),
-                inline = true, label = "Radio group"
-            ).apply {
-                setEventListener<RadioGroup> {
-                    change = { e ->
-                        println(self.value)
-                    }
-                }
-            }, required = true
-            )
-
-            validator = {
-                val result = it["text"] == it["textarea"]
-                if (!result) {
-                    it.getControl("text")?.validatorError = "Niezgodne dane"
-                    it.getControl("textarea")?.validatorError = "Niezgodne dane"
-                }
-                result
-            }
-            validatorMessage = { "Pole Tekst i Obszar muszą być takie same!" }
-        }
-        root.add(formPanel)
-        val spinner = SpinnerInput(
-            15.05,
-            min = -100000,
-            max = 100000,
-            decimals = 4,
-            forceType = FORCETYPE.ROUND,
-            step = 0.0001
-        ).apply {
-            size = INPUTSIZE.LARGE
-        }
-        val ttt = TextInput(value = "abc").apply {
-            size = INPUTSIZE.LARGE
-        }
-        spinner.setEventListener<SpinnerInput> {
-            onMinBsSpinner = { e ->
-                console.log(e)
-            }
-            onMaxBsSpinner = { e ->
-                console.log(e)
-            }
-        }
-        val formButton = Button("Pokaż dane").setEventListener<Button> {
-            click = {
-                formPanel.getControl("radiogroup")?.disabled = true
-                console.log(formPanel.validate())
-                console.log(formPanel.getData().map.toString())
-                formPanel.setData(Formularz(mapOf("checkbox" to false, "select" to "a", "radiogroup" to "o2")))
-                spinner.toggleVisible()
-                spinner.max = spinner.max.plus(2)
-                ttt.toggleVisible()
-            }
-        }
-        formPanel.add(formButton)
-        spinner.setEventListener<SpinnerInput> {
-            change = {
-                console.log(spinner.value)
-            }
-        }
-        root.add(spinner)
-        root.add(ttt)
-
-        val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag")
-        root.add(dd)
-        dd.setEventListener<DropDown> {
-            showBsDropdown = { e -> println("show" + (e.detail)) }
-            shownBsDropdown = { e -> println("shown" + e.detail) }
-            hideBsDropdown = { e ->
-                println("hide" + e.detail)
-                e.detail.preventDefault()
-            }
-            hiddenBsDropdown = { e -> println("hidden" + e.detail) }
-        }
-
-        val dd2 = DropDown(
-            "Dropdown2", listOf(
-                "abc" to "#!/abc", "def" to "#!/def", "xyz" to DISABLED.type,
-                "Header" to HEADER.type, "Separtatorek" to SEPARATOR.type
-            ), "flag"
-        ).apply { dropup = true }
-        root.add(dd2)
-        dd2.setEventListener<DropDown> {
-            hideBsDropdown = { e -> println("hide" + e.detail) }
-            hiddenBsDropdown = { e -> println("hidden" + e.detail) }
-        }
-
-        val ddbutton = Button("Toggle").setEventListener<Button> {
-            click = {
-                console.log("x")
-                dd2.toggle()
-                checkbox.value = true
-            }
-        }
-        root.add(ddbutton)
-
-        val dd3 = DropDown("Dropdown3", icon = "file")
-        dd3.add(Tag(TAG.H4, "ABC"))
-        dd3.add(Button("To jest button"))
-        dd3.add(Image(Img("kotlin.png")))
-        root.add(dd3)
-
-        val tabs2 = TabPanel()
-        tabs2.addTab("XXX", Label("XXX"), "fa-flag")
-        tabs2.addTab("YYY", Label("YYY"), "fa-flag")
-
-        val tabs = TabPanel()
-        tabs.addTab("Test zakładki", Label("test zakładki"), "fa-flag")
-        tabs.addTab("Test zakładki2", Label("test zakładki2"))
-//        tabs.addTab("Test zakładki3", tabs2, "fa-bars")
-
-        val split = SplitPanel()
-        split.add(tabs)
-
-        val split2 = SplitPanel(DIRECTION.HORIZONTAL)
-        val t1 = Tag(
-            TAG.DIV,
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor. Suspendisse vel fermentum purus, vel ornare tellus. Vivamus dictum, risus non viverra venenatis, magna mi pharetra purus, nec dignissim risus tortor a sem. Donec tincidunt dui ut eros laoreet consectetur. Nam dapibus vestibulum sem, eget accumsan ex vestibulum ac. Curabitur ac mi sit amet eros sodales dictum. Sed at felis at nunc aliquam finibus. Vestibulum lorem nulla, dictum ac libero non, mattis dictum nisl. Aenean semper lorem turpis. Praesent pellentesque ligula est, viverra molestie leo imperdiet ut. Nam vitae hendrerit justo. Nullam tincidunt et nibh ac volutpat. Aliquam vulputate mi aliquam fermentum rhoncus.\n" +
-                    "\n" +
-                    "Proin porttitor diam id massa eleifend aliquet. Morbi nec erat porttitor, placerat lorem et, dignissim lectus. Cras ultricies posuere arcu, et pharetra dui laoreet in. Sed nec ipsum in sapien vestibulum maximus eu id nunc. Ut finibus aliquam nisi id vehicula. Phasellus sodales lobortis orci, non interdum risus dignissim quis. Proin bibendum consectetur diam nec mattis. Suspendisse dictum vulputate metus at tincidunt."
-        )
-        t1.padding = 5.px()
-        split2.add(t1)
-        val t2 = Tag(
-            TAG.DIV,
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor. Suspendisse vel fermentum purus, vel ornare tellus. Vivamus dictum, risus non viverra venenatis, magna mi pharetra purus, nec dignissim risus tortor a sem. Donec tincidunt dui ut eros laoreet consectetur. Nam dapibus vestibulum sem, eget accumsan ex vestibulum ac. Curabitur ac mi sit amet eros sodales dictum. Sed at felis at nunc aliquam finibus. Vestibulum lorem nulla, dictum ac libero non, mattis dictum nisl. Aenean semper lorem turpis. Praesent pellentesque ligula est, viverra molestie leo imperdiet ut. Nam vitae hendrerit justo. Nullam tincidunt et nibh ac volutpat. Aliquam vulputate mi aliquam fermentum rhoncus.\n" +
-                    "\n" +
-                    "Proin porttitor diam id massa eleifend aliquet. Morbi nec erat porttitor, placerat lorem et, dignissim lectus. Cras ultricies posuere arcu, et pharetra dui laoreet in. Sed nec ipsum in sapien vestibulum maximus eu id nunc. Ut finibus aliquam nisi id vehicula. Phasellus sodales lobortis orci, non interdum risus dignissim quis. Proin bibendum consectetur diam nec mattis. Suspendisse dictum vulputate metus at tincidunt."
-        )
-        t2.padding = 10.px()
-        split2.add(t2)
-        split.add(split2)
-        root.add(split)
-        split.setEventListener<SplitPanel> {
-            dragSplitPanel = { e ->
-                if ((e.detail.asDynamic()).newWidth > 400) {
-                    e.detail.preventDefault()
-                }
-            }
-        }
-
-        val p = Tag(TAG.P, "To jest prawo", align = ALIGN.RIGHT)
-        p.title = "Tytuł"
-        p.border = Border(3.px(), BORDERSTYLE.SOLID)
-        p.borderTop = Border(4.px(), BORDERSTYLE.DASHED, COLOR.RED)
-        p.borderBottom = Border(4.px(), BORDERSTYLE.DASHED, 0x00ff00)
-        p.borderLeft = Border(4.px(), BORDERSTYLE.SOLID, 0xff00ff)
-        p.marginTop = 30.px()
-        p.paddingRight = 30.px()<