@picked/react 0.0.1-dev.1776223485600 → 0.0.1-dev.1776231725998
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/form/index.d.ts +22 -13
- package/dist/form/index.d.ts.map +1 -1
- package/dist/form/index.js +1 -1
- package/dist/hooks/feature.d.ts +25 -0
- package/dist/hooks/feature.d.ts.map +1 -0
- package/dist/hooks/feature.js +1 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/step.d.ts +5 -4
- package/dist/hooks/step.d.ts.map +1 -1
- package/dist/hooks/step.js +1 -1
- package/package.json +2 -2
package/dist/form/index.d.ts
CHANGED
|
@@ -1,28 +1,37 @@
|
|
|
1
|
+
import { FormEvent } from 'react';
|
|
1
2
|
import { FormInstance as CoreFormInstance, ErrorCallback, SubmitCallback, SuccessCallback } from '@picked/client/form';
|
|
2
3
|
interface UseFormOptions {
|
|
3
4
|
formId: string;
|
|
4
5
|
title: string;
|
|
5
|
-
|
|
6
|
+
fieldKeys: string[];
|
|
6
7
|
}
|
|
7
8
|
/**
|
|
8
|
-
* React FormInstance — identical to core but
|
|
9
|
-
* (cleanup is
|
|
9
|
+
* React FormInstance — identical to core but with React-compatible form props
|
|
10
|
+
* and callback registration that returns void (cleanup is automatic via useEffect).
|
|
10
11
|
*/
|
|
11
|
-
interface FormInstance<
|
|
12
|
-
form: Omit<CoreFormInstance<
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
interface FormInstance<TFieldKeys extends string = string> extends Omit<CoreFormInstance<TFieldKeys>, 'form'> {
|
|
13
|
+
form: Omit<CoreFormInstance<TFieldKeys>['form'], 'onBeforeSubmit' | 'onSuccess' | 'onError' | 'props'> & {
|
|
14
|
+
props: {
|
|
15
|
+
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
16
|
+
};
|
|
17
|
+
onBeforeSubmit: (callback: SubmitCallback<TFieldKeys>) => void;
|
|
18
|
+
onSuccess: (callback: SuccessCallback<TFieldKeys>) => void;
|
|
15
19
|
onError: (callback: ErrorCallback) => void;
|
|
16
20
|
};
|
|
17
21
|
}
|
|
18
22
|
/**
|
|
19
|
-
* React hook wrapping the framework-agnostic createForm from
|
|
23
|
+
* React hook wrapping the framework-agnostic createForm from `@picked/client/form`.
|
|
20
24
|
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
+
* Injects client and experienceInstance from React context, collects unsubscribe
|
|
26
|
+
* functions from callback registration, and cleans them up on unmount.
|
|
27
|
+
*
|
|
28
|
+
* @param {UseFormOptions} root0 - Form configuration options.
|
|
29
|
+
* @param {string} root0.formId - Unique identifier for this form instance.
|
|
30
|
+
* @param {string} root0.title - The form/step title.
|
|
31
|
+
* @param {string[]} root0.fieldKeys - Field keys that belong to this form.
|
|
32
|
+
* @returns {FormInstance} A form instance with reactive field stores and callback registration.
|
|
33
|
+
* @example useForm({ formId: 'lead-capture', title: 'Contact', fieldKeys: ['email', 'name'] })
|
|
25
34
|
*/
|
|
26
|
-
export declare function useForm({ formId, title,
|
|
35
|
+
export declare function useForm({ formId, title, fieldKeys }: UseFormOptions): FormInstance;
|
|
27
36
|
export {};
|
|
28
37
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/form/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,EAEL,KAAK,YAAY,IAAI,gBAAgB,EACrC,KAAK,aAAa,EAClB,KAAK,cAAc,EAEnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAc5B,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAED;;;GAGG;AACH,UAAU,YAAY,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CACrE,gBAAgB,CAAC,UAAU,CAAC,EAC5B,MAAM,CACP;IACC,IAAI,EAAE,IAAI,CACR,gBAAgB,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EACpC,gBAAgB,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CACrD,GAAG;QACF,KAAK,EAAE;YACL,QAAQ,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;SAClD,CAAA;QACD,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;CACF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,cAAc,GAAG,YAAY,CAgDlF"}
|
package/dist/form/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
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:
|
|
1
|
+
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(e){return`submitter`in e&&e.currentTarget instanceof HTMLFormElement}function c({formId:c,title:l,fieldKeys:u}){let d=t(),f=e(),p=r(()=>a(l),[l]),m=r(()=>a(u),[u]),h=r(()=>o({client:d,experienceInstance:f},c,p,m),[d,f,c,p,m]),g=i([]);return n(()=>()=>{g.current.forEach(e=>e()),g.current=[]},[]),{form:r(()=>({...h.form,props:{onSubmit:e=>{e.preventDefault(),s(e.nativeEvent)&&h.form.props.onsubmit(e.nativeEvent)}},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]),fields:h.fields}}export{c as useForm};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
type FeatureBucket = boolean | string | undefined;
|
|
2
|
+
interface FeatureResult {
|
|
3
|
+
id: string;
|
|
4
|
+
bucket: string | boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Returns the current evokable feature function, reactive to store updates.
|
|
8
|
+
*
|
|
9
|
+
* @param {string} featureName - The name of the feature to retrieve.
|
|
10
|
+
* @returns {() => Promise<FeatureBucket>} The evokable feature function.
|
|
11
|
+
* @example
|
|
12
|
+
* const evoke = useFeature('my-feature')
|
|
13
|
+
*/
|
|
14
|
+
export declare function useFeature(featureName: string): () => Promise<FeatureBucket>;
|
|
15
|
+
/**
|
|
16
|
+
* Returns an Effector store that resolves to the feature's evaluated bucket result.
|
|
17
|
+
*
|
|
18
|
+
* @param {string} featureName - The name of the feature to evaluate.
|
|
19
|
+
* @returns {FeatureResult | undefined} The current feature evaluation result, reactive to store updates.
|
|
20
|
+
* @example
|
|
21
|
+
* const result = useFeatureResult('my-feature')
|
|
22
|
+
*/
|
|
23
|
+
export declare function useFeatureResult(featureName: string): FeatureResult | undefined;
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=feature.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"feature.d.ts","sourceRoot":"","sources":["../../src/hooks/feature.ts"],"names":[],"mappings":"AAQA,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjD,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB;AAgBD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,OAAO,CAAC,aAAa,CAAC,CAE5E;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CA0C/E"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{usePicked as e}from"./client.js";import{attach as t,createEffect as n,createEvent as r,createStore as i,sample as a}from"effector";import{useUnit as o}from"effector-react";function s(t){return e().features.getEvokableFeature(t)}function c(e){return o(s(e))}function l(e){let c=s(e),l=i(void 0,{skipVoid:!1}),u=r(),d=t({source:c,mapParams:(e,t)=>t,effect:n(async e=>await e())});return a({clock:u,target:d}),a({clock:d.doneData,fn:t=>{if(t!==void 0)return{id:e,bucket:t}},target:l}),u(),a({clock:c,target:u}),o(l)}export{c as useFeature,l as useFeatureResult};
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -8,4 +8,5 @@ export type { StepContext } from './step';
|
|
|
8
8
|
export { useSessionStorage, useLocalStorage } from './storage';
|
|
9
9
|
export type { UseStorageOptions } from './storage';
|
|
10
10
|
export * from './field';
|
|
11
|
+
export { useFeature, useFeatureResult } from './feature';
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AACjG,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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AACjG,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;AACvB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA"}
|
package/dist/hooks/index.js
CHANGED
|
@@ -1 +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";export{e as ClientContext,t as ClientProvider,n as ExperienceContext,r as ExperienceProvider,u as getField,i as useExperience,c as useLocalStorage,a as usePicked,l as useSessionStorage,o as useSetStepContext,s as useStep};
|
|
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};
|
package/dist/hooks/step.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FormEvent } from 'react';
|
|
2
|
+
import { Store } from 'effector';
|
|
2
3
|
import { ExperienceStep, ValidationError } from '@picked/client';
|
|
3
|
-
import { FormField, ErrorCallback, SubmitCallback,
|
|
4
|
+
import { FormField, ErrorCallback, SubmitCallback, SuccessCallback } from '@picked/client/form';
|
|
4
5
|
export interface StepContext {
|
|
5
6
|
step: Store<ExperienceStep>;
|
|
6
7
|
/** Reactive store of fields with current values, errors, touched state, and event handlers. */
|
|
@@ -9,9 +10,9 @@ export interface StepContext {
|
|
|
9
10
|
/** @deprecated Use `isActive` instead. */
|
|
10
11
|
isActiveStep: boolean;
|
|
11
12
|
form: {
|
|
12
|
-
/**
|
|
13
|
+
/** React-compatible attributes to spread onto a <form> element. */
|
|
13
14
|
props: {
|
|
14
|
-
|
|
15
|
+
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
15
16
|
};
|
|
16
17
|
/** Flat list of all current validation errors. */
|
|
17
18
|
errors: Store<ValidationError[]>;
|
package/dist/hooks/step.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,OAAO,EAAyD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7F,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,cAAc,EAEnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAe5B,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,mEAAmE;QACnE,KAAK,EAAE;YACL,QAAQ,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;SAClD,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,OAAO,EAAE,MAAM,GAAG,WAAW,CA0E9D"}
|
package/dist/hooks/step.js
CHANGED
|
@@ -1 +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,useEffect as a,useMemo as o,useRef as s}from"react";import{createForm as c}from"@picked/client/form";var
|
|
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,useEffect as a,useMemo as o,useRef as s}from"react";import{createForm as c}from"@picked/client/form";function l(e){return`submitter`in e&&e.currentTarget instanceof HTMLFormElement}var u=r(null);function d(){let e=i(u);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return e}function f(r){let i=e(),u=t(),{activeStep:d}=n(),f=o(()=>d?.key===r,[d?.key,r]),p=o(()=>i.treeStore.map(e=>{let t=e.steps.find(e=>e.key===r);if(!t)throw Error(`Step with key "${r}" not found in the experience tree.`);return t}),[i,r]),m=o(()=>p.map(e=>e.name),[p]),h=o(()=>p.map(e=>e.fieldKeys),[p]),g=o(()=>c({client:u,experienceInstance:i},r,m,h),[u,i,r,m,h]),_=s([]);a(()=>()=>{_.current.forEach(e=>e()),_.current=[]},[]);let v=o(()=>({...g.form,props:{onSubmit:e=>{e.preventDefault(),l(e.nativeEvent)&&g.form.props.onsubmit(e.nativeEvent)}},onBeforeSubmit:e=>{_.current.push(g.form.onBeforeSubmit(e))},onSuccess:e=>{_.current.push(g.form.onSuccess(e))},onError:e=>{_.current.push(g.form.onError(e))}}),[g]);return{step:p,fields:g.fields,isActive:f,isActiveStep:f,form:v}}export{u as StepContextProvider,f as useSetStepContext,d as useStep};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@picked/react",
|
|
3
|
-
"version": "0.0.1-dev.
|
|
3
|
+
"version": "0.0.1-dev.1776231725998",
|
|
4
4
|
"devDependencies": {
|
|
5
5
|
"@picked/client": "workspace:*",
|
|
6
6
|
"@repo/eslint-config": "workspace:*",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
},
|
|
86
86
|
"module": "./dist/index.js",
|
|
87
87
|
"peerDependencies": {
|
|
88
|
-
"@picked/client": "0.0.1-dev.
|
|
88
|
+
"@picked/client": "0.0.1-dev.1776231725998",
|
|
89
89
|
"effector": "^23.3.0",
|
|
90
90
|
"effector-react": "^23.3.0",
|
|
91
91
|
"react": "19.2.2",
|