basefn 1.0.0

package/src/Example.res.mjs

@@ -0,0 +1,176 @@
+// 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__Input from "./components/Basefn__Input.res.mjs";
+import * as Basefn__Label from "./components/Basefn__Label.res.mjs";
+import * as Basefn__Button from "./components/Basefn__Button.res.mjs";
+import * as Basefn__Select from "./components/Basefn__Select.res.mjs";
+import * as Basefn__Checkbox from "./components/Basefn__Checkbox.res.mjs";
+import * as Basefn__Textarea from "./components/Basefn__Textarea.res.mjs";
+
+function Example$ExampleForm(props) {
+  let name = Xote.Signal.make("", undefined, undefined);
+  let email = Xote.Signal.make("", undefined, undefined);
+  let message = Xote.Signal.make("", undefined, undefined);
+  let agreeToTerms = Xote.Signal.make(false, undefined, undefined);
+  let selectedOption = Xote.Signal.make("option1", undefined, undefined);
+  let isSubmitting = Xote.Signal.make(false, undefined, undefined);
+  let handleNameChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(name, target.value);
+  };
+  let handleEmailChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(email, target.value);
+  };
+  let handleMessageChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(message, target.value);
+  };
+  let handleCheckboxChange = _evt => Xote.Signal.update(agreeToTerms, prev => !prev);
+  let handleSubmit = _evt => {
+    Xote.Signal.set(isSubmitting, true);
+    console.log("Submitting form...");
+    console.log(`Name: ` + Xote.Signal.get(name));
+    console.log(`Email: ` + Xote.Signal.get(email));
+    console.log(`Message: ` + Xote.Signal.get(message));
+    setTimeout(() => {
+      Xote.Signal.set(isSubmitting, false);
+    }, 1000);
+  };
+  let selectOptions = Xote.Signal.make([
+    {
+      value: "option1",
+      label: "Option 1"
+    },
+    {
+      value: "option2",
+      label: "Option 2"
+    },
+    {
+      value: "option3",
+      label: "Option 3"
+    }
+  ], undefined, undefined);
+  return Xote__JSX.Elements.jsxs("div", {
+    style: "max-width: 50rem; margin: auto;",
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("h1", {
+        children: Xote.Component.text("Contact Form Example")
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-bottom: 1rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Name",
+            required: true
+          }),
+          Xote__JSX.jsx(Basefn__Input.make, {
+            value: {
+              TAG: "Reactive",
+              _0: name
+            },
+            onInput: handleNameChange,
+            type_: "Text",
+            placeholder: "Enter your name"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-bottom: 1rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Email",
+            required: true
+          }),
+          Xote__JSX.jsx(Basefn__Input.make, {
+            value: {
+              TAG: "Reactive",
+              _0: email
+            },
+            onInput: handleEmailChange,
+            type_: "Email",
+            placeholder: "Enter your email"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-bottom: 1rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Choose an option",
+            required: false
+          }),
+          Xote__JSX.jsx(Basefn__Select.make, {
+            value: selectedOption,
+            options: selectOptions
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-bottom: 1rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Message",
+            required: false
+          }),
+          Xote__JSX.jsx(Basefn__Textarea.make, {
+            value: {
+              TAG: "Reactive",
+              _0: message
+            },
+            onInput: handleMessageChange,
+            placeholder: "Enter your message"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsx("div", {
+        style: "margin-bottom: 1rem;",
+        children: Xote__JSX.jsx(Basefn__Checkbox.make, {
+          checked: agreeToTerms,
+          onChange: handleCheckboxChange,
+          label: "I agree to the terms and conditions"
+        })
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "display: flex; gap: 1rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Button.make, {
+            children: Xote.Component.textSignal(() => {
+              if (Xote.Signal.get(isSubmitting)) {
+                return "Submitting...";
+              } else {
+                return "Submit";
+              }
+            }),
+            disabled: {
+              TAG: "Reactive",
+              _0: isSubmitting
+            },
+            onClick: handleSubmit,
+            variant: "Primary"
+          }),
+          Xote__JSX.jsx(Basefn__Button.make, {
+            label: {
+              TAG: "Static",
+              _0: "Cancel"
+            },
+            variant: "Ghost"
+          })
+        ])
+      })
+    ])
+  });
+}
+
+let ExampleForm = {
+  make: Example$ExampleForm
+};
+
+Xote.Component.mountById(Xote__JSX.jsx(Example$ExampleForm, {}), "root");
+
+export {
+  ExampleForm,
+}
+/*  Not a pure module */

