basefn 1.0.0

package/src/components/Basefn__Grid.res

@@ -0,0 +1,296 @@
+%%raw(`import "./Basefn__Grid.css"`)
+
+open Xote
+
+// Grid template types
+type columns =
+  | Count(int) // Simple column count (e.g., 3 columns)
+  | Template(string) // Custom template (e.g., "1fr 2fr 1fr")
+  | Repeat(int, string) // Repeat pattern (e.g., Repeat(3, "1fr"))
+  | AutoFit(string) // Auto-fit with min size (e.g., AutoFit("minmax(200px, 1fr)"))
+  | AutoFill(string) // Auto-fill with min size
+
+type rows =
+  | Count(int)
+  | Template(string)
+  | Repeat(int, string)
+  | Auto // Auto rows
+
+// Auto flow direction
+type autoFlow =
+  | Row
+  | Column
+  | RowDense
+  | ColumnDense
+
+// Alignment options
+type justifyItems =
+  | Start
+  | End
+  | Center
+  | Stretch
+
+type alignItems =
+  | Start
+  | End
+  | Center
+  | Stretch
+  | Baseline
+
+type justifyContent =
+  | Start
+  | End
+  | Center
+  | Stretch
+  | SpaceBetween
+  | SpaceAround
+  | SpaceEvenly
+
+type alignContent =
+  | Start
+  | End
+  | Center
+  | Stretch
+  | SpaceBetween
+  | SpaceAround
+  | SpaceEvenly
+
+// Convert types to CSS values
+let columnsToString = (cols: columns): string => {
+  switch cols {
+  | Count(n) => "repeat(" ++ Int.toString(n) ++ ", 1fr)"
+  | Template(t) => t
+  | Repeat(n, pattern) => "repeat(" ++ Int.toString(n) ++ ", " ++ pattern ++ ")"
+  | AutoFit(minmax) => "repeat(auto-fit, " ++ minmax ++ ")"
+  | AutoFill(minmax) => "repeat(auto-fill, " ++ minmax ++ ")"
+  }
+}
+
+let rowsToString = (rows: rows): string => {
+  switch rows {
+  | Count(n) => "repeat(" ++ Int.toString(n) ++ ", auto)"
+  | Template(t) => t
+  | Repeat(n, pattern) => "repeat(" ++ Int.toString(n) ++ ", " ++ pattern ++ ")"
+  | Auto => "auto"
+  }
+}
+
+let autoFlowToString = (flow: autoFlow): string => {
+  switch flow {
+  | Row => "row"
+  | Column => "column"
+  | RowDense => "row dense"
+  | ColumnDense => "column dense"
+  }
+}
+
+let justifyItemsToString = (justify: justifyItems): string => {
+  switch justify {
+  | Start => "start"
+  | End => "end"
+  | Center => "center"
+  | Stretch => "stretch"
+  }
+}
+
+let alignItemsToString = (align: alignItems): string => {
+  switch align {
+  | Start => "start"
+  | End => "end"
+  | Center => "center"
+  | Stretch => "stretch"
+  | Baseline => "baseline"
+  }
+}
+
+let justifyContentToString = (justify: justifyContent): string => {
+  switch justify {
+  | Start => "start"
+  | End => "end"
+  | Center => "center"
+  | Stretch => "stretch"
+  | SpaceBetween => "space-between"
+  | SpaceAround => "space-around"
+  | SpaceEvenly => "space-evenly"
+  }
+}
+
+let alignContentToString = (align: alignContent): string => {
+  switch align {
+  | Start => "start"
+  | End => "end"
+  | Center => "center"
+  | Stretch => "stretch"
+  | SpaceBetween => "space-between"
+  | SpaceAround => "space-around"
+  | SpaceEvenly => "space-evenly"
+  }
+}
+
+@jsx.component
+let make = (
+  ~columns: columns=Count(1),
+  ~rows: option<rows>=?,
+  ~gap: option<string>=?,
+  ~rowGap: option<string>=?,
+  ~columnGap: option<string>=?,
+  ~autoFlow: option<autoFlow>=?,
+  ~justifyItems: option<justifyItems>=?,
+  ~alignItems: option<alignItems>=?,
+  ~justifyContent: option<justifyContent>=?,
+  ~alignContent: option<alignContent>=?,
+  ~class=ReactiveProp.static(""),
+  ~style=ReactiveProp.static(""),
+  ~children,
+) => {
+  let className = Computed.make(() => {
+    "basefn-grid " ++ class->ReactiveProp.get
+  })
+
+  let gridStyle = Computed.make(() => {
+    let styles = []
+
+    // Template columns (required)
+    styles->Array.push("grid-template-columns: " ++ columnsToString(columns))
+
+    // Template rows (optional)
+    switch rows {
+    | Some(r) => styles->Array.push("grid-template-rows: " ++ rowsToString(r))
+    | None => ()
+    }
+
+    // Gap (can use single gap or separate row/column gaps)
+    switch (gap, rowGap, columnGap) {
+    | (Some(g), None, None) => styles->Array.push("gap: " ++ g)
+    | (None, Some(rg), Some(cg)) => {
+        styles->Array.push("row-gap: " ++ rg)
+        styles->Array.push("column-gap: " ++ cg)
+      }
+    | (None, Some(rg), None) => styles->Array.push("row-gap: " ++ rg)
+    | (None, None, Some(cg)) => styles->Array.push("column-gap: " ++ cg)
+    | _ => () // Default gap from CSS
+    }
+
+    // Auto flow
+    switch autoFlow {
+    | Some(flow) => styles->Array.push("grid-auto-flow: " ++ autoFlowToString(flow))
+    | None => ()
+    }
+
+    // Justify items
+    switch justifyItems {
+    | Some(justify) => styles->Array.push("justify-items: " ++ justifyItemsToString(justify))
+    | None => ()
+    }
+
+    // Align items
+    switch alignItems {
+    | Some(align) => styles->Array.push("align-items: " ++ alignItemsToString(align))
+    | None => ()
+    }
+
+    // Justify content
+    switch justifyContent {
+    | Some(justify) => styles->Array.push("justify-content: " ++ justifyContentToString(justify))
+    | None => ()
+    }
+
+    // Align content
+    switch alignContent {
+    | Some(align) => styles->Array.push("align-content: " ++ alignContentToString(align))
+    | None => ()
+    }
+
+    // Add custom styles
+    let customStyle = style->ReactiveProp.get
+    if customStyle !== "" {
+      styles->Array.push(customStyle)
+    }
+
+    styles->Array.join("; ")
+  })
+
+  <div class={className} style={gridStyle}> {children} </div>
+}
+
+// Grid Item component for children that need custom placement
+module Item = {
+  type columnSpan =
+    | Span(int)
+    | StartEnd(int, int)
+    | Auto
+
+  type rowSpan =
+    | Span(int)
+    | StartEnd(int, int)
+    | Auto
+
+  let columnSpanToString = (span: columnSpan): string => {
+    switch span {
+    | Span(n) => "span " ++ Int.toString(n)
+    | StartEnd(start, end) => Int.toString(start) ++ " / " ++ Int.toString(end)
+    | Auto => "auto"
+    }
+  }
+
+  let rowSpanToString = (span: rowSpan): string => {
+    switch span {
+    | Span(n) => "span " ++ Int.toString(n)
+    | StartEnd(start, end) => Int.toString(start) ++ " / " ++ Int.toString(end)
+    | Auto => "auto"
+    }
+  }
+
+  @jsx.component
+  let make = (
+    ~column: option<columnSpan>=?,
+    ~row: option<rowSpan>=?,
+    ~justifySelf: option<justifyItems>=?,
+    ~alignSelf: option<alignItems>=?,
+    ~class=ReactiveProp.static(""),
+    ~style=ReactiveProp.static(""),
+    ~children,
+  ) => {
+    let className = Computed.make(() => {
+      "basefn-grid-item " ++ class->ReactiveProp.get
+    })
+
+    let itemStyle = Computed.make(() => {
+      let styles = []
+
+      // Column placement
+      switch column {
+      | Some(col) => styles->Array.push("grid-column: " ++ columnSpanToString(col))
+      | None => ()
+      }
+
+      // Row placement
+      switch row {
+      | Some(r) => styles->Array.push("grid-row: " ++ rowSpanToString(r))
+      | None => ()
+      }
+
+      // Justify self
+      switch justifySelf {
+      | Some(justify) => styles->Array.push("justify-self: " ++ justifyItemsToString(justify))
+      | None => ()
+      }
+
+      // Align self
+      switch alignSelf {
+      | Some(align) => styles->Array.push("align-self: " ++ alignItemsToString(align))
+      | None => ()
+      }
+
+      // Add custom styles
+      let customStyle = style->ReactiveProp.get
+      if customStyle !== "" {
+        styles->Array.push(customStyle)
+      }
+
+      styles->Array.join("; ")
+    })
+
+    <div class={className} style={itemStyle}> {children} </div>
+  }
+}

