@picked/react 0.0.1-dev.1773807602703 → 0.0.1-dev.1773878362211

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'], 'onSubmit' | 'onSuccess' | 'onError'> & {
+        onSubmit: (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,CACtD,SAAQ,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IACjD,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC,GAAG;QACtF,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,IAAI,CAAA;QACvD,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,CAyCjF"}

package/dist/form/index.js

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

package/dist/hooks/client.d.ts

@@ -1,16 +1,16 @@
 import { ExperienceInstance, Picked } from '@picked/client';
 /**
- * Retrieves the Picked Client for the Experience Instance.
- * @returns The Picked client instance that provides access to experiences, steps, and other Picked functionality.
- * @example
- * const client = usePicked()
+ * Retrieves the Picked Client for the Experience Instance
+ *
+ * @returns The Picked client instance that provides access to experiences, steps, and other Picked functionality
  */
 export declare function usePicked(): Picked;
 /**
- * Retrieves the Experience Store for the current Experience Instance.
- * @returns The Experience store instance that provides access to experience configuration and state.
- * @example
- * const experience = useExperience()
+ * Retrieves the Experience Store for the current Experience Instance
+ *
+ * @returns The Experience store instance that provides access to experience configuration and state
  */
 export declare function useExperience(): ExperienceInstance;
+export declare const getPicked: typeof usePicked;
+export declare const getExperience: typeof useExperience;
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hooks/client.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGhE;;;;;GAKG;AACH,wBAAgB,SAAS,IAAI,MAAM,CAOlC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,CAOlD"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hooks/client.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGhE;;;;GAIG;AACH,wBAAgB,SAAS,IAAI,MAAM,CAOlC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,CAOlD;AAGD,eAAO,MAAM,SAAS,kBAAY,CAAA;AAClC,eAAO,MAAM,aAAa,sBAAgB,CAAA"}

package/dist/hooks/client.js

@@ -1 +1 @@
-import{useContext as t}from"react";import{ExperienceContext as r,ClientContext as n}from"../context.js";function u(){const e=t(n);if(!e)throw new Error("usePicked must be used within a ClientProvider");return e}function c(){const e=t(r);if(!e)throw new Error("useExperience must be used within an ExperienceProvider");return e}export{c as useExperience,u as usePicked};
+import{useContext as t}from"react";import{ExperienceContext as n,ClientContext as r}from"../context.js";function i(){const e=t(r);if(!e)throw new Error("usePicked must be used within a ClientProvider");return e}function o(){const e=t(n);if(!e)throw new Error("useExperience must be used within an ExperienceProvider");return e}const u=i,x=o;export{x as getExperience,u as getPicked,o as useExperience,i as usePicked};

package/dist/hooks/field.d.ts

@@ -4,5 +4,5 @@ export interface GetFieldResponse {
     value: Store<FieldValue>;
     field: Store<Field | null>;
 }
-export declare function getField(key: string): GetFieldResponse;
+export declare function getField(id: string): GetFieldResponse;
 //# sourceMappingURL=field.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/hooks/field.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGrC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IACxB,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAA;CAC3B;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAQtD"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/hooks/field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGrC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IACxB,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAA;CAC3B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,gBAAgB,CAQrD"}

package/dist/hooks/field.js

@@ -1 +1 @@
-import{usePicked as o}from"./client.js";function r(e){const t=o(),s=t.fields.getByKey(e),n=t.responses.getByFieldKey(e);return{field:s,value:n}}export{r as getField};
+import{getPicked as s}from"./client.js";function r(e){const t=s(),n=t.fields.getById(e),o=t.responses.getByFieldId(e);return{field:n,value:o}}export{r as getField};

package/dist/hooks/index.d.ts

@@ -1,10 +1,5 @@
-/**
- * @file Public re-exports for the hooks entry point.
- */
-export { usePicked, useExperience } from './client';
+export { usePicked, useExperience, getPicked, getExperience } from './client';
 export { useStep, useSetStepContext } from './step';
-export type { StepContext } from './step';
 export { useSessionStorage, useLocalStorage } from './storage';
-export type { UseStorageOptions } from './storage';
 export * from './field';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAC7E,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC9D,cAAc,SAAS,CAAA"}

package/dist/hooks/index.js

@@ -1 +1 @@
-import{useExperience as t,usePicked as r}from"./client.js";import{useSetStepContext as p,useStep as u}from"./step.js";import{useLocalStorage as S,useSessionStorage as f}from"./storage.js";import{getField as m}from"./field.js";export{m as getField,t as useExperience,S as useLocalStorage,r as usePicked,f as useSessionStorage,p as useSetStepContext,u as useStep};
+import{getExperience as o,getPicked as r,useExperience as p,usePicked as s}from"./client.js";import{useSetStepContext as i,useStep as u}from"./step.js";import{useLocalStorage as c,useSessionStorage as g}from"./storage.js";import{getField as m}from"./field.js";export{o as getExperience,m as getField,r as getPicked,p as useExperience,c as useLocalStorage,s as usePicked,g as useSessionStorage,i as useSetStepContext,u as useStep};

package/dist/hooks/step.d.ts

@@ -2,36 +2,21 @@ import { Field, Response } from '@picked/client';
 type FieldWithValue = Field & {
     value: Response | undefined;
 };
-interface StepWithLabel {
+type StepWithLabel = {
     id: string;
     label: string;
-}
+};
 export interface StepContext {
     step: StepWithLabel;
     fields: FieldWithValue[];
     isActiveStep?: boolean;
 }
 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()
