Import semantic-ui

.github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
         os: [ubuntu-latest]
         scala: [3.1.2]
         java: [temurin@17]
-        project: [rootCore, rootGridLayout, rootDraggable, rootClipboard, rootSvgdotjs, rootVirtuoso, rootTable, rootHighcharts, rootDatepicker, rootBeautifulDnd, rootTree]
+        project: [rootCore, rootGridLayout, rootDraggable, rootClipboard, rootSvgdotjs, rootVirtuoso, rootTable, rootHighcharts, rootDatepicker, rootBeautifulDnd, rootTree, rootSemanticUI]
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout current branch (full)

.mergify.yml

@@ -23,6 +23,7 @@ pull_request_rules:
   - status-success=Build and Test (ubuntu-latest, 3.1.2, temurin@17, rootDatepicker)
   - status-success=Build and Test (ubuntu-latest, 3.1.2, temurin@17, rootBeautifulDnd)
   - status-success=Build and Test (ubuntu-latest, 3.1.2, temurin@17, rootTree)
+  - status-success=Build and Test (ubuntu-latest, 3.1.2, temurin@17, rootSemanticUI)
   actions:
     merge: {}
 - name: Label beautiful-dnd PRs
@@ -177,6 +178,14 @@ pull_request_rules:
       add:
       - rootHighcharts
       remove: []
+- name: Label rootSemanticUI PRs
+  conditions:
+  - files~=^rootSemanticUI/
+  actions:
+    label:
+      add:
+      - rootSemanticUI
+      remove: []
 - name: Label rootSvgdotjs PRs
   conditions:
   - files~=^rootSvgdotjs/
@@ -209,6 +218,22 @@ pull_request_rules:
       add:
       - rootVirtuoso
       remove: []
+- name: Label semantic-ui PRs
+  conditions:
+  - files~=^semantic-ui/
+  actions:
+    label:
+      add:
+      - semantic-ui
+      remove: []
+- name: Label semantic-ui-demo PRs
+  conditions:
+  - files~=^semantic-ui-demo/
+  actions:
+    label:
+      add:
+      - semantic-ui-demo
+      remove: []
 - name: Label svgdotjs PRs
   conditions:
   - files~=^svgdotjs/

build.sbt

@@ -126,7 +126,9 @@ lazy val root = project
     beautifulDnd,
     beautifulDndDemo,
     tree,
-    treeDemo
+    treeDemo,
+    semanticUI,
+    semanticUIDemo
   )
 
 lazy val rootCore         = project.aggregate(common, cats, test).enablePlugins(NoPublishPlugin)
@@ -150,18 +152,22 @@ lazy val rootBeautifulDnd =
   project.aggregate(beautifulDnd, beautifulDndDemo).enablePlugins(NoPublishPlugin)
 lazy val rootTree         =
   project.aggregate(tree, treeDemo).enablePlugins(NoPublishPlugin)
+lazy val rootSemanticUI   =
+  project.aggregate(semanticUI, semanticUIDemo).enablePlugins(NoPublishPlugin)
 
-val projects = List(rootCore,
-                    rootGridLayout,
-                    rootDraggable,
-                    rootClipboard,
-                    rootSvgdotjs,
-                    rootVirtuoso,
-                    rootTable,
-                    rootHighcharts,
-                    rootDatepicker,
-                    rootBeautifulDnd,
-                    rootTree
+val projects = List(
+  rootCore,
+  rootGridLayout,
+  rootDraggable,
+  rootClipboard,
+  rootSvgdotjs,
+  rootVirtuoso,
+  rootTable,
+  rootHighcharts,
+  rootDatepicker,
+  rootBeautifulDnd,
+  rootTree,
+  rootSemanticUI
 ).map(_.id)
 ThisBuild / githubWorkflowBuildMatrixAdditions += "project" -> projects
 ThisBuild / githubWorkflowBuildSbtStepPreamble += s"project $${{ matrix.project }}"
@@ -394,3 +400,21 @@ lazy val treeDemo = project
     Compile / scalacOptions += "-language:implicitConversions",
     demoSettings
   )
+
+lazy val semanticUI = project
+  .in(file("semantic-ui"))
+  .enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin)
+  .dependsOn(common)
+  .settings(
+    name := "lucuma-react-semantic-ui",
+    facadeSettings,
+    yarnSettings
+  )
+
+lazy val semanticUIDemo = project
+  .in(file("semantic-ui-demo"))
+  .enablePlugins(ScalaJSPlugin, NoPublishPlugin)
+  .dependsOn(semanticUI)
+  .settings(
+    demoSettings
+  )

semantic-ui-demo/src/main/scala/react/semanticui/demo/HomeComponent.scala

@@ -0,0 +1,43 @@
+// Copyright (c) 2016-2022 Association of Universities for Research in Astronomy, Inc. (AURA)
+// For license information see LICENSE or https://opensource.org/licenses/BSD-3-Clause
+
+package react.semanticui.demo
+
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
+
+object HomeComponent {
+  private val component =
+    ScalaComponent
+      .builder[Unit]("Home")
+      .render { _ =>
+        <.div(
+          ^.cls := "ui container",
+          <.div(
+            ^.cls := "ui basic center aligned segment",
+            <.img(
+              ^.src := Logo.asInstanceOf[String],
+              ^.cls := "ui small centered image"
+            ),
+            <.h1(
+              ^.cls := "ui center aligned header",
+              "ScalaJS Semantic UI React"
+            )
+          ),
+          <.div(
+            ^.cls := "ui basic padded segment",
+            <.h2(^.cls := "ui dividing header", "Introduction"),
+            <.p(
+              "ScalaJS Semantic UI React is a facade for ",
+              <.a(
+                ^.href := "https://react.semantic-ui.com",
+                "Semantic React UI"
+              )
+            )
+          )
+        )
+      }
+      .build
+
+  def apply() = component()
+}

