Testing framework

30 files changed, 1146 insertions, 47 deletions

diff --git a/build.gradle b/build.gradle
index fc9e4a1f..c9cf1563 100644
--- a/build.gradle
+++ b/build.gradle
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.1.4'
+    ext.kotlin_version = '1.1.4-3'
 
     repositories {
         jcenter()
@@ -21,18 +21,34 @@ apply plugin: 'org.jetbrains.kotlin.frontend'
 repositories {
     jcenter()
     maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' }
+    maven { url = 'https://dl.bintray.com/rjaros/kotlin' }
 }
 
 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.0"
+    compile "pl.treksoft:navigo-kotlin:0.0.1"
+
 }
 
 kotlinFrontend {
     npm {
+        dependency "jquery"
+        dependency "bootstrap"
+        dependency "css-loader"
         dependency "style-loader"
-        dependency ("snabbdom", "0.7.0")
+        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("snabbdom", "0.6.9")
+        dependency "snabbdom-virtualize"
+        dependency "navigo"
         devDependency("karma")
     }
 
@@ -43,17 +59,6 @@ kotlinFrontend {
 
     define "PRODUCTION", false
 
-//    rollupBundle {
-//        bundleName = "rolledUp"
-//    }
-
-//    allBundles {
-//        /* set properties for all bundles */
-//    }
-
-//    bundle("someBundler") {
-//        ....
-//    }
 }
 
 compileKotlin2Js {
@@ -61,7 +66,6 @@ compileKotlin2Js {
     kotlinOptions.outputFile = "$project.buildDir.path/js/${project.name}.js"
     kotlinOptions.sourceMap = true
     kotlinOptions.moduleKind = 'commonjs'
-    kotlinOptions.main = "call"
 }
 
 compileTestKotlin2Js {
@@ -69,6 +73,14 @@ compileTestKotlin2Js {
     kotlinOptions.outputFile = "$project.buildDir.path/js-tests/${project.name}-tests.js"
     kotlinOptions.sourceMap = true
     kotlinOptions.moduleKind = 'commonjs'
-//    kotlinOptions.moduleName = project.name + "-test"
-    kotlinOptions.main = "call"
+}
+
+task copyResources(type: Copy) {
+    from "src/main/assets"
+    into file(buildDir.path + "/js")
+}
+
+afterEvaluate {
+    tasks.getByName("webpack-bundle") { dependsOn(copyResources) }
+    tasks.getByName("webpack-run") { dependsOn(copyResources) }
 }
diff --git a/src/main/assets/img/kotlin.png b/src/main/assets/img/kotlin.png
new file mode 100644
index 00000000..4ac96a24
--- /dev/null
+++ b/src/main/assets/img/kotlin.png
diff --git a/src/main/kotlin/pl/treksoft/kvision/Application.kt b/src/main/kotlin/pl/treksoft/kvision/ApplicationBase.kt
index a7b3d465..a7b3d465 100644
--- a/src/main/kotlin/pl/treksoft/kvision/Application.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/ApplicationBase.kt
diff --git a/src/main/kotlin/pl/treksoft/kvision/main.kt b/src/main/kotlin/pl/treksoft/kvision/Main.kt
index 01ce118f..918cd51f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/main.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/Main.kt
@@ -26,15 +26,10 @@ fun main(args: Array<String>) {
 }
 
 fun start(state: dynamic): ApplicationBase? {
-    if (document.body?.hasClass("kvision") ?: false) {
-        val application = MainApplication()
-
-        @Suppress("UnsafeCastFromDynamic")
-        application.start(state?.appState ?: emptyMap())
-
-        return application
-    } else {
-        return null
-    }
+    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/MainApplication.kt b/src/main/kotlin/pl/treksoft/kvision/MainApplication.kt
deleted file mode 100644
index 92bcca53..00000000
--- a/src/main/kotlin/pl/treksoft/kvision/MainApplication.kt
+++ /dev/null
@@ -1,11 +0,0 @@
-package pl.treksoft.kvision
-
-import kotlin.browser.*
-
-class MainApplication : ApplicationBase() {
-
-    override fun start(state: Map<String, Any>) {
-    }
-
-    override fun dispose() = mapOf<String, Any>()
-}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
new file mode 100644
index 00000000..caa66269
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
@@ -0,0 +1,102 @@
+package pl.treksoft.kvision
+
+import pl.treksoft.kvision.basic.Label
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Img
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.core.Root
+import pl.treksoft.kvision.dropdown.DropDown
+import pl.treksoft.kvision.html.*
+import pl.treksoft.kvision.html.TAG.H1
+import pl.treksoft.kvision.routing.routing
+
+class Showcase : ApplicationBase() {
+
+    override fun start(state: Map<String, Any>) {
+        val root = Root("showcase")
+        val container = Container(setOf("abc", "def"))
+        val h1 = Tag(H1, "To jest <i>test pisania</i> tekstu", false, ALIGN.NONE, 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 dd = DropDown("Dropdown", listOf("DAsdasd asdasdas das", "dasdasd asdasdas das"), "flag")
+        root.add(dd)
+
+        val p = Tag(TAG.P, "To jest prawo", align = ALIGN.RIGHT)
+        p.title = "Tytuł"
+        root.add(p)
+        val del = InTag(INTAG.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 img = Image(Img("kotlin.png"), "Image", true, IMAGE_SHAPE.ROUNDED)
+        root.add(img)
+
+        val button = Button("To jest przycisk FA", "fa-flag", BUTTON_STYLE.DANGER)
+        button.setEventListener<Button> {
+            click = { _ -> println(self.text) }
+        }
+        root.add(button)
+        val button2 = Button("To jest przycisk", "flag", BUTTON_STYLE.DANGER)
+        button2.setEventListener {
+            click = { e ->
+                println("2" + e)
+                button.setEventListener {
+                    click = null
+                }
+            }
+        }
+        root.add(button2)
+        val button3 = Button("To jest przycisk IMG", image = Img("kotlin.png"))
+        button3.setEventListener {
+            click = { e ->
+                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()
+
+//        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(container, vnode)
+        val vnode2 = virtualize("<a href='/top' target='_top'>Test2</a>")
+        patch(v, vnode2)*/
+    }
+
+    override fun dispose(): Map<String, Any> {
+        KVManager.shutdown()
+        return mapOf<String, Any>()
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/basic/Label.kt b/src/main/kotlin/pl/treksoft/kvision/basic/Label.kt
new file mode 100644
index 00000000..c0aa5ad2
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/basic/Label.kt
@@ -0,0 +1,7 @@
+package pl.treksoft.kvision.basic
+
+import pl.treksoft.kvision.html.InTag
+import pl.treksoft.kvision.html.INTAG
+
+open class Label(text: String, rich: Boolean = false) : InTag(INTAG.SPAN, text, rich) {
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Container.kt b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
new file mode 100644
index 00000000..575fa73b
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
@@ -0,0 +1,32 @@
+package pl.treksoft.kvision.core
+
+import com.github.snabbdom.VNode
+
+open class Container(classes: Set<String> = setOf()) : Widget(classes) {
+    private val children: MutableList<Widget> = mutableListOf()
+
+    override fun render(): VNode {
+        return kvh("div", childrenVNodes())
+    }
+
+    protected open fun childrenVNodes(): Array<VNode> {
+        return children.filter { it.visible }.map { it.render() }.toTypedArray()
+    }
+
+    open fun add(child: Widget) {
+        children.add(child)
+        child.parent = this
+        refresh()
+    }
+
+    open fun remove(child: Widget) {
+        children.remove(child)
+        child.clearParent()
+        refresh()
+    }
+
+    open fun removeAt(index: Int) {
+        children.removeAt(index).clearParent()
+        refresh()
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Img.kt b/src/main/kotlin/pl/treksoft/kvision/core/Img.kt
new file mode 100644
index 00000000..08063a4a
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Img.kt
@@ -0,0 +1,10 @@
+package pl.treksoft.kvision.core
+
+typealias ResString = String
+
+object Img {
+    operator fun invoke(src: ResString) = at(src)
+
+    @Suppress("UnsafeCastFromDynamic", "NOTHING_TO_INLINE")
+    private inline fun at(src: ResString): String = 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
new file mode 100644
index 00000000..97f0fd62
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
@@ -0,0 +1,34 @@
+package pl.treksoft.kvision.core
+
+import com.github.snabbdom.*
+import pl.treksoft.kvision.require
+import pl.treksoft.kvision.routing.routing
+import kotlin.browser.document
+import kotlin.dom.clear
+
+object KVManager {
+    private val bootstrap_webpack = require("bootstrap-webpack")
+    private val font_awesome_webpack = require("font-awesome-webpack")
+
+    private val sdPatch = Snabbdom.init(arrayOf(classModule, attributesModule, propsModule, styleModule, eventListenersModule, datasetModule))
+    private val sdVirtualize = require("snabbdom-virtualize/strings").default
+
+    internal fun patch(id: String, vnode: VNode): VNode {
+        val container = document.getElementById(id)
+        container?.clear()
+        return sdPatch(container, vnode)
+    }
+
+    internal fun patch(oldVNode: VNode, newVNode: VNode): VNode {
+        return sdPatch(oldVNode, newVNode)
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    internal fun virtualize(html: String): VNode {
+        return sdVirtualize(html)
+    }
+
+    fun shutdown() {
+        routing.destroy()
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/KVObject.kt b/src/main/kotlin/pl/treksoft/kvision/core/KVObject.kt
new file mode 100644
index 00000000..aa90ccf8
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/core/KVObject.kt
@@ -0,0 +1,3 @@
+package pl.treksoft.kvision.core
+
+interface KVObject
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Root.kt b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
new file mode 100644
index 00000000..b5911c36
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
@@ -0,0 +1,27 @@
+package pl.treksoft.kvision.core
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+
+class Root(id: String, private val fluid: Boolean = false) : Container() {
+    private var vnode: VNode = render()
+
+    init {
+        vnode = KVManager.patch(id, this.render())
+        this.id = id
+    }
+
+    override fun render(): VNode {
+        return kvh("div#" + id, childrenVNodes())
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val css = if (fluid) "container-fluid" else "container"
+        return super.getSnClass() + (css to true)
+    }
+
+    override fun refresh() {
+        vnode = KVManager.patch(vnode, render())
+    }
+
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
new file mode 100644
index 00000000..8da8b0b6
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
@@ -0,0 +1,121 @@
+package pl.treksoft.kvision.core
+
+import com.github.snabbdom.On
+import com.github.snabbdom.VNode
+import com.github.snabbdom.VNodeData
+import com.github.snabbdom.h
+import pl.treksoft.kvision.snabbdom.*
+
+open class Widget(classes: Set<String> = setOf()) : KVObject {
+
+    val classes = classes.toMutableSet()
+    val listeners = mutableListOf<SnOn<Widget>.() -> Unit>()
+
+    var parent: Widget? = null
+        internal set
+
+    var visible: Boolean = true
+        set(value) {
+            field = value
+            refresh()
+        }
+    var title: String? = null
+        set(value) {
+            field = value
+            refresh()
+        }
+    var id: String? = null
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    internal open fun render(): VNode {
+        return kvh("div")
+    }
+
+    protected open fun kvh(s: String): VNode {
+        return h(s, getSnOpt())
+    }
+
+    protected open fun kvh(s: String, children: Array<dynamic>): VNode {
+        return h(s, getSnOpt(), children)
+    }
+
+    protected open fun getSnOpt(): VNodeData {
+        return snOpt {
+            attrs = snAttrs(* getSnAttrs().toTypedArray())
+            style = snStyle(* getSnStyle().toTypedArray())
+            `class` = snClasses(* getSnClass().toTypedArray())
+            on = getSnOn()
+        }
+    }
+
+    protected open fun getSnStyle(): List<StringPair> {
+        return listOf()
+    }
+
+    protected open fun getSnClass(): List<StringBoolPair> {
+        return classes.map { c -> c to true } + if (visible) listOf() else listOf("hidden" to true)
+    }
+
+
+    protected open fun getSnAttrs(): List<StringPair> {
+        val snattrs = mutableListOf<StringPair>()
+        if (id != null) {
+            snattrs.add("id" to id.orEmpty())
+        }
+        if (title != null) {
+            snattrs.add("title" to title.orEmpty())
+        }
+        return snattrs
+    }
+
+    protected open fun getSnOn(): On {
+        val handlers = On(this)
+        listeners.forEach { on -> (handlers::apply)(on) }
+        return handlers
+    }
+
+    @Suppress("UNCHECKED_CAST")
+    open fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit) {
+        listeners.add(block as SnOn<Widget>.() -> Unit)
+        refresh()
+    }
+
+    open fun setEventListener(block: SnOn<Widget>.() -> Unit) {
+        listeners.add(block)
+        refresh()
+    }
+
+    open fun removeEventListeners() {
+        listeners.clear()
+        refresh()
+    }
+
+    open fun show() {
+        visible = true
+    }
+
+    open fun hide() {
+        visible = false
+    }
+
+    open fun addCssClass(css: String) {
+        this.classes.add(css)
+        refresh()
+    }
+
+    open fun removeCssClass(css: String) {
+        this.classes.remove(css)
+        refresh()
+    }
+
+    internal fun clearParent() {
+        this.parent = null
+    }
+
+    protected open fun refresh() {
+        this.parent?.refresh()
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
new file mode 100644
index 00000000..eef229e4
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
@@ -0,0 +1,55 @@
+package pl.treksoft.kvision.dropdown
+
+import com.github.snabbdom.VNode
+import com.github.snabbdom.h
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.core.ResString
+import pl.treksoft.kvision.html.*
+import pl.treksoft.kvision.snabbdom.StringPair
+
+open class DropDown(text: String, elements: List<String>, icon: String? = null, style: BUTTON_STYLE = BUTTON_STYLE.DEFAULT, size: BUTTON_SIZE? = null,
+                    block: Boolean = false, disabled: Boolean = false, image: ResString? = null, classes: Set<String> = setOf()) : Container(classes) {
+    val idk = "abc"
+    val button: DropDownButton = DropDownButton(idk, text, icon, style, size, block, disabled, image, setOf("dropdown"))
+    val list: DropDownListTag = DropDownListTag(idk, elements, setOf("dropdown-menu"))
+
+    init {
+        this.addCssClass("dropdown")
+        this.add(button)
+        this.add(list)
+    }
+}
+
+open class DropDownButton(id: String, text: String, icon: String? = null, style: BUTTON_STYLE = BUTTON_STYLE.DEFAULT, size: BUTTON_SIZE? = null,
+                          block: Boolean = false, disabled: Boolean = false, image: ResString? = null, classes: Set<String> = setOf()) :
+        Button(text, icon, style, size, block, disabled, image, classes) {
+
+    init {
+        this.id = id
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        return super.getSnAttrs() + listOf("data-toggle" to "dropdown", "aria-haspopup" to "true", "aria-expanded" to "false")
+    }
+}
+
+open class DropDownListTag(val ariaId: String, elements: List<String>, classes: Set<String> = setOf()) : ListTag(LIST.UL, elements, true, classes) {
+
+    override fun render(): VNode {
+        val children = elements.map { el -> element("li", el, true) }.toTypedArray()
+        return kvh(type.tagName, children)
+    }
+
+    private fun element(name: String, value: String, rich: Boolean): VNode {
+        if (rich) {
+            return h(name, arrayOf(KVManager.virtualize("<a href='#'>$value</a>")))
+        } else {
+            return h(name, value)
+        }
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        return super.getSnAttrs() + listOf("aria-labelledby" to ariaId)
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
new file mode 100644
index 00000000..81df4eaf
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
@@ -0,0 +1,99 @@
+package pl.treksoft.kvision.html
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.core.ResString
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+import pl.treksoft.kvision.snabbdom.StringPair
+
+enum class BUTTON_STYLE(val className: String) {
+    DEFAULT("btn-default"),
+    PRIMARY("btn-primary"),
+    SUCCESS("btn-success"),
+    INFO("btn-info"),
+    WARNING("btn-warning"),
+    DANGER("btn-danger"),
+    LINK("btn-link")
+}
+
+enum class BUTTON_SIZE(val className: String) {
+    LARGE("btn-lg"),
+    SMALL("btn-sm"),
+    XSMALL("btn-xs")
+}
+
+open class Button(text: String, icon: String? = null, style: BUTTON_STYLE = BUTTON_STYLE.DEFAULT, size: BUTTON_SIZE? = null,
+                  block: Boolean = false, disabled: Boolean = false, image: ResString? = null, classes: Set<String> = setOf()) : Widget(classes) {
+    var text = text
+        set(value) {
+            field = value
+            refresh()
+        }
+    var icon = icon
+        set(value) {
+            field = value
+            refresh()
+        }
+    var style = style
+        set(value) {
+            field = value
+            refresh()
+        }
+    var size = size
+        set(value) {
+            field = value
+            refresh()
+        }
+    var block = block
+        set(value) {
+            field = value
+            refresh()
+        }
+    var disabled = disabled
+        set(value) {
+            field = value
+            refresh()
+        }
+    var image = image
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun render(): VNode {
+        val t = if (icon != null) {
+            if (icon?.startsWith("fa-") == true) {
+                arrayOf(KVManager.virtualize("<i class='fa $icon fa-lg'></i>"), " " + text)
+            } else {
+                arrayOf(KVManager.virtualize("<span class='glyphicon glyphicon-$icon'></span>"), " " + text)
+            }
+        } else if (image != null) {
+            arrayOf(KVManager.virtualize("<img src='$image' alt='' />"), " " + text)
+        } else {
+            arrayOf(text)
+        }
+        return kvh("button", t)
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        cl.add("btn" to true)
+        cl.add(style.className to true)
+        if (size != null) {
+            cl.add(size?.className.orEmpty() to true)
+        }
+        if (block) {
+            cl.add("btn-block" to true)
+        }
+        if (disabled) {
+            cl.add("disabled" to true)
+        }
+        return cl
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        return super.getSnAttrs() + ("type" to "button")
+    }
+
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
new file mode 100644
index 00000000..3e9fe5d6
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
@@ -0,0 +1,66 @@
+package pl.treksoft.kvision.html
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.ResString
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+import pl.treksoft.kvision.snabbdom.StringPair
+
+enum class IMAGE_SHAPE(val className: String) {
+    ROUNDED("img-rounded"),
+    CIRCLE("img-circle"),
+    THUMBNAIL("img-thumbnail")
+}
+
+open class Image(src: ResString, alt: String? = null, responsive: Boolean = false, shape: IMAGE_SHAPE? = null, centered: Boolean = false, classes: Set<String> = setOf()) : Widget(classes) {
+    var src = src
+        set(value) {
+            field = value
+            refresh()
+        }
+    var alt = alt
+        set(value) {
+            field = value
+            refresh()
+        }
+    var responsive = responsive
+        set(value) {
+            field = value
+            refresh()
+        }
+    var shape = shape
+        set(value) {
+            field = value
+            refresh()
+        }
+    var centered = centered
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun render(): VNode {
+        return kvh("img")
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        val pr = super.getSnAttrs().toMutableList()
+        pr.add("src" to src)
+        if (alt != null) pr.add("alt" to alt.orEmpty())
+        return pr
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        if (responsive) {
+            cl.add("img-responsive" to true)
+        }
+        if (centered) {
+            cl.add("center-block" to true)
+        }
+        if (shape != null) {
+            cl.add(shape?.className.orEmpty() to true)
+        }
+        return cl
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/InTag.kt b/src/main/kotlin/pl/treksoft/kvision/html/InTag.kt
new file mode 100644
index 00000000..88f69435
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/InTag.kt
@@ -0,0 +1,48 @@
+package pl.treksoft.kvision.html
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.core.Widget
+
+enum class INTAG(val tagName: String) {
+    MARK("mark"),
+    DEL("del"),
+    S("s"),
+    INS("ins"),
+    U("u"),
+    SMALL("small"),
+    STRONG("strong"),
+    EM("em"),
+    CITE("cite"),
+    CODE("code"),
+    KBD("kbd"),
+    VAR("var"),
+    SAMP("samp"),
+    SPAN("span")
+}
+
+open class InTag(type: INTAG, text: String, rich: Boolean = false, classes: Set<String> = setOf()) : Widget(classes) {
+    var type = type
+        set(value) {
+            field = value
+            refresh()
+        }
+    var text = text
+        set(value) {
+            field = value
+            refresh()
+        }
+    var rich = rich
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun render(): VNode {
+        if (rich) {
+            return kvh(type.tagName, arrayOf(KVManager.virtualize("<span>$text</span>")))
+        } else {
+            return kvh(type.tagName, arrayOf(text))
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/List.kt b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
new file mode 100644
index 00000000..918f1576
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
@@ -0,0 +1,62 @@
+package pl.treksoft.kvision.html
+
+import com.github.snabbdom.VNode
+import com.github.snabbdom.h
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+
+enum class LIST(val tagName: String) {
+    UL("ul"),
+    OL("ol"),
+    UNSTYLED("ul"),
+    INLINE("ul"),
+    DL("dl"),
+    DL_HORIZ("dl")
+}
+
+open class ListTag(type: LIST, elements: List<String>, rich: Boolean = false, classes: Set<String> = setOf()) : Widget(classes) {
+    var type = type
+        set(value) {
+            field = value
+            refresh()
+        }
+    var elements = elements
+        set(value) {
+            field = value
+            refresh()
+        }
+    var rich = rich
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun render(): VNode {
+        val children = when (type) {
+            LIST.UL, LIST.OL, LIST.UNSTYLED, LIST.INLINE -> elements.map { el -> element("li", el, rich) }
+            LIST.DL, LIST.DL_HORIZ -> elements.mapIndexed { index, el -> element(if (index % 2 == 0) "dt" else "dd", el, rich) }
+        }.toTypedArray()
+        return kvh(type.tagName, children)
+    }
+
+    private fun element(name: String, value: String, rich: Boolean): VNode {
+        if (rich) {
+            return h(name, arrayOf(KVManager.virtualize("<span>$value</span>")))
+        } else {
+            return h(name, value)
+        }
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        if (type == LIST.UNSTYLED) {
+            cl.add("list-unstyled" to true)
+        } else if (type == LIST.INLINE) {
+            cl.add("list-inline" to true)
+        } else if (type == LIST.DL_HORIZ) {
+            cl.add("dl-horizontal" to true)
+        }
+        return cl
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
new file mode 100644
index 00000000..60910707
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
@@ -0,0 +1,69 @@
+package pl.treksoft.kvision.html
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+
+enum class TAG(val tagName: String) {
+    H1("h1"),
+    H2("h2"),
+    H3("h3"),
+    H4("h4"),
+    H5("h5"),
+    H6("h6"),
+    P("p"),
+    ABBR("abbr"),
+    ADDRESS("address"),
+    BLOCKQUOTE("blockquote"),
+    FOOTER("footer"),
+    PRE("pre")
+}
+
+enum class ALIGN(val className: String) {
+    NONE(""),
+    LEFT("text-left"),
+    CENTER("text-center"),
+    RIGHT("text-right"),
+    JUSTIFY("text-justify"),
+    NOWRAP("text-nowrap")
+}
+
+open class Tag(type: TAG, text: String, rich: Boolean = false, align: ALIGN = ALIGN.NONE, classes: Set<String> = setOf()) : Widget(classes) {
+    var type = type
+        set(value) {
+            field = value
+            refresh()
+        }
+    var text = text
+        set(value) {
+            field = value
+            refresh()
+        }
+    var rich = rich
+        set(value) {
+            field = value
+            refresh()
+        }
+    var align = align
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun render(): VNode {
+        if (rich) {
+            return kvh(type.tagName, arrayOf(KVManager.virtualize("<span>$text</span>")))
+        } else {
+            return kvh(type.tagName, arrayOf(text))
+        }
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        if (align != ALIGN.NONE) {
+            cl.add(align.className to true)
+        }
+        return cl
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/pl/treksoft/kvision/routing/Routing.kt b/src/main/kotlin/pl/treksoft/kvision/routing/Routing.kt
new file mode 100644
index 00000000..709f966c
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/routing/Routing.kt
@@ -0,0 +1,7 @@
+package pl.treksoft.kvision.routing
+
+import pl.treksoft.navigo.Navigo
+
+open class Routing : Navigo(null, true, "#!")
+
+val routing = Routing()
diff --git a/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt b/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
new file mode 100644
index 00000000..789417e6
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
@@ -0,0 +1,57 @@
+package pl.treksoft.kvision.snabbdom
+
+import com.github.snabbdom.*
+import pl.treksoft.kvision.core.Widget
+
+external class Object
+
+fun obj(init: dynamic.() -> Unit): dynamic {
+    return (Object()).apply(init)
+}
+
+@Suppress("UnsafeCastFromDynamic")
+private fun VNodeData(): VNodeData = js("({})")
+
+interface SnOn<T> : On {
+    var self: T
+}
+
+fun snOpt(block: VNodeData.() -> Unit) = (VNodeData()::apply)(block)
+
+@Suppress("UnsafeCastFromDynamic")
+internal fun On(widget: Widget): SnOn<Widget> {
+    val obj = js("({})")
+    obj["self"] = widget
+    return obj
+}
+
+typealias StringPair = Pair<String, String>
+typealias StringBoolPair = Pair<String, Boolean>
+
+@Suppress("UnsafeCastFromDynamic")
+fun snStyle(vararg pairs: StringPair): VNodeStyle {
+    return obj {
+        pairs.forEach { (key, value) -> this[key] = value }
+    }
+}
+
+@Suppress("UnsafeCastFromDynamic")
+fun snProps(vararg pairs: StringPair): Props {
+    return obj {
+        pairs.forEach { (key, value) -> this[key] = value }
+    }
+}
+
+@Suppress("UnsafeCastFromDynamic")
+fun snClasses(vararg pairs: StringBoolPair): Classes {
+    return obj {
+        pairs.forEach { (key, value) -> this[key] = value }
+    }
+}
+
+@Suppress("UnsafeCastFromDynamic")
+fun snAttrs(vararg pairs: StringPair): Attrs {
+    return obj {
+        pairs.forEach { (key, value) -> this[key] = value }
+    }
+}
diff --git a/src/main/web/index.html b/src/main/web/index.html
index 254831ca..4dfaccf4 100644
--- a/src/main/web/index.html
+++ b/src/main/web/index.html
@@ -1,9 +1,19 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>KVision</title>
+    <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>
     <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:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
 </head>
-<body class="kvision">
+<body>
+<div id="showcase"></div>
 </body>
 </html>
diff --git a/src/test/kotlin/test/TestMainApplication.kt b/src/test/kotlin/test/TestMainApplication.kt
deleted file mode 100644
index 0f8824f7..00000000
--- a/src/test/kotlin/test/TestMainApplication.kt
+++ /dev/null
@@ -1,8 +0,0 @@
-package test
-
-import org.junit.*
-import kotlin.test.*
-import pl.treksoft.kvision.*
-
-class TestMainApplication {
-}
\ No newline at end of file
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
new file mode 100644
index 00000000..a1a142e7
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
@@ -0,0 +1,48 @@
+package test.pl.treksoft.kvision
+
+import org.w3c.dom.Element
+import org.w3c.dom.HTMLElement
+import pl.treksoft.kvision.core.Root
+import pl.treksoft.kvision.core.Widget
+import kotlin.browser.document
+
+interface TestSpec {
+    fun beforeTest()
+
+    fun afterTest()
+
+    fun run(code: () -> Unit) {
+        beforeTest()
+        code()
+        afterTest()
+    }
+}
+
+interface DomSpec : TestSpec {
+
+    override fun beforeTest() {
+        var fixture = "<div style=\"display: none\"><div id=\"test\"></div></div>";
+        document.body?.insertAdjacentHTML("afterbegin", fixture);
+    }
+
+    override fun afterTest() {
+        val div = document.getElementById("test")
+        div?.remove()
+    }
+
+}
+
+interface WSpec : DomSpec {
+
+    fun runW(code: (widget: Widget, element: Element?) -> Unit) {
+        beforeTest()
+        val root = Root("test")
+        val widget = Widget()
+        widget.id = "test_id"
+        root.add(widget)
+        val element = document.getElementById("test_id")
+        code(widget, element)
+        afterTest()
+    }
+
+}
\ No newline at end of file
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
new file mode 100644
index 00000000..f79d24df
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
@@ -0,0 +1,68 @@
+package test.pl.treksoft.kvision.core
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Root
+import pl.treksoft.kvision.core.Widget
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+import kotlin.test.assertTrue
+
+class ContainerSpec : DomSpec {
+
+    @Test
+    fun add() {
+        run {
+            val root = Root("test")
+            val container = Container()
+            val child1 = Widget()
+            child1.id = "child1"
+            val child2 = Widget()
+            child2.id = "child2"
+            container.add(child1)
+            container.add(child2)
+            root.add(container)
+            val elem1 = document.getElementById("child1")
+            val elem2 = document.getElementById("child2")
+            assertTrue("Container renders children") { elem1 != null && elem2 != null }
+        }
+    }
+
+    @Test
+    fun remove() {
+        run {
+            val root = Root("test")
+            val container = Container()
+            val child1 = Widget()
+            child1.id = "child1"
+            val child2 = Widget()
+            child2.id = "child2"
+            container.add(child1)
+            container.add(child2)
+            root.add(container)
+            container.remove(child2)
+            val elem1 = document.getElementById("child1")
+            val elem2 = document.getElementById("child2")
+            assertTrue("Container renders children") { elem1 != null && elem2 == null }
+        }
+    }
+
+    @Test
+    fun removeAt() {
+        run {
+            val root = Root("test")
+            val container = Container()
+            val child1 = Widget()
+            child1.id = "child1"
+            val child2 = Widget()
+            child2.id = "child2"
+            container.add(child1)
+            container.add(child2)
+            root.add(container)
+            container.removeAt(0)
+            val elem1 = document.getElementById("child1")
+            val elem2 = document.getElementById("child2")
+            assertTrue("Container renders children") { elem1 == null && elem2 != null }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/KVManagerSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/KVManagerSpec.kt
new file mode 100644
index 00000000..d123cf310
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/KVManagerSpec.kt
@@ -0,0 +1,58 @@
+package test.pl.treksoft.kvision.core
+
+import com.github.snabbdom.h
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.snabbdom.snAttrs
+import pl.treksoft.kvision.snabbdom.snOpt
+import pl.treksoft.kvision.snabbdom.snStyle
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+import kotlin.test.assertTrue
+
+class KVManagerSpec : DomSpec {
+
+    @Test
+    fun patch_ById() {
+        run {
+            val vnode = h("span", snOpt {
+                attrs = snAttrs("id" to "test_new")
+                style = snStyle("fontWeight" to "bold", "fontStyle" to "italic")
+            })
+            KVManager.patch("test", vnode)
+            assertTrue("Original container should not exist") { document.getElementById("test") == null }
+            assertTrue("New container should exist") { document.getElementById("test_new") != null }
+        }
+    }
+
+    @Test
+    fun patch_ByVnode() {
+        run {
+            val vnode1 = h("span", snOpt {
+                attrs = snAttrs("id" to "test2")
+                style = snStyle("fontWeight" to "bold", "fontStyle" to "italic")
+            })
+            val vnode2 = KVManager.patch("test", vnode1)
+            val vnode3 = h("span", snOpt {
+                attrs = snAttrs("id" to "test3")
+                style = snStyle("fontWeight" to "bold", "fontStyle" to "italic")
+            })
+            KVManager.patch(vnode2, vnode3)
+            assertTrue("First container should not exist") { document.getElementById("test") == null }
+            assertTrue("Second container should not exist") { document.getElementById("test2") == null }
+            assertTrue("Third container should exist") { document.getElementById("test3") != null }
+        }
+    }
+
+    @Test
+    fun virtualize() {
+        run {
+            val node = KVManager.virtualize("<div id=\"virtual\"><p>Virtual node</p></div>")
+            KVManager.patch("test", node)
+            assertTrue("Original container should not exist") { document.getElementById("test") == null }
+            val v = document.getElementById("virtual")
+            assertTrue("New container should exist") { v != null }
+            assertTrue("New container should have one child") { v?.children?.length == 1 }
+        }
+    }
+}
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/RootSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/RootSpec.kt
new file mode 100644
index 00000000..b7435e73
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/RootSpec.kt
@@ -0,0 +1,29 @@
+package test.pl.treksoft.kvision.core
+
+import pl.treksoft.kvision.core.Root
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+import kotlin.test.assertTrue
+
+class RootSpec : DomSpec {
+
+    @Test
+    fun getSnClass() {
+        run {
+            val root = Root("test")
+            val rootElem = document.getElementById("test")
+            assertTrue("Standard root container has correct css class") { rootElem?.className == "container" }
+        }
+    }
+
+    @Test
+    fun getSnClass_Fluid() {
+        run {
+            val root = Root("test", fluid = true)
+            val rootElem = document.getElementById("test")
+            assertTrue("Fluid root container has correct css class") { rootElem?.className == "container-fluid" }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
new file mode 100644
index 00000000..214ee1f5
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
@@ -0,0 +1,89 @@
+package test.pl.treksoft.kvision.core
+
+import test.pl.treksoft.kvision.WSpec
+import kotlin.browser.document
+import kotlin.test.Test
+import kotlin.test.assertTrue
+
+class WidgetSpec : WSpec {
+
+    @Test
+    fun render() {
+        runW { widget, element ->
+            widget.addCssClass("testClass")
+            widget.title = "test_title"
+            val vnode = widget.render()
+            assertTrue("VNode has correct class attribute") { vnode.data.`class`.testClass == true }
+            assertTrue("VNode has correct id attribute") { vnode.data.attrs.id == "test_id" }
+            assertTrue("VNode has correct title attribute") { vnode.data.attrs.title == "test_title" }
+        }
+    }
+
+    @Test
+    fun render_ToDom() {
+        runW { widget, element ->
+            widget.addCssClass("testClass")
+            widget.title = "test_title"
+            assertTrue("New element should be created") { element != null }
+            assertTrue("New element should have correct css class") { element?.className == "testClass" }
+            assertTrue("New element should have correct id attribute") { element?.id == "test_id" }
+            assertTrue("New element should have correct title attribute") { element?.getAttribute("title") == "test_title" }
+        }
+    }
+
+    @Test
+    fun hide() {
+        runW { widget, element ->
+            widget.hide()
+            val element = document.getElementById("test_id")
+            assertTrue("Hidden element should not be accessible") { element == null }
+        }
+    }
+
+    @Test
+    fun show() {
+        runW { widget, element ->
+            widget.hide()
+            widget.show()
+            val element = document.getElementById("test_id")
+            assertTrue("Visible element should be accessible") { element != null }
+        }
+    }
+
+    @Test
+    fun addCssClass() {
+        runW { widget, element ->
+            widget.addCssClass("test_class1")
+            widget.addCssClass("test_class2")
+            assertTrue("Element should have correct css classes") { element?.className == "test_class1 test_class2" }
+        }
+    }
+
+    @Test
+    fun removeCssClass() {
+        runW { widget, element ->
+            widget.addCssClass("test_class1")
+            widget.addCssClass("test_class2")
+            widget.removeCssClass("test_class1")
+            assertTrue("Element should have correct css class") { element?.className == "test_class2" }
+        }
+    }
+
+    @Test
+    fun setEventListener() {
+        runW { widget, element ->
+            widget.setEventListener { click = { _ -> } }
+            assertTrue("Element should have an event listener") { widget.listeners.size == 1 }
+        }
+    }
+
+    @Test
+    fun removeEventListener() {
+        runW { widget, element ->
+            widget.setEventListener { click = { _ -> } }
+            widget.removeEventListeners()
+            assertTrue("Element should not have any event listener") { widget.listeners.size == 0 }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/webpack.config.d/bootstrap.js b/webpack.config.d/bootstrap.js
new file mode 100644
index 00000000..32a7c4d0
--- /dev/null
+++ b/webpack.config.d/bootstrap.js
@@ -0,0 +1,4 @@
+config.module.rules.push({test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'});
+config.module.rules.push({test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'});
+config.module.rules.push({test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'});
+config.module.rules.push({test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'});
diff --git a/webpack.config.d/file.js b/webpack.config.d/file.js
new file mode 100644
index 00000000..8b853e7e
--- /dev/null
+++ b/webpack.config.d/file.js
@@ -0,0 +1,6 @@
+config.module.rules.push(
+    {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loader: 'file-loader'
+    }
+);
\ No newline at end of file