@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.
- package/dist/form/index.d.ts +16 -2
- package/dist/form/index.js +1 -1
- package/dist/hooks/field.d.ts +0 -5
- package/dist/hooks/step.d.ts +8 -8
- package/dist/hooks/step.js +1 -1
- package/dist/plugins/devtools/components/ExperienceInstanceListItem.svelte +1 -1
- package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte +1 -1
- package/dist/plugins/devtools/screens/responses/ResponseTableRow.svelte +9 -10
- package/package.json +2 -2
- package/dist/form/build-responses.d.ts +0 -13
- package/dist/form/build-responses.js +0 -1
- package/dist/form/create-field-evaluator.d.ts +0 -17
- package/dist/form/create-field-evaluator.js +0 -1
- package/dist/form/create-field-validation.d.ts +0 -41
- package/dist/form/create-field-validation.js +0 -1
- package/dist/form/create-form.js +0 -1
- package/dist/form/create-form.svelte.d.ts +0 -41
- package/dist/form/create-form.svelte.js +0 -1
- package/dist/form/create-submit-pipeline.js +0 -1
- package/dist/form/create-submit-pipeline.svelte.d.ts +0 -53
- package/dist/form/create-submit-pipeline.svelte.js +0 -1
- package/dist/form/get-form.d.ts +0 -16
- package/dist/form/get-form.js +0 -1
package/dist/form/index.d.ts
CHANGED
|
@@ -1,2 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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 {};
|
package/dist/form/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
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};
|
package/dist/hooks/field.d.ts
CHANGED
|
@@ -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;
|
package/dist/hooks/step.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { Store } from 'effector';
|
|
2
|
-
import { ExperienceStep } from '@picked/client';
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
|
|
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 {};
|
package/dist/hooks/step.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getContext as
|
|
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?.
|
|
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>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { ResponseListItem, PrimitiveFieldValue, Field
|
|
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<
|
|
14
|
+
let selectedOptions: Set<PrimitiveFieldValue> = new Set()
|
|
15
15
|
|
|
16
|
-
$: hasOptions =
|
|
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:
|
|
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):
|
|
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:
|
|
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
|
|
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 &&
|
|
145
|
+
{#if hasOptions && field?.options}
|
|
147
146
|
<Stack direction="vertical" gap="small">
|
|
148
|
-
{#each
|
|
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.
|
|
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.
|
|
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};
|
package/dist/form/create-form.js
DELETED
|
@@ -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';
|
package/dist/form/get-form.d.ts
DELETED
|
@@ -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 {};
|
package/dist/form/get-form.js
DELETED
|
@@ -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};
|