---
Create complex business rules with an intuitive drag-and-drop interface. No more JSON wrestling - build rules visually and export to your rule engine.
```typescript
// Instead of writing complex JSON...
const rule = {
conditions: [
{
and: [
{ field: "$.user.tier", operator: "equals", value: "premium" },
{ field: "$.order.total", operator: "greater-than", value: 100 }
],
result: { discount: 0.15, shipping: "free" }
}
]
};
// Just drag, drop, and configure visually! ๐จ
Build Your Business Rules
{rule && (
Generated Rule:
{JSON.stringify(rule, null, 2)}
testRule()}>
Test Rule
)}
);
async function testRule() {
if (!rule) return;
const result = await RuleEngine.evaluate(rule, testData);
console.log('Rule Result:', result);
}
}
```
## ๐๏ธ Core Components
### RuleBuilder (Main Component)
The primary visual rule construction interface.
```tsx
Discount Rule Builder
Access Control Rules
{
console.log('Access Decision:', result);
}}
/>
);
}
```
### Form Validation Builder
```tsx
function ValidationBuilder() {
const [validationRules, setValidationRules] = useState([]);
const formFields = [
{ name: 'email', type: 'string', label: 'Email Address' },
{ name: 'password', type: 'string', label: 'Password' },
{ name: 'confirmPassword', type: 'string', label: 'Confirm Password' },
{ name: 'age', type: 'number', label: 'Age' },
{ name: 'country', type: 'string', label: 'Country' },
{ name: 'acceptTerms', type: 'boolean', label: 'Accept Terms' }
];
return (
Form Validation Rules
{validationRules.map((rule, index) => (
Rule {index + 1}
{
const updated = [...validationRules];
updated[index] = newRule;
setValidationRules(updated);
}}
availableFields={formFields}
mode="validation"
showPreview={false}
/>
))}
addValidationRule()}>
Add Validation Rule
);
}
```
## ๐จ Advanced Features
### Custom Themes
```tsx
const customTheme = {
colors: {
primary: '#6366f1',
secondary: '#10b981',
background: '#f8fafc',
surface: '#ffffff',
text: '#1f2937',
border: '#e5e7eb'
},
spacing: {
sm: '0.5rem',
md: '1rem',
lg: '1.5rem'
},
borderRadius: '0.75rem',
shadows: {
sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
md: '0 4px 6px rgba(0, 0, 0, 0.1)'
}
};
{
console.log('New field discovered:', field);
}}
/>
```
### History Management
```tsx
function RuleBuilderWithHistory() {
const [rule, setRule] = useState(null);
const { history, undo, redo, canUndo, canRedo } = useRuleHistory();
return (
โถ Undo
โท Redo
Step {history.currentIndex + 1} of {history.entries.length}
);
}
```
### Keyboard Shortcuts
The builder supports professional keyboard navigation:
| Shortcut | Action |
|----------|--------|
| `Ctrl+Z` | Undo last change |
| `Ctrl+Y` | Redo last undone change |
| `Ctrl+D` | Duplicate selected component |
| `Delete` | Remove selected component |
| `Tab` | Navigate between components |
| `Enter` | Edit selected component |
| `Escape` | Cancel current operation |
| `Ctrl+S` | Export rule (custom handler) |
## ๐๏ธ Performance & Optimization
### Virtual Scrolling
For large rule sets, the builder uses virtual scrolling:
```tsx
Loading rule builder...}>
);
}
```
### Optimized Rendering
```tsx
// Use memo for expensive field calculations
const availableFields = useMemo(() =>
generateFieldsFromSchema(schema), [schema]
);
// Debounce rule changes to reduce re-renders
const debouncedOnChange = useMemo(
() => debounce(setRule, 300),
[]
);
{
id: string;
conditions: Condition[];
result?: T;
metadata?: {
name: string;
description: string;
created: Date;
modified: Date;
};
}
// Type-safe rule builder
const Builder = () => {
const [rule, setRule] = useState>(null);
return (
rule={rule}
onRuleChange={setRule}
availableFields={typedFields}
resultType="discount"
/>
);
};
```
## ๐งช Testing Components
```tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { RuleBuilder } from '@usex/rule-engine-builder';
describe('RuleBuilder', () => {
const mockFields = [
{ name: 'age', type: 'number', label: 'Age' },
{ name: 'country', type: 'string', label: 'Country' }
];
it('should render field palette', () => {
render(
**Built with โค๏ธ for modern React applications**
[โญ Star us on GitHub](https://github.com/ali-master/rule-engine) โข [๐ Report Issues](https://github.com/ali-master/rule-engine/issues) โข [๐ฌ Discussions](https://github.com/ali-master/rule-engine/discussions)
