@superleapai/flow-ui 2.3.6 → 2.3.8

package/components/tabs.js

@@ -0,0 +1,191 @@
+/**
+ * Tabs Component (vanilla JS)
+ * Tabbed interface with list, triggers, and content panels.
+ * Ref: Radix-style Tabs; design tokens match design system.
+ */
+
+(function (global) {
+  "use strict";
+
+  function getComponent(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  var LIST_BASE_CLASS =
+    "inline-flex items-center justify-center gap-2 rounded-4 bg-fill-tertiary-fill-light-gray p-4";
+
+  /** Button variant classes for active (outline) vs inactive (ghost) */
+  var BUTTON_OUTLINE =
+    "shadow-soft-extra-small group bg-fill-quarternary-fill-white border-1/2 border-border-primary text-typography-primary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:opacity-50 disabled:border-fill-secondary-fill-gray";
+  var BUTTON_GHOST =
+    "group text-typography-primary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:text-typography-quaternary-text";
+  var BUTTON_BASE =
+    "inline-flex items-center justify-center whitespace-nowrap !text-med-12 transition-colors disabled:pointer-events-none hover:cursor-pointer h-fit";
+  var BUTTON_SIZES = {
+    default: "px-8 py-4 gap-4 rounded-4",
+    small: "px-8 py-4 gap-4 rounded-4",
+    large: "px-16 py-8 gap-4 rounded-4",
+  };
+
+  var CONTENT_BASE_CLASS =
+    "ring-offset-background focus-visible:ring-ring h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a full Tabs component (list + triggers + content panels)
+   * @param {Object} config
+   * @param {string} [config.defaultValue] - initial active tab value
+   * @param {string} [config.value] - controlled active value
+   * @param {Function} [config.onChange] - (value) => void when tab changes
+   * @param {Array<{value: string, label: string, content: HTMLElement|string}>} config.tabs - tab definitions
+   * @param {string} [config.size] - 'default' | 'small' | 'large'
+   * @param {string} [config.listClassName] - extra class on list
+   * @param {string} [config.contentClassName] - extra class on content wrapper
+   * @returns {HTMLElement} root element (wrapper containing list + content area)
+   */
+  function create(config) {
+    var opts = config || {};
+    var defaultValue = opts.defaultValue;
+    var controlledValue = opts.value;
+    var onChange = opts.onChange;
+    var tabs = opts.tabs || [];
+    var size = opts.size || "default";
+    var listClassName = opts.listClassName || "";
+    var contentClassName = opts.contentClassName || "";
+
+    var sizeClass = BUTTON_SIZES[size] || BUTTON_SIZES.default;
+
+    var root = document.createElement("div");
+    root.className = "tabs-root w-full";
+
+    var activeValue = controlledValue !== undefined ? controlledValue : defaultValue !== undefined ? defaultValue : (tabs[0] && tabs[0].value) || "";
+
+    // List container
+    var list = document.createElement("div");
+    list.setAttribute("role", "tablist");
+    list.className = join(LIST_BASE_CLASS, listClassName);
+
+    // Content container (holds all panels; we show/hide by value)
+    var contentWrapper = document.createElement("div");
+    contentWrapper.className = join("tabs-content-wrapper mt-4", contentClassName);
+
+    var triggerEls = [];
+    var contentPanels = [];
+
+    var Button = getComponent("Button");
+
+    tabs.forEach(function (tab, index) {
+      var value = tab.value;
+      var label = tab.label != null ? tab.label : value;
+      var content = tab.content;
+
+      var isActive = value === activeValue;
+      var trigger = Button.create({
+        variant: isActive ? "outline" : "ghost",
+        size: size === "small" ? "small" : size === "large" ? "large" : "default",
+        text: label,
+        type: "button",
+        className: "mx-2",
+        onClick: function () {
+          if (activeValue === value) return;
+          if (controlledValue === undefined) {
+            activeValue = value;
+            updateActiveState();
+          }
+          if (typeof onChange === "function") {
+            onChange(value);
+          }
+        },
+      });
+
+      trigger.setAttribute("role", "tab");
+      trigger.setAttribute("aria-selected", value === activeValue ? "true" : "false");
+      trigger.setAttribute("data-state", value === activeValue ? "active" : "inactive");
+      trigger.setAttribute("data-value", value);
+      trigger.tabIndex = value === activeValue ? 0 : -1;
+
+      trigger.addEventListener("keydown", function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          trigger.click();
+        }
+        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          var nextIndex = e.key === "ArrowRight" ? index + 1 : index - 1;
+          if (nextIndex >= 0 && nextIndex < tabs.length) {
+            var nextTrigger = triggerEls[nextIndex];
+            if (nextTrigger) {
+              nextTrigger.focus();
+              nextTrigger.click();
+            }
+          }
+        }
+      });
+
+      list.appendChild(trigger);
+      triggerEls.push(trigger);
+
+      var panel = document.createElement("div");
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-hidden", value !== activeValue ? "true" : "false");
+      panel.setAttribute("data-value", value);
+      panel.className = join(CONTENT_BASE_CLASS, value !== activeValue ? "hidden" : "");
+      if (typeof content === "string") {
+        panel.innerHTML = content;
+      } else if (content && content.nodeType === 1) {
+        panel.appendChild(content);
+      }
+      contentWrapper.appendChild(panel);
+      contentPanels.push(panel);
+    });
+
+    function updateActiveState() {
+      triggerEls.forEach(function (t, i) {
+        var val = tabs[i] && tabs[i].value;
+        var isActive = val === activeValue;
+        t.setAttribute("aria-selected", isActive ? "true" : "false");
+        t.setAttribute("data-state", isActive ? "active" : "inactive");
+        t.tabIndex = isActive ? 0 : -1;
+        t.className = join(BUTTON_BASE, isActive ? BUTTON_OUTLINE : BUTTON_GHOST, sizeClass, "mx-2");
+      });
+      contentPanels.forEach(function (p, i) {
+        var val = tabs[i] && tabs[i].value;
+        var isActive = val === activeValue;
+        p.setAttribute("aria-hidden", isActive ? "false" : "true");
+        p.classList.toggle("hidden", !isActive);
+      });
+    }
+
+    root.appendChild(list);
+    root.appendChild(contentWrapper);
+
+    root.getValue = function () {
+      return activeValue;
+    };
+
+    root.setValue = function (newValue) {
+      if (newValue === activeValue) return;
+      activeValue = newValue;
+      updateActiveState();
+    };
+
+    return root;
+  }
+
+  var Tabs = {
+    create: create,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Tabs;
+  } else {
+    global.Tabs = Tabs;
+  }
+})(typeof window !== "undefined" ? window : this);

