@multiplatform.one/table 7.6.3 → 7.7.1

package/src/components/FilterManager.stories.tsx

@@ -0,0 +1,75 @@
+/**
+ * FilterManager — save-current-filters dialog. Frappe-free: the caller
+ * supplies the filter tuples and the save callback. Playground already
+ * mounts this; the Kitchen Sink is story-driven, so this file is the
+ * on-device page.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { FilterManager } from "./FilterManager";
+
+const meta: Meta<typeof FilterManager> = {
+  title: "Table/FilterManager",
+  component: FilterManager,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Save-filter dialog: name, optional global checkbox, live count of the " +
+          "current filter tuples. Disabled with a reason when nothing is applied.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const currentFilters: Array<[string, string, unknown]> = [
+  ["department", "=", "Engineering"],
+  ["salary", ">", 100000],
+];
+
+export const Default = {
+  name: "Main",
+  render: () => (
+    <YStack padding="$4" alignItems="flex-start">
+      <FilterManager
+        currentFilters={currentFilters}
+        onSaveFilter={(name, isGlobal) => {
+          action("onSaveFilter")(name, isGlobal);
+        }}
+      />
+    </YStack>
+  ),
+};
+
+/** No filters applied: the save trigger stays focusable and explains why. */
+export const DisabledEmpty = {
+  render: () => (
+    <YStack padding="$4" alignItems="flex-start">
+      <FilterManager
+        currentFilters={[]}
+        onSaveFilter={(name, isGlobal) => {
+          action("onSaveFilter")(name, isGlobal);
+        }}
+      />
+    </YStack>
+  ),
+};
+
+export const CanCreateGlobal = {
+  render: () => (
+    <YStack padding="$4" alignItems="flex-start">
+      <FilterManager
+        currentFilters={currentFilters}
+        canCreateGlobal
+        onSaveFilter={(name, isGlobal) => {
+          action("onSaveFilter")(name, isGlobal);
+        }}
+      />
+    </YStack>
+  ),
+};

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.spec.tsx

