basefn 1.0.0

package/src/components/Basefn__Drawer.res

@@ -0,0 +1,86 @@
+%%raw(`import './Basefn__Drawer.css'`)
+
+open Xote
+
+type position = Left | Right | Top | Bottom
+
+type size = Sm | Md | Lg
+
+let positionToString = (position: position) => {
+  switch position {
+  | Left => "left"
+  | Right => "right"
+  | Top => "top"
+  | Bottom => "bottom"
+  }
+}
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~isOpen: Signal.t<bool>,
+  ~onClose: unit => unit,
+  ~position: position=Right,
+  ~size: size=Md,
+  ~title: option<string>=?,
+  ~showCloseButton: bool=true,
+  ~closeOnBackdrop: bool=true,
+  ~children: Component.node,
+  ~footer: option<Component.node>=?,
+) => {
+  let handleBackdropClick = evt => {
+    if closeOnBackdrop {
+      let target = Obj.magic(evt)["target"]
+      let currentTarget = Obj.magic(evt)["currentTarget"]
+      if target === currentTarget {
+        onClose()
+      }
+    }
+  }
+
+  let getDrawerClass = () => {
+    let positionClass = "basefn-drawer--" ++ positionToString(position)
+    let sizeClass = "basefn-drawer--" ++ sizeToString(size)
+    "basefn-drawer " ++ positionClass ++ " " ++ sizeClass
+  }
+
+  let content = Computed.make(() => {
+    if Signal.get(isOpen) {
+      [
+        <>
+          <div class="basefn-drawer-backdrop" onClick={handleBackdropClick} />
+          <div class={getDrawerClass()}>
+            {switch title {
+            | Some(titleText) =>
+              <div class="basefn-drawer__header">
+                <h2 class="basefn-drawer__title"> {Component.text(titleText)} </h2>
+                {showCloseButton
+                  ? <button class="basefn-drawer__close" onClick={_ => onClose()}>
+                      {Component.text("\u00d7")}
+                    </button>
+                  : <> </>}
+              </div>
+            | None => <> </>
+            }}
+            <div class="basefn-drawer__body"> {children} </div>
+            {switch footer {
+            | Some(footerContent) => <div class="basefn-drawer__footer"> {footerContent} </div>
+            | None => <> </>
+            }}
+          </div>
+        </>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  Component.signalFragment(content)
+}

package/src/components/Basefn__Drawer.res.mjs

@@ -0,0 +1,112 @@
+// 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__Drawer.css'
+;
+
+function positionToString(position) {
+  switch (position) {
+    case "Left" :
+      return "left";
+    case "Right" :
+      return "right";
+    case "Top" :
+      return "top";
+    case "Bottom" :
+      return "bottom";
+  }
+}
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Drawer(props) {
+  let footer = props.footer;
+  let children = props.children;
+  let __closeOnBackdrop = props.closeOnBackdrop;
+  let __showCloseButton = props.showCloseButton;
+  let title = props.title;
+  let __size = props.size;
+  let __position = props.position;
+  let onClose = props.onClose;
+  let isOpen = props.isOpen;
+  let position = __position !== undefined ? __position : "Right";
+  let size = __size !== undefined ? __size : "Md";
+  let showCloseButton = __showCloseButton !== undefined ? __showCloseButton : true;
+  let closeOnBackdrop = __closeOnBackdrop !== undefined ? __closeOnBackdrop : true;
+  let handleBackdropClick = evt => {
+    if (!closeOnBackdrop) {
+      return;
+    }
+    let target = evt.target;
+    let currentTarget = evt.currentTarget;
+    if (target === currentTarget) {
+      return onClose();
+    }
+  };
+  let getDrawerClass = () => {
+    let positionClass = "basefn-drawer--" + positionToString(position);
+    let sizeClass = "basefn-drawer--" + sizeToString(size);
+    return "basefn-drawer " + positionClass + " " + sizeClass;
+  };
+  return Xote.Component.signalFragment(Xote.Computed.make(() => {
+    if (Xote.Signal.get(isOpen)) {
+      return [Xote__JSX.jsxs(Xote__JSX.jsxFragment, {
+          children: Xote__JSX.array([
+            Xote__JSX.Elements.jsx("div", {
+              class: "basefn-drawer-backdrop",
+              onClick: handleBackdropClick
+            }),
+            Xote__JSX.Elements.jsxs("div", {
+              class: getDrawerClass(),
+              children: Xote__JSX.array([
+                title !== undefined ? Xote__JSX.Elements.jsxs("div", {
+                    class: "basefn-drawer__header",
+                    children: Xote__JSX.array([
+                      Xote__JSX.Elements.jsx("h2", {
+                        class: "basefn-drawer__title",
+                        children: Xote.Component.text(title)
+                      }),
+                      showCloseButton ? Xote__JSX.Elements.jsx("button", {
+                          class: "basefn-drawer__close",
+                          onClick: param => onClose(),
+                          children: Xote.Component.text("\u00d7")
+                        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+                    ])
+                  }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+                Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-drawer__body",
+                  children: children
+                }),
+                footer !== undefined ? Xote__JSX.Elements.jsx("div", {
+                    class: "basefn-drawer__footer",
+                    children: footer
+                  }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+              ])
+            })
+          ])
+        })];
+    } else {
+      return [];
+    }
+  }, undefined));
+}
+
+let make = Basefn__Drawer;
+
+export {
+  positionToString,
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Dropdown.css

@@ -0,0 +1,76 @@
+.basefn-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.basefn-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 200px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  z-index: 100;
+  animation: basefn-dropdown-fade-in 0.15s ease-out;
+  overflow: hidden;
+}
+
+.basefn-dropdown__menu--right {
+  left: auto;
+  right: 0;
+}
+
+.basefn-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: #374151;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  text-align: left;
+}
+
+.basefn-dropdown__item:hover {
+  background-color: #f3f4f6;
+}
+
+.basefn-dropdown__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.basefn-dropdown__item--disabled:hover {
+  background-color: transparent;
+}
+
+.basefn-dropdown__item--danger {
+  color: #ef4444;
+}
+
+.basefn-dropdown__item--danger:hover {
+  background-color: #fee2e2;
+}
+
+.basefn-dropdown__separator {
+  height: 1px;
+  background-color: #e5e7eb;
+  margin: 0.25rem 0;
+}
+
+@keyframes basefn-dropdown-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/Basefn__Dropdown.res

@@ -0,0 +1,85 @@
+%%raw(`import './Basefn__Dropdown.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>,
+  ~align: [#left | #right]=#left,
+) => {
+  let isOpen = Signal.make(false)
+
+  let handleToggle = _ => {
+    Signal.update(isOpen, prev => !prev)
+  }
+
+  let handleItemClick = (onClick: unit => unit, disabled: bool) => {
+    switch disabled {
+    | true => ()
+    | _ => {
+        onClick()
+        Signal.set(isOpen, false)
+      }
+    }
+  }
+
+  let getMenuClass = () => {
+    let baseClass = "basefn-dropdown__menu"
+    let alignClass = switch align {
+    | #right => " basefn-dropdown__menu--right"
+    | #left => ""
+    }
+    baseClass ++ alignClass
+  }
+
+  let menuContent = Computed.make(() => {
+    if Signal.get(isOpen) {
+      [
+        <div class={getMenuClass()}>
+          {items
+          ->Array.mapWithIndex((item, index) => {
+            switch item {
+            | Item({label, onClick, disabled, danger}) => {
+                let className =
+                  "basefn-dropdown__item" ++
+                  (disabled ? " basefn-dropdown__item--disabled" : "") ++ (
+                    danger ? " basefn-dropdown__item--danger" : ""
+                  )
+
+                <button
+                  key={Int.toString(index)}
+                  class={className}
+                  onClick={_ => handleItemClick(onClick, disabled)}
+                  disabled={disabled}
+                >
+                  {Component.text(label)}
+                </button>
+              }
+            | Separator => <div key={Int.toString(index)} class="basefn-dropdown__separator" />
+            }
+          })
+          ->Component.fragment}
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  <div class="basefn-dropdown">
+    <div onClick={handleToggle}> {trigger} </div>
+    {Component.signalFragment(menuContent)}
+  </div>
+}

package/src/components/Basefn__Dropdown.res.mjs

@@ -0,0 +1,96 @@
+// 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__Dropdown.css'
+;
+
+function Basefn__Dropdown(props) {
+  let __align = props.align;
+  let items = props.items;
+  let align = __align !== undefined ? __align : "left";
+  let isOpen = Xote.Signal.make(false, undefined, undefined);
+  let handleToggle = param => Xote.Signal.update(isOpen, prev => !prev);
+  let getMenuClass = () => {
+    let alignClass = align === "right" ? " basefn-dropdown__menu--right" : "";
+    return "basefn-dropdown__menu" + alignClass;
+  };
+  let menuContent = Xote.Computed.make(() => {
+    if (Xote.Signal.get(isOpen)) {
+      return [Xote__JSX.Elements.jsx("div", {
+          class: getMenuClass(),
+          children: Xote.Component.fragment(items.map((item, index) => {
+            if (typeof item !== "object") {
+              return Xote__JSX.Elements.jsxKeyed("div", {
+                class: "basefn-dropdown__separator"
+              }, 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()
+            };
+          }))
+        })];
+    } else {
+      return [];
+    }
+  }, undefined);
+  return Xote__JSX.Elements.jsxs("div", {
+    class: "basefn-dropdown",
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("div", {
+        onClick: handleToggle,
+        children: props.trigger
+      }),
+      Xote.Component.signalFragment(menuContent)
+    ])
+  });
+}
+
+let make = Basefn__Dropdown;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Grid.css

@@ -0,0 +1,11 @@
+@import '../styles/variables.css';
+
+.basefn-grid {
+	display: grid;
+	gap: 1rem; /* Default gap */
+}
+
+.basefn-grid-item {
+	/* Grid items don't need special styling by default */
+	/* Positioning is handled via inline styles */
+}