@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/layout.js

@@ -0,0 +1,387 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/components/layout/index.ts
+var layout_exports = {};
+__export(layout_exports, {
+  Layout: () => Layout
+});
+module.exports = __toCommonJS(layout_exports);
+
+// src/components/layout/Layout.tsx
+var React3 = __toESM(require("react"));
+
+// src/components/drag-handle/DragHandle.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DragHandle = ({
+  onResize,
+  onResizeEnd,
+  orientation = "vertical",
+  className = ""
+}) => {
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const dragHandleRef = (0, import_react.useRef)(null);
+  const startPosRef = (0, import_react.useRef)(0);
+  const handleMouseDown = (0, import_react.useCallback)((e) => {
+    setIsDragging(true);
+    startPosRef.current = orientation === "vertical" ? e.clientX : e.clientY;
+    e.preventDefault();
+  }, [orientation]);
+  const handleMouseMove = (0, import_react.useCallback)((e) => {
+    if (!isDragging) return;
+    const currentPos = orientation === "vertical" ? e.clientX : e.clientY;
+    const delta = currentPos - startPosRef.current;
+    onResize(delta);
+    startPosRef.current = currentPos;
+  }, [isDragging, onResize, orientation]);
+  const handleMouseUp = (0, import_react.useCallback)(() => {
+    setIsDragging(false);
+    onResizeEnd?.();
+  }, [onResizeEnd]);
+  import_react.default.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = orientation === "vertical" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp, orientation]);
+  const classes = [
+    "drag-handle",
+    `drag-handle--${orientation}`,
+    isDragging && "drag-handle--dragging",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: dragHandleRef,
+      className: classes,
+      onMouseDown: handleMouseDown,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "drag-handle__indicator" })
+    }
+  );
+};
+
+// src/utils/user-preferences.ts
+var DEFAULT_CONFIG = {
+  backend: "localStorage",
+  prefix: "hellboy-ds",
+  dbName: "hellboy-ds-prefs",
+  storeName: "preferences"
+};
+var config = { ...DEFAULT_CONFIG };
+var getStorageKey = (key) => {
+  return `${config.prefix}:${key}`;
+};
+var isLocalStorageAvailable = () => {
+  try {
+    const test = "__storage_test__";
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var IndexedDBStore = class {
+  constructor() {
+    __publicField(this, "db", null);
+  }
+  async init() {
+    if (typeof window === "undefined" || !window.indexedDB) {
+      throw new Error("IndexedDB not available");
+    }
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(config.dbName, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(config.storeName)) {
+          db.createObjectStore(config.storeName, { keyPath: "key" });
+        }
+      };
+    });
+  }
+  async get(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readonly");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result?.value);
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async set(key, value) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.put({ key, value });
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async remove(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.delete(key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async clear() {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.clear();
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+};
+var indexedDBStore = new IndexedDBStore();
+var getPreference = (key, defaultValue) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      const stored = localStorage.getItem(getStorageKey(key));
+      if (stored !== null) {
+        return JSON.parse(stored);
+      }
+    }
+    return defaultValue;
+  } catch (error) {
+    console.warn(`Failed to get preference "${key}":`, error);
+    return defaultValue;
+  }
+};
+var setPreference = (key, value) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      localStorage.setItem(getStorageKey(key), JSON.stringify(value));
+    }
+  } catch (error) {
+    console.warn(`Failed to set preference "${key}":`, error);
+  }
+};
+
+// src/components/navbar/Navbar.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NAVBAR_COLLAPSED_WIDTH = 64;
+var NAVBAR_MIN_PERSIST_WIDTH = 211;
+
+// src/components/layout/Layout.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_LEFT_WIDTH = 280;
+var DEFAULT_RIGHT_WIDTH = 300;
+var MIN_WIDTH = NAVBAR_COLLAPSED_WIDTH;
+var MAX_WIDTH = 600;
+var Layout = ({
+  variant = "stacked",
+  header,
+  footer,
+  sidebarLeft,
+  sidebarRight,
+  bottomBar,
+  resizable = false,
+  hero,
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = ["layout", `layout--${variant}`, className].filter(Boolean).join(" ");
+  const hasSidebarLeft = sidebarLeft != null;
+  const hasSidebarRight = sidebarRight != null;
+  const columnCount = [hasSidebarLeft, true, hasSidebarRight].filter(Boolean).length;
+  const shouldShowResizers = resizable && columnCount >= 2;
+  const [leftSidebarWidth, setLeftSidebarWidth] = React3.useState(() => {
+    const isCollapsed = getPreference("layout.leftSidebarCollapsed", false);
+    if (isCollapsed) {
+      return NAVBAR_COLLAPSED_WIDTH;
+    }
+    const stored = getPreference("layout.leftSidebarWidth", DEFAULT_LEFT_WIDTH);
+    return typeof stored === "number" ? stored : DEFAULT_LEFT_WIDTH;
+  });
+  const [rightSidebarWidth, setRightSidebarWidth] = React3.useState(() => {
+    const stored = getPreference("layout.rightSidebarWidth", DEFAULT_RIGHT_WIDTH);
+    return typeof stored === "number" ? stored : DEFAULT_RIGHT_WIDTH;
+  });
+  const [leftSidebarPreferredWidth, setLeftSidebarPreferredWidth] = React3.useState(() => {
+    const savedWidth = getPreference("layout.leftSidebarWidth");
+    return typeof savedWidth === "number" && savedWidth >= NAVBAR_MIN_PERSIST_WIDTH ? savedWidth : DEFAULT_LEFT_WIDTH;
+  });
+  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = React3.useState(() => {
+    const stored = getPreference("layout.leftSidebarCollapsed");
+    return typeof stored === "boolean" ? stored : false;
+  });
+  const clampWidth = React3.useCallback((width) => {
+    return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.round(width)));
+  }, []);
+  const updateLeftSidebarWidth = React3.useCallback(
+    (width) => {
+      const clamped = clampWidth(width);
+      setLeftSidebarWidth(clamped);
+      if (clamped >= NAVBAR_MIN_PERSIST_WIDTH) {
+        setPreference("layout.leftSidebarWidth", clamped);
+        setLeftSidebarPreferredWidth(clamped);
+        setLeftSidebarCollapsed(false);
+        setPreference("layout.leftSidebarCollapsed", false);
+      }
+    },
+    [clampWidth]
+  );
+  const updateRightSidebarWidth = React3.useCallback(
+    (width) => {
+      const clamped = clampWidth(width);
+      setRightSidebarWidth(clamped);
+      setPreference("layout.rightSidebarWidth", clamped);
+    },
+    [clampWidth]
+  );
+  const handleLeftResize = React3.useCallback(
+    (delta) => {
+      setLeftSidebarWidth((prev) => {
+        const next = clampWidth(prev + delta);
+        return next;
+      });
+    },
+    [clampWidth]
+  );
+  const handleLeftResizeEnd = React3.useCallback(() => {
+    setLeftSidebarWidth((currentWidth) => {
+      if (currentWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
+        setPreference("layout.leftSidebarWidth", currentWidth);
+        setLeftSidebarPreferredWidth(currentWidth);
+        setLeftSidebarCollapsed(false);
+        setPreference("layout.leftSidebarCollapsed", false);
+        return currentWidth;
+      } else {
+        setLeftSidebarCollapsed(true);
+        setPreference("layout.leftSidebarCollapsed", true);
+        return NAVBAR_COLLAPSED_WIDTH;
+      }
+    });
+  }, []);
+  const handleRightResize = React3.useCallback(
+    (delta) => {
+      setRightSidebarWidth((prev) => {
+        const next = clampWidth(prev - delta);
+        setPreference("layout.rightSidebarWidth", next);
+        return next;
+      });
+    },
+    [clampWidth]
+  );
+  if (variant === "single" || variant === "stacked") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: classes, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "layout__container scrollable", children: [
+      hero,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("main", { className: "layout__main", children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("header", { className: "layout__header", children: header }),
+        children,
+        footer && footer
+      ] }),
+      bottomBar && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "layout__bottom-bar", children: bottomBar })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: classes, ...props, children: [
+    hasSidebarLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "aside",
+        {
+          className: "layout__sidebar layout__sidebar--left scrollable",
+          style: { width: leftSidebarWidth },
+          children: React3.isValidElement(sidebarLeft) ? React3.cloneElement(sidebarLeft, {
+            sidebarWidth: leftSidebarWidth,
+            onRequestWidthChange: updateLeftSidebarWidth,
+            preferredWidth: leftSidebarPreferredWidth,
+            initialCollapsed: leftSidebarCollapsed
+          }) : sidebarLeft
+        }
+      ),
+      shouldShowResizers && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        DragHandle,
+        {
+          orientation: "vertical",
+          onResize: handleLeftResize,
+          onResizeEnd: handleLeftResizeEnd
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "layout__container scrollable", children: [
+      hero,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("main", { className: "layout__main", children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("header", { className: "layout__header", children: header }),
+        children,
+        footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "layout__footer", children: footer })
+      ] }),
+      bottomBar && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "layout__bottom-bar", children: bottomBar })
+    ] }),
+    hasSidebarRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      shouldShowResizers && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DragHandle, { orientation: "vertical", onResize: handleRightResize }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "aside",
+        {
+          className: "layout__sidebar layout__sidebar--right scrollable",
+          style: { width: rightSidebarWidth },
+          children: React3.isValidElement(sidebarRight) ? React3.cloneElement(sidebarRight, {
+            sidebarWidth: rightSidebarWidth,
+            onRequestWidthChange: updateRightSidebarWidth
+          }) : sidebarRight
+        }
+      )
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Layout
+});