@@ -0,0 +1,261 @@
+/**
+ * FilterOperatorValueEditor spec (MPO-101). The editor owns two things and
+ * nothing else: the operator vocabulary for a field type, and the value
+ * editor that type gets. Commit semantics belong to the surfaces
+ * (ColumnHeaderFilter / DataTableFilterButton) and are specced there.
+ */
+
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import React, { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumnType, FilterOperator } from "../../types";
+import { filterOperatorLabel, operatorsForFilterType } from "../../utils/filterFields";
+import { FilterOperatorValueEditor, type FilterOperatorValueEditorProps } from "./index";
+
+const statusOptions = [
+  { label: "Open", value: "open" },
+  { label: "In progress", value: "in-progress" },
+  { label: "Done", value: "done" },
+];
+
+const fieldTypes: DataTableColumnType[] = ["text", "number", "date", "boolean", "select"];
+
+/** Every forms Select trigger in the tree, in render order (Condition first). */
+const selectTriggers = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="select-trigger"]')) as HTMLElement[];
+
+const textInputs = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("input")) as HTMLInputElement[];
+
+async function openSelect(container: HTMLElement, trigger: HTMLElement) {
+  fireEvent.pointerDown(trigger);
+  fireEvent.mouseDown(trigger);
+  fireEvent.click(trigger);
+  await waitFor(() => {
+    expect(container.querySelectorAll('[role="option"]').length).toBeGreaterThan(0);
+  });
+  return Array.from(container.querySelectorAll('[role="option"]')) as HTMLElement[];
+}
+
+/**
+ * Choose an open Select option the way the keyboard does. Tamagui's SelectItem
+ * arms its click handler on a timer after the list opens (allowSelectRef), so a
+ * synthetic click right after opening is dropped; Enter selects unconditionally.
+ */
+function pickOption(option: HTMLElement) {
+  fireEvent.keyDown(option, { key: "Enter" });
+}
+
+const optionLabels = (options: HTMLElement[]) =>
+  options.map((option) => option.textContent?.trim() ?? "");
+
+function renderEditor(
+  props: Partial<FilterOperatorValueEditorProps> & { fieldType: DataTableColumnType },
+) {
+  const operator = props.operator ?? operatorsForFilterType(props.fieldType)[0];
+  return renderWithProviders(
+    <FilterOperatorValueEditor
+      value=""
+      onOperatorChange={vi.fn()}
+      onValueChange={vi.fn()}
+      {...props}
+      operator={operator}
+    />,
+  );
+}
+
+/** Controlled harness: round-trips operator + value like the surfaces do. */
+function ControlledEditor({
+  fieldType,
+  onOperatorSpy,
+  onValueSpy,
+  options,
+}: {
+  fieldType: DataTableColumnType;
+  onOperatorSpy: (operator: FilterOperator) => void;
+  onValueSpy: (value: string) => void;
+  options?: FilterOperatorValueEditorProps["options"];
+}) {
+  const [operator, setOperator] = useState<FilterOperator>(operatorsForFilterType(fieldType)[0]);
+  const [value, setValue] = useState("");
+  return (
+    <FilterOperatorValueEditor
+      fieldType={fieldType}
+      operator={operator}
+      value={value}
+      options={options}
+      onOperatorChange={(next) => {
+        setOperator(next);
+        onOperatorSpy(next);
+      }}
+      onValueChange={(next) => {
+        setValue(next);
+        onValueSpy(next);
+      }}
+    />
+  );
+}
+
+describe("FilterOperatorValueEditor", () => {
+  describe("operator vocabulary", () => {
+    it.each(fieldTypes)(
+      "%s: the Condition select offers exactly operatorsForFilterType, labelled via filterOperatorLabel",
+      async (fieldType) => {
+        const { container } = renderEditor({ fieldType, options: statusOptions });
+        expect(screen.getByText("Condition")).toBeInTheDocument();
+
+        const [condition] = selectTriggers(container);
+        const options = await openSelect(container, condition);
+        expect(optionLabels(options)).toEqual(
+          operatorsForFilterType(fieldType).map((op) => filterOperatorLabel(op)),
+        );
+      },
+    );
+
+    it("picking a condition reports the operator, not its label", async () => {
+      const onOperator = vi.fn();
+      const { container } = renderWithProviders(
+        <ControlledEditor fieldType="text" onOperatorSpy={onOperator} onValueSpy={vi.fn()} />,
+      );
+      const [condition] = selectTriggers(container);
+      const options = await openSelect(container, condition);
+      const startsWith = options.find((option) => option.textContent?.trim() === "Starts with");
+      expect(startsWith).toBeDefined();
+      pickOption(startsWith!);
+      await waitFor(() => expect(onOperator).toHaveBeenLastCalledWith("startsWith"));
+    });
+  });
+
+  describe("value editor per field type", () => {
+    it("text: a plain Input with the generic placeholder", () => {
+      const { container } = renderEditor({ fieldType: "text" });
+      expect(screen.getByText("Value")).toBeInTheDocument();
+      const input = screen.getByPlaceholderText("Enter value...") as HTMLInputElement;
+      expect(input.getAttribute("inputmode")).not.toBe("numeric");
+      expect(selectTriggers(container)).toHaveLength(1);
+    });
+
+    it("number: the Input asks for a numeric keyboard", () => {
+      renderEditor({ fieldType: "number" });
+      const input = screen.getByPlaceholderText("Enter value...") as HTMLInputElement;
+      expect(input.getAttribute("inputmode")).toBe("numeric");
+    });
+
+    it("date: the Input hints the ISO day format", () => {
+      renderEditor({ fieldType: "date" });
+      expect(screen.getByPlaceholderText("YYYY-MM-DD")).toBeInTheDocument();
+    });
+
+    it("boolean: a Value select with True / False and no text input", async () => {
+      const { container } = renderEditor({ fieldType: "boolean" });
+      const triggers = selectTriggers(container);
+      expect(triggers).toHaveLength(2);
+      expect(textInputs(container)).toHaveLength(0);
+      expect(screen.getByText("Select...")).toBeInTheDocument();
+
+      const options = await openSelect(container, triggers[1]);
+      expect(optionLabels(options)).toEqual(["True", "False"]);
+    });
+
+    it("select: a Value select over the column's options", async () => {
+      const { container } = renderEditor({ fieldType: "select", options: statusOptions });
+      const triggers = selectTriggers(container);
+      expect(triggers).toHaveLength(2);
+      expect(textInputs(container)).toHaveLength(0);
+
+      const options = await openSelect(container, triggers[1]);
+      expect(optionLabels(options)).toEqual(statusOptions.map((option) => option.label));
+    });
+
+    it("select without options falls back to the text Input", () => {
+      const { container } = renderEditor({ fieldType: "select" });
+      expect(selectTriggers(container)).toHaveLength(1);
+      expect(screen.getByPlaceholderText("Enter value...")).toBeInTheDocument();
+    });
+
+    it("shows the current value", () => {
+      renderEditor({ fieldType: "text", value: "ada" });
+      expect((screen.getByPlaceholderText("Enter value...") as HTMLInputElement).value).toBe("ada");
+    });
+  });
+
+  describe("value-less operators", () => {
+    it.each<FilterOperator>(["isEmpty", "isNotEmpty"])(
+      "%s renders the Condition select only",
+      (operator) => {
+        const { container } = renderEditor({ fieldType: "text", operator });
+        expect(screen.getByText("Condition")).toBeInTheDocument();
+        expect(screen.queryByText("Value")).toBeNull();
+        expect(selectTriggers(container)).toHaveLength(1);
+        expect(textInputs(container)).toHaveLength(0);
+      },
+    );
+
+    it("switching from a value-less operator back to one with a value restores the input", async () => {
+      const onOperator = vi.fn();
+      const { container, rerender } = renderWithProviders(
+        <FilterOperatorValueEditor
+          fieldType="text"
+          operator="isEmpty"
+          value=""
+          onOperatorChange={onOperator}
+          onValueChange={vi.fn()}
+        />,
+      );
+      expect(textInputs(container)).toHaveLength(0);
+      rerender(
+        <FilterOperatorValueEditor
+          fieldType="text"
+          operator="contains"
+          value=""
+          onOperatorChange={onOperator}
+          onValueChange={vi.fn()}
+        />,
+      );
+      await waitFor(() => expect(textInputs(container)).toHaveLength(1));
+    });
+  });
+
+  describe("callbacks", () => {
+    it("typing reports the raw text through onValueChange", async () => {
+      const onValue = vi.fn();
+      renderWithProviders(
+        <ControlledEditor fieldType="text" onOperatorSpy={vi.fn()} onValueSpy={onValue} />,
+      );
+      const input = screen.getByPlaceholderText("Enter value...") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "ada" } });
+      await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("ada"));
+      expect(input.value).toBe("ada");
+    });
+
+    it("picking a boolean value reports the stringified flag", async () => {
+      const onValue = vi.fn();
+      const { container } = renderWithProviders(
+        <ControlledEditor fieldType="boolean" onOperatorSpy={vi.fn()} onValueSpy={onValue} />,
+      );
+      const options = await openSelect(container, selectTriggers(container)[1]);
+      const no = options.find((option) => option.textContent?.trim() === "False");
+      expect(no).toBeDefined();
+      pickOption(no!);
+      await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("false"));
+    });
+
+    it("picking a select value reports the option value, not its label", async () => {
+      const onValue = vi.fn();
+      const { container } = renderWithProviders(
+        <ControlledEditor
+          fieldType="select"
+          options={statusOptions}
+          onOperatorSpy={vi.fn()}
+          onValueSpy={onValue}
+        />,
+      );
+      const options = await openSelect(container, selectTriggers(container)[1]);
+      const inProgress = options.find((option) => option.textContent?.trim() === "In progress");
+      expect(inProgress).toBeDefined();
+      pickOption(inProgress!);
+      await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("in-progress"));
+    });
+  });
+});

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.stories.tsx

