Merge pull request #6 from kostaskougios/0.21

0.21

Readme.md

@@ -158,6 +158,10 @@ all changes that may have occurred at the browser and all the changes we did on
 Please use the [discussions](https://github.com/kostaskougios/terminal21-restapi/discussions) of the project to post any questions, comments or ideas.
 
 # Changelog
+## Version 0.21
+
+- more std and chakra components like Alert, Progress, Tooltip, Tabs.
+
 ## Version 0.20
 
 - immutable components

build.sbt

@@ -5,7 +5,7 @@ import sbt.librarymanagement.ModuleFilter
   */
 val scala3Version = "3.3.1"
 
-ThisBuild / version      := "0.20"
+ThisBuild / version      := "0.21"
 ThisBuild / organization := "io.github.kostaskougios"
 name                     := "rest-api"
 ThisBuild / scalaVersion := scala3Version

end-to-end-tests/src/main/scala/tests/ChakraComponents.scala

@@ -27,7 +27,9 @@ import java.util.concurrent.atomic.AtomicBoolean
 
       (Overlay.components ++ Forms.components ++ Editables.components ++ Stacks.components ++ Grids.components ++ Buttons.components(
         latch
-      ) ++ Etc.components ++ MediaAndIcons.components ++ DataDisplay.components ++ Typography.components ++ Seq(krButton))
+      ) ++ Etc.components ++ MediaAndIcons.components ++ DataDisplay.components ++ Typography.components ++ Feedback.components ++ Disclosure.components ++ Navigation.components ++ Seq(
+        krButton
+      ))
         .render()
 
       println("Waiting for button to be pressed for 1 hour")

end-to-end-tests/src/main/scala/tests/StdComponents.scala

@@ -14,7 +14,12 @@ import org.terminal21.client.components.std.*
       output.withText(newValue).renderChanges()
 
     Seq(
-      Header1(text = "Welcome to the std components demo/test"),
+      Header1(text = "header1 test"),
+      Header2(text = "header2 test"),
+      Header3(text = "header3 test"),
+      Header4(text = "header4 test"),
+      Header5(text = "header5 test"),
+      Header6(text = "header6 test"),
       Paragraph(text = "Hello World!").withChildren(
         NewLine(),
         Span(text = "Some more text"),

end-to-end-tests/src/main/scala/tests/chakra/DataDisplay.scala

@@ -3,6 +3,7 @@ package tests.chakra
 import org.terminal21.client.ConnectedSession
 import org.terminal21.client.components.UiElement
 import org.terminal21.client.components.chakra.*
+import org.terminal21.client.components.std.NewLine
 import tests.chakra.Common.*
 
 object DataDisplay:
@@ -67,5 +68,23 @@ object DataDisplay:
             headAndFoot
           )
         )
+      ),
+      VStack().withChildren(
+        Code(text = """
+          |code-0001
+          |""".stripMargin),
+        Code(colorScheme = Some("red")).withChildren(
+          Text(text = "val a=1"),
+          NewLine(),
+          Text(text = "println(a)")
+        )
+      ),
+      UnorderedList().withChildren(
+        ListItem(text = "unordered-list-list-item1"),
+        ListItem(text = "unordered-list-list-item2")
+      ),
+      OrderedList().withChildren(
+        ListItem(text = "Ordered-list-list-item1"),
+        ListItem(text = "Ordered-list-list-item2")
       )
     )

end-to-end-tests/src/main/scala/tests/chakra/Disclosure.scala

@@ -0,0 +1,31 @@
+package tests.chakra
+
+import org.terminal21.client.ConnectedSession
+import org.terminal21.client.components.UiElement
+import org.terminal21.client.components.chakra.*
+import org.terminal21.client.components.std.Paragraph
+import tests.chakra.Common.commonBox
+
+object Disclosure:
+  def components(using session: ConnectedSession): Seq[UiElement] =
+    Seq(
+      commonBox(text = "Tabs"),
+      Tabs().withChildren(
+        TabList().withChildren(
+          Tab(text = "tab-one", _selected = Map("color" -> "white", "bg" -> "blue.500")),
+          Tab(text = "tab-two", _selected = Map("color" -> "white", "bg" -> "green.400")),
+          Tab(text = "tab-three")
+        ),
+        TabPanels().withChildren(
+          TabPanel().withChildren(
+            Paragraph(text = "tab-1-content")
+          ),
+          TabPanel().withChildren(
+            Paragraph(text = "tab-2-content")
+          ),
+          TabPanel().withChildren(
+            Paragraph(text = "tab-3-content")
+          )
+        )
+      )
+    )

