@wix/auto-patterns 1.17.0 → 1.19.0

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 (45) hide show
  1. package/dist/cjs/dataSourceAdapters/cms/cmsAdapter.js +0 -2
  2. package/dist/cjs/dataSourceAdapters/cms/cmsAdapter.js.map +1 -1
  3. package/dist/cjs/dataSourceAdapters/cms/fetchCmsData.js.map +1 -1
  4. package/dist/cjs/dataSourceAdapters/cms/filterUtils.js.map +1 -1
  5. package/dist/cjs/dataSourceAdapters/cms/sortUtils.js.map +1 -1
  6. package/dist/cjs/hooks/useColumns.js +7 -5
  7. package/dist/cjs/hooks/useColumns.js.map +1 -1
  8. package/dist/cjs/types/types.js.map +1 -1
  9. package/dist/docs/action_cell.md +1 -1
  10. package/dist/docs/app_config_structure.md +73 -3
  11. package/dist/docs/auto-patterns-guide.md +367 -80
  12. package/dist/docs/bulk_actions.md +1 -1
  13. package/dist/docs/collection_page.md +1 -1
  14. package/dist/docs/collection_page_actions.md +1 -1
  15. package/dist/docs/config_schema.md +184 -0
  16. package/dist/docs/custom_overrides.md +163 -4
  17. package/dist/docs/entity_page.md +0 -1
  18. package/dist/docs/index.md +5 -7
  19. package/dist/docs/schema_config.md +174 -0
  20. package/dist/docs/sdk_utilities.md +97 -0
  21. package/dist/docs/wix_fqdn_custom_data_source.md +201 -0
  22. package/dist/esm/dataSourceAdapters/cms/cmsAdapter.js +0 -2
  23. package/dist/esm/dataSourceAdapters/cms/cmsAdapter.js.map +1 -1
  24. package/dist/esm/dataSourceAdapters/cms/fetchCmsData.js.map +1 -1
  25. package/dist/esm/dataSourceAdapters/cms/filterUtils.js.map +1 -1
  26. package/dist/esm/dataSourceAdapters/cms/sortUtils.js.map +1 -1
  27. package/dist/esm/hooks/useColumns.js +3 -1
  28. package/dist/esm/hooks/useColumns.js.map +1 -1
  29. package/dist/esm/types/types.js.map +1 -1
  30. package/dist/types/dataSourceAdapters/cms/cmsAdapter.d.ts.map +1 -1
  31. package/dist/types/dataSourceAdapters/cms/fetchCmsData.d.ts +2 -3
  32. package/dist/types/dataSourceAdapters/cms/fetchCmsData.d.ts.map +1 -1
  33. package/dist/types/dataSourceAdapters/cms/filterUtils.d.ts +3 -4
  34. package/dist/types/dataSourceAdapters/cms/filterUtils.d.ts.map +1 -1
  35. package/dist/types/dataSourceAdapters/cms/sortUtils.d.ts +2 -3
  36. package/dist/types/dataSourceAdapters/cms/sortUtils.d.ts.map +1 -1
  37. package/dist/types/hooks/useColumns.d.ts.map +1 -1
  38. package/dist/types/types/types.d.ts +13 -3
  39. package/dist/types/types/types.d.ts.map +1 -1
  40. package/package.json +4 -4
  41. package/dist/docs/recipe-bulk-operations.md +0 -1352
  42. package/dist/docs/recipe-crud-operations.md +0 -805
  43. package/dist/docs/recipe-customization.md +0 -1703
  44. package/dist/docs/recipe-first-dashboard.md +0 -795
  45. package/dist/docs/sdk_and_schema.md +0 -215
