@picked/react 0.0.1-dev.1776310441591 → 0.0.1-dev.1776323343834
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 +4 -1
- package/dist/form/index.d.ts.map +1 -1
- package/dist/form/index.js +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/step.d.ts +4 -3
- package/dist/hooks/step.d.ts.map +1 -1
- package/dist/hooks/step.js +1 -1
- package/dist/utils/map-field-to-react.d.ts +30 -0
- package/dist/utils/map-field-to-react.d.ts.map +1 -0
- package/dist/utils/map-field-to-react.js +1 -0
- package/package.json +2 -2
package/dist/form/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { FormEvent } from 'react';
|
|
2
|
+
import { Store } from 'effector';
|
|
2
3
|
import { FormInstance as CoreFormInstance, ErrorCallback, SubmitCallback, SuccessCallback } from '@picked/client/form';
|
|
4
|
+
import { ReactFormField } from '../utils/map-field-to-react';
|
|
3
5
|
interface UseFormOptions {
|
|
4
6
|
formId: string;
|
|
5
7
|
title: string;
|
|
@@ -9,7 +11,7 @@ interface UseFormOptions {
|
|
|
9
11
|
* React FormInstance — identical to core but with React-compatible form props
|
|
10
12
|
* and callback registration that returns void (cleanup is automatic via useEffect).
|
|
11
13
|
*/
|
|
12
|
-
interface FormInstance<TFieldKeys extends string = string> extends Omit<CoreFormInstance<TFieldKeys>, 'form'> {
|
|
14
|
+
interface FormInstance<TFieldKeys extends string = string> extends Omit<CoreFormInstance<TFieldKeys>, 'form' | 'fields'> {
|
|
13
15
|
form: Omit<CoreFormInstance<TFieldKeys>['form'], 'onBeforeSubmit' | 'onSuccess' | 'onError' | 'props'> & {
|
|
14
16
|
props: {
|
|
15
17
|
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
@@ -18,6 +20,7 @@ interface FormInstance<TFieldKeys extends string = string> extends Omit<CoreForm
|
|
|
18
20
|
onSuccess: (callback: SuccessCallback<TFieldKeys>) => void;
|
|
19
21
|
onError: (callback: ErrorCallback) => void;
|
|
20
22
|
};
|
|
23
|
+
fields: Store<ReactFormField[]>;
|
|
21
24
|
}
|
|
22
25
|
/**
|
|
23
26
|
* React hook wrapping the framework-agnostic createForm from `@picked/client/form`.
|
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":"AAAA,4EAA4E;AAC5E,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
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;AAClE,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,EAEL,KAAK,YAAY,IAAI,gBAAgB,EACrC,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAGlF,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,GAAG,QAAQ,CAClB;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;IACD,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;CAChC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,cAAc,GAAG,YAAY,CAqDlF"}
|
package/dist/form/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{prepareNativeEvent as e}from"../utils/prepare-native-event.js";import{useExperience as
|
|
1
|
+
import{prepareNativeEvent as e}from"../utils/prepare-native-event.js";import{mapFieldToReact as t}from"../utils/map-field-to-react.js";import{useExperience as n,usePicked as r}from"../hooks/client.js";import"../hooks/index.js";import{useEffect as i,useMemo as a,useRef as o}from"react";import{createStore as s}from"effector";import{createForm as c}from"@picked/client/form";function l({formId:l,title:u,fieldKeys:d}){let f=r(),p=n(),m=a(()=>s(u),[u]),h=a(()=>s(d),[d]),g=a(()=>c({client:f,experienceInstance:p},l,m,h),[f,p,l,m,h]),_=o([]);return i(()=>()=>{_.current.forEach(e=>e()),_.current=[]},[]),{form:a(()=>({...g.form,props:{onSubmit:t=>{t.preventDefault(),e(t.nativeEvent,t.currentTarget)&&g.form.props.onsubmit(t.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]),fields:a(()=>g.fields.map(e=>e.map(t),{skipVoid:!1}),[g.fields])}}export{l as useForm};
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export { ClientContext, ClientProvider, ExperienceContext, ExperienceProvider }
|
|
|
5
5
|
export { usePicked, useExperience } from './client';
|
|
6
6
|
export { useStep, useSetStepContext } from './step';
|
|
7
7
|
export type { StepContext } from './step';
|
|
8
|
+
export type { ReactFormField, ReactFormFieldProps } from '../utils/map-field-to-react';
|
|
8
9
|
export { useSessionStorage, useLocalStorage } from './storage';
|
|
9
10
|
export type { UseStorageOptions } from './storage';
|
|
10
11
|
export * from './field';
|
|
@@ -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;AACvB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,WAAW,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,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACtF,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/step.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { FormEvent } from 'react';
|
|
2
2
|
import { Store } from 'effector';
|
|
3
3
|
import { ExperienceStep, ValidationError } from '@picked/client';
|
|
4
|
-
import {
|
|
4
|
+
import { ErrorCallback, SubmitCallback, SuccessCallback } from '@picked/client/form';
|
|
5
|
+
import { ReactFormField } from '../utils/map-field-to-react';
|
|
5
6
|
export interface StepContext {
|
|
6
7
|
step: Store<ExperienceStep>;
|
|
7
|
-
/** Reactive store of fields with
|
|
8
|
-
fields: Store<
|
|
8
|
+
/** Reactive store of fields with React-compatible camelCase event handlers. */
|
|
9
|
+
fields: Store<ReactFormField[]>;
|
|
9
10
|
isActive: boolean;
|
|
10
11
|
/** @deprecated Use `isActive` instead. */
|
|
11
12
|
isActiveStep: boolean;
|
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":"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,
|
|
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,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAIlF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC3B,+EAA+E;IAC/E,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;IAC/B,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,CAiF9D"}
|
package/dist/hooks/step.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{prepareNativeEvent as e}from"../utils/prepare-native-event.js";import{useExperience as
|
|
1
|
+
import{prepareNativeEvent as e}from"../utils/prepare-native-event.js";import{mapFieldToReact as t}from"../utils/map-field-to-react.js";import{useExperience as n,usePicked as r}from"./client.js";import{useStepRouter as i}from"../router/context.js";import{createContext as a,useContext as o,useEffect as s,useMemo as c,useRef as l}from"react";import{createForm as u}from"@picked/client/form";var d=a(null);function f(){let e=o(d);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return e}function p(a){let o=n(),d=r(),{activeStep:f}=i(),p=c(()=>f?.key===a,[f?.key,a]),m=c(()=>o.treeStore.map(e=>e.steps.find(e=>e.key===a)??{id:a,key:a,name:``,fieldKeys:[]}),[o,a]),h=c(()=>m.map(e=>e.name),[m]),g=c(()=>m.map(e=>e.fieldKeys),[m]),_=c(()=>u({client:d,experienceInstance:o},a,h,g),[d,o,a,h,g]),v=l([]);s(()=>()=>{v.current.forEach(e=>e()),v.current=[]},[]);let y=c(()=>({..._.form,props:{onSubmit:t=>{t.preventDefault(),e(t.nativeEvent,t.currentTarget)&&_.form.props.onsubmit(t.nativeEvent)}},onBeforeSubmit:e=>{v.current.push(_.form.onBeforeSubmit(e))},onSuccess:e=>{v.current.push(_.form.onSuccess(e))},onError:e=>{v.current.push(_.form.onError(e))}}),[_]);return{step:m,fields:c(()=>_.fields.map(e=>e.map(t),{skipVoid:!1}),[_.fields]),isActive:p,isActiveStep:p,form:y}}export{d as StepContextProvider,p as useSetStepContext,f as useStep};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { FormField } from '@picked/client/form';
|
|
2
|
+
import { ChangeEvent, FocusEvent, FormEvent } from 'react';
|
|
3
|
+
export interface ReactFormFieldProps {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
key: string;
|
|
7
|
+
value: FormField['props']['value'];
|
|
8
|
+
type: FormField['props']['type'];
|
|
9
|
+
required: boolean;
|
|
10
|
+
placeholder: string | undefined;
|
|
11
|
+
onInput: (e: FormEvent<HTMLElement>) => void;
|
|
12
|
+
onChange: (e: ChangeEvent<HTMLElement>) => void;
|
|
13
|
+
onBlur: (e: FocusEvent<HTMLElement>) => void;
|
|
14
|
+
}
|
|
15
|
+
export type ReactFormField = Omit<FormField, 'props'> & {
|
|
16
|
+
props: ReactFormFieldProps;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Maps a core FormField to a React-compatible version with camelCase event handlers.
|
|
20
|
+
*
|
|
21
|
+
* Replaces lowercase DOM handlers (oninput, onchange, onblur) with React-style
|
|
22
|
+
* camelCase handlers (onInput, onChange, onBlur) that bridge synthetic events to
|
|
23
|
+
* the core SDK.
|
|
24
|
+
*
|
|
25
|
+
* @param {FormField} field - The core form field to map.
|
|
26
|
+
* @returns {ReactFormField} A field with React-compatible props.
|
|
27
|
+
* @example mapFieldToReact(coreField)
|
|
28
|
+
*/
|
|
29
|
+
export declare function mapFieldToReact(field: FormField): ReactFormField;
|
|
30
|
+
//# sourceMappingURL=map-field-to-react.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"map-field-to-react.d.ts","sourceRoot":"","sources":["../../src/utils/map-field-to-react.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AAE/E,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;IAChC,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC5C,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC/C,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CAC7C;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAwBD;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,CAYhE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function e(e){return t=>{Object.defineProperty(t.nativeEvent,`currentTarget`,{value:t.currentTarget,configurable:!0}),e(t.nativeEvent)}}function t(t){let{oninput:n,onchange:r,onblur:i,...a}=t.props;return{...t,props:{...a,onInput:e(n),onChange:e(r),onBlur:e(i)}}}export{t as mapFieldToReact};
|
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.1776323343834",
|
|
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.1776323343834",
|
|
89
89
|
"effector": "^23.3.0",
|
|
90
90
|
"effector-react": "^23.3.0",
|
|
91
91
|
"react": "19.2.2",
|