@picked/react 0.0.0-main.250829070939-3cfd3f3 → 0.0.1-dev.1762750479117

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.
Files changed (56) hide show
  1. package/dist/component.d.ts +10 -0
  2. package/dist/component.d.ts.map +1 -0
  3. package/dist/component.js +1 -0
  4. package/dist/context.d.ts +78 -0
  5. package/dist/context.d.ts.map +1 -0
  6. package/dist/context.js +1 -0
  7. package/dist/form/index.d.ts +16 -0
  8. package/dist/form/index.d.ts.map +1 -0
  9. package/dist/form/index.js +1 -0
  10. package/dist/hooks/client.d.ts +16 -0
  11. package/dist/hooks/client.d.ts.map +1 -0
  12. package/dist/hooks/client.js +1 -0
  13. package/dist/hooks/field.d.ts +8 -0
  14. package/dist/hooks/field.d.ts.map +1 -0
  15. package/dist/hooks/field.js +1 -0
  16. package/dist/hooks/index.d.ts +5 -0
  17. package/dist/hooks/index.d.ts.map +1 -0
  18. package/dist/hooks/index.js +1 -0
  19. package/dist/hooks/step.d.ts +26 -0
  20. package/dist/hooks/step.d.ts.map +1 -0
  21. package/dist/hooks/step.js +1 -0
  22. package/dist/hooks/storage.d.ts +8 -0
  23. package/dist/hooks/storage.d.ts.map +1 -0
  24. package/dist/hooks/storage.js +1 -0
  25. package/dist/index.d.ts +2 -1
  26. package/dist/index.d.ts.map +1 -1
  27. package/dist/index.js +1 -1
  28. package/dist/plugins/framework/index.d.ts +3 -0
  29. package/dist/plugins/framework/index.d.ts.map +1 -0
  30. package/dist/plugins/framework/index.js +1 -0
  31. package/dist/plugins/framework/plugin.d.ts +34 -0
  32. package/dist/plugins/framework/plugin.d.ts.map +1 -0
  33. package/dist/plugins/framework/plugin.js +1 -0
  34. package/dist/render/browser.d.ts +7 -0
  35. package/dist/render/browser.d.ts.map +1 -0
  36. package/dist/render/browser.js +1 -0
  37. package/dist/render/server.d.ts +11 -0
  38. package/dist/render/server.d.ts.map +1 -0
  39. package/dist/render/server.js +1 -0
  40. package/dist/router/Step.js +1 -0
  41. package/dist/router/StepRouter.js +1 -0
  42. package/dist/router/context.d.ts +12 -0
  43. package/dist/router/context.d.ts.map +1 -0
  44. package/dist/router/context.js +1 -0
  45. package/dist/router/index.d.ts +4 -0
  46. package/dist/router/index.d.ts.map +1 -0
  47. package/dist/router/index.js +1 -0
  48. package/dist/server/index.d.ts +4 -0
  49. package/dist/server/index.d.ts.map +1 -0
  50. package/dist/server/index.js +1 -0
  51. package/dist/utils/array.d.ts +2 -0
  52. package/dist/utils/array.d.ts.map +1 -0
  53. package/dist/utils/array.js +1 -0
  54. package/package.json +46 -6
  55. package/dist/components/ShadowRoot/ShadowRoot.d.ts +0 -9
  56. package/dist/components/ShadowRoot/ShadowRoot.d.ts.map +0 -1
