@korsolutions/guidon 1.0.16 → 1.0.18
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/README.md +72 -167
- package/dist/commonjs/components/GuidonOverlay.js +9 -20
- package/dist/commonjs/components/GuidonOverlay.js.map +1 -1
- package/dist/commonjs/components/GuidonProvider.js +11 -77
- package/dist/commonjs/components/GuidonProvider.js.map +1 -1
- package/dist/commonjs/components/GuidonTooltip.js +48 -55
- package/dist/commonjs/components/GuidonTooltip.js.map +1 -1
- package/dist/commonjs/components/index.js +2 -2
- package/dist/commonjs/components/index.js.map +1 -1
- package/dist/commonjs/hooks/useGuidonRef.js +38 -7
- package/dist/commonjs/hooks/useGuidonRef.js.map +1 -1
- package/dist/commonjs/index.js.map +1 -1
- package/dist/commonjs/store.js +27 -70
- package/dist/commonjs/store.js.map +1 -1
- package/dist/module/components/GuidonOverlay.js +14 -25
- package/dist/module/components/GuidonOverlay.js.map +1 -1
- package/dist/module/components/GuidonProvider.js +12 -78
- package/dist/module/components/GuidonProvider.js.map +1 -1
- package/dist/module/components/GuidonTooltip.js +53 -60
- package/dist/module/components/GuidonTooltip.js.map +1 -1
- package/dist/module/components/index.js +2 -2
- package/dist/module/components/index.js.map +1 -1
- package/dist/module/hooks/useGuidonRef.js +38 -7
- package/dist/module/hooks/useGuidonRef.js.map +1 -1
- package/dist/module/index.js.map +1 -1
- package/dist/module/store.js +27 -70
- package/dist/module/store.js.map +1 -1
- package/dist/typescript/commonjs/components/GuidonOverlay.d.ts +2 -2
- package/dist/typescript/commonjs/components/GuidonOverlay.d.ts.map +1 -1
- package/dist/typescript/commonjs/components/GuidonProvider.d.ts +4 -4
- package/dist/typescript/commonjs/components/GuidonProvider.d.ts.map +1 -1
- package/dist/typescript/commonjs/components/GuidonTarget.d.ts +1 -1
- package/dist/typescript/commonjs/components/GuidonTarget.d.ts.map +1 -1
- package/dist/typescript/commonjs/components/GuidonTooltip.d.ts +2 -2
- package/dist/typescript/commonjs/components/GuidonTooltip.d.ts.map +1 -1
- package/dist/typescript/commonjs/components/index.d.ts +4 -4
- package/dist/typescript/commonjs/components/index.d.ts.map +1 -1
- package/dist/typescript/commonjs/hooks/useGuidonRef.d.ts +1 -0
- package/dist/typescript/commonjs/hooks/useGuidonRef.d.ts.map +1 -1
- package/dist/typescript/commonjs/index.d.ts +1 -1
- package/dist/typescript/commonjs/index.d.ts.map +1 -1
- package/dist/typescript/commonjs/store.d.ts +11 -23
- package/dist/typescript/commonjs/store.d.ts.map +1 -1
- package/dist/typescript/commonjs/types.d.ts +29 -14
- package/dist/typescript/commonjs/types.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonOverlay.d.ts +2 -2
- package/dist/typescript/module/components/GuidonOverlay.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonProvider.d.ts +4 -4
- package/dist/typescript/module/components/GuidonProvider.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonTarget.d.ts +1 -1
- package/dist/typescript/module/components/GuidonTarget.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonTooltip.d.ts +2 -2
- package/dist/typescript/module/components/GuidonTooltip.d.ts.map +1 -1
- package/dist/typescript/module/components/index.d.ts +4 -4
- package/dist/typescript/module/components/index.d.ts.map +1 -1
- package/dist/typescript/module/hooks/useGuidonRef.d.ts +1 -0
- package/dist/typescript/module/hooks/useGuidonRef.d.ts.map +1 -1
- package/dist/typescript/module/index.d.ts +1 -1
- package/dist/typescript/module/index.d.ts.map +1 -1
- package/dist/typescript/module/store.d.ts +11 -23
- package/dist/typescript/module/store.d.ts.map +1 -1
- package/dist/typescript/module/types.d.ts +29 -14
- package/dist/typescript/module/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/GuidonOverlay.tsx +28 -29
- package/src/components/GuidonProvider.tsx +46 -111
- package/src/components/GuidonTooltip.tsx +125 -91
- package/src/components/index.ts +4 -4
- package/src/hooks/useGuidonRef.ts +67 -9
- package/src/index.ts +1 -0
- package/src/store.ts +44 -75
- package/src/types.ts +30 -14
- package/dist/commonjs/babel.config.js +0 -15
- package/dist/commonjs/babel.config.js.map +0 -1
- package/dist/commonjs/bob.config.js +0 -11
- package/dist/commonjs/bob.config.js.map +0 -1
- package/dist/commonjs/tsconfig.json +0 -32
- package/dist/module/babel.config.js +0 -15
- package/dist/module/babel.config.js.map +0 -1
- package/dist/module/bob.config.js +0 -11
- package/dist/module/bob.config.js.map +0 -1
- package/dist/module/tsconfig.json +0 -32
- package/src/babel.config.js +0 -18
- package/src/bob.config.js +0 -14
- package/src/tsconfig.json +0 -32
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { GuidonStep, GuidonTheme } from "../types";
|
|
2
2
|
interface GuidonTooltipProps {
|
|
3
3
|
theme?: GuidonTheme;
|
|
4
4
|
animationDuration?: number;
|
|
@@ -19,6 +19,6 @@ interface GuidonTooltipProps {
|
|
|
19
19
|
waitingDefault?: string;
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
|
-
export declare function GuidonTooltip({ theme, animationDuration, renderCustomTooltip, labels, }: GuidonTooltipProps): import("react
|
|
22
|
+
export declare function GuidonTooltip({ theme, animationDuration, renderCustomTooltip, labels, }: GuidonTooltipProps): import("react").JSX.Element | null;
|
|
23
23
|
export {};
|
|
24
24
|
//# sourceMappingURL=GuidonTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuidonTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonTooltip.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"GuidonTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonTooltip.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,UAAU,EAEV,WAAW,EAGZ,MAAM,UAAU,CAAC;AAyFlB,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC5B,IAAI,EAAE,UAAU,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,UAAU,EAAE,MAAM,IAAI,CAAC;QACvB,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QACpD,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,iBAAuB,EACvB,mBAAmB,EACnB,MAAW,GACZ,EAAE,kBAAkB,sCAkTpB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
1
|
+
export { GuidonOverlay } from "./GuidonOverlay";
|
|
2
|
+
export { GuidonProvider, useGuidonContext } from "./GuidonProvider";
|
|
3
|
+
export { GuidonTarget } from "./GuidonTarget";
|
|
4
|
+
export { GuidonTooltip } from "./GuidonTooltip";
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
type MeasurableElement = {
|
|
6
6
|
getBoundingClientRect?: () => DOMRect;
|
|
7
7
|
measureInWindow?: (callback: (x: number, y: number, width: number, height: number) => void) => void;
|
|
8
|
+
scrollIntoView?: (options?: ScrollIntoViewOptions) => void;
|
|
8
9
|
};
|
|
9
10
|
/**
|
|
10
11
|
* Hook that returns a function to attach to an element for guidon targeting.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGuidonRef.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useGuidonRef.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,KAAK,iBAAiB,GAAG;IACvB,qBAAqB,CAAC,EAAE,MAAM,OAAO,CAAC;IACtC,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,KACpE,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"useGuidonRef.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useGuidonRef.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,KAAK,iBAAiB,GAAG;IACvB,qBAAqB,CAAC,EAAE,MAAM,OAAO,CAAC;IACtC,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,KACpE,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC5D,CAAC;AA4BF;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,SAAS;yBAoGV,MAAM,YACD,iBAAiB,GAAG,IAAI;EAlG3C;AAED,wBAAgB,iBAAiB,eA+FlB,MAAM,YACD,iBAAiB,GAAG,IAAI,UA2E3C"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { GuidonTarget, GuidonOverlay, GuidonTooltip, GuidonProvider, useGuidonContext, } from "./components";
|
|
2
2
|
export { useGuidon } from "./hooks";
|
|
3
3
|
export { useGuidonStore, Guidon, useGuidonActive, useGuidonStep, useGuidonProgress, useTargetMeasurements, useWaitingState, useIsFloatingStep, } from "./store";
|
|
4
|
-
export type { GuidonStep, GuidonConfig, GuidonTours, GuidonToursConfig, GuidonTourDefinition, GuidonTheme, GuidonProgress, GuidonPersistenceAdapter, GuidonProviderProps, GuidonTargetProps, GuidonTooltipLabels, GuidonTooltipRenderProps, TooltipPosition, FloatingPosition, TargetMeasurements, GuidonState, GuidonActions, GuidonStore, } from "./types";
|
|
4
|
+
export type { GuidonStep, GuidonConfig, GuidonTours, GuidonToursConfig, GuidonTourDefinition, GuidonTheme, GuidonScrollOptions, GuidonProgress, GuidonPersistenceAdapter, GuidonProviderProps, GuidonTargetProps, GuidonTooltipLabels, GuidonTooltipRenderProps, TooltipPosition, FloatingPosition, TargetMeasurements, GuidonState, GuidonActions, GuidonStore, } from "./types";
|
|
5
5
|
export { createNoopAdapter, createMemoryAdapter, createLocalStorageAdapter, createAsyncStorageAdapter, createApiAdapter, createCompositeAdapter, } from "./persistence/adapters";
|
|
6
6
|
export { useGuidonPersistence, useShouldShowGuidon } from "./persistence/hooks";
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EACL,cAAc,EACd,MAAM,EACN,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,EACX,cAAc,EACd,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EACL,cAAc,EACd,MAAM,EACN,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { GuidonStore, GuidonTours, GuidonToursConfig, TargetMeasurements } from "./types";
|
|
2
2
|
export declare const useGuidonStore: import("zustand").UseBoundStore<import("zustand").StoreApi<GuidonStore>>;
|
|
3
3
|
/**
|
|
4
4
|
* Guidon API for external control
|
|
@@ -6,14 +6,8 @@ export declare const useGuidonStore: import("zustand").UseBoundStore<import("zus
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const Guidon: {
|
|
8
8
|
/**
|
|
9
|
-
* Configure
|
|
10
|
-
*/
|
|
11
|
-
configure: (config: GuidonConfig) => void;
|
|
12
|
-
/**
|
|
13
|
-
* Configure multiple named tours.
|
|
14
|
-
* Accepts either GuidonToursConfig (with global theme) or legacy GuidonTours format.
|
|
9
|
+
* Configure multiple named tours with optional global theme.
|
|
15
10
|
* @example
|
|
16
|
-
* // New format with global theme
|
|
17
11
|
* Guidon.configureTours({
|
|
18
12
|
* theme: { primaryColor: '#007AFF' },
|
|
19
13
|
* tours: {
|
|
@@ -21,21 +15,14 @@ export declare const Guidon: {
|
|
|
21
15
|
* profile: { id: 'profile', steps: [...] },
|
|
22
16
|
* },
|
|
23
17
|
* });
|
|
24
|
-
*
|
|
25
|
-
* // Legacy format (still supported)
|
|
26
|
-
* Guidon.configureTours({
|
|
27
|
-
* explore: { id: 'explore', steps: [...] },
|
|
28
|
-
* profile: { id: 'profile', steps: [...] },
|
|
29
|
-
* });
|
|
30
18
|
*/
|
|
31
|
-
configureTours: (config: GuidonToursConfig
|
|
19
|
+
configureTours: (config: GuidonToursConfig) => void;
|
|
32
20
|
/**
|
|
33
|
-
* Start a tour by ID
|
|
21
|
+
* Start a tour by ID
|
|
34
22
|
* @example
|
|
35
23
|
* Guidon.start('explore'); // Start the 'explore' tour
|
|
36
|
-
* Guidon.start(); // Start legacy single config
|
|
37
24
|
*/
|
|
38
|
-
start: (tourId
|
|
25
|
+
start: (tourId: string) => void;
|
|
39
26
|
/**
|
|
40
27
|
* Stop the current tour without completing it
|
|
41
28
|
*/
|
|
@@ -73,7 +60,7 @@ export declare const Guidon: {
|
|
|
73
60
|
*/
|
|
74
61
|
isCompleted: () => boolean;
|
|
75
62
|
/**
|
|
76
|
-
* Get the currently active tour ID
|
|
63
|
+
* Get the currently active tour ID
|
|
77
64
|
*/
|
|
78
65
|
getActiveTourId: () => string | null;
|
|
79
66
|
/**
|
|
@@ -101,15 +88,15 @@ export declare const Guidon: {
|
|
|
101
88
|
* Hook selectors for common use cases
|
|
102
89
|
*/
|
|
103
90
|
export declare const useGuidonActive: () => boolean;
|
|
104
|
-
export declare const useGuidonStep: () => import("./types").GuidonStep | null;
|
|
91
|
+
export declare const useGuidonStep: () => import("./types").GuidonStep | null | undefined;
|
|
105
92
|
export declare const useGuidonProgress: () => {
|
|
106
93
|
currentStep: number;
|
|
107
94
|
totalSteps: number;
|
|
108
95
|
percentage: number;
|
|
109
96
|
};
|
|
110
|
-
export declare const useTargetMeasurements: (targetId: string) => TargetMeasurements;
|
|
97
|
+
export declare const useTargetMeasurements: (targetId: string) => TargetMeasurements | undefined;
|
|
111
98
|
/**
|
|
112
|
-
* Hook to check if the
|
|
99
|
+
* Hook to check if the Guidon is waiting for a target element to mount
|
|
113
100
|
* Returns null if not active, not waiting, or if it's a floating step
|
|
114
101
|
*/
|
|
115
102
|
export declare const useWaitingState: () => {
|
|
@@ -118,7 +105,8 @@ export declare const useWaitingState: () => {
|
|
|
118
105
|
message: string | null;
|
|
119
106
|
} | null;
|
|
120
107
|
/**
|
|
121
|
-
* Hook to check if the current step is a floating step
|
|
108
|
+
* Hook to check if the current step is a floating step,
|
|
109
|
+
* i.e. has no targetId and is centered on device
|
|
122
110
|
*/
|
|
123
111
|
export declare const useIsFloatingStep: () => boolean;
|
|
124
112
|
//# sourceMappingURL=store.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../src/store.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../src/store.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,WAAW,EAEX,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAkBjB,eAAO,MAAM,cAAc,0EA2NxB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,MAAM;IACjB;;;;;;;;;;OAUG;6BACsB,iBAAiB;IAI1C;;;;OAIG;oBACa,MAAM;IAItB;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;sBACe,MAAM;IAIxB;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAMH;;OAEG;;IAKH;;OAEG;;CAEJ,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,eAC4B,CAAC;AAEzD,eAAO,MAAM,aAAa,uDAItB,CAAC;AAEL,eAAO,MAAM,iBAAiB;;;;CAS3B,CAAC;AAEJ,eAAO,MAAM,qBAAqB,GAAI,UAAU,MAAM,mCACsB,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;QAmBzB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,iBAAiB,eAI1B,CAAC"}
|
|
@@ -48,6 +48,26 @@ export interface GuidonStep {
|
|
|
48
48
|
waitingMessage?: string;
|
|
49
49
|
/** Timeout in ms before auto-skipping this step (0 = no timeout) */
|
|
50
50
|
waitTimeout?: number;
|
|
51
|
+
/**
|
|
52
|
+
* Whether to scroll the target element into view when this step becomes active.
|
|
53
|
+
* On web: uses native scrollIntoView()
|
|
54
|
+
* On mobile: requires a registered scroll container
|
|
55
|
+
* @default true
|
|
56
|
+
*/
|
|
57
|
+
scrollIntoView?: boolean;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Scroll behavior configuration
|
|
61
|
+
*/
|
|
62
|
+
export interface GuidonScrollOptions {
|
|
63
|
+
/** Scroll behavior: 'smooth' for animated, 'instant' for immediate */
|
|
64
|
+
behavior?: 'smooth' | 'instant';
|
|
65
|
+
/** Vertical alignment of target in viewport */
|
|
66
|
+
block?: 'start' | 'center' | 'end' | 'nearest';
|
|
67
|
+
/** Horizontal alignment of target in viewport */
|
|
68
|
+
inline?: 'start' | 'center' | 'end' | 'nearest';
|
|
69
|
+
/** Extra padding when scrolling (ensures element isn't at edge) */
|
|
70
|
+
padding?: number;
|
|
51
71
|
}
|
|
52
72
|
/**
|
|
53
73
|
* Theme configuration for guidon styling
|
|
@@ -75,6 +95,8 @@ export interface GuidonTheme {
|
|
|
75
95
|
spotlightBorderRadius?: number;
|
|
76
96
|
/** Padding around the highlighted element */
|
|
77
97
|
spotlightPadding?: number;
|
|
98
|
+
/** Global scroll options when navigating to steps */
|
|
99
|
+
scrollOptions?: GuidonScrollOptions;
|
|
78
100
|
}
|
|
79
101
|
/**
|
|
80
102
|
* State of a specific guidon tour
|
|
@@ -165,10 +187,8 @@ export interface GuidonTooltipRenderProps {
|
|
|
165
187
|
*/
|
|
166
188
|
export interface GuidonProviderProps {
|
|
167
189
|
children: ReactNode;
|
|
168
|
-
/**
|
|
169
|
-
|
|
170
|
-
/** Whether to auto-start when the component mounts */
|
|
171
|
-
autoStart?: boolean;
|
|
190
|
+
/** Tour ID to auto-start when the provider mounts */
|
|
191
|
+
autoStart?: string;
|
|
172
192
|
/** Condition function to determine if guidon should start */
|
|
173
193
|
shouldStart?: () => boolean | Promise<boolean>;
|
|
174
194
|
/** Persistence adapter for saving/loading progress */
|
|
@@ -255,7 +275,7 @@ export interface GuidonState {
|
|
|
255
275
|
globalAnimationDuration?: number;
|
|
256
276
|
/** ID of the currently active tour */
|
|
257
277
|
activeTourId: string | null;
|
|
258
|
-
/** Currently active guidon config (derived from tours + activeTourId
|
|
278
|
+
/** Currently active guidon config (derived from tours + activeTourId) */
|
|
259
279
|
config: GuidonConfig | null;
|
|
260
280
|
/** Whether the guidon is currently active */
|
|
261
281
|
isActive: boolean;
|
|
@@ -278,15 +298,10 @@ export interface GuidonState {
|
|
|
278
298
|
* Internal store actions
|
|
279
299
|
*/
|
|
280
300
|
export interface GuidonActions {
|
|
281
|
-
/** Configure
|
|
282
|
-
|
|
283
|
-
/**
|
|
284
|
-
|
|
285
|
-
* Accepts either GuidonToursConfig (with global theme) or legacy GuidonTours format.
|
|
286
|
-
*/
|
|
287
|
-
configureTours: (config: GuidonToursConfig | GuidonTours) => void;
|
|
288
|
-
/** Start a tour by ID, or the legacy single config if no ID provided */
|
|
289
|
-
start: (tourId?: string) => void;
|
|
301
|
+
/** Configure multiple named tours with global theme support */
|
|
302
|
+
configureTours: (config: GuidonToursConfig) => void;
|
|
303
|
+
/** Start a tour by ID */
|
|
304
|
+
start: (tourId: string) => void;
|
|
290
305
|
/** Stop the current tour without completing it */
|
|
291
306
|
stop: () => void;
|
|
292
307
|
/** Go to the next step */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAChD,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mCAAmC;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnE;;;OAGG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1D;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhE;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAC9D;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpD,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,wBAAwB,CAAC;IAC9C,oDAAoD;IACpD,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC/D,8BAA8B;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAC/D,+BAA+B;IAC/B,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,KAAK,EAAE,WAAW,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qDAAqD;IACrD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sCAAsC;IACtC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,yEAAyE;IACzE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,WAAW,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iEAAiE;IACjE,gBAAgB,EAAE,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,cAAc,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,yBAAyB;IACzB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sBAAsB;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,uCAAuC;IACvC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7E,0BAA0B;IAC1B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,wBAAwB;IACxB,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sBAAsB;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,aAAa,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@korsolutions/guidon",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "A cross-platform walkthrough/onboarding component library for React Native with web support. Features spotlight effects, customizable tooltips, and flexible persistence options. ",
|
|
5
5
|
"repository": "https://github.com/KorSoftwareSolutions/guidon.git",
|
|
6
6
|
"author": "Christian Jimenez <christianjimenezfael@gmail.com>",
|
|
@@ -1,28 +1,31 @@
|
|
|
1
|
-
import { useMemo } from
|
|
1
|
+
import { useMemo } from "react";
|
|
2
2
|
import {
|
|
3
|
-
StyleSheet,
|
|
4
3
|
Dimensions,
|
|
5
|
-
TouchableWithoutFeedback,
|
|
6
4
|
Platform,
|
|
7
|
-
|
|
5
|
+
StyleSheet,
|
|
6
|
+
TouchableWithoutFeedback,
|
|
7
|
+
} from "react-native";
|
|
8
8
|
import Animated, {
|
|
9
|
+
Easing,
|
|
9
10
|
useAnimatedStyle,
|
|
10
11
|
withTiming,
|
|
11
|
-
|
|
12
|
-
} from
|
|
13
|
-
import
|
|
14
|
-
import {
|
|
15
|
-
import type { TargetMeasurements, GuidonTheme, GuidonStore } from '../types';
|
|
12
|
+
} from "react-native-reanimated";
|
|
13
|
+
import Svg, { Defs, G, Mask, Rect } from "react-native-svg";
|
|
14
|
+
import { useGuidonStore, useIsFloatingStep, useWaitingState } from "../store";
|
|
15
|
+
import type { GuidonStore, GuidonTheme, TargetMeasurements } from "../types";
|
|
16
16
|
|
|
17
17
|
const AnimatedSvg = Animated.createAnimatedComponent(Svg);
|
|
18
18
|
|
|
19
19
|
const DEFAULT_THEME: Required<
|
|
20
20
|
Pick<
|
|
21
21
|
GuidonTheme,
|
|
22
|
-
|
|
22
|
+
| "backdropColor"
|
|
23
|
+
| "backdropOpacity"
|
|
24
|
+
| "spotlightBorderRadius"
|
|
25
|
+
| "spotlightPadding"
|
|
23
26
|
>
|
|
24
27
|
> = {
|
|
25
|
-
backdropColor:
|
|
28
|
+
backdropColor: "#000000",
|
|
26
29
|
backdropOpacity: 0.7,
|
|
27
30
|
spotlightBorderRadius: 8,
|
|
28
31
|
spotlightPadding: 8,
|
|
@@ -41,16 +44,19 @@ export function GuidonOverlay({
|
|
|
41
44
|
}: GuidonOverlayProps) {
|
|
42
45
|
const isActive = useGuidonStore((state: GuidonStore) => state.isActive);
|
|
43
46
|
const config = useGuidonStore((state: GuidonStore) => state.config);
|
|
44
|
-
const currentStepIndex = useGuidonStore(
|
|
45
|
-
|
|
47
|
+
const currentStepIndex = useGuidonStore(
|
|
48
|
+
(state: GuidonStore) => state.currentStepIndex,
|
|
49
|
+
);
|
|
50
|
+
const targetMeasurements = useGuidonStore(
|
|
51
|
+
(state: GuidonStore) => state.targetMeasurements,
|
|
52
|
+
);
|
|
46
53
|
|
|
47
|
-
// Check for floating or waiting states
|
|
48
54
|
const isFloatingStep = useIsFloatingStep();
|
|
49
55
|
const waitingState = useWaitingState();
|
|
50
56
|
const isWaiting = waitingState?.isWaiting ?? false;
|
|
51
57
|
|
|
52
58
|
const mergedTheme = { ...DEFAULT_THEME, ...theme };
|
|
53
|
-
const { width: screenWidth, height: screenHeight } = Dimensions.get(
|
|
59
|
+
const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
|
|
54
60
|
|
|
55
61
|
// Get current step's target measurements
|
|
56
62
|
const currentStep = config?.steps[currentStepIndex];
|
|
@@ -59,10 +65,9 @@ export function GuidonOverlay({
|
|
|
59
65
|
? targetMeasurements[currentTargetId]
|
|
60
66
|
: undefined;
|
|
61
67
|
|
|
62
|
-
// Determine if we should show full backdrop (no spotlight cutout)
|
|
63
68
|
const showFullBackdrop = isFloatingStep || isWaiting;
|
|
64
69
|
|
|
65
|
-
//
|
|
70
|
+
// Calculations for spotlight dimensions with padding
|
|
66
71
|
const spotlight = useMemo(() => {
|
|
67
72
|
if (!measurements) {
|
|
68
73
|
return { x: 0, y: 0, width: 0, height: 0 };
|
|
@@ -75,8 +80,7 @@ export function GuidonOverlay({
|
|
|
75
80
|
};
|
|
76
81
|
}, [measurements, mergedTheme.spotlightPadding]);
|
|
77
82
|
|
|
78
|
-
//
|
|
79
|
-
// Show backdrop for: normal steps with measurements, floating steps, or waiting states
|
|
83
|
+
//Stylized for fade in/out
|
|
80
84
|
const shouldShow = isActive && (measurements || showFullBackdrop);
|
|
81
85
|
const animatedStyle = useAnimatedStyle(() => {
|
|
82
86
|
return {
|
|
@@ -91,15 +95,14 @@ export function GuidonOverlay({
|
|
|
91
95
|
return null;
|
|
92
96
|
}
|
|
93
97
|
|
|
94
|
-
// Render full backdrop without spotlight for floating steps or waiting states
|
|
95
98
|
if (showFullBackdrop) {
|
|
96
|
-
if (Platform.OS ===
|
|
99
|
+
if (Platform.OS === "web") {
|
|
97
100
|
return (
|
|
98
101
|
<TouchableWithoutFeedback onPress={onBackdropPress}>
|
|
99
102
|
<Animated.View style={[styles.container, animatedStyle]}>
|
|
100
103
|
<div
|
|
101
104
|
style={{
|
|
102
|
-
position:
|
|
105
|
+
position: "absolute",
|
|
103
106
|
inset: 0,
|
|
104
107
|
backgroundColor: mergedTheme.backdropColor,
|
|
105
108
|
opacity: mergedTheme.backdropOpacity,
|
|
@@ -132,19 +135,17 @@ export function GuidonOverlay({
|
|
|
132
135
|
);
|
|
133
136
|
}
|
|
134
137
|
|
|
135
|
-
// If we have a target but no measurements yet, don't render anything
|
|
136
138
|
if (!measurements) {
|
|
137
139
|
return null;
|
|
138
140
|
}
|
|
139
141
|
|
|
140
|
-
|
|
141
|
-
if (Platform.OS === 'web') {
|
|
142
|
+
if (Platform.OS === "web") {
|
|
142
143
|
return (
|
|
143
144
|
<TouchableWithoutFeedback onPress={onBackdropPress}>
|
|
144
145
|
<Animated.View style={[styles.container, animatedStyle]}>
|
|
145
146
|
<div
|
|
146
147
|
style={{
|
|
147
|
-
position:
|
|
148
|
+
position: "absolute",
|
|
148
149
|
inset: 0,
|
|
149
150
|
backgroundColor: mergedTheme.backdropColor,
|
|
150
151
|
opacity: mergedTheme.backdropOpacity,
|
|
@@ -167,7 +168,7 @@ export function GuidonOverlay({
|
|
|
167
168
|
);
|
|
168
169
|
}
|
|
169
170
|
|
|
170
|
-
// Native implementation
|
|
171
|
+
// Native implementation
|
|
171
172
|
return (
|
|
172
173
|
<TouchableWithoutFeedback onPress={onBackdropPress}>
|
|
173
174
|
<AnimatedSvg
|
|
@@ -178,9 +179,7 @@ export function GuidonOverlay({
|
|
|
178
179
|
>
|
|
179
180
|
<Defs>
|
|
180
181
|
<Mask id="spotlight-mask">
|
|
181
|
-
{/* White background (visible) */}
|
|
182
182
|
<Rect x="0" y="0" width="100%" height="100%" fill="white" />
|
|
183
|
-
{/* Black cutout (transparent) */}
|
|
184
183
|
<Rect
|
|
185
184
|
x={spotlight.x}
|
|
186
185
|
y={spotlight.y}
|
|
@@ -1,19 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
GuidonProviderProps,
|
|
8
|
-
GuidonConfig,
|
|
9
|
-
GuidonStore,
|
|
10
|
-
} from '../types';
|
|
1
|
+
import { createContext, useCallback, useContext, useEffect } from "react";
|
|
2
|
+
import { useGuidonPersistence } from "../persistence/hooks";
|
|
3
|
+
import { useGuidonStore, useWaitingState } from "../store";
|
|
4
|
+
import type { GuidonProviderProps, GuidonStore } from "../types";
|
|
5
|
+
import { GuidonOverlay } from "./GuidonOverlay";
|
|
6
|
+
import { GuidonTooltip } from "./GuidonTooltip";
|
|
11
7
|
|
|
12
8
|
interface GuidonContextValue {
|
|
13
|
-
start: (tourId
|
|
9
|
+
start: (tourId: string) => void;
|
|
14
10
|
skip: () => void;
|
|
15
11
|
reset: () => void;
|
|
16
|
-
replay: () => Promise<void>;
|
|
12
|
+
replay: (tourId: string) => Promise<void>;
|
|
17
13
|
isActive: boolean;
|
|
18
14
|
isCompleted: boolean;
|
|
19
15
|
isLoading: boolean;
|
|
@@ -24,28 +20,27 @@ const GuidonContext = createContext<GuidonContextValue | null>(null);
|
|
|
24
20
|
export function useGuidonContext() {
|
|
25
21
|
const context = useContext(GuidonContext);
|
|
26
22
|
if (!context) {
|
|
27
|
-
throw new Error(
|
|
23
|
+
throw new Error("useGuidonContext must be used within a GuidonProvider");
|
|
28
24
|
}
|
|
29
25
|
return context;
|
|
30
26
|
}
|
|
31
27
|
|
|
32
28
|
export function GuidonProvider({
|
|
33
29
|
children,
|
|
34
|
-
config,
|
|
35
|
-
autoStart = true,
|
|
36
|
-
shouldStart,
|
|
37
30
|
persistenceAdapter,
|
|
38
31
|
portalComponent: Portal,
|
|
39
32
|
renderTooltip,
|
|
40
33
|
tooltipLabels,
|
|
41
34
|
onBackdropPress,
|
|
42
35
|
}: GuidonProviderProps) {
|
|
43
|
-
const hasInitialized = useRef(false);
|
|
44
36
|
const isActive = useGuidonStore((state: GuidonStore) => state.isActive);
|
|
45
|
-
const storeIsCompleted = useGuidonStore(
|
|
37
|
+
const storeIsCompleted = useGuidonStore(
|
|
38
|
+
(state: GuidonStore) => state.isCompleted,
|
|
39
|
+
);
|
|
46
40
|
const storeConfig = useGuidonStore((state: GuidonStore) => state.config);
|
|
47
|
-
const currentStepIndex = useGuidonStore(
|
|
48
|
-
|
|
41
|
+
const currentStepIndex = useGuidonStore(
|
|
42
|
+
(state: GuidonStore) => state.currentStepIndex,
|
|
43
|
+
);
|
|
49
44
|
const start = useGuidonStore((state: GuidonStore) => state.start);
|
|
50
45
|
const next = useGuidonStore((state: GuidonStore) => state.next);
|
|
51
46
|
const skip = useGuidonStore((state: GuidonStore) => state.skip);
|
|
@@ -54,89 +49,22 @@ export function GuidonProvider({
|
|
|
54
49
|
// Check for waiting state (target element not mounted)
|
|
55
50
|
const waitingState = useWaitingState();
|
|
56
51
|
|
|
57
|
-
// Use config
|
|
58
|
-
const persistenceId =
|
|
52
|
+
// Use store config ID for persistence
|
|
53
|
+
const persistenceId = storeConfig?.id ?? "__guidon_default__";
|
|
59
54
|
|
|
60
55
|
const {
|
|
61
56
|
isLoading,
|
|
62
57
|
isCompleted: persistedCompleted,
|
|
63
|
-
markCompleted,
|
|
64
|
-
markStepViewed,
|
|
65
58
|
clearProgress,
|
|
66
59
|
} = useGuidonPersistence(persistenceAdapter, persistenceId);
|
|
67
60
|
|
|
68
61
|
const isCompleted = storeIsCompleted || persistedCompleted;
|
|
69
62
|
|
|
70
|
-
// Track if we've already configured to prevent re-configuring during active tour
|
|
71
|
-
const hasConfigured = useRef(false);
|
|
72
|
-
const configRef = useRef(config);
|
|
73
|
-
configRef.current = config;
|
|
74
|
-
|
|
75
|
-
// Only configure if a config prop is provided (legacy single-config mode)
|
|
76
|
-
// Don't reconfigure if a tour is already active
|
|
77
|
-
useEffect(() => {
|
|
78
|
-
if (!config) return;
|
|
79
|
-
if (isActive) return; // Don't reconfigure while tour is running
|
|
80
|
-
if (hasConfigured.current && configRef.current === config) return; // Same config, already configured
|
|
81
|
-
|
|
82
|
-
hasConfigured.current = true;
|
|
83
|
-
|
|
84
|
-
const enhancedConfig: GuidonConfig = {
|
|
85
|
-
...config,
|
|
86
|
-
onComplete: async () => {
|
|
87
|
-
config.onComplete?.();
|
|
88
|
-
if (persistenceAdapter) {
|
|
89
|
-
await markCompleted();
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
onSkip: async () => {
|
|
93
|
-
config.onSkip?.();
|
|
94
|
-
if (persistenceAdapter) {
|
|
95
|
-
// Get current step index from store at time of skip
|
|
96
|
-
const currentIdx = useGuidonStore.getState().currentStepIndex;
|
|
97
|
-
await markStepViewed(currentIdx);
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
onStepChange: async (stepIndex, step) => {
|
|
101
|
-
config.onStepChange?.(stepIndex, step);
|
|
102
|
-
if (persistenceAdapter) {
|
|
103
|
-
await markStepViewed(stepIndex);
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
configure(enhancedConfig);
|
|
109
|
-
}, [config, configure, persistenceAdapter, markCompleted, markStepViewed, isActive]);
|
|
110
|
-
|
|
111
|
-
// Auto-start only in legacy single-config mode
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
if (!config || !autoStart || hasInitialized.current || isLoading) return;
|
|
114
|
-
|
|
115
|
-
const checkAndStart = async () => {
|
|
116
|
-
hasInitialized.current = true;
|
|
117
|
-
|
|
118
|
-
if (persistedCompleted) return;
|
|
119
|
-
|
|
120
|
-
if (shouldStart) {
|
|
121
|
-
const should = await shouldStart();
|
|
122
|
-
if (!should) return;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
setTimeout(() => {
|
|
126
|
-
start();
|
|
127
|
-
}, 500);
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
checkAndStart();
|
|
131
|
-
}, [config, autoStart, isLoading, persistedCompleted, shouldStart, start]);
|
|
132
|
-
|
|
133
63
|
// Handle wait timeout - auto-skip to next step if waiting too long
|
|
134
|
-
// Works for both legacy and multi-tour mode (reads from store)
|
|
135
64
|
useEffect(() => {
|
|
136
|
-
|
|
137
|
-
if (!activeConfig) return;
|
|
65
|
+
if (!storeConfig) return;
|
|
138
66
|
|
|
139
|
-
const currentStep =
|
|
67
|
+
const currentStep = storeConfig.steps[currentStepIndex];
|
|
140
68
|
const waitTimeout = currentStep?.waitTimeout;
|
|
141
69
|
|
|
142
70
|
// Only set timeout if:
|
|
@@ -149,7 +77,9 @@ export function GuidonProvider({
|
|
|
149
77
|
|
|
150
78
|
const timer = setTimeout(() => {
|
|
151
79
|
// Check if we're still waiting when the timeout fires
|
|
152
|
-
const stillWaiting =
|
|
80
|
+
const stillWaiting =
|
|
81
|
+
useGuidonStore.getState().targetMeasurements[currentStep.targetId!] ===
|
|
82
|
+
undefined;
|
|
153
83
|
if (stillWaiting) {
|
|
154
84
|
next(); // Skip to next step
|
|
155
85
|
}
|
|
@@ -158,22 +88,27 @@ export function GuidonProvider({
|
|
|
158
88
|
return () => clearTimeout(timer);
|
|
159
89
|
}, [currentStepIndex, storeConfig, waitingState?.isWaiting, next]);
|
|
160
90
|
|
|
161
|
-
const replay = useCallback(
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
91
|
+
const replay = useCallback(
|
|
92
|
+
async (tourId: string) => {
|
|
93
|
+
if (persistenceAdapter) {
|
|
94
|
+
await clearProgress();
|
|
95
|
+
}
|
|
96
|
+
reset();
|
|
97
|
+
setTimeout(() => {
|
|
98
|
+
start(tourId);
|
|
99
|
+
}, 100);
|
|
100
|
+
},
|
|
101
|
+
[persistenceAdapter, clearProgress, reset, start],
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
const manualStart = useCallback(
|
|
105
|
+
(tourId: string) => {
|
|
106
|
+
if (!isActive && !isLoading) {
|
|
107
|
+
start(tourId);
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
[isActive, isLoading, start],
|
|
111
|
+
);
|
|
177
112
|
|
|
178
113
|
const contextValue: GuidonContextValue = {
|
|
179
114
|
start: manualStart,
|
|
@@ -185,9 +120,9 @@ export function GuidonProvider({
|
|
|
185
120
|
isLoading,
|
|
186
121
|
};
|
|
187
122
|
|
|
188
|
-
// Get theme from
|
|
189
|
-
const activeTheme =
|
|
190
|
-
const activeDuration =
|
|
123
|
+
// Get theme from store config
|
|
124
|
+
const activeTheme = storeConfig?.theme;
|
|
125
|
+
const activeDuration = storeConfig?.animationDuration;
|
|
191
126
|
|
|
192
127
|
const overlayContent = (
|
|
193
128
|
<>
|