@@ -121,7 +121,10 @@ export interface AppConfig {
121
121
  label?: string; // Text displayed for the action
122
122
  collection: {
123
123
  collectionId: string; // ID of the Wix Data collection
124
- entityTypeSource: 'cms'; // Data source type. Always 'cms'
124
+ entityTypeSource: 'cms' | 'custom'; // Data source type.
125
+ custom?: {
126
+ id: string;
127
+ };
125
128
  };
126
129
  create?: { // Required when type is 'create'
127
130
  mode: 'page'; // Create mode
@@ -147,7 +150,10 @@ export interface AppConfig {
147
150
  entityPageId?: string; // ID of the entity page to navigate to when clicking a row
148
151
  collection: {
149
152
  collectionId: string; // ID of the Wix Data collection
150
- entityTypeSource: 'cms'; // Data source type. Always 'cms'
153
+ entityTypeSource: 'cms' | 'custom'; // Data source type.
154
+ custom?: {
155
+ id: string;
156
+ };
151
157
  reflectQueryInUrl?: boolean; // Reflects query state (search, filters, sorting) in the browser URL. Default: false
152
158
  selectAllScope?: 'page' | 'all'; // Controls "Select All" scope. 'all' selects entire collection, 'page' selects only visible items. Default: 'all'
153
159
  selectionUpdateMode?: 'preserve' | 'clear'; // Controls selection behavior when data changes. 'preserve' maintains selections, 'clear' clears them. Default: 'clear'
@@ -403,7 +409,10 @@ export interface AppConfig {
403
409
  }[];
404
410
  };
405
411
  collectionId: string; // Related collection ID
406
- entityTypeSource: 'cms'; // Data source type. Always 'cms'
412
+ entityTypeSource: 'cms' | 'custom'; // Data source type.
413
+ custom?: {
414
+ id: string;
415
+ };
407
416
  };
408
417
  }[];
409
418
  }
@@ -434,6 +443,67 @@ type LayoutContent =
434
443
 
435
444
  ---
436
445
 
446
+ ## Filters Configuration Notes
447
+
448
+ To configure filters in a `collectionPage`, add a `filters` property inside the page's component configuration object. Each filter must reference a valid field by its `fieldId`, and the supported types are:
449
+
450
+ * `numberConfig`: used with fields of type `NUMBER`
451
+ * `dateConfig`: used with fields of type `DATETIME`
452
+ * `booleanConfig`: used with fields of type `BOOLEAN`
453
+ * `enumConfig`: used with fields of type `ARRAY` or `ARRAY_STRING`
454
+
455
+ ### Enum Configuration Implementation
456
+
457
+ When implementing enum filters, you must ask the user to provide the possible option values. Never invent or assume enum values. Here's how to properly handle enumConfig:
458
+
459
+ #### Example: User-Provided Enum Implementation
460
+
461
+ 1. First, collect the possible values from the user:
462
+ ```
463
+ User requests: "I need a filter for pet types."
464
+ You ask: "What are the possible values for pet types that should be available in the filter?"
465
+ User responds: "dog, cat, bird, rabbit, fish"
466
+ ```
467
+
468
+ 2. Then, create the `enumConfig` structure:
469
+ ```json
470
+ "enumConfig": {
471
+ "options": [
472
+ { "value": "dog", "label": "Dog" },
473
+ { "value": "cat", "label": "Cat" },
474
+ { "value": "bird", "label": "Bird" },
475
+ { "value": "rabbit", "label": "Rabbit" },
476
+ { "value": "fish", "label": "Fish" }
477
+ ],
478
+ "selectionMode": "multiple",
479
+ "optionType": "checkbox"
480
+ }
481
+ ```
482
+
483
+ Notice how the `label` is derived from the `value` by capitalizing the first letter. The user's exact values become the `value` property.
484
+
485
+ ### Grouping Filters with Section Title
486
+
487
+ * Filters can be grouped by sections using the `sectionTitle` property.
488
+ * If multiple filter items share the same `sectionTitle`, they will be displayed together in a grouped section in the UI.
489
+ * Filters without a `sectionTitle` will appear in a default section or be displayed individually.
490
+ * Grouping helps maintain clarity, especially when dealing with multiple filter options.
491
+
492
+ ### Key Guidelines
493
+
494
+ * **openByDefault**: Automatically expands the filter accordion when the filters panel is opened.
495
+ * **tagLabel**: Specifies the label displayed in a Tag component on the table or grid once the filter is active. For example, if the tagLabel is "Age", the filter display might show: `Age: 7`.
496
+ * **maxInlineFilters**: Limits the number of filters shown inline in the table toolbar. Others are accessible via the panel. Default is 0.
497
+ * **dateConfig.mode**:
498
+
499
+ * `ONLY_PREDEFINED`: user can select only from preset options
500
+ * `ONLY_CUSTOM`: user must select a custom date range manually (no presets)
501
+ * `COMBINE`: both options available
502
+ * **dateConfig.presets** must be omitted if mode is `ONLY_CUSTOM`.
503
+ * **dateConfig.includeTime**: Controls whether time selection is also enabled alongside date (default is `true`).
504
+
505
+ ---
506
+
437
507
  # Pages Configuration
