@neo4j-ndl/react-graph 0.0.2

package/lib/types/stories/story-data.d.ts

@@ -0,0 +1,26 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type NeoNode, type NeoRel } from '../graph-visualization-context';
+export declare const StoryGraph: {
+    nodes: NeoNode[];
+    rels: NeoRel[];
+};
+export declare const containerClasses = "n-w-full n-border-palette-neutral-border-weak n-mx-2 n-rounded-lg n-border";

package/lib/types/use-managed-node-state.d.ts

@@ -0,0 +1,116 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type HitTargets, type Node, type Relationship } from '@neo4j-nvl/base';
+import { type MouseEventCallbacks } from '@neo4j-nvl/react';
+import { type Gesture, type GraphSelection, type InteractionMode } from './graph-visualization-context';
+export type ManagedNodeStateArgs = {
+    selected: GraphSelection;
+    setSelected: (newSelection: GraphSelection) => void;
+    gesture: Gesture;
+    interactionMode: InteractionMode;
+    setInteractionMode: (newInteractionMode: InteractionMode) => void;
+    mouseEventCallbacks: MouseEventCallbacks;
+    nvlGraph: {
+        nodes: Node[];
+        rels: Relationship[];
+    };
+    highlightedNodeIds?: string[];
+    highlightedRelationshipIds?: string[];
+};
+export declare function useManagedNodeState({ selected, setSelected, gesture, interactionMode, setInteractionMode, mouseEventCallbacks, nvlGraph, highlightedNodeIds, highlightedRelationshipIds, }: ManagedNodeStateArgs): {
+    nodesWithState: {
+        disabled: boolean;
+        selected: boolean;
+        size?: number;
+        pinned?: boolean;
+        x?: number;
+        y?: number;
+        activated?: boolean;
+        icon?: string;
+        html?: HTMLElement;
+        id: string;
+        color?: string;
+        caption?: string;
+        hovered?: boolean;
+        captionSize?: number;
+        captionAlign?: "top" | "bottom" | "center";
+        captions?: import("@neo4j-nvl/base").StyledCaption[];
+        overlayIcon?: {
+            url: string;
+            position?: number[];
+            size?: number;
+        };
+    }[];
+    relsWithState: {
+        disabled: boolean;
+        selected: boolean;
+        from: string;
+        to: string;
+        type?: string;
+        width?: number;
+        captionHtml?: HTMLElement;
+        id: string;
+        color?: string;
+        caption?: string;
+        hovered?: boolean;
+        captionSize?: number;
+        captionAlign?: "top" | "bottom" | "center";
+        captions?: import("@neo4j-nvl/base").StyledCaption[];
+        overlayIcon?: {
+            url: string;
+            position?: number[];
+            size?: number;
+        };
+    }[];
+    wrappedMouseEventCallbacks: {
+        onBoxSelect: boolean | (({ nodes, rels }: {
+            nodes: Node[];
+            rels: Relationship[];
+        }, evt: MouseEvent) => void);
+        onBoxStarted: boolean | ((event: MouseEvent) => void) | undefined;
+        onCanvasClick: boolean | ((evt: MouseEvent) => void);
+        onDragEnd: boolean | ((draggedNodes: Node[], evt: MouseEvent) => void);
+        onDragStart: boolean | ((draggedNodes: Node[], evt: MouseEvent) => void);
+        onDrawEnded: boolean | ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void);
+        onDrawStarted: boolean | ((evt: MouseEvent) => void);
+        onHover: boolean | ((element: Node | Relationship, hitElements: HitTargets, event: MouseEvent) => void) | undefined;
+        onHoverNodeMargin: boolean | ((hoveredNode: Node | null, evt: MouseEvent) => void) | undefined;
+        onLassoSelect: boolean | (({ nodes, rels }: {
+            nodes: Node[];
+            rels: Relationship[];
+        }, evt: MouseEvent) => void);
+        onLassoStarted: boolean | ((event: MouseEvent) => void) | undefined;
+        onNodeClick: boolean | ((node: Node, hitElements: HitTargets, evt: MouseEvent) => void);
+        onNodeDoubleClick: boolean | ((node: Node, hitElements: HitTargets, evt: MouseEvent) => void);
+        onPan: boolean | ((panning: {
+            x: number;
+            y: number;
+        }, event: MouseEvent) => void);
+        onRelationshipClick: boolean | ((relationship: Relationship, hitElements: HitTargets, evt: MouseEvent) => void);
+        onRelationshipDoubleClick: boolean | ((relationship: Relationship, hitElements: HitTargets, evt: MouseEvent) => void);
+        onZoom: boolean | ((zoomLevel: number, event: WheelEvent) => void);
+        onCanvasDoubleClick?: ((event: MouseEvent) => void) | boolean;
+        onCanvasRightClick?: ((event: MouseEvent) => void) | boolean;
+        onNodeRightClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+        onRelationshipRightClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+        onDrag?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
+    };
+};

