basefn 1.1.6 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basefn",
-  "version": "1.1.6",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/brnrdog/basefn.git"
@@ -81,6 +81,6 @@
     "@semantic-release/npm": "^13.1.3",
     "rescript": "^12.0.1",
     "vite": "^5.0.0",
-    "xote": "^4.10.0"
+    "xote": "^4.11.0"
   }
 }

package/src/Basefn.res

@@ -41,6 +41,7 @@ type sidebarNavSection = Basefn__Sidebar.navSection
 type topbarSize = Basefn__Topbar.size
 type topbarNavItem = Basefn__Topbar.navItem
 type appLayoutContentWidth = Basefn__AppLayout.contentWidth
+type appLayoutTopbarPosition = Basefn__AppLayout.topbarPosition
 type iconName = Basefn__Icon.name
 type iconSize = Basefn__Icon.size
 type gridColumns = Basefn__Grid.columns

package/src/Basefn__Utils.res.mjs

@@ -29,4 +29,4 @@ export {
   makeReactive,
   makeReactiveFromSignal,
 }
-/* Signals Not a pure module */
+/* No side effect */

package/src/components/Basefn__AppLayout.css

@@ -4,6 +4,23 @@
   width: 100%;
 }
 
+.basefn-app-layout__body {
+  display: flex;
+  flex: 1;
+  min-height: 100vh;
+  width: 100%;
+}
+
+/* When topbar is above, adjust layout direction */
+.basefn-app-layout--topbar-above {
+  flex-direction: column;
+}
+
+.basefn-app-layout--topbar-above .basefn-app-layout__body {
+  flex: 1;
+  min-height: 0;
+}
+
 .basefn-app-layout__sidebar {
   position: fixed;
   left: 0;
@@ -12,6 +29,19 @@
   z-index: 200;
 }
 
+/* When topbar is above, sidebar starts below topbar */
+.basefn-app-layout--topbar-above .basefn-app-layout__sidebar {
+  top: 64px; /* Default topbar height (md) */
+}
+
+.basefn-app-layout--topbar-above.basefn-app-layout--topbar-sm .basefn-app-layout__sidebar {
+  top: 56px;
+}
+
+.basefn-app-layout--topbar-above.basefn-app-layout--topbar-lg .basefn-app-layout__sidebar {
+  top: 72px;
+}
+
 .basefn-app-layout__main-wrapper {
   flex: 1;
   display: flex;
@@ -43,6 +73,14 @@
   z-index: 100;
 }
 
+/* When topbar is above all content */
+.basefn-app-layout__topbar--above {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 201; /* Above sidebar */
+}
+
 .basefn-app-layout__content {
   flex: 1;
   display: flex;
@@ -97,4 +135,17 @@
   .basefn-app-layout--sidebar-open .basefn-app-layout__sidebar-backdrop {
     display: block;
   }
+
+  /* When topbar is above, adjust sidebar and backdrop position */
+  .basefn-app-layout--topbar-above .basefn-app-layout__sidebar-backdrop {
+    top: 64px; /* Start below topbar (md) */
+  }
+
+  .basefn-app-layout--topbar-above.basefn-app-layout--topbar-sm .basefn-app-layout__sidebar-backdrop {
+    top: 56px;
+  }
+
+  .basefn-app-layout--topbar-above.basefn-app-layout--topbar-lg .basefn-app-layout__sidebar-backdrop {
+    top: 72px;
+  }
 }

package/src/components/Basefn__AppLayout.res

@@ -3,6 +3,7 @@
 open Xote
 
 type contentWidth = FullWidth | Contained
+type topbarPosition = Inline | AboveAll
 
 @jsx.component
 let make = (
@@ -13,6 +14,8 @@ let make = (
   ~noPadding: bool=false,
   ~sidebarSize: option<string>=?, // "sm" | "md" | "lg"
   ~sidebarCollapsed: bool=false,
+  ~topbarPosition: topbarPosition=Inline,
+  ~topbarSize: option<string>=?, // "sm" | "md" | "lg"
 ) => {
   let sidebarOpen = Signal.make(false)
 
@@ -24,10 +27,24 @@ let make = (
     | _ => ""
     }
     let collapsedClass = sidebarCollapsed ? " basefn-app-layout--sidebar-collapsed" : ""
+    let topbarPositionClass = switch topbarPosition {
+    | AboveAll => " basefn-app-layout--topbar-above"
+    | Inline => ""
+    }
+    let topbarSizeClass = switch (topbarPosition, topbarSize) {
+    | (AboveAll, Some("sm")) => " basefn-app-layout--topbar-sm"
+    | (AboveAll, Some("lg")) => " basefn-app-layout--topbar-lg"
+    | _ => ""
+    }
     let sidebarOpenClass = Computed.make(() =>
       Signal.get(sidebarOpen) ? " basefn-app-layout--sidebar-open" : ""
     )
-    "basefn-app-layout" ++ hasSidebar ++ sidebarSizeClass ++ collapsedClass
+    "basefn-app-layout" ++
+    hasSidebar ++
+    sidebarSizeClass ++
+    collapsedClass ++
+    topbarPositionClass ++
+    topbarSizeClass
   }
 
   let getContentClass = () => {
@@ -51,24 +68,35 @@ let make = (
       )
     })}
   >
