basefn 1.2.0 → 1.4.0

package/src/components/Basefn__ToggleGroup.res.mjs

@@ -0,0 +1,89 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Basefn__ToggleGroup.css'
+;
+
+function variantToString(variant) {
+  if (variant === "Default") {
+    return "default";
+  } else {
+    return "outline";
+  }
+}
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__ToggleGroup(props) {
+  let className = props.className;
+  let __size = props.size;
+  let __variant = props.variant;
+  let onValueChange = props.onValueChange;
+  let value = props.value;
+  let __type_ = props.type_;
+  let type_ = __type_ !== undefined ? __type_ : "Single";
+  let variant = __variant !== undefined ? __variant : "Default";
+  let size = __size !== undefined ? __size : "Md";
+  let getGroupClassName = () => {
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-toggle-group" + customClass;
+  };
+  let getItemClassName = (itemValue, itemDisabled) => Xote.Computed.make(() => {
+    let variantClass = " basefn-toggle-group__item--" + variantToString(variant);
+    let sizeClass = " basefn-toggle-group__item--" + sizeToString(size);
+    let currentValues = Xote.Signal.get(value);
+    let pressedClass = currentValues.includes(itemValue) ? " basefn-toggle-group__item--pressed" : "";
+    let disabledClass = itemDisabled ? " basefn-toggle-group__item--disabled" : "";
+    return "basefn-toggle-group__item" + variantClass + sizeClass + pressedClass + disabledClass;
+  }, undefined);
+  return Xote__JSX.Elements.jsx("div", {
+    class: getGroupClassName(),
+    role: "group",
+    children: Xote.Component.fragment(props.items.map(item => {
+      let d = item.disabled;
+      let isDisabled = d !== undefined ? d : false;
+      return Xote__JSX.Elements.jsxKeyed("button", {
+        class: getItemClassName(item.value, isDisabled),
+        disabled: isDisabled,
+        onClick: param => {
+          let itemValue = item.value;
+          if (isDisabled) {
+            return;
+          }
+          let currentValues = Xote.Signal.get(value);
+          let newValues;
+          newValues = type_ === "Single" ? (
+              currentValues.includes(itemValue) ? [] : [itemValue]
+            ) : (
+              currentValues.includes(itemValue) ? currentValues.filter(v => v !== itemValue) : currentValues.concat([itemValue])
+            );
+          Xote.Signal.set(value, newValues);
+          if (onValueChange !== undefined) {
+            return onValueChange(newValues);
+          }
+        },
+        children: Xote.Component.text(item.label)
+      }, item.value, undefined);
+    }))
+  });
+}
+
+let make = Basefn__ToggleGroup;
+
+export {
+  variantToString,
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

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;
@@ -128,3 +125,47 @@
   height: 72px;
   padding: 1rem 2rem;
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-topbar {
+    padding: 0.5rem 1rem;
+  }
+
+  .basefn-topbar--sm {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .basefn-topbar--md {
+    padding: 0.5rem 1rem;
+  }
+
+  .basefn-topbar--lg {
+    padding: 0.5rem 1rem;
+  }
+
+  .basefn-topbar__logo {
+    font-size: 1.1rem;
+  }
+
+  .basefn-topbar__nav {
+    gap: 0.125rem;
+  }
+
+  .basefn-topbar__nav-item {
+    font-size: 0.8125rem;
+    padding: 0.375rem 0.625rem;
+  }
+
+  .basefn-topbar__center {
+    gap: 0.5rem;
+  }
+
+  .basefn-topbar__right {
+    gap: 0.5rem;
+  }
+
+  .basefn-topbar__actions {
+    gap: 0.5rem;
+  }
+}

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([