basefn 1.0.0

package/src/Eita__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 './Eita__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 Eita__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 = Eita__Toast;
+
+export {
+  variantToString,
+  positionToString,
+  make,
+}
+/*  Not a pure module */

package/src/Eita__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 './Eita__Tooltip.css'
+;
+
+function positionToString(position) {
+  switch (position) {
+    case "Top" :
+      return "top";
+    case "Bottom" :
+      return "bottom";
+    case "Left" :
+      return "left";
+    case "Right" :
+      return "right";
+  }
+}
+
+function Eita__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 = Eita__Tooltip;
+
+export {
+  positionToString,
+  make,
+}
+/*  Not a pure module */

package/src/Eita__Topbar.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 './Eita__Topbar.css'
+;
+
+function themeToString(theme) {
+  if (theme === "Light") {
+    return "light";
+  } else {
+    return "dark";
+  }
+}
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Eita__Topbar(props) {
+  let __size = props.size;
+  let __theme = props.theme;
+  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 theme = __theme !== undefined ? __theme : "Light";
+  let size = __size !== undefined ? __size : "Md";
+  let getTopbarClass = () => {
+    let themeClass = theme === "Dark" ? " basefn-topbar--dark" : "";
+    let sizeClass = " basefn-topbar--" + sizeToString(size);
+    return "basefn-topbar" + themeClass + sizeClass;
+  };
+  return Xote__JSX.Elements.jsxs("header", {
+    class: getTopbarClass(),
+    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 = Eita__Topbar;
+
+export {
+  themeToString,
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/Eita__Typography.res.mjs

@@ -0,0 +1,183 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Eita__Typography.css'
+;
+
+function variantToTag(variant) {
+  switch (variant) {
+    case "H1" :
+      return "h1";
+    case "H2" :
+      return "h2";
+    case "H3" :
+      return "h3";
+    case "H4" :
+      return "h4";
+    case "H5" :
+      return "h5";
+    case "H6" :
+      return "h6";
+    case "Small" :
+      return "small";
+    case "P" :
+    case "Lead" :
+    case "Muted" :
+      return "p";
+    case "Code" :
+      return "code";
+    case "Unstyled" :
+      return "div";
+  }
+}
+
+function variantToClass(variant) {
+  switch (variant) {
+    case "H1" :
+      return "basefn-typography--h1";
+    case "H2" :
+      return "basefn-typography--h2";
+    case "H3" :
+      return "basefn-typography--h3";
+    case "H4" :
+      return "basefn-typography--h4";
+    case "H5" :
+      return "basefn-typography--h5";
+    case "H6" :
+      return "basefn-typography--h6";
+    case "P" :
+      return "basefn-typography--p";
+    case "Small" :
+      return "basefn-typography--small";
+    case "Lead" :
+      return "basefn-typography--lead";
+    case "Muted" :
+      return "basefn-typography--muted";
+    case "Code" :
+      return "basefn-typography--code";
+    case "Unstyled" :
+      return "basefn-typography--unstyled";
+  }
+}
+
+function alignToString(align) {
+  switch (align) {
+    case "Left" :
+      return "left";
+    case "Center" :
+      return "center";
+    case "Right" :
+      return "right";
+    case "Justify" :
+      return "justify";
+  }
+}
+
+function Eita__Typography(props) {
+  let __class = props.class;
+  let align = props.align;
+  let __variant = props.variant;
+  let text = props.text;
+  let variant = __variant !== undefined ? __variant : "P";
+  let $$class = __class !== undefined ? __class : "";
+  let variantClass = variantToClass(variant);
+  let baseClass = "basefn-typography " + variantClass;
+  let alignClass = align !== undefined ? " basefn-typography--" + alignToString(align) : "";
+  let customClass = $$class !== "" ? " " + $$class : "";
+  let $$class$1 = baseClass + alignClass + customClass;
+  switch (variant) {
+    case "H1" :
+      return Xote__JSX.Elements.jsx("h1", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "H2" :
+      return Xote__JSX.Elements.jsx("h2", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "H3" :
+      return Xote__JSX.Elements.jsx("h3", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "H4" :
+      return Xote__JSX.Elements.jsx("h4", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "H5" :
+      return Xote__JSX.Elements.jsx("h5", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "H6" :
+      return Xote__JSX.Elements.jsx("h6", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "Small" :
+      return Xote__JSX.Elements.jsx("small", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "P" :
+    case "Lead" :
+    case "Muted" :
+      return Xote__JSX.Elements.jsx("p", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "Code" :
+      return Xote__JSX.Elements.jsx("code", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+    case "Unstyled" :
+      return Xote__JSX.Elements.jsx("div", {
+        class: $$class$1,
+        children: {
+          TAG: "SignalText",
+          _0: text
+        }
+      });
+  }
+}
+
+let make = Eita__Typography;
+
+export {
+  variantToTag,
+  variantToClass,
+  alignToString,
+  make,
+}
+/*  Not a pure module */

package/src/Eita__Utils.res.mjs

@@ -0,0 +1,32 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Signals from "rescript-signals/src/Signals.res.mjs";
+
+function getValue(reactive) {
+  if (reactive.TAG === "Value") {
+    return reactive._0;
+  } else {
+    return Signals.Signal.get(reactive._0);
+  }
+}
+
+function makeReactive(value) {
+  return {
+    TAG: "Value",
+    _0: value
+  };
+}
+
+function makeReactiveFromSignal(signal) {
+  return {
+    TAG: "SignalValue",
+    _0: signal
+  };
+}
+
+export {
+  getValue,
+  makeReactive,
+  makeReactiveFromSignal,
+}
+/* Signals Not a pure module */

package/src/Example.res

@@ -0,0 +1,111 @@
+// Example usage of basefn-UI components
+
+open Basefn
+open Xote
+
+module ExampleForm = {
+  @jsx.component
+  let make = () => {
+    // Form state using signals
+    let name = Signal.make("")
+    let email = Signal.make("")
+    let message = Signal.make("")
+    let agreeToTerms = Signal.make(false)
+    let selectedOption = Signal.make("option1")
+    let isSubmitting = Signal.make(false)
+
+    // Event handlers
+    let handleNameChange = evt => {
+      let target = Obj.magic(evt)["target"]
+      Signal.set(name, target["value"])
+    }
+
+    let handleEmailChange = evt => {
+      let target = Obj.magic(evt)["target"]
+      Signal.set(email, target["value"])
+    }
+
+    let handleMessageChange = evt => {
+      let target = Obj.magic(evt)["target"]
+      Signal.set(message, target["value"])
+    }
+
+    let handleCheckboxChange = _evt => {
+      Signal.update(agreeToTerms, prev => !prev)
+    }
+
+    let handleSubmit = _evt => {
+      Signal.set(isSubmitting, true)
+      // Simulate API call
+      Console.log("Submitting form...")
+      Console.log(`Name: ${Signal.get(name)}`)
+      Console.log(`Email: ${Signal.get(email)}`)
+      Console.log(`Message: ${Signal.get(message)}`)
+
+      let _ = setTimeout(() => {
+        Signal.set(isSubmitting, false)
+        ()
+      }, 1000)
+    }
+
+    let selectOptions = Signal.make([
+      ({value: "option1", label: "Option 1"}: selectOption),
+      ({value: "option2", label: "Option 2"}: selectOption),
+      ({value: "option3", label: "Option 3"}: selectOption),
+    ])
+
+    <div style="max-width: 50rem; margin: auto;">
+      <h1> {Component.text("Contact Form Example")} </h1>
+
+      <div style="margin-bottom: 1rem;">
+        <Label text="Name" required={true} />
+        <Input
+          value={Reactive(name)}
+          onInput={handleNameChange}
+          type_={Input.Text}
+          placeholder="Enter your name"
+        />
+      </div>
+
+      <div style="margin-bottom: 1rem;">
+        <Label text="Email" required={true} />
+        <Input
+          value={Reactive(email)}
+          onInput={handleEmailChange}
+          type_={Input.Email}
+          placeholder="Enter your email"
+        />
+      </div>
+
+      <div style="margin-bottom: 1rem;">
+        <Label text="Choose an option" required={false} />
+        <Select value={selectedOption} options={selectOptions} />
+      </div>
+
+      <div style="margin-bottom: 1rem;">
+        <Label text="Message" required={false} />
+        <Textarea
+          value={Reactive(message)} onInput={handleMessageChange} placeholder="Enter your message"
+        />
+      </div>
+
+      <div style="margin-bottom: 1rem;">
+        <Checkbox
+          checked={agreeToTerms}
+          onChange={handleCheckboxChange}
+          label="I agree to the terms and conditions"
+        />
+      </div>
+
+      <div style="display: flex; gap: 1rem;">
+        <Button onClick={handleSubmit} variant={Button.Primary} disabled={Reactive(isSubmitting)}>
+          {Component.textSignal(() => Signal.get(isSubmitting) ? "Submitting..." : "Submit")}
+        </Button>
+        <Button label={Static("Cancel")} variant={Button.Ghost} />
+      </div>
+    </div>
+  }
+}
+
+// Mount the example form
+Component.mountById(<ExampleForm />, "root")