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()
-        root.add(p)
-        val del = Tag(TAG.DEL, "To jest deleted")
-        root.add(del)
-
-        val list = ListTag(
-            LIST.DL_HORIZ, listOf(
-                "abc", "de<b>fdasdasdasddasd</b>tdasdas", "Dasdsada",
-                "dasdasdads"
-            ), true
-        )
-        root.add(list)
-
-        val list2 = ListTag(LIST.OL, null)
-        list2.add(Tag(TAG.H4, "ABC"))
-        list2.add(Button("To jest button"))
-        list2.add(Image(Img("kotlin.png")))
-        root.add(list2)
-
-        val img = Image(Img("kotlin.png"), "Image", true, IMAGESHAPE.ROUNDED)
-        img.opacity = 0.5
-        root.add(img)
-
-        val grid = ResponsiveGridPanel(align = ALIGN.RIGHT)
-        grid.add(Tag(DIV, "0,0"), 0, 0)
-        grid.add(Tag(DIV, "1,1"), 1, 1)
-        grid.add(Tag(DIV, "2,2"), 2, 2)
-        root.add(grid)
-
-        val grid2 = ResponsiveGridPanel(align = ALIGN.CENTER)
-        grid2.add(Tag(DIV, "0,0"), 0, 0, 8)
-        grid2.add(Tag(DIV, "0,1"), 0, 1, 4)
-        grid2.add(Tag(DIV, "1,1"), 1, 1, 8, 4)
-        root.add(grid2)
-
-        val flexPanel = FlexPanel(FLEXDIR.ROW)
-        flexPanel.add(Label("1"), 3, 1)
-        flexPanel.add(Label("2"), 2, 2)
-        flexPanel.add(Label("3"), 1, 1)
-        flexPanel.add(tabs2, 4, 1)
-        root.add(flexPanel)
-
-        val hPanel = HPanel(FLEXJUSTIFY.CENTER)
-        hPanel.add(Label("h1"), basis = 10)
-        hPanel.add(Label("h2"), basis = 20)
-        hPanel.add(Label("h3"), basis = 10)
-        root.add(hPanel)
-
-        val vPanel = VPanel(alignItems = FLEXALIGNITEMS.CENTER)
-        vPanel.add(Label("h1"), basis = 10)
-        vPanel.add(Label("h2"), basis = 20)
-        vPanel.add(Label("h3"), basis = 10)
-        root.add(vPanel)
-
-        val grid3 = GridPanel(templateColumns = "1fr 1fr 1fr")
-        grid3.background = Background(
-            0xCCCCCC, Img("kotlin.png"), 50.perc(), 50.perc(), size = BGSIZE.CONTAIN,
-            repeat = BGREPEAT.NOREPEAT, attachment = BGATTACH.FIXED
-        )
-        grid3.add(Label("hh1"))
-        grid3.add(Label("hh2"))
-        grid3.add(Label("hh3"))
-        grid3.add(Label("hh4"))
-        root.add(grid3)
-
-        val grid4 = GridPanel(justifyItems = GRIDJUSTIFY.CENTER)
-        grid4.colorHex = 0x00ff00
-        grid4.add(Label("hh1"), 1, 1)
-        grid4.add(Label("hh2"), 2, 2)
-        grid4.add(Label("hh3"), 3, 3)
-        grid4.add(Label("hh4"), 4, 4)
-        root.add(grid4)
-
-        val dock = DockPanel()
-        dock.colorName = COLOR.AQUA
-        dock.add(Label("left<br/>left", rich = true), SIDE.LEFT)
-        dock.add(Label("right"), SIDE.RIGHT)
-        dock.add(Label("up"), SIDE.UP)
-        dock.add(Label("down"), SIDE.DOWN)
-        dock.add(Label("center"), SIDE.CENTER)
-        dock.border = Border(7.px(), BORDERSTYLE.INSET, COLOR.DARKVIOLET)
-//        root.add(dock)
-
-        val pa = HPanel(alignItems = FLEXALIGNITEMS.FLEXEND)
-        pa.add(
-            Label("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."),
-            3
-        )
-        pa.add(Image(Img("kotlin.png")), 1)
-        pa.add(dock, 2, alignSelf = FLEXALIGNITEMS.FLEXSTART)
-        dock.width = 400.px()
-        root.add(pa)
-
-        val modal = Modal("Test okienka")
-        modal.add(Tag(TAG.H4, "ABC"))
-        modal.add(Image(Img("kotlin.png")))
-        modal.addButton(Button("To jest button"))
-/*        modal.setEventListener<Modal> {
-            hideBsModal = { e -> e.detail.preventDefault() }
-        }*/
-        val button = Button("To jest przycisk FA", "fa-flag", BUTTONSTYLE.DANGER)
-        button.setEventListener<Button> {
-            click = { _ ->
-                println(model.collection)
-                println(self.text)
-                println(textField.value)
-//                println(checkbox.value)
-                textField2.disabled = false
-                grid4.colorHex = 0xff0000
-                dd3.text = "Zmiana"
-                dd3.style = BUTTONSTYLE.WARNING
-                dd3.disabled = true
-/*                modal.show()
-                window.setTimeout({
-                    modal.size = MODALSIZE.SMALL
-                    modal.animation = false
-                }, 2000)*/
-                if (split.visible) {
-                    split.hide()
-                } else {
-                    split.show()
-                }
-                if (htmlArea.visible) {
-                    htmlArea.hide()
-                } else {
-                    htmlArea.show()
-                }
-            }
-        }
-        root.add(button)
-
-        fun alerts() {
-            Alert.show("This is alert", "A text of the <b>alert</b>", true) {
-                println("abc")
-                Alert.show("This is alert 2", "A text of the <b>alert</b> 2", true) {
-                    println("def")
-                }
-            }
-        }
-
-        val button2 = Button("To jest przycisk", "flag", BUTTONSTYLE.DANGER)
-        button2.setEventListener {
-            click = { e ->
-                dd.hide()
-                println("2" + e)
-                button.setEventListener {
-                    click = null
-                }
-                alerts()
-            }
-        }
-        root.add(button2)
-        val button3 = Button("To jest przycisk IMG").apply { image = Img("kotlin.png") }
-        button3.setEventListener {
-            click = { e ->
-                Confirm.show("Pytanie", "Czy na pewno chcesz kliknąć przycisk?", noCallback = { println("no") }) {
-                    dd.show()
-                    println("3" + e)
-                    button.setEventListener<Button> {
-                        click = { _ -> println(self.text) }
-                        dblclick = { e -> println("111" + e) }
-                    }
-                }
-            }
-        }
-        root.add(button3)
-
-        println("init routing")
-        routing.on({ _ -> println("root") })
-            .on("/abc", { _ -> println("abc") })
-            .on("/test", { _ -> println("test") })
-            .resolve()
-//        jQuery(document).off(".data-api")
-
-//        routing.on(RegExp("/abc/def/(.*)/(.*)/(.*)"), { x,y,z,u,v -> println(x) })
-
-//        router.on("/test", { -> println("test") })
-
-/*        val vnode = h("div", snOpt {
-            on = snEvents {
-                click = { e -> println(e) }
-            }
-        }, arrayOf(
-                h("span", snOpt {
-                    style = snStyle("fontWeight" to "bold", "fontStyle" to "italic")
-                }, arrayOf("This is bold")),
-                " and this is just normal text ",
-                h("a", snOpt {
-                    props = snProps("href" to "/foo", "target" to "_blank")
-                }, "I\'ll take you places!")
-        ))
-        val v = patch(child, vnode)
-        val vnode2 = virtualize("<a href='/top' target='_top'>Test2</a>")
-        patch(v, vnode2)*/
-    }
-
-    override fun dispose(): Map<String, Any> {
-        return mapOf()
-    }
-}
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Css.kt b/src/main/kotlin/pl/treksoft/kvision/core/Css.kt
index f533ebdd..1e6fdbeb 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Css.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Css.kt
@@ -2,6 +2,8 @@ package pl.treksoft.kvision.core
 
 import pl.treksoft.kvision.utils.toHexString
 
