basefn 1.0.0

package/src/components/Basefn__ThemeToggle.res.mjs

@@ -0,0 +1,49 @@
+// 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 Basefn__Dom from "../Basefn__Dom.res.mjs";
+import * as Basefn__Icon from "./Basefn__Icon.res.mjs";
+import * as Basefn__Theme from "../styles/Basefn__Theme.res.mjs";
+import * as Basefn__Button from "./Basefn__Button.res.mjs";
+import * as Basefn__Tooltip from "./Basefn__Tooltip.res.mjs";
+
+import './Basefn__ThemeToggle.css'
+;
+
+function Basefn__ThemeToggle(props) {
+  let handleClick = e => {
+    Basefn__Dom.preventDefault(e);
+    Basefn__Dom.stopPropagation(e);
+    Basefn__Theme.toggleTheme();
+  };
+  let icon = Xote.Computed.make(() => {
+    let match = Xote.Signal.get(Basefn__Theme.currentTheme);
+    if (match === "Light") {
+      return [Xote__JSX.jsx(Basefn__Icon.make, {
+          name: "Sun"
+        })];
+    } else {
+      return [Xote__JSX.jsx(Basefn__Icon.make, {
+          name: "Moon"
+        })];
+    }
+  }, undefined);
+  return Xote__JSX.jsx(Basefn__Tooltip.make, {
+    content: "Toggle theme",
+    position: "Bottom",
+    children: Xote__JSX.jsx(Basefn__Button.make, {
+      children: Xote.Component.signalFragment(icon),
+      class: Xote.ReactiveProp.$$static("basefn-theme-toggle"),
+      onClick: handleClick,
+      variant: "Ghost"
+    })
+  });
+}
+
+let make = Basefn__ThemeToggle;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Timeline.css

