Validator (#215)

* feat: add Validador support * Error bus * Refactor Sample layout
cheleb · Oct 3, 2024 · 947fde5 · 947fde5
1 parent 425e8b0
commit 947fde5
Show file tree

Hide file tree

Showing 20 changed files with 698 additions and 264 deletions.
diff --git a/examples/client/index.html b/examples/client/index.html
@@ -5,6 +5,10 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/png" href="ui5-logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
+    />
   <link rel="stylesheet" href="/style.css" />
   <title>Demo Laminar SAP UI5 bindings</title>
   <style>

diff --git a/examples/client/package.json b/examples/client/package.json
@@ -11,10 +11,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ui5/webcomponents": "2.0.1",
-    "@ui5/webcomponents-fiori": "2.0.1",
-    "@ui5/webcomponents-icons": "2.0.1",
-    "highlight.js": "^11.8.0",
+    "@ui5/webcomponents": "2.1.0",
+    "@ui5/webcomponents-fiori": "2.1.0",
+    "@ui5/webcomponents-icons": "2.1.0",
+    "highlight.js": "^11.9.0",
     "jsdom": "^9.9.0"
   },
   "devDependencies": {

diff --git a/examples/client/src/main/scala/Index.scala b/examples/client/src/main/scala/Index.scala
@@ -3,12 +3,19 @@ package samples
 import org.scalajs.dom
 import com.raquo.laminar.api.L.*
 import be.doeraene.webcomponents.ui5.*
+import demo.facades.highlightjs.{hljs, hljsScala}
 
-case class Sample(name: String, component: HtmlElement)
+case class Sample(
+    name: String,
+    component: HtmlElement,
+    debug: HtmlElement,
+    source: String = "TODO"
+)
 
 object App extends App {
+  hljs.registerLanguage("scala", hljsScala)
 
-  val sample = Var(samples.either.component)
+  val sampleVar = Var(samples.simple)
 
   private def item(name: String) = SideNavigation.item(
     _.text := name,
@@ -17,11 +24,11 @@ object App extends App {
 
   private val demos = Seq(
     samples.simple,
-    samples.sealedClasses,
     samples.either,
+    samples.validation,
     samples.enums,
+    samples.sealedClasses,
     samples.person,
-    samples.validation,
     samples.list,
     samples.tree
   )
@@ -41,10 +48,9 @@ object App extends App {
             .map(_.detail.item.dataset.get("componentName")) --> Observer[
             Option[String]
           ] { name =>
-            val el = name
+            name
               .flatMap(n => demos.find(_.name == n))
-
-            sample.set(el.map(_.component).getOrElse(div("Not found!")))
+              .foreach(sampleVar.set)
 
           },
           demos.map(_.name).map(item)
@@ -59,7 +65,44 @@ object App extends App {
           padding := "10px",
           minWidth := "40%",
           maxWidth := "calc(100% - 320px)",
-          child <-- sample.signal
+          table(
+            tr(
+              td(
+                div(
+                  child <-- sampleVar.signal.map(_.component)
+                )
+              ),
+              td(
+                div(
+                  marginTop := "1em",
+                  overflowX := "auto",
+                  border := "0.0625rem solid #C1C1C1",
+                  backgroundColor := "#f5f6fa",
+                  padding := "1rem",
+                  Title.h3("Code"),
+                  child <-- sampleVar.signal
+                    .map(_.source)
+                    .map(src =>
+                      pre(
+                        code(
+                          className := "language-scala",
+                          src,
+                          onMountCallback(ctx =>
+                            hljs.highlightElement(ctx.thisNode.ref)
+                          )
+                        )
+                      )
+                    )
+                )
+              )
+            ),
+            tr(
+              td(
+                colSpan := 2,
+                child <-- sampleVar.signal.map(_.debug)
+              )
+            )
+          )
         )
       )
     )

diff --git a/examples/client/src/main/scala/facades/highlightjs/HljsLanguage.scala b/examples/client/src/main/scala/facades/highlightjs/HljsLanguage.scala
@@ -0,0 +1,7 @@
+package demo.facades.highlightjs
+
+import scala.scalajs.js
+
+/** Marker trait for all js Object that represents languages to be registered & Hljs
+  */
+trait HljsLanguage extends js.Object
diff --git a/examples/client/src/main/scala/facades/highlightjs/hljs.scala b/examples/client/src/main/scala/facades/highlightjs/hljs.scala
@@ -0,0 +1,16 @@
+package demo.facades.highlightjs
+
+import org.scalajs.dom
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+@js.native
+@JSImport("highlight.js/lib/core", JSImport.Default)
+object hljs extends js.Object {
+
+  def highlightElement(element: dom.HTMLElement): Unit = js.native
+
+  def registerLanguage(name: String, language: HljsLanguage): Unit = js.native
+
+}
diff --git a/examples/client/src/main/scala/facades/highlightjs/hljsScala.scala b/examples/client/src/main/scala/facades/highlightjs/hljsScala.scala
@@ -0,0 +1,8 @@
+package demo.facades.highlightjs
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+@js.native
+@JSImport("highlight.js/lib/languages/scala", JSImport.Default)
+object hljsScala extends HljsLanguage
diff --git a/examples/client/src/main/scala/samples/EitherSample.scala b/examples/client/src/main/scala/samples/EitherSample.scala
@@ -20,16 +20,20 @@ val either = {
     )
   )
   Sample(
-    "Either", {
-
+    "Either",
+    eitherVar.asForm,
+    div(child <-- eitherVar.signal.map { item =>
       div(
-        child <-- eitherVar.signal.map { item =>
-          div(
-            s"$item"
-          )
-        },
-        eitherVar.asForm
+        s"$item"
       )
-    }
+    }),
+    """|
+         |@Panel("Either", false)
+         |case class EitherSample(
+         |    either: Either[Cat, Dog],
+         |    primitiveEither: Either[Cat, String],
+         |    optionalInt: Option[Int]
+  )""".stripMargin
   )
+
 }
diff --git a/examples/client/src/main/scala/samples/EnumSample.scala b/examples/client/src/main/scala/samples/EnumSample.scala
@@ -23,16 +23,31 @@ val enums = {
     Basket(Color.Black, Cat("Scala", 10, Color.White))
   )
   Sample(
-    "Enums", {
-
-      div(
-        child <-- eitherVar.signal.map { item =>
-          div(
-            s"$item"
-          )
-        },
-        eitherVar.asForm
-      )
-    }
+    "Enums",
+    eitherVar.asForm,
+    div(
+      child <-- eitherVar.signal.map { item =>
+        div(
+          s"$item"
+        )
+      }
+    ),
+    """|
+         |  enum Color(val code: String):
+         |    case Black extends Color("000")
+         |    case White extends Color("FFF")
+         |    case Isabelle extends Color("???")
+         |
+         |  given colorForm: Form[Color] = enumForm(Color.values, Color.fromOrdinal)
+         |
+         |  case class Basket(color: Color, cat: Cat)
+         |
+         |  case class Cat(
+         |      name: String,
+         |      age: Int,
+         |      color: Color
+         |  )
+         |
+         |""".stripMargin
   )
 }
