basefn 1.2.0 → 1.4.0

package/src/components/Basefn__Card.css

@@ -48,3 +48,18 @@
   box-shadow: var(--basefn-shadow-lg);
   transform: translateY(-2px);
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-card__header {
+    padding: 0.75rem 1rem;
+  }
+
+  .basefn-card__body {
+    padding: 1rem;
+  }
+
+  .basefn-card__footer {
+    padding: 0.75rem 1rem;
+  }
+}

package/src/components/Basefn__ContextMenu.css

@@ -0,0 +1,78 @@
+@import '../styles/variables.css';
+
+.basefn-context-menu {
+  display: contents;
+}
+
+.basefn-context-menu__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+}
+
+.basefn-context-menu__menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 180px;
+  background: var(--basefn-surface-elevated);
+  border: var(--basefn-border-width) solid var(--basefn-border-primary);
+  border-radius: var(--basefn-radius-lg);
+  box-shadow: var(--basefn-shadow-lg);
+  padding: var(--basefn-spacing-xs);
+  animation: basefn-context-menu-fade-in var(--basefn-transition-fast);
+}
+
+@keyframes basefn-context-menu-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.basefn-context-menu__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-md);
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-sm);
+  color: var(--basefn-text-primary);
+  background: transparent;
+  border: none;
+  border-radius: var(--basefn-radius-sm);
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--basefn-transition-fast);
+}
+
+.basefn-context-menu__item:hover:not(.basefn-context-menu__item--disabled) {
+  background: var(--basefn-bg-tertiary);
+}
+
+.basefn-context-menu__item:focus-visible {
+  outline: none;
+  background: var(--basefn-bg-tertiary);
+}
+
+.basefn-context-menu__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.basefn-context-menu__item--danger {
+  color: var(--basefn-color-error);
+}
+
+.basefn-context-menu__item--danger:hover:not(.basefn-context-menu__item--disabled) {
+  background: var(--basefn-alert-error-bg);
+}
+
+.basefn-context-menu__separator {
+  height: 1px;
+  margin: var(--basefn-spacing-xs) 0;
+  background: var(--basefn-border-primary);
+}

package/src/components/Basefn__ContextMenu.res

