@picked/react 0.0.1-dev.1776647091821 → 0.0.1-dev.1776662399138

package/dist/form/index.d.ts

@@ -1,25 +1,37 @@
-import { ReactFormInstance } from './use-react-form';
-interface UseFormOptions {
-    formId: string;
-    title: string;
-    fieldKeys: string[];
+import { FormEvent } from 'react';
+import { Store } from 'effector';
+import { ErrorCallback, FormInstance as CoreFormInstance, SubmitCallback, SuccessCallback } from '@picked/client/form';
+import { ReactFormField } from '../utils/map-field-to-react';
+export interface FormInstance {
+    form: {
+        props: {
+            onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+        };
+        errors: CoreFormInstance['form']['errors'];
+        submitting: CoreFormInstance['form']['submitting'];
+        onBeforeSubmit: (callback: SubmitCallback) => () => void;
+        onSuccess: (callback: SuccessCallback) => () => void;
+        onError: (callback: ErrorCallback) => () => void;
+    };
+    fields: Store<ReactFormField[]>;
 }
-export type FormInstance<TFieldKeys extends string = string> = ReactFormInstance<TFieldKeys>;
 /**
- * React hook wrapping the framework-agnostic createForm from `@picked/client/form`.
+ * React hook mirroring Svelte's `createForm`: accepts reactive stores for
+ * `title` and `fieldKeys` and returns a React-adapted form instance.
  *
- * Creates the underlying Effector graph once per hook lifetime: `title` and
- * `fieldKeys` prop changes flow through events into stable stores, so the core
- * form is not rebuilt on every render when callers pass inline values.
- * Callback registration returns void — cleanup runs automatically on unmount.
+ * The form is a stateful object (typed values, errors, subscribers) whose
+ * lifetime is the hook instance, not the render — so `title` and `fieldKeys`
+ * are stores (reactive access over time) rather than values (snapshots).
  *
- * @param {UseFormOptions} options - Form configuration.
- * @param {string} options.formId - Stable identifier for the form.
- * @param {string} options.title - Human-readable form title.
- * @param {string[]} options.fieldKeys - Field keys the form submits.
- * @returns {FormInstance} Form with React submit handler, mapped fields, and auto-cleanup callbacks.
- * @example useForm({ formId: 'f1', title: 'Feedback', fieldKeys: ['rating'] })
+ * `onBeforeSubmit` / `onSuccess` / `onError` return the core unsubscribe so
+ * callers can register inside `useEffect` with standard React cleanup:
+ * `useEffect(() => form.onBeforeSubmit(handler), [form, handler])`.
+ *
+ * @param {string} formId - Stable identifier for the form.
+ * @param {Store<string>} title - Store holding the form/step title.
+ * @param {Store<string[]>} fieldKeys - Store of field keys belonging to this form.
+ * @returns {FormInstance} React form with submit handler, mapped fields, and subscribable callbacks.
+ * @example const { form, fields } = useForm(stepKey, nameStore, fieldKeysStore)
  */
-export declare function useForm({ formId, title, fieldKeys }: UseFormOptions): FormInstance;
-export {};
+export declare function useForm(formId: string, title: Store<string>, fieldKeys: Store<string[]>): FormInstance;
 //# 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":"AAKA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEvE,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,MAAM,YAAY,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAAC,UAAU,CAAC,CAAA;AAE5F;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,cAAc,GAAG,YAAY,CAgClF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,IAAI,gBAAgB,EACrC,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAGlF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,QAAQ,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;SAClD,CAAA;QACD,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAA;QAC1C,UAAU,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAA;QAClD,cAAc,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,MAAM,IAAI,CAAA;QACxD,SAAS,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,MAAM,IAAI,CAAA;QACpD,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,MAAM,IAAI,CAAA;KACjD,CAAA;IACD,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;CAChC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EACpB,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,GACzB,YAAY,CAgCd"}

package/dist/form/index.js

@@ -1 +1 @@
-import{useExperience as e,usePicked as t}from"../hooks/client.js";import{useReactForm as n}from"./use-react-form.js";import"../hooks/index.js";import{useEffect as r,useMemo as i}from"react";import{createEvent as a,createStore as o}from"effector";import{createForm as s}from"@picked/client/form";function c({formId:c,title:l,fieldKeys:u}){let d=t(),f=e(),[p,m]=i(()=>{let e=a();return[o(l).on(e,(e,t)=>t),e]},[]),[h,g]=i(()=>{let e=a();return[o(u).on(e,(e,t)=>t),e]},[]);return r(()=>{m(l)},[m,l]),r(()=>{g(u)},[g,u.join(`\0`),u]),n(i(()=>s({client:d,experienceInstance:f},c,p,h),[d,f,c,p,h]))}export{c as useForm};
+import{useExperience as e,usePicked as t}from"../hooks/client.js";import{mapFieldToReact as n}from"../utils/map-field-to-react.js";import{prepareNativeEvent as r}from"../utils/prepare-native-event.js";import{useMemo as i}from"react";import{createForm as a}from"@picked/client/form";function o(o,s,c){let l=t(),u=e(),d=i(()=>a({client:l,experienceInstance:u},o,s,c),[l,u,o,s,c]),f=i(()=>d.fields.map(e=>e.map(n)),[d]);return{form:i(()=>({errors:d.form.errors,submitting:d.form.submitting,props:{onSubmit:e=>{e.preventDefault(),r(e.nativeEvent,e.currentTarget),d.form.props.onsubmit(e.nativeEvent)}},onBeforeSubmit:e=>d.form.onBeforeSubmit(e),onSuccess:e=>d.form.onSuccess(e),onError:e=>d.form.onError(e)}),[d]),fields:f}}export{o as useForm};

package/dist/hooks/index.js

@@ -1 +1 @@
-import{ClientContext as e,ClientProvider as t,ExperienceContext as n,ExperienceProvider as r}from"../context.js";import{useExperience as i,usePicked as a}from"./client.js";import{useSetStepContext as o,useStep as s}from"./step.js";import{useLocalStorage as c,useSessionStorage as l}from"./storage.js";import{getField as u}from"./field.js";import{useFeature as d,useFeatureResult as f}from"./feature.js";export{e as ClientContext,t as ClientProvider,n as ExperienceContext,r as ExperienceProvider,u as getField,i as useExperience,d as useFeature,f as useFeatureResult,c as useLocalStorage,a as usePicked,l as useSessionStorage,o as useSetStepContext,s as useStep};
+import{ClientContext as e,ClientProvider as t,ExperienceContext as n,ExperienceProvider as r}from"../context.js";import{useExperience as i,usePicked as a}from"./client.js";import{useFeature as o,useFeatureResult as s}from"./feature.js";import{getField as c}from"./field.js";import{useSetStepContext as l,useStep as u}from"./step.js";import{useLocalStorage as d,useSessionStorage as f}from"./storage.js";export{e as ClientContext,t as ClientProvider,n as ExperienceContext,r as ExperienceProvider,c as getField,i as useExperience,o as useFeature,s as useFeatureResult,d as useLocalStorage,a as usePicked,f as useSessionStorage,l as useSetStepContext,u as useStep};

package/dist/hooks/step.d.ts

@@ -1,6 +1,6 @@
 import { Store } from 'effector';
 import { ExperienceStep } from '@picked/client';
-import { ReactFormInstance } from '../form/use-react-form';
+import { FormInstance } from '../form';
 import { ReactFormField } from '../utils/map-field-to-react';
 export interface StepContext {
     step: Store<ExperienceStep>;
@@ -9,7 +9,7 @@ export interface StepContext {
     isActive: boolean;
     /** @deprecated Use `isActive` instead. */
     isActiveStep: boolean;
-    form: ReactFormInstance['form'];
+    form: FormInstance['form'];
 }
 export declare const StepContextProvider: import('react').Context<StepContext | null>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAGjE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC3B,kFAAkF;IAClF,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;IAC/B,QAAQ,EAAE,OAAO,CAAA;IACjB,0CAA0C;IAC1C,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;CAChC;AAED,eAAO,MAAM,mBAAmB,6CAA0C,CAAA;AAE1E;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,WAAW,CAOrC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,CAwC9D"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAGjE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC3B,kFAAkF;IAClF,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;IAC/B,QAAQ,EAAE,OAAO,CAAA;IACjB,0CAA0C;IAC1C,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;CAC3B;AAED,eAAO,MAAM,mBAAmB,6CAA0C,CAAA;AAE1E;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,WAAW,CAOrC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,CAyC9D"}

package/dist/hooks/step.js

@@ -1 +1 @@
-import{useExperience as e,usePicked as t}from"./client.js";import{useReactForm as n}from"../form/use-react-form.js";import{useStepRouter as r}from"../router/context.js";import{createContext as i,useContext as a,useMemo as o}from"react";import{createForm as s}from"@picked/client/form";var c=i(null);function l(){let e=a(c);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return e}function u(i){let a=e(),c=t(),{activeStep:l}=r(),u=o(()=>l?.key===i,[l?.key,i]),d=o(()=>a.treeStore.map(e=>e.steps.find(e=>e.key===i)??{id:i,key:i,name:``,fieldKeys:[]}),[a,i]),f=o(()=>d.map(e=>e.name),[d]),p=o(()=>d.map(e=>e.fieldKeys),[d]),{form:m,fields:h}=n(o(()=>s({client:c,experienceInstance:a},i,f,p),[c,a,i,f,p]));return{step:d,fields:h,isActive:u,isActiveStep:u,form:m}}export{c as StepContextProvider,u as useSetStepContext,l as useStep};
+import{useExperience as e}from"./client.js";import{useForm as t}from"../form/index.js";import{useStepRouter as n}from"../router/context.js";import{createContext as r,useContext as i,useMemo as a}from"react";var o=r(null);function s(){let e=i(o);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return e}function c(r){let i=e(),{activeStep:o}=n(),s=a(()=>o?.key===r,[o?.key,r]),c=a(()=>i.treeStore.map(e=>e.steps.find(e=>e.key===r)??{id:r,key:r,name:``,fieldKeys:[]},{skipVoid:!1}),[i,r]),{form:l,fields:u}=t(r,a(()=>c.map(e=>e.name,{skipVoid:!1}),[c]),a(()=>c.map(e=>e.fieldKeys,{skipVoid:!1}),[c]));return{step:c,fields:u,isActive:s,isActiveStep:s,form:l}}export{o as StepContextProvider,c as useSetStepContext,s as useStep};

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,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};
+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{useUnit as o}from"effector-react";import{supportsWindow as s}from"@picked/client";import{jsx as c}from"react/jsx-runtime";function l({children:l}){let{currentStepStore:u}=e(),d=o(u),f=i(!1),[p,m]=a([]),[h,g]=a(null),_=n(e=>{if(s())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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/react",
-  "version": "0.0.1-dev.1776647091821",
+  "version": "0.0.1-dev.1776662399138",
   "devDependencies": {
     "@picked/client": "workspace:*",
     "@repo/eslint-config": "workspace:*",
@@ -85,7 +85,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1776647091821",
+    "@picked/client": "0.0.1-dev.1776662399138",
     "effector": "^23.3.0",
     "effector-react": "^23.3.0",
     "react": "19.2.2",

package/dist/form/use-react-form.d.ts

@@ -1,33 +0,0 @@
-import { FormEvent } from 'react';
-import { Store } from 'effector';
-import { ErrorCallback, FormInstance as CoreFormInstance, SubmitCallback, SuccessCallback } from '@picked/client/form';
-import { ReactFormField } from '../utils/map-field-to-react';
-export interface ReactFormInstance<TFieldKeys extends string = string> {
-    form: {
-        props: {
-            onSubmit: (e: FormEvent<HTMLFormElement>) => void;
-        };
-        errors: CoreFormInstance<TFieldKeys>['form']['errors'];
-        submitting: CoreFormInstance<TFieldKeys>['form']['submitting'];
-        onBeforeSubmit: (callback: SubmitCallback<TFieldKeys>) => void;
-        onSuccess: (callback: SuccessCallback<TFieldKeys>) => void;
-        onError: (callback: ErrorCallback) => void;
-    };
-    fields: Store<ReactFormField[]>;
-}
-/**
- * Wraps a core FormInstance for React consumption.
- *
- * - `form.props.onSubmit` accepts a React FormEvent and forwards the native
- *   event to core after restoring currentTarget.
- * - `fields` exposes camelCase React handlers via mapFieldToReact.
- * - onBeforeSubmit/onSuccess/onError collect unsubscribes scoped to the
- *   current core; cleanup runs on core change and on unmount so subscriptions
- *   on a previous core do not leak.
- *
- * @param {CoreFormInstance} core - Framework-agnostic form instance to adapt.
- * @returns {ReactFormInstance} React-adapted form with camelCase fields and auto-cleanup.
- * @example const { form, fields } = useReactForm(core)
- */
-export declare function useReactForm<TFieldKeys extends string = string>(core: CoreFormInstance<TFieldKeys>): ReactFormInstance<TFieldKeys>;
-//# sourceMappingURL=use-react-form.d.ts.map

package/dist/form/use-react-form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-react-form.d.ts","sourceRoot":"","sources":["../../src/form/use-react-form.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,OAAO,EAAE,KAAK,SAAS,EAA8B,MAAM,OAAO,CAAA;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EACV,aAAa,EACb,YAAY,IAAI,gBAAgB,EAChC,cAAc,EACd,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAGlF,MAAM,WAAW,iBAAiB,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM;IACnE,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,QAAQ,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;SAClD,CAAA;QACD,MAAM,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAA;QACtD,UAAU,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAA;QAC9D,cAAc,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;QAC9D,SAAS,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;QAC1D,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;KAC3C,CAAA;IACD,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;CAChC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,EAC7D,IAAI,EAAE,gBAAgB,CAAC,UAAU,CAAC,GACjC,iBAAiB,CAAC,UAAU,CAAC,CAsC/B"}

package/dist/form/use-react-form.js

@@ -1 +0,0 @@
-import{mapFieldToReact as e}from"../utils/map-field-to-react.js";import{prepareNativeEvent as t}from"../utils/prepare-native-event.js";import{useEffect as n,useMemo as r,useRef as i}from"react";function a(a){let o=i([]);n(()=>()=>{let e=o.current;o.current=[];for(let t of e)t()},[a]);let s=r(()=>a.fields.map(t=>t.map(e)),[a]);return{form:r(()=>({errors:a.form.errors,submitting:a.form.submitting,props:{onSubmit:e=>{t(e.nativeEvent,e.currentTarget),e.preventDefault(),a.form.props.onsubmit(e.nativeEvent)}},onBeforeSubmit:e=>{o.current.push(a.form.onBeforeSubmit(e))},onSuccess:e=>{o.current.push(a.form.onSuccess(e))},onError:e=>{o.current.push(a.form.onError(e))}}),[a]),fields:s}}export{a as useReactForm};