end-to-end-tests/src/main/scala/tests/chakra/Feedback.scala

@@ -0,0 +1,23 @@
+package tests.chakra
+
+import org.terminal21.client.ConnectedSession
+import org.terminal21.client.components.UiElement
+import org.terminal21.client.components.chakra.*
+import tests.chakra.Common.commonBox
+
+object Feedback:
+  def components(using session: ConnectedSession): Seq[UiElement] =
+    Seq(
+      commonBox(text = "Alerts"),
+      VStack().withChildren(
+        Alert(status = "error").withChildren(AlertIcon(), AlertTitle(text = "Alert:error"), AlertDescription(text = "alert-error-text-01")),
+        Alert(status = "success").withChildren(AlertIcon(), AlertTitle(text = "Alert:success"), AlertDescription(text = "alert-success-text-01")),
+        Alert(status = "warning").withChildren(AlertIcon(), AlertTitle(text = "Alert:warning"), AlertDescription(text = "alert-warning-text-01")),
+        Alert(status = "info").withChildren(AlertIcon(), AlertTitle(text = "Alert:info"), AlertDescription(text = "alert-info-text-01"))
+      ),
+      commonBox(text = "Progress"),
+      Progress(value = 10),
+      Progress(value = 20, hasStripe = Some(true)),
+      Progress(value = 30, isIndeterminate = Some(true)),
+      Tooltip(label = "A help message").withContent(Text(text = "hover me!"))
+    )

end-to-end-tests/src/main/scala/tests/chakra/Navigation.scala

@@ -0,0 +1,36 @@
+package tests.chakra
+
+import org.terminal21.client.ConnectedSession
+import org.terminal21.client.components.UiElement
+import org.terminal21.client.components.chakra.*
+import org.terminal21.client.components.std.Paragraph
+import tests.chakra.Common.commonBox
+
+object Navigation:
+  def components(using session: ConnectedSession): Seq[UiElement] =
+    val clickedBreadcrumb                  = Paragraph(text = "no-breadcrumb-clicked")
+    def breadcrumbClicked(t: String): Unit =
+      clickedBreadcrumb.withText(s"breadcrumb-click: $t").renderChanges()
+
+    val clickedLink = Paragraph(text = "no-link-clicked")
+
+    Seq(
+      commonBox(text = "Breadcrumbs"),
+      Breadcrumb().withChildren(
+        BreadcrumbItem().withChildren(
+          BreadcrumbLink(text = "breadcrumb-home").onClick(() => breadcrumbClicked("breadcrumb-home"))
+        ),
+        BreadcrumbItem().withChildren(
+          BreadcrumbLink(text = "breadcrumb-link1").onClick(() => breadcrumbClicked("breadcrumb-link1"))
+        ),
+        BreadcrumbItem(isCurrentPage = Some(true)).withChildren(
+          BreadcrumbLink(text = "breadcrumb-link2").onClick(() => breadcrumbClicked("breadcrumb-link2"))
+        )
+      ),
+      clickedBreadcrumb,
+      commonBox(text = "Link"),
+      Link(text = "link-external-google", href = "https://www.google.com/", isExternal = Some(true))
+        .onClick: () =>
+          clickedLink.withText("link-clicked").renderChanges(),
+      clickedLink
+    )

example-scripts/bouncing-ball.sc

@@ -7,7 +7,6 @@
 
 // always import these
 import org.terminal21.client.*
-// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.*
 // use the chakra components for menus, forms etc, https://chakra-ui.com/docs/components
 // The scala case classes : https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/chakra/ChakraElement.scala
@@ -18,7 +17,9 @@ import scala.annotation.tailrec
 Sessions.withNewSession("bouncing-ball", "C64 bouncing ball"): session =>
   given ConnectedSession = session
 
-  // Files under ~/.terminal21/web will be served under /web . Please place a ball.png file under ~/.terminal21/web/images on the box where the server runs.
+  println(
+    "Files under ~/.terminal21/web will be served under /web . Please place a ball.png file under ~/.terminal21/web/images on the box where the server runs."
+  )
   val ball = Image(src = "/web/images/ball.png")
   ball.render()
 