+typealias ResString = String
+
 @Suppress("EnumNaming", "EnumEntryName")
 enum class UNIT(val unit: String) {
     px("px"),
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Img.kt b/src/main/kotlin/pl/treksoft/kvision/core/Img.kt
deleted file mode 100644
index 80c65e0b..00000000
--- a/src/main/kotlin/pl/treksoft/kvision/core/Img.kt
+++ /dev/null
@@ -1,10 +0,0 @@
-package pl.treksoft.kvision.core
-
-typealias ResString = String
-
-object Img {
-    operator fun invoke(src: String) = at(src)
-
-    @Suppress("UnsafeCastFromDynamic", "NOTHING_TO_INLINE")
-    private inline fun at(src: String): ResString = pl.treksoft.kvision.require("./img/" + src)
-}
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
index 4cd50550..55c91436 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
@@ -26,8 +26,8 @@ object KVManager {
     private val bootstrapSelectI18n = require("./js/bootstrap-select-i18n.min.js")
     private val bootstrapSelectAjaxCss = require("ajax-bootstrap-select/dist/css/ajax-bootstrap-select.min.css")
     private val bootstrapSelectAjax = require("ajax-bootstrap-select/dist/js/ajax-bootstrap-select.min.js")
-    private val bootstrapSelectAjaxI18n =
-        require("ajax-bootstrap-select/dist/js/locale/ajax-bootstrap-select.pl-PL.min.js")
+//    private val bootstrapSelectAjaxI18n =
+//        require("ajax-bootstrap-select/dist/js/locale/ajax-bootstrap-select.pl-PL.min.js")
     private val trixCss = require("trix/dist/trix.css")
     private val trix = require("trix")
     private val bootstrapDateTimePickerCss = require("bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css")
diff --git a/src/main/assets/css/style.css b/src/main/resources/css/style.css
index 3e7ee728..3e7ee728 100644
--- a/src/main/assets/css/style.css
+++ b/src/main/resources/css/style.css
diff --git a/src/main/assets/js/bootstrap-select-i18n.min.js b/src/main/resources/js/bootstrap-select-i18n.min.js
index 4428d3c0..4428d3c0 100644
--- a/src/main/assets/js/bootstrap-select-i18n.min.js
+++ b/src/main/resources/js/bootstrap-select-i18n.min.js
diff --git a/src/main/web/index.html b/src/main/web/index.html
index 4dfaccf4..2d4a019a 100644
--- a/src/main/web/index.html
+++ b/src/main/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>KVision Showcase</title>
+    <title>KVision</title>
     <script type="text/javascript" src="main.bundle.js"></script>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -14,6 +14,5 @@
     <![endif]-->
 </head>
 <body>
-<div id="showcase"></div>
 </body>
 </html>
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
index 87c0e87f..808ca86d 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
@@ -57,4 +57,6 @@ interface WSpec : DomSpec {
         }
     }
 
-}
\ No newline at end of file
+}
+
+external fun require(name: String): dynamic
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt
index 8afa7317..283847e8 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt
@@ -1,10 +1,10 @@
 package test.pl.treksoft.kvision.html
 
-import pl.treksoft.kvision.core.Img
 import pl.treksoft.kvision.core.Root
 import pl.treksoft.kvision.html.IMAGESHAPE
 import pl.treksoft.kvision.html.Image
 import test.pl.treksoft.kvision.DomSpec
+import test.pl.treksoft.kvision.require
 import kotlin.browser.document
 import kotlin.test.Test
 import kotlin.test.assertEquals
@@ -15,7 +15,7 @@ class ImageSpec : DomSpec {
     fun render() {
         run {
             val root = Root("test")
-            val res = Img("kotlin.png")
+            val res = require("./img/placeholder.png")
             val image = Image(res, "Image", true, IMAGESHAPE.ROUNDED, true)
             root.add(image)
             val element = document.getElementById("test")