Showcase example

33 files changed, 1547 insertions, 0 deletions

diff --git a/examples/showcase/.gitignore b/examples/showcase/.gitignore
new file mode 100644
index 00000000..4d615936
--- /dev/null
+++ b/examples/showcase/.gitignore
@@ -0,0 +1,4 @@
+.*/
+build/
+out/
+*.iml
\ No newline at end of file
diff --git a/examples/showcase/build.gradle b/examples/showcase/build.gradle
new file mode 100644
index 00000000..8ffec081
--- /dev/null
+++ b/examples/showcase/build.gradle
@@ -0,0 +1,92 @@
+buildscript {
+    ext.kotlin_version = '1.2.21'
+    ext.production = (findProperty('prod') ?: 'false') == 'true'
+    ext.npmdeps = new URL("file:///home/rjaros/git/kvision/npm.dependencies").getText()
+
+    repositories {
+        jcenter()
+        maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
+        maven { url "https://plugins.gradle.org/m2/" }
+    }
+
+    dependencies {
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+        classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:0.0.26"
+        classpath "gradle.plugin.io.gitlab.arturbosch.detekt:detekt-gradle-plugin:1.0.0.RC6-2"
+    }
+}
+
+apply plugin: 'kotlin2js'
+apply plugin: 'org.jetbrains.kotlin.frontend'
+apply plugin: "io.gitlab.arturbosch.detekt"
+
+repositories {
+    jcenter()
+    maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' }
+    maven { url = 'https://dl.bintray.com/rjaros/kotlin' }
+    maven {
+	url "file:///home/rjaros/kotlin/mvn/"
+    }
+}
+
+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 "pl.treksoft:kvision:0.0.1"
+}
+
+kotlinFrontend {
+    npm {
+        npmdeps.eachLine { line ->
+            def (name, version) = line.tokenize(" ")
+            dependency(name, version)
+        }
+        devDependency("karma")
+    }
+
+    webpackBundle {
+        bundleName = "main"
+        contentPath = file('src/main/web')
+    }
+
+    define "PRODUCTION", production
+
+}
+
+detekt {
+    version = "1.0.0.RC6-2"
+    profile("main") {
+        input = "$projectDir/src/main/kotlin"
+        config = "$projectDir/detekt.yml"
+        filters = ".*test.*,.*/resources/.*,.*/tmp/.*"
+    }
+}
+
+compileKotlin2Js {
+    kotlinOptions.metaInfo = true
+    kotlinOptions.outputFile = "$project.buildDir.path/js/${project.name}.js"
+    kotlinOptions.sourceMap = !production
+    kotlinOptions.moduleKind = 'commonjs'
+}
+
+compileTestKotlin2Js {
+    kotlinOptions.metaInfo = true
+    kotlinOptions.outputFile = "$project.buildDir.path/js-tests/${project.name}-tests.js"
+    kotlinOptions.sourceMap = !production
+    kotlinOptions.moduleKind = 'commonjs'
+}
+
+task copyResources(type: Copy) {
+    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, copyResourcesForTests) }
+}
diff --git a/examples/showcase/detekt.yml b/examples/showcase/detekt.yml
new file mode 100644
index 00000000..a6fdea75
--- /dev/null
+++ b/examples/showcase/detekt.yml
@@ -0,0 +1,292 @@
+autoCorrect: true
+failFast: false
+
+build:
+  warningThreshold: 5
+  failThreshold: 10
+  weights:
+    complexity: 2
+    formatting: 1
+    LongParameterList: 1
+    comments: 1
+
+processors:
+  active: true
+  exclude:
+  # - 'FunctionCountProcessor'
+  # - 'PropertyCountProcessor'
+  # - 'ClassCountProcessor'
+  # - 'PackageCountProcessor'
+  # - 'KtFileCountProcessor'
+
+console-reports:
+  active: true
+  exclude:
+  #  - 'ProjectStatisticsReport'
+  #  - 'ComplexityReport'
+  #  - 'NotificationReport'
+  #  - 'FindingsReport'
+  #  - 'BuildFailureReport'
+
+output-reports:
+  active: true
+  exclude:
+  #  - 'PlainOutputReport'
+  #  - 'XmlOutputReport'
+
+potential-bugs:
+  active: true
+  DuplicateCaseInWhenExpression:
+    active: true
+  EqualsAlwaysReturnsTrueOrFalse:
+    active: false
+  EqualsWithHashCodeExist:
+    active: true
+  WrongEqualsTypeParameter:
+    active: false
+  ExplicitGarbageCollectionCall:
+    active: true
+  UnreachableCode:
+    active: true
+  LateinitUsage:
+    active: false
+  UnsafeCallOnNullableType:
+    active: false
+  UnsafeCast:
+    active: false
+  UselessPostfixExpression:
+    active: false
+
+performance:
+  active: true
+  ForEachOnRange:
+    active: true
+  SpreadOperator:
+    active: true
+  UnnecessaryTemporaryInstantiation:
+    active: true
+
+exceptions:
+  active: true
+  TooGenericExceptionCatched:
+    active: true
+    exceptions:
+      - ArrayIndexOutOfBoundsException
+      - Error
+      - Exception
+      - IllegalMonitorStateException
+      - IndexOutOfBoundsException
+      - NullPointerException
+      - RuntimeException
+  TooGenericExceptionThrown:
+    active: true
+    exceptions:
+      - Throwable
+      - ThrowError
+      - ThrowException
+      - ThrowNullPointerException
+      - ThrowRuntimeException
+      - ThrowThrowable
+
+empty-blocks:
+  active: true
+  EmptyCatchBlock:
+    active: true
+  EmptyClassBlock:
+    active: true
+  EmptyDefaultConstructor:
+    active: true
+  EmptyDoWhileBlock:
+    active: true
+  EmptyElseBlock:
+    active: true
+  EmptyFinallyBlock:
+    active: true
+  EmptyForBlock:
+    active: true
+  EmptyFunctionBlock:
+    active: true
+  EmptyIfBlock:
+    active: true
+  EmptyInitBlock:
+    active: true
+  EmptySecondaryConstructor:
+    active: true
+  EmptyWhenBlock:
+    active: true
+  EmptyWhileBlock:
+    active: true
+
+complexity:
+  active: true
+  LongMethod:
+    threshold: 20
+  LongParameterList:
+    threshold: 5
+  LargeClass:
+    threshold: 150
+  ComplexMethod:
+    threshold: 10
+  TooManyFunctions:
+    threshold: 10
+  ComplexCondition:
+    threshold: 3
+  LabeledExpression:
+    active: false
+  StringLiteralDuplication:
+    active: false
+    threshold: 2
+    ignoreAnnotation: true
+    excludeStringsWithLessThan5Characters: true
+    ignoreStringsRegex: '$^'
+
+code-smell:
+  active: true
+  FeatureEnvy:
+    threshold: 0.5
+    weight: 0.45
+    base: 0.5
+
+formatting:
+  active: true
+  useTabs: true
+  Indentation:
+    active: false
+    indentSize: 4
+  ConsecutiveBlankLines:
+    active: true
+    autoCorrect: true
+  MultipleSpaces:
+    active: true
+    autoCorrect: true
+  SpacingAfterComma:
+    active: true
+    autoCorrect: true
+  SpacingAfterKeyword:
+    active: true
+    autoCorrect: true
+  SpacingAroundColon:
+    active: true
+    autoCorrect: true
+  SpacingAroundCurlyBraces:
+    active: true
+    autoCorrect: true
+  SpacingAroundOperator:
+    active: true
+    autoCorrect: true
+  TrailingSpaces:
+    active: true
+    autoCorrect: true
+  UnusedImports:
+    active: true
+    autoCorrect: true
+  OptionalSemicolon:
+    active: true
+    autoCorrect: true
+  OptionalUnit:
+    active: true
+    autoCorrect: true
+  ExpressionBodySyntax:
+    active: false
+    autoCorrect: false
+  ExpressionBodySyntaxLineBreaks:
+    active: false
+    autoCorrect: false
+  OptionalReturnKeyword:
+    active: true
+    autoCorrect: false
+
+style:
+  active: true
+  ReturnCount:
+    active: true
+    max: 2
+  NewLineAtEndOfFile:
+    active: true
+  OptionalAbstractKeyword:
+    active: true
+  OptionalWhenBraces:
+    active: false
+  EqualsNullCall:
+    active: false
+  ForbiddenComment:
+    active: true
+    values: 'TODO:,FIXME:,STOPSHIP:'
+  ForbiddenImport:
+    active: false
+    imports: ''
+  ModifierOrder:
+    active: true
+  MagicNumber:
+    active: true
+    ignoreNumbers: '-1,0,1,2'
+    ignoreHashCodeFunction: false
+    ignorePropertyDeclaration: false
+    ignoreAnnotation: false
+  WildcardImport:
+    active: true
+  SafeCast:
+    active: true
+  MaxLineLength:
+    active: true
+    maxLineLength: 120
+    excludePackageStatements: false
+    excludeImportStatements: false
+  PackageNaming:
+    active: true
+    packagePattern: '^[a-z]+(\.[a-z][a-z0-9]*)*$'
+  ClassNaming:
+    active: true
+    classPattern: '[A-Z$][a-zA-Z$]*'
+  EnumNaming:
+    active: true
+    enumEntryPattern: '^[A-Z$][a-zA-Z_$]*$'
+  FunctionNaming :
+    active: true
+    functionPattern: '^[a-z$][a-zA-Z$0-9]*$'
+  FunctionMaxLength:
+    active: false
+    maximumFunctionNameLength: 30
+  FunctionMinLength:
+    active: false
+    minimumFunctionNameLength: 3
+  VariableNaming :
+    active: true
+    variablePattern: '^(_)?[a-z$][a-zA-Z$0-9]*$'
+  ConstantNaming :
+    active: true
+    constantPattern: '^([A-Z_]*|serialVersionUID)$'
+  VariableMaxLength:
+    active: false
+    maximumVariableNameLength: 30
+  VariableMinLength:
+    active: false
+    minimumVariableNameLength: 3
+  ProtectedMemberInFinalClass:
+    active: false
+  UnnecessaryParentheses:
+    active: false
+
+comments:
+  active: true
+  CommentOverPrivateMethod:
+    active: true
+  CommentOverPrivateProperty:
+    active: true
+  UndocumentedPublicClass:
+    active: false
+    searchInNestedClass: true
+    searchInInnerClass: true
+    searchInInnerObject: true
+    searchInInnerInterface: true
+  UndocumentedPublicFunction:
+    active: false
+
+# *experimental feature*
+# Migration rules can be defined in the same config file or a new one
+migration:
+  active: true
+  imports:
+    # your.package.Class: new.package.or.Class
+    # for example:
+    # io.gitlab.arturbosch.detekt.api.Rule: io.gitlab.arturbosch.detekt.rule.Rule
diff --git a/examples/showcase/gradle.properties b/examples/showcase/gradle.properties
new file mode 100644
index 00000000..4ac81290
--- /dev/null
+++ b/examples/showcase/gradle.properties
@@ -0,0 +1,2 @@
+#org.gradle.jvmargs=-XX:+UnlockCommercialFeatures -XX:+FlightRecorder
+#org.gradle.debug=true
diff --git a/examples/showcase/gradle/wrapper/gradle-wrapper.jar b/examples/showcase/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 00000000..09f1fecb
--- /dev/null
+++ b/examples/showcase/gradle/wrapper/gradle-wrapper.jar
diff --git a/examples/showcase/gradle/wrapper/gradle-wrapper.properties b/examples/showcase/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 00000000..ebc5a13a
--- /dev/null
+++ b/examples/showcase/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,6 @@
+#Wed Jan 24 11:39:21 CET 2018
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4.1-all.zip
diff --git a/examples/showcase/gradlew b/examples/showcase/gradlew
new file mode 100755
index 00000000..cccdd3d5
--- /dev/null
+++ b/examples/showcase/gradlew
@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"
diff --git a/examples/showcase/gradlew.bat b/examples/showcase/gradlew.bat
new file mode 100644
index 00000000..f9553162
--- /dev/null
+++ b/examples/showcase/gradlew.bat
@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/examples/showcase/package.json.d/project.info b/examples/showcase/package.json.d/project.info
new file mode 100644
index 00000000..a7749d63
--- /dev/null
+++ b/examples/showcase/package.json.d/project.info
@@ -0,0 +1,3 @@
+{
+    "description": "KVision Showcase"
+}
diff --git a/examples/showcase/refresh.sh b/examples/showcase/refresh.sh
new file mode 100755
index 00000000..2568701d
--- /dev/null
+++ b/examples/showcase/refresh.sh
@@ -0,0 +1,26 @@
+./gradlew stop
+rm -rf build/bundle
+rm -rf build/js
+rm -rf build/js-tests
+rm -rf build/reports
+rm -rf build/resources
+rm -rf build/tmp
+rm -rf build/logs
+rm -rf build/package.json
+rm -rf build/package-lock.json
+rm -rf build/.modules.with.kotlin.txt
+rm -rf build/.modules.with.types.txt
+rm -rf build/.npmrc
+rm -rf build/.unpack.txt
+rm -rf build/kotlin
+rm -rf build/kotlin-build
+rm -rf build/*.js
+rm -rf build/node_modules/kotlin
+rm -rf build/node_modules/kotlin-test
+rm -rf build/node_modules/kvision
+rm -rf build/node_modules/navigo-kotlin
+rm -rf build/node_modules/jquery-kotlin
+rm -rf build/node_modules/snabbdom-kotlin
+rm -rf build/node_modules/kotlin-observable-js
+rm -rf build/node_modules_imported
+./gradlew -t run
diff --git a/examples/showcase/settings.gradle b/examples/showcase/settings.gradle
new file mode 100644
index 00000000..d5254b37
--- /dev/null
+++ b/examples/showcase/settings.gradle
@@ -0,0 +1 @@
+rootProject.name = 'showcase'
diff --git a/examples/showcase/src/main/kotlin/com/example/BasicTab.kt b/examples/showcase/src/main/kotlin/com/example/BasicTab.kt
new file mode 100644
index 00000000..84e52b45
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/BasicTab.kt
@@ -0,0 +1,38 @@
+package com.example
+
+import pl.treksoft.kvision.basic.Label
+import pl.treksoft.kvision.html.IMAGESHAPE
+import pl.treksoft.kvision.html.Image
+import pl.treksoft.kvision.html.LIST
+import pl.treksoft.kvision.html.Link
+import pl.treksoft.kvision.html.ListTag
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.panel.FLEXALIGNITEMS
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.utils.px
+
+class BasicTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        this.minHeight = 400.px()
+        val panel = VPanel(spacing = 3)
+        panel.add(Label("A simple label"))
+        panel.add(Label("A list:"))
+        panel.add(ListTag(LIST.UL, listOf("First list element", "Second list element", "Third list element")))
+        panel.add(Label("An image:"))
+        panel.add(Image(require("./img/dog.jpg"), shape = IMAGESHAPE.CIRCLE))
+        panel.add(Tag(TAG.CODE, "Some text written in <code></code> HTML tag."))
+        panel.add(
+            Tag(
+                TAG.DIV,
+                "Rich <b>text</b> <i>written</i> with <span style=\"font-family: Verdana; font-size: 14pt\">" +
+                        "any <strong>forma</strong>tting</span>.",
+                rich = true
+            )
+        )
+        panel.add(Link("A link to Google", "http://www.google.com"))
+        this.add(panel)
+    }
+}
\ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt b/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt
new file mode 100644
index 00000000..a09e005f
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt
@@ -0,0 +1,47 @@
+package com.example
+
+import pl.treksoft.kvision.form.check.CHECKBOXSTYLE
+import pl.treksoft.kvision.form.check.CheckBox
+import pl.treksoft.kvision.form.check.RADIOSTYLE
+import pl.treksoft.kvision.form.check.Radio
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.panel.HPanel
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.utils.px
+
+class ButtonsTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        val mainPanel = HPanel(spacing = 100)
+        val buttonsPanel = VPanel(spacing = 7)
+        buttonsPanel.add(Button("Default button", style = BUTTONSTYLE.DEFAULT).apply { width = 200.px() })
+        buttonsPanel.add(Button("Primary button", style = BUTTONSTYLE.PRIMARY).apply { width = 200.px() })
+        buttonsPanel.add(Button("Success button", style = BUTTONSTYLE.SUCCESS).apply { width = 200.px() })
+        buttonsPanel.add(Button("Info button", style = BUTTONSTYLE.INFO).apply { width = 200.px() })
+        buttonsPanel.add(Button("Warning button", style = BUTTONSTYLE.WARNING).apply { width = 200.px() })
+        buttonsPanel.add(Button("Danger button", style = BUTTONSTYLE.DANGER).apply { width = 200.px() })
+        buttonsPanel.add(Button("Link button", style = BUTTONSTYLE.LINK).apply { width = 200.px() })
+        mainPanel.add(buttonsPanel)
+        val ckPanel = VPanel()
+        ckPanel.add(CheckBox(true, label = "Default checkbox").apply { style = CHECKBOXSTYLE.DEFAULT })
+        ckPanel.add(CheckBox(true, label = "Primary checkbox").apply { style = CHECKBOXSTYLE.PRIMARY })
+        ckPanel.add(CheckBox(true, label = "Success checkbox").apply { style = CHECKBOXSTYLE.SUCCESS })
+        ckPanel.add(CheckBox(true, label = "Info checkbox").apply { style = CHECKBOXSTYLE.INFO })
+        ckPanel.add(CheckBox(true, label = "Warning checkbox").apply { style = CHECKBOXSTYLE.WARNING })
+        ckPanel.add(CheckBox(true, label = "Danger checkbox").apply { style = CHECKBOXSTYLE.DANGER })
+        ckPanel.add(CheckBox(true, label = "Circled checkbox").apply { circled = true })
+        mainPanel.add(ckPanel)
+        val radioPanel = VPanel()
+        radioPanel.add(Radio(name = "radio", label = "Default radiobutton").apply { style = RADIOSTYLE.DEFAULT })
+        radioPanel.add(Radio(name = "radio", label = "Primary radiobutton").apply { style = RADIOSTYLE.PRIMARY })
+        radioPanel.add(Radio(name = "radio", label = "Success radiobutton").apply { style = RADIOSTYLE.SUCCESS })
+        radioPanel.add(Radio(name = "radio", label = "Info radiobutton").apply { style = RADIOSTYLE.INFO })
+        radioPanel.add(Radio(name = "radio", label = "Warning radiobutton").apply { style = RADIOSTYLE.WARNING })
+        radioPanel.add(Radio(name = "radio", label = "Danger radiobutton").apply { style = RADIOSTYLE.DANGER })
+        radioPanel.add(Radio(name = "radio", label = "Squared radiobutton").apply { squared = true })
+        mainPanel.add(radioPanel)
+        this.add(mainPanel)
+    }
+}
\ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt b/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt
new file mode 100644
index 00000000..66a45c39
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt
@@ -0,0 +1,95 @@
+package com.example
+
+import pl.treksoft.kvision.core.Background
+import pl.treksoft.kvision.core.COLOR
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.dropdown.DropDown
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.panel.DIRECTION
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.panel.SplitPanel
+import pl.treksoft.kvision.panel.StackPanel
+import pl.treksoft.kvision.panel.TabPanel
+import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.utils.px
+
+class ContainersTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        val panel = VPanel(spacing = 5)
+        addStackPanel(panel)
+        addTabPanel(panel)
+        addVerticalSplitPanel(panel)
+        addHorizontalSplitPanel(panel)
+        this.add(panel)
+    }
+
+    private fun addStackPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Stack panel"))
+
+        val stack = StackPanel()
+        stack.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.BLUE)
+            height = 40.px()
+        }, "/containers/blue")
+        stack.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.GREEN)
+            height = 40.px()
+        }, "/containers/green")
+        panel.add(stack)
+
+        val ldd = DropDown(
+            "Activate panel from the stack", listOf(
+                "Blue panel" to "#!/containers/blue",
+                "Green panel" to "#!/containers/green"
+            )
+        )
+        panel.add(ldd)
+    }
+
+    private fun addTabPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Tab panel"))
+
+        val tabs = TabPanel()
+        tabs.addTab("Blue panel", Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.BLUE)
+            height = 40.px()
+        })
+        tabs.addTab("Green panel", Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.GREEN)
+            height = 40.px()
+        })
+        panel.add(tabs)
+    }
+
+    private fun addVerticalSplitPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Vertical split panel"))
+
+        val split = SplitPanel()
+        split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.BLUE)
+            height = 200.px()
+        })
+        split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.GREEN)
+            height = 200.px()
+        })
+        panel.add(split)
+    }
+
+    private fun addHorizontalSplitPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Horizontal split panel"))
+
+        val split = SplitPanel(direction = DIRECTION.HORIZONTAL).apply { height = 220.px() }
+        split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.BLUE)
+            height = 100.px()
+        })
+        split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
+            background = Background(COLOR.GREEN)
+            height = 100.px()
+        })
+        panel.add(split)
+    }
+}
diff --git a/examples/showcase/src/main/kotlin/com/example/DataTab.kt b/examples/showcase/src/main/kotlin/com/example/DataTab.kt
new file mode 100644
index 00000000..177167c4
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/DataTab.kt
@@ -0,0 +1,76 @@
+package com.example
+
+import com.lightningkite.kotlin.observable.list.observableListOf
+import pl.treksoft.kvision.data.DataComponent
+import pl.treksoft.kvision.data.DataContainer
+import pl.treksoft.kvision.form.check.CHECKBOXSTYLE
+import pl.treksoft.kvision.form.check.CheckBox
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.panel.FLEXDIR
+import pl.treksoft.kvision.panel.FLEXWRAP
+import pl.treksoft.kvision.panel.FlexPanel
+import pl.treksoft.kvision.panel.HPanel
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.utils.px
+
+class DataTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        this.minHeight = 400.px()
+
+        val panel = VPanel(spacing = 5)
+
+        class DataModel(checked: Boolean, text: String) : DataComponent() {
+            var checked: Boolean by obs(checked)
+            var text: String by obs(text)
+        }
+
+        val list = observableListOf(
+            DataModel(false, "January"),
+            DataModel(false, "February"),
+            DataModel(false, "March"),
+            DataModel(false, "April"),
+            DataModel(false, "May"),
+            DataModel(false, "June"),
+            DataModel(false, "July"),
+            DataModel(false, "August"),
+            DataModel(false, "September"),
+            DataModel(false, "October"),
+            DataModel(false, "November")
+        )
+        val dataContainer = DataContainer(list, { index ->
+            CheckBox(
+                value = list[index].checked,
+                label = if (list[index].checked) "<b>${list[index].text}</b>" else "${list[index].text}"
+            ).apply {
+                rich = true
+                style = CHECKBOXSTYLE.PRIMARY
+                onClick {
+                    list[index].checked = this.value
+                }
+            }
+        }, child = FlexPanel(FLEXDIR.ROW, spacing = 10, wrap = FLEXWRAP.WRAP))
+        panel.add(dataContainer)
+
+        val butPanel = HPanel(spacing = 10)
+        butPanel.add(Button("Add December", style = BUTTONSTYLE.SUCCESS).onClick {
+            list.add(DataModel(true, "December"))
+        })
+        butPanel.add(Button("Check all", style = BUTTONSTYLE.INFO).onClick {
+            list.forEach { it.checked = true }
+        })
+        butPanel.add(Button("Uncheck all", style = BUTTONSTYLE.INFO).onClick {
+            list.forEach { it.checked = false }
+        })
+        butPanel.add(Button("Reverse list", style = BUTTONSTYLE.DANGER).onClick {
+            list.reverse()
+        })
+        butPanel.add(Button("Remove checked", style = BUTTONSTYLE.DANGER).onClick {
+            list.filter { it.checked }.forEach { list.remove(it) }
+        })
+        panel.add(butPanel)
+        this.add(panel)
+    }
+}
diff --git a/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt b/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt
new file mode 100644
index 00000000..b98815f0
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt
@@ -0,0 +1,63 @@
+package com.example
+
+import pl.treksoft.kvision.dropdown.DD
+import pl.treksoft.kvision.dropdown.DropDown
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.html.Image
+import pl.treksoft.kvision.panel.HPanel
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.utils.px
+
+class DropDownTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        this.minHeight = 400.px()
+        val panel = VPanel(spacing = 30)
+        val ndd = DropDown(
+            "Dropdown with navigation menu", listOf(
+                "Basic formatting" to "#!/basic",
+                "Forms" to "#!/forms",
+                "Buttons" to "#!/buttons",
+                "Dropdowns" to "#!/dropdowns",
+                "Containers" to "#!/containers"
+            ), "fa-arrow-right", style = BUTTONSTYLE.SUCCESS
+        ).apply {
+            width = 250.px()
+        }
+        panel.add(ndd)
+
+        val idd = DropDown("Dropdown with custom list", icon = "fa-picture-o", style = BUTTONSTYLE.WARNING).apply {
+            width = 250.px()
+        }
+        idd.add(Image(require("./img/cat.jpg")).apply { margin = 10.px(); title = "Cat" })
+        idd.add(Image(require("./img/dog.jpg")).apply { margin = 10.px(); title = "Dog" })
+        panel.add(idd)
+
+        val hpanel = HPanel(spacing = 5)
+        val fdd = DropDown(
+            "Dropdown with special options", listOf(
+                "Header" to DD.HEADER.type,
+                "Basic formatting" to "#!/basic",
+                "Forms" to "#!/forms",
+                "Buttons" to "#!/buttons",
+                "Separator" to DD.SEPARATOR.type,
+                "Dropdowns (disabled)" to DD.DISABLED.type,
+                "Separator" to DD.SEPARATOR.type,
+                "Containers" to "#!/containers"
+            ), "fa-asterisk", style = BUTTONSTYLE.PRIMARY
+        ).apply {
+            dropup = true
+            width = 250.px()
+        }
+        hpanel.add(fdd)
+        val ddbutton = Button("Toggle dropdown", style = BUTTONSTYLE.INFO).onClick { e ->
+            fdd.toggle()
+            e.stopPropagation()
+        }
+        hpanel.add(ddbutton)
+        panel.add(hpanel)
+        this.add(panel)
+    }
+}
\ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/FormTab.kt b/examples/showcase/src/main/kotlin/com/example/FormTab.kt
new file mode 100644
index 00000000..49c1f6fe
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/FormTab.kt
@@ -0,0 +1,137 @@
+package com.example
+
+import pl.treksoft.kvision.form.FormPanel
+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.select.AjaxOptions
+import pl.treksoft.kvision.form.select.Select
+import pl.treksoft.kvision.form.spinner.Spinner
+import pl.treksoft.kvision.form.text.Password
+import pl.treksoft.kvision.form.text.RichText
+import pl.treksoft.kvision.form.text.Text
+import pl.treksoft.kvision.form.text.TextArea
+import pl.treksoft.kvision.form.time.DateTime
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.modal.Alert
+import pl.treksoft.kvision.modal.Confirm
+import pl.treksoft.kvision.panel.HPanel
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.snabbdom.obj
+import pl.treksoft.kvision.utils.px
+import kotlin.js.Date
+
+class Form(val map: Map<String, Any?>) {
+    val text: String? by map
+    val password: String? by map
+    val password2: String? by map
+    val textarea: String? by map
+    val richtext: String? by map
+    val date: Date? by map
+    val time: 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
+}
+
+
+class FormTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        val formPanel = FormPanel {
+            Form(it)
+        }.apply {
+            add(
+                "text",
+                Text(label = "Required text field with regexp [0-9] validator").apply {
+                    placeholder = "Enter your age"
+                },
+                required = true,
+                validatorMessage = { "Only numbers are allowed" }) {
+                it.getValue()?.matches("^[0-9]+$")
+            }
+            add("password", Password(label = "Password field with minimum length validator"),
+                validatorMessage = { "Password too short" }) {
+                (it.getValue()?.length ?: 0) >= 8
+            }
+            add("password2", Password(label = "Password confirmation"),
+                validatorMessage = { "Password too short" }) {
+                (it.getValue()?.length ?: 0) >= 8
+            }
+            add("textarea", TextArea(label = "Text area field"))
+            add(
+                "richtext",
+                RichText(label = "Rich text field with a placeholder").apply { placeholder = "Add some info" })
+            add(
+                "date",
+                DateTime(format = "YYYY-MM-DD", label = "Date field with a placeholder").apply {
+                    placeholder = "Enter date"
+                })
+            add(
+                "time",
+                DateTime(format = "HH:mm", label = "Time field")
+            )
+            add("checkbox", CheckBox(label = "Required checkbox")) { it.getValue() }
+            add("radio", Radio(label = "Radio button"))
+            add(
+                "select", Select(
+                    options = listOf("first" to "First option", "second" to "Second option"),
+                    label = "Simple select"
+                )
+            )
+
+            add("ajaxselect", Select(label = "Select with remote data source").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)
+            })
+            add("spinner", Spinner(label = "Spinner field 10 - 20", min = 10, max = 20))
+            add(
+                "radiogroup", RadioGroup(
+                    listOf("option1" to "First option", "option2" to "Second option"),
+                    inline = true, label = "Radio button group"
+                )
+            )
+            validator = {
+                val result = it["password"] == it["password2"]
+                if (!result) {
+                    it.getControl("password")?.validatorError = "Passwords are not the same"
+                    it.getControl("password2")?.validatorError = "Passwords are not the same"
+                }
+                result
+            }
+            validatorMessage = { "The passwords are not the same." }
+        }
+        this.add(formPanel)
+        val buttonsPanel = HPanel(spacing = 10)
+        val validButton = Button("Validate", "fa-check", BUTTONSTYLE.INFO).onClick {
+            formPanel.validate()
+        }
+        buttonsPanel.add(validButton)
+        val dataButton = Button("Show data", "fa-info", BUTTONSTYLE.SUCCESS).onClick {
+            Alert.show("Form data in plain JSON", JSON.stringify(formPanel.getDataJson(), space = 1))
+        }
+        buttonsPanel.add(dataButton)
+        val clearButton = Button("Clear data", "fa-times", BUTTONSTYLE.DANGER).onClick {
+            Confirm.show("Are you sure?", "Do you want to clear your data?") {
+                formPanel.clearData()
+            }
+        }
+        buttonsPanel.add(clearButton)
+        formPanel.add(buttonsPanel)
+    }
+}
\ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt b/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt
new file mode 100644
index 00000000..f25da4fe
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt
@@ -0,0 +1,160 @@
+package com.example
+
+import pl.treksoft.kvision.core.Background
+import pl.treksoft.kvision.core.COLOR
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.CssSize
+import pl.treksoft.kvision.html.ALIGN
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.panel.*
+import pl.treksoft.kvision.utils.perc
+import pl.treksoft.kvision.utils.px
+
+class LayoutsTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        this.minHeight = 400.px()
+        val panel = VPanel(spacing = 5)
+        addHPanel(panel)
+        addVPanel(panel)
+        addFlexPanel1(panel)
+        addFlexPanel2(panel)
+        addFlexPanel3(panel)
+        addFlexPanel4(panel)
+        addFlexPanel5(panel)
+        addGridPanel1(panel)
+        addGridPanel2(panel)
+        addRespGridPanel(panel)
+        addDockPanel(panel)
+        this.add(panel)
+    }
+
+    private fun addHPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Horizontal layout"))
+        val hpanel = HPanel(spacing = 5)
+        hpanel.add(getDiv("1", 100))
+        hpanel.add(getDiv("2", 150))
+        hpanel.add(getDiv("3", 200))
+        panel.add(hpanel)
+    }
+
+    private fun addVPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Vertical layout"))
+        val vpanel = VPanel(spacing = 5)
+        vpanel.add(getDiv("1", 100))
+        vpanel.add(getDiv("2", 150))
+        vpanel.add(getDiv("3", 200))
+        panel.add(vpanel)
+    }
+
+    private fun addFlexPanel1(panel: Container) {
+        panel.add(Tag(TAG.H4, "CSS flexbox layouts"))
+        val flexpanel = FlexPanel(
+            FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXEND, FLEXALIGNITEMS.CENTER,
+            spacing = 5
+        )
+        flexpanel.add(getDiv("1", 100))
+        flexpanel.add(getDiv("2", 150))
+        flexpanel.add(getDiv("3", 200))
+        panel.add(flexpanel)
+    }
+
+    private fun addFlexPanel2(panel: Container) {
+        val flexpanel = FlexPanel(
+            FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.SPACEBETWEEN, FLEXALIGNITEMS.CENTER,
+            spacing = 5
+        )
+        flexpanel.add(getDiv("1", 100))
+        flexpanel.add(getDiv("2", 150))
+        flexpanel.add(getDiv("3", 200))
+        panel.add(flexpanel)
+    }
+
+    private fun addFlexPanel3(panel: Container) {
+        val flexpanel = FlexPanel(
+            FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.CENTER, FLEXALIGNITEMS.CENTER,
+            spacing = 5
+        )
+        flexpanel.add(getDiv("1", 100))
+        flexpanel.add(getDiv("2", 150))
+        flexpanel.add(getDiv("3", 200))
+        panel.add(flexpanel)
+    }
+
+    private fun addFlexPanel4(panel: Container) {
+        val flexpanel = FlexPanel(
+            FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXSTART, FLEXALIGNITEMS.CENTER,
+            spacing = 5
+        )
+        flexpanel.add(getDiv("1", 100), order = 3)
+        flexpanel.add(getDiv("2", 150), order = 1)
+        flexpanel.add(getDiv("3", 200), order = 2)
+        panel.add(flexpanel)
+    }
+
+    private fun addFlexPanel5(panel: Container) {
+        val flexpanel = FlexPanel(
+            FLEXDIR.COLUMN, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXSTART, FLEXALIGNITEMS.FLEXEND,
+            spacing = 5
+        )
+        flexpanel.add(getDiv("1", 100), order = 3)
+        flexpanel.add(getDiv("2", 150), order = 1)
+        flexpanel.add(getDiv("3", 200), order = 2)
+        panel.add(flexpanel)
+    }
+
+    private fun addGridPanel1(panel: Container) {
+        panel.add(Tag(TAG.H4, "CSS grid layouts"))
+        val gridpanel = GridPanel(columnGap = 5, rowGap = 5, justifyItems = GRIDJUSTIFY.CENTER)
+        gridpanel.background = Background(COLOR.KHAKI)
+        gridpanel.add(getDiv("1,1", 100), 1, 1)
+        gridpanel.add(getDiv("1,2", 100), 1, 2)
+        gridpanel.add(getDiv("2,1", 100), 2, 1)
+        gridpanel.add(getDiv("2,2", 100), 2, 2)
+        panel.add(gridpanel)
+    }
+
+    private fun addGridPanel2(panel: Container) {
+        val gridpanel = GridPanel(columnGap = 5, rowGap = 5, justifyItems = GRIDJUSTIFY.CENTER)
+        gridpanel.background = Background(COLOR.CORNFLOWERBLUE)
+        gridpanel.add(getDiv("1,1", 150), 1, 1)
+        gridpanel.add(getDiv("2,2", 150), 2, 2)
+        gridpanel.add(getDiv("3,3", 150), 3, 3)
+        panel.add(gridpanel)
+    }
+
+    private fun addRespGridPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Responsive grid layout"))
+        val gridpanel = ResponsiveGridPanel()
+        gridpanel.background = Background(COLOR.SILVER)
+        gridpanel.add(getDiv("1,1", 150), 1, 1)
+        gridpanel.add(getDiv("3,1", 150), 3, 1)
+        gridpanel.add(getDiv("2,2", 150), 2, 2)
+        gridpanel.add(getDiv("3,3", 150), 3, 3)
+        panel.add(gridpanel)
+    }
+
+    private fun addDockPanel(panel: Container) {
+        panel.add(Tag(TAG.H4, "Dock layout"))
+        val dockpanel = DockPanel()
+        dockpanel.background = Background(COLOR.YELLOW)
+        dockpanel.add(getDiv("CENTER", 150), SIDE.CENTER)
+        dockpanel.add(getDiv("LEFT", 150), SIDE.LEFT)
+        dockpanel.add(getDiv("RIGHT", 150), SIDE.RIGHT)
+        dockpanel.add(getDiv("UP", 150).apply { marginBottom = 10.px() }, SIDE.UP)
+        dockpanel.add(getDiv("DOWN", 150).apply { marginTop = 10.px() }, SIDE.DOWN)
+        panel.add(dockpanel)
+    }
+
+
+    private fun getDiv(value: String, size: Int): Tag {
+        return Tag(TAG.DIV, value).apply {
+            paddingTop = ((size / 2) - 10).px()
+            align = ALIGN.CENTER
+            background = Background(COLOR.GREEN)
+            width = size.px()
+            height = size.px()
+        }
+    }
+}
diff --git a/examples/showcase/src/main/kotlin/com/example/Main.kt b/examples/showcase/src/main/kotlin/com/example/Main.kt
new file mode 100644
index 00000000..98c94f25
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/Main.kt
@@ -0,0 +1,41 @@
+package com.example
+
+import pl.treksoft.kvision.ApplicationBase
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.module
+import kotlin.browser.document
+
+external fun require(name: String): String
+
+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/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt b/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt
new file mode 100644
index 00000000..46da97f7
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt
@@ -0,0 +1,78 @@
+package com.example
+
+import pl.treksoft.kvision.html.ALIGN
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.html.Image
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.modal.Alert
+import pl.treksoft.kvision.modal.Confirm
+import pl.treksoft.kvision.modal.Modal
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.utils.px
+
+class ModalsTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        this.minHeight = 400.px()
+        val panel = VPanel(spacing = 30)
+        val alertButton = Button("Alert dialog", style = BUTTONSTYLE.DANGER).onClick {
+            Alert.show(
+                "Alert dialog",
+                "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."
+            )
+        }
+        panel.add(alertButton)
+        val confirmButton = Button("Confirm dialog", style = BUTTONSTYLE.WARNING).onClick {
+            Confirm.show(
+                "Confirm dialog",
+                "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.",
+                noCallback = {
+                    Alert.show("Result", "You pressed NO button.")
+                }) {
+                Alert.show("Result", "You pressed YES button.")
+            }
+        }
+        panel.add(confirmButton)
+        val confirmButtonC = Button("Cancelable confirm dialog", style = BUTTONSTYLE.INFO).onClick {
+            Confirm.show(
+                "Cancelable confirm dialog",
+                "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.",
+                align = ALIGN.CENTER,
+                cancelVisible = true,
+                noCallback = {
+                    Alert.show("Result", "You pressed NO button.")
+                }) {
+                Alert.show("Result", "You pressed YES button.")
+            }
+        }
+        panel.add(confirmButtonC)
+
+        val modal = Modal("Custom modal dialog")
+        modal.add(
+            Tag(
+                TAG.H4,
+                "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."
+            )
+        )
+        modal.add(Image(require("./img/dog.jpg")))
+        modal.addButton(Button("Close").onClick {
+            modal.hide()
+        })
+        val modalButton = Button("Custom modal dialog", style = BUTTONSTYLE.SUCCESS).onClick {
+            modal.show()
+        }
+        panel.add(modalButton)
+        val fastAlertButton = Button("Alert dialog without animation", style = BUTTONSTYLE.PRIMARY).onClick {
+            Alert.show(
+                "Alert dialog without animation",
+                "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.",
+                animation = false
+            )
+        }
+        panel.add(fastAlertButton)
+        this.add(panel)
+    }
+}
diff --git a/examples/showcase/src/main/kotlin/com/example/Showcase.kt b/examples/showcase/src/main/kotlin/com/example/Showcase.kt
new file mode 100644
index 00000000..40a231e8
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/Showcase.kt
@@ -0,0 +1,38 @@
+package com.example
+
+import pl.treksoft.kvision.ApplicationBase
+import pl.treksoft.kvision.core.BORDERSTYLE
+import pl.treksoft.kvision.core.Border
+import pl.treksoft.kvision.core.COLOR
+import pl.treksoft.kvision.core.Root
+import pl.treksoft.kvision.panel.TabPanel
+import pl.treksoft.kvision.utils.px
+
+class Showcase : ApplicationBase() {
+
+    override fun start(state: Map<String, Any>) {
+        val root = Root("showcase", true)
+        val tabPanel = TabPanel().apply {
+            margin = 20.px()
+            padding = 20.px()
+            border = Border(2.px(), BORDERSTYLE.SOLID, COLOR.SILVER)
+        }
+        tabPanel.addTab("Basic formatting", BasicTab(), "fa-bars", route = "/basic")
+        tabPanel.addTab("Forms", FormTab(), "fa-edit", route = "/forms")
+        tabPanel.addTab("Buttons", ButtonsTab(), "fa-check-square-o", route = "/buttons")
+        tabPanel.addTab("Dropdowns", DropDownTab(), "fa-arrow-down", route = "/dropdowns")
+        tabPanel.addTab("Containers", ContainersTab(), "fa-database", route = "/containers")
+        tabPanel.addTab("Layouts", LayoutsTab(), "fa-th-list", route = "/layouts")
+        tabPanel.addTab("Modals", ModalsTab(), "fa-window-maximize", route = "/modals")
+        tabPanel.addTab("Data binding", DataTab(), "fa-retweet", route = "/data")
+        root.add(tabPanel)
+    }
+
+    override fun dispose(): Map<String, Any> {
+        return mapOf()
+    }
+
+    companion object {
+        val css = require("./css/style.css")
+    }
+}
diff --git a/examples/showcase/src/main/resources/css/style.css b/examples/showcase/src/main/resources/css/style.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/examples/showcase/src/main/resources/css/style.css
diff --git a/examples/showcase/src/main/resources/img/cat.jpg b/examples/showcase/src/main/resources/img/cat.jpg
new file mode 100644
index 00000000..235fd677
--- /dev/null
+++ b/examples/showcase/src/main/resources/img/cat.jpg
diff --git a/examples/showcase/src/main/resources/img/dog.jpg b/examples/showcase/src/main/resources/img/dog.jpg
new file mode 100644
index 00000000..9c33275b
--- /dev/null
+++ b/examples/showcase/src/main/resources/img/dog.jpg
diff --git a/examples/showcase/src/main/web/index.html b/examples/showcase/src/main/web/index.html
new file mode 100644
index 00000000..4dfaccf4
--- /dev/null
+++ b/examples/showcase/src/main/web/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <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>
+<div id="showcase"></div>
+</body>
+</html>
diff --git a/examples/showcase/src/test/kotlin/test/com/example/ShowcaseSpec.kt b/examples/showcase/src/test/kotlin/test/com/example/ShowcaseSpec.kt
new file mode 100644
index 00000000..64d46b18
--- /dev/null
+++ b/examples/showcase/src/test/kotlin/test/com/example/ShowcaseSpec.kt
@@ -0,0 +1,19 @@
+package test.com.example
+
+import com.example.Showcase
+import kotlin.browser.document
+import kotlin.test.Test
+import kotlin.test.assertTrue
+
+class ShowcaseSpec : DomSpec {
+
+    @Test
+    fun render() {
+        run {
+            Showcase().start(mapOf())
+            val element = document.getElementById("showcase")
+            assertTrue(true, "True"
+            )
+        }
+    }
+}
diff --git a/examples/showcase/src/test/kotlin/test/com/example/TestUtil.kt b/examples/showcase/src/test/kotlin/test/com/example/TestUtil.kt
new file mode 100644
index 00000000..06d25a26
--- /dev/null
+++ b/examples/showcase/src/test/kotlin/test/com/example/TestUtil.kt
@@ -0,0 +1,32 @@
+package test.com.example
+
+import pl.treksoft.jquery.jQuery
+import kotlin.browser.document
+
+interface TestSpec {
+    fun beforeTest()
+
+    fun afterTest()
+
+    fun run(code: () -> Unit) {
+        beforeTest()
+        code()
+        afterTest()
+    }
+}
+
+interface DomSpec : TestSpec {
+
+    override fun beforeTest() {
+        val fixture = "<div style=\"display: none\" id=\"pretest\">" +
+                "<div id=\"showcase\"></div></div>"
+        document.body?.insertAdjacentHTML("afterbegin", fixture)
+    }
+
+    override fun afterTest() {
+        val div = document.getElementById("pretest")
+        div?.remove()
+        jQuery(`object` = ".modal-backdrop").remove()
+    }
+
+}
diff --git a/examples/showcase/webpack.config.d/bootstrap.js b/examples/showcase/webpack.config.d/bootstrap.js
new file mode 100644
index 00000000..32a7c4d0
--- /dev/null
+++ b/examples/showcase/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/examples/showcase/webpack.config.d/css.js b/examples/showcase/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/examples/showcase/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/examples/showcase/webpack.config.d/dce.js b/examples/showcase/webpack.config.d/dce.js
new file mode 100644
index 00000000..b536a6bf
--- /dev/null
+++ b/examples/showcase/webpack.config.d/dce.js
@@ -0,0 +1,2 @@
+var path = require("path");
+config.resolve.modules.unshift(path.resolve("./js/min"));
diff --git a/examples/showcase/webpack.config.d/file.js b/examples/showcase/webpack.config.d/file.js
new file mode 100644
index 00000000..8b853e7e
--- /dev/null
+++ b/examples/showcase/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
diff --git a/examples/showcase/webpack.config.d/jquery.js b/examples/showcase/webpack.config.d/jquery.js
new file mode 100644
index 00000000..40522595
--- /dev/null
+++ b/examples/showcase/webpack.config.d/jquery.js
@@ -0,0 +1,4 @@
+config.plugins.push(new webpack.ProvidePlugin({
+    $: "jquery",
+    jQuery: "jquery"
+}));
diff --git a/examples/showcase/webpack.config.d/minify.js b/examples/showcase/webpack.config.d/minify.js
new file mode 100644
index 00000000..34e706c9
--- /dev/null
+++ b/examples/showcase/webpack.config.d/minify.js
@@ -0,0 +1,4 @@
+if (defined.PRODUCTION) {
+    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
+    }));
+}