feat: reusable SDK components, styled to SdPi guidelines

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "cSpell.words": [
+        "Elgato",
+        "Elmish",
+        "Feliz",
+        "Homebridge"
+    ]
+}

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
-## [Unreleased]
+## [1.5.0] - 2023-12-28
+
+- Reusable SDK components, styled to SdPi guidelines
+- Dependencies update, Fun.Build and .NET 8 (#31)
 
 ## [1.4.0] - 2023-01-01
 

src/StreamDeck.Homebridge/StreamDeck.Homebridge.fsproj

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>

src/StreamDeck.SDK/Components.fs

@@ -0,0 +1,49 @@
+[<RequireQualifiedAccessAttribute>]
+module StreamDeck.SDK.Components.Pi
+
+open Feliz
+open StreamDeck.SDK.Css
+
+let input (label: string) props =
+    Html.div [
+        prop.className SdPi.Item
+        prop.type' "field"
+        prop.children [
+            Html.div [ prop.className SdPi.ItemLabel; prop.text label ]
+            Html.input((prop.className SdPi.ItemValue) :: props)
+        ]
+    ]
+
+let select (label: string) props =
+    Html.div [
+        prop.className SdPi.Item
+        prop.children [
+            Html.div [ prop.className SdPi.ItemLabel; prop.text label ]
+            Html.select((prop.classes [ SdPi.ItemValue; "select" ]) :: props)
+        ]
+    ]
+
+let range (label: string) (children: ReactElement seq) =
+    Html.div [
+        prop.className SdPi.Item
+        prop.type' "range"
+        prop.children [
+            Html.div [ prop.className SdPi.ItemLabel; prop.text label ]
+            Html.div [ prop.className SdPi.ItemValue; prop.children children ]
+        ]
+    ]
+
+let button (text: string) onClick =
+    Html.div [
+        prop.className SdPi.Item
+        prop.type' "button"
+        prop.children [
+            Html.button [ prop.className SdPi.ItemValue; prop.text text; prop.onClick onClick ]
+        ]
+    ]
+
+let message icon color (message: string) =
+    Html.details [
+        prop.classes [ "message"; icon ]
+        prop.children [ Html.summary [ prop.style [ style.color color ]; prop.text message ] ]
+    ]

src/StreamDeck.SDK/StreamDeck.SDK.fsproj

@@ -9,6 +9,7 @@
     <Compile Include="PluginModel.fs" />
     <Compile Include="PiModel.fs" />
     <Compile Include="Css.fs" />
+    <Compile Include="Components.fs" />
   </ItemGroup>
   <Import Project="..\..\.paket\Paket.Restore.targets" />
 </Project>

src/StreamDeck.SDK/paket.references

@@ -1,3 +1,4 @@
 Fable.Core
 Fable.Browser.Dom
-Fable.Browser.WebSocket
+Fable.Browser.WebSocket
+Feliz

src/com.sergeytihon.homebridge.sdPlugin/manifest.json

@@ -52,7 +52,7 @@
     "Name": "Homebridge",
     "Icon": "resources/pluginIcon",
     "URL": "https://github.com/sergey-tihon/streamdeck-homebridge",
-    "Version": "1.4.0",
+    "Version": "1.5.0",
     "Category": "Homebridge",
     "CategoryIcon": "resources/pluginIcon",
     "OS": [