@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
package/README.md
CHANGED
|
@@ -20,21 +20,13 @@ yarn add react react-native react-native-reanimated react-native-safe-area-conte
|
|
|
20
20
|
|
|
21
21
|
## Quick Start
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
- **Single Tour Mode**: One tour per provider (legacy, simpler for single-screen tours)
|
|
25
|
-
- **Multi-Tour Mode**: Multiple named tours configured once, started from anywhere (recommended for apps with multiple screens)
|
|
26
|
-
|
|
27
|
-
### Multi-Tour Mode (Recommended)
|
|
28
|
-
|
|
29
|
-
Best for apps with tours on multiple screens.
|
|
30
|
-
|
|
31
|
-
#### 1. Configure Tours Once (at app root)
|
|
23
|
+
### 1. Configure Tours (at app root)
|
|
32
24
|
|
|
33
25
|
```tsx
|
|
34
26
|
import { Guidon, GuidonProvider, GuidonToursConfig } from '@korsolutions/guidon';
|
|
35
27
|
|
|
36
28
|
// Configure all tours ONCE outside React (stable reference)
|
|
37
|
-
const config = {
|
|
29
|
+
const config: GuidonToursConfig = {
|
|
38
30
|
// Global theme applies to all tours
|
|
39
31
|
theme: {
|
|
40
32
|
primaryColor: '#007AFF',
|
|
@@ -69,7 +61,7 @@ Guidon.configureTours(config);
|
|
|
69
61
|
export default function App() {
|
|
70
62
|
return (
|
|
71
63
|
<QueryClientProvider client={queryClient}>
|
|
72
|
-
<GuidonProvider>
|
|
64
|
+
<GuidonProvider>
|
|
73
65
|
<Navigation />
|
|
74
66
|
</GuidonProvider>
|
|
75
67
|
</QueryClientProvider>
|
|
@@ -77,13 +69,15 @@ export default function App() {
|
|
|
77
69
|
}
|
|
78
70
|
```
|
|
79
71
|
|
|
80
|
-
|
|
72
|
+
### 2. Start Tours from Screens
|
|
81
73
|
|
|
82
74
|
```tsx
|
|
83
75
|
import { useEffect } from 'react';
|
|
84
|
-
import { Guidon,
|
|
76
|
+
import { Guidon, useGuidon } from '@korsolutions/guidon';
|
|
85
77
|
|
|
86
78
|
function ExploreScreen() {
|
|
79
|
+
const { register } = useGuidon();
|
|
80
|
+
|
|
87
81
|
useEffect(() => {
|
|
88
82
|
Guidon.start('explore'); // Start this screen's tour
|
|
89
83
|
return () => Guidon.stop(); // Stop when leaving screen
|
|
@@ -91,83 +85,28 @@ function ExploreScreen() {
|
|
|
91
85
|
|
|
92
86
|
return (
|
|
93
87
|
<View>
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
</GuidonTarget>
|
|
97
|
-
<GuidonTarget id="filter-btn">
|
|
98
|
-
<Button title="Filter" />
|
|
99
|
-
</GuidonTarget>
|
|
88
|
+
<Button ref={register('search-btn')} title="Search" />
|
|
89
|
+
<Button ref={register('filter-btn')} title="Filter" />
|
|
100
90
|
</View>
|
|
101
91
|
);
|
|
102
92
|
}
|
|
103
93
|
```
|
|
104
94
|
|
|
105
|
-
###
|
|
106
|
-
|
|
107
|
-
For simpler use cases with one tour per screen.
|
|
108
|
-
|
|
109
|
-
#### 1. Define Your Guidon Steps
|
|
110
|
-
|
|
111
|
-
```tsx
|
|
112
|
-
import type { GuidonConfig } from '@korsolutions/guidon';
|
|
113
|
-
|
|
114
|
-
const exploreGuidonConfig: GuidonConfig = {
|
|
115
|
-
id: 'explore-guidon',
|
|
116
|
-
steps: [
|
|
117
|
-
{
|
|
118
|
-
id: 'welcome',
|
|
119
|
-
targetId: 'search-button',
|
|
120
|
-
title: 'Welcome!',
|
|
121
|
-
description: 'Let us show you around the app.',
|
|
122
|
-
tooltipPosition: 'bottom',
|
|
123
|
-
},
|
|
124
|
-
{
|
|
125
|
-
id: 'filters',
|
|
126
|
-
targetId: 'filter-button',
|
|
127
|
-
title: 'Filters',
|
|
128
|
-
description: 'Use filters to find exactly what you need.',
|
|
129
|
-
tooltipPosition: 'bottom',
|
|
130
|
-
},
|
|
131
|
-
],
|
|
132
|
-
theme: {
|
|
133
|
-
primaryColor: '#007AFF',
|
|
134
|
-
backdropOpacity: 0.8,
|
|
135
|
-
},
|
|
136
|
-
onComplete: () => {
|
|
137
|
-
console.log('Guidon completed!');
|
|
138
|
-
},
|
|
139
|
-
};
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
#### 2. Wrap Your Screen with GuidonProvider
|
|
143
|
-
|
|
144
|
-
```tsx
|
|
145
|
-
import { GuidonProvider } from '@korsolutions/guidon';
|
|
146
|
-
|
|
147
|
-
function ExploreScreen() {
|
|
148
|
-
return (
|
|
149
|
-
<GuidonProvider
|
|
150
|
-
config={exploreGuidonConfig}
|
|
151
|
-
autoStart={true}
|
|
152
|
-
>
|
|
153
|
-
<YourScreenContent />
|
|
154
|
-
</GuidonProvider>
|
|
155
|
-
);
|
|
156
|
-
}
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
#### 3. Mark Target Elements with GuidonTarget
|
|
95
|
+
### Alternative: GuidonTarget Component
|
|
160
96
|
|
|
161
97
|
```tsx
|
|
162
98
|
import { GuidonTarget } from '@korsolutions/guidon';
|
|
163
99
|
|
|
164
|
-
function
|
|
100
|
+
function ExploreScreen() {
|
|
165
101
|
return (
|
|
166
|
-
<
|
|
167
|
-
<
|
|
168
|
-
<
|
|
169
|
-
</
|
|
170
|
-
|
|
102
|
+
<View>
|
|
103
|
+
<GuidonTarget targetId="search-btn">
|
|
104
|
+
<Button title="Search" />
|
|
105
|
+
</GuidonTarget>
|
|
106
|
+
<GuidonTarget targetId="filter-btn">
|
|
107
|
+
<Button title="Filter" />
|
|
108
|
+
</GuidonTarget>
|
|
109
|
+
</View>
|
|
171
110
|
);
|
|
172
111
|
}
|
|
173
112
|
```
|
|
@@ -177,24 +116,28 @@ function SearchButton() {
|
|
|
177
116
|
Create steps without a target element for welcome screens or announcements:
|
|
178
117
|
|
|
179
118
|
```tsx
|
|
180
|
-
const config
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
{
|
|
119
|
+
const config = {
|
|
120
|
+
tours: {
|
|
121
|
+
welcome: {
|
|
184
122
|
id: 'welcome',
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
123
|
+
steps: [
|
|
124
|
+
{
|
|
125
|
+
id: 'intro',
|
|
126
|
+
// No targetId - this is a floating step!
|
|
127
|
+
title: 'Welcome to Our App!',
|
|
128
|
+
description: 'Let us show you around.',
|
|
129
|
+
floatingPosition: 'center', // 'center' | 'top' | 'bottom' | 'top-left' | etc.
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
id: 'feature-1',
|
|
133
|
+
targetId: 'some-button',
|
|
134
|
+
title: 'First Feature',
|
|
135
|
+
description: 'This highlights an element.',
|
|
136
|
+
},
|
|
137
|
+
],
|
|
195
138
|
},
|
|
196
|
-
|
|
197
|
-
};
|
|
139
|
+
},
|
|
140
|
+
} satisfies GuidonToursConfig;
|
|
198
141
|
```
|
|
199
142
|
|
|
200
143
|
## Persistence
|
|
@@ -219,10 +162,7 @@ const nativeAdapter = createAsyncStorageAdapter(AsyncStorage);
|
|
|
219
162
|
|
|
220
163
|
function App() {
|
|
221
164
|
return (
|
|
222
|
-
<GuidonProvider
|
|
223
|
-
config={config}
|
|
224
|
-
persistenceAdapter={nativeAdapter}
|
|
225
|
-
>
|
|
165
|
+
<GuidonProvider persistenceAdapter={nativeAdapter}>
|
|
226
166
|
<YourApp />
|
|
227
167
|
</GuidonProvider>
|
|
228
168
|
);
|
|
@@ -276,12 +216,12 @@ Use outside React components or for programmatic control:
|
|
|
276
216
|
```tsx
|
|
277
217
|
import { Guidon } from '@korsolutions/guidon';
|
|
278
218
|
|
|
279
|
-
//
|
|
280
|
-
Guidon.configureTours(
|
|
219
|
+
// Configuration
|
|
220
|
+
Guidon.configureTours(config); // Configure all tours
|
|
221
|
+
|
|
222
|
+
// Control
|
|
281
223
|
Guidon.start('explore'); // Start a specific tour by ID
|
|
282
224
|
Guidon.stop(); // Stop current tour without completing
|
|
283
|
-
|
|
284
|
-
// Navigation
|
|
285
225
|
Guidon.next(); // Go to next step
|
|
286
226
|
Guidon.previous(); // Go to previous step
|
|
287
227
|
Guidon.goToStep(2); // Jump to specific step
|
|
@@ -305,8 +245,7 @@ Guidon.reset(); // Reset to initial state
|
|
|
305
245
|
|
|
306
246
|
| Prop | Type | Default | Description |
|
|
307
247
|
|------|------|---------|-------------|
|
|
308
|
-
| `
|
|
309
|
-
| `autoStart` | `boolean` | `true` | Whether to auto-start when mounted |
|
|
248
|
+
| `autoStart` | `string` | - | Tour ID to auto-start when mounted |
|
|
310
249
|
| `shouldStart` | `() => boolean \| Promise<boolean>` | - | Custom condition for starting |
|
|
311
250
|
| `persistenceAdapter` | `GuidonPersistenceAdapter` | - | Adapter for saving progress |
|
|
312
251
|
| `portalComponent` | `React.ComponentType` | - | Custom portal for overlay rendering |
|
|
@@ -314,18 +253,33 @@ Guidon.reset(); // Reset to initial state
|
|
|
314
253
|
| `tooltipLabels` | `object` | - | Customize button labels |
|
|
315
254
|
| `onBackdropPress` | `() => void` | - | Called when backdrop is pressed |
|
|
316
255
|
|
|
317
|
-
###
|
|
256
|
+
### GuidonToursConfig
|
|
318
257
|
|
|
319
258
|
```tsx
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
259
|
+
import { GuidonToursConfig } from '@korsolutions/guidon';
|
|
260
|
+
|
|
261
|
+
const config = {
|
|
262
|
+
// Global settings apply to all tours
|
|
263
|
+
theme: {
|
|
264
|
+
primaryColor: '#007AFF',
|
|
265
|
+
backdropOpacity: 0.8,
|
|
266
|
+
},
|
|
267
|
+
animationDuration: 300,
|
|
268
|
+
|
|
269
|
+
// Define tours
|
|
270
|
+
tours: {
|
|
271
|
+
explore: {
|
|
272
|
+
id: 'explore',
|
|
273
|
+
steps: [{ id: 's1', title: 'Welcome', description: '...' }],
|
|
274
|
+
onComplete: () => console.log('Done'),
|
|
275
|
+
},
|
|
276
|
+
profile: {
|
|
277
|
+
id: 'profile',
|
|
278
|
+
steps: [...],
|
|
279
|
+
theme: { primaryColor: '#FF0000' }, // Override for this tour only
|
|
280
|
+
},
|
|
281
|
+
},
|
|
282
|
+
} satisfies GuidonToursConfig;
|
|
329
283
|
```
|
|
330
284
|
|
|
331
285
|
### GuidonStep
|
|
@@ -364,53 +318,6 @@ interface GuidonTheme {
|
|
|
364
318
|
}
|
|
365
319
|
```
|
|
366
320
|
|
|
367
|
-
### GuidonToursConfig (Recommended)
|
|
368
|
-
|
|
369
|
-
Use `GuidonToursConfig` for full autocomplete and global theme support:
|
|
370
|
-
|
|
371
|
-
```tsx
|
|
372
|
-
import { GuidonToursConfig } from '@korsolutions/guidon';
|
|
373
|
-
|
|
374
|
-
const config = {
|
|
375
|
-
// Global settings apply to all tours
|
|
376
|
-
theme: {
|
|
377
|
-
primaryColor: '#007AFF',
|
|
378
|
-
backdropOpacity: 0.8,
|
|
379
|
-
},
|
|
380
|
-
animationDuration: 300,
|
|
381
|
-
|
|
382
|
-
// Define tours
|
|
383
|
-
tours: {
|
|
384
|
-
explore: {
|
|
385
|
-
id: 'explore',
|
|
386
|
-
steps: [{ id: 's1', title: 'Welcome', description: '...' }],
|
|
387
|
-
},
|
|
388
|
-
profile: {
|
|
389
|
-
id: 'profile',
|
|
390
|
-
steps: [...],
|
|
391
|
-
theme: { primaryColor: '#FF0000' }, // Override for this tour only
|
|
392
|
-
},
|
|
393
|
-
},
|
|
394
|
-
} satisfies GuidonToursConfig;
|
|
395
|
-
|
|
396
|
-
Guidon.configureTours(config);
|
|
397
|
-
```
|
|
398
|
-
|
|
399
|
-
### GuidonTours (Legacy)
|
|
400
|
-
|
|
401
|
-
The flat format is still supported for backwards compatibility:
|
|
402
|
-
|
|
403
|
-
```tsx
|
|
404
|
-
type GuidonTours = Record<string, GuidonConfig>;
|
|
405
|
-
|
|
406
|
-
const tours: GuidonTours = {
|
|
407
|
-
explore: { id: 'explore', steps: [...], theme: {...} },
|
|
408
|
-
profile: { id: 'profile', steps: [...], theme: {...} },
|
|
409
|
-
};
|
|
410
|
-
|
|
411
|
-
Guidon.configureTours(tours);
|
|
412
|
-
```
|
|
413
|
-
|
|
414
321
|
## Controlling the Guidon
|
|
415
322
|
|
|
416
323
|
### Using the Context Hook
|
|
@@ -424,7 +331,7 @@ function ReplayButton() {
|
|
|
424
331
|
return (
|
|
425
332
|
<>
|
|
426
333
|
{isCompleted && (
|
|
427
|
-
<Button onPress={replay}>Replay Tutorial</Button>
|
|
334
|
+
<Button onPress={() => replay('explore')}>Replay Tutorial</Button>
|
|
428
335
|
)}
|
|
429
336
|
<Button onPress={() => start('explore')}>Start Explore Tour</Button>
|
|
430
337
|
</>
|
|
@@ -460,7 +367,6 @@ function GuidonStatus() {
|
|
|
460
367
|
|
|
461
368
|
```tsx
|
|
462
369
|
<GuidonProvider
|
|
463
|
-
config={config}
|
|
464
370
|
renderTooltip={({ step, currentIndex, totalSteps, onNext, onPrevious, onSkip }) => (
|
|
465
371
|
<View style={styles.customTooltip}>
|
|
466
372
|
<Text style={styles.title}>{step.title}</Text>
|
|
@@ -481,8 +387,7 @@ function GuidonStatus() {
|
|
|
481
387
|
|
|
482
388
|
```tsx
|
|
483
389
|
<GuidonProvider
|
|
484
|
-
|
|
485
|
-
autoStart={true}
|
|
390
|
+
autoStart="welcome"
|
|
486
391
|
shouldStart={async () => {
|
|
487
392
|
// Check if user is new
|
|
488
393
|
const user = await getUser();
|
|
@@ -13,7 +13,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
13
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
14
|
const AnimatedSvg = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.default);
|
|
15
15
|
const DEFAULT_THEME = {
|
|
16
|
-
backdropColor:
|
|
16
|
+
backdropColor: "#000000",
|
|
17
17
|
backdropOpacity: 0.7,
|
|
18
18
|
spotlightBorderRadius: 8,
|
|
19
19
|
spotlightPadding: 8
|
|
@@ -27,8 +27,6 @@ function GuidonOverlay({
|
|
|
27
27
|
const config = (0, _store.useGuidonStore)(state => state.config);
|
|
28
28
|
const currentStepIndex = (0, _store.useGuidonStore)(state => state.currentStepIndex);
|
|
29
29
|
const targetMeasurements = (0, _store.useGuidonStore)(state => state.targetMeasurements);
|
|
30
|
-
|
|
31
|
-
// Check for floating or waiting states
|
|
32
30
|
const isFloatingStep = (0, _store.useIsFloatingStep)();
|
|
33
31
|
const waitingState = (0, _store.useWaitingState)();
|
|
34
32
|
const isWaiting = waitingState?.isWaiting ?? false;
|
|
@@ -39,17 +37,15 @@ function GuidonOverlay({
|
|
|
39
37
|
const {
|
|
40
38
|
width: screenWidth,
|
|
41
39
|
height: screenHeight
|
|
42
|
-
} = _reactNative.Dimensions.get(
|
|
40
|
+
} = _reactNative.Dimensions.get("window");
|
|
43
41
|
|
|
44
42
|
// Get current step's target measurements
|
|
45
43
|
const currentStep = config?.steps[currentStepIndex];
|
|
46
44
|
const currentTargetId = currentStep?.targetId;
|
|
47
45
|
const measurements = currentTargetId ? targetMeasurements[currentTargetId] : undefined;
|
|
48
|
-
|
|
49
|
-
// Determine if we should show full backdrop (no spotlight cutout)
|
|
50
46
|
const showFullBackdrop = isFloatingStep || isWaiting;
|
|
51
47
|
|
|
52
|
-
//
|
|
48
|
+
// Calculations for spotlight dimensions with padding
|
|
53
49
|
const spotlight = (0, _react.useMemo)(() => {
|
|
54
50
|
if (!measurements) {
|
|
55
51
|
return {
|
|
@@ -67,8 +63,7 @@ function GuidonOverlay({
|
|
|
67
63
|
};
|
|
68
64
|
}, [measurements, mergedTheme.spotlightPadding]);
|
|
69
65
|
|
|
70
|
-
//
|
|
71
|
-
// Show backdrop for: normal steps with measurements, floating steps, or waiting states
|
|
66
|
+
//Stylized for fade in/out
|
|
72
67
|
const shouldShow = isActive && (measurements || showFullBackdrop);
|
|
73
68
|
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
74
69
|
return {
|
|
@@ -81,17 +76,15 @@ function GuidonOverlay({
|
|
|
81
76
|
if (!isActive) {
|
|
82
77
|
return null;
|
|
83
78
|
}
|
|
84
|
-
|
|
85
|
-
// Render full backdrop without spotlight for floating steps or waiting states
|
|
86
79
|
if (showFullBackdrop) {
|
|
87
|
-
if (_reactNative.Platform.OS ===
|
|
80
|
+
if (_reactNative.Platform.OS === "web") {
|
|
88
81
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
|
|
89
82
|
onPress: onBackdropPress,
|
|
90
83
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
91
84
|
style: [styles.container, animatedStyle],
|
|
92
85
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
93
86
|
style: {
|
|
94
|
-
position:
|
|
87
|
+
position: "absolute",
|
|
95
88
|
inset: 0,
|
|
96
89
|
backgroundColor: mergedTheme.backdropColor,
|
|
97
90
|
opacity: mergedTheme.backdropOpacity
|
|
@@ -120,21 +113,17 @@ function GuidonOverlay({
|
|
|
120
113
|
})
|
|
121
114
|
});
|
|
122
115
|
}
|
|
123
|
-
|
|
124
|
-
// If we have a target but no measurements yet, don't render anything
|
|
125
116
|
if (!measurements) {
|
|
126
117
|
return null;
|
|
127
118
|
}
|
|
128
|
-
|
|
129
|
-
// For web, use a different approach with CSS
|
|
130
|
-
if (_reactNative.Platform.OS === 'web') {
|
|
119
|
+
if (_reactNative.Platform.OS === "web") {
|
|
131
120
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
|
|
132
121
|
onPress: onBackdropPress,
|
|
133
122
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
134
123
|
style: [styles.container, animatedStyle],
|
|
135
124
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
136
125
|
style: {
|
|
137
|
-
position:
|
|
126
|
+
position: "absolute",
|
|
138
127
|
inset: 0,
|
|
139
128
|
backgroundColor: mergedTheme.backdropColor,
|
|
140
129
|
opacity: mergedTheme.backdropOpacity,
|
|
@@ -156,7 +145,7 @@ function GuidonOverlay({
|
|
|
156
145
|
});
|
|
157
146
|
}
|
|
158
147
|
|
|
159
|
-
// Native implementation
|
|
148
|
+
// Native implementation
|
|
160
149
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
|
|
161
150
|
onPress: onBackdropPress,
|
|
162
151
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnimatedSvg, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_reactNativeSvg","_store","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedSvg","Animated","createAnimatedComponent","Svg","DEFAULT_THEME","backdropColor","backdropOpacity","spotlightBorderRadius","spotlightPadding","GuidonOverlay","theme","animationDuration","onBackdropPress","isActive","useGuidonStore","state","config","currentStepIndex","targetMeasurements","isFloatingStep","useIsFloatingStep","waitingState","useWaitingState","isWaiting","mergedTheme","width","screenWidth","height","screenHeight","Dimensions","currentStep","steps","currentTargetId","targetId","measurements","undefined","showFullBackdrop","spotlight","useMemo","x","y","shouldShow","animatedStyle","useAnimatedStyle","opacity","withTiming","duration","easing","Easing","inOut","ease","Platform","OS","jsx","TouchableWithoutFeedback","onPress","children","View","style","styles","container","position","inset","backgroundColor","viewBox","Rect","fill","fillOpacity","clipPath","jsxs","Defs","Mask","id","rx","ry","G","mask","StyleSheet","create","absoluteFillObject","zIndex"],"sourceRoot":"../../../src","sources":["components/GuidonOverlay.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAMA,IAAAE,sBAAA,GAAAC,uBAAA,CAAAH,OAAA;AAKA,IAAAI,eAAA,GAAAD,uBAAA,CAAAH,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAA8E,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAG,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG9E,MAAMkB,WAAW,GAAGC,8BAAQ,CAACC,uBAAuB,CAACC,uBAAG,CAAC;AAEzD,MAAMC,
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_reactNativeSvg","_store","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedSvg","Animated","createAnimatedComponent","Svg","DEFAULT_THEME","backdropColor","backdropOpacity","spotlightBorderRadius","spotlightPadding","GuidonOverlay","theme","animationDuration","onBackdropPress","isActive","useGuidonStore","state","config","currentStepIndex","targetMeasurements","isFloatingStep","useIsFloatingStep","waitingState","useWaitingState","isWaiting","mergedTheme","width","screenWidth","height","screenHeight","Dimensions","currentStep","steps","currentTargetId","targetId","measurements","undefined","showFullBackdrop","spotlight","useMemo","x","y","shouldShow","animatedStyle","useAnimatedStyle","opacity","withTiming","duration","easing","Easing","inOut","ease","Platform","OS","jsx","TouchableWithoutFeedback","onPress","children","View","style","styles","container","position","inset","backgroundColor","viewBox","Rect","fill","fillOpacity","clipPath","jsxs","Defs","Mask","id","rx","ry","G","mask","StyleSheet","create","absoluteFillObject","zIndex"],"sourceRoot":"../../../src","sources":["components/GuidonOverlay.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.GuidonProvider = GuidonProvider;
|
|
7
7
|
exports.useGuidonContext = useGuidonContext;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var _store = require("../store.js");
|
|
10
9
|
var _hooks = require("../persistence/hooks.js");
|
|
10
|
+
var _store = require("../store.js");
|
|
11
11
|
var _GuidonOverlay = require("./GuidonOverlay.js");
|
|
12
12
|
var _GuidonTooltip = require("./GuidonTooltip.js");
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -15,27 +15,22 @@ const GuidonContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
|
15
15
|
function useGuidonContext() {
|
|
16
16
|
const context = (0, _react.useContext)(GuidonContext);
|
|
17
17
|
if (!context) {
|
|
18
|
-
throw new Error(
|
|
18
|
+
throw new Error("useGuidonContext must be used within a GuidonProvider");
|
|
19
19
|
}
|
|
20
20
|
return context;
|
|
21
21
|
}
|
|
22
22
|
function GuidonProvider({
|
|
23
23
|
children,
|
|
24
|
-
config,
|
|
25
|
-
autoStart = true,
|
|
26
|
-
shouldStart,
|
|
27
24
|
persistenceAdapter,
|
|
28
25
|
portalComponent: Portal,
|
|
29
26
|
renderTooltip,
|
|
30
27
|
tooltipLabels,
|
|
31
28
|
onBackdropPress
|
|
32
29
|
}) {
|
|
33
|
-
const hasInitialized = (0, _react.useRef)(false);
|
|
34
30
|
const isActive = (0, _store.useGuidonStore)(state => state.isActive);
|
|
35
31
|
const storeIsCompleted = (0, _store.useGuidonStore)(state => state.isCompleted);
|
|
36
32
|
const storeConfig = (0, _store.useGuidonStore)(state => state.config);
|
|
37
33
|
const currentStepIndex = (0, _store.useGuidonStore)(state => state.currentStepIndex);
|
|
38
|
-
const configure = (0, _store.useGuidonStore)(state => state.configure);
|
|
39
34
|
const start = (0, _store.useGuidonStore)(state => state.start);
|
|
40
35
|
const next = (0, _store.useGuidonStore)(state => state.next);
|
|
41
36
|
const skip = (0, _store.useGuidonStore)(state => state.skip);
|
|
@@ -44,79 +39,19 @@ function GuidonProvider({
|
|
|
44
39
|
// Check for waiting state (target element not mounted)
|
|
45
40
|
const waitingState = (0, _store.useWaitingState)();
|
|
46
41
|
|
|
47
|
-
// Use config
|
|
48
|
-
const persistenceId =
|
|
42
|
+
// Use store config ID for persistence
|
|
43
|
+
const persistenceId = storeConfig?.id ?? "__guidon_default__";
|
|
49
44
|
const {
|
|
50
45
|
isLoading,
|
|
51
46
|
isCompleted: persistedCompleted,
|
|
52
|
-
markCompleted,
|
|
53
|
-
markStepViewed,
|
|
54
47
|
clearProgress
|
|
55
48
|
} = (0, _hooks.useGuidonPersistence)(persistenceAdapter, persistenceId);
|
|
56
49
|
const isCompleted = storeIsCompleted || persistedCompleted;
|
|
57
50
|
|
|
58
|
-
// Track if we've already configured to prevent re-configuring during active tour
|
|
59
|
-
const hasConfigured = (0, _react.useRef)(false);
|
|
60
|
-
const configRef = (0, _react.useRef)(config);
|
|
61
|
-
configRef.current = config;
|
|
62
|
-
|
|
63
|
-
// Only configure if a config prop is provided (legacy single-config mode)
|
|
64
|
-
// Don't reconfigure if a tour is already active
|
|
65
|
-
(0, _react.useEffect)(() => {
|
|
66
|
-
if (!config) return;
|
|
67
|
-
if (isActive) return; // Don't reconfigure while tour is running
|
|
68
|
-
if (hasConfigured.current && configRef.current === config) return; // Same config, already configured
|
|
69
|
-
|
|
70
|
-
hasConfigured.current = true;
|
|
71
|
-
const enhancedConfig = {
|
|
72
|
-
...config,
|
|
73
|
-
onComplete: async () => {
|
|
74
|
-
config.onComplete?.();
|
|
75
|
-
if (persistenceAdapter) {
|
|
76
|
-
await markCompleted();
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
onSkip: async () => {
|
|
80
|
-
config.onSkip?.();
|
|
81
|
-
if (persistenceAdapter) {
|
|
82
|
-
// Get current step index from store at time of skip
|
|
83
|
-
const currentIdx = _store.useGuidonStore.getState().currentStepIndex;
|
|
84
|
-
await markStepViewed(currentIdx);
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
onStepChange: async (stepIndex, step) => {
|
|
88
|
-
config.onStepChange?.(stepIndex, step);
|
|
89
|
-
if (persistenceAdapter) {
|
|
90
|
-
await markStepViewed(stepIndex);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
configure(enhancedConfig);
|
|
95
|
-
}, [config, configure, persistenceAdapter, markCompleted, markStepViewed, isActive]);
|
|
96
|
-
|
|
97
|
-
// Auto-start only in legacy single-config mode
|
|
98
|
-
(0, _react.useEffect)(() => {
|
|
99
|
-
if (!config || !autoStart || hasInitialized.current || isLoading) return;
|
|
100
|
-
const checkAndStart = async () => {
|
|
101
|
-
hasInitialized.current = true;
|
|
102
|
-
if (persistedCompleted) return;
|
|
103
|
-
if (shouldStart) {
|
|
104
|
-
const should = await shouldStart();
|
|
105
|
-
if (!should) return;
|
|
106
|
-
}
|
|
107
|
-
setTimeout(() => {
|
|
108
|
-
start();
|
|
109
|
-
}, 500);
|
|
110
|
-
};
|
|
111
|
-
checkAndStart();
|
|
112
|
-
}, [config, autoStart, isLoading, persistedCompleted, shouldStart, start]);
|
|
113
|
-
|
|
114
51
|
// Handle wait timeout - auto-skip to next step if waiting too long
|
|
115
|
-
// Works for both legacy and multi-tour mode (reads from store)
|
|
116
52
|
(0, _react.useEffect)(() => {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
const currentStep = activeConfig.steps[currentStepIndex];
|
|
53
|
+
if (!storeConfig) return;
|
|
54
|
+
const currentStep = storeConfig.steps[currentStepIndex];
|
|
120
55
|
const waitTimeout = currentStep?.waitTimeout;
|
|
121
56
|
|
|
122
57
|
// Only set timeout if:
|
|
@@ -135,14 +70,13 @@ function GuidonProvider({
|
|
|
135
70
|
}, waitTimeout);
|
|
136
71
|
return () => clearTimeout(timer);
|
|
137
72
|
}, [currentStepIndex, storeConfig, waitingState?.isWaiting, next]);
|
|
138
|
-
const replay = (0, _react.useCallback)(async
|
|
73
|
+
const replay = (0, _react.useCallback)(async tourId => {
|
|
139
74
|
if (persistenceAdapter) {
|
|
140
75
|
await clearProgress();
|
|
141
76
|
}
|
|
142
77
|
reset();
|
|
143
|
-
hasInitialized.current = false;
|
|
144
78
|
setTimeout(() => {
|
|
145
|
-
start();
|
|
79
|
+
start(tourId);
|
|
146
80
|
}, 100);
|
|
147
81
|
}, [persistenceAdapter, clearProgress, reset, start]);
|
|
148
82
|
const manualStart = (0, _react.useCallback)(tourId => {
|
|
@@ -160,9 +94,9 @@ function GuidonProvider({
|
|
|
160
94
|
isLoading
|
|
161
95
|
};
|
|
162
96
|
|
|
163
|
-
// Get theme from
|
|
164
|
-
const activeTheme =
|
|
165
|
-
const activeDuration =
|
|
97
|
+
// Get theme from store config
|
|
98
|
+
const activeTheme = storeConfig?.theme;
|
|
99
|
+
const activeDuration = storeConfig?.animationDuration;
|
|
166
100
|
const overlayContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
167
101
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidonOverlay.GuidonOverlay, {
|
|
168
102
|
theme: activeTheme,
|