@handled-ai/design-system 0.15.1 → 0.16.1

package/src/components/__tests__/data-table-condition-filter.test.tsx

@@ -0,0 +1,397 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  DataTableConditionFilter,
+  type ConditionFieldDef,
+  type ConditionFilterValue,
+  generateConditionId,
+  getOperators,
+} from "../data-table-condition-filter";
+
+// ── Mock Radix Select with inline option elements ───────────────
+vi.mock("../select", () => {
+  const SelectMockContext = React.createContext<{
+    value?: string;
+    onValueChange?: (v: string) => void;
+  }>({});
+
+  const Select = ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: React.ReactNode;
+    value?: string;
+    onValueChange?: (v: string) => void;
+  }) => (
+    <SelectMockContext.Provider value={{ value, onValueChange }}>
+      {children}
+    </SelectMockContext.Provider>
+  );
+
+  const SelectTrigger = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    size?: string;
+  }) => (
+    <span data-slot="select-trigger" className={className}>
+      {children}
+    </span>
+  );
+
+  const SelectValue = ({ placeholder }: { placeholder?: string }) => {
+    const ctx = React.useContext(SelectMockContext);
+    return <span data-slot="select-value">{ctx.value ?? placeholder}</span>;
+  };
+
+  const SelectContent = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+
+  const SelectItem = ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: string;
+  }) => {
+    const ctx = React.useContext(SelectMockContext);
+    return (
+      <option
+        data-slot="select-item"
+        value={value}
+        data-selected={ctx.value === value ? "true" : undefined}
+        onClick={() => ctx.onValueChange?.(value)}
+      >
+        {children}
+      </option>
+    );
+  };
+
+  return {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+  };
+});
+
+const textField: ConditionFieldDef = {
+  id: "name",
+  label: "Name",
+  type: "text",
+};
+
+const numberField: ConditionFieldDef = {
+  id: "balance",
+  label: "Account Balance",
+  type: "number",
+};
+
+const currencyField: ConditionFieldDef = {
+  id: "revenue",
+  label: "Revenue",
+  type: "currency",
+};
+
+const dateField: ConditionFieldDef = {
+  id: "created_at",
+  label: "Created At",
+  type: "date",
+};
+
+const allFields: ConditionFieldDef[] = [
+  textField,
+  numberField,
+  currencyField,
+  dateField,
+];
+
+describe("DataTableConditionFilter", () => {
+  let onConditionsChange: ReturnType<typeof vi.fn<(conditions: ConditionFilterValue[]) => void>>;
+
+  beforeEach(() => {
+    onConditionsChange = vi.fn<(conditions: ConditionFilterValue[]) => void>();
+  });
+
+  it("renders a polished empty panel with Add filter, disabled Add filter group, and quiet Clear filters", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(screen.getByText("Filter builder")).toBeDefined();
+    expect(screen.getByText("No builder filters yet. Add a filter to start a condition row.")).toBeDefined();
+    expect(screen.getByText("Add filter")).toBeDefined();
+    expect(screen.getByText("Add filter group")).toBeDefined();
+    expect(screen.getByText("Add filter group").closest("button")?.hasAttribute("disabled")).toBe(true);
+    expect(screen.getByText("Clear filters").closest("button")?.hasAttribute("disabled")).toBe(true);
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(0);
+  });
+
+  it("clicking Add filter creates a draft row without emitting an incomplete condition", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(1);
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(onConditionsChange).toHaveBeenCalledWith([]);
+  });
+
+  it("commits a text draft with Apply after a value is entered", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+    fireEvent.click(screen.getByText("Apply"));
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0]).toMatchObject({ field: "name", operator: "eq", value: "Acme" });
+  });
+
+  it("Enter in the value field commits the current draft row", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    const valueInput = screen.getByPlaceholderText("Enter value...");
+    fireEvent.change(valueInput, { target: { value: "Acme" } });
+    fireEvent.keyDown(valueInput, { key: "Enter" });
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed?.[0]).toMatchObject({ field: "name", operator: "eq", value: "Acme" });
+  });
+
+  it("adding another row commits existing complete drafts and labels rows Where/And", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+    fireEvent.click(screen.getByText("Add filter"));
+
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(screen.getByText("And")).toBeDefined();
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0].value).toBe("Acme");
+  });
+
+  it("changing field resets operator and clears value", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "test" },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const balanceOption = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .find((opt) => opt.textContent?.includes("Account Balance"));
+    expect(balanceOption).not.toBeUndefined();
+    fireEvent.click(balanceOption!);
+    fireEvent.click(screen.getByText("Apply"));
+
+    // The updated row is incomplete after field change, so Apply omits it.
+    expect(onConditionsChange.mock.calls.at(-1)?.[0]).toEqual([]);
+  });
+
+  it("hides value input for unary operators and commits null values", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "is_null", value: null },
+      { id: "c-2", field: "balance", operator: "is_not_null", value: null },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(2);
+    expect(container.querySelectorAll("input")).toHaveLength(0);
+    expect(screen.getAllByText("No value needed")).toHaveLength(2);
+
+    fireEvent.click(screen.getByText("Apply"));
+    expect(onConditionsChange.mock.calls.at(-1)?.[0]).toEqual(conditions);
+  });
+
+  it("removing a condition row commits remaining rows", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "test" },
+      { id: "c-2", field: "balance", operator: "gt", value: 100 },
+    ];
+
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getAllByRole("button", { name: "Remove condition" })[0]);
+
+    const updated = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(updated).toHaveLength(1);
+    expect(updated?.[0]).toMatchObject({ field: "balance", operator: "gt", value: 100 });
+  });
+
+  it("clears all builder conditions", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "name", operator: "eq", value: "test" }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Clear filters"));
+
+    expect(onConditionsChange).toHaveBeenCalledWith([]);
+  });
+
+  it("renders currency prefix, parses currency as a number, and renders number inputs", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "revenue", operator: "eq", value: 5000 },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(screen.getByText("$")).toBeDefined();
+    const input = container.querySelector('input[type="number"]');
+    expect(input).not.toBeNull();
+    fireEvent.change(input!, { target: { value: "6500" } });
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(onConditionsChange.mock.calls.at(-1)?.[0][0].value).toBe(6500);
+  });
+
+  it("renders and commits date values with a date input", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "created_at", operator: "gte", value: "2026-01-01" },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const input = container.querySelector('input[type="date"]');
+    expect(input).not.toBeNull();
+    fireEvent.change(input!, { target: { value: "2026-02-03" } });
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(onConditionsChange.mock.calls.at(-1)?.[0][0].value).toBe("2026-02-03");
+  });
+
+  it("renders all provided conditions", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "Acme" },
+      { id: "c-2", field: "balance", operator: "gt", value: 100 },
+      { id: "c-3", field: "revenue", operator: "gte", value: 50000 },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(3);
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(screen.getAllByText("And")).toHaveLength(2);
+  });
+
+  it("operator options are scalar only and exclude in/contains", () => {
+    expect(getOperators(textField)).toEqual(["eq", "neq", "is_null", "is_not_null"]);
+    expect(getOperators({ ...textField, operators: ["eq", "in", "is_null"] })).toEqual(["eq", "is_null"]);
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "name", operator: "eq", value: null }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .map((el) => el.textContent);
+    expect(optionTexts).not.toContain("contains");
+    expect(optionTexts).toContain("is empty");
+  });
+
+  it("operator options change based on field type", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "balance", operator: "eq", value: null }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .map((el) => el.textContent);
+    expect(optionTexts).toContain(">");
+    expect(optionTexts).toContain("≥");
+    expect(optionTexts).toContain("<");
+    expect(optionTexts).toContain("≤");
+    expect(optionTexts).not.toContain("contains");
+  });
+
+  it("generateConditionId returns unique values", () => {
+    const ids = new Set(Array.from({ length: 100 }, () => generateConditionId()));
+    expect(ids.size).toBe(100);
+  });
+});