package/lib/types/use-semi-controlled-state.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+type SetStateAction<T> = T | ((prev: T) => T);
+export declare function useSemicontrolledState<T>(externalState: T, externalSetState?: (newState: T) => void): [T, (setState: SetStateAction<T>) => void];
+export {};

package/lib/types/utils.d.ts

@@ -0,0 +1,29 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type NodeData, type RelData } from './graph-visualization-context';
+export declare const isMac: boolean;
+export declare const xor: (a: string[], b: string[]) => string[];
+export declare const mapValues: <T, R>(obj: Record<string, T>, fn: (value: T) => R) => Record<string, R>;
+export declare const searchProperties: (properties: Record<string, {
+    stringified: string;
+}>, text: string) => boolean;
+export declare const searchNodes: (nodes: NodeData[], text: string) => string[];
+export declare const searchRels: (rels: RelData[], text: string) => string[];

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@neo4j-ndl/react-graph",
+  "version": "0.0.2",
+  "sideEffects": false,
+  "description": "React implementation of the graph visualization from Neo4j Design System",
+  "keywords": [
+    "neo4j",
+    "react",
+    "design system",
+    "needle",
+    "ndl",
+    "graph"
+  ],
+  "author": "Neo4j Inc.",
+  "homepage": "https://www.neo4j.design",
+  "license": "GPL-3.0",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "files": [
+    "lib",
+    "icons"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "4.9.0",
+    "@playwright/experimental-ct-react": "1.55.1",
+    "@playwright/test": "1.55.1",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "14.3.1",
+    "@types/react": "18.2.18",
+    "@types/react-dom": "18.2.7",
+    "@storybook/react-vite": "9.0.11",
+    "@neo4j-devtools/word-color": "0.0.8",
+    "@vitejs/plugin-react": "4.5.2",
+    "react": "18.2.0",
+    "typescript": "5.5.4",
+    "vitest": "2.1.9"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "@neo4j-nvl/base": "^1.0.0",
+    "@neo4j-nvl/interaction-handlers": "^1.0.0",
+    "@neo4j-nvl/react": "^1.0.0",
+    "@neo4j-ndl/base": "^3.7.33",
+    "@neo4j-ndl/react": "^3.9.21"
+  },
+  "dependencies": {
+    "classnames": "2.5.1",
+    "re-resizable": "6.11.2"
+  },
+  "scripts": {
+    "test": "pnpm run test:unit && pnpm run test:playwright",
+    "test:unit": "pnpm exec vitest --run --typecheck --exclude node_modules",
+    "test:playwright": "pnpm exec playwright test",
+    "build": "pnpm run build:esm && pnpm run build:cjs && pnpm run build:types",
+    "build:esm": "pnpm exec tsc -p tsconfig.esm.json",
+    "build:cjs": "pnpm exec tsc -p tsconfig.cjs.json",
+    "watch:esm": "pnpm exec tsc -p tsconfig.esm.json --watch",
+    "watch:cjs": "pnpm exec tsc -p tsconfig.cjs.json --watch",
+    "build:types": "pnpm exec tsc -p tsconfig.types.json",
+    "format": "pnpm exec prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint": "pnpm exec eslint src",
+    "nuke:local": "../../scripts/cc.sh '{yellow ☢️} Nuking react-graph! {yellow ☢️}' && pnpm dlx rimraf@5.0.5 .tsbuildinfo node_modules lib playwright-report test-results playwright/.cache"
+  }
+}