@@ -0,0 +1,10 @@
1
+ import { AdaptedComponent, AdaptedComponentStyle } from '@picked/client';
2
+ import { ComponentType } from 'react';
3
+ export type ComponentWithProps = ComponentType<any>;
4
+ export declare const adaptReactComponent: (component: ComponentWithProps | Promise<{
5
+ default: ComponentWithProps;
6
+ }>, style?: AdaptedComponentStyle) => AdaptedComponent<"react", ComponentWithProps | Promise<{
7
+ default: ComponentWithProps;
8
+ }>>;
9
+ export declare const isValidAdaptedComponent: (component: AdaptedComponent<string, unknown>) => component is AdaptedComponent<"react", ComponentWithProps>;
10
+ //# sourceMappingURL=component.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;AAKnD,eAAO,MAAM,mBAAmB,GAC9B,WAAW,kBAAkB,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,kBAAkB,CAAA;CAAE,CAAC,EACxE,QAAQ,qBAAqB,KAC5B,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,kBAAkB,CAAA;CAAE,CAAC,CAMzF,CAAA;AAED,eAAO,MAAM,uBAAuB,GAClC,WAAW,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3C,SAAS,IAAI,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAE3D,CAAA"}
@@ -0,0 +1 @@
1
+ const a=(e,t)=>({frameworkName:"react",component:e,style:t}),r=e=>e.frameworkName==="react";export{a as adaptReactComponent,r as isValidAdaptedComponent};
@@ -0,0 +1,78 @@
1
+ import { Picked } from '@picked/client';
2
+ export declare const ClientContext: import('react').Context<Picked | null>;
3
+ export declare const ClientProvider: import('react').Provider<Picked | null>;
4
+ export declare const ExperienceContext: import('react').Context<{
5
+ id: string;
6
+ experienceId: string;
7
+ configStore: import('effector').Store<{
8
+ name: string;
9
+ decisionLogic: import('node_modules/@picked/client/dist/types/logic-engine').LogicRule | undefined;
10
+ targetSelectors: import('@picked/client').ExperienceTarget[];
11
+ initializeOpenLogic: import('node_modules/@picked/client/dist/types/logic-engine').LogicValue | import('node_modules/@picked/client/dist/types/logic-engine').LogicRule;
12
+ }>;
13
+ target: HTMLElement | undefined;
14
+ componentStore: import('effector').Store<{
15
+ name: string;
16
+ component: import('@picked/client').AdaptedComponent<string, unknown>;
17
+ frameworkStore: import('effector').Store<import('@picked/client').Framework | undefined>;
18
+ } | undefined>;
19
+ stateStore: import('effector').StoreWritable<"transitioning" | "ready">;
20
+ isOpenStore: import('effector').StoreWritable<boolean>;
21
+ open: import('effector').EventCallable<void>;
22
+ close: import('effector').EventCallable<void>;
23
+ toggleOpen: import('effector').EventCallable<void>;
24
+ setOpen: import('effector').EventCallable<boolean>;
25
+ treeStore: import('effector').Store<{
26
+ steps: import('@picked/client').ExperienceStep[];
27
+ nodes: import('@picked/client').ExperienceNode[];
28
+ edges: import('@picked/client').ExperienceEdge[];
29
+ conditionals: import('@picked/client').ExperienceConditional[];
30
+ }>;
31
+ currentNodeStore: import('effector').Store<import('@picked/client').ExperienceNode | null>;
32
+ currentStepStore: import('effector').Store<import('@picked/client').ExperienceStep | null>;
33
+ nextReachableStepNodesStore: import('effector').Store<import('@picked/client').ExperienceNode[]>;
34
+ stepsToOriginStore: import('effector').Store<number[]>;
35
+ stepsToLeafStore: import('effector').Store<number[]>;
36
+ goToNextStep: import('effector').EventCallable<void>;
37
+ goToPreviousStep: import('effector').EventCallable<void>;
38
+ goToStepById: import('effector').EventCallable<string>;
39
+ stepsHistoryStore: import('effector').Store<import('@picked/client').HistoryEntry[]>;
40
+ } | null>;
41
+ export declare const ExperienceProvider: import('react').Provider<{
42
+ id: string;
43
+ experienceId: string;
44
+ configStore: import('effector').Store<{
45
+ name: string;
46
+ decisionLogic: import('node_modules/@picked/client/dist/types/logic-engine').LogicRule | undefined;
47
+ targetSelectors: import('@picked/client').ExperienceTarget[];
48
+ initializeOpenLogic: import('node_modules/@picked/client/dist/types/logic-engine').LogicValue | import('node_modules/@picked/client/dist/types/logic-engine').LogicRule;
49
+ }>;
50
+ target: HTMLElement | undefined;
51
+ componentStore: import('effector').Store<{
52
+ name: string;
53
+ component: import('@picked/client').AdaptedComponent<string, unknown>;
54
+ frameworkStore: import('effector').Store<import('@picked/client').Framework | undefined>;
55
+ } | undefined>;
56
+ stateStore: import('effector').StoreWritable<"transitioning" | "ready">;
57
+ isOpenStore: import('effector').StoreWritable<boolean>;
58
+ open: import('effector').EventCallable<void>;
59
+ close: import('effector').EventCallable<void>;
60
+ toggleOpen: import('effector').EventCallable<void>;
61
+ setOpen: import('effector').EventCallable<boolean>;
62
+ treeStore: import('effector').Store<{
63
+ steps: import('@picked/client').ExperienceStep[];
64
+ nodes: import('@picked/client').ExperienceNode[];
65
+ edges: import('@picked/client').ExperienceEdge[];
66
+ conditionals: import('@picked/client').ExperienceConditional[];
67
+ }>;
68
+ currentNodeStore: import('effector').Store<import('@picked/client').ExperienceNode | null>;
69
+ currentStepStore: import('effector').Store<import('@picked/client').ExperienceStep | null>;
70
+ nextReachableStepNodesStore: import('effector').Store<import('@picked/client').ExperienceNode[]>;
71
+ stepsToOriginStore: import('effector').Store<number[]>;
72
+ stepsToLeafStore: import('effector').Store<number[]>;
73
+ goToNextStep: import('effector').EventCallable<void>;
74
+ goToPreviousStep: import('effector').EventCallable<void>;
75
+ goToStepById: import('effector').EventCallable<string>;
76
+ stepsHistoryStore: import('effector').Store<import('@picked/client').HistoryEntry[]>;
77
+ } | null>;
78
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAsB,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEhE,eAAO,MAAM,aAAa,wCAAqC,CAAA;AAC/D,eAAO,MAAM,cAAc,yCAAyB,CAAA;AAEpD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAiD,CAAA;AAC/E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAA6B,CAAA"}
@@ -0,0 +1 @@
1
+ import{createContext as e}from"react";const t=e(null),n=t.Provider,o=e(null),i=o.Provider;export{t as ClientContext,n as ClientProvider,o as ExperienceContext,i as ExperienceProvider};
@@ -0,0 +1,16 @@
1
+ import { ValidationError } from '@picked/client';
2
+ interface GetFormOptions {
3
+ id: string;
4
+ title: string;
5
+ onSuccess?: () => void | Promise<void>;
6
+ onError?: (errors: ValidationError[]) => void | Promise<void>;
7
+ }
8
+ export declare function useForm(options: GetFormOptions): {
9
+ form: {
10
+ onsubmit: (event: SubmitEvent & {
11
+ currentTarget: EventTarget & HTMLFormElement;
12
+ }) => Promise<void>;
13
+ };
14
+ };
15
+ export {};
16
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1 @@
1
+ import{usePicked as v,useExperience as b}from"../hooks/client.js";import"../hooks/step.js";import"react";import"@picked/client";function _(a){const s=v(),i=b(),{id:l,title:c}=a;async function p(f){var m,d;f.preventDefault(),s.eventBus({type:"form_submit",form:{id:l,title:c},experience:i});const y=new FormData(f.currentTarget),n={data:{},push(t){const r=t.questionId,e=this.data[r];e?Array.isArray(e)&&Array.isArray(t.value)?Array.isArray(e)&&Array.isArray(t.value)&&(typeof e[0]=="string"?this.data[r]=[...e,...t.value].map(String):typeof e[0]=="number"?this.data[r]=[...e,...t.value].map(Number):typeof e[0]=="boolean"?this.data[r]=[...e,...t.value].map(u=>!!u):this.data[r]=t.value):this.data[r]=t.value:this.data[r]=t.value}};for(const[t,r]of y.entries()){const e=s.fields.getById(t).getState();if(!e)continue;const u=e.id;switch(e.type){case"text":n.push({questionId:u,value:e.multiple?[String(r)]:String(r)});break;case"number":n.push({questionId:u,value:e.multiple?[Number(r)]:Number(r)});break;case"boolean":n.push({questionId:u,value:e.multiple?[r==="true"]:r==="true"});break}}const{errors:o}=await s.responses.commit(n.data);if(o.length>0){s.eventBus({type:"form_submit_error",form:{id:l,title:c},exception:{reason:o},experience:i}),o.forEach(t=>{s.eventBus({type:"field_validation_error",exception:{reason:[t]},experience:i})}),await((m=a.onError)==null?void 0:m.call(a,o));return}s.eventBus({type:"form_submit_success",form:{id:l,title:c},experience:i}),await((d=a.onSuccess)==null?void 0:d.call(a))}return{form:{onsubmit:p}}}export{_ as useForm};
@@ -0,0 +1,16 @@
1
+ import { ExperienceInstance, Picked } from '@picked/client';
2
+ /**
3
+ * Retrieves the Picked Client for the Experience Instance
4
+ *
5
+ * @returns The Picked client instance that provides access to experiences, steps, and other Picked functionality
6
+ */
7
+ export declare function usePicked(): Picked;
8
+ /**
9
+ * Retrieves the Experience Store for the current Experience Instance
10
+ *
11
+ * @returns The Experience store instance that provides access to experience configuration and state
12
+ */
13
+ export declare function useExperience(): ExperienceInstance;
14
+ export declare const getPicked: typeof usePicked;
15
+ export declare const getExperience: typeof useExperience;
16
+ //# sourceMappingURL=client.d.ts.map
@@ -0,0 +1 @@
1
+ {"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"}
@@ -0,0 +1 @@
1
+ import{useContext as t}from"react";import{ClientContext as n,ExperienceContext as r}from"../context.js";function i(){const e=t(n);if(!e)throw new Error("usePicked must be used within a ClientProvider");return e}function o(){const e=t(r);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};
@@ -0,0 +1,8 @@
1
+ import { Field, FieldValue } from '@picked/client';
2
+ import { Store } from 'effector';
3
+ export interface GetFieldResponse {
4
+ value: Store<FieldValue>;
5
+ field: Store<Field | null>;
6
+ }
7
+ export declare function getField(id: string): GetFieldResponse;
8
+ //# sourceMappingURL=field.d.ts.map
@@ -0,0 +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,EAAE,EAAE,MAAM,GAAG,gBAAgB,CAQrD"}
@@ -0,0 +1 @@
1
+ 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};
@@ -0,0 +1,5 @@
1
+ export { usePicked, useExperience, getPicked, getExperience } from './client';
2
+ export { useStep, useSetStepContext } from './step';
3
+ export { useSessionStorage, useLocalStorage } from './storage';
4
+ export * from './field';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"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"}
@@ -0,0 +1 @@
1
+ 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};
@@ -0,0 +1,26 @@
1
+ import { Store } from 'effector';
2
+ import { Field, Response } from '@picked/client';
3
+ type FieldWithValue = Field & {
4
+ value: Response | undefined;
5
+ };
6
+ type StepWithLabel = {
7
+ id: string;
8
+ label: string;
9
+ };
10
+ export interface StepContext {
11
+ step: Store<StepWithLabel>;
12
+ fields: Store<FieldWithValue[]>;
13
+ isActiveStep?: boolean;
14
+ }
15
+ export declare function useStep(): {
16
+ step: StepWithLabel;
17
+ fields: FieldWithValue[];
18
+ isActiveStep: boolean;
19
+ };
20
+ export declare function useSetStepContext(stepId: string): {
21
+ step: StepWithLabel;
22
+ fields: FieldWithValue[];
23
+ isActiveStep: boolean;
24
+ };
25
+ export {};
26
+ //# sourceMappingURL=step.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AACA,OAAO,EAAsD,KAAK,KAAK,EAAE,MAAM,UAAU,CAAA;AACzF,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,KAAK,CAAC,aAAa,CAAC,CAAA;IAC1B,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAID,wBAAgB,OAAO;;;;EActB;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM;;;;EA+F/C"}
@@ -0,0 +1 @@
1
+ import{createContext as E,useContext as F,useMemo as x}from"react";import{attach as R,createEffect as A,combine as P,createStore as g,sample as k}from"effector";import{evaluateRuleLogic as y}from"@picked/client";import{useUnit as f}from"effector-react";import{useStepRouter as D}from"../router/context.js";import{useExperience as L,usePicked as M}from"./client.js";const U=E(null);function G(){const e=F(U);if(!e)throw new Error("useStep must be used within a StepContextProvider");const i=f(e.step),s=f(e.fields);return{step:i,fields:s,isActiveStep:e.isActiveStep??!1}}function H(e){const i=L(),s=M(),{activeStep:o}=D(),S=x(()=>(o==null?void 0:o.id)===e,[o==null?void 0:o.id,e]),{stepContext:C}=x(()=>{const r=R({source:P({steps:i.treeStore.map(c=>c.steps),fields:s.fields.listStore,responses:s.responses.listStore}),effect:A(async({steps:c,fields:p,responses:h})=>{const l=c.find(t=>t.id===e);if(!l)throw new Error(`Step with id "${e}" not found in the experience tree.`);const w=p.filter(t=>l.fieldIds.includes(t.id)),d=[];for(const t of w)t.condition?await y(s,t.condition)&&d.push(t):d.push(t);const v=d.map(t=>{var m;const a=(m=h.find(b=>b.fieldId===t.id))==null?void 0:m.value;return{...t,value:a}});return{step:{id:l.id,label:l.label},fields:v}})}),u=g({step:{id:e,label:""},fields:[]});return u.on(r.doneData,(c,p)=>p),k({clock:[s.fields.listStore,s.responses.listStore],target:r}),r(),{stepContextFx:r,stepContext:u}},[e,s,i]),n=f(C);return{step:n==null?void 0:n.step,fields:(n==null?void 0:n.fields)||[],isActiveStep:S}}export{H as useSetStepContext,G as useStep};
@@ -0,0 +1,8 @@
1
+ import { StorageScope } from '@picked/client';
2
+ export interface UseStorageOptions {
3
+ fallback: string | undefined | null;
4
+ scope: StorageScope;
5
+ }
6
+ export declare function useSessionStorage(key: string, options: UseStorageOptions): [string | null, (value: string | null) => void];
7
+ export declare function useLocalStorage(key: string, options: UseStorageOptions): [string | null, (value: string | null) => void];
8
+ //# sourceMappingURL=storage.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../src/hooks/storage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAU/D,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;IACnC,KAAK,EAAE,YAAY,CAAA;CACpB;AA+DD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,2BApD9C,MAAM,GAAG,IAAI,KAAK,IAAI,EAsDhD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,2BAxD5C,MAAM,GAAG,IAAI,KAAK,IAAI,EA0DhD"}
@@ -0,0 +1 @@
1
+ import{useState as x,useEffect as a,useCallback as d}from"react";import{createStorageKey as k,supportsSessionStorage as v,supportsLocalStorage as E,sessionStore as K,localStore as L}from"@picked/client";import{useExperience as h}from"./client.js";const y={fallback:null,scope:"global"};function u(o,n,l){const{fallback:i,scope:f}={...y,...l},p=h(),s=o==="session"?K:L,r=o==="session"?v:E,[S,c]=x(i??null),t=k(n,f,p);a(()=>{if(r()){const e=s.get(t).text();e!==null&&c(e)}},[s,t,r]),a(()=>{if(!r())return;const e=m=>{c(m.text())},b=s.subscribe(t,e);return()=>{b()}},[s,t,r]);const g=d(e=>{c(e),r()&&(e?s.set(t,e):s.remove(t))},[s,t,r]);return[S,g]}function j(o,n){return u("session",o,n)}function q(o,n){return u("local",o,n)}export{q as useLocalStorage,j as useSessionStorage};
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export {};
1
+ export { adaptReactComponent, isValidAdaptedComponent } from './component';
2
+ export type * from './component';
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC1E,mBAAmB,aAAa,CAAA"}
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- console.log("@picked/react");
1
+ import{adaptReactComponent as a,isValidAdaptedComponent as e}from"./component.js";export{a as adaptReactComponent,e as isValidAdaptedComponent};
@@ -0,0 +1,3 @@
1
+ export { reactFrameworkPlugin } from './plugin';
2
+ export type * from './plugin';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/framework/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC/C,mBAAmB,UAAU,CAAA"}
@@ -0,0 +1 @@
1
+ import{reactFrameworkPlugin as o}from"./plugin.js";export{o as reactFrameworkPlugin};
@@ -0,0 +1,34 @@
1
+ import { AdaptableComponents, AdaptedComponentStyle, Plugin } from '@picked/client';
2
+ import { ComponentWithProps } from '../../component';
3
+ export type AdapterComponents = Partial<Record<keyof AdaptableComponents, {
4
+ component: ComponentWithProps;
5
+ style?: AdaptedComponentStyle;
6
+ }>>;
7
+ export interface ReactFrameworkPluginOptions {
8
+ components: AdapterComponents;
9
+ stylesheets?: string[];
10
+ css?: string[];
11
+ }
12
+ /**
13
+ * Enables React component rendering compatibility.
14
+ * This plugin registers the React framework and allows rendering React components
15
+ * with the client's experience data.
16
+ *
17
+ * @param {ReactFrameworkPluginOptions} options - Configuration options for the React plugin
18
+ * @returns {Plugin} The plugin.
19
+ *
20
+ * @example
21
+ * ```typescript
22
+ * createClient({
23
+ * plugins: [
24
+ * reactFrameworkPlugin({
25
+ * components: {
26
+ * experience: Experience
27
+ * }
28
+ * })
29
+ * ]
30
+ * })
31
+ * ```
32
+ */
33
+ export declare const reactFrameworkPlugin: (options: ReactFrameworkPluginOptions) => Plugin;
34
+ //# sourceMappingURL=plugin.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/framework/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAU,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAChG,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAG9E,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACrC,MAAM,CACJ,MAAM,mBAAmB,EACzB;IAAE,SAAS,EAAE,kBAAkB,CAAC;IAAC,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAAE,CACjE,CACF,CAAA;AAED,MAAM,WAAW,2BAA2B;IAC1C,UAAU,EAAE,iBAAiB,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,GAAG,CAAC,EAAE,MAAM,EAAE,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,oBAAoB,GAAI,SAAS,2BAA2B,KAAG,MAuB3E,CAAA"}
@@ -0,0 +1 @@
1
+ import{adaptReactComponent as o}from"../../component.js";import{renderReactComponent as m}from"../../render/browser.js";const a=e=>({name:"react-framework",setup:t=>{t.registerFramework({name:"react",render(...n){return m(...n,{stylesheets:e.stylesheets,css:e.css})}});const r=e.components.experience;r&&t.registerComponent("experience",o(r.component,r.style))}});export{a as reactFrameworkPlugin};
@@ -0,0 +1,7 @@
1
+ import { AdaptedComponent, ExperienceInstance, Picked } from '@picked/client';
2
+ export declare const renderReactComponent: (shadowRoot: ShadowRoot, component: AdaptedComponent<string, unknown>, client: Picked, experience: ExperienceInstance, options: {
3
+ stylesheets?: string[];
4
+ css?: string[];
5
+ }) => Promise<void>;
6
+ export declare const unRenderReactComponent: (target: Element) => void;
7
+ //# sourceMappingURL=browser.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../src/render/browser.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAQlF,eAAO,MAAM,oBAAoB,GAC/B,YAAY,UAAU,EACtB,WAAW,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5C,QAAQ,MAAM,EACd,YAAY,kBAAkB,EAC9B,SAAS;IACP,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,GAAG,CAAC,EAAE,MAAM,EAAE,CAAA;CACf,kBAoEF,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,QAAQ,OAAO,SAMrD,CAAA"}
@@ -0,0 +1 @@
1
+ import n from"react";import{createRoot as v}from"react-dom/client";import{isValidAdaptedComponent as A}from"../component.js";import{ClientProvider as E,ExperienceProvider as h}from"../context.js";import{mergeArrays as y}from"../utils/array.js";const l=new WeakMap,x=async(r,t,o,c,a)=>{var p,f;if(!A(t))throw new Error("The component is invalid.");const m=y((p=t.style)==null?void 0:p.sheets,a.stylesheets),d=y((f=t.style)==null?void 0:f.css,a.css);m.length&&m.forEach(s=>{const e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("href",s),e.setAttribute("type","text/css"),e.setAttribute("picked-injected","true"),r.appendChild(e)}),d.length&&d.forEach(s=>{const e=document.createElement("style");e.textContent=s,e.setAttribute("type","text/css"),e.setAttribute("picked-injected","true"),r.appendChild(e)});const u=document.createElement("div");r.appendChild(u);const i=v(u);if(l.set(r,i),t.component instanceof Promise){const{default:s}=await t.component;i.render(n.createElement(E,{value:o},n.createElement(h,{value:c},n.createElement(s,{client:o,experience:c}))));return}const C=t.component;i.render(n.createElement(E,{value:o},n.createElement(h,{value:c},n.createElement(C,{client:o,experience:c}))))},R=r=>{const t=l.get(r);t&&(t.unmount(),l.delete(r))};export{x as renderReactComponent,R as unRenderReactComponent};
@@ -0,0 +1,11 @@
1
+ import { AdaptedComponent, ExperienceInstance, Picked } from '@picked/client';
2
+ export declare const staticRenderReactComponent: (component: AdaptedComponent<string, unknown>, client: Picked, experience: ExperienceInstance, options: {
3
+ stylesheets?: string[];
4
+ css?: string[];
5
+ }) => Promise<{
6
+ stylesheets: string[];
7
+ css: string[];
8
+ body: string;
9
+ head: string;
10
+ }>;
11
+ //# sourceMappingURL=server.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/render/server.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAKlF,eAAO,MAAM,0BAA0B,GACrC,WAAW,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5C,QAAQ,MAAM,EACd,YAAY,kBAAkB,EAC9B,SAAS;IACP,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,GAAG,CAAC,EAAE,MAAM,EAAE,CAAA;CACf;;;;;EAgDF,CAAA"}
@@ -0,0 +1 @@
1
+ import t from"react";import{renderToString as c}from"react-dom/server";import{isValidAdaptedComponent as y}from"../component.js";import{ClientProvider as i,ExperienceProvider as d}from"../context.js";import{mergeArrays as f}from"../utils/array.js";const R=async(e,r,s,m)=>{var n,l;if(!y(e))throw new Error("The component is invalid.");const E=f((n=e.style)==null?void 0:n.sheets,m.stylesheets),p=f((l=e.style)==null?void 0:l.css,m.css);let o;const v="";if(e.component instanceof Promise){const{default:a}=await e.component;o=c(t.createElement(i,{value:r},t.createElement(d,{value:s},t.createElement(a,{client:r,experience:s}))))}else{const a=e.component;o=c(t.createElement(i,{value:r},t.createElement(d,{value:s},t.createElement(a,{client:r,experience:s}))))}return{stylesheets:E,css:p,body:o,head:v}};export{R as staticRenderReactComponent};
@@ -0,0 +1 @@
1
+ import{jsx as l,Fragment as a}from"react/jsx-runtime";import{useState as m,useEffect as p}from"react";import"../context.js";import{useSetStepContext as n}from"../hooks/step.js";import"@picked/client";import{useStepRouter as g}from"./context.js";const d=({id:s,component:t,children:S})=>{const r={id:s},{registerStep:u,unregisterStep:i}=g(),[o,f]=m(null);return n(s),p(()=>(u(r),()=>i(r)),[u,i,r]),p(()=>{t&&typeof t!="function"?Promise.resolve(t).then(e=>{typeof e=="object"&&"default"in e?f(()=>e.default):f(()=>e)}):typeof t=="function"&&f(()=>t)},[t]),t?o?l(o,{}):null:l(a,{children:S})};export{d as default};
@@ -0,0 +1 @@
1
+ import{jsx as g}from"react/jsx-runtime";import{useState as f,useRef as R,useCallback as c,useEffect as S}from"react";import{supportsWindow as h}from"@picked/client";import{useUnit as A}from"effector-react";import{useExperience as E}from"../hooks/client.js";import"../hooks/step.js";import{StepRouterProvider as M}from"./context.js";const V=({children:l})=>{const u=E(),{currentStepStore:m}=u,t=A(m),[p,o]=f(null),s=R(!1),[r,n]=f([]),a=c(e=>{if(h())n(i=>[...i,e]);else{if(s.current)return;e.id===(t==null?void 0:t.id)&&(o(e),s.current=!0)}},[t==null?void 0:t.id]),d=c(e=>{n(i=>i.filter(x=>x!==e))},[]);S(()=>{o(r.find(e=>e.id===(t==null?void 0:t.id))||null)},[r,t==null?void 0:t.id]);const v={activeStep:p,registerStep:a,unregisterStep:d};return t!=null&&t.id?g(M,{value:v,children:l}):null};export{V as default};
@@ -0,0 +1,12 @@
1
+ export interface Step {
2
+ id: string;
3
+ }
4
+ interface ContextOptions {
5
+ activeStep?: Step | null;
6
+ unregisterStep: (step: Step) => void;
7
+ registerStep: (step: Step) => void;
8
+ }
9
+ export declare const StepRouterProvider: import('react').Provider<ContextOptions | null>;
10
+ export declare const useStepRouter: () => ContextOptions;
11
+ export {};
12
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/router/context.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAA;CACX;AAED,UAAU,cAAc;IACtB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,kBAAkB,iDAA6B,CAAA;AAE5D,eAAO,MAAM,aAAa,sBAOzB,CAAA"}
@@ -0,0 +1 @@
1
+ import{createContext as o,useContext as r}from"react";const e=o(null),u=e.Provider,s=()=>{const t=r(e);if(!t)throw new Error("useStepRouter must be used within a StepRouterProvider");return t};export{u as StepRouterProvider,s as useStepRouter};
@@ -0,0 +1,4 @@
1
+ export { default as StepRouter } from './StepRouter';
2
+ export { default as Step } from './Step';
3
+ export * from './context';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/router/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,cAAc,WAAW,CAAA"}
@@ -0,0 +1 @@
1
+ import{default as r}from"./StepRouter.js";import{default as p}from"./Step.js";import{StepRouterProvider as f,useStepRouter as a}from"./context.js";export{p as Step,r as StepRouter,f as StepRouterProvider,a as useStepRouter};
@@ -0,0 +1,4 @@
1
+ import { Renderer } from '@picked/client/server';
2
+ import { AdaptedComponent } from '@picked/client';
3
+ export declare const renderer: Renderer<AdaptedComponent<string, unknown>>;
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAA8B,MAAM,gBAAgB,CAAA;AAIlF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAchE,CAAA"}
@@ -0,0 +1 @@
1
+ import{isValidAdaptedComponent as n}from"../component.js";import{staticRenderReactComponent as d}from"../render/server.js";const m={isValidComponent:n,render:async(o,t,r)=>{const e=await d(o,t,r,{});return{head:e.head,body:e.body}}};export{m as renderer};
@@ -0,0 +1,2 @@
1
+ export declare const mergeArrays: (a?: string[], b?: string[]) => string[];
2
+ //# sourceMappingURL=array.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"array.d.ts","sourceRoot":"","sources":["../../src/utils/array.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,GAAI,IAAI,MAAM,EAAE,EAAE,IAAI,MAAM,EAAE,aAErD,CAAA"}
@@ -0,0 +1 @@
1
+ const t=(r,e)=>[...r||[],...e||[]];export{t as mergeArrays};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@picked/react",
3
- "version": "0.0.0-main.250829070939-3cfd3f3",
3
+ "version": "0.0.1-dev.1762750479117",
4
4
  "devDependencies": {
5
5
  "@picked/client": "workspace:*",
6
6
  "@repo/eslint-config": "workspace:*",
@@ -9,22 +9,61 @@
9
9
  "@types/react": "^19.1.8",
10
10
  "@types/react-dom": "^19.1.6",
11
11
  "@vitejs/plugin-react": "^4.5.2",
12
- "tslib": "^2.8.1",
13
- "vite": "^6.3.5",
12
+ "effector": "^23.3.0",
13
+ "effector-react": "^23.3.0",
14
+ "fast-glob": "^3.3.3",
15
+ "typedoc": "^0.28.5",
16
+ "typedoc-plugin-markdown": "^4.6.3",
17
+ "vite": "^6.4.1",
14
18
  "vite-plugin-dts": "^4.5.4"
15
19
  },