package/src/components/__tests__/data-table-filter-presets.test.tsx

@@ -0,0 +1,209 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, fireEvent } from "@testing-library/react"
+import { DataTableFilter } from "../data-table-filter"
+import { ListFilter } from "lucide-react"
+
+const categories = [
+  {
+    id: "status",
+    label: "Status",
+    icon: ListFilter,
+    options: [
+      { value: "open", label: "Open" },
+      { value: "closed", label: "Closed" },
+    ],
+  },
+  {
+    id: "type",
+    label: "Type",
+    icon: ListFilter,
+    options: [
+      { value: "churn", label: "Churn-Risk" },
+      { value: "other", label: "Other" },
+    ],
+  },
+]
+
+describe("DataTableFilter – preset support", () => {
+  it("renders preset chips below trigger button", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // Should have a wrapper div with flex-wrap
+    const wrapper = container.firstElementChild
+    expect(wrapper).not.toBeNull()
+    expect(wrapper!.className).toContain("flex")
+    expect(wrapper!.className).toContain("flex-wrap")
+
+    // Should have a preset chip button (not the dropdown trigger)
+    const buttons = container.querySelectorAll("button")
+    // One trigger button + one preset chip
+    expect(buttons.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it("preset chips show 'Default:' prefix label", () => {
+    const { getByText } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // The chip should contain the label text
+    expect(getByText("Open")).not.toBeNull()
+  })
+
+  it("preset chips have no X dismiss button", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // No X icon — preset chips should not have a dismiss button with aria-label close or X text
+    const allButtons = container.querySelectorAll("button")
+    for (const btn of allButtons) {
+      const text = btn.textContent ?? ""
+      // Preset chip buttons should not have just "X" as text content
+      if (text.includes("Open") && text.includes("Default")) {
+        // This is the preset chip, should not contain an "×" or "X" dismiss icon child
+        const xIcon = btn.querySelector('[data-testid="dismiss"]')
+        expect(xIcon).toBeNull()
+      }
+    }
+  })
+
+  it("clicking preset chip calls onTogglePreset", () => {
+    const onTogglePreset = vi.fn()
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={onTogglePreset}
+      />
+    )
+
+    // Find the preset chip button (contains "Open" and "Default")
+    const buttons = container.querySelectorAll("button")
+    const presetChip = Array.from(buttons).find(
+      (btn) => btn.textContent?.includes("Open") && btn.textContent?.includes("Default")
+    )
+    expect(presetChip).not.toBeUndefined()
+
+    fireEvent.click(presetChip!)
+    expect(onTogglePreset).toHaveBeenCalledWith("status", "open")
+  })
+
+  it("deactivated preset chips show muted/line-through style", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    // Find the preset chip
+    const buttons = container.querySelectorAll("button")
+    const presetChip = Array.from(buttons).find(
+      (btn) => btn.textContent?.includes("Open") && btn.textContent?.includes("Default")
+    )
+    expect(presetChip).not.toBeUndefined()
+    expect(presetChip!.className).toContain("line-through")
+    expect(presetChip!.className).toContain("text-muted-foreground/60")
+  })
+
+  it("active preset chips show brand-purple style", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    const buttons = container.querySelectorAll("button")
+    const presetChip = Array.from(buttons).find(
+      (btn) => btn.textContent?.includes("Open") && btn.textContent?.includes("Default")
+    )
+    expect(presetChip).not.toBeUndefined()
+    expect(presetChip!.className).toContain("border-brand-purple/30")
+    expect(presetChip!.className).toContain("bg-brand-purple/5")
+    expect(presetChip!.className).not.toContain("line-through")
+  })
+
+  it("uses custom presetLabel", () => {
+    const { getByText } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"] }}
+        onTogglePreset={() => {}}
+        presetLabel="Preset"
+      />
+    )
+
+    // The label prefix should show "Preset: "
+    const presetPrefix = getByText(/Preset:/)
+    expect(presetPrefix).not.toBeNull()
+  })
+
+  it("renders multiple preset chips for multiple categories", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{ status: ["open"], type: ["churn"] }}
+        onToggleFilter={() => {}}
+        presetFilters={{ status: ["open"], type: ["churn"] }}
+        onTogglePreset={() => {}}
+      />
+    )
+
+    const buttons = container.querySelectorAll("button")
+    const presetChips = Array.from(buttons).filter(
+      (btn) => btn.textContent?.includes("Default")
+    )
+    // Two preset chips (one for status:open, one for type:churn)
+    expect(presetChips.length).toBe(2)
+  })
+
+  it("does not render wrapper div when no preset filters", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={categories}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    )
+
+    // Without presets, the root should be the DropdownMenu
+    // which doesn't have flex-wrap class
+    const _wrapper = container.firstElementChild
+    // The button should be the first interactive child (DropdownMenu renders button)
+    const button = container.querySelector("button")
+    expect(button).not.toBeNull()
+    expect(button!.textContent).toContain("Filter")
+  })
+})