enhance(mobile): add silkhq components

deps/shui/src/logseq/shui/silkhq.cljs

@@ -14,6 +14,13 @@
     (let [path (util/get-path name)]
       (some-> js/window.LSSilkhq (gobj/getValueByKeys (clj->js path))))))
 
+(def fixed (silkhq-wrap "Fixed.Root"))
+(def fixed-content (silkhq-wrap "Fixed.Content"))
+
+(def scroll (silkhq-wrap "Scroll.Root"))
+(def scroll-trigger (silkhq-wrap "Scroll.Trigger"))
+(def scroll-content (silkhq-wrap "Scroll.Content"))
+(def scroll-view (silkhq-wrap "Scroll.View"))
 
 (def sheet (silkhq-wrap "Sheet.Root"))
 (def sheet-bleeding-background (silkhq-wrap "Sheet.BleedingBackground"))

packages/ui/src/silkhq/silkhq.ts

@@ -1,5 +1,5 @@
 import "@silk-hq/components/dist/main-unlayered.css"
-import { Sheet } from '@silk-hq/components'
+import { Fixed, Scroll, Sheet } from '@silk-hq/components'
 import { BottomSheet } from './BottomSheet'
 import { SheetWithDepth, SheetWithDepthStack } from './SheetWithDepth'
 import { SheetWithDetent } from './SheetWithDetent'
@@ -10,7 +10,7 @@ declare global {
 }
 
 const silkhq = {
-  Sheet, BottomSheet,
+  Sheet, Fixed, Scroll, BottomSheet,
   SheetWithDepth, SheetWithDepthStack,
   SheetWithStacking, SheetWithDetent,
   SheetWithStackingStack,

src/main/mobile/components/app.cljs

@@ -29,6 +29,7 @@
             [mobile.components.search :as search]
             [mobile.components.selection-toolbar :as selection-toolbar]
             [mobile.components.settings :as settings]
+            [mobile.components.demos :as demos]
             [mobile.components.ui :as ui-component]
             [mobile.ionic :as ion]
             [mobile.state :as mobile-state]
@@ -90,7 +91,10 @@
     (ion/tabler-icon "plus" {:size 22}) "Quick add")
    (ion/tab-button
     {:tab "settings"}
-    (ion/tabler-icon "settings" {:size 22}) "Settings")))
+    (ion/tabler-icon "settings" {:size 22}) "Settings")
+    (ion/tab-button
+      {:tab "demos"}
+      (ion/tabler-icon "bug" {:size 22}) "Demos")))
 
 (rum/defc keep-keyboard-open
   []
@@ -225,6 +229,10 @@
       {:tab "settings"}
       (ion/content
        (settings/page)))
+      (ion/tab
+        {:tab "demos"}
+        (ion/content
+          (demos/silkhq-demos-page)))
 
      (bottom-tabs)
 

src/main/mobile/components/app.css

@@ -313,4 +313,10 @@ html[data-color=logseq] {
   &.dragging {
     @apply bg-gray-02;
   }
-}
+}
+
+/* silk styles */
+.app-silk-index-container {
+  @apply bg-white min-h-[100svh];
+}
+

src/main/mobile/components/demos.cljs

@@ -0,0 +1,52 @@
+(ns mobile.components.demos
+  (:require [logseq.shui.ui :as shui]
+            [rum.core :as rum]
+            [logseq.shui.silkhq :as silkhq]))
+
+(rum/defc silkhq-demos-page
+  []
+  (silkhq/depth-sheet-stack {:as-child true}
+    (silkhq/depth-sheet-scenery-outlets
+      [:div.py-4.flex.flex-col.gap-3.px-4.app-silk-index-container
+       [:h2.text-lg.font-semibold "Silk sheets demos"]
+       (silkhq/bottom-sheet
+         (silkhq/bottom-sheet-trigger
+           {:class "w-full"}
+           (shui/button {:variant :secondary :class "w-full"} "0. Static Bottom Sheet"))
+         (silkhq/bottom-sheet-portal
+           (silkhq/bottom-sheet-view
+             (silkhq/bottom-sheet-backdrop)
+             (silkhq/bottom-sheet-content
+               {:class "flex flex-col items-center p-2"}
+               (silkhq/bottom-sheet-handle)
+               [:div.py-60.flex
+                [:h1.my-4.text-2xl "hello silkhq"]]))))
+
+       (silkhq/detent-sheet
+         (silkhq/detent-sheet-trigger
+           {:class "w-full"}
+           (shui/button {:variant :secondary :class "w-full"} "1. Detent Bottom Sheet"))
+         (silkhq/detent-sheet-portal
+           (silkhq/detent-sheet-view
+             (silkhq/detent-sheet-backdrop)
+             (silkhq/detent-sheet-content
+               {:class "flex flex-col items-center p-2"}
+               (silkhq/detent-sheet-handle)
+               [:div.py-60.flex
+                [:h1.my-4.text-2xl "hello silkhq"]]))))
+
+       (silkhq/depth-sheet
+         (silkhq/depth-sheet-trigger
+           {:class "w-full"}
+           (shui/button {:variant :secondary :class "w-full"} "2. Depth Bottom Sheet"))
+         (silkhq/depth-sheet-portal
+           (silkhq/depth-sheet-view
+             (silkhq/depth-sheet-backdrop)
+             (silkhq/depth-sheet-content
+               {:class "flex flex-col items-center p-2"}
+               (silkhq/depth-sheet-handle)
+               [:div.py-60.flex
+                [:h1.my-4.text-2xl "hello silkhq"]])))
+         )
+       ]
+      )))

src/main/mobile/components/settings.cljs

@@ -26,21 +26,6 @@
       [:strong.text-4xl.font-semibold (user-handler/username)]]
      [:div.text-sm.text-muted-foreground.px-1 (user-handler/email)]]))
 
-(rum/defc silk-bottom-sheet
-  []
-  (silkhq/detent-sheet
-    (silkhq/detent-sheet-trigger
-      (shui/button "open bottom sheet / trigger"))
-    (silkhq/detent-sheet-portal
-      (silkhq/detent-sheet-view
-        (silkhq/detent-sheet-backdrop)
-        (silkhq/detent-sheet-content
-          {:class "flex flex-col items-center p-2"}
-          (silkhq/detent-sheet-handle)
-          [:div.py-60.flex
-           [:h1.my-4.text-2xl "hello silkhq"]])))
-    ))
-
 (rum/defc page < rum/reactive
   []
   (let [login? (and (state/sub :auth/id-token) (user-handler/logged-in?))]
@@ -75,5 +60,4 @@
       (ion/content {:class "ion-padding"}
         (user-profile login?)
         [:div.mt-8
-         (repo/repos-cp)]
-        (silk-bottom-sheet)))))
+         (repo/repos-cp)]))))