package/src/components/Basefn__Accordion.css

@@ -0,0 +1,70 @@
+.basefn-accordion {
+  width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.basefn-accordion__item {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.basefn-accordion__item:last-child {
+  border-bottom: none;
+}
+
+.basefn-accordion__trigger {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  background: none;
+  border: none;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: #1f2937;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  text-align: left;
+}
+
+.basefn-accordion__trigger:hover {
+  background-color: #f9fafb;
+}
+
+.basefn-accordion__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.basefn-accordion__icon {
+  font-size: 1.25rem;
+  transition: transform 0.2s;
+  color: #6b7280;
+}
+
+.basefn-accordion__icon--open {
+  transform: rotate(180deg);
+}
+
+.basefn-accordion__content {
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
+}
+
+.basefn-accordion__content--collapsed {
+  max-height: 0;
+  opacity: 0;
+}
+
+.basefn-accordion__content--expanded {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+.basefn-accordion__content-inner {
+  padding: 0 1.25rem 1rem 1.25rem;
+  color: #6b7280;
+  line-height: 1.6;
+}

package/src/components/Basefn__Accordion.res

@@ -0,0 +1,79 @@
+%%raw(`import './Basefn__Accordion.css'`)
+
+open Xote
+
+type accordionItem = {
+  value: string,
+  title: string,
+  content: Component.node,
+  disabled?: bool,
+}
+
+@jsx.component
+let make = (
+  ~items: array<accordionItem>,
+  ~defaultOpen: option<array<string>>=?,
+  ~multiple: bool=false,
+) => {
+  let openItems = Signal.make(defaultOpen->Option.getOr([]))
+
+  let isOpen = (value: string) => {
+    Signal.get(openItems)->Array.includes(value)
+  }
+
+  let toggleItem = (value: string, disabled: option<bool>) => {
+    switch disabled {
+    | Some(true) => ()
+    | _ =>
+      Signal.update(openItems, current => {
+        if current->Array.includes(value) {
+          // Close item
+          current->Array.filter(item => item != value)
+        } // Open item
+        else if multiple {
+          current->Array.concat([value])
+        } else {
+          [value]
+        }
+      })
+    }
+  }
+
+  <div class="basefn-accordion">
+    {items
+    ->Array.map(item => {
+      let itemIsOpen = Computed.make(() => isOpen(item.value))
+
+      <div key={item.value} class="basefn-accordion__item">
+        <button
+          class="basefn-accordion__trigger"
+          onClick={_ => toggleItem(item.value, item.disabled)}
+          disabled={item.disabled->Option.getOr(false)}
+        >
+          <span> {Component.text(item.title)} </span>
+          <span
+            class={Computed.make(() => {
+              let baseClass = "basefn-accordion__icon"
+              let openClass = Signal.get(itemIsOpen) ? " basefn-accordion__icon--open" : ""
+              baseClass ++ openClass
+            })}
+          >
+            {Component.text("\u25bc")}
+          </span>
+        </button>
+        <div
+          class={Computed.make(() => {
+            let baseClass = "basefn-accordion__content"
+            let stateClass = Signal.get(itemIsOpen)
+              ? " basefn-accordion__content--expanded"
+              : " basefn-accordion__content--collapsed"
+            baseClass ++ stateClass
+          })}
+        >
+          <div class="basefn-accordion__content-inner"> {item.content} </div>
+        </div>
+      </div>
+    })
+    ->Component.fragment}
+  </div>
+}

package/src/components/Basefn__Accordion.res.mjs

@@ -0,0 +1,77 @@
+// 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__Accordion.css'
+;
+
+function Basefn__Accordion(props) {
+  let __multiple = props.multiple;
+  let multiple = __multiple !== undefined ? __multiple : false;
+  let openItems = Xote.Signal.make(Core__Option.getOr(props.defaultOpen, []), undefined, undefined);
+  return Xote__JSX.Elements.jsx("div", {
+    class: "basefn-accordion",
+    children: Xote.Component.fragment(props.items.map(item => {
+      let itemIsOpen = Xote.Computed.make(() => {
+        let value = item.value;
+        return Xote.Signal.get(openItems).includes(value);
+      }, undefined);
+      return Xote__JSX.Elements.jsxsKeyed("div", {
+        class: "basefn-accordion__item",
+        children: Xote__JSX.array([
+          Xote__JSX.Elements.jsxs("button", {
+            class: "basefn-accordion__trigger",
+            disabled: Core__Option.getOr(item.disabled, false),
+            onClick: param => {
+              let value = item.value;
+              let disabled = item.disabled;
+              if (disabled !== undefined && disabled) {
+                return;
+              }
+              Xote.Signal.update(openItems, current => {
+                if (current.includes(value)) {
+                  return current.filter(item => item !== value);
+                } else if (multiple) {
+                  return current.concat([value]);
+                } else {
+                  return [value];
+                }
+              });
+            },
+            children: Xote__JSX.array([
+              Xote__JSX.Elements.jsx("span", {
+                children: Xote.Component.text(item.title)
+              }),
+              Xote__JSX.Elements.jsx("span", {
+                class: Xote.Computed.make(() => {
+                  let openClass = Xote.Signal.get(itemIsOpen) ? " basefn-accordion__icon--open" : "";
+                  return "basefn-accordion__icon" + openClass;
+                }, undefined),
+                children: Xote.Component.text("\u25bc")
+              })
+            ])
+          }),
+          Xote__JSX.Elements.jsx("div", {
+            class: Xote.Computed.make(() => {
+              let stateClass = Xote.Signal.get(itemIsOpen) ? " basefn-accordion__content--expanded" : " basefn-accordion__content--collapsed";
+              return "basefn-accordion__content" + stateClass;
+            }, undefined),
+            children: Xote__JSX.Elements.jsx("div", {
+              class: "basefn-accordion__content-inner",
+              children: item.content
+            })
+          })
+        ])
+      }, item.value, undefined);
+    }))
+  });
+}
+
+let make = Basefn__Accordion;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Alert.css

@@ -0,0 +1,79 @@
+.basefn-alert {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  border-left: 4px solid;
+  font-size: 0.875rem;
+  animation: basefn-alert-slide-in 0.3s ease-out;
+}
+
+.basefn-alert__content {
+  flex: 1;
+}
+
+.basefn-alert__title {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+}
+
+.basefn-alert__message {
+  line-height: 1.5;
+}
+
+.basefn-alert__dismiss {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 1rem;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.basefn-alert__dismiss:hover {
+  opacity: 1;
+}
+
+/* Variants */
+.basefn-alert--info {
+  background-color: var(--basefn-alert-info-bg);
+  border-left-color: var(--basefn-color-info);
+  color: var(--basefn-alert-info-text);
+}
+
+.basefn-alert--success {
+  background-color: var(--basefn-alert-success-bg);
+  border-left-color: var(--basefn-color-success);
+  color: var(--basefn-alert-success-text);
+}
+
+.basefn-alert--warning {
+  background-color: var(--basefn-alert-warning-bg);
+  border-left-color: var(--basefn-color-warning);
+  color: var(--basefn-alert-warning-text);
+}
+
+.basefn-alert--error {
+  background-color: var(--basefn-alert-error-bg);
+  border-left-color: var(--basefn-color-error);
+  color: var(--basefn-alert-error-text);
+}
+
+/* Animation */
+@keyframes basefn-alert-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/Basefn__Alert.res

@@ -0,0 +1,68 @@
+%%raw(`import './Basefn__Alert.css'`)
+
+open Xote
+
+type variant = Info | Success | Warning | Error
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Info => "info"
+  | Success => "success"
+  | Warning => "warning"
+  | Error => "error"
+  }
+}
+
+@jsx.component
+let make = (
+  ~title: option<string>=?,
+  ~message: Signal.t<string>,
+  ~variant: variant=Info,
+  ~dismissible: bool=false,
+  ~onDismiss: option<unit => unit>=?,
+) => {
+  let isVisible = Signal.make(true)
+
+  let handleDismiss = () => {
+    Signal.set(isVisible, false)
+    switch onDismiss {
+    | Some(callback) => callback()
+    | None => ()
+    }
+  }
+
+  let getClassName = () => {
+    let variantClass = "basefn-alert--" ++ variantToString(variant)
+    "basefn-alert " ++ variantClass
+  }
+
+  // Use computed signal to reactively determine which nodes to render
+  let content = Computed.make(() => {
+    if Signal.get(isVisible) {
+      [
+        <div class={getClassName()}>
+          <div class="basefn-alert__content">
+            {switch title {
+            | Some(titleText) =>
+              <div class="basefn-alert__title"> {Component.text(titleText)} </div>
+            | None => <> </>
+            }}
+            <div class="basefn-alert__message">
+              {Component.textSignal(() => Signal.get(message))}
+            </div>
+          </div>
+          {dismissible
+            ? <button class="basefn-alert__dismiss" onClick={_ => handleDismiss()}>
+                {Component.text("\u00d7")}
+              </button>
+            : <> </>}
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  // Use signalFragment to reactively render the content
+  Component.signalFragment(content)
+}

package/src/components/Basefn__Alert.res.mjs

@@ -0,0 +1,78 @@
+// 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__Alert.css'
+;
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Info" :
+      return "info";
+    case "Success" :
+      return "success";
+    case "Warning" :
+      return "warning";
+    case "Error" :
+      return "error";
+  }
+}
+
+function Basefn__Alert(props) {
+  let onDismiss = props.onDismiss;
+  let __dismissible = props.dismissible;
+  let __variant = props.variant;
+  let message = props.message;
+  let title = props.title;
+  let variant = __variant !== undefined ? __variant : "Info";
+  let dismissible = __dismissible !== undefined ? __dismissible : false;
+  let isVisible = Xote.Signal.make(true, undefined, undefined);
+  let handleDismiss = () => {
+    Xote.Signal.set(isVisible, false);
+    if (onDismiss !== undefined) {
+      return onDismiss();
+    }
+  };
+  let getClassName = () => {
+    let variantClass = "basefn-alert--" + variantToString(variant);
+    return "basefn-alert " + variantClass;
+  };
+  return Xote.Component.signalFragment(Xote.Computed.make(() => {
+    if (Xote.Signal.get(isVisible)) {
+      return [Xote__JSX.Elements.jsxs("div", {
+          class: getClassName(),
+          children: Xote__JSX.array([
+            Xote__JSX.Elements.jsxs("div", {
+              class: "basefn-alert__content",
+              children: Xote__JSX.array([
+                title !== undefined ? Xote__JSX.Elements.jsx("div", {
+                    class: "basefn-alert__title",
+                    children: Xote.Component.text(title)
+                  }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+                Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-alert__message",
+                  children: Xote.Component.textSignal(() => Xote.Signal.get(message))
+                })
+              ])
+            }),
+            dismissible ? Xote__JSX.Elements.jsx("button", {
+                class: "basefn-alert__dismiss",
+                onClick: param => handleDismiss(),
+                children: Xote.Component.text("\u00d7")
+              }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+          ])
+        })];
+    } else {
+      return [];
+    }
+  }, undefined));
+}
+
+let make = Basefn__Alert;
+
+export {
+  variantToString,
+  make,
+}
+/*  Not a pure module */