@picked/svelte 0.0.1-dev.1767659629925 → 0.0.1-dev.1767832235641

package/dist/form/index.d.ts

@@ -1 +1,16 @@
-export { getForm } from './form.svelte';
+import { ValidationError } from '@picked/client';
+interface GetFormOptions {
+    id: string;
+    title: 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): {
+    form: {
+        onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
+    };
+};
+export {};

package/dist/form/index.js

@@ -1 +1 @@
-import{getForm as e}from"./form.svelte";export{e as getForm};
+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};

package/dist/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export { getPicked, getExperience } from './client';
-export { getStep, setStepContext, type FieldWithValue } from './step';
-export { getField } from './field';
+export { getStep, setStepContext } from './step';
 export { useUnit, getContextScope, setContextScope } from './stores';
 export { createSessionStorageStore, createLocalStorageStore } from './storage.js';
 export { getTrackRecommendationPresentEvent } from './events';

package/dist/hooks/index.js

@@ -1 +1 @@
-import{getExperience as r,getPicked as o}from"./client.js";import{getStep as c,setStepContext as x}from"./step.js";import{getField as a}from"./field.js";import{getContextScope as S,setContextScope as g,useUnit as s}from"./stores.js";import{createLocalStorageStore as i,createSessionStorageStore as u}from"./storage.js";import{getTrackRecommendationPresentEvent as d}from"./events.js";import{createQuery as P,queryCache as k,queryPresets as l}from"./create-query/index.js";export{i as createLocalStorageStore,P as createQuery,u as createSessionStorageStore,S as getContextScope,r as getExperience,a as getField,o as getPicked,c as getStep,d as getTrackRecommendationPresentEvent,k as queryCache,l as queryPresets,g as setContextScope,x as setStepContext,s as useUnit};
+import{getExperience as r,getPicked as o}from"./client.js";import{getStep as p,setStepContext as n}from"./step.js";import{getContextScope as a,setContextScope as S,useUnit as m}from"./stores.js";import{createLocalStorageStore as g,createSessionStorageStore as f}from"./storage.js";import{getTrackRecommendationPresentEvent as u}from"./events.js";import{createQuery as y,queryCache as P,queryPresets as d}from"./create-query/index.js";export{g as createLocalStorageStore,y as createQuery,f as createSessionStorageStore,a as getContextScope,r as getExperience,o as getPicked,p as getStep,u as getTrackRecommendationPresentEvent,P as queryCache,d as queryPresets,S as setContextScope,n as setStepContext,m as useUnit};

package/dist/hooks/step.d.ts

@@ -1,30 +1,13 @@
 import { Store } from 'effector';
 import { ExperienceStep, Field, Response } from '@picked/client';