@@ -0,0 +1,144 @@
+.basefn-timeline {
+  position: relative;
+}
+
+.basefn-timeline--vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.basefn-timeline--horizontal {
+  display: flex;
+  gap: 2rem;
+  overflow-x: auto;
+}
+
+.basefn-timeline__item {
+  position: relative;
+  display: flex;
+  gap: 1rem;
+}
+
+.basefn-timeline--vertical .basefn-timeline__item {
+  flex-direction: row;
+}
+
+.basefn-timeline--horizontal .basefn-timeline__item {
+  flex-direction: column;
+  min-width: 200px;
+}
+
+.basefn-timeline__marker-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.basefn-timeline--horizontal .basefn-timeline__marker-wrapper {
+  flex-direction: row;
+}
+
+.basefn-timeline__marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background-color: #e5e7eb;
+  color: #6b7280;
+  font-weight: 600;
+  font-size: 0.875rem;
+  z-index: 2;
+  flex-shrink: 0;
+}
+
+.basefn-timeline__marker--default {
+  background-color: #e5e7eb;
+  color: #6b7280;
+}
+
+.basefn-timeline__marker--primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.basefn-timeline__marker--success {
+  background-color: #10b981;
+  color: white;
+}
+
+.basefn-timeline__marker--warning {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.basefn-timeline__marker--error {
+  background-color: #ef4444;
+  color: white;
+}
+
+.basefn-timeline__connector {
+  position: absolute;
+  background-color: #e5e7eb;
+  z-index: 1;
+}
+
+.basefn-timeline--vertical .basefn-timeline__connector {
+  width: 2px;
+  top: 2.5rem;
+  bottom: -2rem;
+  left: 1.25rem;
+}
+
+.basefn-timeline--vertical .basefn-timeline__item:last-child .basefn-timeline__connector {
+  display: none;
+}
+
+.basefn-timeline--horizontal .basefn-timeline__connector {
+  height: 2px;
+  left: 2.5rem;
+  right: -2rem;
+  top: 1.25rem;
+}
+
+.basefn-timeline--horizontal .basefn-timeline__item:last-child .basefn-timeline__connector {
+  display: none;
+}
+
+.basefn-timeline__content {
+  flex: 1;
+  padding-top: 0.25rem;
+}
+
+.basefn-timeline--horizontal .basefn-timeline__content {
+  padding-top: 0;
+}
+
+.basefn-timeline__title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: #1f2937;
+  margin-bottom: 0.25rem;
+}
+
+.basefn-timeline__timestamp {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+
+.basefn-timeline__description {
+  font-size: 0.875rem;
+  color: #4b5563;
+  line-height: 1.5;
+}
+
+/* Optional dot variant */
+.basefn-timeline__marker--dot {
+  width: 0.75rem;
+  height: 0.75rem;
+}

package/src/components/Basefn__Timeline.res

@@ -0,0 +1,70 @@
+%%raw(`import './Basefn__Timeline.css'`)
+
+open Xote
+
+type orientation = Vertical | Horizontal
+
+type variant = Default | Primary | Success | Warning | Error
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Primary => "primary"
+  | Success => "success"
+  | Warning => "warning"
+  | Error => "error"
+  }
+}
+
+type timelineItem = {
+  title: string,
+  timestamp: option<string>,
+  description: option<string>,
+  variant: variant,
+  icon: option<string>,
+}
+
+@jsx.component
+let make = (~items: array<timelineItem>, ~orientation: orientation=Vertical) => {
+  let getTimelineClass = () => {
+    let orientationClass = switch orientation {
+    | Vertical => "basefn-timeline--vertical"
+    | Horizontal => "basefn-timeline--horizontal"
+    }
+    "basefn-timeline " ++ orientationClass
+  }
+
+  let getMarkerClass = (variant: variant) => {
+    let variantClass = "basefn-timeline__marker--" ++ variantToString(variant)
+    "basefn-timeline__marker " ++ variantClass
+  }
+
+  <div class={getTimelineClass()}>
+    {items
+    ->Array.mapWithIndex((item, index) => {
+      <div key={Int.toString(index)} class="basefn-timeline__item">
+        <div class="basefn-timeline__marker-wrapper">
+          <div class={getMarkerClass(item.variant)}>
+            {switch item.icon {
+            | Some(iconText) => Component.text(iconText)
+            | None => Component.text(Int.toString(index + 1))
+            }}
+          </div>
+          <div class="basefn-timeline__connector" />
+        </div>
+        <div class="basefn-timeline__content">
+          <div class="basefn-timeline__title"> {Component.text(item.title)} </div>
+          {switch item.timestamp {
+          | Some(time) => <div class="basefn-timeline__timestamp"> {Component.text(time)} </div>
+          | None => <> </>
+          }}
+          {switch item.description {
+          | Some(desc) => <div class="basefn-timeline__description"> {Component.text(desc)} </div>
+          | None => <> </>
+          }}
+        </div>
+      </div>
+    })
+    ->Component.fragment}
+  </div>
+}

package/src/components/Basefn__Timeline.res.mjs

