Add support for groupedPredicates filter type in useResourceFilters

[gciotola]

Closes #1121

What I did

This PR adds support for groupedPredicates filter type.
This means that is now possibile to group multiple predicates in a single UI component (InputToggleButton).
Example:

{
  label: "Availability",
  type: "groupedPredicates",
  urlQueryKey: "availability", // instead of using skd.predicate here we just need a key to match the value in query string
  render: {
    component: "inputToggleButton",
    props: {
      // keep it single if predicates don't conflict one each other 
      // (eg: quantity_eq and status_eq can work as multi options
      mode: "single", 
      options: [
        {
          value: "in_stock", // value to identify the UI selection, won't be passed to API
          label: "In stock",
          // predicate and value that will be passed to API
          sdk: { predicate: "quantity_gt", value: "0" },
        },
        {
          value: "out_of_stock",
          label: "Out of stock",
          sdk: { predicate: "quantity_eq", value: "0" },
        },
      ],
    },
  },
}

How to test

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests).
• Make sure to add/update documentation regarding your changes.
• You are NOT deprecating/removing a feature.

[netlify]

✅ Deploy Preview for commercelayer-app-elements ready!

Name	Link
🔨 Latest commit	407cbf5
🔍 Latest deploy log	https://app.netlify.com/projects/commercelayer-app-elements/deploys/6a04869c331644000886173d
😎 Deploy Preview	https://deploy-preview-1122--commercelayer-app-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR introduces a new groupedPredicates filter instruction type for useResourceFilters, enabling a single UI filter component (currently inputToggleButton) to control multiple underlying SDK predicates via selectable options.

Changes:

• Added FilterItemGroupedPredicates instruction type + type guard to the filters instruction model.
• Implemented FieldGroupedPredicates and wired it into the filters form and nav label rendering.
• Extended URL→form and form→SDK adapters to support the new virtual predicate stored in URL/form state.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/app-elements/src/ui/resources/useResourceFilters/types.ts	Adds the groupedPredicates instruction type and a type guard.
packages/app-elements/src/ui/resources/useResourceFilters/mockedInstructions.ts	Adds a mocked groupedPredicates example instruction (quantity_filter).
packages/app-elements/src/ui/resources/useResourceFilters/FiltersNav.tsx	Adds button-label resolution for groupedPredicates when a single option is selected.
packages/app-elements/src/ui/resources/useResourceFilters/FiltersForm.tsx	Renders the new FieldGroupedPredicates for groupedPredicates instructions.
packages/app-elements/src/ui/resources/useResourceFilters/FieldGroupedPredicates.tsx	New field component rendering a hooked toggle button for grouped predicates.
packages/app-elements/src/ui/resources/useResourceFilters/adaptUrlQueryToFormValues.ts	Parses grouped predicate virtual field values from the URL query string.
packages/app-elements/src/ui/resources/useResourceFilters/adaptUrlQueryToFormValues.test.ts	Updates expectations to include the new virtual field in default form values.
packages/app-elements/src/ui/resources/useResourceFilters/adaptFormValuesToSdk.ts	Maps selected grouped option values into their underlying SDK predicates/values.

Comments suppressed due to low confidence (1)

packages/app-elements/src/ui/resources/useResourceFilters/adaptUrlQueryToFormValues.test.ts:30

• The new groupedPredicates behavior isn’t covered by tests yet. The current expectations only add quantity_filter: undefined, but there are no assertions that quantity_filter is parsed correctly from the query string (valid/invalid values, and both mode: "single" and mode: "multi"). Adding dedicated cases would prevent regressions in URL parsing.

  test("should build proper form value object", () => {
    expect(
      adaptUrlQueryToFormValues({
        queryString:
          "market_id_in=dFDdasdgAN&market_id_in=KToVGDooQp&status_in=cancelled&number_or_email_cont=foobar&viewTitle=Awaiting%20Approval",
        instructions,
      }),
    ).toStrictEqual({
      market_id_in: ["dFDdasdgAN", "KToVGDooQp"],
      status_in: ["cancelled"],
      payment_status_eq: undefined,
      fulfillment_status_in: [],
      quantity_filter: undefined,
      archived_at_null: undefined,
      timePreset: undefined,
      timeFrom: undefined,
      timeTo: undefined,
      name_eq: undefined,
      number_or_email_cont: "foobar",
      viewTitle: "Awaiting Approval",
      total_amount_cents: {
        from: undefined,
        to: undefined,
        currencyCode: undefined,
      },
    })

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[pkg-pr-new]

npm i https://pkg.pr.new/commercelayer/app-elements/@commercelayer/app-elements@1122

commit: 407cbf5

[Copilot]

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 6 comments.