@picked/svelte 0.0.1-dev.1765423029766 → 0.0.1-dev.1765777335219

package/dist/form/index.d.ts

@@ -1,14 +1,32 @@
 import { ValidationError } from '@picked/client';
-interface GetFormOptions {
+import { StepContext } from '../hooks/step';
+export interface GetFormOptions {
     id: string;
     title: string;
+    fieldIds?: string[];
     onSuccess?: () => void | Promise<void>;
     onError?: (errors: ValidationError[]) => void | Promise<void>;
 }
 type SubmitEventWithCurrentTarget = SubmitEvent & {
     currentTarget: EventTarget & HTMLFormElement;
 };
-export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
+/**
+ * Internal implementation that creates a form with optional step context.
+ * Used by both getForm (independent) and getStep (step-scoped).
+ */
+export declare function createForm({ id: formId, title, fieldIds: fieldFilter, onError, onSuccess, stepContext, }: GetFormOptions & {
+    stepContext?: StepContext;
+}): {
+    form: {
+        onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
+    };
+};
+/**
+ * Creates a form that works independently without requiring a step context.
+ * If called within a step context, it will automatically use the step's fields.
+ * Otherwise, it will use all available fields.
+ */
+export declare function getForm(options: GetFormOptions): {
     form: {
         onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
     };

package/dist/form/index.js

@@ -1 +1 @@
-import{createEvent as k,createEffect as m,attach as b,sample as g,split as D}from"effector";import{getPicked as F,getExperience as S}from"../hooks/client.js";import{getStep as B}from"../hooks/step.js";import"svelte";import"svelte/store";import"@picked/client";import"@picked/analytics";function z({id:f,title:l,onError:d,onSuccess:h}){const o=F(),x=B(),n=S(),{currentStepStore:u}=n,v=k(),y=m(r=>o.responses.commit(r)),A=b({source:{step:u},effect:m(({step:r})=>{o.eventBus({type:"form_submit_success",form:{id:f,title:l},experience:n,step:r??void 0}),h==null||h()})}),_=b({source:{step:u},mapParams:(r,a)=>({step:a.step,errors:r.errors}),effect:m(({step:r,errors:a})=>{o.eventBus({type:"form_submit_error",form:{id:f,title:l},exception:{reason:a},experience:n,step:r??void 0}),a.forEach(p=>{o.eventBus({type:"field_validation_error",exception:{reason:[p]},experience:n,step:r??void 0})}),d==null||d(a)})});return g({clock:v,source:{step:u},fn:({step:r})=>({formId:f,title:l,step:r}),target:m(({formId:r,title:a,step:p})=>{o.eventBus({type:"form_submit",form:{id:r,title:a},experience:n,step:p??void 0})})}),g({clock:v,source:{fields:o.fields.listStore,stepFields:x.fields,step:u},fn:({stepFields:r},a)=>{a.preventDefault();const p=new FormData(a.currentTarget),E=Array.from(p.entries()),c={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(i=>!!i):this.data[s]=t.value):this.data[s]=t.value:this.data[s]=t.value}};return r.forEach(t=>{let s=E.filter(([e])=>e===t.id);s.length===0&&(s=[[t.id,""]]),s.forEach(([,e])=>{const i=t.id;if(e===""){c.push({questionId:i,value:null});return}switch(t.type){case"text":c.push({questionId:i,value:t.multiple?[String(e)]:String(e)});break;case"number":c.push({questionId:i,value:t.multiple?[Number(e)]:Number(e)});break;case"boolean":c.push({questionId:i,value:t.multiple?[e==="true"]:e==="true"});break}})}),c.data},target:y}),D({source:y.doneData,match:{hasErrors:({errors:r})=>r.length>0},cases:{hasErrors:_,__:A}}),{form:{onsubmit:v}}}export{z as getForm};
+import{getContext as F}from"svelte";import{createEvent as B,createEffect as l,attach as E,sample as _,split as D}from"effector";import{getPicked as N,getExperience as I}from"../hooks/client.js";import"@picked/client";import{STEP_CONTEXT_KEY as T}from"../context.js";import"svelte/store";import"@picked/analytics";function q(){try{return F(T)}catch{return}}function w({id:n,title:c,fieldIds:d,onError:h,onSuccess:v,stepContext:y}){const o=N(),p=I(),{currentStepStore:f}=p,g=B(),x=l(e=>o.responses.commit(e));let b=(y==null?void 0:y.fields)??o.fields.listStore.map(e=>e.map(s=>({...s,value:void 0})));d&&d.length>0&&(b=b.map(e=>e.filter(s=>d.includes(s.id))));const A=E({source:{step:f},effect:l(({step:e})=>{o.eventBus({type:"form_submit_success",form:{id:n,title:c},experience:p,step:e??void 0}),v==null||v()})}),S=E({source:{step:f},mapParams:(e,s)=>({step:s.step,errors:e.errors}),effect:l(({step:e,errors:s})=>{o.eventBus({type:"form_submit_error",form:{id:n,title:c},exception:{reason:s},experience:p,step:e??void 0}),s.forEach(u=>{o.eventBus({type:"field_validation_error",exception:{reason:[u]},experience:p,step:e??void 0})}),h==null||h(s)})});return _({clock:g,source:{step:f},fn:({step:e})=>({formId:n,title:c,step:e}),target:l(({formId:e,title:s,step:u})=>{o.eventBus({type:"form_submit",form:{id:e,title:s},experience:p,step:u??void 0})})}),_({clock:g,source:{fields:o.fields.listStore,stepFields:b,step:f},fn:({stepFields:e},s)=>{s.preventDefault();const u=new FormData(s.currentTarget),k=Array.from(u.entries()),m={data:{},push(r){const a=r.questionId,t=this.data[a];t?Array.isArray(t)&&Array.isArray(r.value)?Array.isArray(t)&&Array.isArray(r.value)&&(typeof t[0]=="string"?this.data[a]=[...t,...r.value].map(String):typeof t[0]=="number"?this.data[a]=[...t,...r.value].map(Number):typeof t[0]=="boolean"?this.data[a]=[...t,...r.value].map(i=>!!i):this.data[a]=r.value):this.data[a]=r.value:this.data[a]=r.value}};return e.forEach(r=>{let a=k.filter(([t])=>t===r.id);a.length===0&&(a=[[r.id,""]]),a.forEach(([,t])=>{const i=r.id;if(t===""){m.push({questionId:i,value:null});return}switch(r.type){case"text":m.push({questionId:i,value:r.multiple?[String(t)]:String(t)});break;case"number":m.push({questionId:i,value:r.multiple?[Number(t)]:Number(t)});break;case"boolean":m.push({questionId:i,value:r.multiple?[t==="true"]:t==="true"});break}})}),m.data},target:x}),D({source:x.doneData,match:{hasErrors:({errors:e})=>e.length>0},cases:{hasErrors:S,__:A}}),{form:{onsubmit:g}}}function G(n){const c=q();return w({...n,stepContext:c})}export{w as createForm,G as getForm};

