Merge pull request #12 from sherpal/master

Publish new version after demo
sherpal · Aug 9, 2022 · 5db3f1a · 5db3f1a
2 parents 1e1f545 + 211316d
commit 5db3f1a
Show file tree

Hide file tree

Showing 121 changed files with 7,481 additions and 52 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,7 @@ temp
 .DS_Store
 .idea
 
-frontend/node_modules
+demo/node_modules
 
 output
 .bloop
@@ -20,7 +20,7 @@ project/target
 project/project/target
 project/.bloop
 
-frontend/build
+demo/build
 
 /database
 

diff --git a/README.md b/README.md
@@ -65,6 +65,21 @@ div(
 
 This will be rendered as an input as documented [here](https://sap.github.io/ui5-webcomponents/playground/components/Input/).
 
+### Running the Demo
+
+The project contains a demo file for each component. These examples are located in the `demo` sub-project.
+
+In order to run those, you need to have
+
+- npm with a recent enough version (>= 14 should do) (if you have nvm installed, you can do, e.g., `nvm use 17`)
+- sbt
+
+Perform the following steps:
+
+1. in one terminal, run `sbt ~demo/fastLinkJS`
+2. in another terminal, go to `demo` and run `npm install` then `npm run dev`
+3. when both steps are ready, go to `http://localhost:3000` and the demo should be there, waiting for you.
+
 ### How to use slots?
 
 In web-components, certain components can have special dom children called "slots". In the dom, these "special" children are only singular in the fact that they have a property `slot` specifying which slot they fill in.
@@ -220,3 +235,25 @@ For example, the footer slot of the `Dialog` is defined as
 ```scala
 val footer: Slot = new Slot("footer")
 ```
+
+#### Methods
+
+Some SAP components have special methods to interact with. Among the most common, you will find the `Dialog` which has a `show` method. Some others like `Popover` will have `showAt`.
+
+These methods must be defined as `js.native` method of the `RawElement` trait.
+
+For methods that take as input or return some "not-so-scala-ish" types (such as `js.Array`), it is best to call them `theMethodNameJS` (annotating by `JSName("theMethodName")`) and to create an extension method called `theMethodName` taking/returning more Scala friendly types. For example, the `ColourPicker` `RawElement` is implemented as
+
+```scala
+@js.native
+trait RawElement extends js.Object {
+  @JSName("color")
+  def colourJS: String = js.native
+}
+
+object RawElement {
+  extension (rawElement: RawElement)
+    /** The current colour as [[Colour]] instance. English UK spelling for consistency. */
+    def colour: Colour = Colour.fromString(rawElement.colourJS)
+}
+```
diff --git a/build.sbt b/build.sbt
@@ -11,16 +11,30 @@ val usedScalacOptions = Seq(
   "-language:higherKinds"
 )
 
+val laminarVersion = "0.14.2"
+
 lazy val `web-components` = project
   .in(file("./web-components"))
   .enablePlugins(ScalaJSPlugin)
   .settings(
     scalacOptions ++= usedScalacOptions,
     scalaJSLinkerConfig ~= (_.withModuleKind(ModuleKind.CommonJSModule)),
+    libraryDependencies ++= List("com.raquo" %%% "laminar" % laminarVersion % Provided)
+  )
+
+lazy val demo = project
+  .in(file("./demo"))
+  .enablePlugins(ScalaJSPlugin)
+  .settings(
+    scalacOptions ++= usedScalacOptions,
     libraryDependencies ++= List(
-      "com.raquo" %%% "laminar" % "0.14.2" % Provided
-    )
+      "com.raquo" %%% "laminar" % laminarVersion,
+      "io.github.cquiroz" %%% "scala-java-time" % "2.4.0"
+    ),
+    scalaJSLinkerConfig ~= { _.withModuleKind(ModuleKind.ESModule) },
+    scalaJSUseMainModuleInitializer := true
   )
+  .dependsOn(`web-components`)
 
 val createReleaseTag = taskKey[java.io.File]("Writes the current release tag in tag.txt file")
 

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://sap.github.io/ui5-webcomponents/assets/images/ui5-logo.png"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
+    <!-- Loads the Quicksand font -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700"
+      rel="stylesheet"
+    />
+    <title>Demo Laminar SAP UI5 bindings</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import "@ui5/webcomponents-fiori/dist/illustrations/tnt/UnsuccessfulAuth.js"
+      import "@ui5/webcomponents-fiori/dist/illustrations/PageNotFound.js"
+      import "@ui5/webcomponents-fiori/dist/illustrations/ErrorScreen.js"
+
+      /**
+import "@ui5/webcomponents-fiori/dist/illustrations/NoActivities.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoMail.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoMail_v1.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoEntries.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoNotifications.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSavedItems.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSavedItems_v1.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoTasks.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoTasks_v1.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/UnableToLoad.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/UnableToLoadImage.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/UnableToUpload.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/AddColumn.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/AddPeople.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/BalloonSky.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/Connection.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/EmptyCalendar.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/EmptyPlanningCalendar.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/ErrorScreen.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/FilterTable.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/GroupTable.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/NoFilterResults.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/PageNotFound.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/ReloadScreen.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/ResizeColumn.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SearchEarth.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SearchFolder.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleBalloon.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleBell.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleCalendar.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleCheckMark.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleConnection.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleEmptyDoc.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleEmptyList.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleError.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleMagnifier.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleMail.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleNoSavedItems.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleNotFoundMagnifier.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleReload.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SimpleTask.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SleepingBell.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SortColumn.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SuccessBalloon.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SuccessCheckMark.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SuccessHighFive.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/SuccessScreen.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/Tent.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/UploadCollection.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Company.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/ExternalLink.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/FaceID.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Fingerprint.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Lock.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Mission.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/NoApplications.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/NoFlows.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/NoUsers.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Radar.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Services.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpiring.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SuccessfulAuth.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Unlock.js"
+import "@ui5/webcomponents-fiori/dist/illustrations/tnt/UnsuccessfulAuth.js"
+*/
+    </script>
+    <%- script %>
+  </body>
+</html>