RuleBuilder

Code

import { RuleBuilder, type RuleDefinition } from "@fadymondy/nasaq/web";import { useState } from "react";const events = [{ id: "order.created", label: "an order is placed" }];const fields = [{ id: "amount", label: "Amount", kind: "number" as const }];const actionTypes = [{ id: "email", label: "Send an email", fields: [{ name: "to", label: "To", kind: "text" as const, required: true }] }];export function Rule() {  const [rule, setRule] = useState<RuleDefinition | undefined>();  return <RuleBuilder events={events} fields={fields} actionTypes={actionTypes} value={rule} onValueChange={(next) => setRule(next)} />;}

Workflow · beta

Live examples and controls: RuleBuilder in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/rule-builder.json

For automations that fit "when this happens, if these are true, do that". Choose the event, build conditions as groups that match all or any of their members (groups nest), and stack the actions. A sentence at the top reads the rule back ("When an order is placed, if Amount is greater than 100 and Country is Saudi Arabia, then send an email"), in English or Arabic, so the rule can be checked at a glance. What is still missing is listed. The builder edits a RuleDefinition you store; evaluateConditions runs the condition tree against a record if you want to evaluate it.

When to useCopy Anchor Link

• Notification rules, routing, automations, filters: anything with one trigger and a yes/no test.
• Non-technical people configuring behaviour.

When not to useCopy Anchor Link

• Branching flows, loops and merges: use workflow-canvas or step-editor.
• A saved search over a table: use filter-builder.

ImportCopy Anchor Link

import { RuleBuilder } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { RuleBuilder, type RuleDefinition } from "@fadymondy/nasaq/web";
import { useState } from "react";

const events = [{ id: "order.created", label: "an order is placed" }];
const fields = [{ id: "amount", label: "Amount", kind: "number" as const }];
const actionTypes = [{ id: "email", label: "Send an email", fields: [{ name: "to", label: "To", kind: "text" as const, required: true }] }];

export function Rule() {
  const [rule, setRule] = useState<RuleDefinition | undefined>();
  return <RuleBuilder events={events} fields={fields} actionTypes={actionTypes} value={rule} onValueChange={(next) => setRule(next)} />;
}

AnatomyCopy Anchor Link

RuleBuilder               data-slot="rule-builder"
├─ summary sentence       data-slot="rule-summary", aria-live polite
├─ Alert                  what is still missing
├─ 1 When                 event Select
├─ 2 If                   group (role="group"): Match all / any, condition rows, nested groups
│  └─ condition row       field, operator, value
└─ 3 Then                 Repeater of actions with fields from the action type

APICopy Anchor Link

HelpersCopy Anchor Link

emptyRule, validateRule, evaluateConditions(group, data, fields), describeRule are exported and pure.

ExamplesCopy Anchor Link

Save only when nothing is missing:

<RuleBuilder events={events} fields={fields} actionTypes={actionTypes} onValueChange={(rule, issues) => setCanSave(issues.length === 0)} />

AccessibilityCopy Anchor Link

Every group has role="group" with its match mode as the name. The sentence is a polite live region. Problems are listed as text. Remove buttons carry names.

RTL & i18nCopy Anchor Link

• The whole builder mirrors; the sentence uses dir="auto".
• Operators, "all of these", "if" and "then" ship in English and Arabic; event, field and action names come from your data.
• Numbers stay left-to-right.

Styling & tokensCopy Anchor Link

• Nested groups get --nq-surface-soft. Extend with className; never pass raw hex.

Do / Don'tCopy Anchor Link

• Do name events, fields and actions in the user's words.
• Do validate again where the rule runs.
• Don't nest deeper than three levels; nobody can read it.

RelatedCopy Anchor Link

• workflow-canvas
• step-editor
• cron-builder

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-workflow-rule-builder--docs