package/dist/hooks/step.d.ts

@@ -1,5 +1,5 @@
 import { Store } from 'effector';
-import { ExperienceStep, Field, Response } from '@picked/client';
+import { ExperienceStep, Field, Response, ValidationError } from '@picked/client';
 type FieldWithValue = Field & {
     value: Response | undefined;
 };
@@ -8,6 +8,42 @@ export interface StepContext {
     fields: Store<FieldWithValue[]>;
     isActiveStep: Store<boolean>;
 }
-export declare function getStep(): StepContext;
+interface GetStepOptions {
+    fieldIds?: string[];
+    onSuccess?: () => void | Promise<void>;
+    onError?: (errors: ValidationError[]) => void | Promise<void>;
+}
+/**
+ * Gets the current step context. Optionally accepts callbacks to create a form
+ * automatically configured with the step's id and title.
+ *
+ * @example
+ * // Without form
+ * const { step, fields } = getStep()
+ *
+ * @example
+ * // With form - submits all step fields
+ * const { form } = getStep({
+ *   onSuccess: () => console.log('Form submitted!'),
+ *   onError: (errors) => console.error('Validation errors:', errors)
+ * })
+ *
+ * @example
+ * // With form - only submits specific fields (e.g., email for newsletter)
+ * const { form } = getStep({
+ *   fieldIds: ['email'],
+ *   onSuccess: () => console.log('Newsletter signup!'),
+ * })
+ */
+export declare function getStep(options?: GetStepOptions): StepContext | {
+    form: {
+        onsubmit: import('effector').EventCallable<SubmitEvent & {
+            currentTarget: EventTarget & HTMLFormElement;
+        }>;
+    };
+    step: Store<ExperienceStep>;
+    fields: Store<FieldWithValue[]>;
+    isActiveStep: Store<boolean>;
+};
 export declare function setStepContext(stepId: string): StepContext;
 export {};