438
508
 
439
509
  ## ⚠️ Critical Page Rules
@@ -580,7 +650,7 @@ Sticky columns allow you to keep specific columns visible while users scroll hor
580
650
 
581
651
  * Must include **exactly one item**.
582
652
  * Each component must have:
583
- * `collection`: Collection configuration with `collectionId` and `entityTypeSource: 'cms'`
653
+ * `collection`: Collection configuration with `collectionId` and `entityTypeSource`
584
654
  * `layout`: Array of layout items that determine what components to render
585
655
 
586
656
  ## Layout Array
@@ -955,7 +1025,7 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
955
1025
  ✓ `primaryActions` and `secondaryActions` (if defined) have a valid `type` ("action" or "menu").
956
1026
  ✓ If `type: "action"`, `action.item` is a valid action item configuration.
957
1027
  ✓ If `type: "menu"`, `menu.items` is an array of valid action item configurations that can include dividers.
958
- ✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource: 'cms'`).
1028
+ ✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource`).
959
1029
  ✓ Each action item has a supported `type` (`create`, `custom`) and its corresponding configuration block (e.g., `create` block for `type: "create"`).
960
1030
  ✓ `create` actions specify a `create.page.id` that matches an existing `entityPage` ID in the configuration.
961
1031
  ✓ `custom` actions (identified by their main `id`) correspond to an action resolver function name registered in the `actions` override.
