@superleapai/flow-ui 1.0.0

package/components/table.js

@@ -0,0 +1,335 @@
+/**
+ * Table Component (vanilla JS, Tailwind)
+ * A flexible table component for rendering tabular data with support for
+ * custom rendering and infinite scroll.
+ */
+
+(function (global) {
+  "use strict";
+
+  /**
+   * Create a table component
+   * @param {Object} options - Configuration options
+   * @param {Array} options.data - Array of data objects to display
+   * @param {Array} options.columns - Column definitions
+   * @param {boolean} options.showHeader - Show table header (default: true)
+   * @param {string} options.headerSize - Header size: 'small', 'default', 'large'
+   * @param {boolean} options.hasBorder - Show borders (default: true)
+   * @param {Function} options.onRowClick - Callback when row is clicked
+   * @param {Function} options.onFetch - Callback for infinite scroll
+   * @param {boolean} options.hasMore - Whether more data is available
+   * @param {boolean} options.isLoading - Loading state
+   * @param {string} options.emptyMessage - Message to show when no data
+   * @returns {Object} Table instance with methods
+   */
+  function createTable(options = {}) {
+    const {
+      data = [],
+      columns = [],
+      showHeader = true,
+      headerSize = "small",
+      hasBorder = true,
+      onRowClick = null,
+      onFetch = null,
+      hasMore = false,
+      isLoading = false,
+      emptyMessage = "No data available",
+    } = options;
+
+    let currentData = [...data];
+    let container = null;
+    let tableElement = null;
+
+    /**
+     * Get header size classes
+     */
+    function getHeaderSizeClasses(size) {
+      const sizes = {
+        small: "h-32",
+        default: "h-44",
+        large: "h-48",
+      };
+      return sizes[size] || sizes.small;
+    }
+
+    /**
+     * Get cell size classes
+     */
+    function getCellSizeClasses(size) {
+      const sizes = {
+        small: "h-36",
+        default: "h-44",
+        large: "h-48",
+      };
+      return sizes[size] || sizes.default;
+    }
+
+    /**
+     * Handle row click
+     */
+    function handleRowClick(rowId, event) {
+      if (onRowClick) {
+        onRowClick(rowId);
+      }
+    }
+
+    /**
+     * Create table header
+     */
+    function createTableHeader() {
+      const thead = document.createElement("thead");
+      thead.className = "[&_tr]:border-0 text-typography-quaternary-text";
+
+      const tr = document.createElement("tr");
+
+      // Data columns
+      columns.forEach((column, index) => {
+        const th = document.createElement("th");
+        const isLast = index === columns.length - 1;
+        
+        // Base classes from design system
+        const borderClass = hasBorder
+          ? "border-1/2 border-borderColor-border-secondary"
+          : "border-b-1/2 border-b-borderColor-border-secondary";
+        
+        th.className = `min-w-[150px] max-w-[500px] text-nowrap bg-fill-tertiary-fill-light-gray px-12 py-8 text-left align-middle !text-semi-10 uppercase leading-[12px] tracking-[0.5px] text-typography-tertiary-text hover:bg-fill-tertiary-fill-light-gray ${borderClass} ${getHeaderSizeClasses(
+          headerSize
+        )} ${isLast ? "w-full" : ""}`;
+
+        if (column.width) {
+          th.style.width = column.width;
+          th.style.minWidth = column.width;
+        }
+
+        const headerText = document.createElement("span");
+        headerText.textContent = column.header || "";
+        
+        th.appendChild(headerText);
+        tr.appendChild(th);
+      });
+
+      thead.appendChild(tr);
+      return thead;
+    }
+
+    /**
+     * Create table body
+     */
+    function createTableBody() {
+      const tbody = document.createElement("tbody");
+      tbody.className = "[&_tr:last-child]:border-0";
+
+      if (currentData.length === 0 && !isLoading) {
+        // Empty state
+        const tr = document.createElement("tr");
+        const td = document.createElement("td");
+        td.colSpan = columns.length;
+        td.className = "text-center py-12 text-typography-secondary-text";
+        td.textContent = emptyMessage;
+        tr.appendChild(td);
+        tbody.appendChild(tr);
+        return tbody;
+      }
+
+      // Data rows
+      currentData.forEach((row) => {
+        const tr = document.createElement("tr");
+        tr.className = "transition-colors hover:bg-fill-tertiary-fill-light-gray";
+        if (onRowClick) {
+          tr.className += " cursor-pointer";
+        }
+
+        tr.addEventListener("click", (e) => handleRowClick(row.id, e));
+
+        // Data columns
+        columns.forEach((column, index) => {
+          const td = document.createElement("td");
+          const isLast = index === columns.length - 1;
+          
+          // Base classes from design system
+          const borderClass = hasBorder
+            ? "border-1/2 border-borderColor-border-secondary"
+            : "border-b-1/2 border-b-borderColor-border-secondary";
+          
+          td.className = `box-border w-fit min-w-[150px] max-w-[500px] text-ellipsis text-nowrap bg-fill-quarternary-fill-white px-12 py-8 align-middle !text-reg-12 text-typography-primary-text overflow-hidden truncate ${borderClass} ${getCellSizeClasses(
+            "default"
+          )} ${isLast ? "w-full" : ""}`;
+
+          if (column.width) {
+            td.style.width = column.width;
+            td.style.minWidth = column.width;
+          }
+
+          // Render cell content
+          if (column.cell && typeof column.cell === "function") {
+            const cellContent = column.cell(row);
+            if (typeof cellContent === "string") {
+              td.innerHTML = cellContent;
+            } else if (cellContent instanceof HTMLElement) {
+              td.appendChild(cellContent);
+            } else {
+              td.textContent = cellContent;
+            }
+          } else if (column.accessor) {
+            const value = row[column.accessor];
+            td.textContent = value !== null && value !== undefined ? value : "";
+          } else {
+            td.textContent = "";
+          }
+
+          tr.appendChild(td);
+        });
+
+        tbody.appendChild(tr);
+      });
+
+      // Loading skeleton rows
+      if (isLoading) {
+        for (let i = 0; i < 3; i++) {
+          const tr = document.createElement("tr");
+          tr.className = "animate-pulse";
+
+          columns.forEach((column, index) => {
+            const td = document.createElement("td");
+            const isLast = index === columns.length - 1;
+            
+            const borderClass = hasBorder
+              ? "border-1/2 border-borderColor-border-secondary"
+              : "border-b-1/2 border-b-borderColor-border-secondary";
+            
+            td.className = `px-12 py-8 ${borderClass} ${getCellSizeClasses("default")} ${
+              isLast ? "w-full" : ""
+            }`;
+
+            if (column.width) {
+              td.style.width = column.width;
+              td.style.minWidth = column.width;
+            }
+
+            const skeleton = document.createElement("div");
+            skeleton.className = "h-4 bg-fill-secondary-fill-lighter-gray rounded";
+            td.appendChild(skeleton);
+            tr.appendChild(td);
+          });
+
+          tbody.appendChild(tr);
+        }
+      }
+
+      return tbody;
+    }
+
+    /**
+     * Handle scroll for infinite loading
+     */
+    function handleScroll(e) {
+      if (!onFetch || isLoading || !hasMore) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+
+      // Check if near bottom (within 1.5x viewport height)
+      if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+        onFetch();
+      }
+    }
+
+    /**
+     * Render the table
+     */
+    function render() {
+      if (!container) return;
+
+      // Clear container
+      container.innerHTML = "";
+
+      // Create table wrapper
+      const wrapper = document.createElement("div");
+      wrapper.className = "relative h-full max-w-full overflow-y-auto";
+      wrapper.addEventListener("scroll", handleScroll);
+
+      // Create table
+      tableElement = document.createElement("table");
+      const tableBorderClass = hasBorder
+        ? "border-1/2 border-borderColor-border-secondary"
+        : "";
+      tableElement.className = `w-full caption-bottom bg-fill-quarternary-fill-white text-reg-14 ${tableBorderClass}`;
+
+      // Add header
+      if (showHeader) {
+        tableElement.appendChild(createTableHeader());
+      }
+
+      // Add body
+      tableElement.appendChild(createTableBody());
+
+      wrapper.appendChild(tableElement);
+      container.appendChild(wrapper);
+    }
+
+    /**
+     * Public API
+     */
+    return {
+      /**
+       * Mount the table to a DOM element
+       */
+      mount(element) {
+        if (typeof element === "string") {
+          container = document.querySelector(element);
+        } else {
+          container = element;
+        }
+
+        if (!container) {
+          console.error("Table: Invalid container element");
+          return this;
+        }
+
+        render();
+        return this;
+      },
+
+      /**
+       * Update table data
+       */
+      setData(newData) {
+        currentData = [...newData];
+        render();
+        return this;
+      },
+
+      /**
+       * Get current data
+       */
+      getData() {
+        return [...currentData];
+      },
+
+      /**
+       * Destroy the table
+       */
+      destroy() {
+        if (container) {
+          container.innerHTML = "";
+        }
+        container = null;
+        tableElement = null;
+      },
+
+      /**
+       * Refresh/re-render the table
+       */
+      refresh() {
+        render();
+        return this;
+      },
+    };
+  }
+
+  // Export to global scope
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = { createTable };
+  } else {
+    global.SuperleapTable = { createTable };
+  }
+})(typeof window !== "undefined" ? window : this);

