@picked/react 0.0.1-dev.1774244905386 → 0.0.1-dev.1774924249530

package/dist/form/index.d.ts

@@ -1,16 +1,28 @@
-import { ValidationError } from '@picked/client';
-interface GetFormOptions {
-    id: string;
+import { FormInstance as CoreFormInstance, ErrorCallback, SubmitCallback, SuccessCallback } from '@picked/client/form';
+interface UseFormOptions {
+    formId: string;
     title: string;
-    onSuccess?: () => void | Promise<void>;
-    onError?: (errors: ValidationError[]) => void | Promise<void>;
+    fieldIds: string[];
 }
-export declare function useForm(options: GetFormOptions): {
-    form: {
-        onsubmit: (event: SubmitEvent & {
-            currentTarget: EventTarget & HTMLFormElement;
-        }) => Promise<void>;
+/**
+ * React FormInstance — identical to core but callback registration returns void
+ * (cleanup is handled automatically via useEffect, not by the consumer).
+ */
+interface FormInstance<TFieldIds extends string = string> extends Omit<CoreFormInstance<TFieldIds>, 'form'> {
+    form: Omit<CoreFormInstance<TFieldIds>['form'], 'onBeforeSubmit' | 'onSuccess' | 'onError'> & {
+        onBeforeSubmit: (callback: SubmitCallback<TFieldIds>) => void;
+        onSuccess: (callback: SuccessCallback<TFieldIds>) => void;
+        onError: (callback: ErrorCallback) => void;
     };
-};
+}
+/**
+ * React hook wrapping the framework-agnostic createForm from @picked/client/form.
+ *
+ * - Injects client and experienceInstance from React context
+ * - Collects unsubscribe functions from callback registration and cleans them
+ *   up on unmount via a single useEffect
+ * - Consumer DX: `form.onSuccess(cb)` — no hooks or lifecycle awareness needed
+ */
+export declare function useForm({ formId, title, fieldIds }: UseFormOptions): FormInstance;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqB,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAQxE,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAC9D;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,cAAc;;0BAKd,WAAW,GAAG;YAAE,aAAa,EAAE,WAAW,GAAG,eAAe,CAAA;SAAE;;EA+G9F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,YAAY,IAAI,gBAAgB,EACrC,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAG5B,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB;AAED;;;GAGG;AACH,UAAU,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CACpE,gBAAgB,CAAC,SAAS,CAAC,EAC3B,MAAM,CACP;IACC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC,GAAG;QAC5F,cAAc,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,IAAI,CAAA;QAC7D,SAAS,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,IAAI,CAAA;QACzD,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;KAC3C,CAAA;CACF;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,GAAG,YAAY,CAwCjF"}

package/dist/form/index.js

@@ -1 +1 @@
-import{useExperience as e,usePicked as t}from"../hooks/client.js";import"../hooks/index.js";function n(n){let r=t(),i=e(),{id:a,title:o}=n;async function s(e){e.preventDefault(),r.eventBus({type:`form_submit`,form:{id:a,title:o},experience:i});let t=new FormData(e.currentTarget),s={data:{},push(e){let t=e.questionId,n=this.data[t];n&&Array.isArray(n)&&Array.isArray(e.value)?Array.isArray(n)&&Array.isArray(e.value)&&(typeof n[0]==`string`?this.data[t]=[...n,...e.value].map(String):typeof n[0]==`number`?this.data[t]=[...n,...e.value].map(Number):typeof n[0]==`boolean`?this.data[t]=[...n,...e.value].map(e=>!!e):this.data[t]=e.value):this.data[t]=e.value}};for(let[e,n]of t.entries()){let t=r.fields.getById(e).getState();if(!t)continue;let i=t.id;switch(t.type){case`text`:s.push({questionId:i,value:t.multiple?[String(n)]:String(n)});break;case`number`:s.push({questionId:i,value:t.multiple?[Number(n)]:Number(n)});break;case`boolean`:s.push({questionId:i,value:t.multiple?[n===`true`]:n===`true`});break}}let{errors:c}=await r.responses.commit(s.data);if(c.length>0){r.eventBus({type:`form_submit_error`,form:{id:a,title:o},exception:{reason:c},experience:i}),c.forEach(e=>{r.eventBus({type:`field_validation_error`,exception:{reason:[e]},experience:i})}),await n.onError?.(c);return}r.eventBus({type:`form_submit_success`,form:{id:a,title:o},experience:i}),await n.onSuccess?.()}return{form:{onsubmit:s}}}export{n as useForm};
+import{useExperience as e,usePicked as t}from"../hooks/client.js";import"../hooks/index.js";import{useEffect as n,useMemo as r,useRef as i}from"react";import{createStore as a}from"effector";import{createForm as o}from"@picked/client/form";function s({formId:s,title:c,fieldIds:l}){let u=t(),d=e(),f=r(()=>a(c),[c]),p=r(()=>a(l),[l]),m=r(()=>o({client:u,experienceInstance:d},s,f,p),[u,d,s,f,p]),h=i([]);return n(()=>()=>{h.current.forEach(e=>e()),h.current=[]},[]),{form:r(()=>({...m.form,onBeforeSubmit:e=>{h.current.push(m.form.onBeforeSubmit(e))},onSuccess:e=>{h.current.push(m.form.onSuccess(e))},onError:e=>{h.current.push(m.form.onError(e))}}),[m]),fields:m.fields}}export{s as useForm};

package/dist/hooks/step.d.ts

@@ -1,41 +1,44 @@
-import { Field, Response } from '@picked/client';
-type FieldWithValue = Field & {
-    value: Response | undefined;
-};
-interface StepWithLabel {
-    id: string;
-    label: string;
-}
+import { EventCallable, Store } from 'effector';
+import { ExperienceStep, ValidationError } from '@picked/client';
+import { FormField, ErrorCallback, SubmitCallback, SubmitEventWithCurrentTarget, SuccessCallback } from '@picked/client/form';
 export interface StepContext {
-    step: StepWithLabel;
-    fields: FieldWithValue[];
-    isActiveStep?: boolean;
+    step: Store<ExperienceStep>;
+    /** Reactive store of fields with current values, errors, touched state, and event handlers. */
+    fields: Store<FormField[]>;
+    isActive: boolean;
+    /** @deprecated Use `isActive` instead. */
+    isActiveStep: boolean;
+    form: {
+        /** HTML-safe attributes to spread onto a form element. */
+        props: {
+            onsubmit: EventCallable<SubmitEventWithCurrentTarget>;
+        };
+        /** Flat list of all current validation errors. */
+        errors: Store<ValidationError[]>;
+        /** Whether the form is currently submitting. */
+        submitting: Store<boolean>;
+        /** Register a callback to transform data before submission. Cleanup is automatic. */
+        onBeforeSubmit: (callback: SubmitCallback) => void;
+        /** Register a callback to run on successful submission. Cleanup is automatic. */
+        onSuccess: (callback: SuccessCallback) => void;
+        /** Register a callback to run on validation errors. Cleanup is automatic. */
+        onError: (callback: ErrorCallback) => void;
+    };
 }
 export declare const StepContextProvider: import('react').Context<StepContext | null>;
 /**
- * Returns the current step context, including step metadata and evaluated fields.
- * Must be used within a component wrapped by `StepContextProvider`.
- * @returns The step, its evaluated fields, and whether this is the active step.
- * @example
- * const { step, fields, isActiveStep } = useStep()
+ * Retrieves the step context from the nearest provider.
+ *
+ * @returns {StepContext} The current step context.
+ * @example useStep()
  */
-export declare function useStep(): {
-    step: StepWithLabel;
-    fields: FieldWithValue[];
-    isActiveStep: boolean;
-};
+export declare function useStep(): StepContext;
 /**
- * Creates and returns step context stores for the given step ID.
- * Evaluates field conditions reactively whenever fields or responses change.
- * @param stepId - The ID of the step to set context for.
- * @returns The step metadata, evaluated fields, and active step indicator.
- * @example
- * const { step, fields, isActiveStep } = useSetStepContext('step-123')
+ * Creates and provides step context for the given step ID.
+ *
+ * @param {string} stepId - The step identifier.
+ * @returns {StepContext} The step context with form, fields, and active state.
+ * @example useSetStepContext('step-1')
  */
-export declare function useSetStepContext(stepId: string): {
-    step: StepWithLabel;
-    fields: FieldWithValue[];
-    isActiveStep: boolean;
-};
-export {};
+export declare function useSetStepContext(stepId: string): StepContext;
 //# sourceMappingURL=step.d.ts.map

package/dist/hooks/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAoC,MAAM,gBAAgB,CAAA;AAMvF,KAAK,cAAc,GAAG,KAAK,GAAG;IAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,CAAA;AAC7D,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAOD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,aAAa,CAAA;IACnB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,mBAAmB,6CAA0C,CAAA;AAE1E;;;;;;GAMG;AACH,wBAAgB,OAAO;;;;EAWtB;AAeD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM;;;;EA8G/C"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,4BAA4B,EACjC,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAI5B,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC3B,+FAA+F;IAC/F,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAA;IAC1B,QAAQ,EAAE,OAAO,CAAA;IACjB,0CAA0C;IAC1C,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE;QACJ,0DAA0D;QAC1D,KAAK,EAAE;YACL,QAAQ,EAAE,aAAa,CAAC,4BAA4B,CAAC,CAAA;SACtD,CAAA;QACD,kDAAkD;QAClD,MAAM,EAAE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAA;QAChC,gDAAgD;QAChD,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;QAC1B,qFAAqF;QACrF,cAAc,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAA;QAClD,iFAAiF;QACjF,SAAS,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;QAC9C,6EAA6E;QAC7E,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;KAC3C,CAAA;CACF;AAED,eAAO,MAAM,mBAAmB,6CAA0C,CAAA;AAE1E;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,WAAW,CAOrC;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,CAkE7D"}

package/dist/hooks/step.js

@@ -1 +1 @@
-import{useExperience as e,usePicked as t}from"./client.js";import{useStepRouter as n}from"../router/context.js";import{createContext as r,useContext as i,useMemo as a}from"react";import{attach as o,combine as s,createEffect as c,createStore as l,sample as u}from"effector";import{evaluateRuleLogic as d}from"@picked/client";import{useUnit as f}from"effector-react";var p=r(null);function m(){let e=i(p);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return{step:e.step,fields:e.fields,isActiveStep:e.isActiveStep??!1}}function h(r){let i=e(),p=t(),{activeStep:m}=n(),h=a(()=>m?.id===r,[m?.id,r]),{stepContext:g}=a(()=>{let e=o({source:s({steps:s(i.treeStore.map(e=>e.steps),p.steps.listStore,(e,t)=>t.filter(t=>e.includes(t.id))),fields:p.fields.listStore,responses:p.responses.listStore}),mapParams:(e,t)=>t,effect:c(async({steps:e,fields:t,responses:n})=>{let i=e.find(e=>e.id===r);if(!i)throw Error(`Step with id "${r}" not found in the experience tree.`);let a=t.filter(e=>(i.fieldIds??[]).includes(e.id)),o=[];for(let e of a)e.condition?await d(p,e.condition)&&o.push(e):o.push(e);let s={};for(let e of n)s[e.fieldKey]=e;let c=o.map(e=>({...e,value:s[e.key]?.value}));return{step:{id:i.id,label:i.name??i.label},fields:c}})}),t=l({step:{id:r,label:``},fields:[]});return t.on(e.doneData,(e,t)=>t),u({clock:[p.fields.listStore,p.responses.listStore],target:e}),e(),{stepContextFx:e,stepContext:t}},[r,p,i]),_=f(g);return{step:_.step,fields:_.fields,isActiveStep:h}}export{p as StepContextProvider,h as useSetStepContext,m as useStep};
+import{useExperience as e,usePicked as t}from"./client.js";import{useStepRouter as n}from"../router/context.js";import{createContext as r,useContext as i,useEffect as a,useMemo as o,useRef as s}from"react";import{createForm as c}from"@picked/client/form";var l=r(null);function u(){let e=i(l);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return e}function d(r){let i=e(),l=t(),{activeStep:u}=n(),d=o(()=>u?.key===r,[u?.key,r]),f=o(()=>i.treeStore.map(e=>{let t=e.steps.find(e=>e.id===r);if(!t)throw Error(`Step with id "${r}" not found in the experience tree.`);return t}),[i,r]),p=o(()=>f.map(e=>e.name),[f]),m=o(()=>f.map(e=>e.fieldIds),[f]),h=o(()=>c({client:l,experienceInstance:i},r,p,m),[l,i,r,p,m]),g=s([]);a(()=>()=>{g.current.forEach(e=>e()),g.current=[]},[]);let _=o(()=>({...h.form,onBeforeSubmit:e=>{g.current.push(h.form.onBeforeSubmit(e))},onSuccess:e=>{g.current.push(h.form.onSuccess(e))},onError:e=>{g.current.push(h.form.onError(e))}}),[h]);return{step:f,fields:h.fields,isActive:d,isActiveStep:d,form:_}}export{l as StepContextProvider,d as useSetStepContext,u as useStep};

package/dist/router/Step.js

@@ -1 +1 @@
-import{useStepRouter as e}from"./context.js";import{StepContextProvider as t,useSetStepContext as n}from"../hooks/step.js";import{useEffect as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";var o=({id:o,component:s,children:c})=>{let l={id:o},{registerStep:u,unregisterStep:d}=e(),[f,p]=i(null),m=n(o);return r(()=>(u(l),()=>d(l)),[u,d,l]),r(()=>{s&&typeof s!=`function`?Promise.resolve(s).then(e=>{typeof e==`object`&&`default`in e?p(()=>e.default):p(()=>e)}):typeof s==`function`&&p(()=>s)},[s]),s?f?a(t.Provider,{value:m,children:a(f,{})}):null:a(t.Provider,{value:m,children:c})};export{o as default};
+import{useStepRouter as e}from"./context.js";import{StepContextProvider as t,useSetStepContext as n}from"../hooks/step.js";import{useEffect as r,useMemo as i,useState as a}from"react";import{jsx as o}from"react/jsx-runtime";function s({stepKey:s,id:c,component:l,children:u}){let d=s??c??``,f=i(()=>({id:d,key:d}),[d]),{registerStep:p,unregisterStep:m}=e(),h=i(()=>typeof l==`function`?l:null,[l]),[g,_]=a(null),v=n(d);r(()=>(p(f),()=>m(f)),[p,m,f]),r(()=>{l&&typeof l!=`function`&&Promise.resolve(l).then(e=>{typeof e==`object`&&`default`in e?_(()=>e.default):typeof e==`function`&&_(()=>e)})},[l]);let y=h??g;return l?y?o(t.Provider,{value:v,children:o(y,{})}):null:o(t.Provider,{value:v,children:u})}export{s as default};

package/dist/router/StepRouter.js

@@ -1 +1 @@
-import{useExperience as e}from"../hooks/client.js";import{StepRouterProvider as t}from"./context.js";import"../hooks/index.js";import{useCallback as n,useEffect as r,useRef as i,useState as a}from"react";import{supportsWindow as o}from"@picked/client";import{useUnit as s}from"effector-react";import{jsx as c}from"react/jsx-runtime";var l=({children:l})=>{let{currentStepStore:u}=e(),d=s(u),[f,p]=a(null),m=i(!1),[h,g]=a([]),_=n(e=>{if(o())g(t=>[...t,e]);else{if(m.current)return;e.id===d?.id&&(p(e),m.current=!0)}},[d?.id]),v=n(e=>{g(t=>t.filter(t=>t!==e))},[]);r(()=>{p(h.find(e=>e.id===d?.id)||null)},[h,d?.id]);let y={activeStep:f,registerStep:_,unregisterStep:v};return d?.id?c(t,{value:y,children:l}):null};export{l as default};
+import{useExperience as e}from"../hooks/client.js";import{StepRouterProvider as t}from"./context.js";import"../hooks/index.js";import{useCallback as n,useMemo as r,useRef as i,useState as a}from"react";import{supportsWindow as o}from"@picked/client";import{useUnit as s}from"effector-react";import{jsx as c}from"react/jsx-runtime";function l({children:l}){let{currentStepStore:u}=e(),d=s(u),f=i(!1),[p,m]=a([]),[h,g]=a(null),_=n(e=>{if(o())m(t=>[...t,e]);else{if(f.current)return;e.key===d?.key&&(g(e),f.current=!0)}},[d?.key]),v=n(e=>{m(t=>t.filter(t=>t!==e))},[]),y=r(()=>h??p.find(e=>e.key===d?.key)??null,[h,p,d?.key]),b=r(()=>({activeStep:y,registerStep:_,unregisterStep:v}),[y,_,v]);return d?.key?c(t,{value:b,children:l}):null}export{l as default};

package/dist/router/context.d.ts

@@ -1,5 +1,6 @@
 export interface Step {
     id: string;
+    key: string;
 }
 interface ContextOptions {
     activeStep?: Step | null;

package/dist/router/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/router/context.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAA;CACX;AAED,UAAU,cAAc;IACtB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,kBAAkB,iDAA6B,CAAA;AAE5D,eAAO,MAAM,aAAa,sBAOzB,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/router/context.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,UAAU,cAAc;IACtB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,kBAAkB,iDAA6B,CAAA;AAE5D,eAAO,MAAM,aAAa,sBAOzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/react",
-  "version": "0.0.1-dev.1774244905386",
+  "version": "0.0.1-dev.1774924249530",
   "devDependencies": {
     "@picked/client": "workspace:*",
     "@repo/eslint-config": "workspace:*",
@@ -76,11 +76,16 @@
       "jscpd",
       "eslint",
       "tsgo"
+    ],
+    "ignoreDependencies": [
+      "@picked/client",
+      "@repo/eslint-config",
+      "@repo/typescript-config"
     ]
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1774244905386",
+    "@picked/client": "0.0.1-dev.1774924249530",
     "effector": "^23.3.0",
     "effector-react": "^23.3.0",
     "react": "19.2.2",
@@ -100,7 +105,7 @@
     "lint:report": "eslint . -o './.reports/eslint.json' -f json || [ -f './.reports/eslint.json' ]",
     "size": "size-limit",
     "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "../../scripts/vitest-coverage.sh",
     "test:packaged-types": "attw --pack",
     "test:watch": "vitest",
     "type-check": "tsgo -p . --noEmit"