@@ -0,0 +1,183 @@
+/**
+ * FilterOperatorValueEditor — the ONE fieldtype-aware operator/value editor
+ * (LC-16). Both filter surfaces render it: the ColumnHeaderFilter funnel and
+ * the DataTableFilterButton toolbar panel. The surface owns commit semantics,
+ * so these stories exercise only what the editor owns: the operator
+ * vocabulary per field type, and the value editor each type gets.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta } from "@storybook/react-native-web-vite";
+import React, { useState } from "react";
+import { Card, Text, XStack, YStack } from "tamagui";
+import type { DataTableColumnType, FilterOperator } from "../../types";
+import {
+  defaultOperatorForFilterType,
+  filterOperatorLabel,
+  operatorNeedsNoValue,
+} from "../../utils/filterFields";
+import { FilterOperatorValueEditor } from "./index";
+
+const meta: Meta<typeof FilterOperatorValueEditor> = {
+  title: "Table/FilterOperatorValueEditor",
+  component: FilterOperatorValueEditor,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "The shared operator + value editor behind every DataTable filter surface. " +
+          "The operator list and the value editor both follow the field type.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const statusOptions = [
+  { label: "Open", value: "open" },
+  { label: "In progress", value: "in-progress" },
+  { label: "Done", value: "done" },
+];
+
+const fieldTypeLabels: Record<DataTableColumnType, string> = {
+  text: "Text",
+  number: "Number",
+  date: "Date",
+  boolean: "Boolean",
+  select: "Select",
+};
+
+interface HarnessProps {
+  fieldType: DataTableColumnType;
+  options?: Array<{ label: string; value: any }>;
+  initialOperator?: FilterOperator;
+  initialValue?: string;
+  /** Show the field-type heading (the all-types board needs it). */
+  heading?: boolean;
+}
+
+/**
+ * Drives the editor the way both surfaces do: operator and value live in the
+ * caller's state, and the editor only reports changes. The card below is the
+ * filter the surface would commit.
+ */
+function EditorHarness({
+  fieldType,
+  options,
+  initialOperator,
+  initialValue = "",
+  heading = false,
+}: HarnessProps) {
+  const [operator, setOperator] = useState<FilterOperator>(
+    initialOperator ?? defaultOperatorForFilterType(fieldType),
+  );
+  const [value, setValue] = useState(initialValue);
+
+  const handleOperatorChange = (next: FilterOperator) => {
+    setOperator(next);
+    action("onOperatorChange")(next);
+  };
+  const handleValueChange = (next: string) => {
+    setValue(next);
+    action("onValueChange")(next);
+  };
+
+  const shownValue =
+    fieldType === "select" && options
+      ? (options.find((opt) => String(opt.value) === value)?.label ?? value)
+      : value;
+  const summary = operatorNeedsNoValue(operator)
+    ? filterOperatorLabel(operator)
+    : `${filterOperatorLabel(operator)} ${shownValue || "(no value)"}`;
+
+  return (
+    <YStack gap="$3" width={280}>
+      {heading && (
+        <Text fontSize="$3" fontWeight="600">
+          {fieldTypeLabels[fieldType]}
+        </Text>
+      )}
+      {/* Same vertical rhythm the funnel popover gives the editor. */}
+      <YStack gap="$2">
+        <FilterOperatorValueEditor
+          fieldType={fieldType}
+          operator={operator}
+          value={value}
+          onOperatorChange={handleOperatorChange}
+          onValueChange={handleValueChange}
+          options={options}
+        />
+      </YStack>
+      <Card padding="$3" borderRadius="$4">
+        <YStack gap="$1">
+          <Text fontSize="$2" color="$color10">
+            Filter the surface would commit
+          </Text>
+          <Text fontSize="$3">{summary}</Text>
+        </YStack>
+      </Card>
+    </YStack>
+  );
+}
+
+export const Default = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="text" />
+  </YStack>
+);
+Default.storyName = "Main";
+
+/** Text fields: contains / starts with / ends with plus the empty checks. */
+export const TextField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="text" initialValue="ada" />
+  </YStack>
+);
+
+/** Number fields: comparison operators and a numeric keyboard on the value. */
+export const NumberField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="number" initialOperator="isGreaterThan" initialValue="42" />
+  </YStack>
+);
+
+/** Date fields: before / after / on-or-before / on-or-after, typed as YYYY-MM-DD. */
+export const DateField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="date" initialOperator="isAfter" initialValue="2026-01-01" />
+  </YStack>
+);
+
+/** Boolean fields: the value is a True / False select, not free text. */
+export const BooleanField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="boolean" initialValue="true" />
+  </YStack>
+);
+
+/** Select fields: the value picks from the field's own options. */
+export const SelectField = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="select" options={statusOptions} initialValue="open" />
+  </YStack>
+);
+
+/** isEmpty / isNotEmpty carry no value, so the value editor is not rendered. */
+export const NoValueOperator = () => (
+  <YStack padding="$4">
+    <EditorHarness fieldType="text" initialOperator="isEmpty" />
+  </YStack>
+);
+
+/** Every field type on one board, for theme-state verification. */
+export const AllFieldTypes = () => (
+  <XStack padding="$4" gap="$6" flexWrap="wrap">
+    <EditorHarness fieldType="text" heading />
+    <EditorHarness fieldType="number" heading />
+    <EditorHarness fieldType="date" heading />
+    <EditorHarness fieldType="boolean" heading />
+    <EditorHarness fieldType="select" options={statusOptions} heading />
+  </XStack>
+);