package/components/textarea.js

@@ -0,0 +1,114 @@
+/**
+ * Textarea Component (vanilla JS)
+ * Design-system textarea with variants; matches React Textarea cva variants.
+ * Ref: React Textarea with cva variants; no React/cva dependency.
+ */
+
+(function (global) {
+  "use strict";
+
+  var TEXTAREA_CLASS = {
+    base:
+      "flex w-full rounded-4 border-1/2 border-border-primary bg-fill-quarternary-fill-white px-12 py-6 !text-reg-13 outline-none placeholder:text-typography-quaternary-text text-typography-primary-text resize-y transition-all ease-in-out",
+    default:
+      "min-h-[80px] hover:border-primary-base focus:border-primary-base",
+    borderless:
+      "min-h-[80px] border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+    inline:
+      "border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray focus:border-transparent focus:bg-fill-tertiary-fill-light-gray py-4",
+    error:
+      "min-h-[80px] border-error-base hover:border-error-base focus:border-error-base",
+    warning:
+      "min-h-[80px] border-warning-base hover:border-warning-base focus:border-warning-base",
+    disabled:
+      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+  };
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a textarea component
+   * @param {Object} config
+   * @param {string} [config.variant] - 'default' | 'borderless' | 'inline' | 'error' | 'warning'
+   * @param {string} [config.placeholder]
+   * @param {string} [config.value]
+   * @param {number} [config.rows]
+   * @param {boolean} [config.disabled]
+   * @param {boolean} [config.readOnly]
+   * @param {string} [config.name]
+   * @param {string} [config.id]
+   * @param {string} [config.className] - extra class on textarea
+   * @param {number} [config.maxLength]
+   * @param {Function} [config.onChange]
+   * @param {Function} [config.onInput]
+   * @param {Function} [config.onFocus]
+   * @param {Function} [config.onBlur]
+   * @returns {HTMLTextAreaElement} textarea element (with getValue/setValue/setVariant/setDisabled attached)
+   */
+  function create(config) {
+    var variant = config.variant || "default";
+    var disabled = !!config.disabled;
+
+    var textarea = document.createElement("textarea");
+    textarea.autocomplete = "off";
+    if (config.placeholder != null) textarea.placeholder = config.placeholder;
+    if (config.value != null) textarea.value = config.value;
+    if (config.name) textarea.name = config.name;
+    if (config.id) textarea.id = config.id;
+    if (config.rows != null) textarea.rows = config.rows;
+    if (config.maxLength != null) textarea.maxLength = config.maxLength;
+    textarea.disabled = disabled;
+    textarea.readOnly = !!config.readOnly;
+
+    textarea.className = join(
+      TEXTAREA_CLASS.base,
+      TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
+      disabled ? TEXTAREA_CLASS.disabled : "",
+      config.className || ""
+    );
+    textarea.setAttribute("data-textarea-variant", variant);
+
+    if (config.onChange) textarea.addEventListener("change", config.onChange);
+    if (config.onInput) textarea.addEventListener("input", config.onInput);
+    if (config.onFocus) textarea.addEventListener("focus", config.onFocus);
+    if (config.onBlur) textarea.addEventListener("blur", config.onBlur);
+
+    textarea.getInput = function () {
+      return textarea;
+    };
+    textarea.setValue = function (v) {
+      textarea.value = v;
+    };
+    textarea.getValue = function () {
+      return textarea.value;
+    };
+    textarea.setVariant = function (v) {
+      variant = v;
+      textarea.setAttribute("data-textarea-variant", v);
+      textarea.className = join(
+        TEXTAREA_CLASS.base,
+        TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
+        disabled ? TEXTAREA_CLASS.disabled : "",
+        config.className || ""
+      );
+    };
+    textarea.setDisabled = function (d) {
+      disabled = !!d;
+      textarea.disabled = disabled;
+      textarea.className = join(
+        TEXTAREA_CLASS.base,
+        TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
+        disabled ? TEXTAREA_CLASS.disabled : "",
+        config.className || ""
+      );
+    };
+
+    return textarea;
+  }
+
+  global.TextareaComponent = {
+    create: create,
+  };
+})(typeof window !== "undefined" ? window : this);