package/src/components/Basefn__Grid.res.mjs

@@ -0,0 +1,263 @@
+// 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__Grid.css"
+;
+
+function columnsToString(cols) {
+  switch (cols.TAG) {
+    case "Count" :
+      return "repeat(" + cols._0.toString() + ", 1fr)";
+    case "Template" :
+      return cols._0;
+    case "Repeat" :
+      return "repeat(" + cols._0.toString() + ", " + cols._1 + ")";
+    case "AutoFit" :
+      return "repeat(auto-fit, " + cols._0 + ")";
+    case "AutoFill" :
+      return "repeat(auto-fill, " + cols._0 + ")";
+  }
+}
+
+function rowsToString(rows) {
+  if (typeof rows !== "object") {
+    return "auto";
+  }
+  switch (rows.TAG) {
+    case "Count" :
+      return "repeat(" + rows._0.toString() + ", auto)";
+    case "Template" :
+      return rows._0;
+    case "Repeat" :
+      return "repeat(" + rows._0.toString() + ", " + rows._1 + ")";
+  }
+}
+
+function autoFlowToString(flow) {
+  switch (flow) {
+    case "Row" :
+      return "row";
+    case "Column" :
+      return "column";
+    case "RowDense" :
+      return "row dense";
+    case "ColumnDense" :
+      return "column dense";
+  }
+}
+
+function justifyItemsToString(justify) {
+  switch (justify) {
+    case "Start" :
+      return "start";
+    case "End" :
+      return "end";
+    case "Center" :
+      return "center";
+    case "Stretch" :
+      return "stretch";
+  }
+}
+
+function alignItemsToString(align) {
+  switch (align) {
+    case "Start" :
+      return "start";
+    case "End" :
+      return "end";
+    case "Center" :
+      return "center";
+    case "Stretch" :
+      return "stretch";
+    case "Baseline" :
+      return "baseline";
+  }
+}
+
+function justifyContentToString(justify) {
+  switch (justify) {
+    case "Start" :
+      return "start";
+    case "End" :
+      return "end";
+    case "Center" :
+      return "center";
+    case "Stretch" :
+      return "stretch";
+    case "SpaceBetween" :
+      return "space-between";
+    case "SpaceAround" :
+      return "space-around";
+    case "SpaceEvenly" :
+      return "space-evenly";
+  }
+}
+
+function alignContentToString(align) {
+  switch (align) {
+    case "Start" :
+      return "start";
+    case "End" :
+      return "end";
+    case "Center" :
+      return "center";
+    case "Stretch" :
+      return "stretch";
+    case "SpaceBetween" :
+      return "space-between";
+    case "SpaceAround" :
+      return "space-around";
+    case "SpaceEvenly" :
+      return "space-evenly";
+  }
+}
+
+function Basefn__Grid(props) {
+  let __style = props.style;
+  let __class = props.class;
+  let alignContent = props.alignContent;
+  let justifyContent = props.justifyContent;
+  let alignItems = props.alignItems;
+  let justifyItems = props.justifyItems;
+  let autoFlow = props.autoFlow;
+  let columnGap = props.columnGap;
+  let rowGap = props.rowGap;
+  let gap = props.gap;
+  let rows = props.rows;
+  let __columns = props.columns;
+  let columns = __columns !== undefined ? __columns : ({
+      TAG: "Count",
+      _0: 1
+    });
+  let $$class = __class !== undefined ? __class : Xote.ReactiveProp.$$static("");
+  let style = __style !== undefined ? __style : Xote.ReactiveProp.$$static("");
+  let className = Xote.Computed.make(() => "basefn-grid " + Xote.ReactiveProp.get($$class), undefined);
+  let gridStyle = Xote.Computed.make(() => {
+    let styles = [];
+    styles.push("grid-template-columns: " + columnsToString(columns));
+    if (rows !== undefined) {
+      styles.push("grid-template-rows: " + rowsToString(rows));
+    }
+    if (gap !== undefined) {
+      if (rowGap !== undefined || columnGap !== undefined) {
+        
+      } else {
+        styles.push("gap: " + gap);
+      }
+    } else if (rowGap !== undefined) {
+      if (columnGap !== undefined) {
+        styles.push("row-gap: " + rowGap);
+        styles.push("column-gap: " + columnGap);
+      } else {
+        styles.push("row-gap: " + rowGap);
+      }
+    } else if (columnGap !== undefined) {
+      styles.push("column-gap: " + columnGap);
+    }
+    if (autoFlow !== undefined) {
+      styles.push("grid-auto-flow: " + autoFlowToString(autoFlow));
+    }
+    if (justifyItems !== undefined) {
+      styles.push("justify-items: " + justifyItemsToString(justifyItems));
+    }
+    if (alignItems !== undefined) {
+      styles.push("align-items: " + alignItemsToString(alignItems));
+    }
+    if (justifyContent !== undefined) {
+      styles.push("justify-content: " + justifyContentToString(justifyContent));
+    }
+    if (alignContent !== undefined) {
+      styles.push("align-content: " + alignContentToString(alignContent));
+    }
+    let customStyle = Xote.ReactiveProp.get(style);
+    if (customStyle !== "") {
+      styles.push(customStyle);
+    }
+    return styles.join("; ");
+  }, undefined);
+  return Xote__JSX.Elements.jsx("div", {
+    class: className,
+    style: gridStyle,
+    children: props.children
+  });
+}
+
+function columnSpanToString(span) {
+  if (typeof span !== "object") {
+    return "auto";
+  } else if (span.TAG === "Span") {
+    return "span " + span._0.toString();
+  } else {
+    return span._0.toString() + " / " + span._1.toString();
+  }
+}
+
+function rowSpanToString(span) {
+  if (typeof span !== "object") {
+    return "auto";
+  } else if (span.TAG === "Span") {
+    return "span " + span._0.toString();
+  } else {
+    return span._0.toString() + " / " + span._1.toString();
+  }
+}
+
+function Basefn__Grid$Item(props) {
+  let __style = props.style;
+  let __class = props.class;
+  let alignSelf = props.alignSelf;
+  let justifySelf = props.justifySelf;
+  let row = props.row;
+  let column = props.column;
+  let $$class = __class !== undefined ? __class : Xote.ReactiveProp.$$static("");
+  let style = __style !== undefined ? __style : Xote.ReactiveProp.$$static("");
+  let className = Xote.Computed.make(() => "basefn-grid-item " + Xote.ReactiveProp.get($$class), undefined);
+  let itemStyle = Xote.Computed.make(() => {
+    let styles = [];
+    if (column !== undefined) {
+      styles.push("grid-column: " + columnSpanToString(column));
+    }
+    if (row !== undefined) {
+      styles.push("grid-row: " + rowSpanToString(row));
+    }
+    if (justifySelf !== undefined) {
+      styles.push("justify-self: " + justifyItemsToString(justifySelf));
+    }
+    if (alignSelf !== undefined) {
+      styles.push("align-self: " + alignItemsToString(alignSelf));
+    }
+    let customStyle = Xote.ReactiveProp.get(style);
+    if (customStyle !== "") {
+      styles.push(customStyle);
+    }
+    return styles.join("; ");
+  }, undefined);
+  return Xote__JSX.Elements.jsx("div", {
+    class: className,
+    style: itemStyle,
+    children: props.children
+  });
+}
+
+let Item = {
+  columnSpanToString: columnSpanToString,
+  rowSpanToString: rowSpanToString,
+  make: Basefn__Grid$Item
+};
+
+let make = Basefn__Grid;
+
+export {
+  columnsToString,
+  rowsToString,
+  autoFlowToString,
+  justifyItemsToString,
+  alignItemsToString,
+  justifyContentToString,
+  alignContentToString,
+  make,
+  Item,
+}
+/*  Not a pure module */

package/src/components/Basefn__Icon.css

@@ -0,0 +1,12 @@
+.basefn-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.basefn-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}