-import { getForm } from '../form';
-export type FieldWithValue = Field & {
+type FieldWithValue = Field & {
     value: Response | undefined;
 };
 export interface StepContext {
     step: Store<ExperienceStep>;
     fields: Store<FieldWithValue[]>;
     isActiveStep: Store<boolean>;
-    form: ReturnType<typeof getForm>;
 }
-export declare function getStep(): {
-    form: {
-        onsubmit: import('effector').EventCallable<SubmitEvent & {
-            currentTarget: EventTarget & HTMLFormElement;
-        }>;
-    };
-    onFormSubmit: (callback: (data: import('@picked/client').CommitResponses) => import('@picked/client').CommitResponses | void | Promise<import('@picked/client').CommitResponses | void>) => void;
-    onFormSuccess: (callback: (options: {
-        data: import('@picked/client').CommitResponses;
-        stopNavigation: import('effector').EventCallable<void>;
-    }) => void | Promise<void>) => void;
-    onFormError: (callback: (errors: import('@picked/client').ValidationError[]) => void | Promise<void>) => void;
-    isFormSubmitting: import('effector').StoreWritable<boolean>;
-    step: Store<ExperienceStep>;
-    fields: Store<FieldWithValue[]>;
-    isActiveStep: Store<boolean>;
-};
+export declare function getStep(): StepContext;
 export declare function setStepContext(stepId: string): StepContext;
+export {};

package/dist/hooks/step.js

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

package/package.json

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

package/dist/form/form.svelte.d.ts

@@ -1,27 +0,0 @@
-import { CommitResponses, Field, ValidationError } from '@picked/client';
-import { EventCallable, Store } from 'effector';
-import { FieldWithValue } from '../hooks';
-interface GetFormOptions {
-    id: string;
-    title: string;
-    fields: Store<Field[] | FieldWithValue[]>;
-}
-type SuccessCallback = (options: {
-    data: CommitResponses;
-    stopNavigation: EventCallable<void>;
-}) => void | Promise<void>;
-type ErrorCallback = (errors: ValidationError[]) => void | Promise<void>;
-type SubmitCallback = (data: CommitResponses) => CommitResponses | void | Promise<CommitResponses | void>;
-type SubmitEventWithCurrentTarget = SubmitEvent & {
-    currentTarget: EventTarget & HTMLFormElement;
-};
-export declare function getForm({ id: formId, title, fields }: GetFormOptions): {
-    form: {
-        onsubmit: EventCallable<SubmitEventWithCurrentTarget>;
-    };
-    onFormSubmit: (callback: SubmitCallback) => void;
-    onFormSuccess: (callback: SuccessCallback) => void;
-    onFormError: (callback: ErrorCallback) => void;
-    isFormSubmitting: import('effector').StoreWritable<boolean>;
-};
-export {};

package/dist/form/form.svelte.ts

@@ -1,379 +0,0 @@
-import type {
-  CommitResponses,
-  ExperienceStep,
-  Field,
-  FieldValue,
-  ValidationError,
-  ExperienceInstance,
-} from '@picked/client'
-import {
-  attach,
-  createEffect,
-  createEvent,
-  createStore,
-  sample,
-  split,
-  type EventCallable,
-  type Store,
-} from 'effector'
-import { getPicked, getExperience, type FieldWithValue } from '../hooks'
-
-interface Response {
-  questionId: Field['id']
-  value: FieldValue
-}
-
-interface GetFormOptions {
-  id: string
-  title: string
-  fields: Store<Field[] | FieldWithValue[]>
-}
-
-interface CommitResult {
-  data: CommitResponses
-  errors: ValidationError[]
-}
-
-type SuccessCallback = (options: {
-  data: CommitResponses
-  stopNavigation: EventCallable<void>
-}) => void | Promise<void>
-type ErrorCallback = (errors: ValidationError[]) => void | Promise<void>
-type SubmitCallback = (
-  data: CommitResponses,
-) => CommitResponses | void | Promise<CommitResponses | void>
-
-type SubmitEventWithCurrentTarget = SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }
-
-/**
- * Factory function to create a callback observer with automatic cleanup
- * Reduces duplication across success/error/submit callback patterns
- */
-function createObserver<TCallback extends (...args: any[]) => any, TReturn = void>(
-  executor: (callbacks: TCallback[], ...params: Parameters<TCallback>) => Promise<TReturn>,
-) {
-  let callbacks: TCallback[] = []
-
-  const executeFx = createEffect(async (...params: Parameters<TCallback>): Promise<TReturn> => {
-    return await executor(callbacks, ...params)
-  })
-
-  const register = (callback: TCallback) => {
-    $effect(() => {
-      callbacks.push(callback)
-      return () => {
-        callbacks = callbacks.filter((cb) => cb !== callback)
-      }
-    })
-  }
-
-  return { executeFx, register }
-}
-
-export function getForm({ id: formId, title, fields }: GetFormOptions) {
-  const client = getPicked()
-  const experienceInstance: ExperienceInstance = getExperience()
-  const { currentStepStore: stepStore, goToNextStep } = experienceInstance
-
-  const submitEvent = createEvent<SubmitEventWithCurrentTarget>()
-  const formSuccessEvent = createEvent<CommitResponses>()
-  const formErrorEvent = createEvent<ValidationError[]>()
-  const stopNavigationEvent = createEvent<void>()
-  const allCallbacksCompleteEvent = createEvent<void>()
-
-  const isFormSubmitting = createStore<boolean>(false)
-  const stopNavigationStore = createStore(false)
-  stopNavigationStore
-    .on(stopNavigationEvent, () => true) // Set to true when stopNavigation is used in onFormSuccess
-    .on(submitEvent, () => false) // Reset to false on new submit
-
-  // Create observers for each callback type
-  const successObserver = createObserver<SuccessCallback>(async (callbacks, options) => {
-    await Promise.all(callbacks.map((callback) => Promise.resolve(callback(options))))
-  })
-
-  const errorObserver = createObserver<ErrorCallback>(async (callbacks, errors) => {
-    await Promise.all(callbacks.map((callback) => Promise.resolve(callback(errors))))
-  })
-
-  const submitObserver = createObserver<SubmitCallback, CommitResponses>(
-    async (callbacks, data) => {
-      let transformedData = data
-
-      // Apply each callback's transformation sequentially
-      for (const callback of callbacks) {
-        const result = await Promise.resolve(callback(transformedData))
-        // If callback returns data, use it; otherwise keep current
-        if (result !== undefined) {
-          transformedData = result
-        }
-      }
-
-      return transformedData
-    },
-  )
-
-  const commitFx = createEffect(async (responses: CommitResponses) => {
-    const result = await client.responses.commit(responses)
-    // Merge submitted data with validation result
-    return {
-      data: responses,
-      errors: result.errors,
-    }
-  })
-
-  const onSuccessFx = attach({
-    source: { step: stepStore },
-    mapParams: (commitResult: CommitResult, source) => ({
-      step: source.step,
-      data: commitResult.data,
-    }),
-    effect: createEffect(
-      async ({ step, data }: { step: ExperienceStep | null; data: CommitResponses }) => {
-        client.eventBus({
-          type: 'form_submit_success',
-          form: { id: formId, title },
-          experience: experienceInstance,
-          step: step ?? undefined,
-        })
-        return data
-      },
-    ),
-  })
-
-  const onErrorFx = attach({
-    source: { step: stepStore },
-    mapParams: (commitResult: CommitResult, source) => ({
-      step: source.step,
-      errors: commitResult.errors,
-    }),
-    effect: createEffect(
-      async ({ step, errors }: { step: ExperienceStep | null; errors: ValidationError[] }) => {
-        client.eventBus({
-          type: 'form_submit_error',
-          form: { id: formId, title },
-          exception: { reason: errors },
-          experience: experienceInstance,
-          step: step ?? undefined,
-        })
-
-        errors.forEach((exception) => {
-          client.eventBus({
-            type: 'field_validation_error',
-            exception: { reason: [exception] },
-            experience: experienceInstance,
-            step: step ?? undefined,
-          })
-        })
-
-        return errors
-      },
-    ),
-  })
-
-  // set isFormSubmitting to true when the form is submitted
-  sample({
-    clock: submitEvent,
-    fn: () => true,
-    target: isFormSubmitting,
-  })
-
-  sample({
-    clock: submitEvent,
-    source: { step: stepStore },
-    fn: ({ step }) => ({ formId, title, step }),
-    target: createEffect(
-      ({
-        formId: formIdParam,
-        title: titleParam,
-        step,
-      }: {
-        formId: string
-        title: string
-        step: ExperienceStep | null
-      }) => {
-        client.eventBus({
-          type: 'form_submit',
-          form: { id: formIdParam, title: titleParam },
-          experience: experienceInstance,
-          step: step ?? undefined,
-        })
-      },
-    ),
-  })
-
-  sample({
-    clock: submitEvent,
-    source: {
-      fields: client.fields.listStore,
-      stepFields: fields,
-    },
-    fn: ({ stepFields }, event) => {
-      event.preventDefault()
-
-      const formData = new FormData(event.currentTarget)
-      const formDataEntries = Array.from(formData.entries())
-
-      const responses: { data: Record<Field['id'], FieldValue>; push: (item: Response) => void } = {
-        data: {},
-        push(item: Response) {
-          const questionId = item.questionId
-          const existing = this.data[questionId]
-
-          if (!existing) {
-            // No matching questionId, just add the new item
-            this.data[questionId] = item.value
-            // If both values are arrays, merge them
-          } else if (Array.isArray(existing) && Array.isArray(item.value)) {
-            if (Array.isArray(existing) && Array.isArray(item.value)) {
-              // Check what type FieldValue expects and convert accordingly
-              if (typeof existing[0] === 'string') {
-                this.data[questionId] = [...existing, ...item.value].map(String)
-              } else if (typeof existing[0] === 'number') {
-                this.data[questionId] = [...existing, ...item.value].map(Number)
-              } else if (typeof existing[0] === 'boolean') {
-                this.data[questionId] = [...existing, ...item.value].map((v) => Boolean(v))
-              } else {
-                this.data[questionId] = item.value
-              }
-            }
-          } else {
-            // Otherwise, override the existing value
-            this.data[questionId] = item.value
-          }
-        },
-      }
-
-      stepFields.forEach((field) => {
-        let fieldEntries = formDataEntries.filter(([key]) => key === field.id)
-
-        if (fieldEntries.length === 0) {
-          fieldEntries = [[field.id, '']]
-        }
-
-        fieldEntries.forEach(([, value]) => {
-          const questionId = field.id
-
-          if (value === '') {
-            responses.push({
-              questionId,
-              value: null,
-            })
-
-            return
-          }
-
-          switch (field.type) {
-            case 'text':
-              responses.push({
-                questionId,
-                value: field.multiple ? [String(value)] : String(value),
-              })
-              break
-            case 'number':
-              responses.push({
-                questionId,
-                value: field.multiple ? [Number(value)] : Number(value),
-              })
-              break
-            case 'boolean':
-              responses.push({
-                questionId,
-                value: field.multiple ? [value === 'true'] : value === 'true',
-              })
-              break
-            // case 'object':
-            //   try {
-            //     responses.push({
-            //       questionId,
-            //       value: field.multiple ? [JSON.parse(String(value))] : JSON.parse(String(value)),
-            //     })
-            //   } catch {
-            //     responses.push({
-            //       questionId,
-            //       value: field.multiple ? [null] : null,
-            //     })
-            //   }
-
-            // break
-          }
-        })
-      })
-
-      return responses.data
-    },
-    target: submitObserver.executeFx,
-  })
-
-  // Pass transformed data from submit callbacks to commit
-  sample({
-    clock: submitObserver.executeFx.doneData,
-    target: commitFx,
-  })
-
-  // Errors are returned from the commit even if it is a success, split to handle errors array
-  split({
-    source: commitFx.doneData,
-    match: {
-      hasErrors: ({ errors }) => errors.length > 0,
-    },
-    cases: {
-      hasErrors: onErrorFx,
-      __: onSuccessFx,
-    },
-  })
-
-  sample({
-    clock: onSuccessFx.doneData,
-    target: formSuccessEvent,
-  })
-
-  // When form succeeds, execute all callbacks
-  sample({
-    clock: formSuccessEvent,
-    fn: (data) => ({ data, stopNavigation: stopNavigationEvent }), // Pass form data and event reference to callbacks
-    target: successObserver.executeFx,
-  })
-
-  // When all callbacks complete, trigger navigation check
-  sample({
-    clock: successObserver.executeFx.done,
-    target: allCallbacksCompleteEvent,
-  })
-
-  // Check navigation after all callbacks complete
-  sample({
-    clock: allCallbacksCompleteEvent,
-    source: stopNavigationStore,
-    filter: (stop) => !stop,
-    target: goToNextStep,
-  })
-
-  // Declarative event wiring for error flow
-  sample({
-    clock: onErrorFx.doneData,
-    target: formErrorEvent,
-  })
-
-  // When form errors, execute all error callbacks
-  sample({
-    clock: formErrorEvent,
-    target: errorObserver.executeFx,
-  })
-
-  sample({
-    clock: [allCallbacksCompleteEvent, errorObserver.executeFx.done],
-    fn: () => false,
-    target: isFormSubmitting,
-  })
-
-  return {
-    form: {
-      onsubmit: submitEvent,
-    },
-    onFormSubmit: submitObserver.register,
-    onFormSuccess: successObserver.register,
-    onFormError: errorObserver.register,
-    isFormSubmitting,
-  }
-}