# HierarchyFlow Group Editor

## Installation

```bash
npm install https://cdn.cloud.peaksecurity.de/hierarchyflow-group-editor/0.0.22.tgz
```

## Requirements

- **Tailwind CSS**: This component uses Tailwind CSS for styling. Ensure your host app provides Tailwind.
- **ReactFlow Styles**: Import ReactFlow styles in your app.

## Usage

```tsx
import GroupEditor from 'hierarchyflow-group-editor';
import { transformJsonToGraph, GroupData } from 'hierarchyflow-group-editor';
import 'reactflow/dist/style.css';

function App() {
  const groupData: GroupData = {
    id: 'root-group-id',
    name: 'My Organization',
    type: 'Organization',
    mode: 'edit'
  };

  // Transform your JSON data to nodes/edges
  const { nodes, edges } = transformJsonToGraph(yourData);

  const handleFetchMembers = async (nodeId, nodeName, page, query, inclusive) => {
    // Fetch members from your API
    const response = await fetch(`/api/groups/${nodeId}/members?page=${page}&q=${query}&inclusive=${inclusive}`);
    return response.json();
  };

  return (
    <GroupEditor
      localKey="org-editor"
      groupData={groupData}
      nodes={nodes}
      edges={edges}
      onSave={handleSave}
      onExport={handleExport}
      isValidated={true}
      onFetchMembers={handleFetchMembers}
    />
  );
}
```

## Props

- `localKey` - Unique key for the editor instance
- `groupData` - Group metadata (id, name, type, mode)
- `nodes` - Initial React Flow nodes
- `edges` - Initial React Flow edges
- `onSave` - Called when user saves the hierarchy
- `onExport` - Called when user exports the hierarchy
- `isValidated` - Whether the graph is validated
- `enableForce` - Enable force-directed layout (optional)
- `onFetchMembers` - Async function to fetch member data for nodes
- `icons` - Custom icon map to override default icons