package/core/flow.js

@@ -248,6 +248,48 @@
     return field;
   }
 
+  /**
+   * Create a rich text editor field
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} [config.placeholder] - Placeholder when empty
+   * @param {boolean} [config.required] - Whether field is required
+   * @param {string} [config.helpText] - Optional help text for tooltip
+   * @param {number} [config.minHeightPx] - Min height of editor area in pixels (default 400)
+   * @param {boolean} [config.disabled] - Whether editor is disabled
+   * @returns {HTMLElement} Field element
+   */
+  function createRichTextEditor(config) {
+    const { label, fieldId, placeholder, required = false, helpText = null, minHeightPx = 400, disabled = false } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("RichTextEditorComponent") && getComponent("RichTextEditorComponent").create) {
+      const currentValue = get(fieldId) || "";
+      const editorEl = getComponent("RichTextEditorComponent").create({
+        value: currentValue,
+        placeholder: placeholder || "",
+        minHeightPx,
+        disabled,
+        onChange: (html) => set(fieldId, html),
+      });
+      editorEl._fieldId = fieldId;
+      field.appendChild(editorEl);
+      return field;
+    }
+
+    const fallback = document.createElement("textarea");
+    fallback.className = "textarea min-h-[400px]";
+    fallback.placeholder = placeholder || `Enter ${label.toLowerCase()}`;
+    fallback.value = get(fieldId) || "";
+    fallback.disabled = disabled;
+    fallback.addEventListener("change", (e) => set(fieldId, e.target.value));
+    field.appendChild(fallback);
+    return field;
+  }
+
   /**
    * Create a select dropdown field (using custom select component)
    * @param {Object} config - Configuration object
@@ -1332,6 +1374,38 @@
     });
   }
 
+  /**
+   * Create a Tabs component (list + triggers + content panels)
+   * @param {Object} config - { defaultValue?, value?, onChange?, tabs: [{ value, label, content }], size?, variant?, listClassName?, contentClassName? }
+   * @returns {HTMLElement} Tabs root element
+   */
+  function createTabs(config) {
+    const Tabs = getComponent("Tabs");
+    if (Tabs && typeof Tabs.create === "function") {
+      return Tabs.create(config);
+    }
+    const fallback = document.createElement("div");
+    fallback.className = "tabs-root";
+    fallback.textContent = "Tabs component not loaded.";
+    return fallback;
+  }
+
+  /**
+   * Create a Steps component (numbered step triggers + optional content panels)
+   * @param {Object} config - { steps: [{ id, label, content? }], defaultValue?, value?, onChange?, size?, variant?, listClassName?, contentClassName?, showContent? }
+   * @returns {HTMLElement} Steps root element
+   */
+  function createSteps(config) {
+    const Steps = getComponent("Steps");
+    if (Steps && typeof Steps.create === "function") {
+      return Steps.create(config);
+    }
+    const fallback = document.createElement("div");
+    fallback.className = "steps-root";
+    fallback.textContent = "Steps component not loaded.";
+    return fallback;
+  }
+
   // ============================================================================
   // TABLE COMPONENT
   // ============================================================================
@@ -1658,6 +1732,7 @@
     // Form components
     createInput,
     createTextarea,
+    createRichTextEditor,
     createSelect,
     createTimePicker,
     createDateTimePicker,
@@ -1693,6 +1768,8 @@
 
     // Stepper
     renderStepper,
+    createTabs,
+    createSteps,
 
     // Alerts
     renderAlerts,