semantic-ui-demo/src/main/scala/react/semanticui/demo/Layout.scala

@@ -0,0 +1,66 @@
+// Copyright (c) 2016-2022 Association of Universities for Research in Astronomy, Inc. (AURA)
+// For license information see LICENSE or https://opensource.org/licenses/BSD-3-Clause
+
+package react.semanticui.demo
+
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
+import japgolly.scalajs.react.extra.router._
+import scala.scalajs.js
+import js.annotation._
+
+@JSImport("/images/logo.png", JSImport.Default)
+@js.native
+object Logo extends js.Object
+
+object Layout {
+  final case class Props(c: RouterCtl[Page], r: Resolution[Page])
+
+  private val component =
+    ScalaComponent
+      .builder[Props]("Demo")
+      .render_P { p =>
+        <.div(
+          ^.cls := "app",
+          <.div(
+            ^.cls := "appmenu",
+            ^.cls := "ui inverted vertical left fixed menu",
+            <.div(
+              ^.cls := "item",
+              <.img(
+                ^.cls := "ui mini right spaced image",
+                ^.src := Logo.asInstanceOf[String]
+              ),
+              <.strong(
+                "ScalaJS SUI React ",
+                <.small(
+                  <.em("0.0.1")
+                )
+              )
+            ),
+            <.div(
+              ^.cls := "item",
+              <.div(
+                ^.cls := "header",
+                "Elements"
+              ),
+              <.div(
+                ^.cls := "menu",
+                p.c.link(ElementPage(IconsElement))("Icons", ^.cls := "item")
+              ),
+              <.div(
+                ^.cls := "menu",
+                p.c.link(ElementPage(LabelsElement))("Labels", ^.cls := "item")
+              )
+            )
+          ),
+          <.div(
+            ^.cls := "body",
+            p.r.render()
+          )
+        )
+      }
+      .build
+
+  def apply(p: Props) = component(p)
+}

semantic-ui-demo/src/main/scala/react/semanticui/demo/SUIMain.scala

@@ -0,0 +1,57 @@
+// Copyright (c) 2016-2022 Association of Universities for Research in Astronomy, Inc. (AURA)
+// For license information see LICENSE or https://opensource.org/licenses/BSD-3-Clause
+
+package react.semanticui.demo
+
+import org.scalajs.dom
+import scala.scalajs.js
+import js.annotation._
+import japgolly.scalajs.react._
+import extra.router._
+
+@JSExportTopLevel("SUIMain")
+object SUiMain {
+  @JSExport
+  def main(): Unit = {
+    val container = Option(dom.document.getElementById("root")).getOrElse {
+      val elem = dom.document.createElement("div")
+      elem.id = "root"
+      dom.document.body.appendChild(elem)
+      elem
+    }
+
+    Router(BaseUrl.fromWindowOrigin / "scalajs-react-semantic-ui/", Routing.config)().renderIntoDOM(
+      container
+    )
+
+    ()
+  }
+}
+
+sealed trait ElementItem
+case object IconsElement  extends ElementItem
+case object LabelsElement extends ElementItem
+
+sealed trait Page
+case object HomePage                         extends Page
+final case class ElementPage(e: ElementItem) extends Page
+
+object Routing {
+  val config: RouterConfig[Page] = RouterConfigDsl[Page].buildConfig { dsl =>
+    import dsl._
+
+    (
+      trimSlashes
+        | staticRoute(root, HomePage) ~>
+        render(HomeComponent.apply())
+        | staticRoute("elements/icons", ElementPage(IconsElement)) ~>
+        render(IconsComponent.apply())
+        | staticRoute("elements/labels", ElementPage(LabelsElement)) ~>
+        render(LabelsComponent.apply())
+    ).notFound(redirectToPage(HomePage)(SetRouteVia.HistoryReplace))
+      .renderWith(layout)
+      .logToConsole
+  }
+
+  private def layout(c: RouterCtl[Page], r: Resolution[Page]) = Layout(Layout.Props(c, r))
+}

semantic-ui-demo/src/main/scala/react/semanticui/demo/WebpackResources.scala

@@ -0,0 +1,20 @@
+// Copyright (c) 2016-2022 Association of Universities for Research in Astronomy, Inc. (AURA)
+// For license information see LICENSE or https://opensource.org/licenses/BSD-3-Clause
+
+package react.semanticui.demo
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+object WebpackResources {
+  // marker trait
+  trait WebpackResource extends js.Object
+
+  implicit class WebpackResourceOps(val r: WebpackResource) extends AnyVal {
+    def resource: String = r.toString
+  }
+
+  @JSImport("/images/avatar/small/ade.jpg", JSImport.Default)
+  @js.native
+  object AdaAvatar extends WebpackResource
+}