package/src/components/KnobDialog.spec.tsx

@@ -0,0 +1,88 @@
+/**
+ * KnobDialog spec (MPO-114). The wrapper owns open/close plumbing and the
+ * knob-wired content surface. FilterManager specs cover the save-dialog copy.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "@multiplatform.one/forms";
+import {
+  KnobDialog,
+  KnobDialogClose,
+  KnobDialogContent,
+  KnobDialogDescription,
+  KnobDialogTitle,
+  KnobDialogTrigger,
+} from "./KnobDialog";
+
+/** Dialog portals into document.body — query there, not the RTL container. */
+function root(): HTMLElement {
+  return document.body;
+}
+
+function DialogHarness({
+  startOpen = true,
+  onOpenChange,
+}: {
+  startOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const [open, setOpen] = useState(startOpen);
+  return (
+    <KnobDialog
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        onOpenChange?.(next);
+      }}
+    >
+      <KnobDialogTrigger asChild>
+        <Button>Open dialog</Button>
+      </KnobDialogTrigger>
+      <KnobDialogContent minWidth={400}>
+        <KnobDialogTitle>Save view</KnobDialogTitle>
+        <KnobDialogDescription>Name this filter set for later.</KnobDialogDescription>
+        <KnobDialogClose asChild>
+          <Button>Close</Button>
+        </KnobDialogClose>
+      </KnobDialogContent>
+    </KnobDialog>
+  );
+}
+
+describe("KnobDialog", () => {
+  it("open state portals title and description into the document", () => {
+    renderWithProviders(<DialogHarness startOpen />);
+    expect(root().textContent).toContain("Save view");
+    expect(root().textContent).toContain("Name this filter set for later.");
+  });
+
+  it("closed state does not render the dialog body", () => {
+    renderWithProviders(<DialogHarness startOpen={false} />);
+    expect(root().textContent).not.toContain("Save view");
+    expect(root().textContent).toContain("Open dialog");
+  });
+
+  it("paints an overlay while open", () => {
+    renderWithProviders(<DialogHarness startOpen />);
+    const overlay =
+      root().querySelector("[data-state]") ?? root().querySelector("[class*='Overlay']");
+    // Tamagui Dialog.Overlay is in the portal tree whenever the dialog is open.
+    const portalBits = Array.from(root().querySelectorAll("[data-state='open']"));
+    expect(portalBits.length).toBeGreaterThan(0);
+    expect(overlay || portalBits[0]).toBeTruthy();
+  });
+
+  it("Close reports onOpenChange(false)", () => {
+    const onOpenChange = vi.fn();
+    renderWithProviders(<DialogHarness startOpen onOpenChange={onOpenChange} />);
+    const close = Array.from(root().querySelectorAll('[role="button"]')).find((el) =>
+      el.textContent?.includes("Close"),
+    );
+    expect(close).toBeTruthy();
+    fireEvent.click(close!);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/KnobDialog.stories.tsx

@@ -0,0 +1,66 @@
+/**
+ * KnobDialog — Tamagui Dialog with table knobs on the content surface
+ * (borderRadius, elevation, gap). FilterManager is the production consumer.
+ * These boards show the wrapper itself, open and closed.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Button } from "@multiplatform.one/forms";
+import { Paragraph, XStack, YStack } from "tamagui";
+import {
+  KnobDialog,
+  KnobDialogClose,
+  KnobDialogContent,
+  KnobDialogDescription,
+  KnobDialogTitle,
+  KnobDialogTrigger,
+} from "./KnobDialog";
+
+const meta: Meta = {
+  title: "Table/KnobDialog",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Internal table Dialog wrapper. Content inherits container radius, elevation " +
+          "and gap from useResolvedKnobs so FilterManager chrome matches the rest of the table.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+function DialogHarness({ startOpen = true }: { startOpen?: boolean }) {
+  const [open, setOpen] = useState(startOpen);
+  return (
+    <YStack minHeight={400} padding="$4" alignItems="flex-start">
+      <KnobDialog open={open} onOpenChange={setOpen}>
+        <KnobDialogTrigger asChild>
+          <Button>Open dialog</Button>
+        </KnobDialogTrigger>
+        <KnobDialogContent minWidth={400}>
+          <KnobDialogTitle>Save view</KnobDialogTitle>
+          <KnobDialogDescription>Name this filter set for later.</KnobDialogDescription>
+          <Paragraph>Short dialog body.</Paragraph>
+          <XStack justifyContent="flex-end">
+            <KnobDialogClose asChild>
+              <Button>Close</Button>
+            </KnobDialogClose>
+          </XStack>
+        </KnobDialogContent>
+      </KnobDialog>
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <DialogHarness />,
+};
+
+export const Closed = {
+  render: () => <DialogHarness startOpen={false} />,
+};