enhance(mobile): add page component

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

@@ -109,6 +109,18 @@
 (def parallax-page-stack-topbar-title-outlet (silkhq-wrap "ParallaxPageStack.TopBarTitleOutlet"))
 (def parallax-page-stack-topbar-title-container (silkhq-wrap "ParallaxPageStack.TopBarTitleContainer"))
 
+(def page (silkhq-wrap "page.Root"))
+(def page-portal (silkhq-wrap "page.Portal"))
+(def page-handle (silkhq-wrap "page.Handle"))
+(def page-content (silkhq-wrap "page.Content"))
+(def page-title (silkhq-wrap "page.Title"))
+(def page-description (silkhq-wrap "page.Description"))
+(def page-trigger (silkhq-wrap "page.Trigger"))
+(def page-outlet (silkhq-wrap "page.Outlet"))
+(def page-backdrop (silkhq-wrap "page.Backdrop"))
+(def page-view (silkhq-wrap "page.View"))
+
+
 (def card-sheet (silkhq-wrap "CardSheet.Root"))
 (def card-sheet-portal (silkhq-wrap "CardSheet.Portal"))
 (def card-sheet-handle (silkhq-wrap "CardSheet.Handle"))

packages/ui/src/silkhq/Page.css

@@ -0,0 +1,16 @@
+.Page-view {
+  /* SELF-LAYOUT */
+  z-index: 1;
+  /* Adding 60px to make it fully visible below iOS Safari's bottom UI */
+  height: calc(var(--silk-100-lvh-dvh-pct) + 60px);
+}
+
+.Page-content {
+  /* SELF-LAYOUT */
+  box-sizing: border-box;
+  width: 100%;
+
+  /* APPEARANCE */
+  background-color: white;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}

packages/ui/src/silkhq/Page.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { Sheet } from '@silk-hq/components'
+import './Page.css'
+
+// ================================================================================================
+// Root
+// ================================================================================================
+
+type SheetRootProps = React.ComponentPropsWithoutRef<typeof Sheet.Root>;
+type PageRootProps = Omit<SheetRootProps, 'license'> & {
+  license?: SheetRootProps['license'];
+};
+
+const PageRoot = React.forwardRef<React.ElementRef<typeof Sheet.Root>, PageRootProps>(
+  ({ children, ...restProps }, ref) => {
+    return (
+      <Sheet.Root license="commercial" {...restProps} ref={ref}>
+        {children}
+      </Sheet.Root>
+    )
+  }
+)
+PageRoot.displayName = 'Page.Root'
+
+// ================================================================================================
+// View
+// ================================================================================================
+
+const PageView = React.forwardRef<
+  React.ElementRef<typeof Sheet.View>,
+  React.ComponentPropsWithoutRef<typeof Sheet.View>
+>(({ children, className, ...restProps }, ref) => {
+  return (
+    <Sheet.View
+      className={`Page-view ${className ?? ''}`.trim()}
+      contentPlacement="right"
+      swipeOvershoot={false}
+      nativeEdgeSwipePrevention={true}
+      {...restProps}
+      ref={ref}
+    >
+      {children}
+    </Sheet.View>
+  )
+})
+PageView.displayName = 'Page.View'
+
+// ================================================================================================
+// Backdrop
+// ================================================================================================
+
+const PageBackdrop = React.forwardRef<
+  React.ElementRef<typeof Sheet.Backdrop>,
+  React.ComponentPropsWithoutRef<typeof Sheet.Backdrop>
+>(({ className, ...restProps }, ref) => {
+  return (
+    <Sheet.Backdrop
+      className={`Page-backdrop ${className ?? ''}`.trim()}
+      {...restProps}
+      ref={ref}
+    />
+  )
+})
+PageBackdrop.displayName = 'Page.Backdrop'
+
+// ================================================================================================
+// Content
+// ================================================================================================
+
+const PageContent = React.forwardRef<
+  React.ElementRef<typeof Sheet.Content>,
+  React.ComponentPropsWithoutRef<typeof Sheet.Content>
+>(({ children, className, ...restProps }, ref) => {
+  return (
+    <Sheet.Content className={`Page-content ${className ?? ''}`.trim()} {...restProps} ref={ref}>
+      {children}
+    </Sheet.Content>
+  )
+})
+PageContent.displayName = 'Page.Content'
+
+// ================================================================================================
+// Unchanged Components
+// ================================================================================================
+
+const PagePortal = Sheet.Portal
+const PageTrigger = Sheet.Trigger
+const PageHandle = Sheet.Handle
+const PageOutlet = Sheet.Outlet
+const PageTitle = Sheet.Title
+const PageDescription = Sheet.Description
+
+export const Page = {
+  Root: PageRoot,
+  Portal: PagePortal,
+  View: PageView,
+  Backdrop: PageBackdrop,
+  Content: PageContent,
+  Trigger: PageTrigger,
+  Handle: PageHandle,
+  Outlet: PageOutlet,
+  Title: PageTitle,
+  Description: PageDescription,
+}

packages/ui/src/silkhq/silkhq.ts

@@ -7,6 +7,7 @@ import { SheetWithStacking, SheetWithStackingStack } from './SheetWithStacking'
 import { ParallaxPage, ParallaxPageStack } from './ParallaxPage'
 import { Toast } from './Toast'
 import { Card } from './Card'
+import { Page } from './Page'
 
 declare global {
   var LSSilkhq: any
@@ -18,7 +19,7 @@ const silkhq = {
   SheetWithStacking, SheetWithDetent,
   SheetWithStackingStack,
   ParallaxPage, ParallaxPageStack,
-  Toast, CardSheet: Card,
+  Toast, CardSheet: Card, Page
 }
 
 window.LSSilkhq = silkhq

src/main/mobile/components/demos.cljs

@@ -43,6 +43,17 @@
            (silkhq/stacking-sheet-portal
              (stacking-view-example {:nested? false}))))])))
 
+(rum/defc parallax-page-view-example
+  []
+  (silkhq/parallax-page-view-portal
+    (silkhq/parallax-page-view
+      (silkhq/parallax-page-backdrop)
+      (silkhq/parallax-page-content
+        [:h2.text-lg.font-medium.my-4.bg-green-100 "parallax page"])
+      (silkhq/parallax-page-topbar-portal
+        (silkhq/parallax-page-topbar-title "New page title"))
+      )))
+
 (rum/defc silkhq-demos-page
   []
   (silkhq/depth-sheet-stack {:as-child true}
@@ -105,4 +116,23 @@
 
                      (silkhq/stacking-sheet-portal
                        (stacking-view-example {:nested? false}))))
-                 ]))))))))
+
+                 ;; parallax page
+                 (silkhq/parallax-page
+                   (silkhq/parallax-page-trigger
+                     {:class "w-full"}
+                     (shui/button {:variant :secondary :class "w-full"} "4. Parallax page"))
+                   (parallax-page-view-example))
+                 ]))))
+
+        ;; top bar
+        ;(silkhq/parallax-page-stack-island {:as-child true}
+          ;(silkhq/fixed
+          ;  (silkhq/parallax-page-stack-island-content
+          ;    (silkhq/fixed-content {:as-child true :class "flex justify-center items-center"}
+          ;      [:div.app-silk-topbar-title.text-semibold
+          ;       (silkhq/parallax-page-stack-topbar-title-outlet "Silk demos")
+          ;       (silkhq/parallax-page-stack-topbar-title-container)
+          ;       ])))
+          ;)
+        ))))