20
+ "exports": {
21
+ ".": {
22
+ "types": "./dist/index.d.ts",
23
+ "import": "./dist/index.js",
24
+ "default": "./dist/index.js"
25
+ },
26
+ "./server": {
27
+ "types": "./dist/server/index.d.ts",
28
+ "import": "./dist/server/index.js",
29
+ "default": "./dist/server/index.js"
30
+ },
31
+ "./router": {
32
+ "types": "./dist/router/index.d.ts",
33
+ "import": "./dist/router/index.js",
34
+ "default": "./dist/router/index.js"
35
+ },
36
+ "./form": {
37
+ "types": "./dist/form/index.d.ts",
38
+ "import": "./dist/form/index.js",
39
+ "default": "./dist/form/index.js"
40
+ },
41
+ "./hooks": {
42
+ "types": "./dist/hooks/index.d.ts",
43
+ "import": "./dist/hooks/index.js",
44
+ "default": "./dist/hooks/index.js"
45
+ },
46
+ "./plugins/framework": {
47
+ "types": "./dist/plugins/framework/index.d.ts",
48
+ "import": "./dist/plugins/framework/index.js",
49
+ "default": "./dist/plugins/framework/index.js"
50
+ }
51
+ },
16
52
  "files": [
17
53
  "dist"
18
54
  ],
