Props & API Reference

Complete reference for the DataLogicEditor component and related exports.

DataLogicEditor Props

Required Props

value

The JSONLogic expression to render.

value: JsonLogicValue | null

Accepts any valid JSONLogic expression or null for an empty state.

// Simple expression
<DataLogicEditor value={{ "==": [1, 1] }} />

// Complex expression
<DataLogicEditor value={{
  "and": [
    { ">=": [{ "var": "age" }, 18] },
    { "var": "active" }
  ]
}} />

// Null for empty state
<DataLogicEditor value={null} />

Optional Props

mode

The editor mode.

mode?: 'visualize' | 'debug' | 'edit'

Default: 'visualize'

<DataLogicEditor value={expr} mode="debug" />

data

Data context for evaluation (required for debug mode).

data?: unknown

<DataLogicEditor
  value={{ "var": "user.name" }}
  data={{ user: { name: "Alice" } }}
  mode="debug"
/>

onChange

Callback when expression changes (for future edit mode).

onChange?: (expression: JsonLogicValue | null) => void

// Future usage
<DataLogicEditor
  value={expression}
  onChange={setExpression}
  mode="edit"
/>

theme

Theme override.

theme?: 'light' | 'dark'

Default: System preference

<DataLogicEditor value={expr} theme="dark" />

className

Additional CSS class for the container.

className?: string

<DataLogicEditor value={expr} className="my-editor" />

Type Definitions

JsonLogicValue

The type for JSONLogic expressions:

type JsonLogicValue =
  | string
  | number
  | boolean
  | null
  | JsonLogicValue[]
  | { [operator: string]: JsonLogicValue };

DataLogicEditorMode

type DataLogicEditorMode = 'visualize' | 'debug' | 'edit';

DataLogicEditorProps

interface DataLogicEditorProps {
  value: JsonLogicValue | null;
  onChange?: (expression: JsonLogicValue | null) => void;
  data?: unknown;
  mode?: DataLogicEditorMode;
  theme?: 'light' | 'dark';
  className?: string;
}

LogicNode

Internal node type (for advanced customization):

interface LogicNode {
  id: string;
  type: string;
  position: { x: number; y: number };
  data: {
    label: string;
    category: OperatorCategory;
    value?: unknown;
    result?: unknown;
  };
}

LogicEdge

Internal edge type:

interface LogicEdge {
  id: string;
  source: string;
  target: string;
  sourceHandle?: string;
  targetHandle?: string;
}

OperatorCategory

type OperatorCategory =
  | 'logical'
  | 'comparison'
  | 'arithmetic'
  | 'string'
  | 'array'
  | 'control'
  | 'variable'
  | 'literal'
  | 'datetime'
  | 'misc';

Exports

Component

import { DataLogicEditor } from '@goplasmatic/datalogic-ui';

Types

import type {
  DataLogicEditorProps,
  DataLogicEditorMode,
  JsonLogicValue,
  LogicNode,
  LogicEdge,
  OperatorCategory,
} from '@goplasmatic/datalogic-ui';

Constants

import { OPERATORS, CATEGORY_COLORS } from '@goplasmatic/datalogic-ui';

OPERATORS: Map of operator names to their metadata (category, label, etc.)

CATEGORY_COLORS: Color definitions for each operator category

Utilities

import { jsonLogicToNodes, applyTreeLayout } from '@goplasmatic/datalogic-ui';

jsonLogicToNodes: Convert JSONLogic expression to React Flow nodes/edges

const { nodes, edges } = jsonLogicToNodes(expression, traceData?);

applyTreeLayout: Apply dagre tree layout to nodes

const layoutedNodes = applyTreeLayout(nodes, edges, direction?);

Utility Functions

jsonLogicToNodes

Convert a JSONLogic expression to React Flow nodes and edges.

function jsonLogicToNodes(
  expression: JsonLogicValue,
  trace?: TraceData
): { nodes: LogicNode[]; edges: LogicEdge[] }

Parameters:

• expression - JSONLogic expression to convert
• trace - Optional trace data for debug mode

Returns: Object with nodes and edges arrays

Example:

import { jsonLogicToNodes } from '@goplasmatic/datalogic-ui';

const expr = { "==": [{ "var": "x" }, 1] };
const { nodes, edges } = jsonLogicToNodes(expr);

console.log(nodes);
// [
//   { id: '0', type: 'operator', data: { label: '==', category: 'comparison' }, ... },
//   { id: '1', type: 'variable', data: { label: 'x', category: 'variable' }, ... },
//   { id: '2', type: 'literal', data: { label: '1', category: 'literal' }, ... }
// ]

applyTreeLayout

Apply dagre-based tree layout to nodes.

function applyTreeLayout(
  nodes: LogicNode[],
  edges: LogicEdge[],
  direction?: 'TB' | 'LR'
): LogicNode[]

Parameters:

• nodes - Array of nodes
• edges - Array of edges
• direction - Layout direction (default: 'TB' for top-to-bottom)

Returns: Nodes with updated positions

Advanced Usage

Custom Node Rendering

For advanced customization, you can use the utilities to render with your own React Flow setup:

import { ReactFlow } from '@xyflow/react';
import { jsonLogicToNodes, applyTreeLayout } from '@goplasmatic/datalogic-ui';

function CustomEditor({ expression }) {
  const { nodes: rawNodes, edges } = jsonLogicToNodes(expression);
  const nodes = applyTreeLayout(rawNodes, edges);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={customNodeTypes}
      // Custom configuration...
    />
  );
}

Accessing Category Colors

import { CATEGORY_COLORS } from '@goplasmatic/datalogic-ui';

// Use in custom styling
const logicalColor = CATEGORY_COLORS.logical;  // e.g., '#4CAF50'

Next Steps

• Customization - Theming and styling options