@@ -1073,6 +1143,87 @@ interface ToastConfig {
1073
1143
 
1074
1144
  SchemaConfig provides complete collection metadata and server actions. Essential for dynamic operations and accessing collection structure information.
1075
1145
 
1146
+ ### TypeScript Interface Definition
1147
+
1148
+ ```typescript
1149
+ export interface SchemaConfig {
1150
+ id: string;
1151
+ fields: Record<string, Field | undefined>;
1152
+ displayField: string;
1153
+ idField: string;
1154
+ actions: {
1155
+ get: (entityId: string) => Promise<any>;
1156
+ create: (newEntity: Partial<any>) => Promise<any>;
1157
+ update: (updatedEntity: any) => Promise<any>;
1158
+ delete: (entityId: string) => Promise<any>;
1159
+ bulkDelete: (entityIds: string[]) => Promise<any>;
1160
+ find: (
1161
+ query: Query,
1162
+ options?: {
1163
+ searchableFieldIds?: string[];
1164
+ filterFieldMapping?: Record<string, { fieldId: string }>;
1165
+ },
1166
+ ) => Promise<{ items: any[]; total: number }>;
1167
+ };
1168
+ }
1169
+
1170
+ export interface Query {
1171
+ limit: number; // Maximum number of items to return per request (controls page size)
1172
+ offset: number; // Number of items to skip from the beginning (for pagination)
1173
+ page: number; // Current page number (1-based, works with limit for pagination)
1174
+ search?: string; // Text search query applied to searchable fields
1175
+ cursor?: string | null; // Cursor-based pagination token (alternative to offset-based pagination)
1176
+ filters: Record<string, any>; // Field-specific filter conditions (keys = field IDs, values = filter criteria)
1177
+ sort?: { // Sorting configuration for result ordering
1178
+ fieldName: string; // Field ID to sort by (must be sortable per field capabilities)
1179
+ order: 'asc' | 'desc'; // Sort direction
1180
+ }[];
1181
+ }
1182
+ ```
1183
+
1184
+ ### Supporting Type Definitions
1185
+
1186
+ ```typescript
1187
+ export type PatternsFieldType =
1188
+ | 'SHORT_TEXT'
1189
+ | 'LONG_TEXT'
1190
+ | 'NUMBER'
1191
+ | 'BOOLEAN'
1192
+ | 'DATE'
1193
+ | 'DATETIME'
1194
+ | 'URL'
1195
+ | 'ARRAY'
1196
+ | 'REFERENCE'
1197
+ | 'IMAGE';
1198
+
1199
+ interface BaseField {
1200
+ id: string;
1201
+ displayName: string;
1202
+ validation?: {
1203
+ numberRange?: NumberRange;
1204
+ stringLengthRange?: StringLengthRange;
1205
+ required: boolean;
1206
+ };
1207
+ capabilities: {
1208
+ supportedQueryOperators: QueryOperator[];
1209
+ sortable: boolean;
1210
+ };
1211
+ }
1212
+
1213
+ export interface ReferenceField extends BaseField {
1214
+ type: 'REFERENCE';
1215
+ referenceMetadata: {
1216
+ referencedCollectionId: string;
1217
+ };
1218
+ }
1219
+
1220
+ export interface NonReferenceField extends BaseField {
1221
+ type: Exclude<PatternsFieldType, 'REFERENCE'>;
1222
+ }
1223
+
1224
+ export type Field = ReferenceField | NonReferenceField;
1225
+ ```
1226
+
1076
1227
  ### Key Properties
1077
1228
 
1078
1229
  • **id** - `string`
@@ -1092,20 +1243,53 @@ SchemaConfig provides complete collection metadata and server actions. Essential
1092
1243
  • **fields** - `Record<string, Field | undefined>`
1093
1244
  - Complete field definitions with types and metadata
1094
1245
  - Useful for dynamic form generation or validation
1095
- - Example: `schema.fields.name.type === 'TEXT'`
1246
+ - Each field contains type information, validation rules, and capabilities
1247
+ - Example: `schema.fields.name.type === 'SHORT_TEXT'`
1096
1248
 
1097
1249
  • **actions** - Server operation functions
1098
1250
  - Pre-configured API calls for CRUD operations
1099
1251
  - Use with optimistic actions for best UX
1252
+ - All actions return Promises and handle server communication
1100
1253
  - Example: `await schema.actions.update(item)`
1101
1254
 
1102
1255
  ### Available Schema Actions
1103
1256
 
1104
- - schema.actions.create(item) // Create single item
1105
- - schema.actions.update(item) // Update single item
1106
- - schema.actions.delete(itemId) // Delete by ID
1107
- - schema.actions.bulkUpdate(updates) // Update multiple items
1108
- - schema.actions.bulkDelete(itemIds) // Delete multiple items
1257
+ #### Individual Entity Operations
1258
+ - **schema.actions.get(entityId)** - Retrieve a single entity by ID
1259
+ - **schema.actions.create(newEntity)** - Create a new entity
1260
+ - **schema.actions.update(updatedEntity)** - Update an existing entity
1261
+ - **schema.actions.delete(entityId)** - Delete a single entity by ID
1262
+
1263
+ #### Bulk Operations
1264
+ - **schema.actions.bulkDelete(entityIds)** - Delete multiple entities by their IDs
1265
+
1266
+ #### Query Operations
1267
+ - **schema.actions.find(query, options)** - Search and filter entities
1268
+ - `query`: Query object with pagination, filtering, sorting, and search criteria (see Query Interface section)
1269
+ - `options.searchableFieldIds`: Array of field IDs that support text search
1270
+ - `options.filterFieldMapping`: Maps filter IDs to actual field IDs for complex filtering
1271
+ - Returns: `{ items: any[], total: number }`
1272
+
1273
+ ### Field Type Information
1274
+
1275
+ Each field in the `fields` record contains:
1276
+
1277
+ - **id**: Unique field identifier
1278
+ - **displayName**: Human-readable field name
1279
+ - **type**: One of the supported `PatternsFieldType` values
1280
+ - **validation**: Optional validation rules including:
1281
+ - `numberRange`: Min/max values for numeric fields
1282
+ - `stringLengthRange`: Min/max length for text fields
1283
+ - `required`: Whether the field is mandatory
1284
+ - **capabilities**: Field behavior configuration:
1285
+ - `supportedQueryOperators`: Array of operators this field supports for filtering
1286
+ - `sortable`: Whether this field can be used for sorting
1287
+
1288
+ ### Reference Fields
1289
+
1290
+ Reference fields have additional metadata:
1291
+ - **referenceMetadata.referencedCollectionId**: ID of the collection being referenced
1292
+ - Used for establishing relationships between different collections
1109
1293
 
1110
1294
  ### Schema Validation Checklist
1111
1295
 
@@ -1116,74 +1300,19 @@ Before using schema in operations:
1116
1300
  ✓ Use `schema.idField` for ID operations
1117
1301
  ✓ Use `schema.displayField` for UI display
1118
1302
  ✓ Use `schema.actions` for server operations
1303
+ ✓ Check field capabilities before applying filters or sorting
1119
1304
 
1120
1305
  ### Common Usage Patterns
1121
1306
 
1122
1307
  - **ActionCell**: Use `schema.actions.update()` or `schema.actions.delete()` for single item operations
1123
- - **BulkActions**: Use `schema.actions.bulkUpdate()` or `schema.actions.bulkDelete()` for multiple items
1308
+ - **BulkActions**: Use `schema.actions.bulkDelete()` for multiple items
1124
1309
  - **Dynamic UI**: Use `schema.fields` to build forms or validate data
1125
1310
  - **Error Messages**: Use `schema.displayField` to create meaningful user feedback
1126
-
1127
- ---
1128
-
1129
- ## Filters Configuration Notes
1130
-
1131
- To configure filters in a `collectionPage`, add a `filters` property inside the page's component configuration object. Each filter must reference a valid field by its `fieldId`, and the supported types are:
1132
-
1133
- * `numberConfig`: used with fields of type `NUMBER`
1134
- * `dateConfig`: used with fields of type `DATETIME`
1135
- * `booleanConfig`: used with fields of type `BOOLEAN`
1136
- * `enumConfig`: used with fields of type `ARRAY` or `ARRAY_STRING`
1137
-
1138
- ### Enum Configuration Implementation
1139
-
1140
- When implementing enum filters, you must ask the user to provide the possible option values. Never invent or assume enum values. Here's how to properly handle enumConfig:
1141
-
1142
- #### Example: User-Provided Enum Implementation
1143
-
1144
- 1. First, collect the possible values from the user:
1145
- ```
1146
- User requests: "I need a filter for pet types."
1147
- You ask: "What are the possible values for pet types that should be available in the filter?"
1148
- User responds: "dog, cat, bird, rabbit, fish"
1149
- ```
1150
-
1151
- 2. Then, create the `enumConfig` structure:
1152
- ```json
1153
- "enumConfig": {
1154
- "options": [
1155
- { "value": "dog", "label": "Dog" },
1156
- { "value": "cat", "label": "Cat" },
1157
- { "value": "bird", "label": "Bird" },
1158
- { "value": "rabbit", "label": "Rabbit" },
1159
- { "value": "fish", "label": "Fish" }
1160
- ],
1161
- "selectionMode": "multiple",
1162
- "optionType": "checkbox"
1163
- }
1164
- ```
1165
-
1166
- Notice how the `label` is derived from the `value` by capitalizing the first letter. The user's exact values become the `value` property.
1167
-
1168
- ### Grouping Filters with Section Title
1169
-
1170
- * Filters can be grouped by sections using the `sectionTitle` property.
1171
- * If multiple filter items share the same `sectionTitle`, they will be displayed together in a grouped section in the UI.
1172
- * Filters without a `sectionTitle` will appear in a default section or be displayed individually.
1173
- * Grouping helps maintain clarity, especially when dealing with multiple filter options.
1174
-
1175
- ### Key Guidelines
1176
-
1177
- * **openByDefault**: Automatically expands the filter accordion when the filters panel is opened.
1178
- * **tagLabel**: Specifies the label displayed in a Tag component on the table or grid once the filter is active. For example, if the tagLabel is "Age", the filter display might show: `Age: 7`.
1179
- * **maxInlineFilters**: Limits the number of filters shown inline in the table toolbar. Others are accessible via the panel. Default is 0.
1180
- * **dateConfig.mode**:
1181
-
1182
- * `ONLY_PREDEFINED`: user can select only from preset options
1183
- * `ONLY_CUSTOM`: user must select a custom date range manually (no presets)
1184
- * `COMBINE`: both options available
1185
- * **dateConfig.presets** must be omitted if mode is `ONLY_CUSTOM`.
1186
- * **dateConfig.includeTime**: Controls whether time selection is also enabled alongside date (default is `true`).
1311
+ - **Field Validation**: Use `schema.fields[fieldId].validation` for form validation rules
1312
+ - **Query Building**: Use `schema.fields[fieldId].capabilities.supportedQueryOperators` to build dynamic filters
1313
+ - **Data Fetching**: Use `schema.actions.find()` with Query interface for complex data retrieval with pagination, search, and filtering
1314
+ - **Pagination**: Combine `limit`, `offset`, and `page` properties in Query for consistent pagination behavior
1315
+ - **Search Implementation**: Use `search` property with `searchableFieldIds` option for full-text search across multiple fields
1187
1316
 
1188
1317
  ---
1189
1318
 
@@ -1191,7 +1320,7 @@ Notice how the `label` is derived from the `value` by capitalizing the first let
1191
1320
 
1192
1321
  The ActionCell feature adds an interactive action column to collection tables or grid views, enabling users to perform operations on individual entities.
1193
1322
 
1194
- ### Placement and Structure
1323
+ ## Placement and Structure
1195
1324
 
1196
1325
  The ActionCell has a two-level structure:
1197
1326
  * `primaryAction`: A single prominent action shown directly in the table/grid row
@@ -1427,7 +1556,7 @@ AI agents should verify these requirements before generating ActionCell configur
1427
1556
 
1428
1557
  The Bulk Action Toolbar feature enables users to perform operations on multiple selected entities simultaneously in collection tables or grids. When configured, it adds checkboxes to each row and displays a toolbar with bulk actions when items are selected.
1429
1558
 
1430
- ### Placement and Structure
1559
+ ## Placement and Structure
1431
1560
 
1432
1561
  The Bulk Action Toolbar is configured within the table / grid / table-grid switch configuration using the `bulkActionToolbar` property. It has a two-level structure:
1433
1562
  * `primaryActions`: Actions shown directly in the bulk action toolbar
@@ -1705,7 +1834,6 @@ All entity pages must have:
1705
1834
 
1706
1835
  * Displays details for a **single entity**.
1707
1836
  * Always tied to a single Wix collection.
1708
- * `entityTypeSource` is always `'cms'`.
1709
1837
 
1710
1838
  > The custom actions must be defined inside the `moreActions` array.
1711
1839
 
@@ -1982,10 +2110,13 @@ your-page/
1982
2110
  │ ├── index.tsx
1983
2111
  │ ├── name.ts
1984
2112
  │ └── date.ts
1985
- └── customComponents/ // Custom entity page components
2113
+ ├── customComponents/ // Custom entity page components
2114
+ │ ├── index.tsx
2115
+ │ ├── CustomNameField.tsx
2116
+ │ └── InfoCard.tsx
2117
+ └── customDataSources/ // Custom data sources
1986
2118
  ├── index.tsx
1987
- ├── CustomNameField.tsx
1988
- └── InfoCard.tsx
2119
+ └── myCustomDataSource.ts
1989
2120
  ```
1990
2121
 
1991
2122
  ### Importing Overrides in Your Page
@@ -1997,8 +2128,9 @@ import * as modals from './components/modals';
1997
2128
  import * as actions from './components/actions';
1998
2129
  import * as columns from './components/columns';
1999
2130
  import * as components from './components/customComponents';
2131
+ import * as customDataSources from './components/customDataSources';
2000
2132
 
2001
- <PatternsWizardOverridesProvider value={{ modals, actions, columns, components }}>
2133
+ <PatternsWizardOverridesProvider value={{ modals, actions, columns, components, customDataSources }}>
2002
2134
  <AutoPatternsApp configuration={config as AppConfig} />
2003
2135
  </PatternsWizardOverridesProvider>
2004
2136
  ```
@@ -2012,6 +2144,7 @@ For example:
2012
2144
  - Adding a new modal → Update `./components/modals/index.tsx`
2013
2145
  - Adding a new column override → Update `./components/columns/index.tsx`
2014
2146
  - Adding a new custom component → Update `./components/customComponents/index.tsx`
2147
+ - Adding a new custom data source → Update `./components/customDataSources/index.tsx`
2015
2148
 
2016
2149
  Without updating the index files, your implementations won't be available to the `PatternsWizardOverridesProvider`.
2017
2150
 
@@ -2464,4 +2597,158 @@ PatternsWizardOverridesProvider
2464
2597
 
2465
2598
  By using these component overrides, you can tailor the behavior and appearance of your `AutoPatternsApp` to meet specific requirements beyond what the default rendering provides.
2466
2599
 
2600
+ ## Custom Data Sources
2601
+
2602
+ Custom data sources allow you to connect AutoPatternsApp to any data source beyond the default CMS collections. This enables you to integrate with external APIs, custom databases, or any other data sources that require custom implementation.
2603
+
2604
+ ### Configuration Structure
2605
+
2606
+ When implementing a custom data source, you need to modify the `collection` configuration in your AppConfig:
2607
+
2608
+ ```json
2609
+ {
2610
+ "collection": {
2611
+ "collectionId": "myCustomCollection",
2612
+ "entityTypeSource": "custom",
2613
+ "custom": {
2614
+ "id": "myCustomDataSource"
2615
+ }
2616
+ }
2617
+ }
2618
+ ```
2619
+
2620
+ **Key Properties:**
2621
+ - `entityTypeSource`: Must be set to `"custom"` instead of `"cms"`
2622
+ - `custom.id`: A unique identifier for your custom data source implementation
2623
+
2624
+ ### Custom Data Source Override Structure
2625
+
2626
+ Custom data sources are implemented through the `customDataSources` property in your `PatternsWizardOverridesProvider`:
2627
+
2628
+ ```tsx
2629
+ <PatternsWizardOverridesProvider value={{
2630
+ customDataSources: {
2631
+ myCustomDataSource: async (collectionId: string, context: any) => {
2632
+ return customSchemaConfig; // Must return a SchemaConfig object
2633
+ }
2634
+ }
2635
+ }}>
2636
+ <AutoPatternsApp configuration={config as AppConfig} />
2637
+ </PatternsWizardOverridesProvider>
2638
+ ```
2639
+
2640
+ ### Implementation Components
2641
+
2642
+ #### Custom Data Source Function
2643
+
2644
+ You must implement a custom data source function that:
2645
+ - Takes `collectionId` and `context` parameters
2646
+ - Returns a Promise that resolves to a `SchemaConfig` object
2647
+ - The `SchemaConfig` object must include:
2648
+ - **id**: Collection identifier
2649
+ - **fields**: Field definitions with types and metadata
2650
+ - **displayField**: Primary field for displaying items
2651
+ - **idField**: Primary key field name
2652
+ - **actions**: CRUD operation functions that handle:
2653
+ - Individual entity operations (get, create, update, delete)
2654
+ - Bulk operations (bulkDelete)
2655
+ - Query operations with pagination, search, filtering, and sorting
2656
+
2657
+ ### Example Implementation Structure
2658
+
2659
+ ```tsx
2660
+ // customDataSources/myCustomDataSource.ts
2661
+ export const myCustomDataSource = async (collectionId: string, context: any) => {
2662
+ return {
2663
+ id: 'myCustomCollection',
2664
+ fields: {
2665
+ // Field definitions based on your data source schema
2666
+ },
2667
+ displayField: 'name',
2668
+ idField: '_id',
2669
+ actions: {
2670
+ get: async (entityId: string) => { /* Implementation */ },
2671
+ create: async (newEntity: any) => { /* Implementation */ },
2672
+ update: async (updatedEntity: any) => { /* Implementation */ },
2673
+ delete: async (entityId: string) => { /* Implementation */ },
2674
+ bulkDelete: async (entityIds: string[]) => { /* Implementation */ },
2675
+ find: async (query: Query, options?: any) => { /* Implementation */ }
2676
+ }
2677
+ };
2678
+ };
2679
+ ```
2680
+
2681
+ ### Field Type Mapping
2682
+
2683
+ When implementing custom data sources, you need to map your data source field types to AutoPatterns field types:
2684
+
2685
+ - **Text fields** → `'SHORT_TEXT'` or `'LONG_TEXT'`
2686
+ - **Numeric fields** → `'NUMBER'`
2687
+ - **Boolean fields** → `'BOOLEAN'`
2688
+ - **Date fields** → `'DATE'` or `'DATETIME'`
2689
+ - **Image fields** → `'IMAGE'`
2690
+ - **Array fields** → `'ARRAY'`
2691
+ - **Reference fields** → `'REFERENCE'`
2692
+ - **URL fields** → `'URL'`
2693
+
2694
+ ### Error Handling
2695
+
2696
+ Custom data sources should include proper error handling:
2697
+
2698
+ ```tsx
2699
+ actions: {
2700
+ get: async (entityId: string) => {
2701
+ try {
2702
+ const result = await yourDataSourceCall(entityId);
2703
+ return result;
2704
+ } catch (error) {
2705
+ throw new Error(`Failed to fetch entity: ${error.message}`);
2706
+ }
2707
+ }
2708
+ }
2709
+ ```
2710
+
2711
+ ### Validation Requirements
2712
+
2713
+ - **Function Signature**: Custom data source must be a function with signature `(collectionId: string, context: any) => Promise<SchemaConfig>`
2714
+ - **Return Type**: Must return a Promise that resolves to a complete SchemaConfig object
2715
+ - All schema actions must return Promises
2716
+ - Field IDs must match between schema definition and data source responses
2717
+ - The `find` action must support the complete Query interface
2718
+ - Custom data sources must handle pagination, search, and filtering
2719
+ - Error responses should be meaningful and actionable
2720
+
2721
+ ### Folder Structure for Custom Data Sources
2722
+
2723
+ ```
2724
+ your-page/
2725
+ ├── page.tsx // Your main page component
2726
+ ├── MyCollectionConfig.patterns.json // Configuration file
2727
+ └── components/ // Page-specific components folder
2728
+ ├── index.tsx // Exports all overrides for easy importing
2729
+ ├── customDataSources/ // Custom data sources
2730
+ │ ├── index.tsx
2731
+ │ └── myCustomDataSource.ts
2732
+ ├── actions/ // Custom actions
2733
+ │ ├── index.tsx
2734
+ │ └── myCustomAction.tsx
2735
+ └── columns/ // Column overrides
2736
+ ├── index.tsx
2737
+ └── myColumn.tsx
2738
+ ```
2739
+
2740
+ ### Registering Custom Data Sources
2741
+
2742
+ In your page component, import and register your custom data sources:
2743
+
2744
+ ```tsx
2745
+ import * as customDataSources from './components/customDataSources';
2746
+
2747
+ <PatternsWizardOverridesProvider value={{ customDataSources }}>
2748
+ <AutoPatternsApp configuration={config as AppConfig} />
2749
+ </PatternsWizardOverridesProvider>
2750
+ ```
2751
+
2752
+ **Important:** Every time you create a new custom data source, you must add a corresponding export line to the `./components/customDataSources/index.tsx` file. For example, if you create `myDataSource.ts`, you must add `export * from './myDataSource';` to the index file.
2753
+
2467
2754
  ---
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Bulk Action Toolbar feature enables users to perform operations on multiple selected entities simultaneously in collection tables or grids. When configured, it adds checkboxes to each row and displays a toolbar with bulk actions when items are selected.
4
4
 
5
- ### Placement and Structure
5
+ ## Placement and Structure
6
6
 
7
7
  The Bulk Action Toolbar is configured within the table / grid / table-grid switch configuration using the `bulkActionToolbar` property. It has a two-level structure:
8
8
  * `primaryActions`: Actions shown directly in the bulk action toolbar
@@ -12,7 +12,7 @@
12
12
 
13
13
  * Must include **exactly one item**.
14
14
  * Each component must have:
15
- * `collection`: Collection configuration with `collectionId` and `entityTypeSource: 'cms'`
15
+ * `collection`: Collection configuration with `collectionId` and `entityTypeSource`
16
16
  * `layout`: Array of layout items that determine what components to render
17
17
 
18
18
  ## Layout Array
@@ -330,7 +330,7 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
330
330
  ✓ `primaryActions` and `secondaryActions` (if defined) have a valid `type` ("action" or "menu").
331
331
  ✓ If `type: "action"`, `action.item` is a valid action item configuration.
332
332
  ✓ If `type: "menu"`, `menu.items` is an array of valid action item configurations that can include dividers.
333
- ✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource: 'cms'`).
333
+ ✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource`).
334
334
  ✓ Each action item has a supported `type` (`create`, `custom`) and its corresponding configuration block (e.g., `create` block for `type: "create"`).
335
335
  ✓ `create` actions specify a `create.page.id` that matches an existing `entityPage` ID in the configuration.
336
336
  ✓ `custom` actions (identified by their main `id`) correspond to an action resolver function name registered in the `actions` override.