- */
 export declare function useStep(): {
     step: StepWithLabel;
     fields: FieldWithValue[];
     isActiveStep: boolean;
 };
-/**
- * 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')
- */
 export declare function useSetStepContext(stepId: string): {
     step: StepWithLabel;
     fields: FieldWithValue[];

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,KAAK,EAAE,QAAQ,EAAoC,MAAM,gBAAgB,CAAA;AAMvF,KAAK,cAAc,GAAG,KAAK,GAAG;IAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,CAAA;AAC7D,KAAK,aAAa,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAOlD,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,wBAAgB,OAAO;;;;EAWtB;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM;;;;EA+F/C"}

package/dist/hooks/step.js

@@ -1 +1 @@
-import{createContext as y,useMemo as m,useContext as E}from"react";import{combine as S,attach as F,createEffect as P,createStore as R,sample as k}from"effector";import{evaluateRuleLogic as A}from"@picked/client";import{useUnit as g}from"effector-react";import{useStepRouter as K}from"../router/context.js";import{useExperience as _,usePicked as B}from"./client.js";const D=y(null);function G(){const t=E(D);if(!t)throw new Error("useStep must be used within a StepContextProvider");return{step:t.step,fields:t.fields,isActiveStep:t.isActiveStep??!1}}function H(t){const l=_(),s=B(),{activeStep:f}=K(),x=m(()=>f?.id===t,[f?.id,t]),{stepContext:v}=m(()=>{const C=l.treeStore.map(o=>o.steps),h=S(C,s.steps.listStore,(o,i)=>i.filter(c=>o.includes(c.id))),r=F({source:S({steps:h,fields:s.fields.listStore,responses:s.responses.listStore}),mapParams:(o,i)=>i,effect:P(async({steps:o,fields:i,responses:c})=>{const n=o.find(e=>e.id===t);if(!n)throw new Error(`Step with id "${t}" not found in the experience tree.`);const w=i.filter(e=>(n.fieldIds??[]).includes(e.id)),p=[];for(const e of w)e.condition?await A(s,e.condition)&&p.push(e):p.push(e);const a={};for(const e of c)a[e.fieldKey]=e;const b=p.map(e=>({...e,value:a[e.key]?.value}));return{step:{id:n.id,label:n.name??n.label},fields:b}})}),u=R({step:{id:t,label:""},fields:[]});return u.on(r.doneData,(o,i)=>i),k({clock:[s.fields.listStore,s.responses.listStore],target:r}),r(),{stepContextFx:r,stepContext:u}},[t,s,l]),d=g(v);return{step:d.step,fields:d.fields,isActiveStep:x}}export{D as StepContextProvider,H as useSetStepContext,G as useStep};
+import{createContext as w,useMemo as a,useContext as b}from"react";import{attach as E,createEffect as F,combine as R,createStore as A,sample as P}from"effector";import{evaluateRuleLogic as g}from"@picked/client";import{useUnit as k}from"effector-react";import{useStepRouter as y}from"../router/context.js";import{useExperience as D,usePicked as L}from"./client.js";const M=w(null);function B(){const e=b(M);if(!e)throw new Error("useStep must be used within a StepContextProvider");return{step:e.step,fields:e.fields,isActiveStep:e.isActiveStep??!1}}function G(e){const l=D(),s=L(),{activeStep:p}=y(),m=a(()=>p?.id===e,[p?.id,e]),{stepContext:S}=a(()=>{const o=E({source:R({steps:l.treeStore.map(i=>i.steps),fields:s.fields.listStore,responses:s.responses.listStore}),effect:F(async({steps:i,fields:r,responses:x})=>{const n=i.find(t=>t.id===e);if(!n)throw new Error(`Step with id "${e}" not found in the experience tree.`);const v=r.filter(t=>n.fieldIds.includes(t.id)),c=[];for(const t of v)t.condition?await g(s,t.condition)&&c.push(t):c.push(t);const C=c.map(t=>{const u=x.find(h=>h.fieldId===t.id)?.value;return{...t,value:u}});return{step:{id:n.id,label:n.label},fields:C}})}),f=A({step:{id:e,label:""},fields:[]});return f.on(o.doneData,(i,r)=>r),P({clock:[s.fields.listStore,s.responses.listStore],target:o}),o(),{stepContextFx:o,stepContext:f}},[e,s,l]),d=k(S);return{step:d?.step,fields:d?.fields||[],isActiveStep:m}}export{M as StepContextProvider,G as useSetStepContext,B as useStep};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/react",
-  "version": "0.0.1-dev.1773807602703",
+  "version": "0.0.1-dev.1773878362211",
   "devDependencies": {
     "@picked/client": "workspace:*",
     "@repo/eslint-config": "workspace:*",
@@ -59,33 +59,16 @@
     "dist"
   ],
   "knip": {
-    "entry": [
-      "src/index.ts",
-      "src/server/index.ts",
-      "src/router/index.ts",
-      "src/form/index.ts",
-      "src/hooks/index.ts",
-      "src/plugins/framework/index.ts"
-    ],
-    "ignore": [
-      "eslint.config.js"
-    ],
     "ignoreBinaries": [
-      "attw",
       "knip",
       "jscpd",
       "eslint",
       "tsc"
-    ],
-    "ignoreDependencies": [
-      "@picked/client",
-      "@repo/eslint-config",
-      "@repo/typescript-config"
     ]
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1773807602703",
+    "@picked/client": "0.0.1-dev.1773878362211",
     "effector": "^23.3.0",
     "effector-react": "^23.3.0",
     "react": "19.2.2",