@@ -0,0 +1,98 @@
+%%raw(`import './Basefn__ContextMenu.css'`)
+
+open Xote
+
+type menuItem = {
+  label: string,
+  onClick: unit => unit,
+  disabled?: bool,
+  danger?: bool,
+}
+
+type menuContent =
+  | Item(menuItem)
+  | Separator
+
+@jsx.component
+let make = (
+  ~trigger: Component.node,
+  ~items: array<menuContent>,
+  ~className: option<string>=?,
+) => {
+  let isOpen = Signal.make(false)
+  let position = Signal.make((0, 0))
+
+  let handleContextMenu = evt => {
+    let _ = Obj.magic(evt)["preventDefault"]()
+    let x: int = Obj.magic(evt)["clientX"]
+    let y: int = Obj.magic(evt)["clientY"]
+    Signal.set(position, (x, y))
+    Signal.set(isOpen, true)
+  }
+
+  let handleClose = () => {
+    Signal.set(isOpen, false)
+  }
+
+  let handleItemClick = (onClick: unit => unit, disabled: bool) => {
+    switch disabled {
+    | true => ()
+    | false => {
+        onClick()
+        handleClose()
+      }
+    }
+  }
+
+  let getWrapperClass = () => {
+    let baseClass = "basefn-context-menu"
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ customClass
+  }
+
+  let menuContent = Computed.make(() => {
+    if Signal.get(isOpen) {
+      let (x, y) = Signal.get(position)
+      let styleStr = "left: " ++ Int.toString(x) ++ "px; top: " ++ Int.toString(y) ++ "px;"
+      [
+        <div class="basefn-context-menu__backdrop" onClick={_ => handleClose()} />,
+        <div class="basefn-context-menu__menu" style={styleStr}>
+          {items
+          ->Array.mapWithIndex((item, index) => {
+            switch item {
+            | Item({label, onClick, ?disabled, ?danger}) => {
+                let disabled = disabled->Option.getOr(false)
+                let danger = danger->Option.getOr(false)
+                let itemClass =
+                  "basefn-context-menu__item" ++
+                  (disabled ? " basefn-context-menu__item--disabled" : "") ++
+                  (danger ? " basefn-context-menu__item--danger" : "")
+
+                <button
+                  key={Int.toString(index)}
+                  class={itemClass}
+                  onClick={_ => handleItemClick(onClick, disabled)}
+                  disabled={disabled}
+                >
+                  {Component.text(label)}
+                </button>
+              }
+            | Separator => <div key={Int.toString(index)} class="basefn-context-menu__separator" />
+            }
+          })
+          ->Component.fragment}
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  <div class={getWrapperClass()} onContextMenu={handleContextMenu}>
+    {trigger}
+    {Component.signalFragment(menuContent)}
+  </div>
+}

package/src/components/Basefn__ContextMenu.res.mjs

@@ -0,0 +1,93 @@
+// 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 * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+
+import './Basefn__ContextMenu.css'
+;
+
+function Basefn__ContextMenu(props) {
+  let className = props.className;
+  let items = props.items;
+  let isOpen = Xote.Signal.make(false, undefined, undefined);
+  let position = Xote.Signal.make([
+    0,
+    0
+  ], undefined, undefined);
+  let handleContextMenu = evt => {
+    evt.preventDefault();
+    let x = evt.clientX;
+    let y = evt.clientY;
+    Xote.Signal.set(position, [
+      x,
+      y
+    ]);
+    Xote.Signal.set(isOpen, true);
+  };
+  let getWrapperClass = () => {
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-context-menu" + customClass;
+  };
+  let menuContent = Xote.Computed.make(() => {
+    if (!Xote.Signal.get(isOpen)) {
+      return [];
+    }
+    let match = Xote.Signal.get(position);
+    let styleStr = "left: " + match[0].toString() + "px; top: " + match[1].toString() + "px;";
+    return [
+      Xote__JSX.Elements.jsx("div", {
+        class: "basefn-context-menu__backdrop",
+        onClick: param => Xote.Signal.set(isOpen, false)
+      }),
+      Xote__JSX.Elements.jsx("div", {
+        class: "basefn-context-menu__menu",
+        style: styleStr,
+        children: Xote.Component.fragment(items.map((item, index) => {
+          if (typeof item !== "object") {
+            return Xote__JSX.Elements.jsxKeyed("div", {
+              class: "basefn-context-menu__separator"
+            }, index.toString(), undefined);
+          }
+          let match = item._0;
+          let onClick = match.onClick;
+          let disabled = Core__Option.getOr(match.disabled, false);
+          let danger = Core__Option.getOr(match.danger, false);
+          let itemClass = "basefn-context-menu__item" + (
+            disabled ? " basefn-context-menu__item--disabled" : ""
+          ) + (
+            danger ? " basefn-context-menu__item--danger" : ""
+          );
+          return Xote__JSX.Elements.jsxKeyed("button", {
+            class: itemClass,
+            disabled: disabled,
+            onClick: param => {
+              if (disabled) {
+                return;
+              } else {
+                onClick();
+                return Xote.Signal.set(isOpen, false);
+              }
+            },
+            children: Xote.Component.text(match.label)
+          }, index.toString(), undefined);
+        }))
+      })
+    ];
+  }, undefined);
+  return Xote__JSX.Elements.jsxs("div", {
+    class: getWrapperClass(),
+    onContextMenu: handleContextMenu,
+    children: Xote__JSX.array([
+      props.trigger,
+      Xote.Component.signalFragment(menuContent)
+    ])
+  });
+}
+
+let make = Basefn__ContextMenu;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Drawer.css

@@ -166,3 +166,34 @@
     transform: translateY(0);
   }
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-drawer--left,
+  .basefn-drawer--right {
+    width: 85vw;
+    max-width: 320px;
+  }
+
+  .basefn-drawer--sm.basefn-drawer--left,
+  .basefn-drawer--sm.basefn-drawer--right,
+  .basefn-drawer--md.basefn-drawer--left,
+  .basefn-drawer--md.basefn-drawer--right,
+  .basefn-drawer--lg.basefn-drawer--left,
+  .basefn-drawer--lg.basefn-drawer--right {
+    width: 85vw;
+    max-width: 320px;
+  }
+
+  .basefn-drawer__header {
+    padding: 1rem;
+  }
+
+  .basefn-drawer__body {
+    padding: 1rem;
+  }
+
+  .basefn-drawer__footer {
+    padding: 1rem;
+  }
+}

package/src/components/Basefn__Dropdown.res

@@ -51,7 +51,9 @@ let make = (
           {items
           ->Array.mapWithIndex((item, index) => {
             switch item {
-            | Item({label, onClick, disabled, danger}) => {
+            | Item({label, onClick, ?disabled, ?danger}) => {
+                let disabled = disabled->Option.getOr(false)
+                let danger = danger->Option.getOr(false)
                 let className =
                   "basefn-dropdown__item" ++
                   (disabled ? " basefn-dropdown__item--disabled" : "") ++ (

package/src/components/Basefn__Dropdown.res.mjs

@@ -2,6 +2,7 @@
 
 import * as Xote from "xote/src/Xote.res.mjs";
 import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
 
 import './Basefn__Dropdown.css'
 ;
@@ -27,49 +28,27 @@ function Basefn__Dropdown(props) {
               }, index.toString(), undefined);
             }
             let match = item._0;
-            let disabled = match.disabled;
-            if (disabled !== undefined) {
-              let danger = match.danger;
-              if (danger !== undefined) {
-                let onClick = match.onClick;
-                let className = "basefn-dropdown__item" + (
-                  disabled ? " basefn-dropdown__item--disabled" : ""
-                ) + (
-                  danger ? " basefn-dropdown__item--danger" : ""
-                );
-                return Xote__JSX.Elements.jsxKeyed("button", {
-                  class: className,
-                  disabled: disabled,
-                  onClick: param => {
-                    if (disabled) {
-                      return;
-                    } else {
-                      onClick();
-                      return Xote.Signal.set(isOpen, false);
-                    }
-                  },
-                  children: Xote.Component.text(match.label)
-                }, index.toString(), undefined);
-              }
-              throw {
-                RE_EXN_ID: "Match_failure",
-                _1: [
-                  "Basefn__Dropdown.res",
-                  53,
-                  12
-                ],
-                Error: new Error()
-              };
-            }
-            throw {
-              RE_EXN_ID: "Match_failure",
-              _1: [
-                "Basefn__Dropdown.res",
-                53,
-                12
-              ],
-              Error: new Error()
-            };
+            let onClick = match.onClick;
+            let disabled = Core__Option.getOr(match.disabled, false);
+            let danger = Core__Option.getOr(match.danger, false);
+            let className = "basefn-dropdown__item" + (
+              disabled ? " basefn-dropdown__item--disabled" : ""
+            ) + (
+              danger ? " basefn-dropdown__item--danger" : ""
+            );
+            return Xote__JSX.Elements.jsxKeyed("button", {
+              class: className,
+              disabled: disabled,
+              onClick: param => {
+                if (disabled) {
+                  return;
+                } else {
+                  onClick();
+                  return Xote.Signal.set(isOpen, false);
+                }
+              },
+              children: Xote.Component.text(match.label)
+            }, index.toString(), undefined);
           }))
         })];
     } else {

package/src/components/Basefn__HoverCard.css

@@ -0,0 +1,93 @@
+@import '../styles/variables.css';
+
+.basefn-hover-card {
+  position: relative;
+  display: inline-block;
+}
+
+.basefn-hover-card__trigger {
+  cursor: pointer;
+}
+
+.basefn-hover-card__content {
+  position: absolute;
+  z-index: 50;
+  background: var(--basefn-surface-elevated);
+  border: var(--basefn-border-width) solid var(--basefn-border-primary);
+  border-radius: var(--basefn-radius-lg);
+  box-shadow: var(--basefn-shadow-lg);
+  padding: var(--basefn-spacing-lg);
+  min-width: 280px;
+  max-width: 320px;
+  animation: basefn-hover-card-fade-in var(--basefn-transition-fast);
+}
+
+@keyframes basefn-hover-card-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Position: Bottom */
+.basefn-hover-card__content--bottom {
+  top: 100%;
+  margin-top: var(--basefn-spacing-sm);
+}
+
+/* Position: Top */
+.basefn-hover-card__content--top {
+  bottom: 100%;
+  margin-bottom: var(--basefn-spacing-sm);
+}
+
+/* Position: Left */
+.basefn-hover-card__content--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--basefn-spacing-sm);
+}
+
+/* Position: Right */
+.basefn-hover-card__content--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--basefn-spacing-sm);
+}
+
+/* Alignment for top/bottom positions */
+.basefn-hover-card__content--bottom.basefn-hover-card__content--align-start,
+.basefn-hover-card__content--top.basefn-hover-card__content--align-start {
+  left: 0;
+}
+
+.basefn-hover-card__content--bottom.basefn-hover-card__content--align-center,
+.basefn-hover-card__content--top.basefn-hover-card__content--align-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.basefn-hover-card__content--bottom.basefn-hover-card__content--align-end,
+.basefn-hover-card__content--top.basefn-hover-card__content--align-end {
+  right: 0;
+}
+
+/* Alignment for left/right positions */
+.basefn-hover-card__content--left.basefn-hover-card__content--align-start,
+.basefn-hover-card__content--right.basefn-hover-card__content--align-start {
+  top: 0;
+  transform: none;
+}
+
+.basefn-hover-card__content--left.basefn-hover-card__content--align-end,
+.basefn-hover-card__content--right.basefn-hover-card__content--align-end {
+  top: auto;
+  bottom: 0;
+  transform: none;
+}

