Merge pull request #5 from jillesvangurp/daisyui

daisyui
jillesvangurp · Nov 13, 2024 · 843e59b · 843e59b
2 parents ecc7f42 + b8d546f
commit 843e59b
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 150 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -51,6 +51,7 @@ kotlin {
                 // tailwind
                 implementation(npm("tailwindcss", "_"))
                 implementation(npm("@tailwindcss/forms", "_"))
+                implementation(npm("daisyui", "_"))
 
                 // fluent-js
                 implementation("com.tryformation:fluent-kotlin:_")

diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
@@ -1083,6 +1083,14 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
+css-selector-tokenizer@^0.8:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
@@ -1165,11 +1173,26 @@ csso@^5.0.5:
   dependencies:
     css-tree "~2.2.0"
 
+culori@^3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
+  integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
+
 custom-event@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
   integrity sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==
 
+[email protected]:
+  version "4.12.14"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.12.14.tgz#c5c2061f97769aa3b56ab62e5bd147ee3979c90f"
+  integrity sha512-hA27cdBasdwd4/iEjn+aidoCrRroDuo3G5W9NDKaVCJI437Mm/3eSL/2u7MkZ0pt8a+TrYF3aT2pFVemTS3how==
+  dependencies:
+    css-selector-tokenizer "^0.8"
+    culori "^3"
+    picocolors "^1"
+    postcss-js "^4"
+
 date-format@^4.0.14:
   version "4.0.14"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400"
@@ -1539,6 +1562,11 @@ fastest-levenshtein@^1.0.12:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
@@ -2609,6 +2637,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
+picocolors@^1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -2703,7 +2736,7 @@ postcss-import@^15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.1:
+postcss-js@^4, postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==

diff --git a/src/jsMain/kotlin/components/buttons.kt b/src/jsMain/kotlin/components/buttons.kt
@@ -17,8 +17,8 @@ import kotlin.random.nextULong
 import kotlinx.browser.document
 import kotlinx.serialization.KSerializer
 import org.w3c.dom.HTMLButtonElement
-import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.events.MouseEvent
+import org.w3c.files.File
 
 fun RenderContext.primaryButton(
     id: String? = null,
@@ -27,25 +27,15 @@ fun RenderContext.primaryButton(
     text: String? = null,
     content: HtmlTag<HTMLButtonElement>.() -> Unit
 ) = button(
-    baseClass = """my-2 w-fit text-white bg-blueBright-600 hover:bg-blueBright-700 disabled:bg-gray-300 
-        |focus:ring-button-300 focus:ring-4 font-medium rounded-lg 
-        |text-sm px-6 py-2 focus:outline-none 
-        |drop-shadow-md hover:drop-shadow-xl""".trimMargin(),
+    "btn btn-primary btn-sm",
     id = id,
     scope = scope,
     content = {
-        if (iconSource != null || text != null) {
-            div("flex flex-row gap-2 flex-nowrap align-middle") {
-                iconSource?.let {
-                    iconImage(iconSource, baseClass = "h-5 w-5 fill-white place-items-center")
-                }
-                text?.let {
-                    div {
-                        +text
-                    }
-                }
-            }
+        iconSource?.let {
+            iconImage(iconSource, baseClass = "h-4 w-4 fill-white")
         }
+        if (text != null)
+            +text
         content.invoke(this)
     }
 )
@@ -57,53 +47,36 @@ fun RenderContext.secondaryButton(
     text: String? = null,
     content: HtmlTag<HTMLButtonElement>.() -> Unit
 ) = button(
-    baseClass = """my-2 w-fit text-white bg-blueMuted-600 hover:bg-blueMuted-700 disabled:bg-gray-300 
-        |focus:ring-buttonSecondary-300 focus:ring-4 font-medium rounded-lg 
-        |text-sm px-6 py-2 focus:outline-none
-        |drop-shadow-md hover:drop-shadow-xl""".trimMargin(),
+    baseClass = """btn btn-secondary btn-sm""".trimMargin(),
     id = id,
     scope = scope,
     content = {
-        if (iconSource != null || text != null) {
-            div("flex flex-row gap-2 place-items-center") {
-                iconSource?.let {
-                    iconImage(iconSource, baseClass = "h-5 w-5 fill-white place-items-center")
-                }
-                text?.let {
-                    span {
-                        +text
-                    }
-                }
-            }
+        iconSource?.let {
+            iconImage(iconSource, baseClass = "h-4 w-4 fill-white")
+        }
+        if (text != null) {
+            +text
         }
         content.invoke(this)
     }
 )
+
 fun RenderContext.secondaryButtonSmall(
     id: String? = null,
     scope: (ScopeContext.() -> Unit) = {},
     iconSource: SvgIconSource? = null,
     text: String? = null,
     content: HtmlTag<HTMLButtonElement>.() -> Unit
 ) = button(
-    baseClass = """my-2 w-fit text-white bg-blueMuted-600 hover:bg-blueMuted-700 disabled:bg-gray-300 
-        |focus:ring-buttonSecondary-300 focus:ring-4 font-medium rounded-lg 
-        |text-sm px-2 py-2 focus:outline-none
-        |drop-shadow-md hover:drop-shadow-xl""".trimMargin(),
+    baseClass = """btn btn-secondary btn-sm""".trimMargin(),
     id = id,
     scope = scope,
     content = {
-        if (iconSource != null || text != null) {
-            div("flex flex-row gap-2 place-items-center") {
-                iconSource?.let {
-                    iconImage(iconSource, baseClass = "h-4 w-4 fill-white place-items-center")
-                }
-                text?.let {
-                    span {
-                        +text
-                    }
-                }
-            }
+        iconSource?.let {
+            iconImage(iconSource, baseClass = "h-4 w-4 fill-white place-items-center")
+        }
+        if (text != null) {
+            +text
         }
         content.invoke(this)
     }
@@ -138,10 +111,10 @@ fun <T> RenderContext.jsonDownloadButton(
     fileName: String,
     serializer: KSerializer<T>,
     buttonText: String = "Download",
-    converter: (T) -> String = {content ->
+    converter: (T) -> String = { content ->
         DEFAULT_PRETTY_JSON.encodeToString(serializer, content)
     },
-    after: (suspend () -> Unit)?=null
+    after: (suspend () -> Unit)? = null
 ) {
     contentStore.data.render { content ->
         val downloadLinkId = "link-${Random.nextULong()}"
@@ -219,34 +192,26 @@ fun <T> RenderContext.jsonDownloadButton(
 fun <T> RenderContext.jsonFileImport(
     serializer: KSerializer<T>,
     buttonText: String = "Import",
-    after: (suspend () -> Unit)?=null,
+    after: (suspend () -> Unit)? = null,
     onImport: (T) -> Unit,
 ) {
-    flexRow {
-        val textStore = storeOf("")
-        val fileInputId = "file-input-${Random.nextULong()}"
-        textStore.data.render { text ->
-            textFileInput(
-                fileType = ".json",
-                textStore = textStore,
-                fileInputId = fileInputId
-            )
-            primaryButton(text = buttonText, iconSource = SvgIconSource.Upload) {
-                disabled(text.isBlank())
-                clicks handledBy {
-                    try {
-                        val decoded = DEFAULT_JSON.decodeFromString(serializer, text)
-                        onImport.invoke(decoded)
-                    } catch (e: Exception) {
-                        errorBubble("Parse error for file: ${e.message}")
-                    }
-                    document.getElementById(fileInputId)?.let { inputElement ->
-                        inputElement as HTMLInputElement
-                        inputElement.value = ""
-                        textStore.update("")
-                    }
-                    after?.invoke()
+    val store = storeOf<Pair<File,String>?>(null)
+    store.data.render { pair ->
+        textFileInput(
+            fileType = ".json",
+            store = store,
+        )
+        primaryButton(text = buttonText, iconSource = SvgIconSource.Upload) {
+            disabled(pair == null)
+            clicks handledBy {
+                try {
+                    val decoded = DEFAULT_JSON.decodeFromString(serializer, pair!!.second)
+                    onImport.invoke(decoded)
+                    store.update(null)
+                } catch (e: Exception) {
+                    errorBubble("Parse error for file: ${e.message}")
                 }
+                after?.invoke()
             }
         }
     }
@@ -260,7 +225,7 @@ fun RenderContext.iconButton(
 ) {
     button(baseClass) {
         svg {
-            attr("viewBox",svg.viewBox)
+            attr("viewBox", svg.viewBox)
             content(svg.content)
         }
         title(title)