package/dist/hooks/step.js

@@ -1 +1 @@
-import{getContext as v,setContext as E}from"svelte";import{createStore as h,combine as a,attach as w,createEffect as C,sample as l}from"effector";import{getStepFields as A}from"@picked/client";import{STEP_CONTEXT_KEY as d}from"../context.js";import{getStepRouter as F}from"../router/context.js";import{getExperience as T,getPicked as P}from"./client.js";function N(){return v(d)}function O(o){const u=T(),i=P(),{activeStep:m}=F(),n=m.map(e=>(e==null?void 0:e.id)===o),s=u.treeStore.map(e=>{const t=e.steps.find(r=>r.id===o);if(!t)throw new Error(`Step with id "${o}" not found in the experience tree.`);return t}),c=h([]),S=a({fields:c,responses:i.responses.listStore},({fields:e,responses:t})=>e.map(r=>{var f;const g=(f=t.find(x=>x.fieldId===r.id))==null?void 0:f.value;return{...r,value:g}})),p=w({source:a({step:s,fields:i.fields.listStore}),effect:C(async({step:{fieldIds:e},fields:t})=>await A(i,t.filter(r=>e.includes(r.id))))});return l({source:{isActiveStep:n},filter:({isActiveStep:e})=>e,target:p}),l({source:p.doneData,target:c}),E(d,{step:s,fields:S,isActiveStep:n})}export{N as getStep,O as setStepContext};
+import{getContext as E,setContext as v}from"svelte";import{createStore as h,combine as d,attach as C,createEffect as w,sample as l}from"effector";import{getStepFields as F}from"@picked/client";import{STEP_CONTEXT_KEY as m}from"../context.js";import{getStepRouter as A}from"../router/context.js";import{getExperience as T,getPicked as b}from"./client.js";import{createForm as I}from"../form/index.js";function N(t){const o=E(m);if(t){const r=o.step.getState();return{...o,form:I({id:`${r.id}-form`,title:r.label||r.id,fieldIds:t.fieldIds,onSuccess:t.onSuccess,onError:t.onError,stepContext:o}).form}}return o}function O(t){const o=T(),r=b(),{activeStep:u}=A(),n=u.map(e=>(e==null?void 0:e.id)===t),c=o.treeStore.map(e=>{const i=e.steps.find(s=>s.id===t);if(!i)throw new Error(`Step with id "${t}" not found in the experience tree.`);return i}),f=h([]),S=d({fields:f,responses:r.responses.listStore},({fields:e,responses:i})=>e.map(s=>{var a;const x=(a=i.find(g=>g.fieldId===s.id))==null?void 0:a.value;return{...s,value:x}})),p=C({source:d({step:c,fields:r.fields.listStore}),effect:w(async({step:{fieldIds:e},fields:i})=>await F(r,i.filter(s=>e.includes(s.id))))});return l({source:{isActiveStep:n},filter:({isActiveStep:e})=>e,target:p}),l({source:p.doneData,target:f}),v(m,{step:c,fields:S,isActiveStep:n})}export{N as getStep,O as setStepContext};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1765423029766",
+  "version": "0.0.1-dev.1765777335219",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -75,7 +75,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1765423029766",
+    "@picked/client": "0.0.1-dev.1765777335219",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },