basefn 1.0.0

package/src/components/Basefn__Tooltip.css

@@ -0,0 +1,84 @@
+.basefn-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.basefn-tooltip {
+  position: absolute;
+  background-color: #1f2937;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+  animation: basefn-tooltip-fade-in 0.15s ease-out;
+}
+
+.basefn-tooltip--top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.basefn-tooltip--bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.basefn-tooltip--left {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.basefn-tooltip--right {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.basefn-tooltip::after {
+  content: '';
+  position: absolute;
+  border: 4px solid transparent;
+}
+
+.basefn-tooltip--top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: #1f2937;
+}
+
+.basefn-tooltip--bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: #1f2937;
+}
+
+.basefn-tooltip--left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: #1f2937;
+}
+
+.basefn-tooltip--right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: #1f2937;
+}
+
+@keyframes basefn-tooltip-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/components/Basefn__Tooltip.res

@@ -0,0 +1,42 @@
+%%raw(`import './Basefn__Tooltip.css'`)
+
+open Xote
+
+type position = Top | Bottom | Left | Right
+
+let positionToString = (position: position) => {
+  switch position {
+  | Top => "top"
+  | Bottom => "bottom"
+  | Left => "left"
+  | Right => "right"
+  }
+}
+
+@jsx.component
+let make = (~content: string, ~position: position=Top, ~children: Component.node) => {
+  let isVisible = Signal.make(false)
+
+  let handleMouseEnter = _ => Signal.set(isVisible, true)
+  let handleMouseLeave = _ => Signal.set(isVisible, false)
+
+  let getTooltipClass = () => {
+    let posClass = "basefn-tooltip--" ++ positionToString(position)
+    "basefn-tooltip " ++ posClass
+  }
+
+  let tooltipContent = Computed.make(() => {
+    if Signal.get(isVisible) {
+      [<div class={getTooltipClass()}> {Component.text(content)} </div>]
+    } else {
+      []
+    }
+  })
+
+  <div
+    class="basefn-tooltip-wrapper" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}
+  >
+    {children}
+    {Component.signalFragment(tooltipContent)}
+  </div>
+}

package/src/components/Basefn__Tooltip.res.mjs

@@ -0,0 +1,60 @@
+// 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__Tooltip.css'
+;
+
+function positionToString(position) {
+  switch (position) {
+    case "Top" :
+      return "top";
+    case "Bottom" :
+      return "bottom";
+    case "Left" :
+      return "left";
+    case "Right" :
+      return "right";
+  }
+}
+
+function Basefn__Tooltip(props) {
+  let __position = props.position;
+  let content = props.content;
+  let position = __position !== undefined ? __position : "Top";
+  let isVisible = Xote.Signal.make(false, undefined, undefined);
+  let handleMouseEnter = param => Xote.Signal.set(isVisible, true);
+  let handleMouseLeave = param => Xote.Signal.set(isVisible, false);
+  let getTooltipClass = () => {
+    let posClass = "basefn-tooltip--" + positionToString(position);
+    return "basefn-tooltip " + posClass;
+  };
+  let tooltipContent = Xote.Computed.make(() => {
+    if (Xote.Signal.get(isVisible)) {
+      return [Xote__JSX.Elements.jsx("div", {
+          class: getTooltipClass(),
+          children: Xote.Component.text(content)
+        })];
+    } else {
+      return [];
+    }
+  }, undefined);
+  return Xote__JSX.Elements.jsxs("div", {
+    class: "basefn-tooltip-wrapper",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: Xote__JSX.array([
+      props.children,
+      Xote.Component.signalFragment(tooltipContent)
+    ])
+  });
+}
+
+let make = Basefn__Tooltip;
+
+export {
+  positionToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Topbar.css

@@ -0,0 +1,130 @@
+@import '../styles/variables.css';
+
+.basefn-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background-color: var(--basefn-bg-primary);
+  color: var(--basefn-text-primary);
+  height: 4rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--basefn-border-primary);
+}
+
+.basefn-topbar--scrolling {
+}
+
+.basefn-topbar__left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  height: 100%;
+  line-height: 2rem;
+}
+
+.basefn-topbar__left:empty {
+  display: none;
+}
+
+.basefn-topbar__center {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.basefn-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.basefn-topbar__logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--basefn-text-primary);
+  font-family: var(--font-mono);
+}
+
+.basefn-topbar__menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: none;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  color: var(--basefn-text-tertiary);
+  transition: all 0.2s;
+}
+
+.basefn-topbar__menu-button:hover {
+  background-color: var(--basefn-bg-tertiary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-topbar__search {
+  flex: 1;
+  max-width: 400px;
+}
+
+.basefn-topbar__nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.basefn-topbar__nav-item {
+  padding: 0.5rem 1rem;
+  color: var(--basefn-text-tertiary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--basefn-radius-full);
+  cursor: pointer;
+  transition: all 0.2s;
+  background: none;
+  border: none;
+}
+
+.basefn-topbar__nav-item:hover {
+  background-color: var(--basefn-bg-secondary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-topbar__nav-item--active,
+.basefn-topbar__nav-item--active:hover {
+  background-color: var(--basefn-bg-primary-aa);
+  color: var(--basefn-color-primary);
+  font-weight: 700;
+}
+
+.basefn-topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Size variants */
+.basefn-topbar--sm {
+  height: 56px;
+  padding: 1rem;
+}
+
+.basefn-topbar--md {
+  height: 64px;
+  padding: 1rem 1.5rem;
+}
+
+.basefn-topbar--lg {
+  height: 72px;
+  padding: 1rem 2rem;
+}

package/src/components/Basefn__Topbar.res

@@ -0,0 +1,92 @@
+%%raw(`import './Basefn__Topbar.css'`)
+
+open Xote
+
+type size = Sm | Md | Lg
+
+type navItem = {
+  label: string,
+  active: bool,
+  onClick: unit => unit,
+}
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~logo: option<Component.node>=?,
+  ~navItems: option<array<navItem>>=?,
+  ~leftContent: option<Component.node>=?,
+  ~centerContent: option<Component.node>=?,
+  ~rightContent: option<Component.node>=?,
+  ~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)
+    })
+  })
+
+  <header class>
+    <div class="basefn-topbar__left">
+      {switch onMenuClick {
+      | Some(handler) =>
+        <button class="basefn-topbar__menu-button" onClick={_ => handler()}>
+          {Component.text("\u2630")}
+        </button>
+      | None => <> </>
+      }}
+      {switch logo {
+      | Some(logoContent) => <div class="basefn-topbar__logo"> {logoContent} </div>
+      | None => <> </>
+      }}
+      {switch leftContent {
+      | Some(content) => content
+      | None => <> </>
+      }}
+    </div>
+    <div class="basefn-topbar__center">
+      {switch navItems {
+      | Some(items) =>
+        <nav class="basefn-topbar__nav">
+          {items
+          ->Array.mapWithIndex((item, index) => {
+            let className =
+              "basefn-topbar__nav-item" ++ (item.active ? " basefn-topbar__nav-item--active" : "")
+
+            <button key={Int.toString(index)} class={className} onClick={_ => item.onClick()}>
+              {Component.text(item.label)}
+            </button>
+          })
+          ->Component.fragment}
+        </nav>
+      | None => <> </>
+      }}
+      {switch centerContent {
+      | Some(content) => content
+      | None => <> </>
+      }}
+    </div>
+    <div class="basefn-topbar__right">
+      {switch rightContent {
+      | Some(content) => content
+      | None => <> </>
+      }}
+    </div>
+  </header>
+}

package/src/components/Basefn__Topbar.res.mjs

@@ -0,0 +1,91 @@
+// 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 './Basefn__Topbar.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Topbar(props) {
+  let __size = props.size;
+  let onMenuClick = props.onMenuClick;
+  let rightContent = props.rightContent;
+  let centerContent = props.centerContent;
+  let leftContent = props.leftContent;
+  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);
+  return Xote__JSX.Elements.jsxs("header", {
+    class: $$class,
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsxs("div", {
+        class: "basefn-topbar__left",
+        children: Xote__JSX.array([
+          onMenuClick !== undefined ? Xote__JSX.Elements.jsx("button", {
+              class: "basefn-topbar__menu-button",
+              onClick: param => onMenuClick(),
+              children: Xote.Component.text("\u2630")
+            }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+          logo !== undefined ? Xote__JSX.Elements.jsx("div", {
+              class: "basefn-topbar__logo",
+              children: logo
+            }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+          leftContent !== undefined ? leftContent : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        class: "basefn-topbar__center",
+        children: Xote__JSX.array([
+          navItems !== undefined ? Xote__JSX.Elements.jsx("nav", {
+              class: "basefn-topbar__nav",
+              children: Xote.Component.fragment(navItems.map((item, index) => {
+                let className = "basefn-topbar__nav-item" + (
+                  item.active ? " basefn-topbar__nav-item--active" : ""
+                );
+                return Xote__JSX.Elements.jsxKeyed("button", {
+                  class: className,
+                  onClick: param => item.onClick(),
+                  children: Xote.Component.text(item.label)
+                }, index.toString(), undefined);
+              }))
+            }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+          centerContent !== undefined ? centerContent : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+        ])
+      }),
+      Xote__JSX.Elements.jsx("div", {
+        class: "basefn-topbar__right",
+        children: rightContent !== undefined ? rightContent : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+      })
+    ])
+  });
+}
+
+let make = Basefn__Topbar;
+
+export {
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Typography.css

@@ -0,0 +1,120 @@
+.basefn-typography {
+  margin: 0;
+  color: var(--basefn-text-primary);
+}
+
+/* Headings */
+.basefn-typography--h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.basefn-typography--h2 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  margin-bottom: 1rem;
+}
+
+.basefn-typography--h3 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+}
+
+.basefn-typography--h4 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.basefn-typography--h5 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.basefn-typography--h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+/* Paragraph */
+.basefn-typography--p {
+  font-size: 1rem;
+  line-height: 1.75;
+  font-weight: 400;
+  margin-bottom: 1rem;
+  color: var(--basefn-text-tertiary);
+}
+
+/* Lead paragraph */
+.basefn-typography--lead {
+  font-size: 1.25rem;
+  line-height: 1.75;
+  font-weight: 400;
+  color: var(--basefn-text-secondary);
+  margin-bottom: 2rem;
+}
+
+/* Small text */
+.basefn-typography--small {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--basefn-text-tertiary);
+}
+
+/* Muted text */
+.basefn-typography--muted {
+  font-size: 1rem;
+  line-height: 1.75;
+  font-weight: 400;
+  color: var(--basefn-text-muted);
+}
+
+/* Code */
+.basefn-typography--code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  padding: 0.125rem 0.375rem;
+  background-color: var(--basefn-bg-tertiary);
+  border: 1px solid var(--basefn-border-primary);
+  border-radius: 0.25rem;
+  color: var(--basefn-text-primary);
+}
+
+.basefn-typography--unstyled {
+  display: inline-block;
+  color: var(--basefn-text-tertiary);
+}
+
+/* Text alignment */
+.basefn-typography--left {
+  text-align: left;
+}
+
+.basefn-typography--center {
+  text-align: center;
+}
+
+.basefn-typography--right {
+  text-align: right;
+}
+
+.basefn-typography--justify {
+  text-align: justify;
+}
+
+.basefn-code {
+	background: var(--basefn-bg-primary);
+  color: var(--basefn-text-secondary);
+  font-family: 'Source Code', Courier, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5em;
+}

