@wealthx/shadcn 1.5.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -16,7 +16,8 @@
   "dependencies": {
     "@base-ui/react": "^1.3.0",
     "@fontsource-variable/figtree": "^5.2.10",
-    "@tanstack/react-table": "^8.21.3",
+    "@react-awesome-query-builder/ui": "6.7.0-alpha.0",
+    "@tanstack/react-table": "8.21.3",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.1",
@@ -503,9 +504,9 @@
       "require": "./dist/components/ui/review-alerts-dialog.js"
     },
     "./contact-alert-dialog": {
-      "types": "./src/components/ui/contact-alert-dialog.tsx",
-      "import": "./dist/components/ui/contact-alert-dialog.mjs",
-      "require": "./dist/components/ui/contact-alert-dialog.js"
+      "types": "./src/components/ui/contact-alert-dialog/index.tsx",
+      "import": "./dist/components/ui/contact-alert-dialog/index.mjs",
+      "require": "./dist/components/ui/contact-alert-dialog/index.js"
     },
     "./share-details-dialog": {
       "types": "./src/components/ui/share-details-dialog.tsx",

package/src/components/index.tsx

@@ -461,6 +461,8 @@ export {
   ContactAlertQueryBuilder,
   ContactAlertDialog,
   ALERT_QUERY_FIELDS,
+  AlertSharingType,
+  createAlertTree,
 } from "./ui/contact-alert-dialog";
 export type {
   AlertQueryCombinator,
@@ -468,11 +470,10 @@ export type {
   AlertQueryFieldType,
   ContactAlertSeverity,
   AlertQueryField,
-  AlertQueryRule,
-  AlertQueryGroup,
   ContactAlertQueryBuilderProps,
   ContactAlertDialogProps,
 } from "./ui/contact-alert-dialog";
+export type { ImmutableTree, JsonGroup } from "@react-awesome-query-builder/ui";
 
 export {
   ShareDetailsDialog,

package/src/components/ui/contact-alert-dialog/builder-ui.tsx

@@ -0,0 +1,556 @@
+import * as React from "react";
+import { ChevronDownIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import {
+  Utils as QbUtils,
+  type Actions,
+  type ImmutableTree,
+  type JsonItem,
+} from "@react-awesome-query-builder/ui";
+import { Button } from "@/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@/components/ui/input-group";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import type { AlertQueryField, AlertQueryOperator } from "./types";
+import {
+  ALL_NUMERIC_OPERATORS,
+  BOOLEAN_OPERATORS,
+  OPERATOR_LABELS,
+} from "./config";
+import {
+  allOperatorLabels,
+  formatWithCommas,
+  longestOf,
+  parseCommas,
+  ruleSummary,
+} from "./utils";
+
+// ---------------------------------------------------------------------------
+// SelectAutoWidth
+// ---------------------------------------------------------------------------
+
+function SelectAutoWidth({
+  longestLabel,
+  children,
+}: {
+  longestLabel: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative inline-block shrink-0">
+      <span
+        aria-hidden
+        className="invisible block h-8 whitespace-nowrap pl-3 pr-10 text-body-medium"
+      >
+        {longestLabel}
+      </span>
+      <div className="absolute inset-0">{children}</div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ValueInput
+// ---------------------------------------------------------------------------
+
+function ValueInput({
+  value,
+  onChange,
+  unit,
+  placeholder = "0",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  unit?: "dollar" | "percent";
+  placeholder?: string;
+}) {
+  return (
+    <InputGroup className="w-36">
+      {unit === "dollar" && (
+        <InputGroupAddon align="inline-start">
+          <InputGroupText>$</InputGroupText>
+        </InputGroupAddon>
+      )}
+      <InputGroupInput
+        type="text"
+        inputMode="numeric"
+        value={formatWithCommas(value)}
+        onChange={(e) => onChange(parseCommas(e.target.value))}
+        placeholder={placeholder}
+      />
+      {unit === "percent" && (
+        <InputGroupAddon align="inline-end">
+          <InputGroupText>%</InputGroupText>
+        </InputGroupAddon>
+      )}
+    </InputGroup>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RuleEditorFields
+// ---------------------------------------------------------------------------
+
+function RuleEditorFields({
+  ruleProps,
+  path,
+  actions,
+  fields,
+  longestFieldLabel,
+  longestOperatorLabel,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ruleProps: any;
+  path: string[];
+  actions: Actions;
+  fields: AlertQueryField[];
+  longestFieldLabel: string;
+  longestOperatorLabel: string;
+}) {
+  const field: string = ruleProps?.field ?? fields[0]?.key ?? "";
+  const operator: string = ruleProps?.operator ?? "greater_or_equal";
+  const value0 = ruleProps?.value?.[0];
+  const value1 = ruleProps?.value?.[1];
+
+  const fieldDef = fields.find((f) => f.key === field) ?? fields[0];
+  const isBooleanField = fieldDef?.type === "boolean";
+  const availableOperators: AlertQueryOperator[] = isBooleanField
+    ? BOOLEAN_OPERATORS
+    : (fieldDef?.operators ?? ALL_NUMERIC_OPERATORS);
+
+  function handleFieldChange(key: string) {
+    actions.setField(path, key);
+  }
+
+  function handleOperatorChange(op: string) {
+    actions.setOperator(path, op);
+  }
+
+  function handleValueChange(idx: number, raw: string) {
+    const n = parseFloat(parseCommas(raw));
+    if (!isNaN(n)) {
+      actions.setValue(path, idx, n, "number");
+    } else if (!raw) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      actions.setValue(path, idx, null as any, "number");
+    }
+  }
+
+  function handleBoolChange(v: string) {
+    actions.setValue(path, 0, v === "true", "boolean");
+  }
+
+  const valStr = (v: unknown): string => {
+    if (v === null || v === undefined) return "";
+    return String(v);
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {/* Field */}
+      <SelectAutoWidth longestLabel={longestFieldLabel}>
+        <Select
+          value={field}
+          onValueChange={(v) => handleFieldChange(v as string)}
+        >
+          <SelectTrigger size="sm" className="w-full">
+            <SelectValue>
+              {fields.find((f) => f.key === field)?.label ?? field}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {fields.map((f) => (
+              <SelectItem key={f.key} value={f.key}>
+                {f.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectAutoWidth>
+
+      {/* Operator */}
+      <SelectAutoWidth longestLabel={longestOperatorLabel}>
+        <Select
+          value={operator}
+          onValueChange={(v) => handleOperatorChange(v as string)}
+        >
+          <SelectTrigger size="sm" className="w-full">
+            <SelectValue>
+              {OPERATOR_LABELS[operator as AlertQueryOperator] ?? operator}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {availableOperators.map((op) => (
+              <SelectItem key={op} value={op}>
+                {OPERATOR_LABELS[op]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectAutoWidth>
+
+      {/* Value */}
+      {isBooleanField ? (
+        <Select
+          value={String(value0 ?? true)}
+          onValueChange={(v) => handleBoolChange(v as string)}
+        >
+          <SelectTrigger size="sm" className="w-36">
+            <SelectValue>{(value0 ?? true) ? "Yes" : "No"}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="true">Yes</SelectItem>
+            <SelectItem value="false">No</SelectItem>
+          </SelectContent>
+        </Select>
+      ) : (
+        <>
+          <ValueInput
+            value={valStr(value0)}
+            onChange={(v) => handleValueChange(0, v)}
+            unit={fieldDef?.unit}
+          />
+          {operator === "between" && (
+            <>
+              <span className="text-xs text-muted-foreground">and</span>
+              <ValueInput
+                value={valStr(value1)}
+                onChange={(v) => handleValueChange(1, v)}
+                unit={fieldDef?.unit}
+              />
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RuleAccordionItem
+// ---------------------------------------------------------------------------
+
+function RuleAccordionItem({
+  ruleId,
+  ruleProps,
+  path,
+  actions,
+  fields,
+  longestFieldLabel,
+  longestOperatorLabel,
+  removable,
+}: {
+  ruleId: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ruleProps: any;
+  path: string[];
+  actions: Actions;
+  fields: AlertQueryField[];
+  longestFieldLabel: string;
+  longestOperatorLabel: string;
+  removable: boolean;
+}) {
+  const summary = ruleSummary(ruleProps, fields);
+
+  return (
+    <AccordionPrimitive.Item value={ruleId} className="border-b">
+      <AccordionPrimitive.Header className="flex items-center">
+        <AccordionPrimitive.Trigger
+          className={cn(
+            "flex flex-1 items-center gap-3 py-3 text-left text-sm outline-none",
+            "rounded-none hover:underline",
+            "focus-visible:ring-2 focus-visible:ring-foreground/30",
+            "[&[data-panel-open]>svg:last-child]:rotate-180",
+          )}
+        >
+          <span className="flex-1 text-sm text-foreground">{summary}</span>
+          <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+        </AccordionPrimitive.Trigger>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="shrink-0 px-2"
+          onClick={() => actions.removeRule(path)}
+          disabled={!removable}
+          aria-label="Remove rule"
+        >
+          <Trash2Icon className="size-4" />
+        </Button>
+      </AccordionPrimitive.Header>
+      <AccordionPrimitive.Panel className="overflow-hidden h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0">
+        <div className="pb-3">
+          <RuleEditorFields
+            ruleProps={ruleProps}
+            path={path}
+            actions={actions}
+            fields={fields}
+            longestFieldLabel={longestFieldLabel}
+            longestOperatorLabel={longestOperatorLabel}
+          />
+        </div>
+      </AccordionPrimitive.Panel>
+    </AccordionPrimitive.Item>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SubGroupAccordionItem
+// ---------------------------------------------------------------------------
+
+function SubGroupAccordionItem({
+  groupId,
+  group,
+  path,
+  actions,
+  fields,
+  longestFieldLabel,
+  longestOperatorLabel,
+}: {
+  groupId: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  group: any;
+  path: string[];
+  actions: Actions;
+  fields: AlertQueryField[];
+  longestFieldLabel: string;
+  longestOperatorLabel: string;
+}) {
+  const conjunction: string = group.properties?.conjunction ?? "AND";
+  const nestedChildren: JsonItem[] = group.children1 ?? [];
+  const count = nestedChildren.length;
+  const triggerLabel = `Group (${count} ${count === 1 ? "rule" : "rules"})`;
+
+  return (
+    <AccordionPrimitive.Item value={groupId} className="border-b">
+      <AccordionPrimitive.Header className="flex items-center">
+        <AccordionPrimitive.Trigger
+          className={cn(
+            "flex flex-1 items-center gap-3 py-3 text-left text-sm outline-none",
+            "rounded-none hover:underline",
+            "focus-visible:ring-2 focus-visible:ring-foreground/30",
+            "[&[data-panel-open]>svg:last-child]:rotate-180",
+          )}
+        >
+          <span className="flex-1 text-sm font-medium text-foreground">
+            {triggerLabel}
+          </span>
+          <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+        </AccordionPrimitive.Trigger>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="shrink-0 px-2"
+          onClick={() => actions.removeGroup(path)}
+          aria-label="Remove group"
+        >
+          <Trash2Icon className="size-4" />
+        </Button>
+      </AccordionPrimitive.Header>
+      <AccordionPrimitive.Panel className="overflow-hidden h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0">
+        <div className="pb-3 pl-4 border-l ml-2 flex flex-col gap-3">
+          {/* Nested combinator */}
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id={`subgroup-${groupId}-combinator`}
+              checked={conjunction === "AND"}
+              onCheckedChange={(checked) =>
+                actions.setConjunction(path, checked ? "AND" : "OR")
+              }
+            />
+            <Label
+              htmlFor={`subgroup-${groupId}-combinator`}
+              className="cursor-pointer font-normal text-sm"
+            >
+              Match all conditions
+            </Label>
+            <span className="text-xs text-muted-foreground">
+              ({conjunction})
+            </span>
+          </div>
+
+          {/* Nested rules — flat rows */}
+          {nestedChildren.map((child) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const c = child as any;
+            const ruleId: string = c.id ?? "";
+            const rulePath = [...path, ruleId];
+            return (
+              <div key={ruleId} className="flex items-start gap-1.5">
+                <div className="flex-1">
+                  <RuleEditorFields
+                    ruleProps={c.properties}
+                    path={rulePath}
+                    actions={actions}
+                    fields={fields}
+                    longestFieldLabel={longestFieldLabel}
+                    longestOperatorLabel={longestOperatorLabel}
+                  />
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="shrink-0 px-2"
+                  onClick={() => actions.removeRule(rulePath)}
+                  disabled={nestedChildren.length <= 1}
+                  aria-label="Remove rule"
+                >
+                  <Trash2Icon className="size-4" />
+                </Button>
+              </div>
+            );
+          })}
+
+          {/* Add rule inside group */}
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => actions.addRule(path)}
+            className="w-fit"
+          >
+            <PlusIcon className="size-4" />
+            Add rule
+          </Button>
+        </div>
+      </AccordionPrimitive.Panel>
+    </AccordionPrimitive.Item>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CustomBuilderUI
+// ---------------------------------------------------------------------------
+
+export interface CustomBuilderUIProps {
+  tree: ImmutableTree;
+  actions: Actions;
+  fields: AlertQueryField[];
+  defaultOpenItems: string[];
+  className?: string;
+}
+
+export function CustomBuilderUI({
+  tree,
+  actions,
+  fields,
+  defaultOpenItems,
+  className,
+}: CustomBuilderUIProps) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const treeJson = QbUtils.getTree(tree) as any;
+  const rootId: string = treeJson?.id ?? "root";
+  const conjunction: string = treeJson?.properties?.conjunction ?? "AND";
+  const children: JsonItem[] = treeJson?.children1 ?? [];
+
+  const longestFieldLabel = React.useMemo(
+    () => longestOf(fields.map((f) => f.label)),
+    [fields],
+  );
+  const longestOperatorLabel = React.useMemo(
+    () => longestOf(allOperatorLabels(fields)),
+    [fields],
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      {/* Root combinator */}
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="qb-root-combinator"
+          checked={conjunction === "AND"}
+          onCheckedChange={(checked) =>
+            actions.setConjunction([rootId], checked ? "AND" : "OR")
+          }
+        />
+        <Label
+          htmlFor="qb-root-combinator"
+          className="cursor-pointer font-normal text-sm"
+        >
+          Match all conditions
+        </Label>
+        <span className="text-xs text-muted-foreground">({conjunction})</span>
+      </div>
+
+      {/* Rules and groups */}
+      <AccordionPrimitive.Root
+        multiple
+        defaultValue={defaultOpenItems}
+        className="border-t"
+      >
+        {children.map((child) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const c = child as any;
+          const childId: string = c.id ?? "";
+          const childPath = [rootId, childId];
+
+          if (c.type === "group") {
+            return (
+              <SubGroupAccordionItem
+                key={childId}
+                groupId={childId}
+                group={c}
+                path={childPath}
+                actions={actions}
+                fields={fields}
+                longestFieldLabel={longestFieldLabel}
+                longestOperatorLabel={longestOperatorLabel}
+              />
+            );
+          }
+
+          return (
+            <RuleAccordionItem
+              key={childId}
+              ruleId={childId}
+              ruleProps={c.properties}
+              path={childPath}
+              actions={actions}
+              fields={fields}
+              longestFieldLabel={longestFieldLabel}
+              longestOperatorLabel={longestOperatorLabel}
+              removable={children.length > 1}
+            />
+          );
+        })}
+      </AccordionPrimitive.Root>
+
+      {/* Action buttons */}
+      <div className="flex gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => actions.addRule([rootId])}
+        >
+          <PlusIcon className="size-4" />
+          Add rule
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => actions.addGroup([rootId])}
+        >
+          <PlusIcon className="size-4" />
+          Add group
+        </Button>
+      </div>
+    </div>
+  );
+}