@@ -27,6 +28,6 @@ Sessions.withNewSession("bouncing-ball", "C64 bouncing ball"): session =>
     Thread.sleep(1000 / 120)
     val newDx = if x < 0 || x > 600 then -dx else dx
     val newDy = if y < 0 || y > 500 then -dy else dy
-    animateBall(x + newDx, y + newDy, newDx, newDy)
+    if !session.isClosed then animateBall(x + newDx, y + newDy, newDx, newDy)
 
   animateBall(50, 50, 8, 8)

example-scripts/csv-editor.sc

@@ -8,7 +8,6 @@
 import org.terminal21.client.*
 
 import java.util.concurrent.atomic.AtomicBoolean
-// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.*
 // use the chakra components for menus, forms etc, https://chakra-ui.com/docs/components
 // The scala case classes : https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/chakra/ChakraElement.scala
@@ -55,7 +54,7 @@ def saveCsvMap() =
     .mkString("\n")
   FileUtils.writeStringToFile(file, s, "UTF-8")
 
-  // this will be countDown to 0 when we have to exit
+  // this will be set to true when we have to exit
 val exitFlag = new AtomicBoolean(false)
 
 Sessions.withNewSession(s"csv-editor-$fileName", s"CsvEdit: $fileName"): session =>
@@ -107,4 +106,3 @@ Sessions.withNewSession(s"csv-editor-$fileName", s"CsvEdit: $fileName"): session
   println(s"Now open ${session.uiUrl} to view the UI")
   // wait for one of the save/exit buttons to be pressed.
   session.waitTillUserClosesSessionOr(exitFlag.get())
-

example-scripts/csv-viewer.sc

@@ -6,7 +6,6 @@
 
 // always import these
 import org.terminal21.client.*
-// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.*
 // use the chakra components for menus, forms etc, https://chakra-ui.com/docs/components
 // The scala case classes : https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/chakra/ChakraElement.scala
@@ -23,7 +22,7 @@ if args.length != 1 then
   )
 
 val fileName = args(0)
-val file     = new File(fileName)
+val file = new File(fileName)
 val contents = FileUtils.readFileToString(file, "UTF-8")
 
 val csv = contents.split("\n").map(_.split(","))
@@ -44,7 +43,8 @@ Sessions.withNewSession(s"csv-viewer-$fileName", s"CsvView: $fileName"): session
               )
           )
         )
-    ).render()
+    )
+    .render()
   println(s"Now open ${session.uiUrl} to view the UI.")
   // since this is a read-only UI, we can exit the app but leave the session open on the UI for the user to examine the data.
   session.leaveSessionOpenAfterExiting()

example-scripts/hello-world.sc

@@ -5,8 +5,8 @@
 
 // always import these
 import org.terminal21.client.*
-// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.*
+// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.std.*
 
 Sessions.withNewSession("hello-world", "Hello World Example"): session =>

example-scripts/postit.sc

@@ -5,8 +5,8 @@
 
 // always import these
 import org.terminal21.client.*
-// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.*
+// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.std.*
 // use the chakra components for menus, forms etc, https://chakra-ui.com/docs/components
 // The scala case classes : https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/chakra/ChakraElement.scala
@@ -15,9 +15,9 @@ import org.terminal21.client.components.chakra.*
 Sessions.withNewSession("postit", "Post-It"): session =>
   given ConnectedSession = session
 
-  val editor   = Textarea(placeholder = "Please post your note by clicking here and editing the content")
+  val editor = Textarea(placeholder = "Please post your note by clicking here and editing the content")
   val messages = VStack(align = Some("stretch"))
-  val add      = Button(text = "Post It.").onClick: () =>
+  val add = Button(text = "Post It.").onClick: () =>
     // add the new msg.
     // note: editor.value is automatically updated by terminal-ui
     val currentMessages = messages.current

example-scripts/project.scala

@@ -1,8 +1,8 @@
 //> using jvm "21"
 //> using scala 3
 
-//> using dep io.github.kostaskougios::terminal21-ui-std:0.20
-//> using dep io.github.kostaskougios::terminal21-nivo:0.20
-//> using dep io.github.kostaskougios::terminal21-mathjax:0.20
+//> using dep io.github.kostaskougios::terminal21-ui-std:0.21
+//> using dep io.github.kostaskougios::terminal21-nivo:0.21
+//> using dep io.github.kostaskougios::terminal21-mathjax:0.21
 
 //> using dep commons-io:commons-io:2.15.1

