@cratis/components 0.1.10 → 0.1.12

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 (158) hide show
  1. package/dist/cjs/CommandForm/CommandFormFields.js +9 -3
  2. package/dist/cjs/CommandForm/CommandFormFields.js.map +1 -1
  3. package/dist/cjs/CommandForm/ValidationMessage.js +24 -0
  4. package/dist/cjs/CommandForm/ValidationMessage.js.map +1 -0
  5. package/dist/cjs/CommandForm/asCommandFormField.js +47 -0
  6. package/dist/cjs/CommandForm/asCommandFormField.js.map +1 -0
  7. package/dist/cjs/CommandForm/fields/CheckboxField.js +13 -0
  8. package/dist/cjs/CommandForm/fields/CheckboxField.js.map +1 -0
  9. package/dist/cjs/CommandForm/fields/DropdownField.js +13 -0
  10. package/dist/cjs/CommandForm/fields/DropdownField.js.map +1 -0
  11. package/dist/cjs/CommandForm/fields/InputTextField.js +13 -0
  12. package/dist/cjs/CommandForm/fields/InputTextField.js.map +1 -0
  13. package/dist/cjs/CommandForm/fields/NumberField.js +13 -0
  14. package/dist/cjs/CommandForm/fields/NumberField.js.map +1 -0
  15. package/dist/cjs/CommandForm/fields/SliderField.js +17 -0
  16. package/dist/cjs/CommandForm/fields/SliderField.js.map +1 -0
  17. package/dist/cjs/CommandForm/fields/TextAreaField.js +13 -0
  18. package/dist/cjs/CommandForm/fields/TextAreaField.js.map +1 -0
  19. package/dist/cjs/CommandForm/index.js +15 -7
  20. package/dist/cjs/CommandForm/index.js.map +1 -1
  21. package/dist/cjs/PivotViewer/PivotViewer.js +14 -0
  22. package/dist/cjs/PivotViewer/PivotViewer.js.map +1 -1
  23. package/dist/cjs/PivotViewer/components/PivotCanvas.js +33 -10
  24. package/dist/cjs/PivotViewer/components/PivotCanvas.js.map +1 -1
  25. package/dist/cjs/PivotViewer/components/PivotViewerMain.js +1 -1
  26. package/dist/cjs/PivotViewer/components/PivotViewerMain.js.map +1 -1
  27. package/dist/cjs/PivotViewer/components/pivot/sprites.js +79 -15
  28. package/dist/cjs/PivotViewer/components/pivot/sprites.js.map +1 -1
  29. package/dist/cjs/PivotViewer/components/pivot/visibility.js +36 -10
  30. package/dist/cjs/PivotViewer/components/pivot/visibility.js.map +1 -1
  31. package/dist/cjs/PivotViewer/engine/layout.js +2 -1
  32. package/dist/cjs/PivotViewer/engine/layout.js.map +1 -1
  33. package/dist/cjs/PivotViewer/hooks/usePivotEngine.js +37 -2
  34. package/dist/cjs/PivotViewer/hooks/usePivotEngine.js.map +1 -1
  35. package/dist/cjs/PivotViewer/index.js +3 -0
  36. package/dist/cjs/PivotViewer/index.js.map +1 -1
  37. package/dist/cjs/PivotViewer/types.js +22 -0
  38. package/dist/cjs/PivotViewer/types.js.map +1 -0
  39. package/dist/cjs/TimeMachine/TimeMachine.js +8 -3
  40. package/dist/cjs/TimeMachine/TimeMachine.js.map +1 -1
  41. package/dist/esm/CommandForm/CommandForm.stories.d.ts +1 -0
  42. package/dist/esm/CommandForm/CommandForm.stories.d.ts.map +1 -1
  43. package/dist/esm/CommandForm/CommandForm.stories.js +34 -1
  44. package/dist/esm/CommandForm/CommandForm.stories.js.map +1 -1
  45. package/dist/esm/CommandForm/CommandFormFields.d.ts.map +1 -1
  46. package/dist/esm/CommandForm/CommandFormFields.js +9 -3
  47. package/dist/esm/CommandForm/CommandFormFields.js.map +1 -1
  48. package/dist/esm/CommandForm/UserRegistrationCommand.d.ts +63 -0
  49. package/dist/esm/CommandForm/UserRegistrationCommand.d.ts.map +1 -0
  50. package/dist/esm/CommandForm/UserRegistrationCommand.js +143 -0
  51. package/dist/esm/CommandForm/UserRegistrationCommand.js.map +1 -0
  52. package/dist/esm/CommandForm/ValidationMessage.d.ts +8 -0
  53. package/dist/esm/CommandForm/ValidationMessage.d.ts.map +1 -0
  54. package/dist/esm/CommandForm/ValidationMessage.js +22 -0
  55. package/dist/esm/CommandForm/ValidationMessage.js.map +1 -0
  56. package/dist/esm/CommandForm/asCommandFormField.d.ts +32 -0
  57. package/dist/esm/CommandForm/asCommandFormField.d.ts.map +1 -0
  58. package/dist/esm/CommandForm/asCommandFormField.js +45 -0
  59. package/dist/esm/CommandForm/asCommandFormField.js.map +1 -0
  60. package/dist/esm/CommandForm/fields/CheckboxField.d.ts +10 -0
  61. package/dist/esm/CommandForm/fields/CheckboxField.d.ts.map +1 -0
  62. package/dist/esm/CommandForm/fields/CheckboxField.js +11 -0
  63. package/dist/esm/CommandForm/fields/CheckboxField.js.map +1 -0
  64. package/dist/esm/CommandForm/fields/DropdownField.d.ts +15 -0
  65. package/dist/esm/CommandForm/fields/DropdownField.d.ts.map +1 -0
  66. package/dist/esm/CommandForm/fields/DropdownField.js +11 -0
  67. package/dist/esm/CommandForm/fields/DropdownField.js.map +1 -0
  68. package/dist/esm/CommandForm/fields/InputTextField.d.ts +11 -0
  69. package/dist/esm/CommandForm/fields/InputTextField.d.ts.map +1 -0
  70. package/dist/esm/CommandForm/fields/InputTextField.js +11 -0
  71. package/dist/esm/CommandForm/fields/InputTextField.js.map +1 -0
  72. package/dist/esm/CommandForm/fields/NumberField.d.ts +13 -0
  73. package/dist/esm/CommandForm/fields/NumberField.d.ts.map +1 -0
  74. package/dist/esm/CommandForm/fields/NumberField.js +11 -0
  75. package/dist/esm/CommandForm/fields/NumberField.js.map +1 -0
  76. package/dist/esm/CommandForm/fields/SliderField.d.ts +12 -0
  77. package/dist/esm/CommandForm/fields/SliderField.d.ts.map +1 -0
  78. package/dist/esm/CommandForm/fields/SliderField.js +15 -0
  79. package/dist/esm/CommandForm/fields/SliderField.js.map +1 -0
  80. package/dist/esm/CommandForm/fields/TextAreaField.d.ts +12 -0
  81. package/dist/esm/CommandForm/fields/TextAreaField.d.ts.map +1 -0
  82. package/dist/esm/CommandForm/fields/TextAreaField.js +11 -0
  83. package/dist/esm/CommandForm/fields/TextAreaField.js.map +1 -0
  84. package/dist/esm/CommandForm/fields/index.d.ts +7 -0
  85. package/dist/esm/CommandForm/fields/index.d.ts.map +1 -0
  86. package/dist/esm/CommandForm/fields/index.js +7 -0
  87. package/dist/esm/CommandForm/fields/index.js.map +1 -0
  88. package/dist/esm/CommandForm/index.d.ts +3 -4
  89. package/dist/esm/CommandForm/index.d.ts.map +1 -1
  90. package/dist/esm/CommandForm/index.js +8 -4
  91. package/dist/esm/CommandForm/index.js.map +1 -1
  92. package/dist/esm/PivotViewer/PivotViewer.d.ts.map +1 -1
  93. package/dist/esm/PivotViewer/PivotViewer.js +14 -0
  94. package/dist/esm/PivotViewer/PivotViewer.js.map +1 -1
  95. package/dist/esm/PivotViewer/PivotViewer.stories.d.ts +1 -0
  96. package/dist/esm/PivotViewer/PivotViewer.stories.d.ts.map +1 -1
  97. package/dist/esm/PivotViewer/PivotViewer.stories.js +43 -3
  98. package/dist/esm/PivotViewer/PivotViewer.stories.js.map +1 -1
  99. package/dist/esm/PivotViewer/components/PivotCanvas.d.ts.map +1 -1
  100. package/dist/esm/PivotViewer/components/PivotCanvas.js +33 -10
  101. package/dist/esm/PivotViewer/components/PivotCanvas.js.map +1 -1
  102. package/dist/esm/PivotViewer/components/PivotViewerMain.js +1 -1
  103. package/dist/esm/PivotViewer/components/PivotViewerMain.js.map +1 -1
  104. package/dist/esm/PivotViewer/components/pivot/sprites.d.ts.map +1 -1
  105. package/dist/esm/PivotViewer/components/pivot/sprites.js +79 -15
  106. package/dist/esm/PivotViewer/components/pivot/sprites.js.map +1 -1
  107. package/dist/esm/PivotViewer/components/pivot/visibility.d.ts.map +1 -1
  108. package/dist/esm/PivotViewer/components/pivot/visibility.js +36 -10
  109. package/dist/esm/PivotViewer/components/pivot/visibility.js.map +1 -1
  110. package/dist/esm/PivotViewer/engine/layout.js +2 -1
  111. package/dist/esm/PivotViewer/engine/layout.js.map +1 -1
  112. package/dist/esm/PivotViewer/engine/pivot.worker.d.ts.map +1 -1
  113. package/dist/esm/PivotViewer/engine/pivot.worker.js +22 -7
  114. package/dist/esm/PivotViewer/engine/pivot.worker.js.map +1 -1
  115. package/dist/esm/PivotViewer/hooks/useFilteredData.d.ts +2 -2
  116. package/dist/esm/PivotViewer/hooks/useFilteredData.d.ts.map +1 -1
  117. package/dist/esm/PivotViewer/hooks/useFilteredData.js +4 -2
  118. package/dist/esm/PivotViewer/hooks/useFilteredData.js.map +1 -1
  119. package/dist/esm/PivotViewer/hooks/usePivotEngine.d.ts.map +1 -1
  120. package/dist/esm/PivotViewer/hooks/usePivotEngine.js +37 -2
  121. package/dist/esm/PivotViewer/hooks/usePivotEngine.js.map +1 -1
  122. package/dist/esm/PivotViewer/index.d.ts +2 -1
  123. package/dist/esm/PivotViewer/index.d.ts.map +1 -1
  124. package/dist/esm/PivotViewer/index.js +1 -0
  125. package/dist/esm/PivotViewer/index.js.map +1 -1
  126. package/dist/esm/PivotViewer/types.d.ts +4 -1
  127. package/dist/esm/PivotViewer/types.d.ts.map +1 -1
  128. package/dist/esm/PivotViewer/types.js +19 -2
  129. package/dist/esm/PivotViewer/types.js.map +1 -1
  130. package/dist/esm/TimeMachine/TimeMachine.d.ts.map +1 -1
  131. package/dist/esm/TimeMachine/TimeMachine.js +8 -3
  132. package/dist/esm/TimeMachine/TimeMachine.js.map +1 -1
  133. package/dist/esm/tsconfig.tsbuildinfo +1 -1
  134. package/package.json +29 -29
  135. package/dist/cjs/CommandForm/DatePickerField.js +0 -31
  136. package/dist/cjs/CommandForm/DatePickerField.js.map +0 -1
  137. package/dist/cjs/CommandForm/DropdownField.js +0 -31
  138. package/dist/cjs/CommandForm/DropdownField.js.map +0 -1
  139. package/dist/cjs/CommandForm/InputTextField.js +0 -32
  140. package/dist/cjs/CommandForm/InputTextField.js.map +0 -1
  141. package/dist/cjs/CommandForm/SliderField.js +0 -34
  142. package/dist/cjs/CommandForm/SliderField.js.map +0 -1
  143. package/dist/esm/CommandForm/DatePickerField.d.ts +0 -20
  144. package/dist/esm/CommandForm/DatePickerField.d.ts.map +0 -1
  145. package/dist/esm/CommandForm/DatePickerField.js +0 -29
  146. package/dist/esm/CommandForm/DatePickerField.js.map +0 -1
  147. package/dist/esm/CommandForm/DropdownField.d.ts +0 -24
  148. package/dist/esm/CommandForm/DropdownField.d.ts.map +0 -1
  149. package/dist/esm/CommandForm/DropdownField.js +0 -29
  150. package/dist/esm/CommandForm/DropdownField.js.map +0 -1
  151. package/dist/esm/CommandForm/InputTextField.d.ts +0 -20
  152. package/dist/esm/CommandForm/InputTextField.d.ts.map +0 -1
  153. package/dist/esm/CommandForm/InputTextField.js +0 -30
  154. package/dist/esm/CommandForm/InputTextField.js.map +0 -1
  155. package/dist/esm/CommandForm/SliderField.d.ts +0 -23
  156. package/dist/esm/CommandForm/SliderField.d.ts.map +0 -1
  157. package/dist/esm/CommandForm/SliderField.js +0 -32
  158. package/dist/esm/CommandForm/SliderField.js.map +0 -1
@@ -12,10 +12,13 @@ function usePivotEngine({ data, fieldExtractors, indexFields, }) {
12
12
  const storeRef = React.useRef(null);
13
13
  const pendingCallbacksRef = React.useRef(new Map());
14
14
  React.useEffect(() => {
15
+ console.log('[PivotEngine] Creating worker');
15
16
  const worker = new Worker(new URL('../engine/pivot.worker.ts', (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('PivotViewer/hooks/usePivotEngine.js', document.baseURI).href))), { type: 'module' });
16
17
  workerRef.current = worker;
18
+ console.log('[PivotEngine] Worker created, setting up message handlers');
17
19
  worker.onmessage = (e) => {
18
20
  const message = e.data;
21
+ console.log('[PivotEngine] Received message from worker:', message.type);
19
22
  switch (message.type) {
20
23
  case 'indexesReady':
21
24
  console.log('[PivotEngine] Indexes ready');
@@ -24,25 +27,38 @@ function usePivotEngine({ data, fieldExtractors, indexFields, }) {
24
27
  case 'filterResult': {
25
28
  const callback = pendingCallbacksRef.current.get('filter');
26
29
  if (callback) {
30
+ console.log('[PivotEngine] Calling filter callback and deleting');
27
31
  callback(message.result);
28
32
  pendingCallbacksRef.current.delete('filter');
29
33
  }
34
+ else {
35
+ console.warn('[PivotEngine] No callback registered for filter result - ignoring duplicate message');
36
+ }
30
37
  break;
31
38
  }
32
39
  case 'groupingResult': {
40
+ console.log('[PivotEngine] Received groupingResult:', message.result);
33
41
  const callback = pendingCallbacksRef.current.get('grouping');
34
42
  if (callback) {
43
+ console.log('[PivotEngine] Calling grouping callback and deleting');
35
44
  callback(message.result);
36
45
  pendingCallbacksRef.current.delete('grouping');
37
46
  }
47
+ else {
48
+ console.warn('[PivotEngine] No callback registered for grouping result - ignoring duplicate message');
49
+ }
38
50
  break;
39
51
  }
40
52
  case 'sortResult': {
41
53
  const callback = pendingCallbacksRef.current.get('sort');
42
54
  if (callback) {
55
+ console.log('[PivotEngine] Calling sort callback and deleting');
43
56
  callback(message.result);
44
57
  pendingCallbacksRef.current.delete('sort');
45
58
  }
59
+ else {
60
+ console.warn('[PivotEngine] No callback registered for sort result - ignoring duplicate message');
61
+ }
46
62
  break;
47
63
  }
48
64
  }
@@ -67,12 +83,15 @@ function usePivotEngine({ data, fieldExtractors, indexFields, }) {
67
83
  };
68
84
  }, []);
69
85
  React.useEffect(() => {
70
- if (!workerRef.current)
86
+ if (!workerRef.current) {
87
+ console.warn('[PivotEngine] Worker not available in data effect');
71
88
  return;
89
+ }
72
90
  console.log('[PivotEngine] Building indexes for', data.length, 'items');
73
91
  setReady(false);
74
92
  const store$1 = store.buildStore(data, fieldExtractors);
75
93
  storeRef.current = store$1;
94
+ console.log('[PivotEngine] Store built with', store$1.items.length, 'items and', store$1.fields.size, 'fields');
76
95
  try {
77
96
  indexesRef.current = store.buildIndexes(store$1, indexFields);
78
97
  }
@@ -81,11 +100,17 @@ function usePivotEngine({ data, fieldExtractors, indexFields, }) {
81
100
  indexesRef.current = null;
82
101
  }
83
102
  if (workerRef.current) {
103
+ const fieldsArray = Array.from(store$1.fields.entries());
104
+ const serializableStore = {
105
+ ...store$1,
106
+ fields: fieldsArray,
107
+ };
84
108
  const message = {
85
109
  type: 'buildIndexes',
86
- store: store$1,
110
+ store: serializableStore,
87
111
  fields: indexFields,
88
112
  };
113
+ console.log('[PivotEngine] Posting buildIndexes with', fieldsArray.length, 'fields');
89
114
  workerRef.current.postMessage(message);
90
115
  }
91
116
  else {
@@ -119,13 +144,20 @@ function usePivotEngine({ data, fieldExtractors, indexFields, }) {
119
144
  });
120
145
  }, [ready]);
121
146
  const computeGroupingCallback = React.useCallback((visibleIds, groupBy) => {
147
+ console.log('[PivotEngine] computeGroupingCallback called with', visibleIds.length, 'visibleIds');
148
+ if (pendingCallbacksRef.current.has('grouping')) {
149
+ console.warn('[PivotEngine] Grouping already in progress, ignoring duplicate request');
150
+ return Promise.resolve({ groups: [] });
151
+ }
122
152
  return new Promise((resolve) => {
123
153
  if (!workerRef.current || fallbackRef.current) {
154
+ console.log('[PivotEngine] Using synchronous fallback for grouping');
124
155
  try {
125
156
  const store$1 = storeRef.current;
126
157
  const indexes = indexesRef.current;
127
158
  if (store$1 && indexes) {
128
159
  const result = store.computeGrouping(store$1, indexes, visibleIds, groupBy);
160
+ console.log('[PivotEngine] Fallback grouping result:', result);
129
161
  resolve(result);
130
162
  return;
131
163
  }
@@ -133,9 +165,11 @@ function usePivotEngine({ data, fieldExtractors, indexFields, }) {
133
165
  catch (e) {
134
166
  console.error('[PivotEngine] fallback computeGrouping error:', e);
135
167
  }
168
+ console.warn('[PivotEngine] No store/indexes for fallback, returning empty');
136
169
  resolve({ groups: [] });
137
170
  return;
138
171
  }
172
+ console.log('[PivotEngine] Setting grouping callback and posting to worker');
139
173
  pendingCallbacksRef.current.set('grouping', resolve);
140
174
  const message = {
141
175
  type: 'computeGrouping',
@@ -143,6 +177,7 @@ function usePivotEngine({ data, fieldExtractors, indexFields, }) {
143
177
  groupBy,
144
178
  };
145
179
  workerRef.current.postMessage(message);
180
+ console.log('[PivotEngine] Message posted to worker');
146
181
  });
147
182
  }, [ready]);
148
183
  const sortIdsCallback = React.useCallback((visibleIds, sortBy) => {
@@ -1 +1 @@
1
- {"version":3,"file":"usePivotEngine.js","sources":["../../../../PivotViewer/hooks/usePivotEngine.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useRef, useState, useCallback } from 'react';\nimport type {\n PivotStore,\n PivotIndexes,\n FilterSpec,\n FilterResult,\n GroupSpec,\n GroupingResult,\n WorkerInMessage,\n WorkerOutMessage,\n FieldValue,\n} from '../engine/types';\nimport { buildStore, buildIndexes, applyFilters, computeGrouping, sortIds } from '../engine/store';\n\nexport interface UsePivotEngineOptions<TItem extends object> {\n data: TItem[];\n fieldExtractors: Map<string, (item: TItem) => FieldValue>;\n indexFields: string[];\n}\n\nexport interface UsePivotEngineResult {\n ready: boolean;\n applyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;\n computeGrouping: (visibleIds: Uint32Array, groupBy: GroupSpec) => Promise<GroupingResult>;\n sortIds: (visibleIds: Uint32Array, sortBy: string) => Promise<Uint32Array>;\n}\n\nexport function usePivotEngine<TItem extends object>({\n data,\n fieldExtractors,\n indexFields,\n}: UsePivotEngineOptions<TItem>): UsePivotEngineResult {\n const [ready, setReady] = useState(false);\n const workerRef = useRef<Worker | null>(null);\n const indexesRef = useRef<PivotIndexes | null>(null);\n const fallbackRef = useRef(false);\n const storeRef = useRef<PivotStore | null>(null);\n const pendingCallbacksRef = useRef<Map<string, (result: unknown) => void>>(new Map());\n\n useEffect(() => {\n const worker = new Worker(\n new URL('../engine/pivot.worker.ts', import.meta.url),\n { type: 'module' }\n );\n\n workerRef.current = worker;\n\n worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {\n const message = e.data;\n\n switch (message.type) {\n case 'indexesReady':\n console.log('[PivotEngine] Indexes ready');\n setReady(true);\n break;\n\n case 'filterResult': {\n const callback = pendingCallbacksRef.current.get('filter');\n if (callback) {\n callback(message.result);\n pendingCallbacksRef.current.delete('filter');\n }\n break;\n }\n\n case 'groupingResult': {\n const callback = pendingCallbacksRef.current.get('grouping');\n if (callback) {\n callback(message.result);\n pendingCallbacksRef.current.delete('grouping');\n }\n break;\n }\n\n case 'sortResult': {\n const callback = pendingCallbacksRef.current.get('sort');\n if (callback) {\n callback(message.result);\n pendingCallbacksRef.current.delete('sort');\n }\n break;\n }\n }\n };\n\n worker.onerror = (error) => {\n console.error('[PivotEngine] Worker error:', error);\n // enable synchronous fallback so UI can still function without worker\n fallbackRef.current = true;\n workerRef.current = null;\n // if we already built store/indexes, mark ready so UI can use fallback\n if (storeRef.current) {\n try {\n indexesRef.current = buildIndexes(storeRef.current, indexFields);\n } catch (e) {\n console.error('[PivotEngine] Failed to build indexes in fallback:', e);\n indexesRef.current = null;\n }\n setReady(true);\n }\n };\n\n return () => {\n worker.terminate();\n };\n }, []);\n\n useEffect(() => {\n if (!workerRef.current) return;\n\n console.log('[PivotEngine] Building indexes for', data.length, 'items');\n setReady(false);\n\n const store = buildStore(data, fieldExtractors);\n storeRef.current = store;\n\n // compute indexes locally for immediate fallback and cache\n try {\n indexesRef.current = buildIndexes(store, indexFields);\n } catch (e) {\n console.error('[PivotEngine] buildIndexes failed:', e);\n indexesRef.current = null;\n }\n\n if (workerRef.current) {\n const message: WorkerInMessage = {\n type: 'buildIndexes',\n store,\n fields: indexFields,\n };\n\n workerRef.current.postMessage(message);\n } else {\n // no worker available, mark ready to allow fallback synchronous usage\n setReady(true);\n }\n }, [data, fieldExtractors, indexFields]);\n\n const applyFiltersCallback = useCallback(\n (filters: FilterSpec[]): Promise<FilterResult> => {\n return new Promise((resolve) => {\n // If worker is not available, use synchronous fallback using local indexes\n if (!workerRef.current || fallbackRef.current) {\n try {\n const store = storeRef.current;\n const indexes = indexesRef.current;\n if (store && indexes) {\n const result = applyFilters(store, indexes, filters);\n resolve(result);\n return;\n }\n } catch (e) {\n console.error('[PivotEngine] fallback applyFilters error:', e);\n }\n\n // if fallback not possible, return empty result\n resolve({ visibleIds: new Uint32Array(0), count: 0 });\n return;\n }\n\n pendingCallbacksRef.current.set('filter', resolve as (result: unknown) => void);\n\n const message: WorkerInMessage = {\n type: 'applyFilters',\n filters,\n };\n\n workerRef.current.postMessage(message);\n });\n },\n [ready]\n );\n\n const computeGroupingCallback = useCallback(\n (visibleIds: Uint32Array, groupBy: GroupSpec): Promise<GroupingResult> => {\n return new Promise((resolve) => {\n // synchronous fallback if worker unavailable\n if (!workerRef.current || fallbackRef.current) {\n try {\n const store = storeRef.current;\n const indexes = indexesRef.current;\n if (store && indexes) {\n const result = computeGrouping(store, indexes, visibleIds, groupBy);\n resolve(result);\n return;\n }\n } catch (e) {\n console.error('[PivotEngine] fallback computeGrouping error:', e);\n }\n\n resolve({ groups: [] });\n return;\n }\n\n pendingCallbacksRef.current.set('grouping', resolve as (result: unknown) => void);\n\n const message: WorkerInMessage = {\n type: 'computeGrouping',\n visibleIds,\n groupBy,\n };\n\n workerRef.current.postMessage(message);\n });\n },\n [ready]\n );\n\n const sortIdsCallback = useCallback(\n (visibleIds: Uint32Array, sortBy: string): Promise<Uint32Array> => {\n return new Promise((resolve) => {\n // synchronous fallback if worker unavailable\n if (!workerRef.current || fallbackRef.current) {\n try {\n const store = storeRef.current;\n if (store) {\n const result = sortIds(store, visibleIds, sortBy);\n resolve(result);\n return;\n }\n } catch (e) {\n console.error('[PivotEngine] fallback sortIds error:', e);\n }\n\n resolve(visibleIds);\n return;\n }\n\n pendingCallbacksRef.current.set('sort', resolve as (result: unknown) => void);\n\n const message: WorkerInMessage = {\n type: 'sort',\n ids: visibleIds,\n sortBy,\n };\n\n workerRef.current.postMessage(message);\n });\n },\n [ready]\n );\n\n return {\n ready,\n applyFilters: applyFiltersCallback,\n computeGrouping: computeGroupingCallback,\n sortIds: sortIdsCallback,\n };\n}\n"],"names":["useState","useRef","useEffect","buildIndexes","store","buildStore","useCallback","applyFilters","computeGrouping","sortIds"],"mappings":"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"}
1
+ {"version":3,"file":"usePivotEngine.js","sources":["../../../../PivotViewer/hooks/usePivotEngine.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useRef, useState, useCallback } from 'react';\nimport type {\n PivotStore,\n PivotIndexes,\n FilterSpec,\n FilterResult,\n GroupSpec,\n GroupingResult,\n WorkerInMessage,\n WorkerOutMessage,\n FieldValue,\n} from '../engine/types';\nimport { buildStore, buildIndexes, applyFilters, computeGrouping, sortIds } from '../engine/store';\n\nexport interface UsePivotEngineOptions<TItem extends object> {\n data: TItem[];\n fieldExtractors: Map<string, (item: TItem) => FieldValue>;\n indexFields: string[];\n}\n\nexport interface UsePivotEngineResult {\n ready: boolean;\n applyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;\n computeGrouping: (visibleIds: Uint32Array, groupBy: GroupSpec) => Promise<GroupingResult>;\n sortIds: (visibleIds: Uint32Array, sortBy: string) => Promise<Uint32Array>;\n}\n\nexport function usePivotEngine<TItem extends object>({\n data,\n fieldExtractors,\n indexFields,\n}: UsePivotEngineOptions<TItem>): UsePivotEngineResult {\n const [ready, setReady] = useState(false);\n const workerRef = useRef<Worker | null>(null);\n const indexesRef = useRef<PivotIndexes | null>(null);\n const fallbackRef = useRef(false);\n const storeRef = useRef<PivotStore | null>(null);\n const pendingCallbacksRef = useRef<Map<string, (result: unknown) => void>>(new Map());\n\n useEffect(() => {\n console.log('[PivotEngine] Creating worker');\n const worker = new Worker(\n new URL('../engine/pivot.worker.ts', import.meta.url),\n { type: 'module' }\n );\n\n workerRef.current = worker;\n console.log('[PivotEngine] Worker created, setting up message handlers');\n\n worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {\n const message = e.data;\n console.log('[PivotEngine] Received message from worker:', message.type);\n\n switch (message.type) {\n case 'indexesReady':\n console.log('[PivotEngine] Indexes ready');\n setReady(true);\n break;\n\n case 'filterResult': {\n const callback = pendingCallbacksRef.current.get('filter');\n if (callback) {\n console.log('[PivotEngine] Calling filter callback and deleting');\n callback(message.result);\n pendingCallbacksRef.current.delete('filter');\n } else {\n console.warn('[PivotEngine] No callback registered for filter result - ignoring duplicate message');\n }\n break;\n }\n\n case 'groupingResult': {\n console.log('[PivotEngine] Received groupingResult:', message.result);\n const callback = pendingCallbacksRef.current.get('grouping');\n if (callback) {\n console.log('[PivotEngine] Calling grouping callback and deleting');\n callback(message.result);\n pendingCallbacksRef.current.delete('grouping');\n } else {\n console.warn('[PivotEngine] No callback registered for grouping result - ignoring duplicate message');\n }\n break;\n }\n\n case 'sortResult': {\n const callback = pendingCallbacksRef.current.get('sort');\n if (callback) {\n console.log('[PivotEngine] Calling sort callback and deleting');\n callback(message.result);\n pendingCallbacksRef.current.delete('sort');\n } else {\n console.warn('[PivotEngine] No callback registered for sort result - ignoring duplicate message');\n }\n break;\n }\n }\n };\n\n worker.onerror = (error) => {\n console.error('[PivotEngine] Worker error:', error);\n // enable synchronous fallback so UI can still function without worker\n fallbackRef.current = true;\n workerRef.current = null;\n // if we already built store/indexes, mark ready so UI can use fallback\n if (storeRef.current) {\n try {\n indexesRef.current = buildIndexes(storeRef.current, indexFields);\n } catch (e) {\n console.error('[PivotEngine] Failed to build indexes in fallback:', e);\n indexesRef.current = null;\n }\n setReady(true);\n }\n };\n\n return () => {\n worker.terminate();\n };\n }, []);\n\n useEffect(() => {\n if (!workerRef.current) {\n console.warn('[PivotEngine] Worker not available in data effect');\n return;\n }\n\n console.log('[PivotEngine] Building indexes for', data.length, 'items');\n setReady(false);\n\n const store = buildStore(data, fieldExtractors);\n storeRef.current = store;\n console.log('[PivotEngine] Store built with', store.items.length, 'items and', store.fields.size, 'fields');\n\n // compute indexes locally for immediate fallback and cache\n try {\n indexesRef.current = buildIndexes(store, indexFields);\n } catch (e) {\n console.error('[PivotEngine] buildIndexes failed:', e);\n indexesRef.current = null;\n }\n\n if (workerRef.current) {\n // Convert Map to array for serialization\n const fieldsArray = Array.from(store.fields.entries());\n const serializableStore = {\n ...store,\n fields: fieldsArray,\n };\n\n const message: WorkerInMessage = {\n type: 'buildIndexes',\n store: serializableStore as any,\n fields: indexFields,\n };\n\n console.log('[PivotEngine] Posting buildIndexes with', fieldsArray.length, 'fields');\n workerRef.current.postMessage(message);\n } else {\n // no worker available, mark ready to allow fallback synchronous usage\n setReady(true);\n }\n }, [data, fieldExtractors, indexFields]);\n\n const applyFiltersCallback = useCallback(\n (filters: FilterSpec[]): Promise<FilterResult> => {\n return new Promise((resolve) => {\n // If worker is not available, use synchronous fallback using local indexes\n if (!workerRef.current || fallbackRef.current) {\n try {\n const store = storeRef.current;\n const indexes = indexesRef.current;\n if (store && indexes) {\n const result = applyFilters(store, indexes, filters);\n resolve(result);\n return;\n }\n } catch (e) {\n console.error('[PivotEngine] fallback applyFilters error:', e);\n }\n\n // if fallback not possible, return empty result\n resolve({ visibleIds: new Uint32Array(0), count: 0 });\n return;\n }\n\n pendingCallbacksRef.current.set('filter', resolve as (result: unknown) => void);\n\n const message: WorkerInMessage = {\n type: 'applyFilters',\n filters,\n };\n\n workerRef.current.postMessage(message);\n });\n },\n [ready]\n );\n\n const computeGroupingCallback = useCallback(\n (visibleIds: Uint32Array, groupBy: GroupSpec): Promise<GroupingResult> => {\n console.log('[PivotEngine] computeGroupingCallback called with', visibleIds.length, 'visibleIds');\n \n // Check if there's already a pending grouping request\n if (pendingCallbacksRef.current.has('grouping')) {\n console.warn('[PivotEngine] Grouping already in progress, ignoring duplicate request');\n return Promise.resolve({ groups: [] });\n }\n \n return new Promise((resolve) => {\n // synchronous fallback if worker unavailable\n if (!workerRef.current || fallbackRef.current) {\n console.log('[PivotEngine] Using synchronous fallback for grouping');\n try {\n const store = storeRef.current;\n const indexes = indexesRef.current;\n if (store && indexes) {\n const result = computeGrouping(store, indexes, visibleIds, groupBy);\n console.log('[PivotEngine] Fallback grouping result:', result);\n resolve(result);\n return;\n }\n } catch (e) {\n console.error('[PivotEngine] fallback computeGrouping error:', e);\n }\n\n console.warn('[PivotEngine] No store/indexes for fallback, returning empty');\n resolve({ groups: [] });\n return;\n }\n\n console.log('[PivotEngine] Setting grouping callback and posting to worker');\n pendingCallbacksRef.current.set('grouping', resolve as (result: unknown) => void);\n\n const message: WorkerInMessage = {\n type: 'computeGrouping',\n visibleIds,\n groupBy,\n };\n\n workerRef.current.postMessage(message);\n console.log('[PivotEngine] Message posted to worker');\n });\n },\n [ready]\n );\n\n const sortIdsCallback = useCallback(\n (visibleIds: Uint32Array, sortBy: string): Promise<Uint32Array> => {\n return new Promise((resolve) => {\n // synchronous fallback if worker unavailable\n if (!workerRef.current || fallbackRef.current) {\n try {\n const store = storeRef.current;\n if (store) {\n const result = sortIds(store, visibleIds, sortBy);\n resolve(result);\n return;\n }\n } catch (e) {\n console.error('[PivotEngine] fallback sortIds error:', e);\n }\n\n resolve(visibleIds);\n return;\n }\n\n pendingCallbacksRef.current.set('sort', resolve as (result: unknown) => void);\n\n const message: WorkerInMessage = {\n type: 'sort',\n ids: visibleIds,\n sortBy,\n };\n\n workerRef.current.postMessage(message);\n });\n },\n [ready]\n );\n\n return {\n ready,\n applyFilters: applyFiltersCallback,\n computeGrouping: computeGroupingCallback,\n sortIds: sortIdsCallback,\n };\n}\n"],"names":["useState","useRef","useEffect","buildIndexes","store","buildStore","useCallback","applyFilters","computeGrouping","sortIds"],"mappings":"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"}
@@ -1,9 +1,12 @@
1
1
  'use strict';
2
2
 
3
3
  var PivotViewer = require('./PivotViewer.js');
4
+ var types = require('./types.js');
4
5
 
5
6
 
6
7
 
7
8
  exports.PivotViewer = PivotViewer.PivotViewer;
8
9
  exports.PivotViewerOptimized = PivotViewer.PivotViewer;
10
+ exports.getPropertyPath = types.getPropertyPath;
11
+ exports.getValueByPath = types.getValueByPath;
9
12
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ function getPropertyPath(accessor) {
4
+ const fnStr = accessor.toString();
5
+ const match = fnStr.match(/(?:=>|return)\s*[a-zA-Z_$][a-zA-Z0-9_$]*\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/);
6
+ return match ? match[1] : '';
7
+ }
8
+ function getValueByPath(item, path) {
9
+ const parts = path.split('.');
10
+ let value = item;
11
+ for (const part of parts) {
12
+ if (value === null || value === undefined) {
13
+ return undefined;
14
+ }
15
+ value = value[part];
16
+ }
17
+ return value;
18
+ }
19
+
20
+ exports.getPropertyPath = getPropertyPath;
21
+ exports.getValueByPath = getValueByPath;
22
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sources":["../../../PivotViewer/types.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { ReactNode } from 'react';\n\nexport type PivotPrimitive = string | number | boolean | Date | null | undefined;\n\n/**\n * Type-safe property accessor for accessing properties, including nested ones\n */\nexport type PropertyAccessor<TItem> = (item: TItem) => unknown;\n\n/**\n * Extract property path from a property accessor function\n * Supports nested properties like item => item.address.city\n */\nexport function getPropertyPath<TItem>(accessor: PropertyAccessor<TItem>): string {\n const fnStr = accessor.toString();\n // Match patterns like: item => item.prop or item => item.prop.nested or (item) => item.prop\n const match = fnStr.match(/(?:=>|return)\\s*[a-zA-Z_$][a-zA-Z0-9_$]*\\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/)\n return match ? match[1] : '';\n}\n\n/**\n * Get the value from an item using a property path string\n * Supports nested properties like \"address.city\"\n */\nexport function getValueByPath<TItem>(item: TItem, path: string): unknown {\n const parts = path.split('.');\n let value: any = item;\n for (const part of parts) {\n if (value === null || value === undefined) {\n return undefined;\n }\n value = value[part];\n }\n return value;\n}\n\nexport interface PivotGroup<TItem extends object> {\n key: string;\n label: string;\n value: PivotPrimitive;\n items: TItem[];\n count?: number;\n}\n\nexport interface PivotDimension<TItem extends object> {\n key: string;\n label: string;\n getValue: (item: TItem) => PivotPrimitive;\n formatValue?: (value: PivotPrimitive) => string;\n sort?: (a: PivotGroup<TItem>, b: PivotGroup<TItem>) => number;\n}\n\nexport interface PivotFilterOption {\n key: string;\n label: string;\n value: PivotPrimitive;\n count: number;\n}\n\nexport interface PivotFilter<TItem extends object> {\n key: string;\n label: string;\n getValue: (item: TItem) => PivotPrimitive;\n multi?: boolean;\n options?: PivotFilterOption[];\n sort?: (a: PivotFilterOption, b: PivotFilterOption) => number;\n /** For numeric filters, enables range picker with histogram */\n type?: 'string' | 'number' | 'date';\n /** Number of buckets for the histogram in range filters */\n buckets?: number;\n}\n\nexport interface PivotViewerProps<TItem extends object> {\n data: TItem[];\n dimensions: PivotDimension<TItem>[];\n filters?: PivotFilter<TItem>[];\n defaultDimensionKey?: string;\n cardRenderer?: (item: TItem) => ReactNode;\n getItemId?: (item: TItem, index: number) => string | number;\n searchFields?: PropertyAccessor<TItem>[];\n className?: string;\n emptyContent?: ReactNode;\n isLoading?: boolean;\n}\n\nexport type FilterState = Record<string, Set<string>>;\n\nexport type RangeFilterState = Record<string, [number, number] | null>;\n"],"names":[],"mappings":";;AAgBM,SAAU,eAAe,CAAQ,QAAiC,EAAA;AACpE,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE;IAEjC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,uEAAuE,CAAC;AAClG,IAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;AAChC;AAMM,SAAU,cAAc,CAAQ,IAAW,EAAE,IAAY,EAAA;IAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;IAC7B,IAAI,KAAK,GAAQ,IAAI;AACrB,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACtB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AACvC,YAAA,OAAO,SAAS;QACpB;AACA,QAAA,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;IACvB;AACA,IAAA,OAAO,KAAK;AAChB;;;;;"}
@@ -8,11 +8,16 @@ var ReadModelView = require('./ReadModelView.js');
8
8
  var EventsView = require('./EventsView.js');
9
9
  require('./TimeMachine.css');
10
10
 
11
+ var ViewModes;
12
+ (function (ViewModes) {
13
+ ViewModes["ReadModel"] = "ReadModel";
14
+ ViewModes["Events"] = "Events";
15
+ })(ViewModes || (ViewModes = {}));
11
16
  const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrollSensitivity = 50, }) => {
12
17
  const [selectedIndex, setSelectedIndex] = React.useState(currentVersionIndex);
13
18
  const [hoveredIndex, setHoveredIndex] = React.useState(null);
14
19
  const [isHoveringCard, setIsHoveringCard] = React.useState(false);
15
- const [viewMode, setViewMode] = React.useState('readmodel');
20
+ const [viewMode, setViewMode] = React.useState(ViewModes.ReadModel);
16
21
  const containerRef = React.useRef(null);
17
22
  const scrollAccumulatorRef = React.useRef(0);
18
23
  const handleVersionSelect = React.useCallback((index) => {
@@ -23,7 +28,7 @@ const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrol
23
28
  setHoveredIndex(index);
24
29
  }, []);
25
30
  React.useEffect(() => {
26
- if (viewMode !== 'readmodel') {
31
+ if (viewMode !== ViewModes.ReadModel) {
27
32
  return;
28
33
  }
29
34
  const container = containerRef.current;
@@ -52,7 +57,7 @@ const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrol
52
57
  };
53
58
  }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);
54
59
  const allEvents = versions.flatMap(version => version.events || []);
55
- return (jsxRuntime.jsxs("div", { className: "time-machine", ref: containerRef, children: [jsxRuntime.jsxs("div", { className: "view-switcher", children: [jsxRuntime.jsx("button", { className: `view-button ${viewMode === 'readmodel' ? 'active' : ''}`, onClick: () => setViewMode('readmodel'), "aria-label": "Read Model View", title: "Read Model View", children: jsxRuntime.jsx("i", { className: "pi pi-box" }) }), jsxRuntime.jsx("button", { className: `view-button ${viewMode === 'events' ? 'active' : ''}`, onClick: () => setViewMode('events'), "aria-label": "Events View", title: "Events View", children: jsxRuntime.jsx("i", { className: "pi pi-list" }) })] }), viewMode === 'readmodel' ? (jsxRuntime.jsx(ReadModelView.ReadModelView, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onVersionSelect: handleVersionSelect, onHoveringCardChange: setIsHoveringCard })) : (jsxRuntime.jsx(EventsView.EventsView, { events: allEvents })), viewMode === 'readmodel' && (jsxRuntime.jsx(Timeline, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onSelect: handleVersionSelect, onHover: handleTimelineHover })), viewMode === 'readmodel' && (jsxRuntime.jsxs("div", { className: "navigation-controls", children: [jsxRuntime.jsx("button", { className: "nav-button prev", disabled: selectedIndex === 0, onClick: () => handleVersionSelect(Math.max(0, selectedIndex - 1)), "aria-label": "Previous version", children: "\u2039" }), jsxRuntime.jsx("button", { className: "nav-button next", disabled: selectedIndex === versions.length - 1, onClick: () => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1)), "aria-label": "Next version", children: "\u203A" })] }))] }));
60
+ return (jsxRuntime.jsxs("div", { className: "time-machine", ref: containerRef, children: [jsxRuntime.jsxs("div", { className: "view-switcher", children: [jsxRuntime.jsx("button", { className: `view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`, onClick: () => setViewMode(ViewModes.ReadModel), "aria-label": "Read Model View", title: "Read Model View", children: jsxRuntime.jsx("i", { className: "pi pi-box" }) }), jsxRuntime.jsx("button", { className: `view-button ${viewMode === ViewModes.Events ? 'active' : ''}`, onClick: () => setViewMode(ViewModes.Events), "aria-label": "Events View", title: "Events View", children: jsxRuntime.jsx("i", { className: "pi pi-list" }) })] }), viewMode === ViewModes.ReadModel ? (jsxRuntime.jsx(ReadModelView.ReadModelView, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onVersionSelect: handleVersionSelect, onHoveringCardChange: setIsHoveringCard })) : (jsxRuntime.jsx(EventsView.EventsView, { events: allEvents })), viewMode === ViewModes.ReadModel && (jsxRuntime.jsx(Timeline, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onSelect: handleVersionSelect, onHover: handleTimelineHover })), viewMode === ViewModes.ReadModel && (jsxRuntime.jsxs("div", { className: "navigation-controls", children: [jsxRuntime.jsx("button", { className: "nav-button prev", disabled: selectedIndex === 0, onClick: () => handleVersionSelect(Math.max(0, selectedIndex - 1)), "aria-label": "Previous version", children: "\u2039" }), jsxRuntime.jsx("button", { className: "nav-button next", disabled: selectedIndex === versions.length - 1, onClick: () => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1)), "aria-label": "Next version", children: "\u203A" })] }))] }));
56
61
  };