-    {switch sidebar {
-    | Some(sidebarContent) =>
-      <>
-        <div class="basefn-app-layout__sidebar"> {sidebarContent} </div>
-        <div
-          class="basefn-app-layout__sidebar-backdrop" onClick={_ => Signal.set(sidebarOpen, false)}
-        />
-      </>
-    | None => <> </>
+    {switch (topbarPosition, topbar) {
+    | (AboveAll, Some(topbarContent)) =>
+      <div class="basefn-app-layout__topbar basefn-app-layout__topbar--above">
+        {topbarContent}
+      </div>
+    | _ => <> </>
     }}
-    <div class="basefn-app-layout__main-wrapper">
-      {switch topbar {
-      | Some(topbarContent) => <div class="basefn-app-layout__topbar"> {topbarContent} </div>
+    <div class="basefn-app-layout__body">
+      {switch sidebar {
+      | Some(sidebarContent) =>
+        <>
+          <div class="basefn-app-layout__sidebar"> {sidebarContent} </div>
+          <div
+            class="basefn-app-layout__sidebar-backdrop"
+            onClick={_ => Signal.set(sidebarOpen, false)}
+          />
+        </>
       | None => <> </>
       }}
-      <main class="basefn-app-layout__content">
-        <div class={getContentClass()}> {children} </div>
-      </main>
+      <div class="basefn-app-layout__main-wrapper">
+        {switch (topbarPosition, topbar) {
+        | (Inline, Some(topbarContent)) =>
+          <div class="basefn-app-layout__topbar"> {topbarContent} </div>
+        | _ => <> </>
+        }}
+        <main class="basefn-app-layout__content">
+          <div class={getContentClass()}> {children} </div>
+        </main>
+      </div>
     </div>
   </div>
 }

package/src/components/Basefn__AppLayout.res.mjs

@@ -8,6 +8,8 @@ import './Basefn__AppLayout.css'
 ;
 
 function Basefn__AppLayout(props) {
+  let topbarSize = props.topbarSize;
+  let __topbarPosition = props.topbarPosition;
   let __sidebarCollapsed = props.sidebarCollapsed;
   let sidebarSize = props.sidebarSize;
   let __noPadding = props.noPadding;
@@ -17,6 +19,7 @@ function Basefn__AppLayout(props) {
   let contentWidth = __contentWidth !== undefined ? __contentWidth : "FullWidth";
   let noPadding = __noPadding !== undefined ? __noPadding : false;
   let sidebarCollapsed = __sidebarCollapsed !== undefined ? __sidebarCollapsed : false;
+  let topbarPosition = __topbarPosition !== undefined ? __topbarPosition : "Inline";
   let sidebarOpen = Xote.Signal.make(false, undefined, undefined);
   let getLayoutClass = () => {
     let hasSidebar = Core__Option.isSome(sidebar) ? " basefn-app-layout--has-sidebar" : "";
@@ -36,6 +39,23 @@ function Basefn__AppLayout(props) {
       sidebarSizeClass = "";
     }
     let collapsedClass = sidebarCollapsed ? " basefn-app-layout--sidebar-collapsed" : "";
+    let topbarPositionClass;
+    topbarPositionClass = topbarPosition === "Inline" ? "" : " basefn-app-layout--topbar-above";
+    let topbarSizeClass;
+    if (topbarPosition === "Inline" || topbarSize === undefined) {
+      topbarSizeClass = "";
+    } else {
+      switch (topbarSize) {
+        case "lg" :
+          topbarSizeClass = " basefn-app-layout--topbar-lg";
+          break;
+        case "sm" :
+          topbarSizeClass = " basefn-app-layout--topbar-sm";
+          break;
+        default:
+          topbarSizeClass = "";
+      }
+    }
     Xote.Computed.make(() => {
       if (Xote.Signal.get(sidebarOpen)) {
         return " basefn-app-layout--sidebar-open";
@@ -43,7 +63,7 @@ function Basefn__AppLayout(props) {
         return "";
       }
     }, undefined);
-    return "basefn-app-layout" + hasSidebar + sidebarSizeClass + collapsedClass;
+    return "basefn-app-layout" + hasSidebar + sidebarSizeClass + collapsedClass + topbarPositionClass + topbarSizeClass;
   };
   let getContentClass = () => {
     let widthClass;
@@ -51,6 +71,16 @@ function Basefn__AppLayout(props) {
     let paddingClass = noPadding ? " basefn-app-layout__content-inner--no-padding" : "";
     return "basefn-app-layout__content-inner" + widthClass + paddingClass;
   };
+  let tmp;
+  tmp = topbarPosition === "Inline" || topbar === undefined ? Xote__JSX.jsx(Xote__JSX.jsxFragment, {}) : Xote__JSX.Elements.jsx("div", {
+      class: "basefn-app-layout__topbar basefn-app-layout__topbar--above",
+      children: topbar
+    });
+  let tmp$1;
+  tmp$1 = topbarPosition === "Inline" && topbar !== undefined ? Xote__JSX.Elements.jsx("div", {
+      class: "basefn-app-layout__topbar",
+      children: topbar
+    }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {});
   return Xote__JSX.Elements.jsxs("div", {
     class: Xote.Computed.make(() => getLayoutClass() + Xote.Signal.get(Xote.Computed.make(() => {
       if (Xote.Signal.get(sidebarOpen)) {
@@ -60,31 +90,34 @@ function Basefn__AppLayout(props) {
       }
     }, undefined)), undefined),
     children: Xote__JSX.array([
-      sidebar !== undefined ? Xote__JSX.jsxs(Xote__JSX.jsxFragment, {
-          children: Xote__JSX.array([
-            Xote__JSX.Elements.jsx("div", {
-              class: "basefn-app-layout__sidebar",
-              children: sidebar
-            }),
-            Xote__JSX.Elements.jsx("div", {
-              class: "basefn-app-layout__sidebar-backdrop",
-              onClick: param => Xote.Signal.set(sidebarOpen, false)
-            })
-          ])
-        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+      tmp,
       Xote__JSX.Elements.jsxs("div", {
-        class: "basefn-app-layout__main-wrapper",
+        class: "basefn-app-layout__body",
         children: Xote__JSX.array([
-          topbar !== undefined ? Xote__JSX.Elements.jsx("div", {
-              class: "basefn-app-layout__topbar",
-              children: topbar
+          sidebar !== undefined ? Xote__JSX.jsxs(Xote__JSX.jsxFragment, {
+              children: Xote__JSX.array([
+                Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-app-layout__sidebar",
+                  children: sidebar
+                }),
+                Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-app-layout__sidebar-backdrop",
+                  onClick: param => Xote.Signal.set(sidebarOpen, false)
+                })
+              ])
             }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
-          Xote__JSX.Elements.jsx("main", {
-            class: "basefn-app-layout__content",
-            children: Xote__JSX.Elements.jsx("div", {
-              class: getContentClass(),
-              children: props.children
-            })
+          Xote__JSX.Elements.jsxs("div", {
+            class: "basefn-app-layout__main-wrapper",
+            children: Xote__JSX.array([
+              tmp$1,
+              Xote__JSX.Elements.jsx("main", {
+                class: "basefn-app-layout__content",
+                children: Xote__JSX.Elements.jsx("div", {
+                  class: getContentClass(),
+                  children: props.children
+                })
+              })
+            ])
           })
         ])
       })

package/src/components/Basefn__Topbar.css

@@ -15,9 +15,6 @@
   border-bottom: 1px solid var(--basefn-border-primary);
 }
 
-.basefn-topbar--scrolling {
-}
-
 .basefn-topbar__left {
   display: flex;
   align-items: center;

package/src/components/Basefn__Topbar.res

@@ -28,19 +28,7 @@ let make = (
   ~onMenuClick: option<unit => unit>=?,
   ~size: size=Md,
 ) => {
-  let scrolling = Signal.make(false)
-  let class = Computed.make(() => {
-    let sizeClass = " basefn-topbar--" ++ sizeToString(size)
-    let scrollingClass = Signal.get(scrolling) ? " basefn-topbar--scrolling" : ""
-    "basefn-topbar" ++ sizeClass ++ scrollingClass
-  })
-
-  let _ = Effect.run(() => {
-    Basefn__Dom.addEventListener("scroll", () => {
-      let scrollY = %raw("window.scrollY")
-      Signal.set(scrolling, scrollY >= 64)
-    })
-  })
+  let class = "basefn-topbar basefn-topbar--" ++ sizeToString(size)
 
   <header class>
     <div class="basefn-topbar__left">

package/src/components/Basefn__Topbar.res.mjs

@@ -2,7 +2,6 @@
 
 import * as Xote from "xote/src/Xote.res.mjs";
 import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
-import * as Basefn__Dom from "../Basefn__Dom.res.mjs";
 
 import './Basefn__Topbar.css'
 ;
@@ -27,16 +26,7 @@ function Basefn__Topbar(props) {
   let navItems = props.navItems;
   let logo = props.logo;
   let size = __size !== undefined ? __size : "Md";
-  let scrolling = Xote.Signal.make(false, undefined, undefined);
-  let $$class = Xote.Computed.make(() => {
-    let sizeClass = " basefn-topbar--" + sizeToString(size);
-    let scrollingClass = Xote.Signal.get(scrolling) ? " basefn-topbar--scrolling" : "";
-    return "basefn-topbar" + sizeClass + scrollingClass;
-  }, undefined);
-  Xote.Effect.run(() => Basefn__Dom.addEventListener("scroll", () => {
-    let scrollY = window.scrollY;
-    Xote.Signal.set(scrolling, scrollY >= 64);
-  }), undefined);
+  let $$class = "basefn-topbar basefn-topbar--" + sizeToString(size);
   return Xote__JSX.Elements.jsxs("header", {
     class: $$class,
     children: Xote__JSX.array([