Merge pull request #26 from linked-planet/feature/ZITIS-638

1.0.0 Preparation
linked-planet · Dec 6, 2022 · 2726039 · 2726039
2 parents 69e95a3 + fa9395a
commit 2726039
Show file tree

Hide file tree

Showing 47 changed files with 3,223 additions and 2,278 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -1,5 +1,5 @@
 plugins {
-    kotlin("js") version "1.6.20" apply false
+    kotlin("js") version "1.7.21" apply false
     id("com.github.hierynomus.license") version "0.16.1"
     id("pl.allegro.tech.build.axion-release") version "1.13.6"
     id("io.github.gradle-nexus.publish-plugin") version "1.1.0"

diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
diff --git a/ui-kit-lib/build.gradle.kts b/ui-kit-lib/build.gradle.kts
@@ -9,29 +9,30 @@ repositories {
     mavenCentral()
 }
 
-// See https://kotlinlang.org/docs/releases.html#release-details for recommended library versions of kotlin version
+// ATTENTION!
+// ----------
+// See recommended kotlin library versions for kotlin version: https://kotlinlang.org/docs/releases.html#release-details
+// See the official bom (pom.xml) for other library versions: https://repo1.maven.org/maven2/org/jetbrains/kotlin-wrappers/kotlin-wrappers-bom/
 dependencies {
     // Kotlin
-    api(kotlin("stdlib-js", "1.6.20"))
-    api("org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.6.0")
-    api("org.jetbrains.kotlinx:kotlinx-html-js:0.7.3")
+    api(kotlin("stdlib-js", "1.7.21"))
+    api("org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.6.4")
+    api("org.jetbrains.kotlinx:kotlinx-html-js:0.8.0")
 
     // React & Redux
-    api("org.jetbrains.kotlin-wrappers:kotlin-react:18.0.0-pre.328-kotlin-1.6.20")
-    api("org.jetbrains.kotlin-wrappers:kotlin-react-dom:18.0.0-pre.328-kotlin-1.6.20")
-    api("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:6.3.0-pre.328-kotlin-1.6.20")
-    api("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.2-pre.328-kotlin-1.6.20")
-    api("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.6-pre.328-kotlin-1.6.20")
+    api("org.jetbrains.kotlin-wrappers:kotlin-react:18.2.0-pre.456")
+    api("org.jetbrains.kotlin-wrappers:kotlin-react-dom:18.2.0-pre.456")
+    api("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:6.3.0-pre.456")
+    api("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.2-pre.456")
+    api("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.6-pre.456")
+    implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.6-pre.456") // <-- implementation as it's for internal use only
 
-    // Styled
-    api("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.5-pre.328-kotlin-1.6.20")
+    // Emotion for styling
+    api("org.jetbrains.kotlin-wrappers:kotlin-emotion:11.10.5-pre.456")
 
     // Moment
     api("io.github.samgarasx:kotlin-moment:2.27.0-pre.12-kotlin-1.5.21")
 
-    // Serialization
-    api("org.jetbrains.kotlinx", "kotlinx-serialization-json", "1.3.3")
-
     // Atlaskit
     implementation(npm("@atlaskit/atlassian-navigation", "2.1.3"))
     implementation(npm("@atlaskit/avatar", "20.5.7"))
@@ -71,7 +72,7 @@ dependencies {
     implementation(npm("mime-types", "2.1.34"))
 
     // Monaco Editor for LPEditor
-    implementation(npm("@monaco-editor/react", "4.4.5", generateExternals = true))
+    implementation(npm("@monaco-editor/react", "4.4.5"))
 
     // Awesome Slider
     implementation(npm("react-awesome-slider", "4.1.0"))

diff --git a/ui-kit-lib/src/main/kotlin/com/linkedplanet/uikit/wrapper/lpeditor/LPEditor.kt b/ui-kit-lib/src/main/kotlin/com/linkedplanet/uikit/wrapper/lpeditor/LPEditor.kt
@@ -15,8 +15,8 @@
  */
 package com.linkedplanet.uikit.wrapper.lpeditor
 
-import kotlinx.js.Object
-import kotlinx.js.ReadonlyArray
+import js.core.Object
+import js.core.ReadonlyArray
 import react.*
 import kotlin.js.Json
 import kotlin.js.json
@@ -275,4 +275,4 @@ class SemanticTokenArrayAccumulator(
             "data" to dataAsArray,
         )
     }
-}
+}
diff --git a/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/AppLoader.kt b/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/AppLoader.kt
@@ -15,8 +15,8 @@
  */
 package com.linkedplanet.uikit
 
-import kotlinx.browser.document
-import kotlinx.browser.window
+import browser.document
+import browser.window
 import react.createElement
 import react.dom.client.createRoot
 import react.react