@@ -0,0 +1,86 @@
+// 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__Timeline.css'
+;
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Default" :
+      return "default";
+    case "Primary" :
+      return "primary";
+    case "Success" :
+      return "success";
+    case "Warning" :
+      return "warning";
+    case "Error" :
+      return "error";
+  }
+}
+
+function Basefn__Timeline(props) {
+  let __orientation = props.orientation;
+  let orientation = __orientation !== undefined ? __orientation : "Vertical";
+  let getTimelineClass = () => {
+    let orientationClass;
+    orientationClass = orientation === "Vertical" ? "basefn-timeline--vertical" : "basefn-timeline--horizontal";
+    return "basefn-timeline " + orientationClass;
+  };
+  let getMarkerClass = variant => {
+    let variantClass = "basefn-timeline__marker--" + variantToString(variant);
+    return "basefn-timeline__marker " + variantClass;
+  };
+  return Xote__JSX.Elements.jsx("div", {
+    class: getTimelineClass(),
+    children: Xote.Component.fragment(props.items.map((item, index) => {
+      let iconText = item.icon;
+      let time = item.timestamp;
+      let desc = item.description;
+      return Xote__JSX.Elements.jsxsKeyed("div", {
+        class: "basefn-timeline__item",
+        children: Xote__JSX.array([
+          Xote__JSX.Elements.jsxs("div", {
+            class: "basefn-timeline__marker-wrapper",
+            children: Xote__JSX.array([
+              Xote__JSX.Elements.jsx("div", {
+                class: getMarkerClass(item.variant),
+                children: iconText !== undefined ? Xote.Component.text(iconText) : Xote.Component.text((index + 1 | 0).toString())
+              }),
+              Xote__JSX.Elements.jsx("div", {
+                class: "basefn-timeline__connector"
+              })
+            ])
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            class: "basefn-timeline__content",
+            children: Xote__JSX.array([
+              Xote__JSX.Elements.jsx("div", {
+                class: "basefn-timeline__title",
+                children: Xote.Component.text(item.title)
+              }),
+              time !== undefined ? Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-timeline__timestamp",
+                  children: Xote.Component.text(time)
+                }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+              desc !== undefined ? Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-timeline__description",
+                  children: Xote.Component.text(desc)
+                }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+            ])
+          })
+        ])
+      }, index.toString(), undefined);
+    }))
+  });
+}
+
+let make = Basefn__Timeline;
+
+export {
+  variantToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Toast.css

@@ -0,0 +1,100 @@
+.basefn-toast-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.basefn-toast-container--top-right {
+  top: 1rem;
+  right: 1rem;
+}
+
+.basefn-toast-container--top-left {
+  top: 1rem;
+  left: 1rem;
+}
+
+.basefn-toast-container--bottom-right {
+  bottom: 1rem;
+  right: 1rem;
+}
+
+.basefn-toast-container--bottom-left {
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.basefn-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  min-width: 300px;
+  max-width: 400px;
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  background: white;
+  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);
+  pointer-events: auto;
+  border-left: 4px solid;
+  animation: basefn-toast-slide-in 0.3s ease-out;
+}
+
+.basefn-toast--info {
+  border-left-color: #3b82f6;
+}
+
+.basefn-toast--success {
+  border-left-color: #10b981;
+}
+
+.basefn-toast--warning {
+  border-left-color: #f59e0b;
+}
+
+.basefn-toast--error {
+  border-left-color: #ef4444;
+}
+
+.basefn-toast__content {
+  flex: 1;
+}
+
+.basefn-toast__title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #1f2937;
+  margin-bottom: 0.25rem;
+}
+
+.basefn-toast__message {
+  font-size: 0.875rem;
+  color: #6b7280;
+  line-height: 1.4;
+}
+
+.basefn-toast__close {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.basefn-toast__close:hover {
+  color: #6b7280;
+}
+
+@keyframes basefn-toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/src/components/Basefn__Toast.res

@@ -0,0 +1,92 @@
+%%raw(`import './Basefn__Toast.css'`)
+
+open Xote
+
+type variant = Info | Success | Warning | Error
+
+type position = TopRight | TopLeft | BottomRight | BottomLeft
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Info => "info"
+  | Success => "success"
+  | Warning => "warning"
+  | Error => "error"
+  }
+}
+
+let positionToString = (position: position) => {
+  switch position {
+  | TopRight => "top-right"
+  | TopLeft => "top-left"
+  | BottomRight => "bottom-right"
+  | BottomLeft => "bottom-left"
+  }
+}
+
+@jsx.component
+let make = (
+  ~title: option<string>=?,
+  ~message: string,
+  ~variant: variant=Info,
+  ~position: position=TopRight,
+  ~isVisible: Signal.t<bool>,
+  ~onClose: unit => unit,
+  ~autoDismiss: bool=true,
+  ~duration: int=3000,
+) => {
+  // Auto dismiss logic
+  let _ = Effect.run(() => {
+    if Signal.get(isVisible) && autoDismiss {
+      let timeoutId = setTimeout(() => {
+        Signal.set(isVisible, false)
+        onClose()
+      }, duration)
+      Some(() => clearTimeout(timeoutId))
+    } else {
+      None
+    }
+  })
+
+  let getToastClass = () => {
+    let variantClass = "basefn-toast--" ++ variantToString(variant)
+    "basefn-toast " ++ variantClass
+  }
+
+  let getContainerClass = () => {
+    let posClass = "basefn-toast-container--" ++ positionToString(position)
+    "basefn-toast-container " ++ posClass
+  }
+
+  let content = Computed.make(() => {
+    if Signal.get(isVisible) {
+      [
+        <div class={getContainerClass()}>
+          <div class={getToastClass()}>
+            <div class="basefn-toast__content">
+              {switch title {
+              | Some(titleText) =>
+                <div class="basefn-toast__title"> {Component.text(titleText)} </div>
+              | None => <> </>
+              }}
+              <div class="basefn-toast__message"> {Component.text(message)} </div>
+            </div>
+            <button
+              class="basefn-toast__close"
+              onClick={_ => {
+                Signal.set(isVisible, false)
+                onClose()
+              }}
+            >
+              {Component.text("\u00d7")}
+            </button>
+          </div>
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  Component.signalFragment(content)
+}

package/src/components/Basefn__Toast.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__Toast.css'
+;
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Info" :
+      return "info";
+    case "Success" :
+      return "success";
+    case "Warning" :
+      return "warning";
+    case "Error" :
+      return "error";
+  }
+}
+
+function positionToString(position) {
+  switch (position) {
+    case "TopRight" :
+      return "top-right";
+    case "TopLeft" :
+      return "top-left";
+    case "BottomRight" :
+      return "bottom-right";
+    case "BottomLeft" :
+      return "bottom-left";
+  }
+}
+
+function Basefn__Toast(props) {
+  let __duration = props.duration;
+  let __autoDismiss = props.autoDismiss;
+  let onClose = props.onClose;
+  let isVisible = props.isVisible;
+  let __position = props.position;
+  let __variant = props.variant;
+  let message = props.message;
+  let title = props.title;
+  let variant = __variant !== undefined ? __variant : "Info";
+  let position = __position !== undefined ? __position : "TopRight";
+  let autoDismiss = __autoDismiss !== undefined ? __autoDismiss : true;
+  let duration = __duration !== undefined ? __duration : 3000;
+  Xote.Effect.run(() => {
+    if (!(Xote.Signal.get(isVisible) && autoDismiss)) {
+      return;
+    }
+    let timeoutId = setTimeout(() => {
+      Xote.Signal.set(isVisible, false);
+      onClose();
+    }, duration);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, undefined);
+  let getToastClass = () => {
+    let variantClass = "basefn-toast--" + variantToString(variant);
+    return "basefn-toast " + variantClass;
+  };
+  let getContainerClass = () => {
+    let posClass = "basefn-toast-container--" + positionToString(position);
+    return "basefn-toast-container " + posClass;
+  };
+  return Xote.Component.signalFragment(Xote.Computed.make(() => {
+    if (Xote.Signal.get(isVisible)) {
+      return [Xote__JSX.Elements.jsx("div", {
+          class: getContainerClass(),
+          children: Xote__JSX.Elements.jsxs("div", {
+            class: getToastClass(),
+            children: Xote__JSX.array([
+              Xote__JSX.Elements.jsxs("div", {
+                class: "basefn-toast__content",
+                children: Xote__JSX.array([
+                  title !== undefined ? Xote__JSX.Elements.jsx("div", {
+                      class: "basefn-toast__title",
+                      children: Xote.Component.text(title)
+                    }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+                  Xote__JSX.Elements.jsx("div", {
+                    class: "basefn-toast__message",
+                    children: Xote.Component.text(message)
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsx("button", {
+                class: "basefn-toast__close",
+                onClick: param => {
+                  Xote.Signal.set(isVisible, false);
+                  onClose();
+                },
+                children: Xote.Component.text("\u00d7")
+              })
+            ])
+          })
+        })];
+    } else {
+      return [];
+    }
+  }, undefined));
+}
+
+let make = Basefn__Toast;
+
+export {
+  variantToString,
+  positionToString,
+  make,
+}
+/*  Not a pure module */