@picked/react 0.0.1-dev.1774231221701 → 0.0.1-dev.1774244905386
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 +11 -23
- package/dist/form/index.d.ts.map +1 -1
- package/dist/form/index.js +1 -1
- package/dist/hooks/client.d.ts +8 -8
- package/dist/hooks/client.d.ts.map +1 -1
- package/dist/hooks/client.js +1 -1
- package/dist/hooks/field.d.ts +1 -1
- package/dist/hooks/field.d.ts.map +1 -1
- package/dist/hooks/field.js +1 -1
- package/dist/hooks/index.d.ts +6 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/step.d.ts +17 -2
- package/dist/hooks/step.d.ts.map +1 -1
- package/dist/hooks/step.js +1 -1
- package/package.json +14 -2
package/dist/form/index.d.ts
CHANGED
|
@@ -1,28 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
interface
|
|
3
|
-
|
|
1
|
+
import { ValidationError } from '@picked/client';
|
|
2
|
+
interface GetFormOptions {
|
|
3
|
+
id: string;
|
|
4
4
|
title: string;
|
|
5
|
-
|
|
5
|
+
onSuccess?: () => void | Promise<void>;
|
|
6
|
+
onError?: (errors: ValidationError[]) => void | Promise<void>;
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
form: Omit<CoreFormInstance<TFieldIds>['form'], 'onSubmit' | 'onSuccess' | 'onError'> & {
|
|
13
|
-
onSubmit: (callback: SubmitCallback<TFieldIds>) => void;
|
|
14
|
-
onSuccess: (callback: SuccessCallback<TFieldIds>) => void;
|
|
15
|
-
onError: (callback: ErrorCallback) => void;
|
|
8
|
+
export declare function useForm(options: GetFormOptions): {
|
|
9
|
+
form: {
|
|
10
|
+
onsubmit: (event: SubmitEvent & {
|
|
11
|
+
currentTarget: EventTarget & HTMLFormElement;
|
|
12
|
+
}) => Promise<void>;
|
|
16
13
|
};
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* React hook wrapping the framework-agnostic createForm from @picked/client/form.
|
|
20
|
-
*
|
|
21
|
-
* - Injects client and experienceInstance from React context
|
|
22
|
-
* - Collects unsubscribe functions from callback registration and cleans them
|
|
23
|
-
* up on unmount via a single useEffect
|
|
24
|
-
* - Consumer DX: `form.onSuccess(cb)` — no hooks or lifecycle awareness needed
|
|
25
|
-
*/
|
|
26
|
-
export declare function useForm({ formId, title, fieldIds }: UseFormOptions): FormInstance;
|
|
14
|
+
};
|
|
27
15
|
export {};
|
|
28
16
|
//# 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,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"}
|
package/dist/form/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useExperience as e,usePicked as t}from"../hooks/client.js";import"../hooks/index.js";
|
|
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};
|
package/dist/hooks/client.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { ExperienceInstance, Picked } from '@picked/client';
|
|
2
2
|
/**
|
|
3
|
-
* Retrieves the Picked Client for the Experience Instance
|
|
4
|
-
*
|
|
5
|
-
* @
|
|
3
|
+
* Retrieves the Picked Client for the Experience Instance.
|
|
4
|
+
* @returns The Picked client instance that provides access to experiences, steps, and other Picked functionality.
|
|
5
|
+
* @example
|
|
6
|
+
* const client = usePicked()
|
|
6
7
|
*/
|
|
7
8
|
export declare function usePicked(): Picked;
|
|
8
9
|
/**
|
|
9
|
-
* Retrieves the Experience Store for the current Experience Instance
|
|
10
|
-
*
|
|
11
|
-
* @
|
|
10
|
+
* Retrieves the Experience Store for the current Experience Instance.
|
|
11
|
+
* @returns The Experience store instance that provides access to experience configuration and state.
|
|
12
|
+
* @example
|
|
13
|
+
* const experience = useExperience()
|
|
12
14
|
*/
|
|
13
15
|
export declare function useExperience(): ExperienceInstance;
|
|
14
|
-
export declare const getPicked: typeof usePicked;
|
|
15
|
-
export declare const getExperience: typeof useExperience;
|
|
16
16
|
//# sourceMappingURL=client.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hooks/client.ts"],"names":[],"mappings":"
|
|
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"}
|
package/dist/hooks/client.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ClientContext as e,ExperienceContext as t}from"../context.js";import{useContext as n}from"react";function r(){let t=n(e);if(!t)throw Error(`usePicked must be used within a ClientProvider`);return t}function i(){let e=n(t);if(!e)throw Error(`useExperience must be used within an ExperienceProvider`);return e}
|
|
1
|
+
import{ClientContext as e,ExperienceContext as t}from"../context.js";import{useContext as n}from"react";function r(){let t=n(e);if(!t)throw Error(`usePicked must be used within a ClientProvider`);return t}function i(){let e=n(t);if(!e)throw Error(`useExperience must be used within an ExperienceProvider`);return e}export{i as useExperience,r as usePicked};
|
package/dist/hooks/field.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
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"}
|
package/dist/hooks/field.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{usePicked as e}from"./client.js";function t(t){let n=e();return{field:n.fields.getByKey(t),value:n.responses.getByFieldKey(t)}}export{t as getField};
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @file Public re-exports for the hooks entry point.
|
|
3
|
+
*/
|
|
4
|
+
export { usePicked, useExperience } from './client';
|
|
2
5
|
export { useStep, useSetStepContext } from './step';
|
|
6
|
+
export type { StepContext } from './step';
|
|
3
7
|
export { useSessionStorage, useLocalStorage } from './storage';
|
|
8
|
+
export type { UseStorageOptions } from './storage';
|
|
4
9
|
export * from './field';
|
|
5
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,
|
|
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"}
|
package/dist/hooks/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{useExperience as e,usePicked as t}from"./client.js";import{useSetStepContext as n,useStep as r}from"./step.js";import{useLocalStorage as i,useSessionStorage as a}from"./storage.js";import{getField as o}from"./field.js";export{o as getField,e as useExperience,i as useLocalStorage,t as usePicked,a as useSessionStorage,n as useSetStepContext,r as useStep};
|
package/dist/hooks/step.d.ts
CHANGED
|
@@ -2,21 +2,36 @@ import { Field, Response } from '@picked/client';
|
|
|
2
2
|
type FieldWithValue = Field & {
|
|
3
3
|
value: Response | undefined;
|
|
4
4
|
};
|
|
5
|
-
|
|
5
|
+
interface StepWithLabel {
|
|
6
6
|
id: string;
|
|
7
7
|
label: string;
|
|
8
|
-
}
|
|
8
|
+
}
|
|
9
9
|
export interface StepContext {
|
|
10
10
|
step: StepWithLabel;
|
|
11
11
|
fields: FieldWithValue[];
|
|
12
12
|
isActiveStep?: boolean;
|
|
13
13
|
}
|
|
14
14
|
export declare const StepContextProvider: import('react').Context<StepContext | null>;
|
|
15
|
+
/**
|
|
16
|
+
* Returns the current step context, including step metadata and evaluated fields.
|
|
17
|
+
* Must be used within a component wrapped by `StepContextProvider`.
|
|
18
|
+
* @returns The step, its evaluated fields, and whether this is the active step.
|
|
19
|
+
* @example
|
|
20
|
+
* const { step, fields, isActiveStep } = useStep()
|
|
21
|
+
*/
|
|
15
22
|
export declare function useStep(): {
|
|
16
23
|
step: StepWithLabel;
|
|
17
24
|
fields: FieldWithValue[];
|
|
18
25
|
isActiveStep: boolean;
|
|
19
26
|
};
|
|
27
|
+
/**
|
|
28
|
+
* Creates and returns step context stores for the given step ID.
|
|
29
|
+
* Evaluates field conditions reactively whenever fields or responses change.
|
|
30
|
+
* @param stepId - The ID of the step to set context for.
|
|
31
|
+
* @returns The step metadata, evaluated fields, and active step indicator.
|
|
32
|
+
* @example
|
|
33
|
+
* const { step, fields, isActiveStep } = useSetStepContext('step-123')
|
|
34
|
+
*/
|
|
20
35
|
export declare function useSetStepContext(stepId: string): {
|
|
21
36
|
step: StepWithLabel;
|
|
22
37
|
fields: FieldWithValue[];
|
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":"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"}
|
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,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:i.treeStore.map(e=>e.steps),fields:p.fields.listStore,responses:p.responses.listStore}),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=
|
|
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};
|
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.1774244905386",
|
|
4
4
|
"devDependencies": {
|
|
5
5
|
"@picked/client": "workspace:*",
|
|
6
6
|
"@repo/eslint-config": "workspace:*",
|
|
@@ -59,7 +59,19 @@
|
|
|
59
59
|
"dist"
|
|
60
60
|
],
|
|
61
61
|
"knip": {
|
|
62
|
+
"entry": [
|
|
63
|
+
"src/index.ts",
|
|
64
|
+
"src/server/index.ts",
|
|
65
|
+
"src/router/index.ts",
|
|
66
|
+
"src/form/index.ts",
|
|
67
|
+
"src/hooks/index.ts",
|
|
68
|
+
"src/plugins/framework/index.ts"
|
|
69
|
+
],
|
|
70
|
+
"ignore": [
|
|
71
|
+
"eslint.config.js"
|
|
72
|
+
],
|
|
62
73
|
"ignoreBinaries": [
|
|
74
|
+
"attw",
|
|
63
75
|
"knip",
|
|
64
76
|
"jscpd",
|
|
65
77
|
"eslint",
|
|
@@ -68,7 +80,7 @@
|
|
|
68
80
|
},
|
|
69
81
|
"module": "./dist/index.js",
|
|
70
82
|
"peerDependencies": {
|
|
71
|
-
"@picked/client": "0.0.1-dev.
|
|
83
|
+
"@picked/client": "0.0.1-dev.1774244905386",
|
|
72
84
|
"effector": "^23.3.0",
|
|
73
85
|
"effector-react": "^23.3.0",
|
|
74
86
|
"react": "19.2.2",
|