diff --git a/examples/client/src/main/scala/samples/ListElement.scala b/examples/client/src/main/scala/samples/ListElement.scala
@@ -18,14 +18,18 @@ val list = {
 
   Sample(
     "List",
-    div(
-      child <-- listPersonVar.signal.map { item =>
-        div(
-          s"$item"
-        )
-      },
-      listPersonVar.asForm
-    )
+    listPersonVar.asForm,
+    div(child <-- listPersonVar.signal.map { item =>
+      div(
+        s"$item"
+      )
+    }),
+    """|case class Person2(id: Int, name: String, age: Int)
+         |
+         |case class ListElement(
+         |     ints: List[Person2]
+         |)
+         |""".stripMargin
   )
 
 }
diff --git a/examples/client/src/main/scala/samples/Persons.scala b/examples/client/src/main/scala/samples/Persons.scala
@@ -20,7 +20,7 @@ val person = {
       pet: Option[Pet],
       email: Option[String],
       age: BigInt,
-      size: Double
+      size: Double :| Positive
   )
   case class Pet(
       name: String,
@@ -49,15 +49,71 @@ val person = {
     )
 
   val personVar = Var(vlad)
+
+  val errorBus = personVar.errorBus
+
   Sample(
     "Person",
     div(
-      child <-- personVar.signal.map { item =>
-        div(
-          s"$item"
-        )
-      },
-      personVar.asForm
-    )
+      personVar.asForm(errorBus),
+      div(
+        child <-- errorBus.watch
+          .map { errors =>
+            div(
+              errors.collect {
+                case (field, ValidationStatus.Invalid(message, true)) =>
+                  div(
+                    s"$field: $message"
+                  )
+              }.toSeq
+            )
+          }
+      )
+    ),
+    div(child <-- personVar.signal.map { item =>
+      div(
+        s"$item"
+      )
+    }),
+    """|
+           |  @NoPanel
+           |  case class Person(
+           |      @FieldName("First Name")
+           |      name: String,
+           |      password: Password,
+           |      birthDate: LocalDate,
+           |      fav: Pet,
+           |      pet: Option[Pet],
+           |      email: Option[String],
+           |      age: BigInt,
+           |      size: Double :| Positive
+           |  )
+           |  case class Pet(
+           |      name: String,
+           |      age: BigInt,
+           |      House: House,
+           |      size: Double :| Positive
+           |  )
+           |
+           |  case class House(capacity: Int)
+           |
+           |  // Provide default for optional
+           |  given Defaultable[Pet] with
+           |    def default = Pet("No pet", 0, House(0), 1)
+           |
+           |  // Instance your model
+           |  val vlad =
+           |    Person(
+           |      "",
+           |      Password("not a password"),
+           |      LocalDate.of(1431, 11, 8),
+           |      Pet("Batman", 666, House(2), 169),
+           |      Some(Pet("Wolfy", 12, House(1), 42)),
+           |      Some("[email protected]"),
+           |      48,
+           |      1.85
+           |    )
+           |
+           |""".stripMargin
   )
 }