57
62
  const Timeline = ({ versions, selectedIndex, hoveredIndex, onSelect, onHover, }) => {
58
63
  const getMagnification = (index, hoverIdx) => {
@@ -1 +1 @@
1
- {"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\ntype ViewMode = 'readmodel' | 'events';\n\ninterface TimeMachineProps {\n versions: Version[];\n currentVersionIndex?: number;\n onVersionChange?: (index: number) => void;\n /** Scroll sensitivity - higher values require more scrolling to change versions */\n scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n versions,\n currentVersionIndex = 0,\n onVersionChange,\n scrollSensitivity = 50,\n}) => {\n const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n const [isHoveringCard, setIsHoveringCard] = useState(false);\n const [viewMode, setViewMode] = useState<ViewMode>('readmodel');\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollAccumulatorRef = useRef(0);\n\n const handleVersionSelect = useCallback((index: number) => {\n setSelectedIndex(index);\n onVersionChange?.(index);\n }, [onVersionChange]);\n\n const handleTimelineHover = useCallback((index: number | null) => {\n setHoveredIndex(index);\n }, []);\n\n // Handle trackpad two-finger scroll gesture\n useEffect(() => {\n if (viewMode !== 'readmodel') {\n return;\n }\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleWheel = (e: WheelEvent) => {\n // Only handle navigation when not hovering over a card\n if (isHoveringCard) {\n return; // Allow normal scrolling within cards\n }\n\n // Prevent default scrolling behavior\n e.preventDefault();\n\n // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n // Most trackpads send horizontal delta for two-finger swipe\n const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n // Accumulate scroll delta\n scrollAccumulatorRef.current += delta;\n\n // Check if we've accumulated enough scroll to change version\n if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n if (newIndex !== selectedIndex) {\n setSelectedIndex(newIndex);\n onVersionChange?.(newIndex);\n }\n\n // Reset accumulator after version change\n scrollAccumulatorRef.current = 0;\n }\n };\n\n container.addEventListener('wheel', handleWheel, { passive: false });\n\n return () => {\n container.removeEventListener('wheel', handleWheel);\n };\n }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n // Calculate the display index - either hovered or selected\n // (not used in this component; ReadModelView computes its own display index)\n void hoveredIndex;\n void selectedIndex;\n\n // Get all events from all versions\n const allEvents = versions.flatMap(version => version.events || []);\n\n return (\n <div className=\"time-machine\" ref={containerRef}>\n {/* View Switcher */}\n <div className=\"view-switcher\">\n <button\n className={`view-button ${viewMode === 'readmodel' ? 'active' : ''}`}\n onClick={() => setViewMode('readmodel')}\n aria-label=\"Read Model View\"\n title=\"Read Model View\"\n >\n <i className=\"pi pi-box\" />\n </button>\n <button\n className={`view-button ${viewMode === 'events' ? 'active' : ''}`}\n onClick={() => setViewMode('events')}\n aria-label=\"Events View\"\n title=\"Events View\"\n >\n <i className=\"pi pi-list\" />\n </button>\n </div>\n\n {/* Render the appropriate view */}\n {viewMode === 'readmodel' ? (\n <ReadModelView\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onVersionSelect={handleVersionSelect}\n onHoveringCardChange={setIsHoveringCard}\n />\n ) : (\n <EventsView events={allEvents} />\n )}\n\n {/* Timeline - only show in ReadModel view */}\n {viewMode === 'readmodel' && (\n <Timeline\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onSelect={handleVersionSelect}\n onHover={handleTimelineHover}\n />\n )}\n\n {/* Navigation arrows - only show in ReadModel view */}\n {viewMode === 'readmodel' && (\n <div className=\"navigation-controls\">\n <button\n className=\"nav-button prev\"\n disabled={selectedIndex === 0}\n onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n aria-label=\"Previous version\"\n >\n ‹\n </button>\n <button\n className=\"nav-button next\"\n disabled={selectedIndex === versions.length - 1}\n onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n aria-label=\"Next version\"\n >\n ›\n </button>\n </div>\n )}\n </div>\n );\n};\n\ninterface TimelineProps {\n versions: Version[];\n selectedIndex: number;\n hoveredIndex: number | null;\n onSelect: (index: number) => void;\n onHover: (index: number | null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n versions,\n selectedIndex,\n hoveredIndex,\n onSelect,\n onHover,\n}) => {\n const getMagnification = (index: number, hoverIdx: number | null): number => {\n if (hoverIdx === null) return 1;\n const distance = Math.abs(index - hoverIdx);\n // Fish-eye effect: items close to hover get magnified\n if (distance === 0) return 2.0;\n if (distance === 1) return 1.6;\n if (distance === 2) return 1.3;\n if (distance === 3) return 1.1;\n return 1;\n };\n\n const formatDate = (date: Date): string => {\n return date.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n });\n };\n\n const formatTime = (date: Date): string => {\n return date.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: '2-digit',\n hour12: true,\n });\n };\n\n return (\n <div\n className=\"timeline\"\n onMouseLeave={() => onHover(null)}\n >\n <div className=\"timeline-track\">\n {versions.map((version, index) => {\n const magnification = getMagnification(index, hoveredIndex);\n const isSelected = index === selectedIndex;\n const isHovered = index === hoveredIndex;\n\n return (\n <div\n key={version.id}\n className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n style={{\n '--magnification': magnification,\n } as React.CSSProperties}\n onMouseEnter={() => onHover(index)}\n onClick={() => onSelect(index)}\n >\n <div className=\"timeline-tick\"></div>\n <div className=\"timeline-label\">\n <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default TimeMachine;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}
1
+ {"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\nenum ViewModes {\n ReadModel = 'ReadModel',\n Events = 'Events',\n}\n\ninterface TimeMachineProps {\n versions: Version[];\n currentVersionIndex?: number;\n onVersionChange?: (index: number) => void;\n /** Scroll sensitivity - higher values require more scrolling to change versions */\n scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n versions,\n currentVersionIndex = 0,\n onVersionChange,\n scrollSensitivity = 50,\n}) => {\n const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n const [isHoveringCard, setIsHoveringCard] = useState(false);\n const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollAccumulatorRef = useRef(0);\n\n const handleVersionSelect = useCallback((index: number) => {\n setSelectedIndex(index);\n onVersionChange?.(index);\n }, [onVersionChange]);\n\n const handleTimelineHover = useCallback((index: number | null) => {\n setHoveredIndex(index);\n }, []);\n\n // Handle trackpad two-finger scroll gesture\n useEffect(() => {\n if (viewMode !== ViewModes.ReadModel) {\n return;\n }\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleWheel = (e: WheelEvent) => {\n // Only handle navigation when not hovering over a card\n if (isHoveringCard) {\n return; // Allow normal scrolling within cards\n }\n\n // Prevent default scrolling behavior\n e.preventDefault();\n\n // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n // Most trackpads send horizontal delta for two-finger swipe\n const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n // Accumulate scroll delta\n scrollAccumulatorRef.current += delta;\n\n // Check if we've accumulated enough scroll to change version\n if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n if (newIndex !== selectedIndex) {\n setSelectedIndex(newIndex);\n onVersionChange?.(newIndex);\n }\n\n // Reset accumulator after version change\n scrollAccumulatorRef.current = 0;\n }\n };\n\n container.addEventListener('wheel', handleWheel, { passive: false });\n\n return () => {\n container.removeEventListener('wheel', handleWheel);\n };\n }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n // Calculate the display index - either hovered or selected\n // (not used in this component; ReadModelView computes its own display index)\n void hoveredIndex;\n void selectedIndex;\n\n // Get all events from all versions\n const allEvents = versions.flatMap(version => version.events || []);\n\n return (\n <div className=\"time-machine\" ref={containerRef}>\n {/* View Switcher */}\n <div className=\"view-switcher\">\n <button\n className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}\n onClick={() => setViewMode(ViewModes.ReadModel)}\n aria-label=\"Read Model View\"\n title=\"Read Model View\"\n >\n <i className=\"pi pi-box\" />\n </button>\n <button\n className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}\n onClick={() => setViewMode(ViewModes.Events)}\n aria-label=\"Events View\"\n title=\"Events View\"\n >\n <i className=\"pi pi-list\" />\n </button>\n </div>\n\n {/* Render the appropriate view */}\n {viewMode === ViewModes.ReadModel ? (\n <ReadModelView\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onVersionSelect={handleVersionSelect}\n onHoveringCardChange={setIsHoveringCard}\n />\n ) : (\n <EventsView events={allEvents} />\n )}\n\n {/* Timeline - only show in ReadModel view */}\n {viewMode === ViewModes.ReadModel && (\n <Timeline\n versions={versions}\n selectedIndex={selectedIndex}\n hoveredIndex={hoveredIndex}\n onSelect={handleVersionSelect}\n onHover={handleTimelineHover}\n />\n )}\n\n {/* Navigation arrows - only show in ReadModel view */}\n {viewMode === ViewModes.ReadModel && (\n <div className=\"navigation-controls\">\n <button\n className=\"nav-button prev\"\n disabled={selectedIndex === 0}\n onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n aria-label=\"Previous version\"\n >\n ‹\n </button>\n <button\n className=\"nav-button next\"\n disabled={selectedIndex === versions.length - 1}\n onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n aria-label=\"Next version\"\n >\n ›\n </button>\n </div>\n )}\n </div>\n );\n};\n\ninterface TimelineProps {\n versions: Version[];\n selectedIndex: number;\n hoveredIndex: number | null;\n onSelect: (index: number) => void;\n onHover: (index: number | null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n versions,\n selectedIndex,\n hoveredIndex,\n onSelect,\n onHover,\n}) => {\n const getMagnification = (index: number, hoverIdx: number | null): number => {\n if (hoverIdx === null) return 1;\n const distance = Math.abs(index - hoverIdx);\n // Fish-eye effect: items close to hover get magnified\n if (distance === 0) return 2.0;\n if (distance === 1) return 1.6;\n if (distance === 2) return 1.3;\n if (distance === 3) return 1.1;\n return 1;\n };\n\n const formatDate = (date: Date): string => {\n return date.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n });\n };\n\n const formatTime = (date: Date): string => {\n return date.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: '2-digit',\n hour12: true,\n });\n };\n\n return (\n <div\n className=\"timeline\"\n onMouseLeave={() => onHover(null)}\n >\n <div className=\"timeline-track\">\n {versions.map((version, index) => {\n const magnification = getMagnification(index, hoveredIndex);\n const isSelected = index === selectedIndex;\n const isHovered = index === hoveredIndex;\n\n return (\n <div\n key={version.id}\n className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n style={{\n '--magnification': magnification,\n } as React.CSSProperties}\n onMouseEnter={() => onHover(index)}\n onClick={() => onSelect(index)}\n >\n <div className=\"timeline-tick\"></div>\n <div className=\"timeline-label\">\n <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default TimeMachine;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}
@@ -4,4 +4,5 @@ declare const meta: Meta<typeof CommandForm>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof CommandForm>;
6
6
  export declare const Default: Story;
7
+ export declare const UserRegistration: Story;
7
8
  //# sourceMappingURL=CommandForm.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"CommandForm.stories.d.ts","sourceRoot":"","sources":["../../../CommandForm/CommandForm.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAC1C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}
1
+ {"version":3,"file":"CommandForm.stories.d.ts","sourceRoot":"","sources":["../../../CommandForm/CommandForm.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAa5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAQ1C,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAwF9B,CAAC"}
@@ -1,12 +1,45 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from 'react';
2
3
  import { CommandForm } from './CommandForm';
4
+ import { ValidationMessage } from './ValidationMessage';
5
+ import { UserRegistrationCommand } from './UserRegistrationCommand';
6
+ import { InputTextField, NumberField, TextAreaField, CheckboxField, RangeField, SelectField } from './fields';
7
+ import { Button } from 'primereact/button';
3
8
  const meta = {
4
9
  title: 'CommandForm/CommandForm',
5
10
  component: CommandForm,
6
11
  };
7
12
  export default meta;
13
+ const roleOptions = [
14
+ { id: 'user', name: 'User' },
15
+ { id: 'admin', name: 'Administrator' },
16
+ { id: 'moderator', name: 'Moderator' }
17
+ ];
8
18
  export const Default = {
9
19
  args: {},
10
20
  render: (args) => (_jsx("div", { className: "storybook-wrapper", children: _jsx(CommandForm, { ...args }) }))
11
21
  };
22
+ export const UserRegistration = {
23
+ render: () => {
24
+ const [result, setResult] = useState('');
25
+ const handleSubmit = () => {
26
+ setResult('Form submitted successfully!');
27
+ };
28
+ return (_jsxs("div", { className: "p-8 w-[800px] mx-auto", children: [_jsx("h2", { className: "text-2xl font-bold mb-6", children: "User Registration Form" }), _jsx("h3", { className: "text-xl font-semibold mb-4 mt-6", children: "Account Information" }), _jsxs(CommandForm, { command: UserRegistrationCommand, initialValues: {
29
+ username: '',
30
+ email: '',
31
+ password: '',
32
+ confirmPassword: '',
33
+ age: 18,
34
+ bio: '',
35
+ favoriteColor: '#3b82f6',
36
+ birthDate: '',
37
+ agreeToTerms: false,
38
+ experienceLevel: 50,
39
+ role: ''
40
+ }, onFieldChange: (cmd, fieldName, oldValue, newValue) => {
41
+ console.log(`Field ${fieldName} changed from`, oldValue, 'to', newValue);
42
+ }, children: [_jsx(InputTextField, { value: c => c.username, title: "Username", placeholder: "Enter username" }), _jsx(ValidationMessage, { value: c => c.username }), _jsx(InputTextField, { value: c => c.email, title: "Email Address", type: "email", placeholder: "Enter email" }), _jsx(ValidationMessage, { value: c => c.email }), _jsx(InputTextField, { value: c => c.password, title: "Password", type: "password", placeholder: "Enter password" }), _jsx(ValidationMessage, { value: c => c.password }), _jsx(InputTextField, { value: c => c.confirmPassword, title: "Confirm Password", type: "password", placeholder: "Confirm password" }), _jsx(ValidationMessage, { value: c => c.confirmPassword }), _jsx("h3", { className: "text-xl font-semibold mb-0 mt-6", children: "Personal Information" }), _jsx(NumberField, { value: c => c.age, title: "Age", placeholder: "Enter age", min: 13, max: 120 }), _jsx(ValidationMessage, { value: c => c.age }), _jsx(InputTextField, { value: c => c.birthDate, title: "Birth Date", type: "date", placeholder: "Select birth date" }), _jsx(ValidationMessage, { value: c => c.birthDate }), _jsx(TextAreaField, { value: c => c.bio, title: "Bio", placeholder: "Tell us about yourself", rows: 4, required: false }), _jsx(ValidationMessage, { value: c => c.bio }), _jsx(InputTextField, { value: c => c.favoriteColor, title: "Favorite Color", type: "color" }), _jsx(ValidationMessage, { value: c => c.favoriteColor }), _jsx("h3", { className: "text-xl font-semibold mb-0 mt-6", children: "Preferences" }), _jsx(SelectField, { value: c => c.role, title: "Role", options: roleOptions, optionIdField: "id", optionLabelField: "name", placeholder: "Select a role" }), _jsx(ValidationMessage, { value: c => c.role }), _jsx(RangeField, { value: c => c.experienceLevel, title: "Experience Level", min: 0, max: 100, step: 10 }), _jsx(ValidationMessage, { value: c => c.experienceLevel }), _jsx(CheckboxField, { value: c => c.agreeToTerms, title: "Terms & Conditions", label: "I agree to the terms and conditions" }), _jsx(ValidationMessage, { value: c => c.agreeToTerms })] }), _jsxs("div", { className: "flex gap-2 mt-6", children: [_jsx(Button, { label: "Submit", onClick: handleSubmit, severity: "success" }), _jsx(Button, { label: "Cancel", onClick: () => setResult(''), severity: "secondary" })] }), result && (_jsx("div", { className: "bg-green-100 p-4 rounded-lg mt-4 border border-green-300", children: _jsx("p", { className: "text-green-800 font-semibold m-0", children: result }) }))] }));
43
+ }
44
+ };
12
45
  //# sourceMappingURL=CommandForm.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CommandForm.stories.js","sourceRoot":"","sources":["../../../CommandForm/CommandForm.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,WAAW;CACvB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE,EAEL;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,SAAS,EAAC,mBAAmB,YAC9B,KAAC,WAAW,OAAK,IAAI,GAAI,GACvB,CACT;CACJ,CAAC"}
1
+ {"version":3,"file":"CommandForm.stories.js","sourceRoot":"","sources":["../../../CommandForm/CommandForm.stories.tsx"],"names":[],"mappings":";AAGA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EACH,cAAc,EACd,WAAW,EACX,aAAa,EACb,aAAa,EACb,UAAU,EACV,WAAW,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,IAAI,GAA6B;IACnC,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,WAAW;CACzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,WAAW,GAAG;IAChB,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;IAC5B,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE;IACtC,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE;CACzC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,SAAS,EAAC,mBAAmB,YAC9B,KAAC,WAAW,OAAK,IAAI,GAAI,GACvB,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;QAEjD,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,SAAS,CAAC,8BAA8B,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEF,OAAO,CACH,eAAK,SAAS,EAAC,uBAAuB,aAClC,aAAI,SAAS,EAAC,yBAAyB,uCAA4B,EAEnE,aAAI,SAAS,EAAC,iCAAiC,oCAAyB,EACxE,MAAC,WAAW,IACR,OAAO,EAAE,uBAAuB,EAChC,aAAa,EAAE;wBACX,QAAQ,EAAE,EAAE;wBACZ,KAAK,EAAE,EAAE;wBACT,QAAQ,EAAE,EAAE;wBACZ,eAAe,EAAE,EAAE;wBACnB,GAAG,EAAE,EAAE;wBACP,GAAG,EAAE,EAAE;wBACP,aAAa,EAAE,SAAS;wBACxB,SAAS,EAAE,EAAE;wBACb,YAAY,EAAE,KAAK;wBACnB,eAAe,EAAE,EAAE;wBACnB,IAAI,EAAE,EAAE;qBACX,EACD,aAAa,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;wBAClD,OAAO,CAAC,GAAG,CAAC,SAAS,SAAS,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;oBAC7E,CAAC,aAED,KAAC,cAAc,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAC,UAAU,EAAC,WAAW,EAAC,gBAAgB,GAAG,EACjH,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAI,EAEtE,KAAC,cAAc,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,aAAa,GAAG,EAC7H,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,GAAI,EAEnE,KAAC,cAAc,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,WAAW,EAAC,gBAAgB,GAAG,EACjI,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAI,EAEtE,KAAC,cAAc,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,UAAU,EAAC,WAAW,EAAC,kBAAkB,GAAG,EAClJ,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,GAAI,EAE7E,aAAI,SAAS,EAAC,iCAAiC,qCAA0B,EACzE,KAAC,WAAW,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,WAAW,EAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAI,EAClH,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAI,EAEjE,KAAC,cAAc,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,mBAAmB,GAAG,EACnI,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GAAI,EAEvE,KAAC,aAAa,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,wBAAwB,EAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,EACxI,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAI,EAEjE,KAAC,cAAc,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5G,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,GAAI,EAE3E,aAAI,SAAS,EAAC,iCAAiC,4BAAiB,EAChE,KAAC,WAAW,IACR,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAClB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,WAAW,EACpB,aAAa,EAAC,IAAI,EAClB,gBAAgB,EAAC,MAAM,EACvB,WAAW,EAAC,eAAe,GAC7B,EACF,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,GAAI,EAElE,KAAC,UAAU,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,GAAI,EAC3H,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,GAAI,EAE7E,KAAC,aAAa,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAC,qCAAqC,GAAG,EAC7I,KAAC,iBAAiB,IAA0B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,GAAI,IAChE,EAEd,eAAK,SAAS,EAAC,iBAAiB,aAC5B,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAC,SAAS,GAAG,EACnE,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAC,WAAW,GAAG,IAC1E,EAEL,MAAM,IAAI,CACP,cAAK,SAAS,EAAC,0DAA0D,YACrE,YAAG,SAAS,EAAC,kCAAkC,YAAE,MAAM,GAAK,GAC1D,CACT,IACC,CACT,CAAC;IACN,CAAC;CACJ,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"CommandFormFields.d.ts","sourceRoot":"","sources":["../../../CommandForm/CommandFormFields.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;CAC5D;AAED,MAAM,WAAW,sBAAsB;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1D,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;CAC1B;AAyED,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA8C9D,CAAC"}
1
+ {"version":3,"file":"CommandFormFields.d.ts","sourceRoot":"","sources":["../../../CommandForm/CommandFormFields.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;CAC5D;AAED,MAAM,WAAW,sBAAsB;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1D,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;CAC1B;AAkFD,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA8C9D,CAAC"}
@@ -21,11 +21,17 @@ const CommandFormFieldWrapper = ({ field, index }) => {
21
21
  onValueChange: (value) => {
22
22
  if (propertyName) {
23
23
  const oldValue = currentValue;
24
+ context.setCommandValues({ [propertyName]: value });
25
+ if (context.commandInstance && typeof context.commandInstance.validate === 'function') {
26
+ const validationResult = context.commandInstance.validate();
27
+ if (validationResult) {
28
+ context.setCommandResult(validationResult);
29
+ }
30
+ }
24
31
  if (context.onFieldValidate) {
25
32
  const validationError = context.onFieldValidate(context.commandInstance, propertyName, oldValue, value);
26
33
  context.setCustomFieldError(propertyName, validationError);
27
34
  }
28
- context.setCommandValues({ [propertyName]: value });
29
35
  if (context.onFieldChange) {
30
36
  context.onFieldChange(context.commandInstance, propertyName, oldValue, value);
31
37
  }
@@ -36,7 +42,7 @@ const CommandFormFieldWrapper = ({ field, index }) => {
36
42
  invalid: !!errorMessage
37
43
  });
38
44
  const tooltipId = fieldProps.description ? `tooltip-${propertyName}-${index}` : undefined;
39
- return (jsxs("div", { style: { width: '100%' }, children: [jsxs("div", { className: "p-inputgroup", style: { width: '100%' }, children: [fieldProps.description && (jsx(Tooltip, { target: `.${tooltipId}`, content: fieldProps.description })), fieldProps.icon && (jsx("span", { className: `p-inputgroup-addon ${tooltipId || ''}`, children: fieldProps.icon })), clonedField] }), errorMessage && (jsx("small", { className: "p-error block mt-1", children: errorMessage }))] }));
45
+ return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "p-inputgroup w-full", children: [fieldProps.description && (jsx(Tooltip, { target: `.${tooltipId}`, content: fieldProps.description })), fieldProps.icon && (jsx("span", { className: `p-inputgroup-addon ${tooltipId || ''}`, children: fieldProps.icon })), clonedField] }), errorMessage && (jsx("small", { className: "p-error block mt-1", children: errorMessage }))] }));
40
46
  };
41
47
  const CommandFormFields = (props) => {
42
48
  const { fields, columns } = props;
@@ -48,7 +54,7 @@ const CommandFormFields = (props) => {
48
54
  return (jsx(CommandFormFieldWrapper, { field: field, index: index }, propertyName));
49
55
  }) }, `column-${columnIndex}`))) }));