package/src/components/Basefn__HoverCard.res

@@ -0,0 +1,99 @@
+%%raw(`import './Basefn__HoverCard.css'`)
+
+open Xote
+
+type position = Top | Bottom | Left | Right
+
+type align = Start | Center | End
+
+let positionToString = (position: position) => {
+  switch position {
+  | Top => "top"
+  | Bottom => "bottom"
+  | Left => "left"
+  | Right => "right"
+  }
+}
+
+let alignToString = (align: align) => {
+  switch align {
+  | Start => "start"
+  | Center => "center"
+  | End => "end"
+  }
+}
+
+@jsx.component
+let make = (
+  ~trigger: Component.node,
+  ~content: Component.node,
+  ~position: position=Bottom,
+  ~align: align=Center,
+  ~openDelay: int=200,
+  ~closeDelay: int=100,
+  ~className: option<string>=?,
+) => {
+  let isOpen = Signal.make(false)
+  let timeoutId: ref<option<Js.Global.timeoutId>> = ref(None)
+
+  let clearExistingTimeout = () => {
+    switch timeoutId.contents {
+    | Some(id) => {
+        Js.Global.clearTimeout(id)
+        timeoutId := None
+      }
+    | None => ()
+    }
+  }
+
+  let handleMouseEnter = _ => {
+    clearExistingTimeout()
+    let id = Js.Global.setTimeout(() => {
+      Signal.set(isOpen, true)
+    }, openDelay)
+    timeoutId := Some(id)
+  }
+
+  let handleMouseLeave = _ => {
+    clearExistingTimeout()
+    let id = Js.Global.setTimeout(() => {
+      Signal.set(isOpen, false)
+    }, closeDelay)
+    timeoutId := Some(id)
+  }
+
+  let getHoverCardClassName = () => {
+    let baseClass = "basefn-hover-card"
+    let customClass = switch className {
+    | Some(c) => " " ++ c
+    | None => ""
+    }
+    baseClass ++ customClass
+  }
+
+  let getContentClassName = () => {
+    let baseClass = "basefn-hover-card__content"
+    let positionClass = " basefn-hover-card__content--" ++ positionToString(position)
+    let alignClass = " basefn-hover-card__content--align-" ++ alignToString(align)
+    baseClass ++ positionClass ++ alignClass
+  }
+
+  let hoverCardContent = Computed.make(() => {
+    if Signal.get(isOpen) {
+      [
+        <div class={getContentClassName()} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+          {content}
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  <div class={getHoverCardClassName()} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+    <div class="basefn-hover-card__trigger">
+      {trigger}
+    </div>
+    {Component.signalFragment(hoverCardContent)}
+  </div>
+}