@bernierllc/nevar-rule-builder-ui

React components for building and managing Nevar rules, including condition tree editing, action configuration, trigger selection, and rule preview.

Installation

npm install @bernierllc/nevar-rule-builder-ui

Usage

Full Rule Builder

The NevarRuleBuilder composes all sub-components into a complete rule management page.

import { NevarRuleBuilder } from '@bernierllc/nevar-rule-builder-ui';

function RulesPage() {
  return (
    <NevarRuleBuilder
      apiOptions={{ baseUrl: '/api/nevar', groupId: 'my-group' }}
      systemAllowsLoops={true}
    />
  );
}

Individual Components

Each sub-component can be used independently for custom layouts.

import {
  ConditionTreeEditor,
  ActionConfigurator,
  TriggerSelector,
  RulePreview,
  LoopOptInToggle,
  useNevarApi,
} from '@bernierllc/nevar-rule-builder-ui';

function CustomRuleEditor() {
  const api = useNevarApi({ baseUrl: '/api/nevar' });

  const [trigger, setTrigger] = useState('');
  const [conditions, setConditions] = useState({ operator: 'AND', conditions: [] });
  const [actions, setActions] = useState([]);
  const [allowLoop, setAllowLoop] = useState(false);

  return (
    <div>
      <TriggerSelector
        triggers={api.triggers}
        value={trigger}
        onChange={setTrigger}
      />
      <ConditionTreeEditor
        value={conditions}
        onChange={setConditions}
        operators={api.operators}
      />
      <ActionConfigurator
        actions={actions}
        onChange={setActions}
        actionTypes={api.actionTypes}
      />
      <LoopOptInToggle
        allowLoop={allowLoop}
        onChange={setAllowLoop}
        systemAllowsLoops={true}
      />
      <RulePreview
        triggerKey={trigger}
        onPreview={api.previewRule}
      />
    </div>
  );
}

API

NevarRuleBuilder

Full rule management page composing all sub-components.

| Prop | Type | Description | |------|------|-------------| | apiOptions | UseNevarApiOptions | Configuration for the Nevar API connection (baseUrl, optional groupId, optional headers). | | systemAllowsLoops | boolean | Whether the system-level configuration allows loops. Defaults to false. |

ConditionTreeEditor

Recursive editor for condition trees with AND/OR/NOT groups.

| Prop | Type | Description | |------|------|-------------| | value | ConditionGroup | The root condition group to edit. | | onChange | (value: ConditionGroup) => void | Called when the condition tree changes. | | operators | OperatorInfo[] | Available operators for the operator dropdown. | | depth | number | Current nesting depth (used internally). |

ActionConfigurator

Manages a list of actions with add, remove, and reorder controls.

| Prop | Type | Description | |------|------|-------------| | actions | ActionDefinition[] | List of actions to configure. | | onChange | (actions: ActionDefinition[]) => void | Called when the action list changes. | | actionTypes | string[] | Available action types from the registry. |

TriggerSelector

Dropdown selector for triggers, grouped by category.

| Prop | Type | Description | |------|------|-------------| | triggers | TriggerDefinition[] | Available triggers to select from. | | value | string | Currently selected trigger key. | | onChange | (triggerKey: string) => void | Called when the selected trigger changes. |

RulePreview

Previews rule matches against a trigger payload, displaying resulting action intents.

| Prop | Type | Description | |------|------|-------------| | triggerKey | string | Trigger key to preview against. | | onPreview | (triggerKey: string, payload: Record<string, unknown>) => Promise<PreviewResult> | Function that calls the preview API. |

LoopOptInToggle

Toggle for the allowLoop flag on a rule. Hidden when the system does not allow loops.

| Prop | Type | Description | |------|------|-------------| | allowLoop | boolean | Whether the rule allows loops. | | onChange | (allowLoop: boolean) => void | Called when the toggle changes. | | systemAllowsLoops | boolean | When false, the toggle is hidden. |

useNevarApi

Hook for connecting to the Nevar API. Returns operators, triggers, action types, rules, and CRUD methods.

| Option | Type | Description | |--------|------|-------------| | baseUrl | string | Base URL of the Nevar API. | | groupId | string | Optional group ID to scope operations. | | headers | Record<string, string> | Optional headers to include in requests. |

Integration Documentation

Logger Integration

As a UI package, @bernierllc/nevar-rule-builder-ui does not directly integrate with @bernierllc/logger. Logging is handled by the service-layer packages that power the data these components display.

NeverHub Integration

As a UI package, @bernierllc/nevar-rule-builder-ui does not directly integrate with @bernierllc/neverhub-adapter. NeverHub registration is handled at the service layer.

License

Copyright (c) 2025 Bernier LLC. All rights reserved.