50
56
  }
51
- return (jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }, children: (fields || []).map((field, index) => {
57
+ return (jsx("div", { className: "flex flex-col gap-4 w-full", children: (fields || []).map((field, index) => {
52
58
  const fieldProps = field.props;
53
59
  const propertyAccessor = fieldProps.value;
54
60
  const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${index}`;
@@ -1 +1 @@
1
- {"version":3,"file":"CommandFormFields.js","sources":["../../../CommandForm/CommandFormFields.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCommandFormContext } from './CommandForm';\nimport React from 'react';\nimport { Tooltip } from 'primereact/tooltip';\nimport type { CommandFormFieldProps } from './CommandFormField';\n\nexport interface ColumnInfo {\n fields: React.ReactElement<CommandFormFieldProps<any>>[];\n}\n\nexport interface CommandFormFieldsProps {\n fields?: React.ReactElement<CommandFormFieldProps<any>>[];\n columns?: ColumnInfo[];\n}\n\n// Separate component for each field to prevent re-rendering all fields\nconst CommandFormFieldWrapper = ({ field, index }: { field: React.ReactElement<CommandFormFieldProps<any>>; index: number }) => {\n const context = useCommandFormContext<any>();\n const fieldProps = field.props as CommandFormFieldProps<any>;\n const propertyAccessor = fieldProps.value;\n\n // Get the property name from the accessor function\n const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : '';\n\n // Get the current value from the command instance\n const currentValue = propertyName ? (context.commandInstance as any)?.[propertyName] : undefined;\n\n // Get the error message for this field, if any\n const errorMessage = propertyName ? context.getFieldError(propertyName) : undefined;\n\n // Get the property descriptor for this field from the command instance\n const propertyDescriptor = propertyName && (context.commandInstance as any)?.propertyDescriptors\n ? (context.commandInstance as any).propertyDescriptors.find((pd: any) => pd.name === propertyName)\n : undefined;\n\n // Clone the field element with the current value and onChange handler\n const clonedField = React.cloneElement(field as React.ReactElement, {\n ...fieldProps,\n currentValue,\n propertyDescriptor,\n fieldName: propertyName,\n onValueChange: (value: unknown) => {\n if (propertyName) {\n const oldValue = currentValue;\n\n // Call custom field validator if provided\n if (context.onFieldValidate) {\n const validationError = context.onFieldValidate(context.commandInstance as any, propertyName, oldValue, value);\n context.setCustomFieldError(propertyName, validationError);\n }\n\n context.setCommandValues({ [propertyName]: value } as any);\n\n // Call field change callback if provided\n if (context.onFieldChange) {\n context.onFieldChange(context.commandInstance as any, propertyName, oldValue, value);\n }\n }\n fieldProps.onChange?.(value as any);\n },\n required: fieldProps.required ?? true,\n invalid: !!errorMessage\n } as any);\n\n const tooltipId = fieldProps.description ? `tooltip-${propertyName}-${index}` : undefined;\n\n return (\n <div style={{ width: '100%' }}>\n <div className=\"p-inputgroup\" style={{ width: '100%' }}>\n {fieldProps.description && (\n <Tooltip target={`.${tooltipId}`} content={fieldProps.description} />\n )}\n {fieldProps.icon && (\n <span className={`p-inputgroup-addon ${tooltipId || ''}`}>\n {fieldProps.icon}\n </span>\n )}\n {clonedField}\n </div>\n {errorMessage && (\n <small className=\"p-error block mt-1\">{errorMessage}</small>\n )}\n </div>\n );\n};\n\nexport const CommandFormFields = (props: CommandFormFieldsProps) => {\n const { fields, columns } = props;\n\n // Render columns if provided\n if (columns && columns.length > 0) {\n return (\n <div className=\"card flex flex-column md:flex-row gap-3\">\n {columns.map((column, columnIndex) => (\n <div key={`column-${columnIndex}`} className=\"flex flex-column gap-3 flex-1\">\n {column.fields.map((field, index) => {\n const fieldProps = field.props as CommandFormFieldProps<any>;\n const propertyAccessor = fieldProps.value;\n const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${columnIndex}-${index}`;\n\n return (\n <CommandFormFieldWrapper\n key={propertyName}\n field={field}\n index={index}\n />\n );\n })}\n </div>\n ))}\n </div>\n );\n }\n\n // Render fields (single column layout)\n return (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>\n {(fields || []).map((field, index) => {\n const fieldProps = field.props as CommandFormFieldProps<any>;\n const propertyAccessor = fieldProps.value;\n const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${index}`;\n\n return (\n <CommandFormFieldWrapper\n key={propertyName}\n field={field}\n index={index}\n />\n );\n })}\n </div>\n );\n};\n\n// Helper function to extract property name from accessor function\nfunction getPropertyName<T>(accessor: (obj: T) => unknown): string {\n const fnStr = accessor.toString();\n const match = fnStr.match(/\\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);\n return match ? match[1] : '';\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"CommandFormFields.js","sources":["../../../CommandForm/CommandFormFields.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCommandFormContext } from './CommandForm';\nimport React from 'react';\nimport { Tooltip } from 'primereact/tooltip';\nimport type { CommandFormFieldProps } from './CommandFormField';\n\nexport interface ColumnInfo {\n fields: React.ReactElement<CommandFormFieldProps<any>>[];\n}\n\nexport interface CommandFormFieldsProps {\n fields?: React.ReactElement<CommandFormFieldProps<any>>[];\n columns?: ColumnInfo[];\n}\n\n// Separate component for each field to prevent re-rendering all fields\nconst CommandFormFieldWrapper = ({ field, index }: { field: React.ReactElement<CommandFormFieldProps<any>>; index: number }) => {\n const context = useCommandFormContext<any>();\n const fieldProps = field.props as CommandFormFieldProps<any>;\n const propertyAccessor = fieldProps.value;\n\n // Get the property name from the accessor function\n const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : '';\n\n // Get the current value from the command instance\n const currentValue = propertyName ? (context.commandInstance as any)?.[propertyName] : undefined;\n\n // Get the error message for this field, if any\n const errorMessage = propertyName ? context.getFieldError(propertyName) : undefined;\n\n // Get the property descriptor for this field from the command instance\n const propertyDescriptor = propertyName && (context.commandInstance as any)?.propertyDescriptors\n ? (context.commandInstance as any).propertyDescriptors.find((pd: any) => pd.name === propertyName)\n : undefined;\n\n // Clone the field element with the current value and onChange handler\n const clonedField = React.cloneElement(field as React.ReactElement, {\n ...fieldProps,\n currentValue,\n propertyDescriptor,\n fieldName: propertyName,\n onValueChange: (value: unknown) => {\n if (propertyName) {\n const oldValue = currentValue;\n\n // Update the command value\n context.setCommandValues({ [propertyName]: value } as any);\n\n // Call validate() on the command instance and store the result\n if (context.commandInstance && typeof (context.commandInstance as any).validate === 'function') {\n const validationResult = (context.commandInstance as any).validate();\n if (validationResult) {\n context.setCommandResult(validationResult);\n }\n }\n\n // Call custom field validator if provided\n if (context.onFieldValidate) {\n const validationError = context.onFieldValidate(context.commandInstance as any, propertyName, oldValue, value);\n context.setCustomFieldError(propertyName, validationError);\n }\n\n // Call field change callback if provided\n if (context.onFieldChange) {\n context.onFieldChange(context.commandInstance as any, propertyName, oldValue, value);\n }\n }\n fieldProps.onChange?.(value as any);\n },\n required: fieldProps.required ?? true,\n invalid: !!errorMessage\n } as any);\n\n const tooltipId = fieldProps.description ? `tooltip-${propertyName}-${index}` : undefined;\n\n return (\n <div className=\"w-full\">\n <div className=\"p-inputgroup w-full\">\n {fieldProps.description && (\n <Tooltip target={`.${tooltipId}`} content={fieldProps.description} />\n )}\n {fieldProps.icon && (\n <span className={`p-inputgroup-addon ${tooltipId || ''}`}>\n {fieldProps.icon}\n </span>\n )}\n {clonedField}\n </div>\n {errorMessage && (\n <small className=\"p-error block mt-1\">{errorMessage}</small>\n )}\n </div>\n );\n};\n\nexport const CommandFormFields = (props: CommandFormFieldsProps) => {\n const { fields, columns } = props;\n\n // Render columns if provided\n if (columns && columns.length > 0) {\n return (\n <div className=\"card flex flex-column md:flex-row gap-3\">\n {columns.map((column, columnIndex) => (\n <div key={`column-${columnIndex}`} className=\"flex flex-column gap-3 flex-1\">\n {column.fields.map((field, index) => {\n const fieldProps = field.props as CommandFormFieldProps<any>;\n const propertyAccessor = fieldProps.value;\n const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${columnIndex}-${index}`;\n\n return (\n <CommandFormFieldWrapper\n key={propertyName}\n field={field}\n index={index}\n />\n );\n })}\n </div>\n ))}\n </div>\n );\n }\n\n // Render fields (single column layout)\n return (\n <div className=\"flex flex-col gap-4 w-full\">\n {(fields || []).map((field, index) => {\n const fieldProps = field.props as CommandFormFieldProps<any>;\n const propertyAccessor = fieldProps.value;\n const propertyName = propertyAccessor ? getPropertyName(propertyAccessor) : `field-${index}`;\n\n return (\n <CommandFormFieldWrapper\n key={propertyName}\n field={field}\n index={index}\n />\n );\n })}\n </div>\n );\n};\n\n// Helper function to extract property name from accessor function\nfunction getPropertyName<T>(accessor: (obj: T) => unknown): string {\n const fnStr = accessor.toString();\n const match = fnStr.match(/\\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);\n return match ? match[1] : '';\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
@@ -0,0 +1,63 @@
1
+ import { Command, CommandValidator } from '@cratis/arc/commands';
2
+ import { SetCommandValues, ClearCommandValues } from '@cratis/arc.react/commands';
3
+ import { PropertyDescriptor } from '@cratis/arc/reflection';
4
+ import '@cratis/arc/validation';
5
+ export interface IUserRegistrationCommand {
6
+ username?: string;
7
+ email?: string;
8
+ password?: string;
9
+ confirmPassword?: string;
10
+ age?: number;
11
+ bio?: string;
12
+ favoriteColor?: string;
13
+ birthDate?: string;
14
+ agreeToTerms?: boolean;
15
+ experienceLevel?: number;
16
+ role?: string;
17
+ }
18
+ export declare class UserRegistrationCommandValidator extends CommandValidator<IUserRegistrationCommand> {
19
+ constructor();
20
+ }
21
+ export declare class UserRegistrationCommand extends Command<IUserRegistrationCommand, object> implements IUserRegistrationCommand {
22
+ readonly route: string;
23
+ readonly validation: CommandValidator;
24
+ readonly propertyDescriptors: PropertyDescriptor[];
25
+ private _username;
26
+ private _email;
27
+ private _password;
28
+ private _confirmPassword;
29
+ private _age;
30
+ private _bio;
31
+ private _favoriteColor;
32
+ private _birthDate;
33
+ private _agreeToTerms;
34
+ private _experienceLevel;
35
+ private _role;
36
+ constructor();
37
+ get requestParameters(): string[];
38
+ get properties(): string[];
39
+ get username(): string;
40
+ set username(value: string);
41
+ get email(): string;
42
+ set email(value: string);
43
+ get password(): string;
44
+ set password(value: string);
45
+ get confirmPassword(): string;
46
+ set confirmPassword(value: string);
47
+ get age(): number;
48
+ set age(value: number);
49
+ get bio(): string;
50
+ set bio(value: string);
51
+ get favoriteColor(): string;
52
+ set favoriteColor(value: string);
53
+ get birthDate(): string;
54
+ set birthDate(value: string);
55
+ get agreeToTerms(): boolean;
56
+ set agreeToTerms(value: boolean);
57
+ get experienceLevel(): number;
58
+ set experienceLevel(value: number);
59
+ get role(): string;
60
+ set role(value: string);
61
+ static use(initialValues?: IUserRegistrationCommand): [UserRegistrationCommand, SetCommandValues<IUserRegistrationCommand>, ClearCommandValues];
62
+ }
63
+ //# sourceMappingURL=UserRegistrationCommand.d.ts.map