example-scripts/server.sc

@@ -2,7 +2,7 @@
 
 //> using jvm "21"
 //> using scala 3
-//> using dep io.github.kostaskougios::terminal21-server:0.20
+//> using dep io.github.kostaskougios::terminal21-server:0.21
 
 import org.terminal21.server.Terminal21Server
 

example-scripts/textedit.sc

@@ -10,8 +10,8 @@ import java.io.File
 
 // always import these
 import org.terminal21.client.*
-// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.*
+// std components, https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/StdElement.scala
 import org.terminal21.client.components.std.*
 // use the chakra components for menus, forms etc, https://chakra-ui.com/docs/components
 // The scala case classes : https://github.com/kostaskougios/terminal21-restapi/blob/main/terminal21-ui-std/src/main/scala/org/terminal21/client/components/chakra/ChakraElement.scala
@@ -25,7 +25,7 @@ if args.length != 1 then
   )
 
 val fileName = args(0)
-val file     = new File(fileName)
+val file = new File(fileName)
 val contents =
   if file.exists() then FileUtils.readFileToString(file, "UTF-8") else ""
 
@@ -34,13 +34,13 @@ def saveFile(content: String) = FileUtils.writeStringToFile(file, content, "UTF-
 Sessions.withNewSession(s"textedit-$fileName", s"Edit: $fileName"): session =>
   given ConnectedSession = session
   // we will wait till the user clicks the "Exit" menu, this latch makes sure the main thread of the app waits.
-  val exitLatch          = new CountDownLatch(1)
+  val exitLatch = new CountDownLatch(1)
   // the main editor area.
-  val editor             = Textarea(value = contents)
+  val editor = Textarea(value = contents)
   // This will display a "saved" badge for a second when the user saves the file
-  val status             = Badge()
+  val status = Badge()
   // This will display an asterisk when the contents of the file are changed in the editor
-  val modified           = Badge(colorScheme = Some("red"))
+  val modified = Badge(colorScheme = Some("red"))
 
   // when the user changes the textarea, we get the new text and we can compare it with the loaded value.
   editor.onChange: newValue =>

example-spark/project.scala

@@ -8,10 +8,10 @@
 //> using javaOpt -Dlogback.configurationFile=file:etc/logback.xml
 
 // terminal21 dependencies
-//> using dep io.github.kostaskougios::terminal21-ui-std:0.20
-//> using dep io.github.kostaskougios::terminal21-spark:0.20
-//> using dep io.github.kostaskougios::terminal21-nivo:0.20
-//> using dep io.github.kostaskougios::terminal21-mathjax:0.20
+//> using dep io.github.kostaskougios::terminal21-ui-std:0.21
+//> using dep io.github.kostaskougios::terminal21-spark:0.21
+//> using dep io.github.kostaskougios::terminal21-nivo:0.21
+//> using dep io.github.kostaskougios::terminal21-mathjax:0.21
 
 //> using dep ch.qos.logback:logback-classic:1.4.14
 

terminal21-ui-std/src/main/scala/org/terminal21/client/ConnectedSession.scala

@@ -95,7 +95,7 @@ class ConnectedSession(val session: Session, encoding: UiElementEncoding, val se
             el.key,
             el match
               case e: UiComponent    => encoding.uiElementEncoder(e).deepDropNullValues
-              case e: HasChildren[_] => encoding.uiElementEncoder(e.withChildren()).deepDropNullValues
+              case e: HasChildren[_] => encoding.uiElementEncoder(e.noChildren).deepDropNullValues
               case e                 => encoding.uiElementEncoder(e).deepDropNullValues
           )
         .toMap,

terminal21-ui-std/src/main/scala/org/terminal21/client/components/UiElement.scala

@@ -30,6 +30,7 @@ object UiElement:
     def children: Seq[UiElement]
     override def flat: Seq[UiElement]  = Seq(this) ++ children.flatMap(_.flat)
     def withChildren(cn: UiElement*): A
+    def noChildren: A                  = withChildren()
     def addChildren(cn: UiElement*): A = withChildren(children ++ cn: _*)
 
   trait HasEventHandler: