@startsimpli/funnels 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +564 -0
- package/dist/client-3ESO2NHy.d.ts +310 -0
- package/dist/client-CZu03ACp.d.cts +310 -0
- package/dist/components/index.cjs +3243 -0
- package/dist/components/index.cjs.map +1 -0
- package/dist/components/index.css +198 -0
- package/dist/components/index.css.map +1 -0
- package/dist/components/index.d.cts +726 -0
- package/dist/components/index.d.ts +726 -0
- package/dist/components/index.js +3196 -0
- package/dist/components/index.js.map +1 -0
- package/dist/core/index.cjs +500 -0
- package/dist/core/index.cjs.map +1 -0
- package/dist/core/index.d.cts +359 -0
- package/dist/core/index.d.ts +359 -0
- package/dist/core/index.js +486 -0
- package/dist/core/index.js.map +1 -0
- package/dist/hooks/index.cjs +21 -0
- package/dist/hooks/index.cjs.map +1 -0
- package/dist/hooks/index.d.cts +11 -0
- package/dist/hooks/index.d.ts +11 -0
- package/dist/hooks/index.js +19 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/index-BGDEXbuz.d.cts +434 -0
- package/dist/index-BGDEXbuz.d.ts +434 -0
- package/dist/index.cjs +4499 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +198 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +99 -0
- package/dist/index.d.ts +99 -0
- package/dist/index.js +4421 -0
- package/dist/index.js.map +1 -0
- package/dist/store/index.cjs +391 -0
- package/dist/store/index.cjs.map +1 -0
- package/dist/store/index.d.cts +225 -0
- package/dist/store/index.d.ts +225 -0
- package/dist/store/index.js +388 -0
- package/dist/store/index.js.map +1 -0
- package/package.json +122 -0
|
@@ -0,0 +1,726 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { i as Funnel, k as FunnelRun, n as FunnelStatus, m as FunnelStage, o as StageStats, h as FilterRule, b as FieldDefinition, g as FilterLogic, O as Operator, M as MatchAction, N as NoMatchAction, l as FunnelRunStatus, T as TriggerType } from '../index-BGDEXbuz.js';
|
|
4
|
+
import { NodeProps } from '@xyflow/react';
|
|
5
|
+
import { F as FunnelApiClient } from '../client-3ESO2NHy.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* StageBreakdown Component
|
|
9
|
+
*
|
|
10
|
+
* Shows per-stage statistics in a funnel flow visualization.
|
|
11
|
+
*
|
|
12
|
+
* Design Rationale:
|
|
13
|
+
* - Sequential list shows funnel flow from top to bottom
|
|
14
|
+
* - Stage numbers (①②③) provide clear ordering
|
|
15
|
+
* - Exclusion count (-N) shows entities removed at each stage
|
|
16
|
+
* - Remaining count shows entities continuing to next stage
|
|
17
|
+
* - Color coding: gray for excluded, green for final matched
|
|
18
|
+
*
|
|
19
|
+
* Accessibility:
|
|
20
|
+
* - Semantic list structure
|
|
21
|
+
* - Clear text labels for all metrics
|
|
22
|
+
* - Color is supplementary to text
|
|
23
|
+
*/
|
|
24
|
+
interface StagePreviewStats {
|
|
25
|
+
stage_id: string;
|
|
26
|
+
stage_name: string;
|
|
27
|
+
input_count: number;
|
|
28
|
+
excluded_count: number;
|
|
29
|
+
remaining_count: number;
|
|
30
|
+
}
|
|
31
|
+
interface StageBreakdownProps {
|
|
32
|
+
stageStats: Record<string, StagePreviewStats>;
|
|
33
|
+
stages: Array<{
|
|
34
|
+
id: string;
|
|
35
|
+
name: string;
|
|
36
|
+
order: number;
|
|
37
|
+
}>;
|
|
38
|
+
className?: string;
|
|
39
|
+
}
|
|
40
|
+
declare function StageBreakdown({ stageStats, stages, className, }: StageBreakdownProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
|
|
42
|
+
interface PreviewResult {
|
|
43
|
+
totalMatched: number;
|
|
44
|
+
totalExcluded: number;
|
|
45
|
+
matchPercentage: number;
|
|
46
|
+
previewEntities: any[];
|
|
47
|
+
stageStats: Record<string, StagePreviewStats>;
|
|
48
|
+
}
|
|
49
|
+
interface FunnelPreviewProps {
|
|
50
|
+
funnel: Funnel;
|
|
51
|
+
sampleEntities: any[];
|
|
52
|
+
onPreview?: (result: PreviewResult) => void;
|
|
53
|
+
renderEntity?: (entity: any) => ReactNode;
|
|
54
|
+
maxPreviewEntities?: number;
|
|
55
|
+
className?: string;
|
|
56
|
+
}
|
|
57
|
+
declare function FunnelPreview({ funnel, sampleEntities, onPreview, renderEntity, maxPreviewEntities, className, }: FunnelPreviewProps): react_jsx_runtime.JSX.Element | null;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* PreviewStats Component
|
|
61
|
+
*
|
|
62
|
+
* Progress bar showing matched vs excluded entities with percentage.
|
|
63
|
+
*
|
|
64
|
+
* Design Rationale:
|
|
65
|
+
* - Horizontal progress bar shows match rate at a glance
|
|
66
|
+
* - Green (matched) and red (excluded) create clear visual distinction
|
|
67
|
+
* - Percentage provides quick understanding of funnel effectiveness
|
|
68
|
+
* - Counts below bar provide exact numbers
|
|
69
|
+
*
|
|
70
|
+
* Accessibility:
|
|
71
|
+
* - ARIA progressbar role for screen readers
|
|
72
|
+
* - Text labels provide non-visual indication
|
|
73
|
+
* - Sufficient color contrast
|
|
74
|
+
*/
|
|
75
|
+
interface PreviewStatsProps {
|
|
76
|
+
totalMatched: number;
|
|
77
|
+
totalExcluded: number;
|
|
78
|
+
matchPercentage: number;
|
|
79
|
+
className?: string;
|
|
80
|
+
}
|
|
81
|
+
declare function PreviewStats({ totalMatched, totalExcluded, matchPercentage, className, }: PreviewStatsProps): react_jsx_runtime.JSX.Element;
|
|
82
|
+
|
|
83
|
+
interface EntityCardProps {
|
|
84
|
+
entity: any;
|
|
85
|
+
renderEntity?: (entity: any) => ReactNode;
|
|
86
|
+
className?: string;
|
|
87
|
+
}
|
|
88
|
+
declare function EntityCard({ entity, renderEntity, className, }: EntityCardProps): react_jsx_runtime.JSX.Element;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* LoadingPreview Component
|
|
92
|
+
*
|
|
93
|
+
* Skeleton loading state for FunnelPreview.
|
|
94
|
+
*
|
|
95
|
+
* Design Rationale:
|
|
96
|
+
* - Skeleton shapes match actual content layout
|
|
97
|
+
* - Pulse animation indicates loading
|
|
98
|
+
* - Gray placeholders maintain visual hierarchy
|
|
99
|
+
* - Reduces perceived loading time
|
|
100
|
+
*
|
|
101
|
+
* Accessibility:
|
|
102
|
+
* - ARIA live region announces loading state
|
|
103
|
+
* - Screen readers informed of status change
|
|
104
|
+
*/
|
|
105
|
+
declare function LoadingPreview(): react_jsx_runtime.JSX.Element;
|
|
106
|
+
|
|
107
|
+
interface FunnelCardProps {
|
|
108
|
+
/** Funnel definition (BRUTALLY GENERIC - works for any entity type) */
|
|
109
|
+
funnel: Funnel;
|
|
110
|
+
/** Latest run results (optional - shows "no runs yet" state if missing) */
|
|
111
|
+
latestRun?: FunnelRun;
|
|
112
|
+
/** Callback when "View Flow" is clicked */
|
|
113
|
+
onViewFlow?: (funnel: Funnel) => void;
|
|
114
|
+
/** Callback when edit action is triggered (future: click on card header) */
|
|
115
|
+
onEdit?: (funnel: Funnel) => void;
|
|
116
|
+
/** Additional CSS classes */
|
|
117
|
+
className?: string;
|
|
118
|
+
}
|
|
119
|
+
declare function FunnelCard({ funnel, latestRun, onViewFlow, onEdit, className }: FunnelCardProps): react_jsx_runtime.JSX.Element;
|
|
120
|
+
|
|
121
|
+
interface StatusBadgeProps {
|
|
122
|
+
status: FunnelStatus;
|
|
123
|
+
className?: string;
|
|
124
|
+
}
|
|
125
|
+
declare function StatusBadge({ status, className }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* StageIndicator Component
|
|
129
|
+
*
|
|
130
|
+
* Displays a numbered circle badge for funnel stages with connecting vertical line.
|
|
131
|
+
*
|
|
132
|
+
* Design Rationale:
|
|
133
|
+
* - Numbered circles (①②③) provide clear sequential ordering
|
|
134
|
+
* - Vertical connecting line shows flow/progression
|
|
135
|
+
* - Compact layout conserves vertical space
|
|
136
|
+
* - Gray text for rule count de-emphasizes secondary info
|
|
137
|
+
*
|
|
138
|
+
* Accessibility:
|
|
139
|
+
* - Sufficient color contrast (4.5:1 minimum)
|
|
140
|
+
* - Semantic HTML structure
|
|
141
|
+
*/
|
|
142
|
+
interface StageIndicatorProps {
|
|
143
|
+
order: number;
|
|
144
|
+
name: string;
|
|
145
|
+
ruleCount: number;
|
|
146
|
+
isLast?: boolean;
|
|
147
|
+
className?: string;
|
|
148
|
+
}
|
|
149
|
+
declare function StageIndicator({ order, name, ruleCount, isLast, className }: StageIndicatorProps): react_jsx_runtime.JSX.Element;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* MatchBar Component
|
|
153
|
+
*
|
|
154
|
+
* Progress bar showing match percentage with count label.
|
|
155
|
+
*
|
|
156
|
+
* Design Rationale:
|
|
157
|
+
* - Green gradient conveys success/completion
|
|
158
|
+
* - Rounded corners match card aesthetic
|
|
159
|
+
* - Label shows absolute count (more actionable than percentage alone)
|
|
160
|
+
* - Gray background shows full scale
|
|
161
|
+
*
|
|
162
|
+
* Accessibility:
|
|
163
|
+
* - Text label provides non-visual indication of value
|
|
164
|
+
* - Sufficient contrast between bar and background
|
|
165
|
+
*/
|
|
166
|
+
interface MatchBarProps {
|
|
167
|
+
matched: number;
|
|
168
|
+
total: number;
|
|
169
|
+
className?: string;
|
|
170
|
+
}
|
|
171
|
+
declare function MatchBar({ matched, total, className }: MatchBarProps): react_jsx_runtime.JSX.Element;
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* FunnelStats Component
|
|
175
|
+
*
|
|
176
|
+
* Three-column stats display showing INPUT / MATCHED / EXCLUDED counts.
|
|
177
|
+
*
|
|
178
|
+
* Design Rationale:
|
|
179
|
+
* - Three equal columns for balance
|
|
180
|
+
* - Color coding: Blue (input/neutral), Green (matched/success), Red (excluded/warning)
|
|
181
|
+
* - Large numbers draw attention to key metrics
|
|
182
|
+
* - Labels use uppercase for consistency with status badge
|
|
183
|
+
*
|
|
184
|
+
* Accessibility:
|
|
185
|
+
* - Semantic HTML (dl/dt/dd structure)
|
|
186
|
+
* - Color is supplementary (text labels provide meaning)
|
|
187
|
+
*/
|
|
188
|
+
interface FunnelStatsProps {
|
|
189
|
+
input: number;
|
|
190
|
+
matched: number;
|
|
191
|
+
excluded: number;
|
|
192
|
+
className?: string;
|
|
193
|
+
}
|
|
194
|
+
declare function FunnelStats({ input, matched, excluded, className }: FunnelStatsProps): react_jsx_runtime.JSX.Element;
|
|
195
|
+
|
|
196
|
+
interface FunnelVisualFlowProps {
|
|
197
|
+
/** Funnel definition */
|
|
198
|
+
funnel: Funnel;
|
|
199
|
+
/** Optional run data for showing counts */
|
|
200
|
+
runData?: FunnelRun;
|
|
201
|
+
/** Callback when stage node is clicked */
|
|
202
|
+
onStageClick?: (stage: FunnelStage) => void;
|
|
203
|
+
/** Callback when edge is clicked (fromStageId, toStageId) */
|
|
204
|
+
onEdgeClick?: (fromStage: string, toStage: string) => void;
|
|
205
|
+
/** Additional CSS classes */
|
|
206
|
+
className?: string;
|
|
207
|
+
/** Height of the flow container (default: 600px) */
|
|
208
|
+
height?: number | string;
|
|
209
|
+
}
|
|
210
|
+
/**
|
|
211
|
+
* Generate circled numbers for stage indicators (①②③)
|
|
212
|
+
*/
|
|
213
|
+
declare function getCircledNumber(num: number): string;
|
|
214
|
+
declare function FunnelVisualFlow({ funnel, runData, onStageClick, onEdgeClick, className, height, }: FunnelVisualFlowProps): react_jsx_runtime.JSX.Element;
|
|
215
|
+
|
|
216
|
+
interface StageNodeData {
|
|
217
|
+
stage: FunnelStage;
|
|
218
|
+
stats?: StageStats;
|
|
219
|
+
onStageClick?: (stage: FunnelStage) => void;
|
|
220
|
+
}
|
|
221
|
+
declare function StageNode({ data }: NodeProps): react_jsx_runtime.JSX.Element;
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* FlowLegend Component
|
|
225
|
+
*
|
|
226
|
+
* Legend explaining the color coding of funnel stages.
|
|
227
|
+
*
|
|
228
|
+
* Design:
|
|
229
|
+
* - Minimal, non-intrusive panel in bottom-right
|
|
230
|
+
* - Color swatches with labels
|
|
231
|
+
* - Collapsible to save space
|
|
232
|
+
*
|
|
233
|
+
* Colors:
|
|
234
|
+
* - Blue: Continue to next stage
|
|
235
|
+
* - Red: Exclude entities
|
|
236
|
+
* - Yellow: Tag entities
|
|
237
|
+
* - Green: Final output
|
|
238
|
+
*/
|
|
239
|
+
declare function FlowLegend(): react_jsx_runtime.JSX.Element;
|
|
240
|
+
|
|
241
|
+
interface FilterRuleEditorProps {
|
|
242
|
+
/** Current filter rules */
|
|
243
|
+
rules: FilterRule[];
|
|
244
|
+
/** Callback when rules change */
|
|
245
|
+
onChange: (rules: FilterRule[]) => void;
|
|
246
|
+
/** Field registry for the entity type */
|
|
247
|
+
fieldRegistry: FieldDefinition[];
|
|
248
|
+
/** Filter logic (AND/OR) */
|
|
249
|
+
logic?: FilterLogic;
|
|
250
|
+
/** Callback when logic changes */
|
|
251
|
+
onLogicChange?: (logic: FilterLogic) => void;
|
|
252
|
+
/** Additional CSS classes */
|
|
253
|
+
className?: string;
|
|
254
|
+
}
|
|
255
|
+
declare function FilterRuleEditor({ rules, onChange, fieldRegistry, logic, onLogicChange, className, }: FilterRuleEditorProps): react_jsx_runtime.JSX.Element;
|
|
256
|
+
|
|
257
|
+
interface LogicToggleProps {
|
|
258
|
+
logic: FilterLogic;
|
|
259
|
+
onChange: (logic: FilterLogic) => void;
|
|
260
|
+
className?: string;
|
|
261
|
+
}
|
|
262
|
+
declare function LogicToggle({ logic, onChange, className }: LogicToggleProps): react_jsx_runtime.JSX.Element;
|
|
263
|
+
|
|
264
|
+
interface FieldSelectorProps {
|
|
265
|
+
fields: FieldDefinition[];
|
|
266
|
+
value: string;
|
|
267
|
+
onChange: (fieldName: string) => void;
|
|
268
|
+
error?: string;
|
|
269
|
+
className?: string;
|
|
270
|
+
}
|
|
271
|
+
declare function FieldSelector({ fields, value, onChange, error, className, }: FieldSelectorProps): react_jsx_runtime.JSX.Element;
|
|
272
|
+
|
|
273
|
+
interface OperatorSelectorProps {
|
|
274
|
+
operators: Operator[];
|
|
275
|
+
value: Operator | '';
|
|
276
|
+
onChange: (operator: Operator) => void;
|
|
277
|
+
disabled?: boolean;
|
|
278
|
+
error?: string;
|
|
279
|
+
className?: string;
|
|
280
|
+
}
|
|
281
|
+
declare function OperatorSelector({ operators, value, onChange, disabled, error, className, }: OperatorSelectorProps): react_jsx_runtime.JSX.Element;
|
|
282
|
+
|
|
283
|
+
interface RuleRowProps {
|
|
284
|
+
rule: FilterRule;
|
|
285
|
+
onChange: (rule: FilterRule) => void;
|
|
286
|
+
onRemove: () => void;
|
|
287
|
+
fieldRegistry: FieldDefinition[];
|
|
288
|
+
className?: string;
|
|
289
|
+
}
|
|
290
|
+
declare function RuleRow({ rule, onChange, onRemove, fieldRegistry, className, }: RuleRowProps): react_jsx_runtime.JSX.Element;
|
|
291
|
+
|
|
292
|
+
/**
|
|
293
|
+
* TextValueInput Component
|
|
294
|
+
*
|
|
295
|
+
* Text input for string values.
|
|
296
|
+
*
|
|
297
|
+
* Design Goal:
|
|
298
|
+
* Simple text entry for string comparisons (contains, equals, etc.).
|
|
299
|
+
*
|
|
300
|
+
* Visual Hierarchy Rationale:
|
|
301
|
+
* - Standard text input styling
|
|
302
|
+
* - Placeholder text provides context
|
|
303
|
+
* - Error state clearly indicated with red border
|
|
304
|
+
*/
|
|
305
|
+
interface TextValueInputProps {
|
|
306
|
+
value: string;
|
|
307
|
+
onChange: (value: string) => void;
|
|
308
|
+
placeholder?: string;
|
|
309
|
+
error?: string;
|
|
310
|
+
className?: string;
|
|
311
|
+
}
|
|
312
|
+
declare function TextValueInput({ value, onChange, placeholder, error, className, }: TextValueInputProps): react_jsx_runtime.JSX.Element;
|
|
313
|
+
|
|
314
|
+
/**
|
|
315
|
+
* NumberValueInput Component
|
|
316
|
+
*
|
|
317
|
+
* Numeric input for number comparisons.
|
|
318
|
+
*
|
|
319
|
+
* Design Goal:
|
|
320
|
+
* Precise number entry with validation for numeric fields.
|
|
321
|
+
*
|
|
322
|
+
* Visual Hierarchy Rationale:
|
|
323
|
+
* - Standard number input with browser controls
|
|
324
|
+
* - Constraints (min/max) applied if provided
|
|
325
|
+
* - Error state clearly indicated
|
|
326
|
+
*
|
|
327
|
+
* Interaction Notes:
|
|
328
|
+
* - Arrow keys increment/decrement
|
|
329
|
+
* - Scroll wheel adjusts value (browser default)
|
|
330
|
+
* - Respects min/max constraints
|
|
331
|
+
*/
|
|
332
|
+
interface NumberValueInputProps {
|
|
333
|
+
value: number | null;
|
|
334
|
+
onChange: (value: number | null) => void;
|
|
335
|
+
min?: number;
|
|
336
|
+
max?: number;
|
|
337
|
+
placeholder?: string;
|
|
338
|
+
error?: string;
|
|
339
|
+
className?: string;
|
|
340
|
+
}
|
|
341
|
+
declare function NumberValueInput({ value, onChange, min, max, placeholder, error, className, }: NumberValueInputProps): react_jsx_runtime.JSX.Element;
|
|
342
|
+
|
|
343
|
+
/**
|
|
344
|
+
* DateValueInput Component
|
|
345
|
+
*
|
|
346
|
+
* Date input for date comparisons.
|
|
347
|
+
*
|
|
348
|
+
* Design Goal:
|
|
349
|
+
* Intuitive date selection with browser-native date picker.
|
|
350
|
+
*
|
|
351
|
+
* Visual Hierarchy Rationale:
|
|
352
|
+
* - Native date input for familiar UX
|
|
353
|
+
* - Calendar picker on click (browser default)
|
|
354
|
+
* - ISO date format for consistency
|
|
355
|
+
*
|
|
356
|
+
* Interaction Notes:
|
|
357
|
+
* - Click to open calendar picker
|
|
358
|
+
* - Keyboard entry also supported (YYYY-MM-DD)
|
|
359
|
+
* - Respects min/max constraints
|
|
360
|
+
*
|
|
361
|
+
* Accessibility Considerations:
|
|
362
|
+
* - Native date input is screen reader friendly
|
|
363
|
+
* - Keyboard navigation supported
|
|
364
|
+
*/
|
|
365
|
+
interface DateValueInputProps {
|
|
366
|
+
value: string | null;
|
|
367
|
+
onChange: (value: string | null) => void;
|
|
368
|
+
min?: string;
|
|
369
|
+
max?: string;
|
|
370
|
+
placeholder?: string;
|
|
371
|
+
error?: string;
|
|
372
|
+
className?: string;
|
|
373
|
+
}
|
|
374
|
+
declare function DateValueInput({ value, onChange, min, max, placeholder, error, className, }: DateValueInputProps): react_jsx_runtime.JSX.Element;
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* BooleanValueInput Component
|
|
378
|
+
*
|
|
379
|
+
* Checkbox input for boolean values.
|
|
380
|
+
*
|
|
381
|
+
* Design Goal:
|
|
382
|
+
* Simple true/false toggle for boolean fields.
|
|
383
|
+
*
|
|
384
|
+
* Visual Hierarchy Rationale:
|
|
385
|
+
* - Checkbox with clear label
|
|
386
|
+
* - Aligned with other value inputs
|
|
387
|
+
* - Checked state visually distinct
|
|
388
|
+
*
|
|
389
|
+
* Interaction Notes:
|
|
390
|
+
* - Click checkbox or label to toggle
|
|
391
|
+
* - Space bar toggles when focused
|
|
392
|
+
*
|
|
393
|
+
* Accessibility Considerations:
|
|
394
|
+
* - Proper label association
|
|
395
|
+
* - Keyboard accessible
|
|
396
|
+
* - Focus visible
|
|
397
|
+
*/
|
|
398
|
+
interface BooleanValueInputProps {
|
|
399
|
+
value: boolean;
|
|
400
|
+
onChange: (value: boolean) => void;
|
|
401
|
+
label?: string;
|
|
402
|
+
error?: string;
|
|
403
|
+
className?: string;
|
|
404
|
+
}
|
|
405
|
+
declare function BooleanValueInput({ value, onChange, label, error, className, }: BooleanValueInputProps): react_jsx_runtime.JSX.Element;
|
|
406
|
+
|
|
407
|
+
/**
|
|
408
|
+
* ChoiceValueInput Component
|
|
409
|
+
*
|
|
410
|
+
* Single-select dropdown for choice fields.
|
|
411
|
+
*
|
|
412
|
+
* Design Goal:
|
|
413
|
+
* Select a single value from predefined choices (e.g., firm stage, recipe cuisine).
|
|
414
|
+
*
|
|
415
|
+
* Visual Hierarchy Rationale:
|
|
416
|
+
* - Standard select dropdown
|
|
417
|
+
* - Choices provided by field definition
|
|
418
|
+
* - Clear placeholder when nothing selected
|
|
419
|
+
*
|
|
420
|
+
* Interaction Notes:
|
|
421
|
+
* - Click to open dropdown
|
|
422
|
+
* - Keyboard navigation supported
|
|
423
|
+
* - Selected value shown in dropdown
|
|
424
|
+
*
|
|
425
|
+
* Accessibility Considerations:
|
|
426
|
+
* - Proper label association
|
|
427
|
+
* - Keyboard navigation (arrow keys)
|
|
428
|
+
* - Focus visible
|
|
429
|
+
*/
|
|
430
|
+
interface ChoiceValueInputProps {
|
|
431
|
+
value: string;
|
|
432
|
+
onChange: (value: string) => void;
|
|
433
|
+
choices: any[];
|
|
434
|
+
placeholder?: string;
|
|
435
|
+
error?: string;
|
|
436
|
+
className?: string;
|
|
437
|
+
}
|
|
438
|
+
declare function ChoiceValueInput({ value, onChange, choices, placeholder, error, className, }: ChoiceValueInputProps): react_jsx_runtime.JSX.Element;
|
|
439
|
+
|
|
440
|
+
/**
|
|
441
|
+
* MultiChoiceValueInput Component
|
|
442
|
+
*
|
|
443
|
+
* Multi-select for choosing multiple values from choices.
|
|
444
|
+
*
|
|
445
|
+
* Design Goal:
|
|
446
|
+
* Select multiple values for 'in', 'has_any', 'has_all' operators.
|
|
447
|
+
* For example: "Firm stage is one of [Series A, Series B, Series C]".
|
|
448
|
+
*
|
|
449
|
+
* Visual Hierarchy Rationale:
|
|
450
|
+
* - Tag-based interface shows selected values as pills
|
|
451
|
+
* - Each tag has an X button to remove
|
|
452
|
+
* - Dropdown allows adding more selections
|
|
453
|
+
* - Compact layout for multiple values
|
|
454
|
+
*
|
|
455
|
+
* Interaction Notes:
|
|
456
|
+
* - Select from dropdown to add value
|
|
457
|
+
* - Click X on tag to remove value
|
|
458
|
+
* - Can select multiple values
|
|
459
|
+
* - Already-selected values hidden from dropdown
|
|
460
|
+
*
|
|
461
|
+
* Accessibility Considerations:
|
|
462
|
+
* - Keyboard navigation for dropdown
|
|
463
|
+
* - Focus management for tag removal
|
|
464
|
+
* - Screen reader announces selected items
|
|
465
|
+
*/
|
|
466
|
+
interface MultiChoiceValueInputProps {
|
|
467
|
+
value: string[];
|
|
468
|
+
onChange: (value: string[]) => void;
|
|
469
|
+
choices: any[];
|
|
470
|
+
placeholder?: string;
|
|
471
|
+
error?: string;
|
|
472
|
+
className?: string;
|
|
473
|
+
}
|
|
474
|
+
declare function MultiChoiceValueInput({ value, onChange, choices, placeholder, error, className, }: MultiChoiceValueInputProps): react_jsx_runtime.JSX.Element;
|
|
475
|
+
|
|
476
|
+
/**
|
|
477
|
+
* FilterRuleEditor Constants
|
|
478
|
+
*
|
|
479
|
+
* Operator labels and field type mappings
|
|
480
|
+
*/
|
|
481
|
+
|
|
482
|
+
declare const OPERATOR_LABELS: Record<Operator, string>;
|
|
483
|
+
/**
|
|
484
|
+
* Operators that don't require a value input
|
|
485
|
+
*/
|
|
486
|
+
declare const NULL_VALUE_OPERATORS: Operator[];
|
|
487
|
+
/**
|
|
488
|
+
* Operators that require array/multi-value input
|
|
489
|
+
*/
|
|
490
|
+
declare const MULTI_VALUE_OPERATORS: Operator[];
|
|
491
|
+
|
|
492
|
+
interface FunnelStageBuilderProps {
|
|
493
|
+
/** The funnel being edited */
|
|
494
|
+
funnel: Funnel;
|
|
495
|
+
/** Callback when funnel is updated */
|
|
496
|
+
onUpdate: (funnel: Funnel) => void;
|
|
497
|
+
/** Available fields for filter rules */
|
|
498
|
+
fieldRegistry: FieldDefinition[];
|
|
499
|
+
/** Optional CSS class */
|
|
500
|
+
className?: string;
|
|
501
|
+
}
|
|
502
|
+
/**
|
|
503
|
+
* Main FunnelStageBuilder component
|
|
504
|
+
*/
|
|
505
|
+
declare function FunnelStageBuilder({ funnel, onUpdate, fieldRegistry, className, }: FunnelStageBuilderProps): react_jsx_runtime.JSX.Element;
|
|
506
|
+
|
|
507
|
+
interface StageCardProps {
|
|
508
|
+
/** The stage to display */
|
|
509
|
+
stage: FunnelStage;
|
|
510
|
+
/** Whether stage is expanded */
|
|
511
|
+
expanded: boolean;
|
|
512
|
+
/** Toggle expanded state */
|
|
513
|
+
onToggleExpanded: () => void;
|
|
514
|
+
/** Update stage */
|
|
515
|
+
onUpdate: (stage: FunnelStage) => void;
|
|
516
|
+
/** Remove stage */
|
|
517
|
+
onRemove: () => void;
|
|
518
|
+
/** Available fields */
|
|
519
|
+
fieldRegistry: FieldDefinition[];
|
|
520
|
+
/** Validation error */
|
|
521
|
+
error?: string;
|
|
522
|
+
/** Show warnings */
|
|
523
|
+
showWarnings?: boolean;
|
|
524
|
+
}
|
|
525
|
+
/**
|
|
526
|
+
* StageCard component
|
|
527
|
+
*/
|
|
528
|
+
declare function StageCard({ stage, expanded, onToggleExpanded, onUpdate, onRemove, fieldRegistry, error, showWarnings, }: StageCardProps): react_jsx_runtime.JSX.Element;
|
|
529
|
+
|
|
530
|
+
interface StageFormProps {
|
|
531
|
+
/** The stage being edited */
|
|
532
|
+
stage: FunnelStage;
|
|
533
|
+
/** Update stage */
|
|
534
|
+
onUpdate: (stage: FunnelStage) => void;
|
|
535
|
+
/** Available fields */
|
|
536
|
+
fieldRegistry: FieldDefinition[];
|
|
537
|
+
}
|
|
538
|
+
/**
|
|
539
|
+
* StageForm component
|
|
540
|
+
*/
|
|
541
|
+
declare function StageForm({ stage, onUpdate, fieldRegistry, }: StageFormProps): react_jsx_runtime.JSX.Element;
|
|
542
|
+
|
|
543
|
+
interface StageActionsProps {
|
|
544
|
+
/** The stage being configured */
|
|
545
|
+
stage: FunnelStage;
|
|
546
|
+
/** Match action change handler */
|
|
547
|
+
onMatchActionChange: (action: MatchAction) => void;
|
|
548
|
+
/** No match action change handler */
|
|
549
|
+
onNoMatchActionChange: (action: NoMatchAction) => void;
|
|
550
|
+
}
|
|
551
|
+
/**
|
|
552
|
+
* StageActions component
|
|
553
|
+
*/
|
|
554
|
+
declare function StageActions({ stage, onMatchActionChange, onNoMatchActionChange, }: StageActionsProps): react_jsx_runtime.JSX.Element;
|
|
555
|
+
|
|
556
|
+
/**
|
|
557
|
+
* TagInput - Multi-tag input component
|
|
558
|
+
*
|
|
559
|
+
* Features:
|
|
560
|
+
* - Add tags with Enter or comma
|
|
561
|
+
* - Remove tags with click
|
|
562
|
+
* - Visual tag chips
|
|
563
|
+
* - Duplicate prevention
|
|
564
|
+
*/
|
|
565
|
+
interface TagInputProps {
|
|
566
|
+
/** Current tags */
|
|
567
|
+
tags: string[];
|
|
568
|
+
/** Change handler */
|
|
569
|
+
onChange: (tags: string[]) => void;
|
|
570
|
+
/** Input placeholder */
|
|
571
|
+
placeholder?: string;
|
|
572
|
+
/** Optional CSS class */
|
|
573
|
+
className?: string;
|
|
574
|
+
}
|
|
575
|
+
/**
|
|
576
|
+
* TagInput component
|
|
577
|
+
*/
|
|
578
|
+
declare function TagInput({ tags, onChange, placeholder, className, }: TagInputProps): react_jsx_runtime.JSX.Element;
|
|
579
|
+
|
|
580
|
+
/**
|
|
581
|
+
* AddStageButton - Button to add new stages
|
|
582
|
+
*
|
|
583
|
+
* Features:
|
|
584
|
+
* - Different styles for top/bottom/inline positions
|
|
585
|
+
* - Clear visual affordance
|
|
586
|
+
*/
|
|
587
|
+
interface AddStageButtonProps {
|
|
588
|
+
/** Click handler */
|
|
589
|
+
onClick: () => void;
|
|
590
|
+
/** Position context */
|
|
591
|
+
position: 'top' | 'bottom' | 'inline';
|
|
592
|
+
/** Optional CSS class */
|
|
593
|
+
className?: string;
|
|
594
|
+
}
|
|
595
|
+
/**
|
|
596
|
+
* AddStageButton component
|
|
597
|
+
*/
|
|
598
|
+
declare function AddStageButton({ onClick, position, className, }: AddStageButtonProps): react_jsx_runtime.JSX.Element;
|
|
599
|
+
|
|
600
|
+
interface FunnelRunHistoryProps {
|
|
601
|
+
funnelId: string;
|
|
602
|
+
apiClient: FunnelApiClient;
|
|
603
|
+
onViewResults?: (run: FunnelRun) => void;
|
|
604
|
+
className?: string;
|
|
605
|
+
}
|
|
606
|
+
declare function FunnelRunHistory({ funnelId, apiClient, onViewResults, className, }: FunnelRunHistoryProps): react_jsx_runtime.JSX.Element;
|
|
607
|
+
|
|
608
|
+
interface RunStatusBadgeProps {
|
|
609
|
+
status: FunnelRunStatus;
|
|
610
|
+
className?: string;
|
|
611
|
+
}
|
|
612
|
+
declare function RunStatusBadge({ status, className }: RunStatusBadgeProps): react_jsx_runtime.JSX.Element;
|
|
613
|
+
|
|
614
|
+
/**
|
|
615
|
+
* FunnelRunHistory Types
|
|
616
|
+
*
|
|
617
|
+
* Shared types for the run history component suite
|
|
618
|
+
*/
|
|
619
|
+
|
|
620
|
+
/**
|
|
621
|
+
* Filter state for run history
|
|
622
|
+
*/
|
|
623
|
+
interface RunFilters$1 {
|
|
624
|
+
status?: FunnelRunStatus | 'all';
|
|
625
|
+
trigger_type?: TriggerType | 'all';
|
|
626
|
+
date_range?: 'all' | 'today' | 'week' | 'month' | 'custom';
|
|
627
|
+
start_date?: Date;
|
|
628
|
+
end_date?: Date;
|
|
629
|
+
}
|
|
630
|
+
/**
|
|
631
|
+
* Sort configuration for run history
|
|
632
|
+
*/
|
|
633
|
+
interface RunSort {
|
|
634
|
+
field: 'started_at' | 'status' | 'match_rate' | 'duration_ms';
|
|
635
|
+
direction: 'asc' | 'desc';
|
|
636
|
+
}
|
|
637
|
+
/**
|
|
638
|
+
* Pagination state
|
|
639
|
+
*/
|
|
640
|
+
interface Pagination {
|
|
641
|
+
page: number;
|
|
642
|
+
page_size: number;
|
|
643
|
+
total: number;
|
|
644
|
+
}
|
|
645
|
+
/**
|
|
646
|
+
* Run action types
|
|
647
|
+
*/
|
|
648
|
+
type RunAction = 'view_details' | 'view_results' | 're_run' | 'cancel';
|
|
649
|
+
|
|
650
|
+
interface RunFiltersProps {
|
|
651
|
+
filters: RunFilters$1;
|
|
652
|
+
onFiltersChange: (filters: RunFilters$1) => void;
|
|
653
|
+
className?: string;
|
|
654
|
+
}
|
|
655
|
+
declare function RunFilters({ filters, onFiltersChange, className, }: RunFiltersProps): react_jsx_runtime.JSX.Element;
|
|
656
|
+
|
|
657
|
+
interface RunRowProps {
|
|
658
|
+
run: FunnelRun;
|
|
659
|
+
onViewDetails: (run: FunnelRun) => void;
|
|
660
|
+
onViewResults: (run: FunnelRun) => void;
|
|
661
|
+
onReRun: (run: FunnelRun) => void;
|
|
662
|
+
onCancel?: (run: FunnelRun) => void;
|
|
663
|
+
}
|
|
664
|
+
declare function RunRow({ run, onViewDetails, onViewResults, onReRun, onCancel, }: RunRowProps): react_jsx_runtime.JSX.Element;
|
|
665
|
+
|
|
666
|
+
interface RunActionsProps {
|
|
667
|
+
run: FunnelRun;
|
|
668
|
+
onViewDetails: (run: FunnelRun) => void;
|
|
669
|
+
onViewResults: (run: FunnelRun) => void;
|
|
670
|
+
onReRun: (run: FunnelRun) => void;
|
|
671
|
+
onCancel?: (run: FunnelRun) => void;
|
|
672
|
+
className?: string;
|
|
673
|
+
}
|
|
674
|
+
declare function RunActions({ run, onViewDetails, onViewResults, onReRun, onCancel, className, }: RunActionsProps): react_jsx_runtime.JSX.Element;
|
|
675
|
+
|
|
676
|
+
interface RunDetailsModalProps {
|
|
677
|
+
run: FunnelRun | null;
|
|
678
|
+
onClose: () => void;
|
|
679
|
+
onViewResults?: (run: FunnelRun) => void;
|
|
680
|
+
onReRun?: (run: FunnelRun) => void;
|
|
681
|
+
}
|
|
682
|
+
declare function RunDetailsModal({ run, onClose, onViewResults, onReRun, }: RunDetailsModalProps): react_jsx_runtime.JSX.Element | null;
|
|
683
|
+
|
|
684
|
+
interface StageBreakdownListProps {
|
|
685
|
+
stages: StageStats[];
|
|
686
|
+
className?: string;
|
|
687
|
+
}
|
|
688
|
+
declare function StageBreakdownList({ stages, className, }: StageBreakdownListProps): react_jsx_runtime.JSX.Element;
|
|
689
|
+
|
|
690
|
+
/**
|
|
691
|
+
* FunnelRunHistory Utilities
|
|
692
|
+
*
|
|
693
|
+
* Helper functions for formatting and calculations
|
|
694
|
+
*/
|
|
695
|
+
/**
|
|
696
|
+
* Format duration in milliseconds to human-readable string
|
|
697
|
+
*
|
|
698
|
+
* Examples:
|
|
699
|
+
* - 1234 → "1.2s"
|
|
700
|
+
* - 65000 → "1m 5s"
|
|
701
|
+
* - 3661000 → "1h 1m"
|
|
702
|
+
*/
|
|
703
|
+
declare function formatDuration(ms?: number): string;
|
|
704
|
+
/**
|
|
705
|
+
* Format relative time
|
|
706
|
+
*
|
|
707
|
+
* Examples:
|
|
708
|
+
* - 5 minutes ago → "5m ago"
|
|
709
|
+
* - 2 hours ago → "2h ago"
|
|
710
|
+
* - Yesterday → "1d ago"
|
|
711
|
+
*/
|
|
712
|
+
declare function formatRelativeTime(date: Date | string): string;
|
|
713
|
+
/**
|
|
714
|
+
* Calculate match rate percentage
|
|
715
|
+
*/
|
|
716
|
+
declare function calculateMatchRate(matched: number, total: number): number;
|
|
717
|
+
/**
|
|
718
|
+
* Format number with commas
|
|
719
|
+
*/
|
|
720
|
+
declare function formatNumber(num: number): string;
|
|
721
|
+
/**
|
|
722
|
+
* Format full timestamp for tooltips
|
|
723
|
+
*/
|
|
724
|
+
declare function formatFullTimestamp(date: Date | string): string;
|
|
725
|
+
|
|
726
|
+
export { AddStageButton, type AddStageButtonProps, BooleanValueInput, ChoiceValueInput, DateValueInput, EntityCard, FieldSelector, FilterRuleEditor, type FilterRuleEditorProps, FlowLegend, FunnelCard, type FunnelCardProps, FunnelPreview, type FunnelPreviewProps, FunnelRunHistory, FunnelStageBuilder, type FunnelStageBuilderProps, FunnelStats, FunnelVisualFlow, type FunnelVisualFlowProps, LoadingPreview, LogicToggle, MULTI_VALUE_OPERATORS, MatchBar, MultiChoiceValueInput, NULL_VALUE_OPERATORS, NumberValueInput, OPERATOR_LABELS, OperatorSelector, type Pagination, type PreviewResult, PreviewStats, RuleRow, type RunAction, RunActions, RunDetailsModal, RunFilters, type RunFilters$1 as RunFiltersType, RunRow, type RunSort, RunStatusBadge, StageActions, type StageActionsProps, StageBreakdown, StageBreakdownList, StageCard, type StageCardProps, StageForm, type StageFormProps, StageIndicator, StageNode, type StageNodeData, type StagePreviewStats, StatusBadge, TagInput, type TagInputProps, TextValueInput, calculateMatchRate, formatDuration, formatFullTimestamp, formatNumber, formatRelativeTime, getCircledNumber };
|