@salesforce/ui-bundle-template-app-react-template-b2e 1.117.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/LICENSE.txt +82 -0
  2. package/README.md +52 -0
  3. package/dist/.forceignore +15 -0
  4. package/dist/.husky/pre-commit +4 -0
  5. package/dist/.prettierignore +11 -0
  6. package/dist/.prettierrc +17 -0
  7. package/dist/AGENT.md +193 -0
  8. package/dist/CHANGELOG.md +2128 -0
  9. package/dist/README.md +52 -0
  10. package/dist/config/project-scratch-def.json +13 -0
  11. package/dist/eslint.config.js +7 -0
  12. package/dist/force-app/main/default/uiBundles/reactinternalapp/.forceignore +15 -0
  13. package/dist/force-app/main/default/uiBundles/reactinternalapp/.graphqlrc.yml +2 -0
  14. package/dist/force-app/main/default/uiBundles/reactinternalapp/.prettierignore +9 -0
  15. package/dist/force-app/main/default/uiBundles/reactinternalapp/.prettierrc +11 -0
  16. package/dist/force-app/main/default/uiBundles/reactinternalapp/CHANGELOG.md +10 -0
  17. package/dist/force-app/main/default/uiBundles/reactinternalapp/README.md +35 -0
  18. package/dist/force-app/main/default/uiBundles/reactinternalapp/codegen.yml +95 -0
  19. package/dist/force-app/main/default/uiBundles/reactinternalapp/components.json +18 -0
  20. package/dist/force-app/main/default/uiBundles/reactinternalapp/e2e/app.spec.ts +17 -0
  21. package/dist/force-app/main/default/uiBundles/reactinternalapp/eslint.config.js +169 -0
  22. package/dist/force-app/main/default/uiBundles/reactinternalapp/index.html +12 -0
  23. package/dist/force-app/main/default/uiBundles/reactinternalapp/package.json +69 -0
  24. package/dist/force-app/main/default/uiBundles/reactinternalapp/playwright.config.ts +24 -0
  25. package/dist/force-app/main/default/uiBundles/reactinternalapp/reactinternalapp.uibundle-meta.xml +7 -0
  26. package/dist/force-app/main/default/uiBundles/reactinternalapp/scripts/get-graphql-schema.mjs +68 -0
  27. package/dist/force-app/main/default/uiBundles/reactinternalapp/scripts/rewrite-e2e-assets.mjs +23 -0
  28. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/api/account/accountSearchService.ts +46 -0
  29. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/api/account/query/distinctAccountIndustries.graphql +19 -0
  30. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/api/account/query/distinctAccountTypes.graphql +19 -0
  31. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/api/account/query/getAccountDetail.graphql +121 -0
  32. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/api/account/query/searchAccounts.graphql +51 -0
  33. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/api/graphql-operations-types.ts +11260 -0
  34. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/api/graphqlClient.ts +25 -0
  35. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/app.tsx +17 -0
  36. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/appLayout.tsx +85 -0
  37. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/icons/book.svg +3 -0
  38. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/icons/copy.svg +4 -0
  39. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/icons/rocket.svg +3 -0
  40. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/icons/star.svg +3 -0
  41. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/images/codey-1.png +0 -0
  42. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/images/codey-2.png +0 -0
  43. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/images/codey-3.png +0 -0
  44. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/assets/images/vibe-codey.svg +194 -0
  45. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/AgentforceConversationClient.tsx +168 -0
  46. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/__inherit_AgentforceConversationClient.tsx +3 -0
  47. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/alerts/status-alert.tsx +49 -0
  48. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/layouts/card-layout.tsx +29 -0
  49. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/alert.tsx +76 -0
  50. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/badge.tsx +48 -0
  51. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/breadcrumb.tsx +109 -0
  52. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/button.tsx +67 -0
  53. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/calendar.tsx +232 -0
  54. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/card.tsx +103 -0
  55. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/checkbox.tsx +32 -0
  56. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/collapsible.tsx +33 -0
  57. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/datePicker.tsx +127 -0
  58. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/dialog.tsx +162 -0
  59. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/field.tsx +237 -0
  60. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/index.ts +84 -0
  61. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/input.tsx +19 -0
  62. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/label.tsx +22 -0
  63. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/pagination.tsx +132 -0
  64. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/popover.tsx +89 -0
  65. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/select.tsx +193 -0
  66. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/separator.tsx +26 -0
  67. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/skeleton.tsx +14 -0
  68. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/sonner.tsx +20 -0
  69. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/spinner.tsx +16 -0
  70. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/table.tsx +114 -0
  71. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/components/ui/tabs.tsx +88 -0
  72. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/api/accountSearchService.ts +46 -0
  73. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/api/query/distinctAccountIndustries.graphql +19 -0
  74. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/api/query/distinctAccountTypes.graphql +19 -0
  75. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/api/query/getAccountDetail.graphql +121 -0
  76. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/api/query/searchAccounts.graphql +51 -0
  77. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/pages/AccountObjectDetailPage.tsx +357 -0
  78. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/pages/AccountSearch.tsx +312 -0
  79. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/__examples__/pages/Home.tsx +34 -0
  80. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/api/objectSearchService.ts +84 -0
  81. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/ActiveFilters.tsx +89 -0
  82. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/FilterContext.tsx +83 -0
  83. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/ObjectBreadcrumb.tsx +66 -0
  84. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/PaginationControls.tsx +109 -0
  85. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/SearchBar.tsx +41 -0
  86. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/SortControl.tsx +143 -0
  87. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/BooleanFilter.tsx +78 -0
  88. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/DateFilter.tsx +128 -0
  89. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/DateRangeFilter.tsx +70 -0
  90. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/FilterFieldWrapper.tsx +33 -0
  91. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/MultiSelectFilter.tsx +97 -0
  92. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/NumericRangeFilter.tsx +163 -0
  93. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/SearchFilter.tsx +50 -0
  94. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/SelectFilter.tsx +97 -0
  95. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/components/filters/TextFilter.tsx +91 -0
  96. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/hooks/useAsyncData.ts +54 -0
  97. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/hooks/useCachedAsyncData.ts +184 -0
  98. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/hooks/useDebouncedCallback.ts +34 -0
  99. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/hooks/useObjectSearchParams.ts +252 -0
  100. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/utils/debounce.ts +25 -0
  101. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/utils/fieldUtils.ts +29 -0
  102. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/utils/filterUtils.ts +395 -0
  103. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/utils/sortUtils.ts +38 -0
  104. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/index.ts +6 -0
  105. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/lib/utils.ts +6 -0
  106. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/navigationMenu.tsx +80 -0
  107. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/pages/AccountObjectDetailPage.tsx +361 -0
  108. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/pages/AccountSearch.tsx +305 -0
  109. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/pages/Home.tsx +34 -0
  110. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/pages/NotFound.tsx +18 -0
  111. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/router-utils.tsx +35 -0
  112. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/routes.tsx +32 -0
  113. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/styles/global.css +135 -0
  114. package/dist/force-app/main/default/uiBundles/reactinternalapp/src/types/conversation.ts +33 -0
  115. package/dist/force-app/main/default/uiBundles/reactinternalapp/tsconfig.json +42 -0
  116. package/dist/force-app/main/default/uiBundles/reactinternalapp/tsconfig.node.json +13 -0
  117. package/dist/force-app/main/default/uiBundles/reactinternalapp/ui-bundle.json +7 -0
  118. package/dist/force-app/main/default/uiBundles/reactinternalapp/vite-env.d.ts +1 -0
  119. package/dist/force-app/main/default/uiBundles/reactinternalapp/vite.config.ts +106 -0
  120. package/dist/force-app/main/default/uiBundles/reactinternalapp/vitest-env.d.ts +2 -0
  121. package/dist/force-app/main/default/uiBundles/reactinternalapp/vitest.config.ts +11 -0
  122. package/dist/force-app/main/default/uiBundles/reactinternalapp/vitest.setup.ts +1 -0
  123. package/dist/jest.config.js +6 -0
  124. package/dist/package-lock.json +9995 -0
  125. package/dist/package.json +40 -0
  126. package/dist/scripts/apex/hello.apex +10 -0
  127. package/dist/scripts/graphql-search.sh +191 -0
  128. package/dist/scripts/prepare-import-unique-fields.js +122 -0
  129. package/dist/scripts/setup-cli.mjs +563 -0
  130. package/dist/scripts/sf-project-setup.mjs +66 -0
  131. package/dist/scripts/soql/account.soql +6 -0
  132. package/dist/sfdx-project.json +12 -0
  133. package/package.json +40 -0
@@ -0,0 +1,252 @@
1
+ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
2
+ import { useSearchParams } from "react-router";
3
+ import type { FilterFieldConfig, ActiveFilterValue } from "../utils/filterUtils";
4
+ import type { SortFieldConfig, SortState } from "../utils/sortUtils";
5
+ import { filtersToSearchParams, searchParamsToFilters, buildFilter } from "../utils/filterUtils";
6
+ import { buildOrderBy } from "../utils/sortUtils";
7
+ import { debounce } from "../utils/debounce";
8
+
9
+ /** How long to wait before flushing local state changes to the URL. */
10
+ const URL_SYNC_DEBOUNCE_MS = 300;
11
+
12
+ export interface PaginationConfig {
13
+ defaultPageSize: number;
14
+ validPageSizes: number[];
15
+ }
16
+
17
+ export interface UseObjectSearchParamsReturn<TFilter, TOrderBy> {
18
+ filters: {
19
+ active: ActiveFilterValue[];
20
+ set: (field: string, value: ActiveFilterValue | undefined) => void;
21
+ remove: (field: string) => void;
22
+ };
23
+ sort: {
24
+ current: SortState | null;
25
+ set: (sort: SortState | null) => void;
26
+ };
27
+ query: { where: TFilter; orderBy: TOrderBy };
28
+ pagination: {
29
+ pageSize: number;
30
+ pageIndex: number;
31
+ afterCursor: string | undefined;
32
+ setPageSize: (size: number) => void;
33
+ goToNextPage: (cursor: string) => void;
34
+ goToPreviousPage: () => void;
35
+ };
36
+ resetAll: () => void;
37
+ }
38
+
39
+ /**
40
+ * Manages filter, sort, and cursor-based pagination state for an object search page.
41
+ *
42
+ * ## State model
43
+ * Local React state is the primary driver for instant UI updates.
44
+ * URL search params act as the durable source of truth so that a page
45
+ * refresh or shared link restores the same view. Changes are synced to
46
+ * the URL via a debounced write (300 ms) to avoid excessive history entries.
47
+ *
48
+ * ## Return shape
49
+ * Returns memoized groups so each group's reference is stable unless its
50
+ * contents change — safe to pass directly as props to `React.memo` children.
51
+ *
52
+ * - `filters` — active filter values + set/remove callbacks
53
+ * - `sort` — current sort state + set callback
54
+ * - `query` — derived `where` / `orderBy` objects ready for the API
55
+ * - `pagination` — page size, page index, cursor, and navigation callbacks
56
+ * - `resetAll` — clears all filters, sort, and pagination in one call
57
+ */
58
+ export function useObjectSearchParams<TFilter, TOrderBy>(
59
+ filterConfigs: FilterFieldConfig[],
60
+ _sortConfigs?: SortFieldConfig[],
61
+ paginationConfig?: PaginationConfig,
62
+ ) {
63
+ const defaultPageSize = paginationConfig?.defaultPageSize ?? 10;
64
+ const validPageSizes = useMemo(
65
+ () => paginationConfig?.validPageSizes ?? [defaultPageSize],
66
+ [paginationConfig?.validPageSizes, defaultPageSize],
67
+ );
68
+ const [searchParams, setSearchParams] = useSearchParams();
69
+
70
+ // Seed local state from URL on initial load
71
+ const initial = useMemo(
72
+ () => searchParamsToFilters(searchParams, filterConfigs),
73
+ // Only run on mount — local state takes over after that, no deps needed
74
+ // eslint-disable-next-line react-hooks/exhaustive-deps
75
+ [],
76
+ );
77
+
78
+ const [filters, setFilters] = useState<ActiveFilterValue[]>(initial.filters);
79
+ const [sort, setLocalSort] = useState<SortState | null>(initial.sort);
80
+
81
+ // Pagination — cursor-based with a stack to support "previous page" navigation.
82
+ const getValidPageSize = useCallback(
83
+ (size: number) => (validPageSizes.includes(size) ? size : defaultPageSize),
84
+ [validPageSizes, defaultPageSize],
85
+ );
86
+
87
+ const [pageSize, setPageSizeState] = useState<number>(
88
+ getValidPageSize(initial.pageSize ?? defaultPageSize),
89
+ );
90
+ const [pageIndex, setPageIndex] = useState(initial.pageIndex);
91
+ const [afterCursor, setAfterCursor] = useState<string | undefined>(undefined);
92
+ const cursorStackRef = useRef<string[]>([]);
93
+
94
+ // Debounced URL sync — keeps URL in sync without blocking the UI
95
+ const syncToUrl = useCallback(
96
+ (
97
+ nextFilters: ActiveFilterValue[],
98
+ nextSort: SortState | null,
99
+ nextPageSize?: number,
100
+ nextPageIndex?: number,
101
+ ) => {
102
+ const params = filtersToSearchParams(nextFilters, nextSort, nextPageSize, nextPageIndex);
103
+ setSearchParams(params, { replace: true });
104
+ },
105
+ [setSearchParams],
106
+ );
107
+
108
+ const debouncedSyncRef = useRef(debounce(syncToUrl, URL_SYNC_DEBOUNCE_MS));
109
+ useEffect(() => {
110
+ debouncedSyncRef.current = debounce(syncToUrl, URL_SYNC_DEBOUNCE_MS);
111
+ }, [syncToUrl]);
112
+
113
+ // Snapshot ref — lets callbacks read the latest state without being
114
+ // recreated on every render (avoids infinite useCallback chains).
115
+ const stateRef = useRef({ filters, sort, pageSize, pageIndex });
116
+ stateRef.current = { filters, sort, pageSize, pageIndex };
117
+
118
+ // Any filter/sort change resets pagination to the first page.
119
+ const resetPagination = useCallback(() => {
120
+ setPageIndex(0);
121
+ setAfterCursor(undefined);
122
+ cursorStackRef.current = [];
123
+ }, []);
124
+
125
+ // -- Filter callbacks -------------------------------------------------------
126
+
127
+ const setFilter = useCallback(
128
+ (field: string, value: ActiveFilterValue | undefined) => {
129
+ const { sort: s, pageSize: ps } = stateRef.current;
130
+ setFilters((prev) => {
131
+ const next = prev.filter((f) => f.field !== field);
132
+ if (value) next.push(value);
133
+ debouncedSyncRef.current(next, s, ps);
134
+ return next;
135
+ });
136
+ resetPagination();
137
+ },
138
+ [resetPagination],
139
+ );
140
+
141
+ const removeFilter = useCallback(
142
+ (field: string) => {
143
+ const { sort: s, pageSize: ps } = stateRef.current;
144
+ setFilters((prev) => {
145
+ const next = prev.filter((f) => f.field !== field);
146
+ debouncedSyncRef.current(next, s, ps);
147
+ return next;
148
+ });
149
+ resetPagination();
150
+ },
151
+ [resetPagination],
152
+ );
153
+
154
+ // -- Sort callback ----------------------------------------------------------
155
+
156
+ const setSort = useCallback(
157
+ (nextSort: SortState | null) => {
158
+ const { filters: f, pageSize: ps } = stateRef.current;
159
+ setLocalSort(nextSort);
160
+ debouncedSyncRef.current(f, nextSort, ps);
161
+ resetPagination();
162
+ },
163
+ [resetPagination],
164
+ );
165
+
166
+ // -- Reset ------------------------------------------------------------------
167
+
168
+ const resetAll = useCallback(() => {
169
+ setFilters([]);
170
+ setLocalSort(null);
171
+ resetPagination();
172
+ syncToUrl([], null, defaultPageSize, 0);
173
+ setPageSizeState(defaultPageSize);
174
+ }, [syncToUrl, resetPagination, defaultPageSize]);
175
+
176
+ // -- Pagination callbacks ---------------------------------------------------
177
+ // Uses a cursor stack to track visited pages. "Next" pushes the current
178
+ // endCursor onto the stack; "Previous" pops it to restore the prior cursor.
179
+
180
+ const goToNextPage = useCallback((endCursor: string) => {
181
+ cursorStackRef.current = [...cursorStackRef.current, endCursor];
182
+ setAfterCursor(endCursor);
183
+ setPageIndex((prev) => {
184
+ const nextIndex = prev + 1;
185
+ const { filters: f, sort: s, pageSize: ps } = stateRef.current;
186
+ debouncedSyncRef.current(f, s, ps, nextIndex);
187
+ return nextIndex;
188
+ });
189
+ }, []);
190
+
191
+ const goToPreviousPage = useCallback(() => {
192
+ const stack = cursorStackRef.current;
193
+ const next = stack.slice(0, -1);
194
+ cursorStackRef.current = next;
195
+ setAfterCursor(next.length > 0 ? next[next.length - 1] : undefined);
196
+ setPageIndex((prev) => {
197
+ const nextIndex = Math.max(0, prev - 1);
198
+ const { filters: f, sort: s, pageSize: ps } = stateRef.current;
199
+ debouncedSyncRef.current(f, s, ps, nextIndex);
200
+ return nextIndex;
201
+ });
202
+ }, []);
203
+
204
+ const setPageSize = useCallback(
205
+ (newSize: number) => {
206
+ const validated = getValidPageSize(newSize);
207
+ const { filters: f, sort: s } = stateRef.current;
208
+ setPageSizeState(validated);
209
+ resetPagination();
210
+ debouncedSyncRef.current(f, s, validated);
211
+ },
212
+ [resetPagination, getValidPageSize],
213
+ );
214
+
215
+ // -- Derived query objects ---------------------------------------------------
216
+ // Translate local filter/sort state into API-ready `where` and `orderBy`.
217
+
218
+ const where = useMemo(
219
+ () => buildFilter<TFilter>(filters, filterConfigs),
220
+ [filters, filterConfigs],
221
+ );
222
+
223
+ const orderBy = useMemo(() => buildOrderBy<TOrderBy>(sort), [sort]);
224
+
225
+ // -- Memoized return groups -------------------------------------------------
226
+ // Each group is individually memoized so its object reference stays stable
227
+ // unless the contained values change. This makes it safe to pass a group
228
+ // (e.g. `pagination`) directly as props to a React.memo child without
229
+ // causing unnecessary re-renders.
230
+
231
+ const filtersGroup = useMemo(
232
+ () => ({ active: filters, set: setFilter, remove: removeFilter }),
233
+ [filters, setFilter, removeFilter],
234
+ );
235
+
236
+ const sortGroup = useMemo(() => ({ current: sort, set: setSort }), [sort, setSort]);
237
+
238
+ const query = useMemo(() => ({ where, orderBy }), [where, orderBy]);
239
+
240
+ const pagination = useMemo(
241
+ () => ({ pageSize, pageIndex, afterCursor, setPageSize, goToNextPage, goToPreviousPage }),
242
+ [pageSize, pageIndex, afterCursor, setPageSize, goToNextPage, goToPreviousPage],
243
+ );
244
+
245
+ return {
246
+ filters: filtersGroup,
247
+ sort: sortGroup,
248
+ query,
249
+ pagination,
250
+ resetAll,
251
+ };
252
+ }
@@ -0,0 +1,25 @@
1
+ /** Default debounce delay for keystroke-driven filter inputs (search, text, numeric). */
2
+ export const FILTER_DEBOUNCE_MS = 300;
3
+
4
+ /**
5
+ * Creates a debounced version of the provided function.
6
+ *
7
+ * Each call to the returned function resets the internal timer. The wrapped
8
+ * function is only invoked once the timer expires without being reset. This
9
+ * makes it ideal for rate-limiting high-frequency events like input changes.
10
+ *
11
+ * @typeParam T - The function signature to debounce.
12
+ * @param fn - The function to debounce.
13
+ * @param ms - The debounce delay in milliseconds.
14
+ * @returns A new function with the same signature that delays execution.
15
+ */
16
+ export function debounce<T extends (...args: any[]) => void>(
17
+ fn: T,
18
+ ms: number,
19
+ ): (...args: Parameters<T>) => void {
20
+ let timer: ReturnType<typeof setTimeout> | undefined;
21
+ return (...args: Parameters<T>) => {
22
+ clearTimeout(timer);
23
+ timer = setTimeout(() => fn(...args), ms);
24
+ };
25
+ }
@@ -0,0 +1,29 @@
1
+ export function fieldValue(
2
+ field: { displayValue?: string | null; value?: unknown } | null | undefined,
3
+ ): string | null {
4
+ if (field?.displayValue != null) return field.displayValue;
5
+ if (field?.value != null) return String(field.value);
6
+ return null;
7
+ }
8
+
9
+ export function getAddressFieldLines(address: {
10
+ street?: string | null;
11
+ city?: string | null;
12
+ state?: string | null;
13
+ postalCode?: string | null;
14
+ country?: string | null;
15
+ }) {
16
+ const cityStateZip = [address.city, address.state].filter(Boolean).join(", ");
17
+ const cityStateZipLine = [cityStateZip, address.postalCode].filter(Boolean).join(" ");
18
+ const lines = [address.street, cityStateZipLine, address.country].filter(Boolean);
19
+ if (lines.length === 0) return null;
20
+ return lines;
21
+ }
22
+
23
+ export function formatDateTimeField(
24
+ value?: string | null,
25
+ ...args: Parameters<Date["toLocaleString"]>
26
+ ) {
27
+ if (!value) return null;
28
+ return new Date(value).toLocaleString(...args);
29
+ }
@@ -0,0 +1,395 @@
1
+ /**
2
+ * filterUtils.ts
3
+ *
4
+ * Centralizes all filter-related transformations for the object search feature.
5
+ * This module handles two distinct concerns:
6
+ *
7
+ * 1. **URL serialization** — Converting filter/sort state to and from
8
+ * URLSearchParams so that search criteria can be bookmarked, shared, and
9
+ * restored on page load.
10
+ *
11
+ * 2. **GraphQL query building** — Converting the same filter state into the
12
+ * `where` clause shape expected by the GraphQL API.
13
+ *
14
+ * Both concerns operate on the shared {@link ActiveFilterValue} type, which
15
+ * represents a single active filter with a field name, filter type, and one or
16
+ * more values (value, min, max).
17
+ */
18
+
19
+ import type { SortState } from "./sortUtils";
20
+
21
+ export type FilterFieldType =
22
+ | "text"
23
+ | "picklist"
24
+ | "numeric"
25
+ | "boolean"
26
+ | "date"
27
+ | "daterange"
28
+ | "datetime"
29
+ | "datetimerange"
30
+ | "multipicklist"
31
+ | "search";
32
+
33
+ export type FilterFieldConfig<TFieldName extends string = string> = {
34
+ field: TFieldName;
35
+ label: string;
36
+ type: FilterFieldType;
37
+ placeholder?: string;
38
+ /** Required for picklist type. */
39
+ options?: Array<{ value: string; label: string }>;
40
+ helpText?: string;
41
+ /** Required for search type — the fields to match against with `or`. */
42
+ searchFields?: string[];
43
+ };
44
+
45
+ export type ActiveFilterValue<TFieldName extends string = string> = {
46
+ field: TFieldName;
47
+ label: string;
48
+ type: FilterFieldType;
49
+ value?: string;
50
+ min?: string;
51
+ max?: string;
52
+ };
53
+
54
+ // ---------------------------------------------------------------------------
55
+ // URL Serialization
56
+ // ---------------------------------------------------------------------------
57
+
58
+ /**
59
+ * Prefix applied to all filter-related URL search params.
60
+ * This namespaces filter params so they don't collide with other query params
61
+ * (e.g. pagination, feature flags).
62
+ *
63
+ * @example "f.Industry=Technology" or "f.AnnualRevenue.min=1000000"
64
+ */
65
+ const FILTER_PREFIX = "f.";
66
+
67
+ /** URL param key for the multi-field search term. */
68
+ const SEARCH_KEY = "q";
69
+
70
+ /** URL param key for the currently sorted field name. */
71
+ const SORT_KEY = "sort";
72
+
73
+ /** URL param key for the sort direction (ASC or DESC). */
74
+ const DIR_KEY = "dir";
75
+
76
+ /** URL param key for the page size preference. */
77
+ const PAGE_SIZE_KEY = "ps";
78
+ const PAGE_KEY = "page";
79
+
80
+ /**
81
+ * Serializes filter and sort state into URLSearchParams.
82
+ *
83
+ * Encoding scheme:
84
+ * - Simple values (text, picklist, boolean, multipicklist):
85
+ * `f.<field>=<value>`
86
+ * - Range values (numeric, date, daterange):
87
+ * `f.<field>.min=<min>` and/or `f.<field>.max=<max>`
88
+ * - Sort: `sort=<field>&dir=ASC|DESC`
89
+ *
90
+ * @param filters - The currently active filters to serialize.
91
+ * @param sort - The current sort state, or null if no sort is applied.
92
+ * @returns A URLSearchParams instance representing the full search state.
93
+ *
94
+ * @example
95
+ * ```ts
96
+ * const params = filtersToSearchParams(
97
+ * [{ field: "Industry", type: "picklist", value: "Technology" }],
98
+ * { field: "Name", direction: "ASC" },
99
+ * );
100
+ * // params.toString() => "f.Industry=Technology&sort=Name&dir=ASC"
101
+ * ```
102
+ */
103
+ export function filtersToSearchParams(
104
+ filters: ActiveFilterValue[],
105
+ sort: SortState | null,
106
+ pageSize?: number,
107
+ pageIndex?: number,
108
+ ): URLSearchParams {
109
+ const params = new URLSearchParams();
110
+
111
+ for (const filter of filters) {
112
+ if (filter.type === "search") {
113
+ if (filter.value) params.set(SEARCH_KEY, filter.value);
114
+ continue;
115
+ }
116
+ if (filter.value !== undefined && filter.value !== "") {
117
+ params.set(`${FILTER_PREFIX}${filter.field}`, filter.value);
118
+ }
119
+ if (filter.min !== undefined && filter.min !== "") {
120
+ params.set(`${FILTER_PREFIX}${filter.field}.min`, filter.min);
121
+ }
122
+ if (filter.max !== undefined && filter.max !== "") {
123
+ params.set(`${FILTER_PREFIX}${filter.field}.max`, filter.max);
124
+ }
125
+ }
126
+
127
+ if (sort) {
128
+ params.set(SORT_KEY, sort.field);
129
+ params.set(DIR_KEY, sort.direction);
130
+ }
131
+
132
+ if (pageSize !== undefined) {
133
+ params.set(PAGE_SIZE_KEY, String(pageSize));
134
+ }
135
+
136
+ if (pageIndex !== undefined && pageIndex > 0) {
137
+ params.set(PAGE_KEY, String(pageIndex + 1));
138
+ }
139
+
140
+ return params;
141
+ }
142
+
143
+ /**
144
+ * Deserializes URLSearchParams back into filter and sort state.
145
+ *
146
+ * Requires the full list of filter configs so it knows which URL params to look
147
+ * for and what type each filter is. Params that don't match a known config are
148
+ * silently ignored, making this safe against stale or hand-edited URLs.
149
+ *
150
+ * @param params - The URLSearchParams to parse (typically from the browser URL).
151
+ * @param configs - The filter field configurations defining available filters.
152
+ * @returns An object containing the deserialized `filters` array and `sort` state.
153
+ *
154
+ * @example
155
+ * ```ts
156
+ * const url = new URLSearchParams("f.Industry=Technology&sort=Name&dir=ASC");
157
+ * const { filters, sort } = searchParamsToFilters(url, filterConfigs);
158
+ * // filters => [{ field: "Industry", type: "picklist", value: "Technology" }]
159
+ * // sort => { field: "Name", direction: "ASC" }
160
+ * ```
161
+ */
162
+ export function searchParamsToFilters(
163
+ params: URLSearchParams,
164
+ configs: FilterFieldConfig[],
165
+ ): {
166
+ filters: ActiveFilterValue[];
167
+ sort: SortState | null;
168
+ pageSize: number | undefined;
169
+ pageIndex: number;
170
+ } {
171
+ const filters: ActiveFilterValue[] = [];
172
+
173
+ for (const config of configs) {
174
+ const { field, label, type } = config;
175
+
176
+ if (type === "search") {
177
+ const q = params.get(SEARCH_KEY);
178
+ if (q) {
179
+ filters.push({ field, label, type: "search", value: q });
180
+ }
181
+ continue;
182
+ }
183
+
184
+ const value = params.get(`${FILTER_PREFIX}${field}`) ?? undefined;
185
+ const min = params.get(`${FILTER_PREFIX}${field}.min`) ?? undefined;
186
+ const max = params.get(`${FILTER_PREFIX}${field}.max`) ?? undefined;
187
+
188
+ const hasValue = value !== undefined && value !== "";
189
+ const hasRange = (min !== undefined && min !== "") || (max !== undefined && max !== "");
190
+
191
+ if (hasValue || hasRange) {
192
+ filters.push({ field, label, type, value, min, max });
193
+ }
194
+ }
195
+
196
+ let sort: SortState | null = null;
197
+ const sortField = params.get(SORT_KEY);
198
+ const sortDir = params.get(DIR_KEY);
199
+ if (sortField) {
200
+ sort = {
201
+ field: sortField,
202
+ direction: sortDir === "DESC" ? "DESC" : "ASC",
203
+ };
204
+ }
205
+
206
+ const pageSizeRaw = params.get(PAGE_SIZE_KEY);
207
+ const pageSize = pageSizeRaw ? parseInt(pageSizeRaw, 10) : undefined;
208
+
209
+ const pageRaw = params.get(PAGE_KEY);
210
+ const page = pageRaw ? parseInt(pageRaw, 10) : 1;
211
+ const pageIndex = !isNaN(page) && page > 1 ? page - 1 : 0;
212
+
213
+ return {
214
+ filters,
215
+ sort,
216
+ pageSize: pageSize && !isNaN(pageSize) ? pageSize : undefined,
217
+ pageIndex,
218
+ };
219
+ }
220
+
221
+ // ---------------------------------------------------------------------------
222
+ // GraphQL Filter Building
223
+ // ---------------------------------------------------------------------------
224
+
225
+ /**
226
+ * Converts an array of active filter values into a GraphQL `where` clause.
227
+ *
228
+ * Each filter is individually converted to a clause via {@link buildSingleFilter},
229
+ * then multiple clauses are combined with a top-level `and` operator. This ensures
230
+ * all active filters are applied simultaneously (intersection semantics).
231
+ *
232
+ * @typeParam TFilter - The GraphQL filter input type (e.g. `AccountFilterInput`).
233
+ * @param filters - The active filters to convert.
234
+ * @returns A filter object for the GraphQL `where` variable, or `undefined` if
235
+ * no filters are active (which tells the API to return unfiltered results).
236
+ *
237
+ * @example
238
+ * ```ts
239
+ * const where = buildFilter<AccountFilterInput>([
240
+ * { field: "Industry", type: "picklist", value: "Technology" },
241
+ * { field: "AnnualRevenue", type: "numeric", min: "1000000" },
242
+ * ]);
243
+ * // where => { and: [
244
+ * // { Industry: { eq: "Technology" } },
245
+ * // { AnnualRevenue: { gte: 1000000 } },
246
+ * // ]}
247
+ * ```
248
+ */
249
+ export function buildFilter<TFilter>(
250
+ filters: ActiveFilterValue[],
251
+ configs: FilterFieldConfig[],
252
+ ): TFilter | undefined {
253
+ const configMap = new Map(configs.map((c) => [c.field, c]));
254
+ const clauses: TFilter[] = [];
255
+
256
+ for (const filter of filters) {
257
+ const clause = buildSingleFilter<TFilter>(filter, configMap.get(filter.field));
258
+ if (clause) clauses.push(clause);
259
+ }
260
+
261
+ if (clauses.length === 0) return undefined;
262
+ if (clauses.length === 1) return clauses[0];
263
+ return { and: clauses } as TFilter;
264
+ }
265
+
266
+ /**
267
+ * Converts a YYYY-MM-DD date string to a full ISO-8601 datetime at midnight UTC.
268
+ * Used as the inclusive lower bound for date range queries.
269
+ */
270
+ function toStartOfDay(dateStr: string): string {
271
+ return `${dateStr}T00:00:00.000Z`;
272
+ }
273
+
274
+ /**
275
+ * Converts a YYYY-MM-DD date string to a full ISO-8601 datetime at the last
276
+ * millisecond of the day in UTC. Used as the inclusive upper bound for date
277
+ * range queries.
278
+ */
279
+ function toEndOfDay(dateStr: string): string {
280
+ return `${dateStr}T23:59:59.999Z`;
281
+ }
282
+
283
+ /**
284
+ * Converts a single active filter value into a GraphQL filter clause.
285
+ *
286
+ * Supported filter types and their GraphQL mappings:
287
+ *
288
+ * | Type | GraphQL operator(s) | Example output |
289
+ * |-----------------|---------------------|----------------------------------------------------------|
290
+ * | `text` | `like` | `{ Name: { like: "%Acme%" } }` |
291
+ * | `picklist` | `eq` | `{ Industry: { eq: "Technology" } }` |
292
+ * | `multipicklist` | `eq` or `in` | `{ Type: { in: ["A", "B"] } }` |
293
+ * | `numeric` | `gte` / `lte` | `{ Revenue: { gte: 1000, lte: 5000 } }` |
294
+ * | `boolean` | `eq` | `{ IsActive: { eq: true } }` |
295
+ * | `date` | dynamic operator | `{ CreatedDate: { gte: { value: "..." } } }` |
296
+ * | `daterange` | `gte` + `lte` | Combined with `and` if both bounds set |
297
+ * | `search` | `like` + `or` | `{ or: [{ Name: { like: "%x%" } }, { Phone: { like: "%x%" } }] }` |
298
+ *
299
+ * The `search` type uses `config.searchFields` to build an `or` clause that
300
+ * matches the search term across multiple fields simultaneously (union semantics).
301
+ *
302
+ * @param filter - The active filter value to convert.
303
+ * @param config - The corresponding field config. Required for `search` type
304
+ * (provides `searchFields`); optional for all other types.
305
+ * @returns A single filter clause, or `null` if the filter has no meaningful value.
306
+ */
307
+ function buildSingleFilter<TFilter>(
308
+ filter: ActiveFilterValue,
309
+ config?: FilterFieldConfig,
310
+ ): TFilter | null {
311
+ const { field, type, value, min, max } = filter;
312
+
313
+ switch (type) {
314
+ case "text": {
315
+ if (!value) return null;
316
+ return { [field]: { like: `%${value}%` } } as TFilter;
317
+ }
318
+ case "picklist": {
319
+ if (!value) return null;
320
+ return { [field]: { eq: value } } as TFilter;
321
+ }
322
+ case "numeric": {
323
+ if (!min && !max) return null;
324
+ const ops: Record<string, number> = {};
325
+ if (min) ops.gte = Number(min);
326
+ if (max) ops.lte = Number(max);
327
+ return { [field]: ops } as TFilter;
328
+ }
329
+ case "boolean": {
330
+ if (value === undefined || value === "") return null;
331
+ return { [field]: { eq: value === "true" } } as TFilter;
332
+ }
333
+ case "multipicklist": {
334
+ if (!value) return null;
335
+ const values = value.split(",");
336
+ if (values.length === 1) {
337
+ return { [field]: { eq: values[0] } } as TFilter;
338
+ }
339
+ return { [field]: { in: values } } as TFilter;
340
+ }
341
+ case "date": {
342
+ if (!min && !max) return null;
343
+ const op = value ?? (min ? "gte" : "lte");
344
+ const dateStr = min ?? max;
345
+ return { [field]: { [op]: { value: dateStr } } } as TFilter;
346
+ }
347
+ case "daterange": {
348
+ if (!min && !max) return null;
349
+ const clauses: TFilter[] = [];
350
+ if (min) {
351
+ clauses.push({
352
+ [field]: { gte: { value: min } },
353
+ } as TFilter);
354
+ }
355
+ if (max) {
356
+ clauses.push({
357
+ [field]: { lte: { value: max } },
358
+ } as TFilter);
359
+ }
360
+ return clauses.length === 1 ? clauses[0] : ({ and: clauses } as TFilter);
361
+ }
362
+ case "datetime": {
363
+ if (!min && !max) return null;
364
+ const op = value ?? (min ? "gte" : "lte");
365
+ const dateStr = min ?? max;
366
+ const isoStr = op === "gte" || op === "gt" ? toStartOfDay(dateStr!) : toEndOfDay(dateStr!);
367
+ return { [field]: { [op]: { value: isoStr } } } as TFilter;
368
+ }
369
+ case "datetimerange": {
370
+ if (!min && !max) return null;
371
+ const clauses: TFilter[] = [];
372
+ if (min) {
373
+ clauses.push({
374
+ [field]: { gte: { value: toStartOfDay(min) } },
375
+ } as TFilter);
376
+ }
377
+ if (max) {
378
+ clauses.push({
379
+ [field]: { lte: { value: toEndOfDay(max) } },
380
+ } as TFilter);
381
+ }
382
+ return clauses.length === 1 ? clauses[0] : ({ and: clauses } as TFilter);
383
+ }
384
+ case "search": {
385
+ if (!value) return null;
386
+ const searchFields = config?.searchFields ?? [];
387
+ if (searchFields.length === 0) return null;
388
+ const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter);
389
+ if (clauses.length === 1) return clauses[0];
390
+ return { or: clauses } as TFilter;
391
+ }
392
+ default:
393
+ return null;
394
+ }
395
+ }