npm - react-headless-dock-layout - Versions diffs - 0.1.0 - Mend

react-headless-dock-layout 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/.vscode/settings.json +7 -0
package/biome.json +34 -0
package/index.html +12 -0
package/package.json +43 -0
package/src/App.tsx +119 -0
package/src/global.css +5 -0
package/src/index.ts +3 -0
package/src/index.tsx +8 -0
package/src/internal/EventEmitter.ts +17 -0
package/src/internal/LayoutManager/LayoutManager.test.ts +948 -0
package/src/internal/LayoutManager/LayoutManager.ts +515 -0
package/src/internal/LayoutManager/LayoutTree.test.ts +341 -0
package/src/internal/LayoutManager/LayoutTree.ts +82 -0
package/src/internal/LayoutManager/calculateLayoutRects.test.ts +211 -0
package/src/internal/LayoutManager/calculateLayoutRects.ts +88 -0
package/src/internal/LayoutManager/calculateMinSize.test.ts +77 -0
package/src/internal/LayoutManager/calculateMinSize.ts +40 -0
package/src/internal/LayoutManager/findClosestDirection.test.ts +95 -0
package/src/internal/LayoutManager/findClosestDirection.ts +15 -0
package/src/internal/LayoutManager/types.ts +20 -0
package/src/internal/assertNever.ts +3 -0
package/src/internal/clamp.tsx +3 -0
package/src/internal/findParentNode.ts +30 -0
package/src/internal/invariant.tsx +6 -0
package/src/strategies.ts +76 -0
package/src/types.ts +31 -0
package/src/useDockLayout.ts +249 -0
package/tsconfig.json +7 -0
package/tsup.config.ts +9 -0

package/.vscode/settings.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "explicit",
+    "source.fixAll.biome": "explicit"
+  }
+}

package/biome.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**", "!!**/dist"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Headless Dock Layout</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="dist/bundle.js"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+  "name": "react-headless-dock-layout",
+  "version": "0.1.0",
+  "description": "A lightweight, headless dock layout library for React.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "keywords": [
+    "react",
+    "headless",
+    "dock layout"
+  ],
+  "license": "ISC",
+  "devDependencies": {
+    "@biomejs/biome": "2.3.10",
+    "@total-typescript/tsconfig": "^1.0.4",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.14"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "scripts": {
+    "test": "vitest",
+    "build": "tsup",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+import type { LayoutNode } from ".";
+import { assertNever } from "./internal/assertNever";
+import { useDockLayout } from "./useDockLayout";
+const INITIAL_LAYOUT: LayoutNode | null = null;
+function loadInitialLayout() {
+  const savedLayout = localStorage.getItem("layout");
+  if (savedLayout === null) {
+    return INITIAL_LAYOUT;
+  }
+  try {
+    const parsed = JSON.parse(savedLayout);
+    return parsed.root;
+  } catch (error) {
+    console.error(error);
+    return INITIAL_LAYOUT;
+  }
+}
+export function App() {
+  const {
+    layoutManager,
+    containerRef,
+    layoutRects,
+    draggingRect,
+    getRectProps,
+    getDropZoneProps,
+    getDragHandleProps,
+  } = useDockLayout<HTMLDivElement>(loadInitialLayout());
+  return (
+    <div>
+      <div style={{ height: "10vh", border: "1px solid white" }}>
+        <button
+          type="button"
+          onClick={() => {
+            layoutManager.addPanel();
+          }}
+        >
+          Add panel
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            localStorage.setItem("layout", layoutManager.serialize());
+          }}
+        >
+          Save to Local Storage
+        </button>
+      </div>
+      <div
+        ref={containerRef}
+        style={{
+          height: "90vh",
+          position: "relative",
+        }}
+      >
+        {layoutRects.map((rect) => {
+          if (rect.type === "split") {
+            const { style, ...props } = getRectProps(rect);
+            return (
+              <div
+                key={rect.id}
+                style={{ ...style, backgroundColor: "white", fontSize: 20 }}
+                {...props}
+              ></div>
+            );
+          } else if (rect.type === "panel") {
+            const { style, ...props } = getRectProps(rect);
+            const dropZoneProps = getDropZoneProps(rect);
+            return (
+              <div
+                key={rect.id}
+                style={{
+                  ...style,
+                  fontSize: 20,
+                  display: "grid",
+                  placeItems: "center",
+                  opacity: draggingRect?.id === rect.id ? 0.5 : 1,
+                }}
+                {...props}
+              >
+                {dropZoneProps !== null && (
+                  <div
+                    style={{
+                      ...dropZoneProps.style,
+                      backgroundColor: "#3182f6",
+                      opacity: 0.5,
+                    }}
+                  />
+                )}
+                <button type="button" {...getDragHandleProps(rect)}>
+                  Drag Handle
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    layoutManager.removePanel(rect.id);
+                  }}
+                >
+                  Close Panel
+                </button>
+                {rect.id}
+              </div>
+            );
+          } else {
+            assertNever(rect);
+          }
+        })}
+      </div>
+    </div>
+  );
+}

package/src/global.css ADDED Viewed

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  background-color: black;
+  color: white;
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from "./strategies";
+export * from "./types";
+export * from "./useDockLayout";

package/src/index.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client";
+import "./global.css";
+import { App } from "./App";
+const domNode = document.getElementById("root")!;
+const root = createRoot(domNode);
+root.render(<App />);

package/src/internal/EventEmitter.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export class EventEmitter {
+  private _listeners = new Set<() => void>();
+  subscribe(listener: () => void) {
+    this._listeners.add(listener);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+  emit() {
+    this._listeners.forEach((listener) => {
+      listener();
+    });
+  }
+}