@picked/svelte 0.0.1-dev.1772412203098 → 0.0.1-dev.1772493269328

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.
@@ -1,2 +1,16 @@
1
- export type { FormField } from './create-form.svelte';
2
- export { getForm } from './get-form';
1
+ import { ValidationError } from '@picked/client';
2
+ interface GetFormOptions {
3
+ id: string;
4
+ title: string;
5
+ onSuccess?: () => void | Promise<void>;
6
+ onError?: (errors: ValidationError[]) => void | Promise<void>;
7
+ }
8
+ type SubmitEventWithCurrentTarget = SubmitEvent & {
9
+ currentTarget: EventTarget & HTMLFormElement;
10
+ };
11
+ export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
12
+ form: {
13
+ onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
14
+ };
15
+ };
16
+ export {};
@@ -1 +1 @@
1
- import{getForm as e}from"./get-form.js";export{e as getForm};
1
+ import{createEvent as _,createEffect as m,attach as v,sample as y,split as k}from"effector";import{getPicked as D,getExperience as F}from"../hooks/client.js";import"@picked/client";import{getStep as B}from"../hooks/step.js";import"svelte";import"svelte/store";import"@picked/analytics";function z({id:f,title:l,onError:b,onSuccess:g}){const a=D(),x=B(),i=F(),{currentStepStore:u}=i,d=_(),h=m(r=>a.responses.commit(r)),E=v({source:{step:u},effect:m(({step:r})=>{a.eventBus({type:"form_submit_success",form:{id:f,title:l},experience:i,step:r??void 0}),g?.()})}),S=v({source:{step:u},mapParams:(r,o)=>({step:o.step,errors:r.errors}),effect:m(({step:r,errors:o})=>{a.eventBus({type:"form_submit_error",form:{id:f,title:l},exception:{reason:o},experience:i,step:r??void 0}),o.forEach(c=>{a.eventBus({type:"field_validation_error",exception:{reason:[c]},experience:i,step:r??void 0})}),b?.(o)})});return y({clock:d,source:{step:u},fn:({step:r})=>({formId:f,title:l,step:r}),target:m(({formId:r,title:o,step:c})=>{a.eventBus({type:"form_submit",form:{id:r,title:o},experience:i,step:c??void 0})})}),y({clock:d,source:{fields:a.fields.listStore,stepFields:x.fields,step:u},fn:({stepFields:r},o)=>{o.preventDefault();const c=new FormData(o.currentTarget),A=Array.from(c.entries()),p={data:{},push(t){const s=t.questionId,e=this.data[s];e?Array.isArray(e)&&Array.isArray(t.value)?Array.isArray(e)&&Array.isArray(t.value)&&(typeof e[0]=="string"?this.data[s]=[...e,...t.value].map(String):typeof e[0]=="number"?this.data[s]=[...e,...t.value].map(Number):typeof e[0]=="boolean"?this.data[s]=[...e,...t.value].map(n=>!!n):this.data[s]=t.value):this.data[s]=t.value:this.data[s]=t.value}};return r.forEach(t=>{let s=A.filter(([e])=>e===t.id);s.length===0&&(s=[[t.id,""]]),s.forEach(([,e])=>{const n=t.id;if(e===""){p.push({questionId:n,value:null});return}switch(t.type){case"text":p.push({questionId:n,value:t.multiple?[String(e)]:String(e)});break;case"number":p.push({questionId:n,value:t.multiple?[Number(e)]:Number(e)});break;case"boolean":p.push({questionId:n,value:t.multiple?[e==="true"]:e==="true"});break}})}),p.data},target:h}),k({source:h.doneData,match:{hasErrors:({errors:r})=>r.length>0},cases:{hasErrors:S,__:E}}),{form:{onsubmit:d}}}export{z as getForm};
@@ -4,9 +4,4 @@ export interface GetFieldResponse {
4
4
  value: Store<FieldValue>;
5
5
  field: Store<Field | null>;
6
6
  }
7
- /**
8
- * @deprecated Field options and status are now available directly on the Field object
9
- * from the step fields store. Use `field.options`, `field.status`, and `field.error`
10
- * instead of accessing them through this hook.
11
- */
12
7
  export declare function getField(id: string): GetFieldResponse;
@@ -1,13 +1,13 @@
1
1
  import { Store } from 'effector';
