@principal-ai/subsystems-react 0.53.5 → 0.54.0

package/src/subsystem/GraphWithSidebar.test.tsx

@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { createElement } from 'react';
+import { Window } from 'happy-dom';
+import { cleanup, render } from '@testing-library/react/pure';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { GraphWithSidebar, GraphSidebar } from './GraphWithSidebar';
+
+// Bun's happy-dom test environment isn't registered (no @happy-dom/global-
+// registrator), so wire the DOM primitives React DOM needs before rendering.
+const dom = new Window();
+const globals = globalThis as unknown as Record<string, unknown>;
+globals.window = dom;
+globals.document = dom.document;
+globals.navigator = dom.navigator;
+globals.HTMLElement = dom.HTMLElement;
+globals.Node = dom.Node;
+globals.Element = dom.Element;
+globals.Event = dom.Event;
+globals.getComputedStyle = dom.getComputedStyle.bind(dom);
+globals.requestAnimationFrame = dom.requestAnimationFrame.bind(dom);
+globals.cancelAnimationFrame = dom.cancelAnimationFrame.bind(dom);
+globals.localStorage = dom.localStorage;
+globals.matchMedia = dom.matchMedia.bind(dom);
+
+afterEach(cleanup);
+
+function renderWrapper(props: Record<string, unknown>) {
+  return render(
+    createElement(
+      ThemeProvider,
+      { theme: defaultEditorTheme },
+      createElement(GraphWithSidebar as never, props as never),
+    ),
+  );
+}
+
+describe('GraphWithSidebar composition', () => {
+  test('composes GraphSidebar next to graph content', () => {
+    const { getByText, getByLabelText } = renderWrapper({
+      header: createElement('span', null, 'title'),
+      sidebarBody: createElement('span', null, 'panel'),
+      children: createElement('div', null, 'canvas'),
+    });
+    expect(getByText('title')).toBeTruthy();
+    expect(getByText('panel')).toBeTruthy();
+    expect(getByText('canvas')).toBeTruthy();
+    expect(getByLabelText('Resize sidebar')).toBeTruthy();
+  });
+
+  test('hidden renders only the content — no sidebar, no handle', () => {
+    const { queryByLabelText, getByText } = renderWrapper({
+      hidden: true,
+      header: createElement('span', null, 'title'),
+      children: createElement('div', null, 'canvas'),
+    });
+    expect(getByText('canvas')).toBeTruthy();
+    expect(queryByLabelText('Resize sidebar')).toBeNull();
+    expect(() => getByText('title')).toThrow();
+  });
+
+  test('wrapper exposes GraphSidebar as its own export', () => {
+    expect(GraphSidebar).toBeTypeOf('function');
+  });
+
+  test('the content slot is a flex column so a flex-filling child can size', () => {
+    // The component graph's canvas fills the pane with `flex: 1 1 0%`, which
+    // only resolves against a flex parent — a block slot collapses it to 0 and
+    // the canvas renders blank.
+    const { container } = renderWrapper({
+      sidebarBody: createElement('span', null, 'panel'),
+      children: createElement('div', null, 'canvas'),
+    });
+    const root = container.firstElementChild as HTMLElement;
+    const content = root.lastElementChild as HTMLElement;
+    expect(content.style.display).toBe('flex');
+    expect(content.style.flexDirection).toBe('column');
+  });
+});

package/src/subsystem/GraphWithSidebar.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { GraphSidebar } from './GraphSidebar';
+import type { GraphSidebarProps } from './GraphSidebar';
+
+/**
+ * GraphWithSidebar — a graph laid out beside its own sidebar.
+ *
+ * A flex row: `[GraphSidebar][graph content]`. The sidebar is the standalone
+ * `GraphSidebar` panel (its right edge is the resize handle, and it owns the
+ * width drag + persistence); this component only composes it next to a graph
+ * and locks the row against text selection while a resize is in progress.
+ *
+ * Every sidebar prop is forwarded straight to `GraphSidebar`: `header`,
+ * `tabs`/`activeTab`/`onTabChange`, `sidebarBody`, `footer`, `hidden`,
+ * `bodyHidden`, `stretchHeader`, `width`/`onWidthChange`, `defaultWidth`,
+ * `minWidth`/`maxWidth`, `onResizeEnd`, `persistKey`. See GraphSidebar for the
+ * semantics.
+ */
+
+export interface GraphWithSidebarProps extends GraphSidebarProps {
+  /** The graph content to the right of the sidebar. */
+  children?: ReactNode;
+}
+
+export { GraphSidebar } from './GraphSidebar';
+export type { GraphSidebarProps, GraphSidebarTab } from './GraphSidebar';
+
+export function GraphWithSidebar({ children, ...sidebarProps }: GraphWithSidebarProps) {
+  const [dragging, setDragging] = useState(false);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        userSelect: dragging ? 'none' : undefined,
+      }}
+    >
+      <GraphSidebar {...sidebarProps} onDraggingChange={setDragging} />
+      <div
+        style={{
+          flex: 1,
+          minWidth: 0,
+          position: 'relative',
+          minHeight: 0,
+          // A flex column so a child that fills the pane with flex-grow (the
+          // component graph's canvas tree) resolves against a real flex
+          // parent instead of collapsing to 0.
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}