diff --git a/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/ShowcaseApp.kt b/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/ShowcaseApp.kt
@@ -18,17 +18,16 @@ package com.linkedplanet.uikit
 import com.linkedplanet.uikit.component.ShowcaseLeftSidebar
 import com.linkedplanet.uikit.component.ShowcaseTopNavigation
 import com.linkedplanet.uikit.page.*
-import com.linkedplanet.uikit.style.ShowcaseStyles
 import com.linkedplanet.uikit.util.createElementNullSafe
 import com.linkedplanet.uikit.wrapper.atlaskit.cssreset.CssReset
 import com.linkedplanet.uikit.wrapper.atlaskit.pagelayout.*
+import csstype.*
+import emotion.react.css
 import react.*
-import react.dom.attrs
-import react.dom.span
+import react.dom.html.ReactHTML.div
+import react.dom.html.ReactHTML.span
 import react.router.*
 import react.router.dom.HashRouter
-import styled.css
-import styled.styledDiv
 import kotlin.js.Date
 
 external interface ShowcaseAppProps : Props {
@@ -53,10 +52,13 @@ class ShowcaseApp(props: ShowcaseAppProps) : RComponent<ShowcaseAppProps, Showca
                 ShowcaseLeftSidebar {}
 
                 Main {
-                    styledDiv {
-                        css {
-                            +ShowcaseStyles.showcaseContainer
+                    div {
+                        attrs.css {
+                            margin = Margin(50.px, 50.px)
+                            display = Display.flex
+                            flexDirection = FlexDirection.column
                         }
+
                         HashRouter {
                             Routes { // use switch to render only the first matching result
                                 Route {
@@ -90,13 +92,16 @@ class ShowcaseApp(props: ShowcaseAppProps) : RComponent<ShowcaseAppProps, Showca
                         }
 
                         // Copyright footer
-                        styledDiv {
-                            css {
-                                +ShowcaseStyles.showcaseCopyrightFooter
+                        div {
+                            attrs.css {
+                                fontSize = 0.7.rem
+                                fontWeight = FontWeight.lighter
+                                marginTop = 30.px
                             }
 
                             span {
-                                attrs["data-year"] = "${Date().getFullYear()}"
+                                val dynAttrs = attrs.asDynamic()
+                                dynAttrs["data-year"] = "${Date().getFullYear()}"
                             }
                         }
                     }

diff --git a/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseLeftSidebar.kt b/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseLeftSidebar.kt
@@ -21,15 +21,17 @@ import com.linkedplanet.uikit.wrapper.atlaskit.icon.FileIcon
 import com.linkedplanet.uikit.wrapper.atlaskit.pagelayout.LeftSidebar
 import com.linkedplanet.uikit.wrapper.atlaskit.sidenavigation.*
 import com.linkedplanet.uikit.wrapper.atlaskit.textfield.TextField
+import csstype.Display
 import csstype.FlexDirection
+import emotion.react.css
+import js.core.jso
 import kotlinx.browser.document
-import kotlinx.js.jso
 import nesting
 import nestingFC
 import org.w3c.dom.HTMLInputElement
 import overrideBackButton
 import react.*
-import react.dom.a
+import react.dom.html.ReactHTML.a
 import react.dom.html.ReactHTML.div
 
 external interface ShowcaseLeftSidebarProps : Props
@@ -38,24 +40,25 @@ val nestingTextFieldWithClearButtonCustomComponent = nestingFC<Props> {
     var data by useState("")
 
     div {
-        style = jso {
-            display = csstype.Display.flex
-            flexDirection = FlexDirection.row
+        css {
+            display = Display.flex
+            flexDirection = FlexDirection.column
         }
+
         TextField {
             placeholder = "Custom Nesting TextField"
             value = data
             isCompact = true
             type = "text"
-            onChange ={
+            onChange = {
                 data = (it.target as HTMLInputElement).value.trim()
             }
         }
         Button {
             onClick = {
                 data = ""
             }
-            + "Clear ${data.take(10)}"
+            +"Clear ${data.take(10)}"
         }
     }
 }
@@ -91,8 +94,8 @@ val ShowcaseLeftSidebar = fc<ShowcaseLeftSidebarProps> {
                         attrs.title = "Nested menu item"
                         attrs.iconBefore = createElement(FileIcon, jso {})
                         attrs.overrideBackButton { props ->
-                                props.description = "BackDescription!"
-                                +"Custom GoBackItem"
+                            props.description = "BackDescription!"
+                            +"Custom GoBackItem"
                         }
 
                         Section {
@@ -153,13 +156,15 @@ val ShowcaseLeftSidebar = fc<ShowcaseLeftSidebarProps> {
             NavigationFooter {
                 Footer {
                     +"Made with ❤ by "
-                    a(href = "https://www.linked-planet.com/") {
+                    a {
+                        attrs.href = "https://www.linked-planet.com/"
                         +"linked-planet"
                     }
                 }
                 Footer {
                     +"Licensed under "
-                    a(href = "http://www.apache.org/licenses/LICENSE-2.0") {
+                    a {
+                        attrs.href = "http://www.apache.org/licenses/LICENSE-2.0"
                         +"Apache License, Version 2.0"
                     }
                 }

diff --git a/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseTopNavigation.kt b/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseTopNavigation.kt
@@ -19,11 +19,13 @@ import com.linkedplanet.uikit.util.createElementNullSafe
 import com.linkedplanet.uikit.util.createSpan
 import com.linkedplanet.uikit.wrapper.atlaskit.navigation.*
 import com.linkedplanet.uikit.wrapper.atlaskit.pagelayout.TopNavigation
+import csstype.pct
+import csstype.px
+import emotion.react.css
+import js.core.jso
 import kotlinx.browser.window
-import kotlinx.js.jso
 import react.*
-import react.dom.img
-import react.dom.jsStyle
+import react.dom.html.ReactHTML.img
 
 external interface ShowcaseTopNavigationProps : Props
 
@@ -67,10 +69,10 @@ val ShowcaseTopNavigation = fc<ShowcaseTopNavigationProps> { _ ->
             val profileIcon = createElementNullSafe {
                 img {
                     attrs.src = "images/github-logo.png"
-                    attrs.jsStyle {
-                        borderRadius = "50%"
-                        width = 32
-                        height = 32
+                    attrs.css {
+                        borderRadius = 50.pct
+                        width = 32.px
+                        height = 32.px
                     }
                 }
             }
@@ -87,4 +89,4 @@ val ShowcaseTopNavigation = fc<ShowcaseTopNavigationProps> { _ ->
 }
 
 fun RBuilder.ShowcaseTopNavigation(handler: ShowcaseTopNavigationProps.() -> Unit) =
-    child(ShowcaseTopNavigation) { attrs { handler() } }
+    child(ShowcaseTopNavigation) { attrs { handler() } }
diff --git a/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseWrapperItem.kt b/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseWrapperItem.kt
@@ -15,19 +15,18 @@
  */
 package com.linkedplanet.uikit.component
 
-import com.linkedplanet.uikit.style.ShowcaseStyles
 import com.linkedplanet.uikit.util.createElementNullSafe
 import com.linkedplanet.uikit.wrapper.atlaskit.code.CodeBlock
 import com.linkedplanet.uikit.wrapper.atlaskit.tab.Tab
 import com.linkedplanet.uikit.wrapper.atlaskit.tab.Tabs
-import kotlinx.css.*
+import csstype.*
+import emotion.react.css
 import react.*
 import react.dom.html.AnchorTarget
 import react.dom.html.ReactHTML.a
+import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.h3
-import react.dom.span
-import styled.css
-import styled.styledDiv
+import react.dom.html.ReactHTML.span
 
 data class Package(
     val name: String,
@@ -65,18 +64,19 @@ val ShowcaseWrapperItem = fc<ShowcaseWrapperItemProps> { props ->
         ?: ""
 
     // Render
-    styledDiv {
-        css {
-            +ShowcaseStyles.showcaseItem
+    div {
+        attrs.css {
+            padding = Padding(20.px, 20.px)
         }
 
         h3 {
             +props.name
         }
 
-        styledDiv {
-            css {
-                +ShowcaseStyles.showcaseItemPackages
+        div {
+            attrs.css {
+                fontWeight = FontWeight.lighter
+                fontSize = 0.8.rem
             }
             span {
                 +"Packages: "
@@ -93,23 +93,21 @@ val ShowcaseWrapperItem = fc<ShowcaseWrapperItemProps> { props ->
             }
         }
 
-        styledDiv {
-            css {
+        div {
+            attrs.css {
                 // Eliminate margin of tabs
                 marginLeft = -8.px
             }
             Tabs {
                 attrs.tabs = arrayOf(
                     Tab("Example", createElementNullSafe {
-                        styledDiv {
-                            css {
-                                +ShowcaseStyles.showcaseItemExamplesContainer
+                        div {
+                            attrs.css {
+                                display = Display.flex
                             }
                             props.examples.forEach {
-                                styledDiv {
-                                    css {
-                                        +ShowcaseStyles.showcaseItemExample
-                                    }
+                                div {
+                                    attrs.className = ClassName("example")
                                     +it
                                 }
                             }
@@ -118,8 +116,8 @@ val ShowcaseWrapperItem = fc<ShowcaseWrapperItemProps> { props ->
 
                     Tab("Example source", createElementNullSafe {
                         if (code.isNotEmpty()) {
-                            styledDiv {
-                                css {
+                            div {
+                                attrs.css {
                                     width = 100.pct
                                 }
                                 CodeBlock {
@@ -150,5 +148,4 @@ private fun extractSourceCodeExample(overallSourceCode: String, sourceCodeExampl
     } else ""
 }
 
-fun RBuilder.ShowcaseWrapperItem(handler: ShowcaseWrapperItemProps.() -> Unit) =
-    child(ShowcaseWrapperItem) { attrs { handler() } }
+