2
- import { ExperienceStep } from '@picked/client';
3
- import { FormInstance, FormField } from '../form/create-form.svelte';
4
- export interface StepContext extends FormInstance {
2
+ import { ExperienceStep, Field, Response } from '@picked/client';
3
+ type FieldWithValue = Field & {
4
+ value: Response | undefined;
5
+ };
6
+ export interface StepContext {
5
7
  step: Store<ExperienceStep>;
6
- /** Directly accessible fields with current response values — usable without a form */
7
- fields: Store<FormField[]>;
8
- isActive: Store<boolean>;
9
- /** @deprecated Use `isActive` instead */
8
+ fields: Store<FieldWithValue[]>;
10
9
  isActiveStep: Store<boolean>;
11
10
  }
12
- export declare function setStepContext(stepId: string): StepContext;
13
11
  export declare function getStep(): StepContext;
12
+ export declare function setStepContext(stepId: string): StepContext;
13
+ export {};
@@ -1 +1 @@
1
- import{getContext as h,onMount as A,setContext as E}from"svelte";import{createEffect as g,createEvent as O,sample as p}from"effector";import{STEP_CONTEXT_KEY as x}from"../context.js";import{createForm as k}from"../form/create-form.svelte";import{getStepRouter as C}from"../router/context.js";import{getPicked as I,getExperience as _}from"./client.js";function b(c){const o=_().treeStore.map(s=>{const d=s.steps.find(f=>f.id===c);if(!d)throw new Error(`Step with id "${c}" not found in the experience tree.`);return d}),l=o.map(s=>s.label),u=o.map(s=>s.fieldIds),r=k(c,l,u);return{stepStore:o,form:r}}function K(c){const{activeStep:a}=C(),o=a.map(e=>e?.id===c),{stepStore:l,form:u}=b(c),r=I(),s=g(e=>{r.fields.resolveAll(e)});function d(e,n){return e.dependsOn?.length?e.dependsOn.every(i=>{const t=n[i];return t!=null&&t!==""&&!(Array.isArray(t)&&t.length===0)}):!0}const f=O();p({clock:f,source:{step:l,fields:r.fields.listStore},fn:({step:e,fields:n})=>e.fieldIds.filter(i=>!n.find(t=>t.id===i)?.dependsOn?.length),target:s});const m=g(({step:e,fields:n,responses:i})=>{for(const t of e.fieldIds){const S=n.find(v=>v.id===t);S?.dependsOn?.length&&(d(S,i)?r.fields.resolveAll([t],{force:!0,context:{responses:i}}):r.fields.setWaiting(t))}});return p({clock:f,source:{step:l,fields:r.fields.listStore,responses:r.responses.getAllStore},target:m}),A(()=>{f()}),p({clock:o,source:{step:l,fields:r.fields.listStore},filter:(e,n)=>n,fn:({step:e,fields:n})=>e.fieldIds.filter(i=>!n.find(t=>t.id===i)?.dependsOn?.length),target:s}),p({clock:o,source:{step:l,fields:r.fields.listStore,responses:r.responses.getAllStore},filter:(e,n)=>n,target:m}),E(x,{step:l,isActive:o,isActiveStep:o,...u})}function M(){return h(x)}export{M as getStep,K as setStepContext};
1
+ import{getContext as v,setContext as x}from"svelte";import{createStore as E,combine as a,attach as h,createEffect as w,sample as c}from"effector";import{getStepFields as A}from"@picked/client";import{STEP_CONTEXT_KEY as l}from"../context.js";import{getStepRouter as C}from"../router/context.js";import{getExperience as F,getPicked as T}from"./client.js";function K(){return v(l)}function N(i){const u=F(),o=T(),{activeStep:S}=C(),s=S.map(e=>e?.id===i),p=u.treeStore.map(e=>{const t=e.steps.find(r=>r.id===i);if(!t)throw new Error(`Step with id "${i}" not found in the experience tree.`);return t}),f=E([]),d=a({fields:f,responses:o.responses.listStore},({fields:e,responses:t})=>e.map(r=>{const m=t.find(g=>g.fieldId===r.id)?.value;return{...r,value:m}})),n=h({source:a({step:p,fields:o.fields.listStore}),effect:w(async({step:{fieldIds:e},fields:t})=>await A(o,t.filter(r=>e.includes(r.id))))});return c({source:{isActiveStep:s},filter:({isActiveStep:e})=>e,target:n}),c({clock:o.responses.listStore,source:{isActiveStep:s},filter:({isActiveStep:e})=>e,target:n}),c({source:n.doneData,target:f}),x(l,{step:p,fields:d,isActiveStep:s})}export{K as getStep,N as setStepContext};
@@ -20,7 +20,7 @@
20
20
  <td>{$currentNode?.id || ''}</td>
21
21
  <td>{$currentNode?.type || ''}</td>
22
22
  <td>{$currentStep?.id || ''}</td>
23
- <td>{$currentStep?.label || ''}</td>
23
+ <td>{$currentStep?.title || ''}</td>
24
24
  <td>{totalNextStepNodes}</td>
25
25
  <td>{$stepsToOrigin[0]} - {$stepsToOrigin[1]}</td>
26
26
  <td>{$stepsToLeaf[0]} - {$stepsToLeaf[1]}</td>
@@ -9,7 +9,7 @@
9
9
  let zoom = 1
10
10
  let selectedNode = null
11
11
  let highlightedPath: string[][] = []
12
- let error: string | null = null
12
+ let error = null
13
13
  const loading = false
14
14
 
15
15
  let treeRenderingDone = false
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import type { ResponseListItem, PrimitiveFieldValue, Field, FieldValue } from '@picked/client'
2
+ import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
3
3
  import { getPicked } from '../../../../hooks'
4
4
  import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
5
5
 
@@ -11,10 +11,9 @@
11
11
  let isEditing = false
12
12
  let editValue = ''
13
13
  let editError = ''
14
- let selectedOptions: Set<FieldValue> = new Set()
14
+ let selectedOptions: Set<PrimitiveFieldValue> = new Set()
15
15
 
16
- $: hasOptions = Array.isArray(field?.options) && field.options.length > 0
17
- $: staticOptions = Array.isArray(field?.options) ? field.options : null
16
+ $: hasOptions = field?.options && field.options.length > 0
18
17
  $: currentValue = response?.value ?? null
19
18
 
20
19
  function formatValue(value: unknown): string {
@@ -53,7 +52,7 @@
53
52
  selectedOptions = new Set()
54
53
  }
55
54
 
56
- function toggleOption(optionValue: FieldValue) {
55
+ function toggleOption(optionValue: PrimitiveFieldValue) {
57
56
  if (field?.multiple) {
58
57
  if (selectedOptions.has(optionValue)) {
59
58
  selectedOptions.delete(optionValue)
@@ -66,7 +65,7 @@
66
65
  }
67
66
  }
68
67
 
69
- function parseValue(input: string): FieldValue {
68
+ function parseValue(input: string): unknown {
70
69
  input = input.trim()
71
70
 
72
71
  if (input === '' || input === '-') {
@@ -100,14 +99,14 @@
100
99
 
101
100
  async function saveEdit() {
102
101
  try {
103
- let newValue: FieldValue
102
+ let newValue: unknown
104
103
 
105
104
  if (hasOptions) {
106
105
  const values = Array.from(selectedOptions)
107
106
  if (field?.multiple) {
108
107
  newValue = values
109
108
  } else {
110
- newValue = values.at(0) ?? null
109
+ newValue = values[0] ?? null
111
110
  }
112
111
  } else {
113
112
  newValue = parseValue(editValue)
@@ -143,9 +142,9 @@
143
142
  <td>
144
143
  {#if isEditing}
145
144
  <Stack direction="vertical" gap="small">
146
- {#if hasOptions && staticOptions}
145
+ {#if hasOptions && field?.options}
147
146
  <Stack direction="vertical" gap="small">
148
- {#each staticOptions as option (option.id)}
147
+ {#each field.options as option (option.id)}
149
148
  <label class="option-label">
150
149
  {#if field.multiple}
151
150
  <input
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@picked/svelte",
3
- "version": "0.0.1-dev.1772412203098",
3
+ "version": "0.0.1-dev.1772493269328",
4
4
  "dependencies": {
5
5
  "d3": "^7.9.0"
6
6
  },
@@ -86,7 +86,7 @@
86
86
  },
87
87
  "module": "./dist/index.js",
88
88
  "peerDependencies": {
89
- "@picked/client": "0.0.1-dev.1772412203098",
89
+ "@picked/client": "0.0.1-dev.1772493269328",
90
90
  "effector": "^23.3.0",
91
91
  "svelte": "^5.34.3"
92
92
  },
@@ -1,13 +0,0 @@
1
- import { FieldBase, FieldValue } from '@picked/client';
2
- type FieldLike = Pick<FieldBase, 'id' | 'type' | 'multiple'>;
3
- /**
4
- * Parses a FormData snapshot into a typed record of field responses.
5
- *
6
- * - Fields absent from FormData are mapped to `null`.
7
- * - Empty string values are mapped to `null`.
8
- * - Repeated entries for the same field (e.g. multi-select checkboxes) are
9
- * merged into a typed array — matching the field's declared element type.
10
- * - Values are coerced to the field's declared type (text → string, number → number, boolean → boolean).
11
- */
12
- export declare function buildResponsesFromFormData(fields: FieldLike[], formData: FormData): Record<string, FieldValue>;
13
- export {};
@@ -1 +0,0 @@
1
- function i(e,o,n){const r=e[o];if(r===void 0){e[o]=n;return}if(Array.isArray(r)&&Array.isArray(n)&&n.length>0){typeof r[0]=="string"?e[o]=[...r,...n].map(String):typeof r[0]=="number"?e[o]=[...r,...n].map(Number):typeof r[0]=="boolean"?e[o]=[...r,...n].map(t=>!!t):e[o]=n;return}e[o]=n}function b(e,o){const n=Array.from(o.entries()),r={};return e.forEach(t=>{let m=n.filter(([s])=>s===t.id);m.length===0&&(m=[[t.id,""]]),m.forEach(([,s])=>{if(s===""){i(r,t.id,null);return}switch(t.type){case"text":case"object":i(r,t.id,t.multiple?[String(s)]:String(s));break;case"number":i(r,t.id,t.multiple?[Number(s)]:Number(s));break;case"boolean":i(r,t.id,t.multiple?[s==="true"]:s==="true");break}})}),r}export{b as buildResponsesFromFormData};
@@ -1,17 +0,0 @@
1
- import { FieldValue, FieldWithStatus, Picked } from '@picked/client';
2
- import { Store, StoreWritable } from 'effector';
3
- /**
4
- * Creates a reactive store of evaluated fields for a given set of field IDs.
5
- *
6
- * Fields are re-evaluated whenever:
7
- * - The available field IDs change (e.g. a step is entered)
8
- * - Any response is committed (options may depend on prior answers)
9
- * - The global field registry changes (fields registered after init)
10
- * - Staged values change (field visibility conditions may reference responses.*)
11
- *
12
- * Evaluation runs `getStepFields` with effective responses (committed + staged) as context,
13
- * so visibility conditions see live in-session values rather than only committed responses.
14
- */
15
- export declare function createFieldEvaluator(client: Picked, fieldIds: Store<string[]>, stagedValuesStore: StoreWritable<Record<string, FieldValue>>): {
16
- fieldsStore: Store<FieldWithStatus[]>;
17
- };
@@ -1 +0,0 @@
1
- import{getStepFields as m}from"@picked/client";import{createStore as u,attach as F,createEffect as S,sample as i}from"effector";function k(e,r,s){const o=u([]),t=F({source:{allFields:e.fields.listStore,fieldIds:r,staged:s,committed:e.responses.getAllStore},effect:S(async({allFields:l,fieldIds:a,staged:c,committed:d})=>{const f=l.filter(p=>a.includes(p.id)),n={...d,...c};return await m(e,f,{responses:n})})});return i({clock:t.doneData,target:o}),t(),i({clock:[e.responses.listStore,r,e.fields.listStore,s],target:t}),{fieldsStore:o}}export{k as createFieldEvaluator};
@@ -1,41 +0,0 @@
1
- import { FieldValue, FieldWithStatus, Picked, ValidationError } from '@picked/client';
2
- import { EventCallable, Store, StoreWritable } from 'effector';
3
- export interface FieldValidation {
4
- /** Dispatch when a field value changes — runs validation if the field has been touched. */
5
- fieldChangeEvent: EventCallable<{
6
- fieldId: string;
7
- value: FieldValue;
8
- }>;
9
- /** Dispatch when a field loses focus — always runs full validation including required check. */
10
- fieldBlurEvent: EventCallable<{
11
- fieldId: string;
12
- value: FieldValue;
13
- }>;
14
- /** Which fields have been interacted with — used by formFieldsStore to show/hide errors. */
15
- touchedStore: StoreWritable<Partial<Record<string, boolean>>>;
16
- /**
17
- * Per-field validation errors — written by client-side validation and overwritten
18
- * by server errors on commit failure. Exposed as writable so the submit pipeline
19
- * can populate server errors and reset state on new submit attempts.
20
- */
21
- fieldErrorsStore: StoreWritable<Partial<Record<string, ValidationError>>>;
22
- /** Flat list of all current validation errors — derived from fieldErrorsStore. */
23
- formErrorsStore: Store<ValidationError[]>;
24
- /**
25
- * Current in-session field values — updated on every onChange/onBlur before commit.
26
- * Used as the responses context for condition evaluation so conditions react to
27
- * live input without writing to client.responses prematurely.
28
- */
29
- stagedValuesStore: StoreWritable<Record<string, FieldValue>>;
30
- }
31
- /**
32
- * Creates the client-side validation slice for a form.
33
- *
34
- * Responsibilities:
35
- * - Tracks which fields have been touched (first blur = touched)
36
- * - Validates on blur (full: includes required check) and on change (if already touched)
37
- * - Uses the same json-logic evaluator the server uses, so client and server results match
38
- * - Maintains stagedValuesStore: current in-session values used as responses context for
39
- * condition evaluation, avoiding premature writes to client.responses
40
- */
41
- export declare function createFieldValidation(client: Picked, fieldsStore: Store<FieldWithStatus[]>, stagedValuesStore: StoreWritable<Record<string, FieldValue>>): FieldValidation;
@@ -1 +0,0 @@
1
- import{evaluateRuleLogic as M}from"@picked/client";import{createEvent as h,createStore as y,sample as p,attach as q}from"effector";function F(s){return s===null||s===""||Array.isArray(s)&&s.length===0}function R(s,k,c){const f=h(),a=h(),u=y({});p({clock:a,source:u,fn:(r,{fieldId:e})=>({...r,[e]:!0}),target:u});const g=y({}),v=g.map(r=>Object.values(r).filter(e=>e!==void 0)),m=q({source:{fields:k,staged:c,committed:s.responses.getAllStore},effect:async({fields:r,staged:e,committed:n},{fieldId:t,value:i,checkRequired:E})=>{const o=r.find(d=>d.id===t);if(!o)return{fieldId:t,error:null};if(o.validation&&Object.keys(o.validation).length>0){const d={...n,...e},l=await M(s,o.validation,{responses:d,$input:i});if(typeof l=="string")return{fieldId:t,error:{fieldId:t,userMessage:l,systemMessage:l,value:i}};if(l===!1)return{fieldId:t,error:{fieldId:t,userMessage:"This field is invalid",systemMessage:"Field validation rule returned false.",value:i}}}return E&&o.required&&F(i)?{fieldId:t,error:{fieldId:t,userMessage:"This field is required",systemMessage:"Field is required.",value:i}}:{fieldId:t,error:null}}});return p({clock:f,source:u,filter:(r,{fieldId:e})=>r[e]===!0,fn:(r,{fieldId:e,value:n})=>({fieldId:e,value:n,checkRequired:!1}),target:m}),p({clock:a,fn:({fieldId:r,value:e})=>({fieldId:r,value:e,checkRequired:!0}),target:m}),c.on(f,(r,{fieldId:e,value:n})=>({...r,[e]:n})),c.on(a,(r,{fieldId:e,value:n})=>({...r,[e]:n})),g.on(m.doneData,(r,{fieldId:e,error:n})=>{if(n===null){const t={...r};return delete t[e],t}return{...r,[e]:n}}),{fieldChangeEvent:f,fieldBlurEvent:a,touchedStore:u,fieldErrorsStore:g,formErrorsStore:v,stagedValuesStore:c}}export{R as createFieldValidation};
@@ -1 +0,0 @@
1
- import"svelte/internal/client";import{createStore as C,combine as P,attach as j,sample as u}from"effector";import{getPicked as N,getExperience as R}from"../hooks/client.js";import{createFieldEvaluator as W}from"./create-field-evaluator.js";import{createFieldValidation as q}from"./create-field-validation.js";import{createSubmitPipeline as w}from"./create-submit-pipeline.svelte";function x(m){const t=m.currentTarget;if(t instanceof HTMLInputElement)return t.type==="checkbox"?t.checked:t.value;if(t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement)return t.value}function X(m,t,k){const r=N(),g=R(),{currentStepStore:F,goToNextStep:I}=g,d=C({}),{fieldsStore:a}=W(r,k,d),{fieldChangeEvent:E,fieldBlurEvent:T,touchedStore:b,fieldErrorsStore:p,formErrorsStore:A}=q(r,a,d),y=P({fields:a,responses:r.responses.listStore,staged:d,fieldErrors:p,touched:b},({fields:s,responses:o,staged:i,fieldErrors:S,touched:f})=>s.map(e=>({...e,value:i[e.id]??o.find(n=>n.fieldId===e.id)?.value,error:S[e.id],touched:f[e.id]??!1,onChange:n=>{const c=x(n);c!==void 0&&E({fieldId:e.id,value:c})},onBlur:n=>{const c=x(n);c!==void 0&&T({fieldId:e.id,value:c})}}))),D=j({source:{staged:d,committed:r.responses.getAllStore,allFields:r.fields.listStore},effect:({staged:s,committed:o,allFields:i},S)=>{const f={...o,...s};for(const e of S){const n=i.find(v=>v.id===e);if(!n)continue;(n.dependsOn??[]).every(v=>{const l=f[v];return l!=null&&l!==""&&!(Array.isArray(l)&&l.length===0)})?r.fields.resolveAll([e],{force:!0,context:{responses:f}}):r.fields.setWaiting(e)}}});u({clock:E,source:{fields:a},fn:({fields:s},{fieldId:o})=>s.filter(i=>i.dependsOn?.includes(o)).map(i=>i.id),target:D});const{submitEvent:H,isFormSubmitting:L,onSubmit:M,onSuccess:O,onError:V,submitStarted:h,serverErrorsReceived:B}=w({client:r,experienceInstance:g,formId:m,title:t,stepStore:F,fieldsStore:a,goToNextStep:I});return u({clock:h,fn:()=>({}),target:b}),u({clock:h,fn:()=>({}),target:p}),u({clock:B,fn:s=>Object.fromEntries(s.map(o=>[o.fieldId,o])),target:p}),{form:{onsubmit:H,errors:A,submitting:L,onSubmit:M,onSuccess:O,onError:V},fields:y}}export{X as createForm};
@@ -1,41 +0,0 @@
1
- import { FieldValue, FieldWithStatus, ValidationError } from '@picked/client';
2
- import { EventCallable, Store } from 'effector';
3
- import { ErrorCallback, SubmitCallback, SubmitEventWithCurrentTarget, SuccessCallback } from './create-submit-pipeline.svelte';
4
- export type FormField = Omit<FieldWithStatus, 'error'> & {
5
- value: FieldValue | undefined;
6
- /** Validation error for this field, or undefined if valid. */
7
- error: ValidationError | undefined;
8
- touched: boolean;
9
- onChange: (e: Event) => void;
10
- onBlur: (e: Event) => void;
11
- };
12
- /**
13
- * Return type for createForm()
14
- * Provides form handlers, reactive stores, and callback registration
15
- */
16
- export interface FormInstance<TFieldIds extends string = string> {
17
- /** Form element props (bind to <form>) */
18
- form: {
19
- onsubmit: EventCallable<SubmitEventWithCurrentTarget>;
20
- /** Flat list of all current validation errors — derived from fieldErrors */
21
- errors: Store<ValidationError[]>;
22
- /** Reactive store indicating if form is currently submitting */
23
- submitting: Store<boolean>;
24
- /** Register callbacks to transform/validate data before submission */
25
- onSubmit: (callback: SubmitCallback<TFieldIds>) => void;
26
- /** Register callbacks to run on successful form submission */
27
- onSuccess: (callback: SuccessCallback<TFieldIds>) => void;
28
- /** Register callbacks to run on form validation errors */
29
- onError: (callback: ErrorCallback) => void;
30
- };
31
- /** Reactive store of fields with current values, errors, touched state, and event handlers */
32
- fields: Store<FormField[]>;
33
- }
34
- /**
35
- * Creates a form instance tied to a set of field IDs.
36
- * Handles field evaluation, form submission, data transformation,
37
- * validation, event bus tracking, and step navigation.
38
- *
39
- * Used internally by setStepContext — access via getStep() in components.
40
- */
41
- export declare function createForm(formId: string, title: Store<string>, fieldIds: Store<string[]>): FormInstance;
@@ -1 +0,0 @@
1
- export * from './create-form.js';
@@ -1 +0,0 @@
1
- import*as C from"svelte/internal/client";import{createEvent as i,createStore as B,createEffect as l,attach as O,sample as s,split as R}from"effector";import{buildResponsesFromFormData as T}from"./build-responses.js";function k(c){let o=[];return{executeFx:l(async(...a)=>await c(o,...a)),register:a=>{const f=()=>{o=o.filter(p=>p!==a)};C.user_effect(()=>(o.push(a),f))}}}function q({client:c,experienceInstance:o,formId:u,title:m,stepStore:a,fieldsStore:f,goToNextStep:p}){const n=i(),y=i(),v=i(),_=i(),x=i(),d=B(!1),D=B(!1);D.on(_,()=>!0).on(n,()=>!1);const N=n.map(()=>{}),g=k(async(e,t)=>{await Promise.all(e.map(r=>Promise.resolve(r(t))))}),b=k(async(e,t)=>{await Promise.all(e.map(r=>Promise.resolve(r(t))))}),F=k(async(e,t)=>{let r=t;for(const E of e){const w=await Promise.resolve(E(r));w!==void 0&&(r=w)}return r}),P=l(async e=>{const t=await c.responses.commit(e);return{data:e,errors:t.errors}}),h=O({source:{step:a,title:m},mapParams:(e,t)=>({step:t.step,title:t.title,data:e.data}),effect:l(async({step:e,title:t,data:r})=>(c.eventBus({type:"form_submit_success",form:{id:u,title:t},experience:o,step:e??void 0}),r))}),S=O({source:{step:a,title:m},mapParams:(e,t)=>({step:t.step,title:t.title,errors:e.errors}),effect:l(async({step:e,title:t,errors:r})=>(c.eventBus({type:"form_submit_error",form:{id:u,title:t},exception:{reason:r},experience:o,step:e??void 0}),r.forEach(E=>{c.eventBus({type:"field_validation_error",exception:{reason:[E]},experience:o,step:e??void 0})}),r))});return s({clock:n,fn:()=>!0,target:d}),s({clock:n,source:{step:a,title:m},fn:({step:e,title:t})=>({formId:u,title:t,step:e}),target:l(({formId:e,title:t,step:r})=>{c.eventBus({type:"form_submit",form:{id:e,title:t},experience:o,step:r??void 0})})}),s({clock:n,source:{stepFields:f},fn:({stepFields:e},t)=>(t.preventDefault(),T(e,new FormData(t.currentTarget))),target:F.executeFx}),s({clock:F.executeFx.doneData,target:P}),R({source:P.doneData,match:{hasErrors:({errors:e})=>e.length>0},cases:{hasErrors:S,__:h}}),s({clock:h.doneData,target:y}),s({clock:y,fn:e=>({data:e,stopNavigation:_}),target:g.executeFx}),s({clock:g.executeFx.done,target:x}),s({clock:x,source:D,filter:e=>!e,target:p}),s({clock:S.doneData,target:v}),s({clock:v,target:b.executeFx}),s({clock:[x,b.executeFx.done],fn:()=>!1,target:d}),{submitEvent:n,isFormSubmitting:d,onSubmit:F.register,onSuccess:g.register,onError:b.register,submitStarted:N,serverErrorsReceived:v}}export{q as createSubmitPipeline};
@@ -1,53 +0,0 @@
1
- import { ExperienceInstance, ExperienceStep, FieldValue, FieldWithStatus, Picked, ValidationError } from '@picked/client';
2
- import { Event, EventCallable, Store } from 'effector';
3
- export type SubmitEventWithCurrentTarget = SubmitEvent & {
4
- currentTarget: EventTarget & HTMLFormElement;
5
- };
6
- export type SuccessCallback<TFieldIds extends string = string> = (options: {
7
- data: Record<TFieldIds, FieldValue>;
8
- stopNavigation: EventCallable<void>;
9
- }) => void | Promise<void>;
10
- export type ErrorCallback = (errors: ValidationError[]) => void | Promise<void>;
11
- export type SubmitCallback<TFieldIds extends string = string> = (data: Record<TFieldIds, FieldValue>) => Record<TFieldIds, FieldValue> | void | Promise<Record<TFieldIds, FieldValue> | void>;
12
- export interface SubmitPipelineConfig {
13
- client: Picked;
14
- experienceInstance: ExperienceInstance;
15
- formId: string;
16
- title: Store<string>;
17
- stepStore: Store<ExperienceStep | null>;
18
- fieldsStore: Store<FieldWithStatus[]>;
19
- goToNextStep: EventCallable<void>;
20
- }
21
- export interface SubmitPipeline {
22
- submitEvent: EventCallable<SubmitEventWithCurrentTarget>;
23
- isFormSubmitting: Store<boolean>;
24
- onSubmit: (callback: SubmitCallback) => void;
25
- onSuccess: (callback: SuccessCallback) => void;
26
- onError: (callback: ErrorCallback) => void;
27
- /**
28
- * Fired when a submit attempt starts — callers use this to clear validation state.
29
- * Separating this from `submitEvent` keeps the pipeline decoupled from the
30
- * validation module's internal stores.
31
- */
32
- submitStarted: Event<void>;
33
- /**
34
- * Fired when the server returns validation errors — callers write these to
35
- * `fieldErrorsStore` in the validation module.
36
- */
37
- serverErrorsReceived: Event<ValidationError[]>;
38
- }
39
- /**
40
- * Creates the submit pipeline for a form instance.
41
- *
42
- * Manages the full lifecycle of a form submission:
43
- * - Emitting event bus calls (form_submit, form_submit_success, form_submit_error)
44
- * - Running onSubmit data-transform callbacks in series
45
- * - Committing responses to the server
46
- * - Running onSuccess/onError callbacks in parallel
47
- * - Navigating to the next step (unless stopNavigation is called)
48
- *
49
- * Returns coordination events (`submitStarted`, `serverErrorsReceived`) that the
50
- * caller wires to the validation module to keep validation state in sync without
51
- * the pipeline needing direct access to validation stores.
52
- */
53
- export declare function createSubmitPipeline({ client, experienceInstance, formId, title, stepStore, fieldsStore, goToNextStep, }: SubmitPipelineConfig): SubmitPipeline;
@@ -1 +0,0 @@
1
- export * from './create-submit-pipeline.js';
@@ -1,16 +0,0 @@
1
- import { ValidationError } from '@picked/client';
2
- interface GetFormOptions {
3
- id: string;
4
- title: string;
5
- onSuccess?: () => void | Promise<void>;
6
- onError?: (errors: ValidationError[]) => void | Promise<void>;
7
- }
8
- type SubmitEventWithCurrentTarget = SubmitEvent & {
9
- currentTarget: EventTarget & HTMLFormElement;
10
- };
11
- export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
12
- form: {
13
- onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
14
- };
15
- };
16
- export {};
@@ -1 +0,0 @@
1
- import{createEvent as _,createEffect as f,attach as v,sample as y,split as k}from"effector";import{getPicked as D,getExperience as F}from"../hooks/client.js";import"@picked/client";import{getStep as B}from"../hooks/step.js";import"svelte";import"svelte/store";import"@picked/analytics";function z({id:m,title:l,onError:b,onSuccess:g}){const a=D(),x=B(),i=F(),{currentStepStore:u}=i,d=_(),h=f(t=>a.responses.commit(t)),E=v({source:{step:u},effect:f(({step:t})=>{a.eventBus({type:"form_submit_success",form:{id:m,title:l},experience:i,step:t??void 0}),g?.()})}),S=v({source:{step:u},mapParams:(t,s)=>({step:s.step,errors:t.errors}),effect:f(({step:t,errors:s})=>{a.eventBus({type:"form_submit_error",form:{id:m,title:l},exception:{reason:s},experience:i,step:t??void 0}),s.forEach(c=>{a.eventBus({type:"field_validation_error",exception:{reason:[c]},experience:i,step:t??void 0})}),b?.(s)})});return y({clock:d,source:{step:u},fn:({step:t})=>({formId:m,title:l,step:t}),target:f(({formId:t,title:s,step:c})=>{a.eventBus({type:"form_submit",form:{id:t,title:s},experience:i,step:c??void 0})})}),y({clock:d,source:{fields:a.fields.listStore,stepFields:x.fields,step:u},fn:({stepFields:t},s)=>{s.preventDefault();const c=new FormData(s.currentTarget),A=Array.from(c.entries()),p={data:{},push(r){const o=r.questionId,e=this.data[o];e?Array.isArray(e)&&Array.isArray(r.value)?Array.isArray(e)&&Array.isArray(r.value)&&(typeof e[0]=="string"?this.data[o]=[...e,...r.value].map(String):typeof e[0]=="number"?this.data[o]=[...e,...r.value].map(Number):typeof e[0]=="boolean"?this.data[o]=[...e,...r.value].map(n=>!!n):this.data[o]=r.value):this.data[o]=r.value:this.data[o]=r.value}};return t.forEach(r=>{const o=A.filter(([e])=>e===r.id);o.length!==0&&o.forEach(([,e])=>{const n=r.id;if(e===""){p.push({questionId:n,value:null});return}switch(r.type){case"text":p.push({questionId:n,value:r.multiple?[String(e)]:String(e)});break;case"number":p.push({questionId:n,value:r.multiple?[Number(e)]:Number(e)});break;case"boolean":p.push({questionId:n,value:r.multiple?[e==="true"]:e==="true"});break}})}),p.data},target:h}),k({source:h.doneData,match:{hasErrors:({errors:t})=>t.length>0},cases:{hasErrors:S,__:E}}),{form:{onsubmit:d}}}export{z as getForm};