package/src/components/Basefn__Typography.res

@@ -0,0 +1,96 @@
+%%raw(`import './Basefn__Typography.css'`)
+
+open Xote
+
+type variant = H1 | H2 | H3 | H4 | H5 | H6 | P | Small | Lead | Muted | Code | Unstyled
+
+type align = Left | Center | Right | Justify
+
+let variantToTag = (variant: variant) => {
+  switch variant {
+  | H1 => "h1"
+  | H2 => "h2"
+  | H3 => "h3"
+  | H4 => "h4"
+  | H5 => "h5"
+  | H6 => "h6"
+  | P => "p"
+  | Small => "small"
+  | Lead => "p"
+  | Muted => "p"
+  | Code => "code"
+  | Unstyled => "div"
+  }
+}
+
+let variantToClass = (variant: variant) => {
+  switch variant {
+  | H1 => "basefn-typography--h1"
+  | H2 => "basefn-typography--h2"
+  | H3 => "basefn-typography--h3"
+  | H4 => "basefn-typography--h4"
+  | H5 => "basefn-typography--h5"
+  | H6 => "basefn-typography--h6"
+  | P => "basefn-typography--p"
+  | Small => "basefn-typography--small"
+  | Lead => "basefn-typography--lead"
+  | Muted => "basefn-typography--muted"
+  | Code => "basefn-typography--code"
+  | Unstyled => "basefn-typography--unstyled"
+  }
+}
+
+let alignToString = (align: align) => {
+  switch align {
+  | Left => "left"
+  | Center => "center"
+  | Right => "right"
+  | Justify => "justify"
+  }
+}
+
+@jsx.component
+let make = (
+  ~text: ReactiveProp.t<string>,
+  ~variant: variant=P,
+  ~align: option<align>=?,
+  ~class: string="",
+  ~style=?,
+) => {
+  let variantClass = variantToClass(variant)
+
+  let class = {
+    let baseClass = "basefn-typography " ++ variantClass
+    let alignClass = switch align {
+    | Some(a) => " basefn-typography--" ++ alignToString(a)
+    | None => ""
+    }
+    let customClass = if class !== "" {
+      " " ++ class
+    } else {
+      ""
+    }
+    baseClass ++ alignClass ++ customClass
+  }
+
+  let renderText = text =>
+    switch text {
+    | ReactiveProp.Reactive(text) => Component.SignalText(text)
+    | ReactiveProp.Static(text) => Component.text(text)
+    }
+
+  switch variant {
+  | H1 => <h1 class ?style> {renderText(text)} </h1>
+  | H2 => <h2 class ?style> {renderText(text)} </h2>
+  | H3 => <h3 class ?style> {renderText(text)} </h3>
+  | H4 => <h4 class ?style> {renderText(text)} </h4>
+  | H5 => <h5 class ?style> {renderText(text)} </h5>
+  | H6 => <h6 class ?style> {renderText(text)} </h6>
+  | P => <p class ?style> {renderText(text)} </p>
+  | Small => <small class ?style> {renderText(text)} </small>
+  | Lead => <p class ?style> {renderText(text)} </p>
+  | Muted => <p class ?style> {renderText(text)} </p>
+  | Code => <code class ?style> {renderText(text)} </code>
+  | Unstyled => <div class ?style> {renderText(text)} </div>
+  }
+}