@window-splitter/react 0.8.0

package/src/__snapshots__/ReactWindowSplitter.test.tsx.snap

@@ -0,0 +1,58 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Autosave > cookie 1`] = `"autosave-cookie-example=%7B%22size%22%3A%7B%22x%22%3A0%2C%22y%22%3A0%2C%22width%22%3A500%2C%22height%22%3A200%2C%22top%22%3A0%2C%22right%22%3A500%2C%22bottom%22%3A200%2C%22left%22%3A0%7D%2C%22items%22%3A%5B%7B%22type%22%3A%22panel%22%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsible%22%3Afalse%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onCollapseChange%22%3A%7B%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%22panel1%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.7%22%7D%7D%2C%7B%22type%22%3A%22handle%22%2C%22size%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%2210%22%7D%2C%22id%22%3A%22resizer1%22%7D%2C%7B%22type%22%3A%22panel%22%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsible%22%3Afalse%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onCollapseChange%22%3A%7B%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%22panel2%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.3%22%7D%7D%5D%2C%22orientation%22%3A%22horizontal%22%2C%22dragOvershoot%22%3A%220%22%2C%22groupId%22%3A%22autosave-cookie-example%22%2C%22autosaveStrategy%22%3A%22cookie%22%7D"`;
+
+exports[`Autosave > localStorage 1`] = `
+[
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "collapsible": false,
+    "currentValue": {
+      "type": "percent",
+      "value": "0.70081967213114754098",
+    },
+    "id": "1",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onCollapseChange": {},
+    "onResize": {},
+    "type": "panel",
+  },
+  {
+    "id": "resizer",
+    "size": {
+      "type": "pixel",
+      "value": "10",
+    },
+    "type": "handle",
+  },
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "collapsible": false,
+    "currentValue": {
+      "type": "percent",
+      "value": "0.29918032786885245902",
+    },
+    "id": "2",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onCollapseChange": {},
+    "onResize": {},
+    "type": "panel",
+  },
+]
+`;

package/src/bundle.size.ts

@@ -0,0 +1,4 @@
+import * as windowSplitter from "./ReactWindowSplitter.js";
+
+// eslint-disable-next-line no-console
+console.log(windowSplitter);

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./ReactWindowSplitter.js";
+export { PanelHandle, PanelGroupHandle } from "@window-splitter/interface";

package/src/useIndexedChildren.tsx

@@ -0,0 +1,79 @@
+// File largely copied from https://github.com/souporserious/reforest
+
+import * as React from "react";
+
+const IndexContext = React.createContext<string | null>(null);
+
+/**
+ * Parses a numerical dot-separated string as an index path.
+ *
+ * @example
+ * parseIndexPath('0.10.2') -> [0, 10, 2]
+ */
+function parseIndexPath(indexPathString: string) {
+  return indexPathString.split(".").map((index) => parseInt(index, 10));
+}
+
+/** Returns the index path data based on the closest useIndexedChildren. */
+export function useIndex() {
+  const indexPathString = React.useContext(IndexContext);
+
+  return React.useMemo(() => {
+    if (indexPathString === null) {
+      throw new Error("Panels/PanelResizers must be used within a PanelGroup");
+    }
+
+    const indexPath = parseIndexPath(indexPathString);
+    return { index: indexPath[indexPath.length - 1]! };
+  }, [indexPathString]);
+}
+
+function flattenChildren(children: React.ReactNode[]): React.ReactNode[] {
+  const flattenedChildren = children.flatMap((child) => {
+    // For fragments we want to get rid of those so the children are flat
+    if (React.isValidElement(child) && child.type === React.Fragment) {
+      return flattenChildren(child.props.children);
+    }
+
+    return child;
+  });
+
+  return flattenedChildren.map((child, index) => {
+    if (!React.isValidElement(child)) return child;
+
+    // We then correct the keys for the order of the children
+    // eslint-disable-next-line @eslint-react/no-clone-element
+    return React.cloneElement(child, {
+      // eslint-disable-next-line @eslint-react/no-array-index-key
+      key: `.${index}`,
+    });
+  });
+}
+
+/** Provides the current index path for each child. */
+export function useIndexedChildren(childrenProp: React.ReactNode) {
+  const indexPathString = React.useContext(IndexContext);
+
+  return (
+    <>
+      {/* eslint-disable-next-line @eslint-react/no-children-to-array */}
+      {flattenChildren(React.Children.toArray(childrenProp)).map(
+        (child, index) => {
+          if (!React.isValidElement(child)) return child;
+          return (
+            <IndexContext.Provider
+              key={child.key}
+              value={
+                indexPathString
+                  ? `${indexPathString}.${index.toString()}`
+                  : index.toString()
+              }
+            >
+              {child}
+            </IndexContext.Provider>
+          );
+        }
+      )}
+    </>
+  );
+}

package/src/useMove.ts

@@ -0,0 +1,22 @@
+import { useEffectEvent } from "@react-aria/utils";
+import { move, MoveEvents } from "@window-splitter/interface";
+import { useMemo } from "react";
+
+export function useMove({ onMoveStart, onMove, onMoveEnd }: MoveEvents) {
+  const onMoveStartEvent = useEffectEvent(onMoveStart);
+  const onMoveEvent = useEffectEvent(onMove);
+  const onMoveEndEvent = useEffectEvent(onMoveEnd);
+
+  return useMemo(() => {
+    return move({
+      onMoveStart: onMoveStartEvent,
+      onMove: onMoveEvent,
+      onMoveEnd: onMoveEndEvent,
+    }) as unknown as {
+      moveProps: {
+        onPointerDown: (e: React.PointerEvent) => void;
+        onKeyDown: (e: React.KeyboardEvent) => void;
+      };
+    };
+  }, [onMoveStartEvent, onMoveEvent, onMoveEndEvent]);
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["@testing-library/jest-dom"]
+  }
+}

package/vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    setupFiles: ["./vitest.setup.ts"],
+    coverage: {
+      provider: "istanbul",
+      include: ["**/*.tsx", "!**/*.stories.tsx", "!**/*.test.tsx"],
+      reporter: ["text", "html", "json-summary", "json"],
+      reportOnFailure: true,
+    },
+    browser: {
+      enabled: true,
+      provider: "playwright",
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});