19
- "main": "dist",
55
+ "module": "./dist/index.js",
20
56
  "peerDependencies": {
21
- "@picked/client": "0.0.0-main.250829070939-3cfd3f3",
57
+ "@picked/client": "0.0.1-dev.1762750479117",
58
+ "effector": "^23.3.0",
59
+ "effector-react": "^23.3.0",
22
60
  "react": "^19.1.0",
23
61
  "react-dom": "^19.1.0"
24
62
  },
25
63
  "private": false,
26
64
  "scripts": {
27
65
  "build": "vite build",
66
+ "build:docs": "pnpm typedoc",
28
67
  "dev": "vite build --watch",
29
68
  "lint": "eslint .",
30
69
  "lint-files": "eslint",
@@ -33,5 +72,6 @@
33
72
  "test:packaged-types": "attw --pack",
34
73
  "type-check": "tsc -p . --noEmit"
35
74
  },
36
- "type": "module"
75
+ "type": "module",
76
+ "types": "./dist/index.d.ts"
37
77
  }
@@ -1,9 +0,0 @@
1
- import { ReactNode } from 'react';
2
- interface ReactShadowRootProps {
3
- delegatesFocus?: boolean;
4
- mode?: 'open' | 'closed';
5
- children: ReactNode;
6
- }
7
- declare const ReactShadowRoot: ({ delegatesFocus, mode, children, }: Readonly<ReactShadowRootProps>) => import("react/jsx-runtime").JSX.Element | null;
8
- export default ReactShadowRoot;
9
- //# sourceMappingURL=ShadowRoot.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ShadowRoot.d.ts","sourceRoot":"","sources":["../../../src/components/ShadowRoot/ShadowRoot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAMD,QAAA,MAAM,eAAe,GAAI,qCAItB,QAAQ,CAAC,oBAAoB,CAAC,mDA6BhC,CAAA;AAED,eAAe,eAAe,CAAA"}