flet-box 0.0.0-stage → 1.0.2

package/src/widgets/CodeViewer.js

@@ -0,0 +1,236 @@
+/**
+ * @file CodeViewer.js
+ * @description Read-only code block with line numbers and syntax highlighting.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
+
+export const CodeViewer = (props) => {
+  const {
+code = "",
+    title,
+    maxHeight = 400,
+    fontSize = 12,
+    backgroundColor = colors.gray100,
+    padding = 12,
+    borderRadius = 8,
+    showHeader = true,
+    showLineNumbers = false,
+    startingLineNumber = 1,
+    lineNumberWidth = 40,
+    lineNumberColor = colors.secondary,
+    ...rest
+  } = props;
+
+  let currentCode =
+    typeof code === "string" ? code : JSON.stringify(code, null, 2);
+  let currentTitle = title;
+  let headerRef = null;
+  let scrollWrapperRef = null;
+  let lineNumbersColRef = null;
+  let codeColRef = null;
+  let codeWrapperRef = null;
+
+  const refreshContent = () => {
+    const lines = currentCode.split("\n");
+    const highlightedLines = lines.map((line) => generateHighlightedHtml(line));
+
+    if (showLineNumbers) {
+      // Update line numbers
+      if (lineNumbersColRef) {
+        lineNumbersColRef.innerHTML = "";
+        for (let i = 0; i < lines.length; i++) {
+          const numberDiv = WidgetFactory({
+            tag: "div",
+            padding: `0 ${padding / 2}px 0 ${padding}px`,
+            whiteSpace: "pre",
+            textContent: String(startingLineNumber + i),
+          });
+          lineNumbersColRef.appendChild(numberDiv);
+        }
+      }
+
+      // Update code
+      if (codeColRef) {
+        codeColRef.innerHTML = "";
+        for (let i = 0; i < lines.length; i++) {
+          const lineDiv = WidgetFactory({
+            tag: "div",
+            whiteSpace: "pre",
+            minHeight: "1.5em",
+          });
+          lineDiv.innerHTML = highlightedLines[i] || "&nbsp;";
+          codeColRef.appendChild(lineDiv);
+        }
+      }
+    } else {
+      // Update code without line numbers
+      if (codeWrapperRef) {
+        codeWrapperRef.innerHTML = highlightedLines.join("\n");
+      }
+    }
+  };
+
+  const container = WidgetFactory({
+    tag: "div",
+    widgetName: "CodeViewer",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    ...rest,
+  });
+
+  // Header
+  if (currentTitle && showHeader) {
+    headerRef = WidgetFactory({
+      tag: "div",
+      padding: "8px 12px",
+      backgroundColor: colors.primary,
+      borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,
+      color: "#fff",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textContent: currentTitle,
+    });
+    container.appendChild(headerRef);
+  }
+
+  // Scroll wrapper
+  scrollWrapperRef = WidgetFactory({
+    tag: "div",
+    backgroundColor,
+    borderRadius: currentTitle
+      ? `0 0 ${borderRadius}px ${borderRadius}px`
+      : `${borderRadius}px`,
+    overflow: "auto",
+    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+    overflowX: "auto",
+    overflowY: "auto",
+  });
+
+  // Build content according to showLineNumbers
+  if (showLineNumbers) {
+    const flexContainer = WidgetFactory({
+      tag: "div",
+      display: "flex",
+      flexDirection: "row",
+      minWidth: "100%",
+      width: "fit-content",
+    });
+
+    lineNumbersColRef = WidgetFactory({
+      tag: "div",
+      backgroundColor,
+      borderRight: `1px solid ${colors.border}`,
+      padding: `${padding}px 0`,
+      fontFamily: "monospace",
+      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      lineHeight: "1.5",
+      textAlign: "right",
+      color: lineNumberColor,
+      userSelect: "none",
+      width: `${lineNumberWidth}px`,
+      flexShrink: 0,
+    });
+
+    codeColRef = WidgetFactory({
+      tag: "div",
+      padding: `${padding}px`,
+      fontFamily: "monospace",
+      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      lineHeight: "1.5",
+      whiteSpace: "pre",
+      flex: 1,
+      overflowX: "visible",
+    });
+
+    flexContainer.appendChild(lineNumbersColRef);
+    flexContainer.appendChild(codeColRef);
+    scrollWrapperRef.appendChild(flexContainer);
+
+    // Sync scroll
+    const syncScroll = () => {
+      if (lineNumbersColRef) lineNumbersColRef.scrollTop = codeColRef.scrollTop;
+    };
+    codeColRef.addEventListener("scroll", syncScroll);
+
+    scrollWrapperRef.onUnmount(() => {
+      codeColRef.removeEventListener("scroll", syncScroll);
+    });
+  } else {
+    codeWrapperRef = WidgetFactory({
+      tag: "div",
+      padding: typeof padding === "number" ? `${padding}px` : padding,
+      fontFamily: "monospace",
+      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      whiteSpace: "pre",
+      lineHeight: "1.5",
+    });
+    scrollWrapperRef.appendChild(codeWrapperRef);
+  }
+
+  container.appendChild(scrollWrapperRef);
+
+  // Fill initial content
+  const lines = currentCode.split("\n");
+  const highlightedLines = lines.map((line) => generateHighlightedHtml(line));
+
+  if (showLineNumbers) {
+    for (let i = 0; i < lines.length; i++) {
+      const numberDiv = WidgetFactory({
+        tag: "div",
+        padding: `0 ${padding / 2}px 0 ${padding}px`,
+        whiteSpace: "pre",
+        textContent: String(startingLineNumber + i),
+      });
+      lineNumbersColRef.appendChild(numberDiv);
+    }
+
+    for (let i = 0; i < lines.length; i++) {
+      const lineDiv = WidgetFactory({
+        tag: "div",
+        whiteSpace: "pre",
+        minHeight: "1.5em",
+      });
+      lineDiv.innerHTML = highlightedLines[i] || "&nbsp;";
+      codeColRef.appendChild(lineDiv);
+    }
+  } else {
+    codeWrapperRef.innerHTML = highlightedLines.join("\n");
+  }
+
+  // ========== PUBLIC METHODS ==========
+  container.updateCode = (newCode) => {
+    currentCode =
+      typeof newCode === "string" ? newCode : JSON.stringify(newCode, null, 2);
+    refreshContent();
+  };
+
+  container.updateTitle = (newTitle) => {
+    currentTitle = newTitle;
+    if (headerRef) {
+      headerRef.textContent = currentTitle;
+    }
+  };
+
+  container.scrollTo = (x, y) => {
+    if (scrollWrapperRef) {
+      scrollWrapperRef.scrollLeft = x;
+      scrollWrapperRef.scrollTop = y;
+    }
+  };
+
+  container.scrollToStart = () => {
+    if (scrollWrapperRef) scrollWrapperRef.scrollLeft = 0;
+  };
+
+  container.scrollToEnd = () => {
+    if (scrollWrapperRef)
+      scrollWrapperRef.scrollLeft = scrollWrapperRef.scrollWidth;
+  };
+
+  return container;
+};
+
+export default CodeViewer;

package/src/widgets/Column.js

@@ -0,0 +1,29 @@
+/**
+ * @file Column.js
+ * @description Vertical flex layout container (default `flex-direction: column`).
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+
+export const Column = (props = {}) => {
+  const {
+    display = "flex",
+    flexDirection = "column",
+    width = "100%",
+    height = "auto",
+    boxSizing = "border-box",
+    ...rest
+  } = props;
+
+  return WidgetFactory({
+    tag: "div",
+    widgetName: "Column",
+    display: display,
+    flexDirection: flexDirection,
+    width: width,
+    height: height,
+    boxSizing: boxSizing,
+    ...rest,
+  });
+};
+
+export default Column;

package/src/widgets/Container.js

@@ -0,0 +1,31 @@
+/**
+ * @file Container.js
+ * @description General-purpose surface container: flex column with overflow and
+ * the theme's surface background by default.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const Container = (props = {}) => {
+  const {
+    display = "flex",
+    flexDirection = "column",
+    overflow = "auto",
+    boxSizing = "border-box",
+    bgColor = colors.surface,
+    ...rest
+  } = props;
+
+  return WidgetFactory({
+    tag: "div",
+    widgetName: "Container",
+    display: display,
+    flexDirection: flexDirection,
+    overflow: overflow,
+    boxSizing: boxSizing,
+    backgroundColor: bgColor,
+    ...rest,
+  });
+};
+
+export default Container;

package/src/widgets/DataTable.js

@@ -0,0 +1,257 @@
+/**
+ * @file DataTable.js
+ * @description Table renderer with configurable columns and rows.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const DataTable = (props) => {
+  const {
+    columns,
+    rows,
+    striped = true,
+    hoverable = true,
+    bordered = true,
+    onRowClick,
+
+    // ========== COLOR PROPS ==========
+    headerBgColor = colors.gray100,
+    headerTextColor = colors.text,
+    headerFontWeight = "bold",
+    headerFontSize = 14,
+
+    rowBgColor = "transparent",
+    rowTextColor = colors.text,
+    rowFontSize = 13,
+
+    stripedRowBgColor = colors.gray50,
+
+    hoverRowBgColor = `${colors.primary}10`,
+
+    borderColor = colors.border,
+    borderWidth = 1,
+
+    cellPadding = "10px 12px",
+    headerCellPadding = "12px",
+
+    // ========== OTHER PROPS ==========
+    ...rest
+  } = props;
+
+  // Main container with WidgetFactory
+  const container = WidgetFactory({
+    widgetName: "DataTable",
+    width: "100%",
+    overflowX: "auto",
+    ...rest,
+  });
+
+  // Createste table element
+  const table = document.createElement("table");
+  table.style.width = "100%";
+  table.style.borderCollapse = "collapse";
+  table.style.border = bordered
+    ? `${borderWidth}px solid ${borderColor}`
+    : "none";
+
+  // ========== HEADER ==========
+  const thead = document.createElement("thead");
+  const headerRow = document.createElement("tr");
+
+  for (const col of columns) {
+    const th = document.createElement("th");
+    th.textContent = typeof col === "string" ? col : col.label;
+    th.style.padding = headerCellPadding;
+    th.style.textAlign = "left";
+    th.style.borderBottom = `2px solid ${borderColor}`;
+    th.style.backgroundColor = headerBgColor;
+    th.style.color = headerTextColor;
+    th.style.fontWeight = headerFontWeight;
+    th.style.fontSize =
+      typeof headerFontSize === "number"
+        ? `${headerFontSize}px`
+        : headerFontSize;
+
+    // Custom alignment per column
+    if (typeof col !== "string" && col.align) {
+      th.style.textAlign = col.align;
+    }
+
+    headerRow.appendChild(th);
+  }
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  // ========== BODY ==========
+  const tbody = document.createElement("tbody");
+
+  rows.forEach((row, index) => {
+    const tr = document.createElement("tr");
+
+    // Row background color (striped or normal)
+    if (striped && index % 2 === 1) {
+      tr.style.backgroundColor = stripedRowBgColor;
+    } else {
+      tr.style.backgroundColor = rowBgColor;
+    }
+
+    // Hover effect
+    if (hoverable) {
+      tr.style.transition = "background-color 0.2s";
+      tr.addEventListener("mouseenter", () => {
+        tr.style.backgroundColor = hoverRowBgColor;
+      });
+      tr.addEventListener("mouseleave", () => {
+        tr.style.backgroundColor =
+          striped && index % 2 === 1 ? stripedRowBgColor : rowBgColor;
+      });
+    }
+
+    // Row click handler
+    if (onRowClick) {
+      tr.style.cursor = "pointer";
+      tr.addEventListener("click", () => onRowClick(row, index));
+    }
+
+    // Cells
+    for (const col of columns) {
+      const td = document.createElement("td");
+      const key = typeof col === "string" ? col : col.key;
+      const value = row[key];
+
+      td.textContent = value !== undefined ? String(value) : "";
+      td.style.padding = cellPadding;
+      td.style.borderBottom = `${borderWidth}px solid ${borderColor}`;
+      td.style.color = rowTextColor;
+      td.style.fontSize =
+        typeof rowFontSize === "number" ? `${rowFontSize}px` : rowFontSize;
+
+      // Custom alignment per column
+      if (typeof col !== "string" && col.align) {
+        td.style.textAlign = col.align;
+      }
+
+      // Custom formatter per column
+      if (
+        typeof col !== "string" &&
+        col.format &&
+        typeof col.format === "function"
+      ) {
+        td.textContent = col.format(value, row);
+      }
+
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+
+  container.appendChild(table);
+
+  // ========== PUBLIC METHODS ==========
+
+  // Update table data
+  container.updateData = (newRows) => {
+    rows.length = 0;
+    rows.push(...newRows);
+
+    // Rebuild body
+    const newTbody = document.createElement("tbody");
+
+    newRows.forEach((row, index) => {
+      const tr = document.createElement("tr");
+
+      if (striped && index % 2 === 1) {
+        tr.style.backgroundColor = stripedRowBgColor;
+      } else {
+        tr.style.backgroundColor = rowBgColor;
+      }
+
+      if (hoverable) {
+        tr.style.transition = "background-color 0.2s";
+        tr.addEventListener("mouseenter", () => {
+          tr.style.backgroundColor = hoverRowBgColor;
+        });
+        tr.addEventListener("mouseleave", () => {
+          tr.style.backgroundColor =
+            striped && index % 2 === 1 ? stripedRowBgColor : rowBgColor;
+        });
+      }
+
+      if (onRowClick) {
+        tr.style.cursor = "pointer";
+        tr.addEventListener("click", () => onRowClick(row, index));
+      }
+
+      for (const col of columns) {
+        const td = document.createElement("td");
+        const key = typeof col === "string" ? col : col.key;
+        const value = row[key];
+
+        td.textContent = value !== undefined ? String(value) : "";
+        td.style.padding = cellPadding;
+        td.style.borderBottom = `${borderWidth}px solid ${borderColor}`;
+        td.style.color = rowTextColor;
+        td.style.fontSize =
+          typeof rowFontSize === "number" ? `${rowFontSize}px` : rowFontSize;
+
+        if (typeof col !== "string" && col.align) {
+          td.style.textAlign = col.align;
+        }
+
+        if (
+          typeof col !== "string" &&
+          col.format &&
+          typeof col.format === "function"
+        ) {
+          td.textContent = col.format(value, row);
+        }
+
+        tr.appendChild(td);
+      }
+      newTbody.appendChild(tr);
+    });
+
+    table.replaceChild(newTbody, tbody);
+  };
+
+  // Update table columns
+  container.updateColumns = (newColumns) => {
+    columns.length = 0;
+    columns.push(...newColumns);
+
+    // Rebuild header
+    const newThead = document.createElement("thead");
+    const newHeaderRow = document.createElement("tr");
+
+    for (const col of newColumns) {
+      const th = document.createElement("th");
+      th.textContent = typeof col === "string" ? col : col.label;
+      th.style.padding = headerCellPadding;
+      th.style.textAlign = "left";
+      th.style.borderBottom = `2px solid ${borderColor}`;
+      th.style.backgroundColor = headerBgColor;
+      th.style.color = headerTextColor;
+      th.style.fontWeight = headerFontWeight;
+      th.style.fontSize =
+        typeof headerFontSize === "number"
+          ? `${headerFontSize}px`
+          : headerFontSize;
+
+      if (typeof col !== "string" && col.align) {
+        th.style.textAlign = col.align;
+      }
+
+      newHeaderRow.appendChild(th);
+    }
+    newThead.appendChild(newHeaderRow);
+    table.replaceChild(newThead, thead);
+
+    // Rebuild body with existing rows
+    container.updateData(rows);
+  };
+
+  return container;
+};
+
+export default DataTable;

package/src/widgets/Divider.js

@@ -0,0 +1,93 @@
+/**
+ * @file Divider.js
+ * @description Horizontal/vertical rule with configurable thickness and margins.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const Divider = (props = {}) => {
+  const {
+    color = colors.surface,
+    thickness = 1,
+    margin = 16,
+    orientation = "horizontal",
+    width = "100%",
+    height = "100%",
+    flexShrink = 0,
+    marginTop: propMarginTop,
+    marginBottom: propMarginBottom,
+    marginLeft: propMarginLeft,
+    marginRight: propMarginRight,
+    ...rest
+  } = props;
+
+  const isHorizontal = orientation === "horizontal";
+
+  // Determine margin values with proper priority:
+  // 1. Individual props (marginTop, marginBottom, etc.)
+  // 2. margin object (margin.top, margin.bottom, etc.)
+  // 3. margin number (applied to all sides)
+  // 4. Default values
+
+  let finalMarginTop = propMarginTop ?? 0;
+  let finalMarginBottom = propMarginBottom ?? 0;
+  let finalMarginLeft = propMarginLeft ?? 0;
+  let finalMarginRight = propMarginRight ?? 0;
+
+  if (typeof margin === "number") {
+    if (isHorizontal) {
+      finalMarginTop = margin;
+      finalMarginBottom = margin;
+    } else {
+      finalMarginLeft = margin;
+      finalMarginRight = margin;
+    }
+  } else if (margin && typeof margin === "object") {
+    if (isHorizontal) {
+      finalMarginTop = margin.top ?? finalMarginTop;
+      finalMarginBottom = margin.bottom ?? finalMarginBottom;
+    } else {
+      finalMarginLeft = margin.left ?? finalMarginLeft;
+      finalMarginRight = margin.right ?? finalMarginRight;
+    }
+  }
+
+  // If margin is a string, use it directly (overrides everything)
+  const useMarginString = typeof margin === "string";
+
+  // Createste widget
+  const widget = WidgetFactory({
+    tag: "div",
+    widgetName: "Divider",
+    backgroundColor: color,
+    flexShrink: flexShrink,
+    ...rest,
+  });
+
+  // Apply divider-specific props
+  if (isHorizontal) {
+    widget.update({
+      height: thickness,
+      width: width,
+      marginTop: finalMarginTop,
+      marginBottom: finalMarginBottom,
+    });
+  } else {
+    widget.update({
+      width: thickness,
+      height: height,
+      minHeight: 1,
+      marginLeft: finalMarginLeft,
+      marginRight: finalMarginRight,
+    });
+  }
+
+  // If margin is a string, apply it directly (overrides individual margins)
+  if (useMarginString) {
+    widget.update({ margin: margin });
+  }
+
+  return widget;
+};
+
+export default Divider;