Implement pagination support in ResourceList

[gciotola]

What I did

Added support for classic prev/next pagination to useResourceList, alongside the existing infinite scroll mode. The new paginationType prop controls which mode is used — "infinite" remains the default, so there are no breaking changes.

Changes

• Added paginationType?: "infinite" | "pagination" to UseResourceListConfig
• Renamed infiniteFetcher → listFetcher (supports both modes internally)
• Added PaginationInfo component with prev/next buttons, page range display, and scroll-to-top on page change
• useResourceList returns a Pagination component when paginationType: "pagination" is set (type-safe via function overloads)
• useResourceFilters → FilteredList forwards paginationType automatically
• Pagination mode is restricted to Core API (not Metrics API)

Usage examples

Basic pagination:

const { ResourceList, Pagination } = useResourceList({
  type: 'orders',
  paginationType: 'pagination',
})

return (
  <>
    <ResourceList ItemTemplate={OrderTemplate} />
    <Pagination />
  </>
)

Via FilteredList (from useResourceFilters):

<FilteredList
  type="orders"
  paginationType="pagination"
  ItemTemplate={OrderTemplate}
/>

Default (infinite scroll, unchanged):

const { ResourceList } = useResourceList({ type: 'orders' })

How to test

1. Use the WithPagination or WithPaginationAsTable Storybook stories under Resources / useResourceList
2. Verify prev/next buttons are disabled while loading and on first/last page
3. Verify page range label updates correctly (e.g. 1–25 of 312)
4. Verify infinite scroll still works when paginationType is omitted

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	d1f09f7
🔍 Latest deploy log	https://app.netlify.com/projects/commercelayer-app-elements/deploys/69b2fd6f8f27af0008387d78
😎 Deploy Preview	https://deploy-preview-1049--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.

[pkg-pr-new]

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

commit: d1f09f7

[Copilot]

Pull request overview

Adds classic prev/next pagination as an alternative to infinite scrolling for the useResourceList / FilteredList resource listing utilities (default remains infinite scroll).

Changes:

• Introduces paginationType?: "infinite" | "pagination" and overloads useResourceList to return a Pagination component in pagination mode.
• Replaces infiniteFetcher with listFetcher supporting both infinite and classic pagination behaviors.
• Adds a PaginationInfo UI component and Storybook stories demonstrating pagination (including table variant), and forwards paginationType through useResourceFilters → FilteredList.

Reviewed changes

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

Show a summary per file

File	Description
packages/docs/src/stories/resources/useResourceList.stories.tsx	Adds Storybook examples for the new pagination mode (list + table).
packages/app-elements/src/ui/resources/useResourceList/useResourceList.tsx	Adds pagination mode, state, UI integration, and type-safe overloads.
packages/app-elements/src/ui/resources/useResourceList/reducer.ts	Updates fetcher import to listFetcher.
packages/app-elements/src/ui/resources/useResourceList/metricsApiClient.ts	Updates Resource type import to listFetcher.
packages/app-elements/src/ui/resources/useResourceList/listFetcher.ts	Renames and extends fetcher to support both infinite and page-number pagination.
packages/app-elements/src/ui/resources/useResourceList/PaginationInfo.tsx	New pagination controls UI (prev/next + range label).
packages/app-elements/src/ui/resources/useResourceFilters/useResourceFilters.tsx	Forwards paginationType and renders returned Pagination component when enabled.

---

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

You can also share your feedback on Copilot code review. Take the survey.